- Chapter 5. Response
- Getting Started with p5.js book
- video 3.1: Introduction to Conditional Statements (~12 min)
ifstatement- relational operators (
>,<,<=,>=,==,===,!==) - sketch - if mouseX
- video 3.2: Bouncing Ball (~8 min)
- video 3.3: else, else if, and, or (~17 min)
- video 3.4: Boolean variables (~20 min)
One way to practice working with conditionals is to try to code common interface elements in the canvas: e.g. rollover, button, slider, etc.
- sketch - circle rollover
- sketch - square rollover
- sketch - button hold down
- sketch - button switch
- sketch - quadrant rollover
- sketch - rollover with fade
- sketch - draggable
- sketch - knob
- sketch - slider
Let's recap, explore, and experiment with the concepts introduced in this session.
Recall from the last session we used a variable circleX to animate a circle moving across the screen. When the circle reaches the right edge of the canvas it disappears.
circle(circleX, 150, 64);
circleX = circleX + 1;
sketch - make your own variable
To have the animation wrap around when the circle passes the right edge of the screen, we used the remainder arithmetic operator %.
circleX = (circleX + 1) % width;
In this sketch we replace the remainder arithmetic operator with an if statement to get the same effect.
circleX = circleX + 1;
if (circleX > width) {
circleX = 0;
}
When the variable circleX reaches a value greater than width it is set to zero.
sketch - 3.1.1 variable circleX width if
Let's take a closer look at the if statement. It has two main parts, the test and the statements.
if (**test**) {
**statements**
}
The statements is any number of statements that will be executed if the test is true.
Let's take a deeper look at what tests are possible.
The syntax of the comparision is a > b where a can be any expression,
and b another expression. The expression is true if the value of a is greater than b. We can also test for a less than b with a < b.
We can use what we have seen with basic arithmetic to get some variations. In this script two circles move in opposite directions.
circle1X = circle1X + 1;
if (circle1X > width) {
circle1X = 0;
}
circle2X = circle2X - 1;
if (circle2X < 0) {
circle2X = width;
}
sketch - 3.1.2 variable circle1X circle2X
- have the circles remain entirely within the canvas.
sketch - 3.1.3 variable circle1X tight
To have the circle animate horizontally back and forth on the canvas we introduce a variable, circleXspeed, that controls the direction of the animation.
sketch - 3.2 variable circleXspeed
let circleXspeed = 1;
...
circleX = circleX + circleXspeed;
if (circleX > width) {
circleXspeed = -1;
}
if (circleX < 0) {
circleXspeed = 1;
}
When circleXspeed is 1, or any value greater than zero, the circle will move to the right. When circleXspeed is -1, the circle will move to the left. It's helpful to visualize the X-axis as a number line:
| ... | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ... |
Adding positive values to variable circleX will move to the right,
adding negative values will move to the left.
- add two buttons to adjust the speed of the animation
sketch - 3.2 variable circleXspeed buttons
- using negation and logical OR operator we can simplify the bounce script
if (circleX > width || circleX < 0) {
circleXspeed = - circleXspeed;
}
In pseudo-code (english like code) the if statement reads
if the variable
circleXis greater than the width of the canvas
OR less than the value of the left edge of the canvas, do this:change the sign of variable
circleXspeedfrom positive to negative, or negative to positive
sketch - 3.2 variable circleXspeed OR
- introduce a variable for the Y location and have the circle also travel top to bottom
sketch - 3.2 variable circleXspeed scan
- add DOM elements to control one of your animated sketches.
Let's re-mix the bouncing ball sketch to visualize the animation as a pattern. In this re-mix the call to function background is commented out to produced a pattern of the drawings over time.
- convert an animation sketch to a pattern of drawings over time.
We have seen how we can do quick experiments by commenting out code and manually changing the initial value of variables. When we find a range of settings or sections of code that maybe interesting and we want to quickly compare, it can be convenient to create DOM elements to allow us to explore with a few clicks.
Let's explore using DOM elements to display and change variables.
In the video tutorial a ball is animated bouncing across the canvas. In this remix, DOM elements are added to display the variables: x the location of the ball, and speed.
let x = 0;
let speed = 3;
...
function create_ui() {
createSpan().id('ix');
createSpan().id('ispeed');
}
function update_ui() {
select('#ix').html('[x='+x+'] ');
select('#ispeed').html('[speed='+speed+'] ');
}
The DOM function createSpan creates a place to show a value. The DOM function select is used to update the DOM element to show the variable with some descriptive text.
Adding buttons to change the speed or location.
The DOM checkBox element is a simple way to set and display a boolean variable.
In this example the boolean variable a_move is used to control the animation. If it is true the animation will run, otherwise there is no movement. Here are the steps to connect a variable to a checkBox DOM element.
The variable is declared and given an initial value.
let a_move = true;
For example, the if statement can be used to control the action.
if (a_move) {
circleX = (circleX + 1) % width;
}
At setup use createCheckbox to create the checkBox, give it a label, give it an initial value, and give it code to run to update the variable.
// createCheckbox([label], [value])
createCheckbox('move', a_move).changed(function() {
a_move = this.checked();
});
A span can be used to to display a variable. A button or a slider can be used to change a variable. In this example the variable a_len determines the diameter of the circle. Let's connect this variable to DOM elements to display and change it. First we'll connect the variable to a span for display, then use buttons and a slider to change the variable.
The variable is declared and given an initial value.
let a_len = 64;
circle(circleX, circleY, a_len);
createButton('a_len 50').mousePressed(function() {
a_len = 50;
});
// createSlider(min, max, [value], [step])
createSlider(0, 200, a_len).input(function() {
a_len = this.value();
});
- use
createSpanto create the span and give it an id.
createSpan().id('ia_len');
- at
drawuseselectto update the span with the value of the variable. The text inside the single quotes is a label for the value.
select('#ia_len').html('[a_len=' + a_len + '] ')
- add DOM elements to display variables used in your animations
Sketches from the Getting Started book.
You are invited to remix and combine them to further explore.
- Chapter 5 Response
Ex_05_01 frameCount
Ex_05_02 setup draw
Ex_05_03 setup, Meet draw
Ex_05_04 Track the Mouse
Ex_05_05 The Dot Follows You
Ex_05_06 Draw Continuously
Ex_05_07 Set Thickness on the Fly
Ex_05_08 Easing Does It
Ex_05_09 Smooth Lines with Easing
Ex_05_10 Click the Mouse
Ex_05_11 Detect When Not Clicked
Ex_05_12 Multiple Mouse Buttons
Ex_05_13 Find the Cursor
Ex_05_14 The Bounds of a Circle
Ex_05_14 The Bounds of a Circle pulse -remix-
Ex_05_14 The Bounds of a Circle obj -remix-
Ex_05_15 The Bounds of a Rectangle
Ex_05_16 Tap a Key
Ex_05_17 Draw Some Letters
Ex_05_18 Check for Specific Keys
Ex_05_19 Move with Arrow Keys
Ex_05_20 Touch the Screen
Ex_05_21 Track the Finger
Ex_05_22 Map Values to a Range
Ex_05_23 Map with the map Function
Ex_05_99 Robot03_Response
