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?
    //Answer:  
    
    }
    
    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.

    rectEllipse

     

     

  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