SA 12. Due: Wed, May 17

Write a sketch that shows webcam video by way of falling drops. The drops (random positions, sizes, and speeds, at your discretion) take on the colors of the underlying webcam image. There is just a white background otherwise; thus the image is clearer with more drops (but one can still get a glimpse with relatively few.) You'll want to recycle the drops, popping them back to the top when they reach the bottom (hint: very much like SA10, but with colors chosen from the drops' locations within the Webcam image).

Hint: use this.x and this.y to access (index) Capture's get() method. The following code performs most of what you need, but you must replace the Ball class with a class for falling drops. Everything works the same, except the update() method, velocity vy and gravity g, and the initialization of the y-coordinate in the constructor().

let balls = new Array(200);
let cap ;

class Ball{
  constructor(){
    this.x = random(width);
    this.y = random(height);
  }
  
  draw(){
    // use cap.get() with int(x) and int(y) for integers
    let c = cap.get( int(this.x), int(this.y) );
    fill(c); // make circle Webcam color
    ellipse(this.x,this.y,20,20);
  }
  
  update(){
    this.x += random(-10,10);
    this.y += random(-10,10);
  }
}

function setup() {
  createCanvas(400, 400);
  cap = createCapture(VIDEO);
  cap.hide();
  for (let i=0; i<balls.length; i++){
    balls[i] = new Ball();
  }
}

function draw() {
  background(0);
  for(let i=0; i<balls.length; i++){
    balls[i].draw();
    balls[i].update();
  }
}

As always, turn in your sketch and a screenshot on Canvas, as SA 12 in the Assignments section.