10さいからはじめる「お絵かきロボット」づくり

本記事は[Tech-Circle Hands on Advent Calendar 2016](http://qiita.com/advent-calendar/2016/techcircle)の8日目の記事です。

昨日は[@ryo-ma](http://qiita.com/ryo-ma)による[PythonでPPAP(ペンパイナッポーアッポーペン)をイメージしたオリジナル言語　「PPAPScript」を作ってみた](http://qiita.com/ryo-ma/items/f9d5a0845c5d3acd5d0b)でした。

---

# はじめに
最近は小学生もロボットプログラミングを体験できる、すごい時代になりましたね。

>「未来はすぐそこに」Pepperが小学生にSotaのプログラミングを教える授業が福岡・能古島で開催　ー　ロボスタ
>　http://robotstart.info/2016/11/30/pepper-sota-nokonoshima.html

先日お会いした**9歳の少年も、NaoやPepperでバリバリプログラミング**していて、このような子たちが未来の日本を作っていくんだなぁとしみじみしました。

そこで今回はそれに触発されて、**プログラミング経験のない小学生でもはじめられる、「お絵かきロボット」の作り方**を紹介したいと思います！（主にソフトウェアが中心）

※ここから10歳のお子さま向けの文体になりますのでご了承ください

#GoPiGoとScratch
お絵かきロボットを作るために、ロボットは**「GoPiGo（ゴーパイゴー）」**、プログラミングツールは**「Scratch（スクラッチ）」**を使うよ。

[Scratch](https://scratch.mit.edu/)は8さいから16さいの子ども向けに作られていて[（参考）](http://momonestyle.com/programming-language-scratch)、マウスで**ブロック（↓の黄や青色のやつ。命令を表す）をつなげて**いけば、とってもかん単にプログラミングできちゃうんだよ。つまり、とってもかん単にコンピュータに君がやらせたい動作をさせることができるんだ。すごいね！

![スクリーンショット 2016-12-07 1.25.15.png](https://qiita-image-store.s3.amazonaws.com/0/60470/f5abb5dd-95e5-cd19-afb1-87d846d89b54.png)
写真は[公式ページビデオより](https://vimeo.com/65583694より)

それから、ロボットは対しょう年れいが9さいからの、[GoPiGo](https://www.dexterindustries.com/gopigo/
)を使うよ。これは車みたいに車りんがついている、**「い動ロボット」**だよ。

ラジコンににているけど、GoPiGoはロボットでプログラミングできるから、いろんな動作をおぼえさせたり、GoPiGo自身が考えてい動ができる点がラジコンとちがうところだよ。

ScratchがはじめからGoPiGoにインストールされているから、すぐにGoPiGoでお絵かきロボットづくりを始められるよ！

![image](https://qiita-image-store.s3.amazonaws.com/0/60470/52c8d588-8fb8-f12e-093e-0f568eeb0884.png)

写真は[公式ページより](https://www.dexterindustries.com/shop/gopigo-starter-kit-2/)

ちなみにラズパイを持っていれば、99ドル（約１万円）というお手ごろな（？）ねだんで手に入るよ。（ラズパイがなければ、ラズパイ３がついたセット[StarterKit](https://www.dexterindustries.com/shop/gopigo-starter-kit-2/)が199ドルで売っているよ）。今年サンタさんにおねがいしてみてはどうかな？


#「お絵かきロボット」完成イメージ
![20161205_211450.jpg](https://qiita-image-store.s3.amazonaws.com/0/60470/95292ae8-1639-aec4-b691-41289627dd41.jpeg)

![20161207_221500.jpg](https://qiita-image-store.s3.amazonaws.com/0/60470/746dec1e-0bca-5151-4b39-790b4ec97d3d.jpeg)

・自動お絵かきロボット完成動画（YouTube）
https://youtu.be/P3BFR1BVgaA

# お絵かきロボへの道 1/3 〜ロボを自ざいにあやつれるようになろう〜
お絵かきロボを作る最初の一歩は、ラジコンみたいに**ロボットをPCで自ざいにあやつれるようになる**ことだよ。

サンプルプログラムにパソコンからGoPiGoを自由にそうさできるプログラムが用意されているので、それを使っていくよ。

まず、GoPiGoの電げんスイッチを入れてね。

そして、PCのブラウザにdex.localと打ったら下のように表じされるので、左の"VNC"をクリックしてGoPiGoのなかに入ろう。パスワードはrobots1234だよ。

<img width="1392" alt="スクリーンショット 2016-12-07 19.17.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/60470/1a56a193-f737-14ae-36c3-8cf389f28187.png">


GoPiGoの中に入ったら、下の画面のように表じされるよ。
次に、デスクトップ上のScratchをダブルクリックして起動しよう。

![図5.png](https://qiita-image-store.s3.amazonaws.com/0/60470/c3af760f-6c51-7e47-625b-aef7304f8417.png)


このようなウィンドウが出てくるので、Open Examplesをクリックしよう。

![図17.png](https://qiita-image-store.s3.amazonaws.com/0/60470/c3a9ce58-171d-b715-2fc0-a1e360402089.png)


「GoPiGo control_panel.sb」をダブルクリックしよう。
![スクリーンショット 2016-12-05 6.16.48.png](https://qiita-image-store.s3.amazonaws.com/0/60470/c8276675-fbe3-ff94-ea65-279ac3b3c7f3.png)

つぎのようなウィンドウが出てくるので、「Start Programming」をクリックしよう。

![図8.png](https://qiita-image-store.s3.amazonaws.com/0/60470/751e7bd5-f574-75d0-d1a3-e6b4d86af6ba.png)

こんな画面が表じされるよ。
右のそうさパネルの中にある「ボタン」をクリックして、ロボットをそうじゅうできるよ。

![図9.png](https://qiita-image-store.s3.amazonaws.com/0/60470/ae7a6bb2-f5ae-1ed0-5353-ddbb38d5f98e.png)


↑でぜんしん、↓でこうたい、→で右回転、←で左回転、□で停止だよ。右はじの▼▼と左はじの▲▲は、スピードのへんこうだよ。
**きどう直後はとても速度が速いから、一たんロボットをうら返して、速度を落としてから走らせてね。**

うまくロボットを動かせるようになったかな？

![gopengo_basic.gif](https://qiita-image-store.s3.amazonaws.com/0/60470/bd05b081-8edd-9d32-4b70-00f484362908.gif)


# お絵かきロボへの道 2/3 〜うでのそう着とコントロール〜
##うでのそう着
つぎに、ペンを持たせる「うで」を作ろう！

サーボモーターを使うことで、ペンの上げ・下げができるようになって、自由にお絵かきができるようになるよ。

Starter Kitについているこいつの首の部分のサーボモーターを使うよ。
（持っていない場合は、[これとか](http://akizukidenshi.com/catalog/g/gM-08761/)秋月で400円で売っているよ）

<img width="1334" alt="スクリーンショット 2016-12-05 6.28.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/60470/0dfb80ca-7104-e1cd-13d7-f9b9f0696e1b.png">

https://www.dexterindustries.com/shop/gopigo-starter-kit-2/

かく大図。これ↓↓がサーボモーターだよ。
![20161206_062840.jpg](https://qiita-image-store.s3.amazonaws.com/0/60470/01b8fca1-0ca2-3b3b-fe31-c7d1ccded51a.jpeg)

これを横にして、テープなどでしっかりくっつけて、
![20161206_063238.jpg](https://qiita-image-store.s3.amazonaws.com/0/60470/4d4628f8-ac18-3ae8-f8de-877931f55c22.jpeg)


ペンとサーボをしっかり固定！（しっかり固定できるものであればなんでもいいよ。ボクはその辺にあったホットボンドとアクリル板を使ったよ。ダンボールとボンドとかでもいいかも（未かくにん）。）
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/60470/1be750c9-d9f0-d706-7cfd-071a86f3c782.png)


ジャーン
![20161205_211450.jpg](https://qiita-image-store.s3.amazonaws.com/0/60470/e5025749-855f-29c1-5564-e1e5af0a86c9.jpeg)

サーボの白い部分が水平になったときに、ペンがすい直になるように付けると、後々ペンのコントロールがしやすいかもしれないよ。

##うでのコントロール
ここまできたらつぎに、Scratchを使ってサーボモーターを動かして、ペンの上げ下げできるようにしよう！

さっき開いたコントロールパネルを開いてね。

まず、右の「新しいスプライトをファイルから選ぶ」をクリックしてね。

![図10.png](https://qiita-image-store.s3.amazonaws.com/0/60470/cc6072ec-72ea-d407-a6d0-5d7400ef39ac.png)


スプライトというのは、アイコンみたいなもので、スプライトをクリックすると、それに対おうした動作をつけることができるよ。

アイコンを選ぶよ。なんでもいいんだけど、今回は、「ま法のカギっぽいアイコン」を選んだよ。
<img width="1334" alt="スクリーンショット 2016-12-06 6.41.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/60470/854369e0-92dc-cd82-2eea-e0ef369ee1fb.png">

「ま法のカギっぽいアイコン」がコントロールパネルに追加されたね。

![図11.png](https://qiita-image-store.s3.amazonaws.com/0/60470/31a7531d-750c-513f-a53f-50d6598d5515.png)

最後に、クリックしたらペンを「上げる」、「下げる」の動作を作ろう。

左の「制御（せいぎょ、と読む）」（黄色）のボタンをクリックして、「BACKWORDを送る」を選んで中央にドラッグアンドドロップしよう。

![図12.png](https://qiita-image-store.s3.amazonaws.com/0/60470/7dc973de-b5b9-eeb8-4d1a-a43a7ae7d907.png)


左の「変数」（緑）のボタンをクリックして、「ハローとワールド」を選たくして、中央の「BACKWORD」部分に重なるようにドラッグアンドドロップしよう。うまくいくとこのようになるよ。

![図13.png](https://qiita-image-store.s3.amazonaws.com/0/60470/59c656f9-d885-7817-f484-4f0cbf6b4791.png)


「ハローとワールド」じゃなくて、「SERと100」に変こうしよう。この変こうで、サーボモーターに、角度１００の指令を送っているんだよ（サーボは英語でSERVO）。これはペンを下げる動作だよ。

![図14.png](https://qiita-image-store.s3.amazonaws.com/0/60470/a9b3376e-10e3-6816-4646-c01da0414093.png)


ペンを上げる動作も作ってみよう。コピーアンドペーストで同じものを作って、「SERと60」に変こうしよう。

![図16.png](https://qiita-image-store.s3.amazonaws.com/0/60470/5707eed7-2600-b73f-eda3-8333c4ead78f.png)

作った２つをクリックすると、ペンを上げ下げしてくれるよ。

うまくいったかな？うまくいけば、このように動くよ。ペンがキビキビと動いてかっこいいね！

![go-pen-go_only_pen.gif](https://qiita-image-store.s3.amazonaws.com/0/60470/c832b05c-bc30-39cf-52ee-d844a6831edb.gif)


おめでとう！これで、ペンの上げ下げができるようになったね！

# お絵かきロボへの道 3/3 〜好きな絵を書いてみよう〜
さぁここまで来ればお絵かきロボへあと一歩だ！

さっき使ったコントロールパネルでのそう作と、ペンの上げ下げのそう作を組み合わせて、かん単な絵を書いてみよう！

まずは丸から！

![gopengo_circle.gif](https://qiita-image-store.s3.amazonaws.com/0/60470/112d90be-2843-5217-bdf5-20b089bf8cba.gif)


つぎにちょっとむずかしい四角をかいてみよう！

![gopengo_square.gif](https://qiita-image-store.s3.amazonaws.com/0/60470/544e0227-71a3-362f-dff2-8ac8f386207a.gif)


どうだったかな？立ぱなお絵かきロボットの完成だ！

自由に君の好きな絵を書いて楽しんでね。

# お絵かきロボへの道 上級者向け 〜いざ自動お絵かきロボへ！〜
ここまででは物足りない君！

人間がそう作するんじゃなくて、**ロボットが自動的に絵をかいてくれたらうれしい**よね。

実はScrarchを使って、**GoPiGoの動作をもっと細かくコントロールできる**んだ。

例えば、前に10 tick進む指令を出したかったら、「FORWARD　と　10を送る」のようにすればいいんだ（FORWARDは日本語で「前へ」という意味）。

回転も同じく、90°右に回転する指令を出したかったら、「RIGHT　と　90を送る」のようにすればいいんだ。（RIGHTは日本語で「右」という意味）

他にも色々と用意されている機のうがあって、一らんになっているよ。
![scratch_functions.png](https://qiita-image-store.s3.amazonaws.com/0/60470/e0443d64-d0fc-2833-8876-e2fe7ad579bf.png)

GoPiGo公式HPより　https://raw.githubusercontent.com/DexterInd/GoPiGo/master/Software/Scratch/scratch_functions.png

かん単な絵や文字をGoPiGoが書けるようになるには、その絵や文字を直線（や曲線）に分かいした後に、GoPiGoの前後のい動や左右回転を組み合わせて書く指令をプログラミングすればいいよ。

ためしに、ボクの名字を書いてくれるようにプログラミングしてみたよ。

<img width="1334" alt="スクリーンショット 2016-12-07 0.45.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/60470/5878ec03-8387-24a5-fcf7-c84c3afc29bb.png">

例えば、カタカナの「コ」という字は、直線が三つに分かいできるよね。
直線を引く→右に９０度回転→少し下がる→直線を引く・・・ということを３回くり返すと、「コ」ができるよ。意外とかん単でしょう？

# 全自動お絵かきロボの完成だ！

ボクの名字を書いてくれるデモの完成動画（YouTube）だよ。
https://youtu.be/l96Ni_bqSi4

あと、さらに上級者向けとして、はじめに見せた、顔文字のデモの完成動画だよ。
https://youtu.be/P3BFR1BVgaA

君も自由に好きな文字や絵をGoPiGoに書かせてみよう！

ここで見せた自動お絵かきロボットのScratchのプロジェクトは、GitHub（ギットハブ）で公開しているので、良かったらダウンロードして君のロボットでも試してみてね。

https://github.com/ykoga-kyutech/go-pen-go.git

# 次回
次回の[Tech-Circle Hands on Advent Calendar 2016](http://qiita.com/advent-calendar/2016/techcircle)はAkkaマスターの[negokaz](http://qiita.com/negokaz)さんです。どのような記事を書いてくれるか、とても楽しみですね！

# 参考ページ
- GoPiGoの[GitHub 公式ページ](https://github.com/DexterInd/GoPiGo)
- [小学校で習う漢字 チェックツール](http://orange-factory.com/tool/kanjicheck.html)　ー　オレンジ工房 ORANGE-FACTORY
- [12月9日よりお絵描きロボットキット「mDrawBot」を販売開始します　ー　スイッチサイエンス](https://www.switch-science.com/pressrelease/20151202_mdrawbot/)
....  お絵かきに特化したロボットなので、もっとこまかいお絵かきをしたい場合はこちらがおすすめ