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

//motion design: conditional test, influences the behavior of a looping program
//code: if
//conditionals determine if a status is true or false
//if a conditional is true, run the code in the curly braces
//if a conditional is false, jump out of curly braces and continue through the rest of the draw() block
//programs can use one or more variables, one variable can be used to hold a value, and another can modify/act on that variable
//flipping a sign means making a positive number a negative number and vice versa

let x = 1; //this variable is used for position 
let flipper = 4; //this second variable replaces the generic increment value, instead of x=x+5, x=x+flipper

function setup() {
createCanvas (400, 400);
rectMode(CENTER);
fill(0);
noStroke();
}

function draw() {
background (255);
rect (x, 200, 100, 100);
x=x+flipper; //this moves x position, via increment, using two variables

if (x>400) {
flipper=-4; //reassignment, 
//when x is 401 flipper becomes -4, that value goes back up to draw, x is 401 +-4, or 401-4
}

console.log(x); // where is it going?

}

//study

/*  this is a conditional 
if (test) { 
statements 
}
 */

/* conditionals work like this:
If the test evaluates to true, the statements enclosed within the block are executed 1x
then the program jumps out of the conditional curlies, and moves along in code stack
running all the way through the program then starting at the top of draw again.
If the test evaluates to false, the statements are not executed
then the program jumps out of the conditional curlies, and moves along in code stack, 
running all the way through the program then starting at the top of draw again
*/

//practice: 
//== means equals, change the x > width conditional test to x == width, observe results
//replace numbers with system variables like width and height, or custom variables
//spend time with the concept of a conditional, look at the syntax
//review the relational operators below

//study/practice:
//Conditionals use relational operators in the tests:
//> (greater than)
//>= (greater than or equal to)
//< (less than)
//<= (less than or equal to) 
//== (equals, just value)
//=== (strict equals, both value and data type)
//!= (not equal to) this exclamation mark is called a "bang" and means NOT