図形を動かす:直線(2)

Wed, 13 Jan 2016 17:46:55 JST (1034d)

入力するコード

以下のコードを入力してください。
※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)よりも早く直線が移動していることに気づきましたか?

line_move_sample2.png

解説

※解説を見る前に、なぜこのような動きになったのか、図形を動かす:直線(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倍のスピードで直線が進むことになるわけです。