連続モードのプログラミング

連続モードのプログラミング

ここまでのプログラムは[Run]ボタンを押すと一度だけ実行され、線や丸が書かれると以降は何も起こりませんでした。

動的に更新されるプログラムを作成します。

アニメーション

丸が移動してゆくプログラムを作成しましょう。

x = 0
y = 0

def setup():
    size(400, 400)
    smooth() #円の縁を滑らかにする
    stroke(255)
    background(0)

def draw():
    global x, y
    d = 20
    ellipse(x, y, d, d)
    x = x + 1
    y = y + 1

setup と draw は Processing では特別な関数として扱われます。

関数 setup() はプログラムの起動時に1回だけ実行されます。

関数 draw() は 停止(Stop)ボタン(■)が押されるまで、繰り返し何度も実行されます。

プログラムの先頭で変数 x と y を宣言しています。

関数を使う場合、関数の外では変数の宣言だけが行えます。
関数の外(プログラムの先頭)で宣言した変数は、全ての関数の中で使えます。
(グローバル変数; 上記 x, y)
グローバル変数はいつでも読み出せますが、関数の中で書き替えるときには
global x, y
というように、グローバル変数を書き替えるぞ!と宣言する必要があります。

一方、関数の中で宣言した変数は、その関数の中でだけ使えます。
(ローカル変数; 上記 d)

上のプログラムを実行すると、draw中で
[座標(x, y)に丸を描いて]→[xとyに1を加える]という処理が繰り返されるので、白い丸が右下に移動していきます。
ただし、このままだと、描いた丸を消していないので、軌跡が残ってしまいます。

ellipseの前にbackground(0) を足して、いったん黒で画面を塗りつぶしてから丸を描くということを繰り返すことで、移動する丸を表現できます。

x = 0
y = 0

def setup():
    size(400, 400)
    smooth() #円の縁を滑らかにする
    stroke(255)
    background(0)

def draw():
    global x, y
    d = 20
    background(0) #画面を黒で塗りつぶす
    ellipse(x, y, d, d) #白い円を描く

例題

  • 丸の初期位置や、移動する方向を変えてみてください。

加速度運動

物体に力が加わると、等加速度運動を生じます。

 F = ma 

速度(ベクトル)を変数 vx, vy として、等加速度運動を生じさせてみましょう。
下記のように、速度を一定の割合で増加(または減少)させれば、等加速度運動となります。

x = 0.0 #位置
y = 200.0
vx = 0.0 #速度
vy = 0.0
ax = 0.01 #加速度
ay = 0.0

def setup():
    size(400, 400)
    smooth() #円の縁を滑らかにする
    stroke(255)
    background(0)

def draw():
    global x, y, vx, vy, ax, ay
    background(0) #画面を黒で塗りつぶす
    ellipse(x, y, 20, 20) #白い円を描く

    vx = vx + ax
    vy = vy + ay

    x = x + vx
    y = y + vy

例題

  • 丸に、画面内で放物運動(放物線を描くような運動)をさせてください。

ユーザーの入力に応答する~マウスからの入力

次に、ユーザーからの入力に反応するプログラムについて考えます。

def setup():
    size(400, 400)
    stroke(255)
    background(192, 64, 0)

def draw():
    line(150, 25, mouseX, mouseY)

mouseXとmouseYは特別な変数で、画面上にマウスのポインタがあるときに、その座標を参照します。

mouseX, mouseYはリファレンス中の[Input]のところに説明があります。

イベントを使う

関数 mousePressed() は、マウスのボタンが押されたときに実行されます。

下記を実行して、画面上でマウスをクリックしてみてください。

def setup():
    size(400, 400)
    stroke(255)
    background(192, 64, 0)

def draw():
    line(150, 25, mouseX, mouseY)

def mousePressed():
    ellipse(mouseX, mouseY, 50, 50)

例題

  • 前に作った丸が進んでいくプログラムで、マウスをクリックするたびに丸が止まったり、動き出したりするようにしてください 1)この課題は少し難しいかもしれませんね。例えば、速度に相当する変数、v を用意し、マウスをクリックしたとき、vが0なら1に、1なら0にするような処理を書くことになります。あとは前の問題でdraw中でθに相当する変数を大きくしていた処理 theta = theta +1 のところを theta = theta + v にすればOKです。

脚注

1 この課題は少し難しいかもしれませんね。例えば、速度に相当する変数、v を用意し、マウスをクリックしたとき、vが0なら1に、1なら0にするような処理を書くことになります。あとは前の問題でdraw中でθに相当する変数を大きくしていた処理 theta = theta +1 のところを theta = theta + v にすればOKです。