let blur;

let graphics;

​

// load in the shader

function preload() {

  exampleShader = loadShader('example.vert', 'example.frag');

}

​

function setup() {

  createCanvas(600, 600);

  blur = createGraphics(width, height);

  blur.textAlign(CENTER, CENTER);

  blur.noStroke();

  blur.textSize(100);

  graphics = createGraphics(width, height, WEBGL);

  graphics.shader(exampleShader);

  exampleShader.setUniform("res", [width, height]);

}

​

function draw() {

  background(50, 50, 64);

  blur.clear();

  blur.fill(0, 255, 0);

  blur.text("Hello, world!", width/2, height/2);

  blur.fill(255, 0, 0);

  blur.circle(mouseX, mouseY, 60);

  exampleShader.setUniform("image", blur);

  graphics.clear();

  graphics.rect(-width/2, -height/2, width);

  image(graphics, 0, 0);

  blendMode(ADD);

  image(blur, 0, 0);

  blendMode(BLEND);

}