アニメーションの表示

https://gyazo.com/01cd25d187d03257cc85be5a3150916f

スケッチの作成

Processingを起動して、新規にスケッチを保存しましょう。 メニューから[ファイル]-[名前を付けて保存]をクリックして、「スケッチフォルダを名前を付けて保存」を開きます。 ファイル名に「Project5」を入力し、[保存]をクリックしましょう。 保存先に「Project5」という名前のフォルダが作成されていることを確認してください。

https://gyazo.com/0164542679637926cc8339ce165b4a5e

setupとdraw

アニメーションを制御するにはsetu()関数とdraw関数()が必要になります。 setup()関数には、変数の初期化など、プログラムを実行したときに 1回だけ 実行する処理を記述します。 一方、draw()関数は、プログラムの実行中に 繰り返し 実行され、アニメーションなど何かを変化させるための処理を記述します。 また、setup()関数とdraw()関数の外部で宣言された変数は両方の関数内で利用できます( グローバル変数 と呼びます)。 setu()関数とdraw関数()は下記のように記述します( void は「この関数は返値をもたない」という意味です)。

void setup(){
	1回だけ実行する処理;
}

void draw(){
	繰り返し実行する処理;
}

ここでは、ウィンドウの中央に半径10の円を描いてみましょう。 変数の初期化はsetup()関数、円の描画はdraw()関数に記述していることに注意してください。 下記を参考にコードを入力したら、Runボタンをクリックしてください。 ウィンドウの中央に円が描かれていることを確認してください。

https://gyazo.com/acc31709869b190e55ef6c6a4179b396

直線運動

円が右方向に直線的に動くアニメーションを設定してみましょう。 右方向へのアニメーションは、draw()関数において、変数xの値を増加させることで表現できます。 下記を参考にコードを入力したら、Runボタンをクリックしてください。 複数の円が右方向に描画されることを確認してください。

https://gyazo.com/5a2299a60de12f4a0a18a1734532dae1

しかし、上記のコードでは円が複数描画されてしまい、アニメーションしているように見えません。 そこで、draw()関数の最初で、背景を灰色(#cccccc)で塗りつぶすことで、常に円が1つだけ描画されるように変更します。 下記を参考にコードを入力したら、Runボタンをクリックしてください。 1つの円が右方向に移動することを確認してください。

https://gyazo.com/dad4f4fb1d0feb6da75b4e754a7c3d69

円がウィンドウの端に到達したら、跳ね返って逆方向に進むように修正しましょう。 まずは、右端に到達したら、左方向に進むようにします。 円の速度を表す変数speedを宣言し、if文を利用してxの値が右端に到達したらspeedの正負を反転します。 下記を参考にコードを入力したら、Runボタンをクリックしてください。 円が右端に到達すると跳ね返ることを確認してください。

https://gyazo.com/611d2d56fd57a1cc8d3ac506275f5cf3

同様に、左端に到達したら、右方向に進むようにします。 if文を利用してxの値が左端に到達したらspeedの正負を反転します。 下記を参考にコードを入力したら、Runボタンをクリックしてください。 円が左端に到達すると跳ね返ることを確認してください。

https://gyazo.com/cd23307cf8fa36b1d03d2c6f48e4c1d0

円運動

次は、円運動するアニメーションを設定してみましょう。 円運動を表現するにはsin()関数とcos()関数を利用します。 sin()関数とcos()関数の引数には 角度 を指定しますが、 ラジアン角を用いることに注意が必要です(ラジアン角は $0$ から $2\pi$ )。

円運動の半径を表す変数lとラジアン角を表す変数angleを宣言します。 また、座標を表すxとyはfloat型に変更します。 sin()関数とcos()関数を利用して、座標(x,y)を更新することで円運動を表現します。 下記を参考にコードを入力したら、Runボタンをクリックしてください。 円が円運動していることを確認してください。

https://gyazo.com/4682360aab6f62b78117d9f185f3f7e2

上記のコードを少し修正して、螺旋運動のアニメーションを設定してみましょう。 円運動の半径を表す変数lの値を徐々に大きくします。 下記を参考にコードを入力したら、Runボタンをクリックしてください。 円が螺旋運動していることを確認してください。

https://gyazo.com/8626a6845b9d691ef73e8badacd6fc1b

課題

時計の針のように運動する直線を描きなさい. 直線の長さは100とし,1秒間に1回転するものとする(デフォルトのフレームレートは60fps). 課題が完成したら、作成したスケッチを ZIPアーカイブ 形式で保存します。 ZIPアーカイブを作成するには、メニューから[ツール]-[スケッチをアーカイブ]をクリックして、「スケッチを名前を付けてアーカイブする」を開きます。 保存するファイル名を確認した上で、[保存]をクリックします。 保存先に「Project5-日付a.zip」というファイルが作成されていることを確認してください。

Image from Gyazo

参考書籍