Interactivity
Time 1.5 hrs

Difficulty Beginner
Prerequisites Shapes and Colours
Variables
Departments Science
Authors Sandra Kuipers
Groupings Individual
Minimum Year Group None

### Blurb

Keyboards and mice let us interact with the computer. In this unit, you'll learn to detect user interaction and trigger different events in your code.

This work is shared under the following license: Creative Commons BY-SA-NC

### Outline

 Learner OutcomesStudents will: ... Competency Focus ... Interdisciplinary Connections ... ReflectionWhat was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used? ... CreditsAny CC attribution, thanks, credit, etc. Keyboard Image by Alexander-design from Pixabay Mouse Image by Felix Mittermeier from Pixabay

5 mins
Things that Click
Getting Started

• 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.
5 mins
Mouse Input
Hands On

• We can detect a number of different mouse events.
• Here's an example of a mouseIsPressed event:

5 mins
Keyboard Input
Hands On

• 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:

10 mins
Buttons
Hands On
• 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);
}
``````
5 mins
More Interaction
Extra stuff
60 mins
Evidence
• 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.
There are no records to display.