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.

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.
  • 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);
}

Click here to see this button in action.

5 mins
More Interaction
Extra stuff
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.
There are no records to display.
Powered by Gibbon v28.0.00dev

Founded by Ross Parker at ICHK Secondary | Built by Ross Parker, Sandra Kuipers and the Gibbon community
Copyright © Gibbon Foundation 2010-2024 | Gibbon™ of Gibbon Education Ltd. (Hong Kong)
Created under the GNU GPL | Credits | Translators | Support