Classes are a means to structure your program and make the code more easy to follow. A class allows you to put all variables and functions that create, manipulate and interact the same type of structure in one declaration and use them afterwards throughout your program.
(more to follow …)
Arrays are a powerful element of programming languages. They allow to store and manipulate data using one name and then accessing individual data with an index (number). You can imagine them as a container that holds many objects.
You may also imagine a postman distributing letters in one street with a certain name, distinguishing the individual addresses by the house numbers. The name of the street compares to the array name in programming, the index has the same meaning as the house number.
The image below summaries the key features of an array and also visualises how the indexing works to create, access and delete fields of an array.
You have several ways to access the elements of an array. The most common ways are …
A full documentation on arrays can be found on the MDN website. It not only describes in words what the class and its methods are doing, but it also provides small editors with sample code you can modify and execute. For each method there are detailed descriptions accessible on the left side of the window (if your browser window is wide enough) with even more sample code to play with. Have a look.
The following screenshot shows how the push and pop methods are working.
We will work extensively with the Array methods for making games, so getting familiar with them will be very helpful later.
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.
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.
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).
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.
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.
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:
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.
The following two methods allow the puck to be hit by the paddle. Add them inside the class Puck.
In order call the new methods, add the highlighted code inside the function draw().
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.
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.
https://editor.p5js.org/mikefromd/embed/qSTMuQNjs
In order to delay the execution of a code snippet in Javascript, use the setTimeout() method.
Its syntax is as follows:
setTimeout(functionName, delay)
FunctionName is a call back function that will be executed after the time fixed in the parameter delay has passed. In this video you get more details on how to use this function:
The following tutorials are from Daniel Shiffman and can all be found on his Youtube channel “Codetrain”. I have selected some basic ones for you to get started with audio. Please remember that you have to download your audio file first into the editor, only then the player can access them and you can get your code running.
Please remember that you need to log in with P5JS to be able to upload your audio files. You can then drag and drop them into the field opening when you select Sketch/Add File.
Here is again a video about how to load and play an audio file. Again like with image files, you should use the preload function to make sure that the whole file is loaded before you start to play it.
Besides the basics you see how to change the volume, the rate or speed of the playback as well as the pan (left and right side effect).
This is the code for the basic audio playback
The following video shows how to add a button playing and stopping the audio.
Here is the finished code for the playing and pausing of the audio track.
The image and the link to the p5js script at the beginning of this blog show you what you can do while combining audio, images and small animations in P5JS. Give it a try!
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.
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.
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
[code]if ( Boolean Expression ) { do something }.[/code]
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:
[code]
if (ball.x > width && ball.y < 0) {do something}
[/code]
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:
The tasks:
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.
Do the following modifications to the game:
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.
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:
Have a look and modify the clock. Here are some ideas:
Here are some additional exercises, they prepare you for the game we will do in the following lessons, step by step.
Smiley with p5.js
As a first step only create the lower lip, then you have a “classical” smiley. You need – a circle for the head
– two ellipsoids for the eyes
– one arc for the mouth.
– You may also need to choose filling colours along the way, do it before you are drawing shapes.
– Then add another arc and colour the space in between upper and lower lip.
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.
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:
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) { … .”
[code language="javascript"]
if (mouseIsPressed == true) {
// do something
}
[/code]
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.
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
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
When running my Games, Animation and Arts class, I am using three programming tools:
P5.js is a library for the programming language Javascript. Javascript is very popular for web programming. We will use this language to learn the basics of coding. P5.js provides a lot of functions that allow us to create artwork. Here is one example:
Have a look at generative-gestaltung and look at the section “Sketches”. By clicking on the portfolio images, you can use them. When you are interested to see how they are working, click on the “Open in P5.js Editor” link. This coding environment is the primary tool in the activity.
Furthermore, you find a nice introduction to Javascript based on a derivative of p5.js called processing.js on Khanacadamy.
Alice is a platform that lets you to tell a story with animated 3D figures and sound. A scene editor provides you with plenty of characters and props to set up the scenes of your story.
A code editor allows you to control the flow of the story by selecting, arranging and configuring blocks. It’s a bit like Scratch, but you can do more things. The program when started controls the flow of your story.
A nice introduction is following an Hour of Code activity described here.
Alice 3 is not available on the web browser, but you can freely download the program here and install it on your computer. If you want to transfer your projects between school and class, just load them on your Google Drive or on an USB stick. For more advanced coders, you can also program. Alice scenes with Java. A description can be found on the Alice homepage.
The micro:bit microcontroller is a simple to use platform that allows you to control many different devices as LEDs, Neopixel bands, level meters, basically all sorts of sensors and activators. The program needs to be written on a PC, some tools run on a browser others require you to install an application on your computer. Once you have finished your program, you compile and download it on the micro:bit, either by USB cable or by Bluetooth. This depends on the tool. Here is an example of a program controlling a Neopixel band.
The following code is written in Python and uses an editor and compiler you can access with the web browser. The browser will compile you an executable file, a program, that you can upload to the micro:bit with a USB cable.
This first example changes the colour of the Neopixels one after another and leaves each pixel on until it is refreshed in a different colour.
[code language="python"] """ Repeatedly displays random colours onto the Neopixels. Works for Neopixel strips of 30. """ from microbit import * from neopixel import NeoPixel from random import randint # Setup the Neopixel strip on pin0 with a length of 30 pixels np = NeoPixel(pin0, 30) while True: #Iterate over each LED in the strip for pixel_id in range(0, len(np)): red = randint(0, 60) green = randint(0, 60) blue = randint(0, 60) # Assign the current LED a random red, green and blue value between 0 and 60 np[pixel_id] = (red, green, blue) # Display the current pixel data on the Neopixel strip np.show() sleep(100) [/code]
Here is another example with a different lighting pattern:
[code language="python"] """ Adafruit example, modified to run with 30 LED strip. see at https://learn.adafruit.com/pages/11472/elements/2981640/download for the basic version with one running neopixel 180815 Modified the original version, but not yet debugged. 181001 Debugged and running! """ from microbit import * from neopixel import NeoPixel num_pixels = 30 foreground = [255, 0, 0] # Int color - red, green and blue foreground2 = [0, 255, 0] background = [16, 16, 16] ring = NeoPixel(pin0, num_pixels) while True: # red/green dot circles around a white background (for 30 neopixel strip) for i in range(0, num_pixels-1): ring[i] = foreground # set pixel i to foreground ring[i+1] = foreground2 ring.show() # actually display it sleep(50) # milliseconds ring[i] = background # set pixel to background before moving on ring[i+1] = background ring.show() # implement the closing of the circle for last and first element. ring[num_pixels-1] = foreground ring[0] = foreground2 sleep(50) ring[num_pixels-1] = background ring[0] = background [/code]
With the micro:bit you can create interactive artefacts, that’s what we are aiming for in this course.