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

//motion design: program structure or flow, proof of concept
//code: setup(), draw(), console.log(), print()
//function setup() and the function draw() enable a dynamic structure or flow
//dynamic can mean animation and interaction
//the setup() block runs only one time, code here will not repeat 
//the draw() block runs (loops) forever (or until a condition is met), code here will repeat 
//code is interpreted from the top of a program to the bottom of a program

//introducing the console, next level - code and the web browser context
//how to prove the setup is going one time and the draw is going forever? log or "record" this activity so it can be seen
//how to see the log or recorded activity? open the html document in a browser, then open up the brower console
//use the console to get feedback from the program, including proof that something is working, or not working (useful errors!)
//programmers use the console for debugging
//the console may feel weird and complicated because it isnt something revealed in regular web use
//all the web browsers have consoles including Firefox, Chrome, Edge, Safari, Opera, Tor, etc 
//instructions for opening the consoles are including at the bottom
//often online code editors, like the online p5 editor, have a console embedded directly in the page underneath the code editor, console use is that normal

//the program starts in the function setup(), each line of code is interpreted
function setup() {
createCanvas(400, 400); // this code does not repeat
rectMode(CENTER); // this code does not repeat
noStroke(); // this code does not repeat
fill (0); // this code does not repeat
console.log("setup one time"); //proof of setup concept, text content, aka String data, must be in quotes
}
//after each line of code is interpreted in the function setup(), the program continues down to the function draw() block
function draw() {
rect (200, 200, 100, 100); // this code repeats
console.log("draw forever and ever"); //proof of draw concept, text content, aka String data, must be in quotes
}

//how to open the popular browser consoles:
//chrome - https://developers.google.com/web/tools/chrome-devtools/open
//safari - https://support.apple.com/en-ca/guide/safari/sfri20948/mac
//edge - https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console
//firefox - https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console

//study/practice:
//setup one time, draw forever
//modify the text content in the console.log functions above
//while console.log() is standard in the JavaScript language, the p5.js library also accepts print();
//more info on print(); -  https://p5js.org/reference/#/p5/print



