Let’s get started with learning about coding! We’ll start by taking a look at a basic program:
To see this code running, click on the Play button, which is the button pointed out by the arrow in the following graphic:
Note: The code example is shown on this site, but if it doesn’t work for you, click this link to open it in a new window: https://editor.p5js.org/empressdragonlady/sketches/q3iRf60Mh
Background Color
You should now see a purple background in the right-hand window. Let’s see if we can change the color by adjusting the code. In the code/text window on the left-hand window, look for this line of code:
background(50, 0, 50);
This line is responsible for changing the background color. background() is a function, or basically a command that makes the program do something. In this case, the function changes the background color. The three numbers in the parentheses, separated by commas, are called arguments or parameters, and they are extra information that can be passed in to a function and used. In this case, the three numbers represent how much red, green, and blue (in that order) are in the background color. Order matters when you pass arguments to functions, so the function knows that the first number is the red, the second is the green, and the third is the blue. The acceptable numbers can range from between 0 up to 255.
Challenge: Try changing the three numbers passed in to the background() function. Make sure to separate them by commas (no comma after the last number), keep them between the parentheses, and make sure they are between 0 and 255.
Canvas Size
Let’s look at another function called in the code:
createCanvas(400, 400);
The createCanvas() function creates the canvas, or the screen area where our code runs. We pass in two arguments, which are the width and the height of the canvas.
Challenge: Try the size of the canvas by changing the two numbers. As we did with the background color, remember to separate the two numbers with a comma and keep them inside the parentheses.
