イベント処理
スケッチの作成
Processingを起動して，新規にスケッチを保存しましょう． メニューから[ファイル]-[名前を付けて保存]をクリックして，「スケッチフォルダを名前を付けて保存」を開きます． ファイル名に「Project6」を入力し，[保存]をクリックしましょう． 保存先に「Project6」という名前のフォルダが作成されていることを確認してください．
マウスイベント
Processingではマウスイベントを検出するために下記表の関数が用意されています．
これらの関数内に，実行したい内容を記述することで，マウスイベントに対応した処理が可能になります．
また，これらのイベントの結果を反映させるには，draw()関数の記述が必要なことに注意してください．
| 関数名 | イベント |
|---|---|
| mouseMoved() | マウスボタンを押さずに動かしたとき |
| mouseDragged() | マウスボタンを押しながら動かしたとき |
| mousePressed() | マウスボタンを押したとき |
| mouseReleased() | マウスボタンを離したとき |
ここでは，mouseMoved()関数を利用して，マウスの軌跡を描画してみましょう．
ウィンドウ内のマウスの位置は変数 mouseX と mouseY で取得可能です．
マウスの動きを検知したら，半径3の塗りつぶし円を描きます．
下記を参考にコードを入力したら，Runボタンをクリックしてください．
マウスの動きに合わせて，軌跡が描かれることを確認してください．
次に，MousePressed()関数を利用して，マウスボタンを押したとき（クリックしたとき）に，
赤色の正方形を描画してみましょう．
下記を参考にコードを入力したら，Runボタンをクリックしてください．
マウスの位置に合わせて，正方形が描かれることを確認してください．
今度は，mousePressed()関数とmouseDragged()関数を組み合わせてみましょう．
マウスボタンを押した位置を中心座標として，マウスをドラッグして移動した距離を半径とした円を描きます．
まず，変数xとyを宣言し，mousePressed()関数でマウスボタンを押した位置を記録します．
次に，ouseDragged()関数で，座標(x,y)からの距離をdist()関数で求め円を描きます
（dist(x1, y1, x2, y2)関数は，座標(x1,y1)と座標（x2,y2）の距離を求めます）．
下記を参考にコードを入力したら，Runボタンをクリックしてください．
マウスのドラッグ操作に合わせて，円が描かれることを確認してください．
キーボードイベント
キーボードイベントを検出するために下記表の関数が用意されています．
これらの関数内に，実行したい内容を記述することで，キーボードイベントに対応した処理が可能になります．
また，これらのイベントの結果を反映させるには，draw()関数の記述が必要なことに注意してください．
| 関数名 | イベント |
|---|---|
| keyPressed() | キーを押したとき |
| keyReleased() | キーを離したとき |
ここでは，keyPressed()関数を利用して，キー「c」を押したら，
画面をクリア（背景色で塗りつぶす）してみましょう．
押されたキーは変数 key を参照することで調べることができます．
if文を利用して，keyが「c」と一致するかどうかを判定しています（cは「’（シングルクォーテーションで括ることに注意）」）．
下記を参考にコードを入力したら，Runボタンをクリックしてください．
「c」を押すと，画面がクリアされることを確認してください．
次に，キー「e」を押したら円，また，キー「r」を押したら四角形を描いてみましょう．
どちらの図形を描くかを判断するために変数 type を宣言します．
押されたキーに応じてtypeには「0」または「1」を代入します．
typeが「0」のときはellipse()関数で円，typeが「1」のときはrect()関数で四角形を描きます．
課題
ウィンドウの上部に赤色，緑色，青色のボタン（四角形）を配置し，クリックしたボタンの色で塗りつぶした円と四角形を描けるようにしなさい．
ボタンの配置は，次のようにdraw()関数に記述すること．
void draw(){
fill(#ff0000); // 赤色のボタン
rect(0, 0, 50, 50);
fill(#00ff00); // 緑色のボタン
rect(50, 0, 50, 50);
fill(#0000ff); // 青色のボタン
rect(100, 0, 50, 50);
fill(#ff0000); // 標準の塗りつぶしの色
}
課題が完成したら，作成したスケッチを ZIPアーカイブ 形式で保存します． ZIPアーカイブを作成するには，メニューから[ツール]-[スケッチをアーカイブ]をクリックして，「スケッチを名前を付けてアーカイブする」を開きます． 保存するファイル名を確認した上で，[保存]をクリックします． 保存先に「Project6-日付a.zip」というファイルが作成されていることを確認してください．
