Tue Apr 28 2020

In Bodø I help organize local the coding club. Because of the covid-19 situation we are hosting the club on Discord, rather than in person at the public library in Bodø. This afternoon the participants were working fairly idependent, so I had some time to sit down some more with p5.js.

p5.js is a great Javascript library for creating visual content in the web browser, e.g. animations, games, art etc. In short a p5.js program consists of two main parts: a setup function which runs when the sketch starts up, and draw function which runs over and over again forever.

function setup(){


function draw(){


You write ordinary Javascript, and the big strength is that you don't have to worry about how to manipulate pixels on the sceren, you simply write ellipse(x, y, r); to draw an ellipse, or rect(x, y, h, w); to draw a rectangle.

For example the sketch

function setup(){
	createCanvas(500, 500);

function draw() {
	ellipse(mouseX, mouseY, 20);

produces the following output


Notice that we get mouse input for free as well!

In addition to p5js, there are many great p5.js libraries, for example libraries for detecting collisions between objects, libraries for playing sound, connecting to bluetooth etc.

There is even an online editor at editor.p5js.org if you want to try it out.

In the short session this afternoon, I was able to write a simple implementation of the traditional Pong game. Below is a small scerenshot of the game, and you'll find code in my github.


Maybe I'll do a Twitch stream next week for the Coding Club, and go through the solution in details, as well as how a website actually work.