let pg;

let theShader1;

let rand;

const num = 6;

​

function setup() {

  createCanvas(800, 800, WEBGL);

  fb = createFramebuffer({width: 400, height: 400});

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

  pg = createGraphics(width, height,WEBGL);

  pg.noStroke();

  pg.fill('#776B5D');

  //pg.background('#234562');

  noStroke();

  textureMode(NORMAL);

  rand = rand_grid(num);

}

​

function draw() {

  background(220);

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

  push();

  fb.begin();

    background(20);

  fb.end();

  shader(theShader1);

  theShader1.setUniform(`u_tex`, pg);

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

  theShader1.setUniform(`u_color0`, rand_color('#234562'));

  texture(pg);

  grid(num,rand);

  pop();

}

​

keyPressed = () => {

  if (key === 's') {

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

    saveGif('canvas', 3);

  }

};

​

const rand_color = (colorCode) => {

    const rc = color(colorCode);

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

};

​

const rand_grid = (num) =>{

  const list = [];

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

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

    list.push(Math.round(random(0,3)));      

    }

  }

  return list;

}

​

const grid = (num,rand) => {

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

        rect(x, y, nw,nw,10,10,10,10);

        push();

        translate(x,y);

        arc(0, 0, nw, nw, 0, PI/2);

        if(rand[i+j] === 1 || rand[i+j] === 3) {

          scale(1,-1);

          arc(0, 0, nw, nw, 0, PI/2);

        }

        if(rand[i+j] === 2 || rand[i+j] === 3) {

          scale(-1,1);

          arc(0, 0, nw, nw, 0, PI/2);          

        }

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

uniform vec2 u_resolution;

uniform vec3 u_color0;

​

​

float pi = 3.14159265358979;

float X = .211324865405187;

float Y = .36602540378443;

float Z = -.577350269189626;

float W = .024390243902439;

​

vec3 permute(vec3 x) { return mod( x*x*34.+x, 289.); }

​

float snoise(vec2 v) {

    vec2 i = floor(v + (v.x+v.y)*Y),

    x0 = v -   i + (i.x+i.y)*X,

    j = step(x0.yx, x0),

    x1 = x0+X-j,

    x3 = x0+Z;

  i = mod(i,289.);

  vec3 p = permute( permute( i.y + vec3(0, j.y, 1 )) + i.x + vec3(0, j.x, 1 ) ),

    m = max( .5 - vec3(dot(x0,x0), dot(x1,x1), dot(x3,x3)), 0.),

    x = 2. * fract(p * W) - 1.,

    h = abs(x) - .5,

    a0 = x - floor(x + .5),

    g = a0 * vec3(x0.x,x1.x,x3.x) + h * vec3(x0.y,x1.y,x3.y);

    m = m*m*m*m* ( 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ) );

​

    return .5 + 65. * dot(m, g);

}

​

void main() {

  vec2 uv = vTexCoord;

​

  vec2 p= vTexCoord;

  p.y += 0.09 * sin(p.x*pi*5.0 + u_time);

  vec3 col = 0.5 + 0.5*cos(u_time+uv.xyx+vec3(0,2,4));

  float l=.2;

  float f=5.;

  float n=snoise(p*5.)*.5+.5;

  float c=float(fract(n*f)<l);

  vec3 col_highline  = vec3(0,0,0);

  col_highline += vec3(c,c,c);

​

  vec4 tex = texture2D(u_tex, uv);

​

  if(vec3(0.0,0.0,0.0) == col_highline){

    gl_FragColor =  vec4(u_color0,1.0);

  }else{

    gl_FragColor =  vec4(col_highline,1.0);

  }

}

`,

};