第4章 draw が静止画を動かす
アニメーションは、円そのものが動いているわけではありません。少し違う静止画を短い間隔で描き直し、目が動きとして受け取っています。rbCanvas/p5 の draw は、この描き直しを自動で繰り返します。
4.1 setup の 1 回と draw の反復
次のコードを実行すると、円が右へ進みます。
def setup
createCanvas(480, 240)
@x = 0
end
def draw
background(245)
fill(235, 90, 120)
ellipse(@x, height / 2, 60, 60)
@x += 2
end
setup は最初に 1 回、draw はそのあと繰り返し呼ばれます。rbCanvas/p5 の公式資料では、既定の draw は 1 秒あたり 60 回です。端末の性能や処理内容により、実際の間隔は変わることがあります。
@x += 2 は、現在の @x に 2 を足し、その結果を再び @x へ代入する省略記法です。
4.2 なぜ @x には @ が付くのか
次のように setup で普通のローカル変数 x を作っても、draw からは使えません。
def setup
x = 0
end
def draw
ellipse(x, 100, 60, 60)
end
ローカル変数は、そのメソッドの中だけで使える値です。setup が終わると、draw は x を見つけられません。
@x はインスタンス変数です。同じ実行中の別のメソッドからも参照できるため、setup で用意した位置を draw が読み、更新できます。アニメーションには「前のフレームの値を次のフレームまで覚える」必要があり、インスタンス変数がその記憶になります。
4.3 background が軌跡を消している
次の draw は変更部分です。4.1の長いコードにある def draw から対応する end までと置き換え、background(245) をコメントにした結果を比べます。
def draw
# background(245)
fill(235, 90, 120)
ellipse(@x, height / 2, 60, 60)
@x += 2
end
円の軌跡が帯のように残ります。円が伸びたのではなく、前のフレームを消さず、その上へ新しい円を描き足しています。
どちらが正しいかは、作りたいものによります。物体の輪郭をはっきり動かすなら、毎回背景を描き直します。筆跡や時間の蓄積を見せるなら、背景を最初の setup だけで描く方法があります。
def setup
createCanvas(480, 240)
background(245)
@x = 0
end
def draw
fill(235, 90, 120, 35)
noStroke
ellipse(@x, height / 2, 60, 60)
@x += 2
end
透明度を下げたため、重なった場所ほど濃くなります。時間が画面へ積もる表現です。
4.4 位置と速度を分ける
@x += 2 の 2 は、1 フレームで進む距離です。これを速度として別にすると、動きの調整箇所が明確になります。
def setup
createCanvas(480, 240)
@x = 0
@speed = 2
end
def draw
background(245)
ellipse(@x, height / 2, 60, 60)
@x += @speed
end
@speed を -2 にすると左へ動きます。-2 は 0 より小さい数で、「マイナス 2」と読みます。ここでは 1 回の描き直しごとに x を 2 小さくするため、円が左へ進みます。2 と -2 のプラス・マイナスが、進む方向の違いになります。
4.5 画面から消えることも結果
しばらくすると円は右端から消えます。プログラムが止まったのではありません。@x は増え続け、円がキャンバスの外で描かれています。
このまま軌跡を作るのも一つの作品です。端で戻したい場合は、位置に応じて処理を変える必要があります。第5章では、その分岐を if で書きます。
4.6 動く円を流れ星へ変える
円の前に線を加えると、同じ横移動が流れ星に見えてきます。line（ライン）は、始点のxとy、終点のxとyを受け取り、その2点を直線で結びます。
def setup
createCanvas(520, 280)
@x = -80
end
def draw
background(15, 20, 45)
stroke(255, 210, 100)
strokeWeight(5)
line(@x - 90, 110, @x, 150)
noStroke
fill(255, 235, 150)
ellipse(@x, 150, 24, 24)
@x += 4
end
stroke（ストローク）は線の色、strokeWeight（ストローク・ウェイト）は線の太さを決めます。星を速くする、尾を長くする、斜め上へ進ませる、のどれか一つから改造できます。円の移動を学んでいるのは同じでも、作品の時間が生まれます。
この章の小さな区切り
drawが同じ処理を繰り返すことを画面で確認した@xまたは@speedを変え、動く向きか速さを変えた- 円、軌跡、流れ星から、もう一度見たい版を保存した
円が画面外へ消えても失敗ではありません。動いていたことを確認できれば第5章へ進めます。