function keyPressed(){
//this function runs anytime you press a key
if (keyCode === LEFT_ARROW) {
//move left
} else if (keyCode === RIGHT_ARROW) {
//move right
}
}
A boolean is a variable that is set to true or false. This is a binary choice.
Example
var iMadeMyBedToday = false;
Don’t confuse mousePressed() with mouseIsPressed.
mouseIsPressed is a builtin variable (like mouseX, or width) that we can use in our programs. We normally use it in our draw loop to detect if a key is building held down. If any key is being held down, then mouseIsPressed = true
example
function draw() {
background(237, 34, 93);
fill(0);
if (mouseIsPressed) {
ellipse(50, 50, 50, 50);
} else {
rect(25, 25, 50, 50);
}
print(mouseIsPressed);
}
Sometimes we want to do something many times. Over and over again.
We use loops to do this.
Use the for loop to specify having an action occur a set number of times.
for (var i = 0; i < 65; i++){
print("My age is "+i);
}
There are 3 sections in the for loop statement. First we initialize the temporary variable. Then we test to see if the statement is valid. Then we increment the temporary variable at the end of each loop.
Another example
for (var i = 99; i >= 0; i--){
print(i+" bottles of beer on the wall, "+i+" bottles of beer...");
}
If you are testing whether something is true
When you are asking a question, use an if statement.
Examples: Is my ball off screen? Is the color black?
If you need to make lots of things, use a for a loop
Examples: I need 300 circles.
An event is something your web browser does or something the user of your software does which indicates interaction. Examples are pressing a mouse button, dragging the cursor across the screen or pressing a key. p5.js gives a number of built-in functions to make it easier to work with events.
A full list of events can be found in the p5.js Reference section on events
function mousePressed(){
//this code will run anytime the mouse is Pressed
print('you clicked');
}
function keyPressed(){
//this function runs anytime you press a key
if (keyCode === LEFT_ARROW) {
//move left
} else if (keyCode === RIGHT_ARROW) {
//move right
}
}
Events happen independently of (outside) the draw loop.
For our bouncing ball, we needed to detect when we were on the page or not. This same technique can be used to detect when a user has clicked on a button.
First we see if our mouse has rolled over the rectangle
function setup() {
createCanvas(400, 400);
rectMode(CORNER);
}
function draw() {
background(220);
rect(150,150,100,100);
if (mouseX >= 150 && mouseX <= 150+100 && mouseY >= 150 && mouseY <= 150+100) {
//if we've rolled over do something
fill(0);
} else {
fill(255);
}
}
How do we take this code and alter it so that the button changes color only when we press the mouse?
Answer: place the code inside a test for whether the mouseIsPressed
more advanced rollover button example code
#
Take our bouncing ball starter code from here. Duplicate the code sketch. Now add:
Hints: Think about what new variables you need. You’ll need variables for the r, g and b color, for the width and height of the ball (could be the same), and the speed.
Post your link to Moodle.