Funky Circles is a way of drawing crazy circles on top of a selfy

funky_circles.js

// Copy this into the p5.js editor
// https://editor.p5js.org/

let capture;
let circles = [];

let timeToChangeSeconds = 0.2;

let changeColorTime;

function setup() {
  createCanvas(640, 480);
  capture = createCapture(VIDEO);
  capture.size(640, 480);
  capture.hide();
  changeColorTime = timeToChange();
}

function drawCircle({ x, y, size, c })  {
  fill(c);
  circle(x, y, size);
}

function keyPressed() {
  if (keyCode === 67) {
    circles = [];
  }
  
  if (keyCode === 83) {
    saveCanvas('funky_circle', 'png');
  }
}

function timeToChange() {
  return Date.now() + 1000 * timeToChangeSeconds;
}

function draw() {
  image(capture, 0, 0, 640, 480);
  circle(mouseX, mouseY, 20);
  circles.forEach(drawCircle);
  if (changeColorTime <  Date.now()) {
    circles = circles.map(c => {
      return {
        x: c.x,
        y: c.y,
        size: c.size,
        c: createColor()
      }
    });
    changeColorTime = timeToChange();      
  }
}

function createColor() {
  let red = random(0, 255);
  let green = random(0, 255);
  let blue = random(0, 255);
  let c = color(red, green, blue);
  c.setAlpha(random(100, 200));
  return c;
}

function mousePressed() {
  circles.push({
    x: mouseX,
    y: mouseY,
    size: random(5, 300),
    c: createColor()
  });
}