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

//motion design: incrementing (changing) variables using addition and subtraction for size
//variables can be reused 

let grow = 0; 

function setup() {
background(255);
rectMode(CENTER); 
noStroke();
}

function draw() {
createCanvas(400, 400); //notice the background is in draw, background happens one time
fill(0);
rect(width/2, height/2, grow, grow);
grow=grow+1;
}

//study/practice:
//look at how many times grow is used
//experiment with the incrementation value, try increasing the value, try subtraction, try multiplication with a decimal

//more:
//symbols called operators are used in incrementation
//* (multiply)
//+ (addition)
//++ (increment)
//- (minus)
//-- (decrement)
// / (divide)

//more on variables, adanced study/practice:
//custom variables have a scope (or availability) in a program
//global scope variables are accessed from anywhere in a JavaScript program
//function scope variables are accessed from inside the function in which they are declared
//again variable declaration choices include var, let, const
//var can have a global (outside function) or function scope (inside function)
//var variables can be updated and re-declared throughtout a program, this flexibility can cause trouble under some conditions
//let has block-scope, the variable only exists within the block that it is created within
//let can be updated, but not re-declared within a given scope
//const has block-scope, the variable only exists within the block that it is created within
//const cannot be updated or re-declared
//scope will be more important as programs get more complex and sophisticated
//another advanced theme related to variable use and scope is hoisting