createCanvas(400, 400);

  background(0);

}

​

function draw() {

     // https://www.youtube.com/watch?v=7A5tKW9HGoM&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=8

  fill(mouseY) // as you move mouse up and down, transparency of shape goes up and down

   ellipse (200, 200, 50, 50)

  //ellipse (mouseX, 50, 50, 50) // ellipse will move according to horizontal movement of mouse, x axis: horizontal movement, y axis: vertical movement

  // ellipse (50, mouseY, 50, 50) // same can be done with mouseY but vertical

  // ellipse (50, mouseX, 50, 50) // ellipse will move vertically with horizontal mouse movement

  // background needs to be put in function setup for this to work

  // noStroke();

  // fill(255)

  // ellipse(mouseX, mouseY, 30, 30)

  // if background is in function draw then ellipse will just follow mouse without forming new ones in its trail

  // if fill has two variables only, one will be depth of color, the other transparency as its moving and how long you keep the mouse on top

//   noStroke();

//   fill(255, 100) // (color, transparency as it moves)

//   ellipse(mouseX, mouseY, 30, 30)

}