let circles;

const colors = ["#FC4100","#FFC55A","#00215E"]

function setup() {

  createCanvas(800, 800);

  const w = width;

  circles = getRandomCircles(num, w * 0.4, w * 0.4);

}

​

function draw() {

  background(220);

  translate(width/2,height/2);

  circles.forEach((c) =>{ 

    nawa(c.x, c.y, c.z)

  });

  noLoop();

}

​

function getRandomCircles(_num, _w, _h) {

  let circles = [];

  for (let i = 0; i < _num; i++) {

    let x = random(-1, 1) * _w;

    let y = random(-1, 1) * _h;

    let z = random(30, 150); // z軸の値を円の大きさとして使用

    if (circles.every((c) => dist(x, y, c.x, c.y) > (z + c.z) * 0.5)) {

      circles.push(createVector(x, y, z));

    }

  }

  return circles;

}

​

keyPressed = () => {

  if (key === 's') {

    saveCanvas(canvas, 'canvas', 'png');

    //saveGif('canvas', 4);

  }

};

​

// 縄を描く

function nawa(x,y,r){

​

  fill(random(colors));

  const num = 30;

  const angle = 360/num;

  push();

  translate(x,y);

  for(let i = 0;i<num;i++){

    // 中心点

    const wx = r*cos(radians(angle * i));

    const wy = r*sin(radians(angle * i));

    // 四角の点を回転させてる

    const xy1 = afin_rotate(radians(angle*i), wx, wy, wx, wy);

    const xy2 = afin_rotate(radians(angle*i), wx+5, wy, wx, wy);

    const xy3 = afin_rotate(radians(angle*i), wx+5, wy+10, wx, wy);

    const xy4 = afin_rotate(radians(angle*i), wx, wy+10, wx, wy);

    beginShape();

    vertex(xy1[0],xy1[1]);

    vertex(xy2[0],xy2[1]);

    vertex(xy3[0],xy3[1]);

    vertex(xy4[0],xy4[1]);

    endShape(CLOSE);

  }

  pop();

}

​

//行列計算

function afin(a, b) {

  let x;

  let y;

  for (let k = 0; k < 3; k++) {

    let a0 = a[k][0] * b[0];

    let a1 = a[k][1] * b[1];

    let a2 = a[k][2] * b[2];

    if (k == 0) {

      x = a0 + a1 + a2;

    } else if (k == 1) {

      y = a0 + a1 + a2;

    }

  }

  return [x, y];

}

​

​

//回転

function afin_rotate(shita, x, y, tx, ty) {

  let a = [

    [Math.cos(shita), -Math.sin(shita), tx - tx * Math.cos(shita) + ty * Math.sin(shita)],

    [Math.sin(shita), Math.cos(shita), ty - tx * Math.sin(shita) - ty * Math.cos(shita)],

    [0, 0, 1],

  ];

  let b = [x, y, 1];

  return afin(a, b);

}