# 08 System Variables

How can we utilize p5.js system variables?

Vocabulary: width, height, console.log(), variables

Lab Activities:

1. Start a new sketch in p5.js editor. Change the canvas size to 400(width) and 600(height).
2. Type the following within the setup() function:
//Name:

//Description

function setup() {
createCanvas(400, 600);

//uncomment the following two lines to see what they print in the console below. Try changing the canvas size and running the program again.
//console.log(width)
//console.log(height)

// What do the built-in variables width and height store?

}

function draw() {
background(220);

//see instructions for step 3
//type code here

//What would the drawing look like if you drew the ellipse first?

}
3. Create an ellipse & rectangle like shown below at the center of your canvas.

4. Change the canvas size. Is your drawing from part (3) still centered.
• Use built in variables width and height to center your drawing.
• Try changing the canvas size now. Does the drawing remain centered?
5. Draw the following circles(with diameter 60) below your drawing in step (3) with width as follows:
• ⅓ of the way across the screen, height =100
• ¼ of the way across the screen, height =200
• ⅔ of the way across the screen, height =400
• ¾ of the way across the screen, height =500

*Ensure that your drawing stays centered when the canvas size is changed.

6. Extension: Make your drawing colorful using RGB values.