小学校教員のためのプログラミング入門

黒板を作る

今回は自分の力で一からスケッチを作ってみましょう.題材は黒板です.次にヒントを示しますので,今まで学んだことを元にがんばってみてください.

手順その1

 まずは,白色で描ける黒板スケッチを作ってみましょう.

9-1.jpg プログラム

  ウィンドウサイズはちょっと大きめ

 黒板を模倣,つまりお絵かきソフトみたいなものを作るので,ウィンドウのサイズは少し大きめにしてみましょう.ウィンドウサイズを設定するメソッドは size です.

 黒板に似せるため背景色は深緑色にしてみましょう.背景色を設定するメソッドは background です.どのような値で,どのような色になるかを知りたい場合は,PDE のメニューから [Tools] - [Color Selecter] を選んでみてください.

 これらの初期設定は setup メソッド内で行えばよいでしょう.

  ドラッグで描画

 黒板への筆記は,ドラッグを利用してみましょう.これは,マウスダウンされてからマウスアップするまで,直前のマウスカーソルの位置から,現在のマウスカーソルの位置まで線を描けばよいはずです.色はとりあえず白,線の太さは少し太めにした方がチョークっぽくなると思います.

 マウスダウンされたときに呼び出されるメソッドは mousePressed,マウスアップされたときに呼び出されるメソッドは mouseReleased です.線の描画は draw メソッド内で行うのがよいので,常にマウスドラッグ中であるかどうかを示すフラグ変数を用意し,mousePressed と mouseReleased で変更するようにしましょう.

 線を描くメソッドは line ,線の色を設定するメソッドは stroke,線の太さを設定するメソッドは strokeWeight です.strokeWeight の使い方は

strokeWeight( pixel 単位の太さ );

です.ちなみに,白色は RGB(256,256,256)形式では (255,255,255),HSB(360,100,100) 形式では (任意,0,100) です.

  雛型

 上記のコードの雛型は次のようになります

void setup()
{
    // ウィンドウサイズを設定する
    // 背景色を設定する
}

void draw()
{
    // ドラッグ中なら
    //    描画色と太さを設定する
    //  直前の座標から現在の座標まで線を描く
    //  直前の座標として現在の座標をとっておく
}

void mousePressed()
{
    // ドラッグ中にする
    //  直前の座標として現在の座標をとっておく
}

void mouseReleased()
{
    // ドラッグ中なら
    //   ドラッグ中ではなくする
}

手順その2

 次に色を選択できるようにしてみましょう.色を指定するインタフェースはメニューボタンをクリックするというものが簡単でしょう.

9-2.jpg プログラム

  メニューボタンを描く

 メニューボタンを描く場所はどこでもよいですが,i 番目のボタンの位置(と大きさ)が容易にわかるようにしておくことが重要です.そのためには,計算で求められるようにするか,配列に入れておくのがよいと思います.

 具体的には,上図のメニューボタンで i 番目のボタンの左上座標は ( mx, my+(ms+10) * i ),大きさは ( ms, ms) となっています.mx, my, ms はそれぞれ変数(定数)で,750, 50, 50 を格納してあります.

 なお,ボタンを描くのは draw メソッドの中がよいでしょう.なお,ドラッグ中にも描画するようにすると,ドラッグ中の負荷が大きくなるので,ドラッグ中はメニューボタンの描画は行わない方がよいでしょう.

  ボタンがクリックされたらなにか処理を実行する

 あるボタンの中でクリックされたときになんらかの処理を行いたいときは,

int i;
for( int i = 0 ; i < MAX ; i++ )
{
  if( マウスカーソルの座標が i 番目のボタンの中に入っている ) break;
}
if( i < MAX )
{
  i 番目のボタンの中に入っているとき,ここが実行されるので,
  i 番目のボタンが押されたときの処理をここに書く
}

というコードで実現することができます.もちろん,このコードを入れる場所は,マウスボタンが押された時ですので,mousePressed の中が適当でしょう.

 マウスカーソルの座標が i 番目のボタンの中に入っているかどうかを判定する条件式は

  • i 番目のボタンの左上X座標が,クリックされた場所のX座標より小さい
  • i 番目のボタンの左上Y座標が,クリックされた場所のY座標より小さい
  • i 番目のボタンの右下X座標が,クリックされた場所のX座標より大きい
  • i 番目のボタンの右下Y座標が,クリックされた場所のY座標より大きい

の4つの条件式を,論理積演算子(&&)で結んだものとなります.

 なお,ボタンがクリックされた,つまり,ボタンの中でマウスボタンが押された場合は,チョークの描画は行わないようにしたほうがよいはずです.これは,ドラッグ中を示すフラグを立てないということを意味します.この処理を入れないと,どうなるかは試してみるとわかると思います.

  どこかをクリックしたら描画色を変える

 メニューボタンの上でマウスダウンされたらボタンに合わせて描画色を変えます.これまで,変数で色相だけを変えて色を変化させるということをしてきました.今回は白色も表現したいはずなので,色相だけを変えるという方法ではうまくいきません.色相だけではなく,色そのものを変数に保存したい場合は,color 型を用いると便利です.color 型の変数の宣言は

color var;

のようにします.また,色の代入は

var = color( H, S, B );
var = color( R, G, B );

のように書きます.i 番目のボタンが押された時の色を,たとえば,color 型の配列 cl[ i ] に入れておくと便利だと思います.

できましたか?

 授業の最後にスケッチコードを提出してください.未完成でも授業時間中に提出してください.スケッチ名は半角英数字で 学籍番号_K9 として,pde ファイルを提出してください.