p5.js アニメーションと条件分岐
アニメーション
anima01.jsvar y = 0.0;
function setup() {
createCanvas(400, 400);
background(0, 160, 200);
frameRate(60); // draw() の更新頻度。60fps = 1/60秒。数字が小さくなると動きがカクカクする。
}
function draw() {
strokeWeight(10);
stroke(10, 200, 240);
line(y, 0, y, 400);
y = y + 1;
} anima02.jsvar y = 0.0;
function setup() {
createCanvas(400, 400);
background(0, 160, 200);
frameRate(60);
}
function draw() {
strokeWeight(10);
stroke(y/2, 200, 240);
line(400, y-400, y-400, 400);
y = y + 1;
}条件分岐
anima03.js var c = 0.0
var y = 0.0;
function setup() {
createCanvas(400, 400);
background(200);
frameRate(60);
}
function draw() {
strokeWeight(10);
stroke(c/2);
line(400, y-400, y-400, 400);
y = y + 2;
c = c + 3;
if (y > 800){ // yが800を超えたら...
y = 0; // yを0に戻す
}
if (c > 255){ // cが255を超えたら...
c = 0; // cを0に戻す
}
}参考文献
「Processingをはじめよう 第2版」
『Processing ビジュアルデザイナーとアーティストのためのプログラミング入門』
