ArduinoとGLCDでEtch A Sketchを作る

このページをスマホなどでご覧になる場合は、画面を横長にする方が読みやすくなります。
製作したEtch A Sketch風のおもちゃ
↑ 画像をクリックすると拡大
製作したEtch A Sketch風のおもちゃ

目次

1. はじめに … 1ページ
2. Etch a Sketchとは … 1ページ
3. Etch A Sketchもどきを作る … 1ページ
4. 122X32モノクログラフィックLCDシールドで動かしてみる … 1ページ
5. GLCD学習シールドキットで動かしてみる … 1ページ

1.はじめに

先日、Twitterで"Etch a Sketch clock powered by Arduino"という動画を、知り合いの人から紹介してもらいました。Etch a Sketch(エッチ・ア・スケッチ)という、2つのダイヤルを回してお絵かきをする知育玩具をArduinoとモーターで制御して、時間を画面に表示するという、変わった時計の動画でした。この時計にも興味を持ったのですが、Etch A Sketchというおもちゃ自体にとても興味を持ったので、Etch A SketchもどきをArduinoとGLCD(グラフィックLCDモジュール)と可変抵抗を使って作ってみました。

Etch a Sketch clock powered by Arduino
今回製作したEtch A Sketch風のおもちゃ

2.Etch a Sketchとは

Etch A Sketchは、日本でポピュラーなせんせいという、お絵かきのおもちゃに似ています。絵を描いた後、消すことができて、繰り返し絵をかけるという点では両者は共通しています。せんせいは磁石が付いたペンで絵を描くのに対し、Etch A Sketchはダイヤルを回して絵を描くという点が異なります。Etch A Sketchでは大人でもうまく絵を描くのが難しく、練習して上手な絵を描いて楽しむ物なので、せんせいよりは大きな子供向けのおもちゃです。

英語の動画で申し訳ないのですが、"How an Etch-A-Sketch Works"という動画を見ると、Etch A Sketchの遊び方と仕組みがとてもよく分かります。

How an Etch-A-Sketch Works

Etch A Sketchには大きな画面があり、画面の下にダイアルが2つ付いています。このダイアルを両手で操作して、一筆書きの絵を描いて遊びます。

左のダイアルを回すと、図1の様に、線が左右に引けます。

図1、左のダイアルの操作
図1、左のダイアルの操作

右のダイアルを回すと、図2の様に、線が上下に引けます。

図2、右のダイアルの操作
図2、右のダイアルの操作

両方のダイヤルを同時に回すことで、自由に一筆書きの絵が描けます。

図3、両方のダイアルの操作
図3、両方のダイアルの操作

描いた絵を消すには、Etch A Sketchの画面が下側になるようにひっくり返して振ればOKです。

3.Etch A Sketchもどきを作る

Etch A Sketchの動画を見て、どうしてもArduinoでEtch A Sketchもどきを作りたくなった私は、手元にあった部品だけで作ることにしました。とても簡単な回路なので、回路の設計・製作と、スケッチの作成を合わせて2~3時間で完成しました。

使った部品はArduino Uno、試作中の128X64ピクセルのシリアル接続GLCD、つまみ付き半固定抵抗(可変抵抗)2つ、そしてタクトスイッチ1個、10kΩの1/4W抵抗、5Pピンソケットです。(他にもユニバーサル基板と配線を少々)

GLCDは、秋月電子のSG128684ASLB-GBという、128X64ピクセルのモノクロ液晶に、Arduino Unoの互換マイコンを積んで、MGLCDライブラリでシリアル制御(RXTXの2線制御)できるようにしたものです。このシリアル制御GLCDは、現在は試作段階ですが、その内に商品化しようと思っています。ちなみにSG128684ASLB-GBのArduinoからの制御法については、ArudinoでグラフィックLCDを動かす(SG12864ASLB-GB編)(1)で解説しています。

写真1、128×64ピクセルのシリアルGLCD
↑ 画像をクリックすると拡大
写真1、128×64ピクセルのシリアルGLCD

つまみ付き半固定抵抗は、以前マルツで買った、東京コスモス電機製のGF063P1KB103(10kΩ)の在庫があったので、それを2個使いました。これで、Etch A Sketchの2つのダイヤルの働きをさせます。本当は多回転のボリュームを使う方が、絵を描きやすいとは思いますが、手元にはありませんでした。

写真2、つまみ付き半固定抵抗
↑ 画像をクリックすると拡大
写真2、つまみ付き半固定抵抗

タクトスイッチは、一般的な6mm角のタクトスイッチです。メーカーは不詳です。このスイッチを押すと、画面が消去されるようにします。

写真3、タクトスイッチ
↑ 画像をクリックすると拡大
写真3、タクトスイッチ

つまみ付き半固定抵抗、タクトスイッチ、プルアップ用の10kΩ抵抗、5Pピンソケットを使って、次の写真のような、コンソール基板を作りました。

写真4、コンソール基板(表側)
↑ 画像をクリックすると拡大
写真4、コンソール基板(表側)
写真5、コンソール基板(裏側)
↑ 画像をクリックすると拡大
写真5、コンソール基板(裏側)

