お絵かきおもちゃ「Etch-A-Sketch」があまりにも懐かしかったので操作感を再現するためにWeb版を作った

f:id:piro_suke:20170603233743p:plain

小さい頃に気に入って遊んでたあのお絵かきおもちゃ、

なんだったかな、

と思って検索したら「Etch-A-Sketch」という製品だった。

懐かしい。

左右のダイアルをまわすと、上下左右にポインタが動いて線が描かれる。

くるくるダイアルを回してポインタを一生懸命動かして絵を描いていくわけだ。

両方のダイアルを同時に回すことで斜めの線を描いたりもできるのだけど、

それが結構難しくて、ふにゃふにゃした線になる。

絵を消したい時は、裏向けてシャカシャカ振ると消える。

最終的には直線を組み合わせた角ばった絵になっちゃうのだけど、

それがまた独特で楽しかった。

つくる

なんてことを思い出したら猛烈に遊びたくなったので、

記憶を頼りに似たようなものをWeb版で作ってみた。

最大の特徴であるダイアルで操作する仕組みは

残念ながら実現するのが難しそうだったので、

キーボードの特定キーを押すとポインタを上下左右に動かせるようにした。

d : 左に移動

f : 右に移動

j : 上に移動

k : 下に移動

c : スケッチを削除

なかなかチープな仕上がりになってしまったけど、

描いてみると記憶にあるのとそこそこ似た操作感で、結構満足できた。

コードは ClojureScript + Quil で作ってみたのだけど、

キーイベントを定義して

ポインタの位置にドットを描くだけなので、案外簡単にできてよかった。

ソースはこちら。