let shaderTest2;

​

function preload() {

  //These are the same shader (turns the fragments red)

  shaderTest = loadShader("basic.vert", "basic.frag");

  shaderTest2 = loadShader("basic.vert", "basic.frag");

}

​

function setup() {

  createCanvas(400, 400, WEBGL);

  noLoop();

}

​

function draw() {

  translate(-width / 2, -height / 2);

  fill(0);

  noStroke();

  background(220);

​

  //Draw first circle

  cnv = createGraphics(width, height, WEBGL);

  cnv.translate(-width / 2, -height / 2);

  cnv.fill(0);

  cnv.noStroke();

  cnv.shader(shaderTest); //Uses first shader

  cnv.ellipse(200, 50, 50, 50);

  cnv.resetShader();

​

  image(cnv, 0, 0);

​

  //Draw second circle

  cnv2 = createGraphics(width, height, WEBGL);

  cnv2.translate(-width / 2, -height / 2);

  cnv.fill(0);

  cnv2.noStroke();

  cnv2.shader(shaderTest); //Uses first shader again, but...

  cnv2.ellipse(200, 150, 50, 50);

  cnv2.resetShader();

​

  image(cnv2, 0, 0); //This doesn't show up!!

​

  //Draw third circle

  shader(shaderTest2);

  ellipse(200, 250, 50, 50);

  resetShader();

​

  //Draw fourth circle

  shader(shaderTest2);

  ellipse(200, 350, 50, 50);

  resetShader();

}

​

function mouseClicked() {

  loop();

  noLoop();

}

​