//codexdesign.org
//learning approach: p5.js (uses the JavaScript language)

//motion design: requires dynamic structure, and the use of a variable or variables
//code: system variables, width and height keywords
//note: system variables might be referred to as built-in variables, predefined variables, keyword variables

//introducing variables
//all variables are labeled container things that can hold changing or responsive values
//things that change and can be stored in variables: temperature, weight, money values, the position of a flying object, game points, clicks, mouse position, etc. 
//variables are very useful, and necessary for motion and interaction

//p5.js has several system variables including: width, height, windowWidth, windowHeight, displayWidth, displayHeight
//p5.js also has many event related system variables, these are covered later in this series

//the width and height variables contain the width and height of the display window as defined in size();
//width stores the width of the display window established in createCanvas(w,h)
//height stores the height of the display window established in createCanvas(w,h)


//all of the width and height system variables can be used alone or with math operators: + (add), - (subtract), * (multiply), / (divide)

function setup() {
createCanvas(400, 400); 
//createCanvas(windowWidth, windowHeight); 
//createCanvas(displayWidth, displayHeight); 
rectMode(CENTER); 
noStroke(); 
fill(0); 
}

function draw() {
  fill(0);
  noStroke();
  rect (width/2, height/2, width, height); //width and height used
  stroke(255);
  rect(width/2, height/2, width-300, height-300); //width and height used
}

//study/practice:
//createCanvas(windowWidth, windowHeight); 
//https://p5js.org/reference/#/p5/windowWidth
//createCanvas(displayWidth, displayHeight); 
//https://p5js.org/reference/#/p5/displayWidth
//modify the createCanvas options above, observe results, experiment with math operators too!



