• Computer things are more interesting if they're clickable!
• Did you know the average computer user clicks their mouse roughly 5,000 times per day!
• We click open apps, follow links, press buttons, drag sliders, move files around, and toggle menus.
• In this unit, we'll explore user input from mouse clicks, key presses, and buttons.

• We can detect a number of different mouse events.
• The mouse position through mouseX and mouseY
• The previous mouse position through pmouseX and pmouseY
• Whether the mouse is pressed with mouseIsPressed
• We can also change what the mouse looks like with cursor()
• Here's an example of a mouseIsPressed event:

• Keyboard input lets us detect when different keys are pressed:
• See if any key is pressed with keyIsPressed
• Check which key was pressed with the key variable
• Check is a key is held down with keyIsDown()
• This example checks if you press the A or Z key:

• Buttons let us trigger something to happen when the button is clicked.
• In order to create a button, first we create a variable for it.
• Then we use the createButton command to make the button.
• We set the button position with an x, y coordinate.
• And we tell the button which command to run when it is pressed.
• Here's an example of a button in p5js:

var button;

function setup() {
  createCanvas(300, 300);
  background(0);
  button = createButton('click me');
  button.position(110, 110);
  button.mousePressed(changeBG);
}

function changeBG() {
  var val = random(255);
  background(val);
}

Click here to see this button in action.

• p5js has lots of other options for events and interactivity.
• createSlider()
• createCheckbox()
• createInput()
• saveCanvas()

• MS paint was a hallmark of old-school paint applications.
• It existed long before fancy applications like Photoshop.
  
  
  
• Can you make a simple drawing application in p5js?
• Maybe it could ...
• Draw lines?
• Change line thickness?
• Switch colours?
• Draw shapes?
• Erase colours?
• Change the background?
• Clear everything?
• Create a new p5js sketch. Be sure to save it as you go!
• Stretch your skills. You'll need to check the p5js reference for new functions to use.
• Design a drawing app with as much interactivity as you can think of, then submit a link to your app as evidence of your learning in this unit.