let snapped = false;

let sparkleCounter = 0;

​

function setup() {

  createCanvas(640, 480);

  colorMode(HSB, 360, 100, 100);

  noStroke();

​

  //instantiate the VIDEO object, and draw it on the screen at 0, 0 

  video = createCapture(VIDEO);

  video.position(0, 0);

​

​

  //When we click the snap button, run the takeSnap function

  let snapButton = createButton("snap");

  snapButton.mouseClicked(takeSnap);

​

  blendMode(LIGHTEST);

}

​

​

//Cycle through our three stickers each time we press the mouse

function mousePressed() {

  if (snapped === true) {

    gradientFilter();

​

    if (sparkleCounter % 3 === 0) {

      sparkle();

    } else if (sparkleCounter % 3 === 1) {

      curvedSparkle();

    } else {

      lensFlare();

    }

​

    sparkleCounter += 1;

  }

}

​

​

//If we haven’t snapped a photo yet, we see our webcam video feed

//Once we run the takeSnap function, set snapped to true and remove the video feed, leaving only the still photo we took

function takeSnap() {

  if (snapped === false) {

    image(video, 0, 0);

    snapped = true;

    video.remove();

  }

}

​

function sparkle() {

  push();

​

  // Translate to the mouse's position.

  translate(mouseX, mouseY);

​

  // Set the shape's vertices.

  let vertex1 = random(3, 5);

  let vertex2 = random(10, 50);

​

  // Draw the star shape.

  beginShape();

  vertex(-vertex1, vertex1);

  vertex(0, vertex2);

  vertex(vertex1, vertex1);

  vertex(vertex2, 0);

  vertex(vertex1, -vertex1);

  vertex(0, -vertex2);

  vertex(-vertex1, -vertex1);

  vertex(-vertex2, 0);

  endShape(CLOSE);

​

  pop();

}

​

function curvedSparkle() {

  push();

​

  // Translate to the mouse's position.

  translate(mouseX, mouseY);

​

  // Scale the coordinate system.

  let starScale = random(0.1, 0.5);

  scale(starScale);

​

  // Set fill color.

  fill(0, 0, 100);

​

  // Draw the curved star shape.

  beginShape();

​

  // Original anchor at top.

  vertex(0, -100);

​

  // Top-right curve.

  bezierVertex(0, -50, 50, 0, 100, 0);

​

  // Bottom-right curve.

  bezierVertex(50, 0, 0, 50, 0, 100);

​

  // Bottom-left curve.

  bezierVertex(  0, 50, -50, 0, -100, 0);

​

  // Top-left curve.

  bezierVertex(-50, 0, 0,-50, 0,-100);

  endShape();

​

  pop();

}

​

​

//Draws circles filled with radial gradients when we click the screen

//Each circle’s size and color are a random value contained in the diameter and h variables

function lensFlare() {

  push();

  let diameter = random(50, 200);

  let h = random(150, 360);

​

  for (let d = diameter; d > 0; d -= 1) {

    fill(h, 90, 90);

    circle(mouseX, mouseY, d);

    h = (h + 1) % 360;

  }

  pop();

}

​

​

//Draws a linear gradient on the screen using a for loop and lerpColor

function gradientFilter() {

  push();

  let startColor = color(200, 100, 100);

  let endColor = color(300, 100, 100);

​

  for (let y = 0; y < height; y += 1) {

    let amt = map(y, 0, height, 0, 1);

    let gradColor = lerpColor(startColor, endColor, amt);

    stroke(gradColor);

    line(0, y, width, y);

  }

  pop();

}