Here is a cheat sheet summarizing the most important methods P5JS provides to create graphics.

The following video introduces you to the concept of conditionals. They allow a program to branch, to do different things depending of the evaluation of the condition. Example:

If an object reaches the border of the canvas, then reverse its moving direction.

In Javascript they are of the form

if ( Boolean Expression ) { do something }.

A Boolean Expression is an expression that returns either True or False. If the expression gives true, the part following inside the curly brackets is executed, otherwise the program continues aftere the curly bracket.

In order to get True or False, you can apply different types of operators, normally on a combination of fixed values and variables. Today we will use relational operators.

A relational operator is of the form <, >, <=, >=, ==, ===, !=. They compare two values of same type, if the result is correct, the operator returns True, otherwise False. Here are two examples for relational operators:

(5 < 10) gives True. Another example: (5 > 1000) gives False.

Conditionals are used with variables. These can contain different values, and depending on their actual value and another fixed or also variable value, the operator returns True or False.

Here is the video:

There is another family of operators used frequently, logical operators. They work on boolean values. The most common operators are AND (in JS “&&”) and OR (in JS “||”).

Example for a logical expression within a conditional:

IF the ball is touching the upper border of the canvas AND at the same time touching the right border of the canvas, THEN do something.

This would express in Javascript as follows assuming that you have defined a vector object ball with the coordinates x and y. You can get its x coordinate with ball.x, the y coordinate with ball.y. Furthermore you need to know that the upper border has the y value 0 and the right border the x value width. Then you could write:

if (ball.x &gt; width &amp;&amp; ball.y &lt; 0) {do something}

You can describe the result of a logical AND operator depending on two input values in a table as follows:

Value 1  Value 2   Result

True     True      True

True     False     False

False    True      False

False    False     False

The other important logical operator is the OR operator. It can be described with the following table:

Value 1  Value 2   Result 

True     True      True 

True     False     True 

False    True      True 

False    False     False

Following are some exercises you can open, modify and then save in your account. You will need to manipulate colours, the website below allows you to determine the three integer numbers to choose a colour:

https://htmlcolorcodes.com/color-chart/

 

Now you can apply your knowledge about conditionals, Here is a code snippet you can work on and some tasks you can try out:

CodeSnippet Conditional 1

The tasks:

  • Draw a vertical line at x=150, give the line a thickness of 10 units and then make the colour of the background change when you pass the line from left to right.
  • Change the background colour when you go beyond the bottom of the canvas.
  • Change the the background colour when you reach the top right corner. You will need to use a logical operator together with two relational operators.
  • Change the colour of the background to the left of the vertical line x=150 to red when you move the mouse beyond the line. You may need to use a big rectangle to achieve this.
  • Copy the code and make a new project with it. Create a rectangle in the middle of the canvas. When the mouse is hovering over the rectangle, it should change its colour.

Revisit the Snake Game

Here is another full implementation of the snake game. Once you have opened the editor, you need to click on the small flash on the top left of the editor to open the file menu. The full code for the game is in the files script.js and snake.js.

Snake Game V2

Do the following modifications to the game:

  • Change the size of the canvas and see what happens.
  • Change the colour of the food
  • Change the size of the food in order to get a bigger playground.
  • Change the speed of the game
  • Reassign different keys for moving the snake.
  • Use the mouse to control the snake, not the keyboard.

Once you have opened the link, make sure that you have logged into your account. Once you have made changes to the code, you can save them as your own under “File”, “Save”. Don’t forget to give the project a suitable name.

Modify a clock

Here is a video showing how to create a “analog” dial clock with P5JS.

You may look in the References section of www.p5js.org to learn more about the methods transform(), rotate, push(), pop() as well as arc(…).

The “%” operator gives the remainder of a division on an integer number. Ex.: 23 % 12 = 11, 4 % 2 = 0, 5 % 2 = 1.

the map() function is defined in the p5js reference as follows:

Re-maps a number from one range to another.

In the example given in the reference, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). So you do not need to do the calculation yourself.

Here is the code for this clock:

p5js Clock

 

Have a look and modify the clock. Here are some ideas:

  • Change the colours of the indexes.
  • Change the way the time is shown (no index, maybe coloured arcs? Have a look in the video.
  • Create a 24 hour clock.
print