コンソール基板の回路図は次の通りです。

図4、コンソール基板の回路図
図4、コンソール基板の回路図

5Pソケットの各端子は、Arduinoの対応する端子に接続します。(5PソケットGND端子はArduinoのGND端子につなぐといった具合)

装置全体の結線は、ブレッドボード用のジャンパ線を用いて次の様に行います。

図5、全体の結線
図5、全体の結線

Arduinoのスケッチは、次のとおりです。なお、動作にはMGLCDライブラリVer. 0.34が必要です。

#include <mglcd.h>

static mglcd_serial MGLCD(&Serial,500000);
int ScreenWidth;
int ScreenHeight;

void setup()
{
  // Reset LCD
  while(MGLCD.Reset());

  // Get dimensions of screen
  ScreenWidth =MGLCD.GetWidth() ;
  ScreenHeight=MGLCD.GetHeight();
} // setup

void loop()
{
  if(digitalRead(2)== LOW) {
    MGLCD.ClearScreen();
  } else {
    int x=map(analogRead(A4),0,1023,0,ScreenWidth-1);
    int y=map(analogRead(A5),0,1023,ScreenHeight-1,0);
    MGLCD.SetPixel(x,y);
  } // if
} // loop

これで、次のようなEtch A Sketchもどきが動作します。

写真6、製作したEtch A Sketch風のおもちゃ
↑ 画像をクリックすると拡大
写真6、製作したEtch A Sketch風のおもちゃ

4.122X32モノクログラフィックLCDシールドで動かしてみる

実は、先ほどのスケッチは、122X32モノクログラフィックLCDシールドでもそのまま動作します。Arduino Unoに122X32モノクログラフィックLCDシールドを装着し、コンソール基板を配線して、Etch A Sketchにした場合の写真を次に示します。

写真7、122X32モノクログラフィックLCDシールドを使った作例
↑ 画像をクリックすると拡大
写真7、122X32モノクログラフィックLCDシールドを使った作例
122X32モノクログラフィックLCDシールド 商品名 122X32モノクログラフィックLCDシールド
税抜き小売価格 3333円
販売店 スイッチサイエンス
サポートページ

5.GLCD学習シールドキットで動かしてみる

GLCD学習シールドキットを使っても、Etch A Sketchもどきを作れますが、このシールドのGLCDはシリアル接続ではなく、パラレル接続のため、スケッチの一部を書き直す必要があります。GLCD学習シールドキット用に書き直したスケッチを次に示します。なお、動作にはMGLCDライブラリVer. 0.34が必要です。

#include <mglcd.h>

static const TLcdPinAssignTable PinAssignTable={
    A0_DI  : A3, // A0
    CS1_E1 : A0, // E1
    CS2_E2 : A1, // E2
    E      : MGLCD_UNUSED_PIN,
    RW     : A2,
    DB0    : 8 ,
    DB1    : 9 ,
    DB2    : 10,
    DB3    : 11,
    DB4    : 4 ,
    DB5    : 5 ,
    DB6    : 6,
    DB7    : 7
}; // PinAssignTable;

static mglcd_S12232ZA MGLCD(PinAssignTable);
int ScreenWidth;
int ScreenHeight;

void setup()
{
  // Enable Oscillator for charge pump
  pinMode(3,OUTPUT);
  analogWrite(3,127);

  // Reset LCD
  while(MGLCD.Reset());
  
  // Get dimensions of screen
  ScreenWidth =MGLCD.GetWidth() ;
  ScreenHeight=MGLCD.GetHeight();
} // setup

void loop()
{
  if(digitalRead(2)== LOW) {
    MGLCD.ClearScreen();
  } else {
    int x=map(analogRead(A4),0,1023,0,ScreenWidth-1);
    int y=map(analogRead(A5),0,1023,ScreenHeight-1,0);
    MGLCD.SetPixel(x,y);
  } // if
} // loop

また、次にGLCD学習シールドキットを使って作ったEtch A Sketchの写真を次に示します。

写真8、GLCD学習シールドキットを使った作例
↑ 画像をクリックすると拡大
写真8、GLCD学習シールドキットを使った作例
GLCD学習シールドキット 商品名 GLCD学習シールドキット
税抜き小売価格 1410円
販売店 スイッチサイエンス
サポートページ

このページで使われている用語の解説

関連ページ

関連製品

122X32モノクログラフィックLCDシールド 商品名 122X32モノクログラフィックLCDシールド
税抜き小売価格 3333円
販売店 スイッチサイエンス
サポートページ
GLCD学習シールドキット 商品名 GLCD学習シールドキット
税抜き小売価格 1410円
販売店 スイッチサイエンス
サポートページ
Arduino 電子工作
このサイトの記事が本になりました。
書名:Arduino 電子工作
ISBN:978-4-7775-1941-5
工学社の書籍の内容の紹介ページ
本のカバーの写真か書名をクリックすると、Amazonの書籍購入ページに移動します。