昨日作成した図形を動かしてみます。
資料をご覧ください → p5_jsその3
p.1 パワーポイントであれば、「グルーピング」でパーツをまとめて、アニメーションを作成することもできますが、プログラムコードの場合はどうでしょうか？ JavaScriptでは「push();」と「pop();」で図形を挟むと１つの絵として移動させることが可能になります。移動は「translate(x, y)」を用いて、ｘ及びｙ方向に指定量だけ移動できます。 今回は同じ場所で、小刻みに振動させてみます。ｘ方向に-3～3の乱数を入れて振動させています。3行目のframeRateの括弧内の数字は、画面の切り替えタイミングで、小さくするとゆっくり振動するようになります。
p.2 乱数の行を消して、push();の次に「ｘ +=5 ;」を挿入すると、絵が５ずつｘ方向に移動していきます。
絵を動かすための基本操作はいかがですか？ アニメーションを作るには、さらなる技が必要になりそうです。