Interactive Tutorial: Screen Size and Background Color

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:

Play button

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:

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.

Sign up to receive updates about new tutorials, game news, and educational opportunities.
We hate spam. Your email address will not be sold or shared with anyone else.

Share This:

Comments are closed.