p5.jsでランダムな大きさのハートの図形でデザインを作ってみる

const TIMES = 20;
let w = 400;
let h = 1.618 * w;

function setup() {
  createCanvas(w, h);
  background(255);
}

function heart(x, y, size) {
  beginShape();     //ハート描画開始
  vertex(x, y);     //頂点座標
  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);  //ベジェ曲線 描画
  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);  //ベジェ曲線 描画
  endShape(CLOSE);  //ハート描画終了
}

function mousePressed() {
  for (let t = 0; t < TIMES; t++) {
    stroke(random(255), random(255),255,random(255));
    noFill();
    strokeWeight(random([1, 2,4,8]));
    heart(random(0,w), random(0,h), random(5,100));
  }
}

ハートではなく四角、円、バツを組み合わせてデザイン。

const TIMES = 10;
let w = 600;
let h = 1.618 * w;

function setup() {
  createCanvas(w, h);
  background(255);
}

function mousePressed() {
  for (let t = 0; t < TIMES; t++) {
    let offset = random(10);
    let x = random(-offset, width + offset);
    let y = random(-offset, height + offset);

    stroke(random(255), random(255), 255, random(255));

    noFill();
    ellipse(random(0, w), random(0, h), random(0, 50));
    rect(random(0, w), random(0, h), random(0, 50),random(0, 50));

    strokeWeight(random([1, 2]));
    line(x - offset, y - offset, x + offset, y + offset);

    strokeWeight(random([1, 2]));
    line(x - offset, y + offset, x + offset, y - offset);
  }
}