let bots = [];

let brush = 10;

let brushSize = 0.1;

let m;

​

​

function setup() {

  createCanvas(800, 800);

  capture = createCapture(VIDEO);

  capture.size(800, 800);

​

    dim = height/2;

    ellipseMode(RADIUS);

   c1 = color(255, 204, 0);

  c2 = color(255);

  drawGradient(c1, c2);

  noStroke();

​

  for (let i = 0; i < 500; i++) {

    bots[i] = new Bot();

  }

}

​

function draw() {

background(255,255,255,10);

  capture.loadPixels();

  let size = round(constrain(mouseX/ 8, 6, 32));

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

    for (let x = 0; x < width; x += size) {

      let a = y * width + x;

      let c = (255 - capture.pixels[a * 4]) / 300;

      let s = size * c;

     rect(x, y, s, s);

  }

  }

​

  m = millis();

​

  for (let i = 0; i < 500; i++) {

    bots[i].move(brush);

  }

​

  brush += brushSize;

​

  if (brush >= 10) {

    brushSize = -0.01;

  } else if (brush <= 0) {

    brushSize = 0.01;

  }

}

​

​

​

class Bot {

  constructor() {

    this.x = random(width);

    this.y = random(height);

    this.rx = random(-1, 1);

    this.ry = random(-1, 1);

    this.rc = color(random(255), random(255), random(255), random(255));

  }

  move(s) {

    fill(this.rc);

    ellipse(this.x, this.y, s, s);

    this.x += this.rx;

    this.y += this.ry;

    if (this.x > width || this.x < 0) {

      this.rx = this.rx * -1;

    }

    if (this.y > height || this.y < 0) {

      this.ry = this.ry * -1;

    }

  }

}

​

function drawGradient(x, y) {

  var radius = dim/2;

  var h = random(0, 600);

  for (r = radius; r > 0; --r) {

    fill(h, 90, 90);

​

    h = (h + 1) %180;

  }

}