バウンス
ウィンドウの端に図形がぶつかると、進行方向が反転します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
let rad = 60; // 図形の幅
let xpos, ypos; // 図形の開始位置
let xspeed = 2.8; // 図形の速度
let yspeed = 2.2; // 図形の速度
let xdirection = 1; // 左または右
let ydirection = 1; // 上から下へ
function setup() {
createCanvas(720, 400);
noStroke();
frameRate(30);
ellipseMode(RADIUS);
// 図形の開始位置を設定します。
xpos = width / 2;
ypos = height / 2;
}
function draw() {
background(102);
// 図形の位置を更新します。
xpos = xpos + xspeed * xdirection;
ypos = ypos + yspeed * ydirection;
// 画面の境界を超えるかどうかをテストします。
// もし逆方向である場合、-1をかけて方向を反転します。
if (xpos > width - rad || xpos < rad) {
xdirection *= -1;
}
if (ypos > height - rad || ypos < rad) {
ydirection *= -1;
}
// 図形を描きます。
ellipse(xpos, ypos, rad, rad);
}
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
