田所淳さんの『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）は同じようで全然違いますね。