Mouse Variables

Purpose

Learning:	use `mouseX` and `mouseY` variables

Sandbox

1. Open and duplicate this sandbox sketch.
2. Try the updates suggested at in the comments at the top.
3. Why do we need both setup() and draw()?
4. What might happen if we remove background() entirely?
5. How does the computer know where the mouse is?

Walkthrough

Watch this video.

And annotate these images.

Exercises

1. Mouse Following

Approaching

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  // Complete this to make circle follow mouse
  circle(???, ???, 30);
}

2. Color Change

Approaching

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  // Make circle RED when mouse is pressed
  // and BLUE when mouse is not pressed
  if (mouseIsPressed) {
    fill(???);
  } else {
    fill(???);
  }
  circle(mouseX, mouseY, 30);
}

3. Location Check

Proficient

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  // Make circle bigger when on right side of canvas
  if (??? > ???) {
    circle(mouseX, mouseY, 50);
  } else {
    circle(mouseX, mouseY, 20);
  }
}

4. Opposite Circle

Distinguished

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  // First circle follows mouse
  circle(mouseX, mouseY, 20);

  // Can you place a second circle that does the opposite?
  // Hint: Use width and height!
}

5. Magic Marker

Distinguished

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  // Change size based on speed
  let speed = dist(mouseX, mouseY, pmouseX, pmouseY);

  circle(???, ???, ???);
}