​

​

let chromaShader;

​

let foreground;

let backLayer;

​

let chromaColour = [0, 1, 0];

let btnPickColour;

let pickingColour = false;

​

function preload() {

  backLayer = loadImage("dog.jpeg");

  chromaShader = loadShader("chroma.vert", "chroma.frag");

}

​

function setup() {

  createCanvas(600, 600);

  capture = createCapture(VIDEO);

  capture.hide();

  btnPickColour = createButton("Pick Colour");

  foreground = createGraphics(width, height, WEBGL);

  foreground.shader(chromaShader);

}

​

function draw() {

  if(pickingColour) {

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

    return;

  }

  clear();

  image(backLayer, 0, 0);

  chromaShader.setUniform("foreground", capture);  

  chromaShader.setUniform("thresh", mouseX/width);

  chromaShader.setUniform("col", chromaColour);

  foreground.clear();

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

  image(foreground, 0, 0);

}

​

​

function mouseReleased() {

  if(pickingColour) {

    const c = get(mouseX, mouseY);

    chromaColour = [c[0]/255, c[1]/255, c[2]/255];

    pickingColour = false;

  }

}