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

//motion design: conditional test, influences the behavior of a looping program
//code: if
//conditionals can be used to assign a new value to a variable 
//conditionals can be used to execute any line of code within
//conditionals can be used to create a grid or repeating pattern
//this example increments the x to edge of display, resets the x position, drops the y position, increments x to edge...
//the noLoop() function is used at the end to force the program to stop

let x = 50; 
let y = 50;

function setup() {
createCanvas (400, 400);
rectMode(CENTER);
fill(0);
noStroke();
frameRate(5); //very slow frameRate to observe the conditional happening
}

function draw() {
//background (255);

rect (x, y, 50, 100);
y=y+105;

if (y>height) {
y=50;
x=x+100;
}
if (x>width) {
noLoop();
}

console.log("this is x: "+x);  
console.log("this is y: "+y);  

}


//study: 
//+ x + = +, or positive times positive is positive
//+ x - = -, or positive times negative is negative
//- x - = +, or negative times negative is positive