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:
    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.
    // What do the built-in variables width and height store?
    function draw() {
     //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 =500sysVars ellipses

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

  6. Extension: Make your drawing colorful using RGB values.
  7. Submit your activity using the submission link. Title: System Variables