Interactivity
Time
1.5 hrs
Difficulty
Beginner
Prerequisites
Shapes and Colours
Variables
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.
License
This work is shared under the following license: Creative Commons BY-SA-NC
Outline
Learner Outcomes Students will:
|
|
Competency Focus
|
Interdisciplinary Connections
|
Reflection What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
|
|
Credits Any CC attribution, thanks, credit, etc.
|
This page requires you to be logged in to access it. Please login and try again.
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.
- 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:
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);
}
60 mins
Your Drawing App
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.
Links
- new p5js sketch
- Click here to see this button in action
- interactivity
- createCheckbox()
- createInput()
- createSlider()
- cursor()
- key
- keyIsDown()
- keyIsPressed
- mouseIsPressed
- mouseX
- mouseY
- pmouseX
- pmouseY
- saveCanvas()
- events
- the p5js reference
Images
There are no records to display.