// the draw function is a loop. Every time you get to the end of the 

//draw function the screen is updated, then the draw func repeats

//stuff is drawn again, screen is updated.

// the example in 4.1 there is a for loop in the draw function. this is

//a nested loop 

// the purpose of a for loop inside the draw loop, is not to animate

//something but rather to draw a whole bunch of things for each cycle 

// of the draw loop. 

// what if you put another for loop inside a loop. For every X

//do something to every Y. this is super importatnt and it comes 

//up a lot in computer graphics programming

// the canvas we are drawign to is a 2 dimensional grid. It has 

//pixels along a X axis adn it has pixels along a Y axis

// so if i would like to draw something, for every X fill in all 

//the Ys 

// a nested loop is if you want to see a grid 

function setup() {

  createCanvas(600, 400);

}

​

function draw() {

  background(220, 30,130);

  stroke(255);

  strokeWeight(4);

  for (var x= 0; x<=mouseX; x=x+50){

    for( var y = 0; y<= mouseY; y= y+50){

    fill ( 50, random( 222), random( 222));

    ellipse( x, y, 25,25);

    }  

  }

​

}