Hello everyone:

This lecture has a resource that you can download with the refactored Patatap Clone code. 

In the refactor, the circles in the array are checked to see if their area is less than 1. If this condition returns true, then the circle is removed from the screen and from the array. See below:

function onFrame(event){
  for(var i = 0; i < circles.length; i++){
    circles[i].scale(0.9);
    circles[i].fillColor.hue += 1;
    if(circles[i].area < 1){
      circles[i].remove(); // remove the circle from the canvas
      circles.splice(i, 1); // remove the circle from the array
      console.log(circles);
    }
  }
}

I left a console.log() of the circles array so you could see this in action from your chrome developer tools.

Meanwhile, if you want to get rid of the Cross Origin errors in the console, you'll need to run a local HTTP server from your project's directory and load the circles.html file from there. The steps are as follows:

*Note: if using Windows, see instructions here

1) navigate to your project folder in the terminal

2) if you have python v2.x installed then run: 

python -m SimpleHTTPServer

 or for python v3.x:

python -m http.server

3) open up your browser and navigate to http://localhost:8000

4) select the circles.html file

Credit to Daniel and Tim for their help with the solution, thanks y'all!

Cheers,
Ian
Course TA