Animation, Blockly, Blocks, Game

Scratch is a block based programming language. You do not need to type code, but you just assemble projects with blocks of different functionality and configure those with simple entry of numbers and text. Scratch runs on a web browser and you can also interface it with some hardware. But where to start with Scratch?

The Code Club is a UK charity that promotes computer science for young people as yourself.  They offer very comprehensive and detailed project tutorials, from small animations to a more complex  RPG(*) game.

Here is the link to the site:

Code Club Project Create your own world

(*) A role-playing game (sometimes spelled roleplaying game;[1][2] abbreviated RPG) is a game in which players assume the roles of characters in a fictional setting. Players take responsibility for acting out these roles within a narrative, either through literal acting, or through a process of structured decision-making regarding character development.[3] Actions taken within many games succeed or fail according to a formal system of rules and guidelines.[4] [Source: Wikipedia]

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.

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” 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


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“>here and this is the code