3.2 Principle 2: Hello World!
In the following activity, you will run and tweak your first p5.js program.
Since the 1970s, ‘Hello, World!’ has been the name of the first program that every student learns when they encounter a new programming language.
The editor window below is running a program that draws circles as you move the mouse cursor around the canvas.
Try interacting with the program by moving your mouse cursor around within the grey canvas box area on the right side of the editor window.
You can stop the program by clicking the Stop button in the editor window and restart the program by clicking Play.
Fun, right? You just ran and played with your first p5.js program!
Let’s take a look at the code a bit more closely. The Hello World! program is made up of three different functions.
A function is a block of code that carries out a specific purpose. All of the code that makes up the function is contained inside curly brackets: { }. Notice how the code inside the curly brackets is indented to indicate that it belongs to the function. Functions are very useful programming structures because they are discrete chunks of code that you can reuse in a modular way.
setup() function
The first function is called setup and runs once when the program first starts playing and defines some parameters that won’t change.
function setup() {
createCanvas(300, 300);
background(100);
}
In this case, the setup function creates a canvas that is 300 × 300 pixels wide with this code:
createCanvas(300, 300)
Note, the comma between the two numbers is important or the program won’t run; however, the space after the comma is not important and will not affect the running of the program.
The function also sets the colour of the canvas to grey using this code:
background(100)
The value 100 is a mid grey that is roughly halfway between 0 (black) and 255 (white). Colour will be discussed in more detail in Principle 4.
draw() function
The second function is called draw, and it keeps looping over and over, repeating the code within it. In this case, it keeps drawing a new circle at the positions of the mouse cursor.
function draw() {
circle(mouseX, mouseY, 20);
}
The position of this circle is defined by the horizontal position of the mouse cursor, mouseX, and the vertical position of the mouse cursor, mouseY. The number 20 shows that the diameter of the circle is set to 20 pixels.
If you are ever confused about a piece of code, there is a reference for each command on the p5.js website, for example:
You will find links to other relevant p5.js references as you work through the following principles.
keyPressed() function
The third function is called keyPressed, which is waiting for any keyboard input. If it detects that the s key has been pressed, then it saves an image of the current canvas called hello.png to the computer.
In summary, while the program is running, it draws new circles at the cursor position every time the program loops. If you press the s key, it saves an image of the canvas.
In the next activity, you are going to make your first coding tweak! If you get stuck, the following video should help you out.
Activity 2 Change the size of the circle and save a small artwork
Scroll back up to Program 2 Hello World! and go to line 7 to find the circle diameter. Change the pink-coloured number 20 to a number between 1 and 200.
Once you have made the change, press the Play button and move the cursor over the canvas to see what effect this had. If you get lost and want to get back to the initial example code, press the Revert button.
Keep playing with this example until you have drawn something that you like. Use the right mouse button to save an image of the canvas onto your computer. You can also press the s key to save the image.
Well done! You made your own algorithmic artwork.
OpenLearn - Algorithmic Design 
Except for third party materials and otherwise, this content is made available under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 Licence, full copyright detail can be found in the acknowledgements section. Please see full copyright statement for details.