p5.jsでcircleを往復させる

p5.jsでcircleを往復させるコードです。
個人的にですが、これがp5.jsで一番基本的なものかと思ってます。

ポイントは、dで方向を変更させることです。

コードはこちら↓

let x,d;

function setup() {
  createCanvas(400, 400);
  colorMode(HSB,360,100,100,100);
  x=width/2;
  d=-1;
}

function draw() {
  background(220,100,100,100);
  circle(x,height/2,30);
  if(x<0 || x>width){
    d=d*-1;
  }
  x=x+3*d;
}

動いているのは以下↓で見れます。

editor.p5js.org

数学的な要素が出てくるまでは安心ですね。

yuuuha.hatenablog.com