createCanvas(300, 300);

  ;

}

​

function draw() {

  /*Experiment with what happens

  when you uncomment this line of

  code that draws a background*/

  //background(230, 255, 242);

  background(230, 255, 242)

  /*use print() to output a variable

  into the console in order to see its

  current value. Watch how the mouseX

  value changes in the Console as you

  move the mouse around the canvas*/

  print(mouseX);

  /*here we are setting the position

  of the ellipse to whatever the 

  inbuilt mouseX and mouseY variables 

  are currently equal to

  ellipse(x,y,w,h)*/

  fill(mouseX, mouseY, 0);

  strokeWeight(mouseX/10);

  ellipse(mouseX, mouseY, mouseX, mouseY);

  /*EXERCISE

  Create a duplicate of this sketch

  and use the mouseX and mouseY to draw

  a different shape and have it follow the

  mouse i.e. a rect(x,y,w,h)

  You could then try using the mouseX

  or mouseY to control some other

  value that determines a shape for

  example the width and height parameter

  of the ellipse or a rectangle

  ellipse(150,150,mouseX,mouseY)

  */

}

​