​

const colors = [

  "#874933",

  "#935B48",

  "#AB8F75",

  "#AA8E74",

  "#85715D",

  "#9D968A",

  "#767774",

  "#4C4C4C",

];

​

const randchoose = (arr) => arr[Math.floor(Math.random() * arr.length)];

​

function preload() {

  blurH = loadShader('base.vert', 'blur.frag');

  blurV = loadShader('base.vert', 'blur.frag');

}

​

function setup() {

  // shaders require WEBGL mode to work

  // at present time, there is no WEBGL mode image() function so we will make our createGraphics() in WEBGL, but the canvas renderer will be P2D (the default)

  createCanvas(windowWidth, windowHeight);

  // initialize the createGraphics layers

  pass0 = createGraphics(windowWidth, windowHeight, WEBGL);

  pass1 = createGraphics(windowWidth, windowHeight, WEBGL);

  pass2 = createGraphics(windowWidth, windowHeight, WEBGL);

}

​

function draw() {

  pass0.fill(randchoose(colors));

  pass0.noStroke();

  pass0.rect(Math.random() * width - width / 2, Math.random() * height - height / 2, Math.random() * width - width / 2, Math.random() * height - height / 2);

  // set the shader for our first pass

  pass1.shader(blurH);

  // send the camera texture to the horizontal blur shader

  // send the size of the texels

  // send the blur direction that we want to use [1.0, 0.0] is horizontal

  blurH.setUniform('tex0', pass0);

  blurH.setUniform('texelSize', [2.0/width, 2.0/height]);

  blurH.setUniform('direction', [1.0, 0.0]);

​

  // we need to make sure that we draw the rect inside of pass1

  pass1.rect(0,0,width, height);

  // set the shader for our second pass

  pass2.shader(blurV);

​

  // instead of sending the webcam, we will send our first pass to the vertical blur shader

  // texelSize remains the same as above

  // direction changes to [0.0, 1.0] to do a vertical pass

  blurV.setUniform('tex0', pass1);

  blurV.setUniform('texelSize', [2.0/width, 3.0/height]);

  blurV.setUniform('direction', [0.0, 1.0]);

​

  // again, make sure we have some geometry to draw on in our 2nd pass

  pass2.rect(0,0,width, height);

​

  // draw the second pass to the screen

  image(pass2, 0,0, width, height);

}