お絵かきプログラミングProcessingサンプルコード解説の第6弾です！
ProcessingをまだPCに導入されていない方は、こちらの記事を参考に導入してみてください！
今回は Bounce というサンプルコードをみてみましょう。

難易度は ★★☆☆☆ くらい。

注意！説明は全てMac版での画面を示しながら行いますが、Windows版でもほとんど同じものが現れると思います。
わからない箇所があればコメントをください。

Table of Contents

Toggle

とりあえず動かしてみよう

Processnigを起動し、サンプルコードを開きましょう。
ファイル → サンプルと選択し現れたウィンドウで Topics → Motion → Bounce と選択してください。

このようなスケッチが現れます。ウィンドウの左上にある再生ボタンをクリックして実行してみましょう。

円が跳ねて回ります。

今回のコードは、「図形の跳ね返りを表現するコード」です。

今回のコードはマウスやキーなどの外部入力は扱いません。

コードを読む

とりあえずコードの全貌を確認しましょう。

ではじっくり見ていきましょう。

上から読んでいきます。

まずコメントから始まっていますね。
「輪郭がウィンドウの端にぶつかった時、進行方向が逆になる」と言っています。
ちなみに “bounce” は「跳ねる」という意味です。納得ですね。

まずはグローバル変数を見ましょう。

今回もコメントがしっかり書かれていますね

変数	意味
rad	図形の幅
xpos	図形の初期位置(x)
ypos	図形の初期位置(y)
xspeed	図形の速さ(x)
yspeed	図形の速さ(y)
xdirection	左から右？
ydirection	上から下？

xdirection, ydirectionだけ意味がわかりにくいですね…ただ変数名から、方向を表すことが予想されます。

コメントについて

このブログの他の記事を読んでくれた方はお分かりだと思いますが、コメントの無いコードは読み手が意味を理解するのに時間がかかります。コードを他人に読ませない場合でも、数ヶ月後に見直したときの自分は多くの前提知識を忘れているでしょう。その自分はもはや他人です。将来の自分のためにもコメントは残しておきましょう。
このようなコメントの作法を含めコーディングの作法について書かれた名著があるので、興味がある方はぜひ読んでみてください。→リーダブルコード

ではsetupの中身を見てみましょう。

setup

sizeは毎度おなじみのウィンドウサイズを指定する関数です。
noStrokeは線を描かないようにする関数です。今回は図形の縁を描かないための指定ですね。
frameRateは初めて見た方が多いかもしれません。フレームレートという言葉でお分かりの方も多いと思います。描画を更新する頻度の指定です。引数の単位はfps (frames per second)で、1秒間に更新するフレーム数を表しています。今回は引数が30なので30fpsとなっています。あとで少しいじってみましょう。
ellipseModeも初めての登場かもしれませんね。楕円を描画する関数ellipseの引数の取り方を指定しています。今回はRADIUSという指定になっていますが、これにより引数指定は
ellipse(中心のx座標, 中心のy座標, x方向半径, y方向半径)
となります。

次にコメントがきていますね。”Set the starting position of the shape”。「図形の初期位置を設定する」とのことです。
(width/2, height/2)なので、これはウィンドウの中心にあたりますね。

次にdrawを見てみましょう。

draw

ちょっと長いので少しずつ見ていきましょう。

いつものbackgroundですね。画面全体を塗りつぶします。引数の102は灰色になりますが、値によってその濃さが変わります。気になる方は適当に値を変えて実行してみてください。

コメントがありますね。「図形の位置を更新する」とのことです。
確かにxpos, yposが更新されていますね。変数名がわかりやすいので意味もわかりやすいですね。これらの式が一度実行されるたびに、速さ×方向だけ座標が変化します。物理っぽいですね。

またコメントが書かれていますね。
「図形が画面の境界を超えていないか確認する。もし超えていれば、向きに−1をかけることで向きを反転させます」とのことです。

if文が出てきましたね。条件を確認しましょう。
xpos の値がwidth – rad より大きいか、radより小さいか、いずれかであれば、xの向きが反転されています。

ここで先に描画の部分をみてみましょう。

ここで中心が (xpos, ypos)、半径が rad の正円が描かれています。

これを考慮して、さっきの条件式を考え直してみましょう。数式で見ると少しわかりにくかったですが、図で描くとこんな感じです。
円がウィンドウからはみ出していたら向きを変える、という処理になっています。シンプルですね。

yについても同様です。

全ての条件をまとめるとこのようになります。円がウィンドウの端に近づくと、ウィンドウの内側に動くように向きが変わるんですね。

これで終わりです！お疲れ様でした！

いじってみよう

frameRateの引数を色々変えて実行してみましょう。
実際にやってみました。

frameRate(10);の場合

コメントアウトした場合

速さが変わりますね。
Processingで動画を描く時、静止画の描画がdraw関数内で無限ループさせて描くのが普通です。したがって、drawのループの速さ、つまりfpsが物体の動きの速さに直結することが多いです。
ちなみに特に設定しなかった場合、fpsは60となります。さっきframeRateのコメントアウトを試した時も、確かにframeRate(30)の時の倍速くらいになっていましたね。