Now delete all the code that is there and write the following code in. This is good practice so that it becomes memory muscle and intuitive even though the temptation is to cut and paste somethings. I have found it laborious but in the end very helpful to my coding.

  1. function setup() 
  2. {
  3.   createCanvas(800, 600);
  4. }
  5. function draw() 
  6. {
  7.   background(100);
  8. }

You should have something like this…



We are going to create a canvas on which to draw the pong game. Line 3 gives you the size of the canvas, 800 pixels wide and 600 pixels high. Line 8 gives you the background colour. It is in greyscale at the moment, 255 is the maximum (white), 0 is the minimum (black). When done press play which is the arrow in the circle (top left). You should get something like this…

You can slide the division between the box where you type in your code and the canvas. I will explain what line 1 (function setup) and line 6 (function draw) do in the next post.


  1. Change the size of the canvas from (800, 600) to something else and press play
  2. Change the background colour from 100 to any other value