動くスケッチ・ソースコード

前回はxをずらしながら7つの丸を並べましたが、似たようなやり方で一つの丸を動かすことができます。x座標を変えながら描いていけば、動いているように見えます。

draw関数がずっと繰り返しで実行されますが、毎回描く形の座標を変えていくと「動かす」ことができます。

let x = 100;
let y = 200;
let s = 30;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  x += 1;
  ellipse(x, y, s, s);
}

drawが回るたびにbackground関数が背景を塗りつぶしてくれるので、一番最近も丸しか見えません。

跳ね返るようにする

上のコードでは、丸が右端に消えてしまします。代わりに跳ね返ってもらいましょう！

前はxに1を足していたのです。速度は1でしたね！drawが回るたびに右に1ずれていきます。

跳ね返って左にいくとくは1を足すのではなくて引きたいので、その場合は速度を-1にしたいと思います。

xに足していくのは1だったり-1だったりするわけですので、変数を使いましょう。

let x = 100;
let y = 200;
let s = 30;

let speedX = 1;

function setup() {
  createCanvas(400, 400);
  noStroke();
}
function draw() {
  background(0, 30);

  x = x + speedX;
  if (x > width || x < 0) {
    speedX = speedX * -1;
  }
  ellipse(x, y, s, s);
}

ifに注目しましょう！xが右端(width)より右、もしくは左端(0)より左に行っている場合は、速度をはんってんさせます。

右に向かって動いていた場合は1 * (-1)で-1になって、左に行っていた場合は-1 * (-1)で1になります。それで跳ね返るようになると思います。

2次元で動かす

このページのスケッチでは、speedYも設定して四方に動く丸を実装しています。

backgroundを半透明にすることで、丸が辿った軌跡を残すことができました。