​

function setup() {

   createCanvas(800,800);

   pg = createGraphics(width, height);

   pg.strokeWeight(3);

   pg.fill("#44355B");

   pg.noStroke();

   pg2 = createGraphics(width, height);

   pg2.strokeWeight(3);

   pg2.fill("#EE5622");

   pg2.noStroke();

   noStroke();

}

​

function draw() {

   background("#F8EDE3");

   grid(6,pg,false);

   grid(6,pg2,true);

   // シェーダーの設定

   image(pg,0,0);

   image(pg2,0,0);

   push();

   rectMode(CENTER);

   translate(width/2,height/2);

   test(400,30);

   pop();

   noLoop();

}

​

keyPressed = () => {

   if (key === 's') {

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

      //saveGif('canvas', 4);

   }

};

​

const grid = (num, pg, bool) => {

   const n1 = num + 1;

   const margin_left = width / n1 / n1;

   const margin_bottom = height / n1 / n1;

   const nw = width / n1;

   const nh = height / n1;

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

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

         const x = nw * i + margin_left * (i + 1);

         const y = nh * j + margin_bottom * (j + 1);

         if (((i % 2 === 0 && j % 2 === 0) || (i % 2 === 1 && j % 2 === 1) )&& bool) {

            pg.rect(x,y,nw,nw);

         }

         if (((i % 2 === 1 && j % 2 === 0) || (i % 2 === 0 && j % 2 === 1) )&& !bool) {

            pg.rect(x,y,nw,nw);

         }

      }

   }

};

​

function test(r,num){

   const angle = 360/num;

   const colors3 = ["#264653","#2A9D8F","#E9C46A","#E76F51"];

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

      const rand = random(30,r);

      const x = rand * cos(angle*i);

      const y = rand * sin(angle*i);

      push();

      blendMode(OVERLAY);

      const rl = random(1);

      fill(random(colors3));

      if(rl >0.5){

         circle(x,y,r);

      }

      pop();

   }

}