Getting started with p5.js

p5js

p5.js is a programming language created for artists. It is easy to learn and uses Javascript, the computer language of the internet and beyond. p5.js runs on a web browser, recent versions of Firefox, Chrome or Safari are fine. As such you can even run it on a mobile phone or tablet. Here you go to the p5js homepage to get an overview over the language.

Normally you need to open several windows to run Javascript on a browser, and you also need to embed your code in some basic HTML and CSS structure. p5.js provides a so called IDE that allows you to focus on the main part, coding with Javascript. It consists of an editor, allows you to execute the code, read and write data, save code and more. Launch the p5.js Web Editor by clicking on the link. Then you can code away!

First, please create an account by clicking on Sign Up in the top right corner of the window and follow the instructions to create an user account.

Don’t forget to write down your username and the password! It is a good idea to save these credentials on your Google account, then you have it always available.

A short introduction to p5.js you find here. Whenever you have finished a program or need to stop, don’t forget to save your file by selecting Save in the File menu item of the editor. Later you can reload your project with Open and continue to work.

A more comprehensive source to learn p5.js is Getting Started With p5js. This is a good introductory book with lots of code samples you can copy and paste into the editor and try out. Happy Coding is another site that introduces you to p5.js covering some topics with tutorials, and others with sample code.

These information will allow you to get up and running, on this site you also find more posts on p5.js going into more detail and showcasing sample projects.

Make the Pong game with p5.js

Game, p5js

191017 PongWithTwo.jpg

Introduction

The game is derived from the video Codetrain: pong game. The coding is broken down into different phases, implement each phase, do the testing and then proceed. Have fun!

We are using object oriented programming to make our game.

Object oriented programming (OOP):

So far we have made simple programs with procedural programming. We were putting all the code in one file, sketch.js.. In this paradigm, one line is executed after the other, loops and conditionals (if statements) control the flow of the program. We “outsourced” repetitive tasks into functions, these we could call whenever we needed their functionality.

Objectoriented Programming is different as we are modelling our problem into parts or objects. These objects have properties and methods and are interacting via their methods.  What does this mean, how does this apply to our game?

In a pong game we have two types of objects, the puck (ball) and the paddles to play the puck. The objects are defined within a class, that is a sort of template defining the properties (for a puck location, speed and size) and what it can do (show itself, change its location, react when been hit by the paddle, etc).

191016 PongObjects.jpg

Phase 1: Get the puck

Objective: Get a puck that launches in the middle and then moves towards the borders of the canvas.

The class Puck is defining the properties and actions what the puck can do.

