While animating there is a challenge of the character, shape leaving the screen and never returning back, because of their coordinates. We have this problem in the animation shown below.
How to make it turn back? Enter the conditional expression in P5. These expression are used in the same way as Javascript. The above visual will have a ball bouncing of the walls kind of the action shown below. This was done with two if statements, which can be done with single conditional by using || like below
if(xCoord > width || xCoord < 0){
speed = speed * -1
}Another ways to change the flow is modifying what is shown to the viewer. Like below shapes and their fills are modified depending where the mouse is. These changes are initiated by using simple reference numbers on the canvas.More sophisticated logic will be implemented by nesting or chaining these conditionals.
Else-If statement evaluates the first true statement and moves out of the loop. This creates difficult situation when trying to measure the variable with respect to a series of number ranges. What happens if the else-if is not used...
When "Else-if logic is used you see something different. Shapes get removed from the canvas.
There is more to conditional logic which will be taken up in another page, different set of visuals. Some of the exercises to try are, programming rollover, button click. These will be explored and shared here.