Input - Week 06
Welcome to week 6 of Intro to Creative Web Dev!
Now you know how to use if statements to make decisions in your code, and you know how to create animations by changing your sketch over time. This week is all about getting input from the user to make your sketch interactive!
Work through the activities in this page to complete the week.
Input
First, read through this tutorial:
Project
Now you know how to make interactive sketches in p5.js.
To practice that, create an interactive p5.js sketch that uses at least five input variables or functions. Check out events section of the p5.js reference for a full list of options. Feel free to choose any five variables or functions from that list!
For example:
function setup() {
createCanvas(400, 400);
background(32);
}
function draw() {
if (mouseIsPressed) {
fill(random(255), random(255), random(255));
circle(mouseX, mouseY, 25);
}
}
function keyPressed() {
background(32);
}
This code uses the mouseIsPressed variable to check whether the mouse is currently pressed, and if so it uses the mouseX and mouseY variables to draw a randomly colored circle at the mouse’s location. It also uses the keyPressed() function to clear the screen whenever the user presses a key on their keyboard.
This code had 4 total variables and functions. Try to create a sketch that uses at least five!
Check out the examples page for inspiration, and don’t be afraid to get creative. This is the last week you’ll be working with p5.js, so try stretching your p5.js muscles!