P5.js | 変数、if文、カラー

■位置を変数で置き換える

下記のコードはX座標を変数locationXに格納し、ellipse()のエックス座標に使用しています。
またlocationX += 1しているため、x座標が1ずつ追加されています。

let locationX = 0;

function setup() {
frameRate(10);
createCanvas(400, 300);
}

function draw() {
ellipse(locationX, 50, 80, 80);
locationX += 1;
}

■変数で計算

下記のコードは位置のX座標を変数locationXに格納し、X軸の移動の速さをvelocityXに格納しています。
結果として位置30pxずつ移動します。

let locationX = 0;
let velocityX = 30;

function setup() {
frameRate(1);
createCanvas(400, 300);
}

function draw() {
background(255, 204, 0)
ellipse(locationX, 50, 80, 80);
locationX += velocityX;
}

■if文で繰り返しを実現

下記の文はif文でlocationXが400より大きくなった場合
locationXを0にしループを実現しています。

See the Pen
p5.jsで使うif文 by morishougo (@morimori05)
on CodePen.

■HSBを使用する

colorMode(HSB); を記述する。

H:Hue(色相)
S:Saturation(彩度)
B:Brightness(明度)

■fillで塗る

fill()で色を塗ることができます。
ellipseを描画する場合は直前に書きます。

See the Pen
HSBを使う by morishougo (@morimori05)
on CodePen.

■ランダムの値を作る

ランダムの値を使うにはランダム関数を使います。
第一引数に最小値、第二引数に最大値をとりその間でランダムな値を生成します。

rondom(min , max)

////0から10の間
rondom(0, 10)

fill()に使う場合は下記のようになります。
第一引数をランダムにしたい場合。
fill(reandom(180, 210), 100, 100, 1);

See the Pen
random関数 by morishougo (@morimori05)
on CodePen.

位置もランダムに。

See the Pen
p5.js | Random by morishougo (@morimori05)
on CodePen.