let theShader1;

const colors1 = ['#008DBD','#33CCCC','#2980B9'];

const colors2 = ['#0E46A3','#9AC8CD','#E1F7F5'];

const colors3 = ['#41B06E','#8DECB4','#FFF5E0'];

const colors4 = ['#003C43','#135D66','#E3FEF7'];

const colorGroup = [colors1,colors2,colors3,colors4];

​

function setup() {

  createCanvas(500, 500,WEBGL);

  pg = createGraphics(width, height);

  pg.noStroke();

  pg.fill('#776B5D');

  background('#F3EEEA');

  noStroke();

}

​

function draw() {

  //WEBGLは真ん中基準だがcreageGraphicsは左上基準なので合わせるために設定している

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

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

  pg.push();

  widthGrid(pg,5,colorGroup[rand]);

  pg.noFill();

  pg.stroke(colorGroup[rand][2]);

  pg.strokeWeight(5);

  const circles = getRandomCircles(10000, width, height);

  circles.forEach((c) => pg.circle(c.x, c.y, c.z));

  pg.pop();

  // シェーダーの設定

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

  shader(theShader1);

  theShader1.setUniform(`u_tex`, pg);

  theShader1.setUniform(`u_time`, frameCount / 35);

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

  // シェーダー適用したイメージを描画

  image(pg,0,0);

  noLoop();

}

​

const widthGrid = (pg,num,colors) =>{

  const w = width/num;

  pg.noStroke();

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

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

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

        pg.fill(colors[0]);

      }else{

        pg.fill(colors[1]);

      }

      pg.rect(i*w, j*w, w, w);

    }

  }

};

​

keyPressed = () => {

  if (key === 's') {

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

    //saveGif('canvas', 4);

  }

};

​

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, 100); // 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;

}

​

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 float u_time;

uniform vec2 u_resolution;

​

float pi=3.14159265358979;

​

// ボロノイ図をUVの値につかう

float rand(vec2 x){

  return fract(cos(mod(dot(x,vec2(13.9898,8.141)),3.14))*43758.5453);

}

​

vec2 rand2(vec2 x){

  return fract(cos(mod(vec2(dot(x,vec2(13.9898,8.141)),

  dot(x,vec2(3.4562,17.398))),vec2(3.14)))*43758.5453);

}

​

// Based on https://www.shadertoy.com/view/ldl3W8

// The MIT License

// Copyright © 2013 Inigo Quilez

vec3 iq_voronoi(vec2 x,vec2 size,vec2 stretch,float randomness,vec2 seed){

  vec2 n=floor(x);

  vec2 f=fract(x);

  vec2 mg,mr,mc;

  float md=8.;

  for(int j=-1;j<=1;j++)

  for(int i=-1;i<=1;i++){

    vec2 g=vec2(float(i),float(j));

    vec2 o=randomness*rand2(seed+mod(n+g+size,size));

    vec2 c=g+o;

    vec2 r=c-f;

    vec2 rr=r*stretch;

    float d=dot(rr,rr);

    if(d<md){

      mc=c;

      md=d;

      mr=r;

      mg=g;

    }

  }

  md=8.;

  for(int j=-2;j<=2;j++)

  for(int i=-2;i<=2;i++){

    vec2 g=mg+vec2(float(i),float(j));

    vec2 o=randomness*rand2(seed+mod(n+g+size,size));

    vec2 r=g+o-f;

    vec2 rr=(mr-r)*stretch;

    if(dot(rr,rr)>.00001)

    md=min(md,dot(.5*(mr+r)*stretch,normalize((r-mr)*stretch)));

  }

  return vec3(md,mc+n);

}

​

vec4 voronoi(vec2 uv,vec2 size,vec2 stretch,float intensity,float randomness,float seed){

  uv*=size;

  vec3 v=iq_voronoi(uv,size,stretch,randomness,rand2(vec2(seed,1.-seed)));

  return vec4(v.yz,intensity*length((uv-v.yz)*stretch),v.x);

}

​

const float scale_x=10.;

const float scale_y=10.;

const float stretch_x=1.62;

const float stretch_y=1.;

const float intensity=1.;

const float randomness=.85;

​

  float random(vec2 c){

    return fract(sin(dot(c.xy ,vec2(12.9898,78.233))) * 43758.5453);

  }

​

void main(){

  vec2 uv=vTexCoord;

  float minSize=min(u_resolution.x,u_resolution.y);

  vec4 voronoiColor=voronoi((uv),vec2(scale_x,scale_y),vec2(stretch_y,stretch_x),intensity,randomness,0.);

  float celler=voronoiColor.z;

  // fractでリピートできる

  vec4 tex=texture2D(u_tex,fract((uv+(celler*0.08))));

    // white noise用

    float interval = 3.0;

    float strength = smoothstep(interval * 0.5, interval, interval - mod(u_time, interval));

    float whiteNoise = (random(uv + mod(u_time, 10.0)) * 2.0 - 1.0) * (0.15 + strength * 0.15);

​

    //vec4 tex = texture2D(u_tex, uv);

    gl_FragColor = tex + whiteNoise;

    //gl_FragColor = vec4(0.58, 0.64, 0.95, 1.00);

}

`,

};