.

function setup() {

  createCanvas(400,400);

}

​

function draw() {

  background(255);

​

  fill (255,0,0); //red

  ellipse (200,200,mouseX,40); //this rect moves right with horizontal mouse position

​

  fill (0,255,0); //green 

  ellipse (350,350,40,mouseY); //this rect moves on both the x and y axis 

  fill (mouseX,mouseY,mouseY); //blue

  ellipse (mouseX,255,0,255); //moves the rect diagonally by placing mouseX in both x & y positions

​

  //THE FOLLOWING IS TO SHOW YOU WHAT'S HAPPENING WITH THE MOUSE

  noStroke(); //no stroke on text

  fill (0); //this fill is used to color text

  textAlign (CENTER,CENTER); //this is a center anchor point for text

  textSize (14);  //this is the size of text in pixels

  //this prints the text on the actual canvas

  text ('mouseX= '+mouseX,300,20);  //arguments: label+variable, x position, y position

  text ('mouseY= '+mouseY,300,40);  //arguments: label+variable, x position, y position

​

​

}

​

//1)

//Turn off (deactivate) all of the rectangles and color commands with forwad slashes. These

//lines of code are there just for reference.

​

//2)Now...

//Code a red ellipse in the center that doesn't change position (stays in place) 

//but grows wide w/ horizontal mouse movements to the right (mouse moving on x-axis).

​

//3)Code a green ellipse in the bottom right corner that doesn't change position 

//(stays in place) but, grows tall with vertical mouse movements (mouse moving on y-axis).

​

//4)Code an ellipse on the top that moves left to right with the mouse and 

//changes color using mouseX and mouseY (your choice of color variations.)

​

//Challenge Assignment:

//Use the clear background from video 3 to make one shape have trails.