​

function setup() {

  createCanvas(800, 800);

  rectMode(CENTER);

  noStroke();

  //noFill();

}

​

function draw() {

  background(220);

  push();

  fill("#638889");

  translate(width/2,height/2);

  rotate(PI/4);

  moyou();

  pop();

  push();

  fill("#9DBC98")

  translate(width/2,height/2);

  moyou();

  pop();

  push();

  translate(width/2,height/2);

  fill(colors[0]);

  test(10,250,160);

  fill(colors[1]);

  test(10,150,100);

  push();

  rotate(45);

  fill(colors[2]);

  test(10,70,90);

  pop();

  fill(colors[3]);

  test(10,15,10);

  pop();

}

​

keyPressed = () => {

  if (key === 's') {

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

    saveGif('canvas', 4);

  }

};

​

// rectがただ拡大縮小するだけ

const test = (n,r_size,s_size) =>{

  const angle = 360/n;

  const r = map(cos(radians(frameCount)),-1,1,20,r_size);

  const s = map(sin(radians(frameCount)),-1,1,50,s_size);

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

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

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

    rect(x,y,s,s);

  }

}

​

// 先に配置する模様

const moyou = () =>{

  const s = 400;

  const w = width/2;

  const h = height/2;

  push();

  rect(-w,-h,s,s);

  rect(w,-h,s,s);

  rect(w,h,s,s);

  rect(-w,h,s,s);

  pop();

}