const NUM_CELLS = 20;

let cell_w;

function setup() {

  createCanvas(800, 800, WEBGL);

  cell_w = width / NUM_CELLS;

​

  background(20);

​

  wc_block_src = `precision mediump float;

​

// lets grab texcoords just for fun

varying vec2 vTexCoord;

uniform vec2 canvasSize;

// our texture coming from p5

uniform sampler2D tex0;

uniform float iTime;

​

// perlin noise from https://www.shadertoy.com/view/XdcXzH

#define _PerlinPrecision 8.0

#define _PerlinOctaves 8.0

#define _PerlinSeed 0.0

​

float rnd(vec2 xy)

{

    return fract(sin(dot(xy, vec2(12.9898-_PerlinSeed, 78.233+_PerlinSeed)))* (43758.5453+_PerlinSeed));

}

float inter(float a, float b, float x)

{

    //return a*(1.0-x) + b*x; // Linear interpolation

​

    float f = (1.0 - cos(x * 3.1415927)) * 0.5; // Cosine interpolation

    return a*(1.0-f) + b*f;

}

float perlin(vec2 uv)

{

    float a,b,c,d, coef1,coef2, t, p;

​

    t = _PerlinPrecision;                   // Precision

    p = 0.0;                                // Final heightmap value

​

    for(float i=0.0; i<_PerlinOctaves; i++)

    {

        a = rnd(vec2(floor(t*uv.x)/t, floor(t*uv.y)/t));    //  a----b

        b = rnd(vec2(ceil(t*uv.x)/t, floor(t*uv.y)/t));     //  |    |

        c = rnd(vec2(floor(t*uv.x)/t, ceil(t*uv.y)/t));     //  c----d

        d = rnd(vec2(ceil(t*uv.x)/t, ceil(t*uv.y)/t));

​

        if((ceil(t*uv.x)/t) == 1.0)

        {

            b = rnd(vec2(0.0, floor(t*uv.y)/t));

            d = rnd(vec2(0.0, ceil(t*uv.y)/t));

        }

​

        coef1 = step(fract(t*uv.x),0.25);

        coef2 = step(fract(t*uv.y),0.75);

        p += inter(inter(a,b,coef1), inter(c,d,coef1), coef2) * (1.0/pow(2.0,(i+0.6)));

        t *= 2.0;

    }

    return p;

}

​

const mat4 fg_cols = mat4(0.,110.,202.,256., // blue

                        232., 141., 122.,256., // red

                        90., 188., 94.,256., // green

                        161., 90., 188. ,256.  )/256.; // purple 

const vec4 bg_col = vec4(229.,204.,175.,256.)/256.;

​

void main() {

     vec3 iResolution = vec3(canvasSize, 1.0);

​

​

     vec4 color = texture2D(tex0, vTexCoord);

    vec2 p = color.xy / iResolution.xy - 0.5;

//     p.x *= iResolution.x/iResolution.y;

​

    float r = length(p);

    float seed = floor(iTime*0.5);

    // fg_col = fg_cols[seed%4] logically, but this is a compatability workaround.

    vec4 fg_col = vec4(0.);

    fg_col += float(mod(seed,4.)==0.)*fg_cols[0];

    fg_col += float(mod(seed-1.,4.)==0.)*fg_cols[1];

    fg_col += float(mod(seed-2.,4.)==0.)*fg_cols[2];

    fg_col += float(mod(seed-3.,4.)==0.)*fg_cols[3];

    float noise_scale = 0.55+0.075*mod(seed, 3.);

    float num_layers = 3.+2.*mod(seed, 5.);

    seed *= num_layers;

    float v = 0.;

    #define MAX_ITER 100.

    for (float i = 0.; i < MAX_ITER; i++) {

        if (i > num_layers) { break; }

        float h = noise_scale*perlin(p+vec2(i+seed))+r;

        if (h < 0.4) { v += 1./num_layers; }

    }

​

    gl_FragColor = mix(bg_col, fg_col, v); 

}

  `;

  let fragSrc = `precision highp float;

​

  // x,y coordinates, given from the vertex shader

  varying vec2 vTexCoord;

​

uniform float time;

​

  // the canvas contents, given from filter()

  uniform sampler2D tex0;

  // other useful information from the canvas

  uniform vec2 texelSize;

  uniform vec2 canvasSize;

  // a custom variable from this sketch

  uniform float darkness;

​

  void main() {

    // get the color at current pixel

    vec4 color = texture2D(tex0, vTexCoord);

    // set the output color

    color.b = tan(time);

    color *= darkness;

    gl_FragColor = vec4(color.rgb, 1.0);

  }`;

​

  frag = createFilterShader(wc_block_src);

}

​

function draw() {

  // fill(0)

  // circle(0,0, 300);

// rotate(frameCount)

  let w2 = cell_w/2;

  let x = -width / 2;

  let y = -height / 2;

  let c = 0;

  stroke(color(0,0,255))

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

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

      if (c % 2 == 0) fill(0);

      else fill(220);

      rect(x, y, cell_w, cell_w);

      fill(color(255,0,255))

      if (c % 2 == 1) {

      beginShape();

      vertex(x, y);

      vertex(x+w2,y-w2);

      vertex(x+cell_w+w2,y-w2);

      vertex(x+cell_w+w2,y+w2);

      vertex(x+cell_w,y+cell_w);

      vertex(x+cell_w,y);

//       vertex(x+cell_w+w2,y+w2);

//       vertex(x+cell_w,y+cell_w);

//       vertex(x+cell_w,y)

      endShape(CLOSE);

      }

      x += cell_w;

      c++;

    }

    y += cell_w;

    x = -width / 2;

    c++;

  }

​

  frag.setUniform('iTime', frameCount);

  // frag.setUniform('darkness', 50.0);

  filter(frag);

}

​