1. p5.js mouse, keyboard and if’s

2. In this variation of an earlier program, the ellipses are red if the mouse is pressed and green otherwise

3. mouseIsPressed p5.js has a Boolean variable mouseIsPressed
Variable means it can change
Boolean means it is true or false
The structure of if is
If(ask some true-false question){
what to do if the answer is true
} else {
what to do if the answer is false }

4. mouseX and mouseY
mouseX and mouseY are built-in variables in p5.js that indicate
The horizontal position of the mouse from the left edge of the canvas: mouseX
The vertical position of the mouse from the top of the canvas: mouseY
Since there is no background() in the function draw, we “remember” what was drawn earlier and draw on top of it

5. Nested if’s: within the block of code associated with an if (inside curly brackets), we can ask further (follow-up) questions

6. Nesting cont.
You only execute line 11 if the mouseIsPressed is true and if it is true that
the mouseX is less than half the width
You only execute line 13 if the mouseIsPressed is true and if it is false that

7. else if: A different type of follow-up question

8. Else if Cont.
The else-if structure allows one to ask a follow-up question in case the first question produced an answer of false
First we ask if the horizontal position is less than 100, when that turns out to be false we ask the follow-up question is it less than 200, when that is false we ask the follow question is it less than 300, etc.

9. Boolean AND: Asking if two things are true without nesting

10. ANDED if(200<mouseX && mouseX<400){ fill(255,0,0); }
There are two conditions (true-false) questions: 1) is the horizontal position greater than 200; 2) is the horizontal position less than 400
AND (uses &&) mean BOTH must be true for the combination to be true
Result horizontal position must be between 200 and 400

11. Another AND example: the conditions can be on different variables (e.g. horizontal and vertical positions)

12. Boolean OR: Asking if either of two things is true (uses || between conditions)

13. Another OR example: either less than 200 or more than 400

14. Combining AND’s with OR’s

15. Taking Precedence
When combining Boolean AND’s and OR’s, remember that an AND is a bit like multiplication and an OR is a bit like addition. Thus like multiplication and addition, there is a precedence (order of operations). Like multiplication is done before addition, ANDing is done before ORing.
Parentheses can force a higher precedence

16. Without parentheses

17. With parentheses

18. Japanese Flag

19. The function keyPressed handles the “typing” event
The function keyPressed handles the “typing” event. If the code (ASCII) for the character typed is an up arrow, change y the vertical position
The print statement shows results in the console

20. UP_ARROW same as 38

21. The Numpad uparrow has a code of 104, so an OR allows the user to press either up arrow

22. Else if to allow down arrows

23. More code to allow horizontal moves