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

//motion design: creating custom variables
//code: var, let, const
//there are many ways to format and use variables but some general principles and best practices apply

//introducing variables
//variables are labeled containers that can hold changing values
//variables are very powerful, and necessary for motion and interaction

//how to make a variable?
//custom variables are declared, named, and initialized (assigned a value)

/* 
declare a variable:
custom variables use a var, let, or const declaration
let is now the preferred type of variable declaration and will be used in this series
the choice of declaration depends on scope needs and use, see notes at bottom for details on this more advanced concept

name (or identify) a variable:
custom variables are named something that makes sense for the context/behavior
names are case sensitive and begin with a letter, a $, or an _, and can contain letters, digits, underscores, dollar signs

initialize a variable:
custom variables are assigned a value using the = sign, = means assignment, = does not mean equals
values are data, can be integers (aka whole numbers like -1,0,1,2), floating point numbers (aka decimals like 1.2345), and Strings (aka text like "hello!")
more data types are introduced later in this series
*/

let choice; // a variable is declared

function setup() {
choice = color('#480080'); //hexadecimal values assigned to the variable
createCanvas(400, 400); 
background(choice);
rectMode(CENTER); 
noFill();
}

function draw() {
choice = color(255,200,10); //color rgb values assigned to the same variable
fill (choice); 
rect(200, 200, 100, 100);
}

//study/practice:
//change the unique name of the variable in both the declaration and the call, observe results
//change the value of the variable, observe results 
//create another variable for the x and y positions

//more on color variables https://p5js.org/reference/#p5/color

//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