var captureButton;

var startButton;

var endButton;

var brushSlider;

​

var startState = false;

var scaler = 6;

var brushSize = 15;

var snapshots=[];

var thisSnap;

​

function setup() {

  pixelDensity(1);

  createCanvas(640, 480);

  liveCamera = createCapture(VIDEO);

  liveCamera.size(width / scaler, height / scaler);

  captureButton = createButton("Capture the moment!");

    captureButton.mousePressed(function(){

    snapshots.push(liveCamera.get());

  })

  startButton = createButton("start");

  startButton.mousePressed(function(){

    startState = true;

    background(0);

  })

  endButton = createButton("end");

  endButton.mousePressed(function(){

    startState = false;

    snapshots = [];

  })

  brushSlider = createSlider(scaler/2,50,15, 0.1);

  background(0);

}

​

function draw() {

    if (startState == true){

    if (snapshots.length>0){

      thisSnap = snapshots[0];

      let locX = round(map(mouseX,0,width,0,thisSnap.width));

            let locY = round(map(mouseY,0,height,0,thisSnap.height));

​

        let r = thisSnap.get(locX,locY)[0];

        let g = thisSnap.get(locX,locY)[1];

        let b = thisSnap.get(locX,locY)[2];

        noStroke();

        fill(r,g,b);

        brushSize = brushSlider.value();

        ellipse(mouseX, mouseY, brushSize,brushSize);

    }

    if (snapshots.length==0){

      liveCamera.loadPixels();

        let locX = round(map(mouseX,0,width,0,liveCamera.width));

            let locY = round(map(mouseY,0,height,0,liveCamera.height));

            let index = (locX+locY*liveCamera.width)*4;

​

        let r = liveCamera.pixels[index+0];

        let g = liveCamera.pixels[index+1];

        let b = liveCamera.pixels[index+2];

        noStroke();

        fill(r,g,b);

        brushSize = brushSlider.value();

        ellipse(mouseX, mouseY, brushSize,brushSize);

    }

  }

}