図形を動かす:直線(2)
入力するコード
以下のコードを入力してください。
※Tabキーを押すと行頭に半角スペース2つが挿入されます。
int x = 0;
int y = 0;
void setup() {
size(300, 300);
}
void draw() {
background(255);
line(x, y, 100 + x, 100 + y);
x = x + 3;
y = y + 3;
}
結果
以下のような画面が表示され、直線が画面左上から右下に移動したらOKです。
※図形を動かす:直線(1)よりも早く直線が移動していることに気づきましたか?
解説
※解説を見る前に、なぜこのような動きになったのか、図形を動かす:直線(1)のときのコードと比較して自分なりに考えてみましょう。
図形を動かす:直線(1)のときのコードはこちら。
int x = 0;
int y = 0;
void setup() {
size(300, 300);
}
void draw() {
background(255);
line(x, y, 100 + x, 100 + y);
x = x + 1;
y = y + 1;
}
今回のコードが前回と異なるのはdraw()の{}内の最後の2行の
x = x + 3;
y = y + 3;
だけですね。図形を動かす:直線(1)のときは「1」だったところが今回は「3」に変わっています。その違いだけで、直線の移動速度が向上しました。
まずはdraw()の{}内の処理について考えてみましょう。
図形を動かす:直線(1)のときは次の通り。
「画面を白にする」→「(0,0)~(100,100)の直線を描く」→「画面を白にする」→「(1,1)~(101,101)の直線を描く」→「画面を白にする」→「(2,2)~(102,102)の直線を描く」→「画面を白にする」→・・・
今回は「1」ずつではなく、「3」ずつ加算されることになりますから、
「画面を白にする」→「(0,0)~(100,100)の直線を描く」→「画面を白にする」→「(3,3)~(103,103)の直線を描く」→「画面を白にする」→「(6,6)~(106,106)の直線を描く」→「画面を白にする」→・・・
というアニメーションができることになります。
つまり、図形を動かす:直線(1)のときと比べて3倍のスピードで直線が進むことになるわけです。