//

// An example sketch showing the p5.filterShader library

// https://github.com/BarneyWhiteman/p5.filterShader

​

​

let ditherShader;

let ditherTexture;

​

// Load the shader and noise texture

function preload() {

  ditherShader = loadShader("dither.vert", "dither.frag");

  ditherTexture = loadImage("blue_noise.png");

}

​

function setup() {

  createCanvas(600, 600, WEBGL);

  noStroke();

}

​

function draw() {

  background(255);

  // Turn on a moving light

  const t = 0;//millis()/1000;

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

  // Draw some multi-coloured balls

  translate(-height/6, 0, 0);

  fill(255, 0, 255);

  sphere(height/4);

  translate(width/3, -height/6, -50);

  fill(0, 255, 255);

  sphere(height/12);

  translate(0, height/3, 100);

  fill(255, 255, 0);

  sphere(height/15);

  // Pass the shader the dither noise texture and resolution

  ditherShader.setUniform("dither", ditherTexture);

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

  // Apply the filter

  filterShader(ditherShader);

}