The puck has five properties, location (with its coordinates x, y), its speed (also broken down into two components, speed in x direction vx and in y direction vy and its radius (size) r.

Inside this first version of the class Puck,we have four methods. The constructor() is creating a new puck, it also defines variables for its size, location and speed and puts some initial values to those.

The methods update() and show() change the location of the puck and show it on the canvas.

The method reset() is defining the location, direction and speed of a  new ball. We will use it later in the game whenever a point has been made and the puck needs to reappear.

To create a puck, we are calling puck = new Puck() in the setup() function. puck is then the name of the object. Methods of an object are executed with the syntax OBJECTNAME.METHODNAME(…). Example, in order to change the location of the puck, we call puck.update(), puck.show() will then draw the puck. These commands are inside the function draw that is bascially a loop.

191017 Pongp5jsPhase1.jpg

 

Phase 2: Create the paddles

Objective: Get two paddles, located at the left and right side of the canvas.

Now we create a new a class Paddle describing the “racket” to play the puck. As a first step we only create two static (i.e. fixed) paddles. The constructor has this time a variable isLeft. It can take two values, true or false. If it has true, we create the left paddle when called, if it is false it creates the right paddle.

191017 Pongp5jsPhase2A.jpg

Then create the two paddles by calling the constructor in the setup() function, we show them by using the update() and show() methods. Add the highlighted lines to your exisiting functions:

191017 Pongp5jsPhase2B.jpg

Phase 3: Move the paddles

Objective: Move the paddles with the keyboard.

Now we add an event loop. Event loops are checking the status of events, i.e. mouse buttons pressed, keyboard entries. We will use the keyboard to control the paddles. First, only enter the function keyPressed(). How do the paddles behalf?

Then add the keyReleased() method and see if the paddles are easier to handle.

IMPORTANT: After starting your sketch, you must click the mouse once inside the canvas for the events to reach your program.

191017 Pongp5jsPhase3.jpg

Phase 4: Let the paddles hit the puck

Objective: The puck is reflected from the paddle.

The following two methods allow the puck to be hit by the paddle. Add them inside the class Puck.

191017 Pongp5jsPhase4A.jpg

In order call the new methods, add the highlighted code inside the function draw().

191017 Pongp5jsPhase4B.jpg

Phase 5: The puck recognizes the borders of the canvas

Objective: The puck is reflected from the upper and lower edge of the canvas, it disappears when passing the left or right border. Furthermore, in the later case a new puck appears in the middle and starts moving.

191017 Pongp5jsPhase5A.jpg

Here is the addition to the function draw(). Make sure that the methods are called in the same order as shown here. You may need to rearrange their order.

191017 Pongp5jsPhase5B.jpg

Phase 6: The complete game:

Here is the complete game with the counter. You need to add the declaration of the two variables to count (i.e. leftscore and rightscore, line 4 and 5 in the main function. Line 31 to 33 show the counter on the canvas.

Inside the class Puck, you add the counter to the method edges(). leftscore++ and rightscore++ add 1 to the counter whenever the puck passes the left or right border of the canvas.

The main function:

191017 Pongp5jsSketch.jpg

Class Puck

191017 Pongp5jsPuck1.jpg

191017 Pongp5jsPuck2.jpg

Class Paddle

191017 Pongp5jsPaddle.jpg

Further things to do:

  1. Change the size of the puck.
  2. Change the paddle size, where do you do it? Do the changes apply for both paddles and why?
  3. Change the colour of background, puck and paddles.
  4. Can you control one paddle with the mouse, what do you need to add/change and where? The paddle should only move on the y axes, irrespective on the x location of the mouse.
  5. Add a second puck. You only need to make changes in function draw(), adding six lines of code will do the job. Do you have an idea how to do it?

Program:

Pong for Two

p5.js – Get to know it better

Animation, Game, GetToKnow, p5js

Some Resources to proceed with your learning:

This is a copy of a book introducing P5JS covering all basic features.

I suggest that you have a look, copy and paste some code snippets into the editor to execute them and then try to understand what is happening. The text will help you further with that.

In the coming two lessons we will focus on the content in Chapter 7 (images) and 8 (sound). To try out the projects, you need to download the images and sound files provided.  They are in  media (images, sounds, etc.), you can download them from this Github Repository.

If you are not too comfortable yet with p5js, I encourage you to start with the earlier chapters first and try to get deeper into programming.

Flappy Bird

Here is a video describing an implementation of the Flappy Bird game with P5JS.

 

This is a link to another Github repository with the source code for the game. You need to open the files, copy and paste the content into files with the same name that you created in your p5 editor. To create the files pipe.js and bird.js, select “Sketch” in the editor’s menu and then “New File”. Enter the file name with extention. For sketch.js and index.html just replace the content of the existing files.

More coding with p5.js, about conditionals

Game, GetToKnow, p5js, Uncategorized

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 > width && ball.y < 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 http://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.

p5.js – Create, Move and Interact with Sprites

Animation, p5js, Uncategorized

Here are some additional exercises, they prepare you for the game we will do in the following lessons, step by step.

Create a smiley

181105 Smiley oho

https://www.openprocessing.org/sketch/598332/embed/?plusEmbedHash=NjBhNzY4OGI5ZmRhYmQ1ZDA4Yzk0OTY4NGIxNzFjOWQyYzI1MjBhYmJkZmQxYzFiMTUyNWE3Zjc0YzJiZDI3MTJkY2I1ZWZiYTE4MTdiNThiNzUzNDdhZDc1YjcxZmQ2YmU5Y2YzYzEyMGQ2YjE1NWVjMjI4Yzk3Njg5ZGZlOWQwZ01XOUpsbjlHK0t0WmwrNU5BSTZNbjhBbk90OFhpaWhCK2R1ZWV6azZUVzNZTzV5RURWZ1VDWDdhYW95SVRpdWF5QUMvN3JCS1h6eUVRNGxUL1VHQT09&plusEmbedTitle=true” target=”_blank” rel=”noopener”>Smiley on Openprocessing

As a first step only create the lower lip, then you have a “classical” smiley.

Create a Packman sprite

pacman-151558_640.png

Hint: There is a shape function “arc(…)” that allows you to create the body of the Packman with one line. Have a look in the documentation and play around with the parameters inside the parenthesis.

Don’t forget that angles are entered in radians. 0 degree is 0 radian, 180 degrees are PI radians and 360 degrees are 2*PI radians. PI is a constant in p5js, its actual value is 3.14… You only need to generate the Packman, the three small circles we do not need for now.

Control the movements of your sprite with the mouse

How to interact with your program? How can you control what is happening on the canvas?

P5JS gives you access to the mouse and the keyboard.

The mouseX and mouseY variables return you the current position of the mouse cursor. You can use it to make a rectangle follow your mouse on the canvas:

181106 mouseX.jpg

Here is a video p5js mouse position that shows you more about this mouse variables and some related variables.

Your program can also recognize when the mouse is pressed and then do something. Here is a code snippet, you add your action between the curly brackets.

A shorter way for the if statement is simply “if (mousePressed) { … .”


if (mouseIsPressed == true) {
// do something
}

 

Control the movements of your sprite with the keyboard

You can also use the keyboard to control what is happening on the canvas. Here is a code snippet that uses four different keys. You find more information about the subject of keycodes in the reference documentation.

181106 p5js_KeyEvents.jpg

Make a rectangle change its colour depending on mouse or keyboard events

Now you have all the tools you need to create a small project that changes colour and or position of a rectangle. Here is a nice example

Next Step for the Packman game

With the examples given before, you can now make the Packman follow a horizontal line along the x axes.  The tricky part consists in making him turn and then also turning his face. Think about a solution before you have a look https://editor.p5js.org/mikefromd/embed/Skn51kA3m“>here and this is the code