let blurVShader;

​

let img;

​

let blurPassH;

let blurPassV;

​

function preload() {

  // Load the shader

  blurHShader = loadShader('basic.vert', 'basic.frag');

  blurVShader = loadShader('basic.vert', 'basic.frag');

​

  // Load the image

  img = loadImage("mountain.jpg");

}

​

function setup() {

  createCanvas(500, 500);

​

  blurPassH = createGraphics(width, height, WEBGL);

  blurPassV = createGraphics(width, height, WEBGL);

​

  noStroke();

  blurPassH.noStroke();

  blurPassV.noStroke();

}

​

function draw() {

​

  // Set the horizontal pass shader

  blurPassH.shader(blurHShader);

​

  // Send the uniforms

  blurHShader.setUniform("tex", img);

  blurHShader.setUniform("resolution", [width, height]);

  blurHShader.setUniform("direction", [1.5, 0]);

​

  // Draw the geo

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

​

  // Do the vertical pass

  blurPassV.shader(blurVShader);

​

  // Blur V Uniforms

  blurVShader.setUniform("tex", blurPassH);

  blurVShader.setUniform("resolution", [width, height]);

  blurVShader.setUniform("direction", [0, 1.5]);

  // Draw the geo

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

​

  // Finally draw the image

  image(blurPassV, 0, 0);

}