​

let maxD = 100;

let frag, frag2;

​

fragSrc4 = `precision mediump float;

​

// lets grab texcoords just for fun

varying vec2 vTexCoord;

// our texture coming from p5

uniform sampler2D tex0;

void main() {

  vec2 uv = vTexCoord;

  //uv.y = 1.0 - uv.y;

  vec3 col;

  vec4 _col = texture2D(tex0, uv);

  col = _col.rgb;

​

  float noise = 0.1;

  // glitch

  vec2 offset = vec2(noise * 0.05, 0.0);

  col.r = texture2D(tex0, uv+offset).r;

  col.g = texture2D(tex0, uv).g;

  col.b = texture2D(tex0, uv-offset).b;

  //https://github.com/AmanSachan1/Shaders_in_WebGL

  // filmic

  // 

  // col = max(vec3(0.0), _col.rgb - vec3(0.004));

  // col = (col * (6.2 * col + 0.5)) / (col * (6.2 * col + 1.7) + 0.06);

  // invert

  // col = vec3(1.0-_col.r, 1.0-_col.g, 1.0-_col.b);

  float alpha = 1.0;

​

  gl_FragColor = vec4(col, alpha);

}`;

​

​

let fsrc = `precision highp float;

​

#define PIXEL_SIZE 4.0

​

const float iTime = 1.0;

​

​

​

​

​

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

  varying vec2 vTexCoord;

​

  // the canvas contents, given from filter()

  uniform sampler2D tex0;

  // other useful information from the canvas

  uniform vec2 texelSize;

  uniform vec2 canvasSize;

​

  void main() {

    vec2 uv = vTexCoord;

    vec4 tex = texture2D(tex0, uv);

​

​

    vec2 pos = uv - canvasSize.xy * 0.5;   

    vec2 dir = vec2(0.0, 1.0)*rot(sin(iTime*0.4545)*0.112);

    float value = uv.;//sin(dot(pos, dir)*0.048-iTime*1.412)*0.5+0.5;        

    gl_FragColor = vec4(vec3(getValue(value, pos)), 1.0);

​

​

​

​

​

    // gl_FragColor = tex;

  }`;

​

let ditherTexture;

let _shader;

let gfx;

function preload() {

   ditherTexture = loadImage("blue_noise.png");

  _shader = loadShader("shader.vert", "shader.frag");

}

​

function setup() {

  createCanvas(1000, 1000, WEBGL);

  gfx = createGraphics(width, height);

  gfx.background(20);

  gfx.stroke(220);

  gfx.noFill();

​

  // frag = gfx.createFilterShader(fsrc1);

​

​

  let maxR = maxD / 2;

  for (let y = maxR; y < height; y += maxD) {

    for (let x = maxR; x < width; x += maxD) {

      if (random() > 0.25) {

        let d = 1;

​

        while (d < maxD) {

          gfx.circle(x, y, d);

          d += random(1, 25);

        }

        gfx.circle(x, y, maxD);

      } else {

        gfx.fill(random(20,220))

        gfx.rect(x-maxR/2, y-maxR/2, maxR,maxR)

        gfx.noFill();

      }

    }

  }

// image(gfx, -width / 2, -height / 2);

  // _shader.setUniform("dither", ditherTexture);

  // _shader.setUniform("dither_res", [ditherTexture.width, ditherTexture.height]);

  // Apply the filter

  // filterShader(_shader);

  // gfx.filter(frag);

  // image(gfx, -width / 2, -height / 2);

  t = 0;

  frag2 = createFilterShader(fragSrc4);

}

​

let t;

let D = 100;

function draw() {

  const d = millis() / 1000;

  // background(50*cos(frameCount%50));

  trsp = 50 * cos(d/4) + 160

  // background(trsp,120)

  push();

  rotate(millis()/1000);

  image(gfx, -width / 2, -height / 2);

  filter(frag2)

  pop();

  // let dirX = (mouseX / width - 0.5) * 2;

  // let dirY = (mouseY / height - 0.5) * 2;

  // directionalLight(250, 250, 250, -dirX, -dirY, -1);

  directionalLight(255, 255, 255, cos(d/2), sin(d), -1);

  push();

  // noFill();

  fill(color(0,220,0))

  // stroke(color(0,255,0));

  noStroke();

  rotateX(millis()/500);

  rotateY(millis()/1000);

  rotateX(millis()/1200);

  let x = 50 * cos(t);

  let y = 50 * sin(t);

  t+=PI/32;

  translate(x,y,0);

  sphere(100,8,8);

  pop();

 // image(gfx, -width / 2, -height / 2);

  _shader.setUniform("dither", ditherTexture);

  _shader.setUniform("dither_res", [ditherTexture.width, ditherTexture.height]);

  // Apply the filter

  filterShader(_shader);

  // filter(frag2)

}

​

function keyPressed() {

  if (key == "s") saveGif("dither.gif", 8);

}

​