let pg;

let circles;

let theShader;

​

function setup() {

  createCanvas(400, 400,WEBGL);

  n = Math.floor(random(2, 8)); 

  w =width/n;

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

    pgs.push([]);

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

      pgs[i].push(createGraphics(w, w));

      pgs[i][j].noStroke();    

    }

  }

  circles = getRandomCircles(1000, width * 0.4, height * 0.4);

  theShader = createShader(shader1.vs, shader1.fs);

    background(220);

  translate(-width/2,-height/2);

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

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

      pgs[i][j].translate(pgs[i][j].width/2,pgs[i][j].height/2);

      const rand = random(1);

      if(rand < 0.3){

        paintCircles(pgs[i][j],circles);        

      }else if(rand < 0.5){

        grid(pgs[i][j],parseInt(random(3,5)));

      }else{

        stripeRotate(pgs[i][j],10);

      }

      image(pgs[i][j],w*i,w*j);

    }

  }

  pg = get(0,0,width,height);

}

​

function draw() {

  background(220);

  translate(-width/2,-height/2);

  if(frameCount >10){

  // シェーダーの設定

  shader(theShader);

  theShader.setUniform(`u_tex`, pg);

  theShader.setUniform('u_resolution', [pg.width, pg.height]);

  theShader.setUniform(`u_time`, -frameCount / 35);

  image(pg,0,0); 

  }

  //noLoop();

}

​

keyPressed = () => {

  if (key === 's') {

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

    //saveGif('canvas', 4);

  }

};

​

// 配列分円を描く

function paintCircles(pg,circles){

  pg.background("#E3FEF7");

  const colors = ["#003C43","#135D66","#77B0AA"];

    circles.forEach((c) =>{ 

      pg.fill(random(colors));

      pg.circle(c.x, c.y, c.z)

  });

}

​

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(20, 50); // 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;

}

​

// グリッド上に四角と円を並べる

function grid(pg,num) {

  pg.background("#F2613F");

  pg.translate(-pg.width/2,-pg.height/2);

  const n1 = num + 1;

  const margin_left = pg.width / n1 / n1;

  const margin_bottom = pg.height / n1 / n1;

  const nw = pg.width / n1;

  const nh = pg.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);

      const circle_random = parseInt(random(0, 4));

      if (circle_random === 0) {

          pg.fill("#481E14");

          pg.circle(x + nw / 2, y + nh / 2, nw);

      } else if (circle_random === 1) {

          pg.push();

          pg.fill("#0C0C0C");

          pg.circle(x + nw / 2, y + nh / 2, nw);

          pg.pop();

      }else {

          pg.fill("#9B3922");

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

      }

    }

  }

}

​

​

function stripeRotate(pg,n){

  const colors1 = ["#F4CE14","#495E57","#F5F7F8","#45474B"];

  const h =(pg.height * 2) / n;

  pg.push();

  pg.translate(-pg.width/4,-pg.height-h*2);

  pg.rotate(PI/4)

  for(let i = n; i > 0; i--){

    const rand = random(colors1);

    pg.fill(rand);

    pg.rect(-pg.width/2,0,pg.width*3,h*i);

  }

  pg.pop();

}

​

const shader1 = {

  vs: `

  precision highp float;

  precision highp int;

​

  attribute vec3 aPosition;

  attribute vec2 aTexCoord;

​

  varying vec2 vTexCoord;

​

  uniform mat4 uProjectionMatrix;

  uniform mat4 uModelViewMatrix;

​

  void main() {

    vec4 positionVec4 = vec4(aPosition, 1.0);

    gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;

    vTexCoord = aTexCoord;

  }

`,

  fs: `

  precision highp float;

  precision highp int;

​

  varying vec2 vTexCoord;

​

  uniform sampler2D u_tex;

  uniform vec2 u_resolution;

  uniform float u_time;

  uniform vec3 u_color0;

​

  float pi = 3.14159265358979;

​

  vec2 random(vec2 st){

      st = vec2( dot(st,vec2(127.1,311.7)),

                dot(st,vec2(269.5,183.3)) );

    return 2.0*fract(sin(st)*43758.5453123) - 1.0;

  }

​

​

  float noise(vec2 st) {

    vec2 i = floor(st);

    vec2 f = fract(st);

​

    vec2 u = f*f*(3.0-2.0*f);

    return mix( mix(dot( random(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), 

                    dot( random(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),

                mix(dot( random(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), 

                    dot( random(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);

  }

  void main() {

    vec2 uv = vTexCoord;

​

    vec2 st = gl_FragCoord.xy/u_resolution.xy;

    vec2 pos = vec2(st*10.0);

    vec3 noise = vec3(noise(pos)*.5+.5 );

​

    uv.x += 0.08 * cos(uv.x*pi*1.0 + u_time);

    uv.y += 0.07 * cos(uv.y*pi*2.0 + u_time);

​

    vec4 tex = texture2D(u_tex, uv);

    gl_FragColor = tex;

  }

`,

};