子供にプログラミングに興味を持ってもらうための、写経3日目。 どんな機能があるかを「感じてもらう」ため、説明は必要最小限。 簡単に動きのある処理が書けるのを楽しんでもらいたいし、 簡単なアニメーション。

プログラムを入力してもらってから保存し、 同じディレクトリにプログラム中で使う画像ファイルを保存し実行。

float  xx = 200 , yy = 200 ; // 絵を描く場所
float  dx = 1 ,   dy = 2 ;   // 絵の動く速度
int    img_size = 50 ;
PImage img ;
void setup() {
size( 400 , 400 ) ;
img = loadImage( "mitsuki.jpg" ) ;
}
void mouseClicked() { // マウスが押されたら移動速度を変える
dx = random( 10 ) - 5 ;
dy = random( 10 ) - 5 ;
}
void draw() {
// 背景を白で塗る
fill( 255 ) ;
rect( 0 , 0 , width , height ) ;
// (xx,yy)に画像を表示
image( img , xx , yy , img_size , img_size ) ;
// 移動
xx += dx ;
yy += dy ;
// 画面端で反射
if ( xx < 0 || xx >= width - img_size )
dx = -dx ;
if ( yy < 0 || yy >= height - img_size )
dy = -dy ;
}

変数,if,画像がらみの関数を「こんなことができるんだぁ…」程度に分かってきたし、 次のステップでは制御構文を説明して、数表表示とか簡単な計算のプログラムかな。

上のお兄ちゃん、普通の高校１年だけど、 夏休み前にプログラミングを勉強したいということだったので、 プログラミングの教え始め。

言語を何で教えるかを悩んだけど、最初は気軽にお絵かき気分で Processingがいいだろうと判断。 Processing ver1.x の頃は、debug 用に print で変数の内容チェック といったことができなかったけど、ver 2 からは print(),println() があるし、問題ないでしょう。

ということで、Processing 入門本を買って、最初のページから。 いきなり fill() , ellipse() やらで簡単なお絵かきなので、 ちょいと理解したら「日の丸」書いてみろ….とチャレンジさせる。

上の日の丸のコードは子供が書いた後で、 変数の知識への興味を持って欲しいので、 パパ答えとして見せておこう。

また、制御構文も理解する必要も出てくるので、 「パズルだよ…」といって、フローチャートで 1..5 の合計を 計算させるプログラムを見せて考えさせてみた。

それなりに、学校の授業のヒマな時に教科書の先のページを チラ見しているようで、 数学の進度で解らないなりにも興味を持っているみたい。