p5.jsでclassを使いたい
田所淳さんの『Processing クリエイティブ・コーディング入門−コードが生み出す創造表現』でProcessingを勉強中です。
この前Processingで作ったものをp5.jsで作れるかどうか、挑戦してみました。
let NUM = 100;
let movers = new Array(NUM);
let pos, vel, diameter, c;
function setup() {
createCanvas(400, 400);
colorMode(HSB, 360, 100, 100, 100);
for (let i = 0; i < NUM; i++) {
movers[i] = new Mover();
}
}
function draw() {
background(220);
circle(width / 2, height / 2, 10);
for (let i = 0; i < NUM; i++) {
movers[i].drawellipse();
}
}
class Mover {
constructor() {
noStroke();
this.pos = createVector(random(width), random(height));
this.vel = createVector(random(-4, 4), random(-4, 4));
this.diameter = random(8, 32);
this.c = color(random(360), 100, 100, random(100));
}
drawellipse() {
fill(this.c);
ellipse(this.pos.x, this.pos.y, this.diameter, this.diameter);
this.pos.add(this.vel);
if (this.pos.x < 0 || this.pos.x > width) {
this.vel.x = this.vel.x * -1;
}
if (this.pos.y < 0 || this.pos.y > height) {
this.vel.y = this.vel.y * -1;
}
}
}
やっぱりProcessingとp5.js(JavaScript)は同じようで全然違いますね。
この記事が気に入ったらサポートをしてみませんか?