const colors = ["#f82f1d","#fcad2a","#1c80b4","#ffe7c1","#0d0e08"];

let theShader1;

let color1,color2;

​

​

function setup() {

  createCanvas(800, 800,WEBGL);

  pg = createGraphics(width, height);

  ///pg.noStroke();

  color1 = rand_color('#f82f1d');

  color2 = rand_color('#fcad2a');

}

​

function draw() {

  background(22);

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

  grid(5,pg);

  // シェーダーの設定

  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]);

  // ここのカラーリングでイコールにしちゃうと

  // １ピクセルくらい漏れるので、ニアイコールくらいで評価したい

  theShader1.setUniform('u_color1', color1);

  theShader1.setUniform('u_color2', color2);

  image(pg,0,0);

  noLoop();

}

​

  /** num個で分割したグリッドを画面いっぱいに生成する

   * @method grid

   * @param  {Number}        num           画面の分割数

   */

const grid = (num, pg) => {

    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);

        const c = random(colors)

        pg.fill(c);

        pg.stroke(c);

        const rand = random(0,1);

        if(rand > 0.4 && rand < 0.8){

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

        }else if(rand <0.4){

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

        }else{

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

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

        }

      }

    }

};

​

const rand_color = (colorCode) => {

    let rc = color(colorCode);

    return [red(rc) / 255.0, green(rc) / 255.0, blue(rc) / 255.0];

};

​

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 vec3 u_color1;

  uniform vec3 u_color2;

  uniform vec2 u_resolution;

​

  float PI = 3.14159265358979;

​

  // 2D Random

  float random (in vec2 st) {

    return fract(sin(dot(st.xy,vec2(12.9898,78.233)))* 43758.5453123);

  }

​

  // 2D Noise based on Morgan McGuire @morgan3d

  // https://www.shadertoy.com/view/4dS3Wd

  float noise (in vec2 st) {

    vec2 i = floor(st);

    vec2 f = fract(st);

​

    // Four corners in 2D of a tile

    float a = random(i);

    float b = random(i + vec2(1.0, 0.0));

    float c = random(i + vec2(0.0, 1.0));

    float d = random(i + vec2(1.0, 1.0));

​

    // Smooth Interpolation

​

    // Cubic Hermine Curve.  Same as SmoothStep()

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

    // u = smoothstep(0.,1.,f);

​

    // Mix 4 coorners percentages

    return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y;

  }

​

  void main() {

    vec2 uv = vTexCoord;

    vec4 tex = texture2D(u_tex, uv);

    vec2 pos1 = vec2(uv*5.0);

    vec2 pos2 = vec2(uv*2.0);

    vec2 pos3 = vec2(uv*10.0);

    vec2 pos4 = vec2(uv*1.0);

​

    float n1 = noise(pos1);

    float n2 = noise(pos2);

    float n3 = noise(pos3);

    float n4 = noise(pos4);

​

    vec4 color1 = vec4(vec3(n1), 1.0);

    vec4 color2 = vec4(vec3(n2), 1.0);

    vec4 color3 = vec4(vec3(n3), 1.0);

    vec4 color4 = vec4(vec3(n4), 1.0

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

​

    if(tex == vec4(u_color1, 1.0)){

      gl_FragColor = color1 + whiteNoise;

    }else if(tex == vec4(u_color2, 1.0)){

      gl_FragColor = color2;

    }else{

      gl_FragColor = tex;//vec4(0.,0.,0.,0.);

    }

    //gl_FragColor = tex;

  }

`,

};