post-meeting updates

Author: mayakraft

README.md

@@ -13,4 +13,8 @@ This repo contains the curriculum in detail for every session (since we started
 - [Spring 2020](2020-04/)
 - [Fall 2019](2019-09/)
 
-The working draft for the next class is located [in its own folder](draft/). Maintainers, at the beginning of the next class, duplicate this folder and rename it following the ISO date format: year, month, and day depending on what level of specificity is needed. Run the class from this folder and all hyperlinks will be perserved.
+### for maintainers
+
+Each class is named after its start date. Include whatever level of Y-M-D specificity required. Create your folder before class begins so that all hyperlinks during class will be perserved long term.
+
+The [draft for the next class](draft/) is located its own folder. It is an improved copy of the most recent session based on feedback and post-session meetings.

draft/02/readme.md

@@ -1,17 +1,24 @@
 # Bootcamp 02
 
-split into groups and share homework
+15 minutes, split into groups and share homework
 
 ### animation, sine, map
 
 two ways to approach animation:
 
-- animate a thing based on its previous position. we need the computer to remember; we need an attribute variable in the .h file.
-- there is a whole class of animations where the position (or whatever) is a **calculation** based on the current time. no variables needed!
+1. animate a thing based on its previous position. we need the computer to remember; we need an attribute variable in the .h file.
+2. there is a whole class of animations where the position (or color or whatever) is a **calculation** based on the current time. no variables needed!
 
-start with #2.
+### 1. animation with memory
 
-### sine of elapsed time
+store a circle's position in the .h file; two floats x and y. have it chase the mouse. ease towards the mouse. talk about multiplication, easing.
+
+```c++
+float ease = 0.9;
+x = (x * ease) + (mouseX * (1-ease));
+```
+
+### 2. animation from equations: sine of elapsed time
 
 introduce `cout <<` to peek inside `ofGetElapsedTimef()`. animate a circle moving across the screen.
 
@@ -24,7 +31,7 @@ float y = ofMap(sin(ofGetElapsedTimef(), -1, 1, 0, ofGetHeight()),
 ofDrawCircle(ofGetWidth() / 2, y, 10);
 ```
 
-talk about sine not in terms of trigonometry but simply as a [function that has an input and output](sine.gif) (*any* number ➜ between -1 and 1). work your way up to using ofMap.
+We aren't using sine as in trigonometry, but simply as a [function that has an input and output](sine.gif) (*any* number ➜ between -1 and 1). work your way up to using ofMap.
 
 now map the the sine of elapsed time to colors, very simple, the background color.
 
@@ -33,19 +40,12 @@ float color = ofMap(sin(ofGetElapsedTimef()), -1, 1, 0, 255);
 ofBackground(color);
 ```
 
-learn about phase. make these two sine of elapsed times oscillate at different rates.
-
-### animation with memory
-
-store a circle's position in the .h file; two floats x and y. have it chase the mouse. ease towards the mouse. talk about multiplication, easing.
-
-```c++
-float ease = 0.9;
-x = (x * ease) + (mouseX * (1-ease));
-```
+with both of these in the same sketch, learn about phase. make these two sine of elapsed times oscillate at different rates.
 
 ### random
 
+`ofGetElapsedTimef()` and `ofRandom()`, two ways of getting a different number each frame. Introduce time before random as it more represents classical animation.
+
 for context, show some algorists' work: Molnar, Nees, Mohr, Nake, computer pseudo-randomness kind of had a moment in these decades.
 
 ```c++

draft/03/readme.md

@@ -1,59 +1,66 @@
 # Bootcamp 03
 
-split into groups and share homework
+15 minutes, split into groups and share homework
 
 ### loops, arrays
 
 introduction to boolean expressions, and how they result in a boolean variable. `5 < 10` turns into `true`
 
 introduce loops first with the while loop. to prevent an infinite loop we need a boolean expression which begins as **true** but eventually becomes **false**. (we need variables. need to compare against memory and change the memory).
 
-introduce for loops, connect the dots: 3 parameters in the for loop relate to the 3 lines of code using the while loop.
+introduce for-loops, connect the dots: 3 parameters in the for loop relate to the 3 lines of code using the while loop.
+
+```c++
+start
+while (end) {
+  increment
+}
+
+for (start; end; increment)
+```
+
+> tabs are whitespace that is ignored by the compiler but *extremely* helpful for human eyes. be strict about good tab spacing!
 
 ### how to not draw the same shape 100 times on top of itself
 
-*challenge: pick a shape (rect, circle, ellipse) draw many shapes, make them different somehow*. did you use random?
+*challenge: pick a shape (rect, circle, ellipse) and put it in the for-loop. but how can you make it different every time*. ofRandom? ofGetElapsedTimef()
 
-try this without random. how do we prevent drawing the same shape 100x times on top of itself? *we need something that changes within the loop. use the `i` iterator.*
+the for-loop comes with a built-in counter. *you need something that changes between each iteration of the loop? use the `i` iterator.*
 
 *challenge: draw a color gradient by drawing a bunch of vertical lines next to one another* the `i` will be used to change the x-position of the lines, as well as the color.
 
 *problem: both position and color are tied to the same variable, how can we make this gradient larger in size than 255, without breaking the colors?* we need ofMap.
 
 right now the `i` is too-directly mapped to the location. we can use math (`* 2`) to increase the size. why is our for-loop between 0 and 255 to begin with?
 
+> for-loops and the draw() function are different kinds of loops. the for-loop completely finishes all in the span of nano or micro seconds. the draw() loop waits **an eternity** in computer time, 1/60th of a second (in most cases).
+
 ### harmonic motion
 
 a sketch where sine of elapsed time is mapped to position. and play with the frequency of the sine function.
 
 ```c++
 ofBackground(0);
 for (int i = 0; i < 20; i++){
-    float y = ofMap(sin(ofGetElapsedTimef()*i*0.2), -1, 1, ofGetHeight()/2-100, ofGetHeight()/2+100);
-    ofDrawCircle(i * 50, y, 20);
+  float y = ofMap(sin(ofGetElapsedTimef()*i*0.2), -1, 1, ofGetHeight()/2-100, ofGetHeight()/2+100);
+  ofDrawCircle(i * 50, y, 20);
 }
 ```
 
 ### Arrays
 
-arrays are a way of storing a list of variables. it solves the problem for how can we store one variable for every iteration of the loop.
+*challenge: inside a for-loop, place 100 random tiny dots, creating the night-sky.* it's impossible because every frame, a randomly placed dot changes positions!
 
-### watch this video: [introduction to arrays](https://www.youtube.com/watch?v=6PxIhuwvQ_4)
-
-your homework is to play with for-loops, arrays, and random together.
-
-- make a starry-night sky. can you make the stars twinkle?
-- can you make a rainy sky? (this is a little more advanced than stars)
-
-alternatively, try playing with loops and arrays without using random to make more regular, geometric kinds of drawings.
+can you imagine writing out 100 variables? `int x1; int x2; int x3`...
 
+arrays are a way of storing a list of variables. it solves the problem how can we store one variable for every iteration of the loop.
 
-### other things:
+### watch this video: [introduction to arrays](https://www.youtube.com/watch?v=6PxIhuwvQ_4)
 
-you should know `while(random(10) < 1)` does not do what you probably think it does.
+> you should know `for(int i = 0; i < random(10); i++)` does not do what you probably think it does.
 
 ## Homework
 
-have fun with harmonic animation, sine of elapsed time in a loop, with the `i` modifying each instance.
+the iterator in the for loop counts 0 to whatever is the upper limit. play with a for-loop that represents 2 things at once (or 3, or more..), the iterator needs to be mapped. Consider the ranges of the mapped iterators (0...PI, 0...ofGetWidth(), -1...1). Play with different ranges and different increments.
 
-expand your bouncing ball into a particle class. can you give each particle a unique direction, speed, color?
+have fun with harmonic animation, sine of elapsed time in a loop, with the `i` modifying each instance.

draft/04/readme.md

@@ -1,5 +1,7 @@
 # Bootcamp 04
 
+15 minutes, split into groups and share homework
+
 ### branching, classes
 
 Here is an example of an animation based on asking the computer to *remember* the last position. create the bouncing screen saver (bouncing DVD logo). key take aways:
@@ -12,13 +14,13 @@ x = x + 1;
 // here, check if it went off screen
 ```
 
-we need if statements to catch the ball from moving off screen. an if statement is like our while loop where the () contains a boolean expression, and only runs if true.
+we need if-statements to catch the ball from moving off screen. an if statement is like our while loop where the () contains a boolean expression, and only runs if true.
 
 ```c++
 x = x + 1;
 
 if (x > ofGetWidth()) {
-	// what here?
+  // what here?
 }
 ```
 
@@ -39,7 +41,7 @@ now, what if we need `ofBackground` to be on? *we need to store **all** of the p
 
 ### polyline
 
-recode our draw app with an ofPolyline. show off some tricks that polyline can do, like smoothing.
+recode our draw app with an ofPolyline. show off some tricks that polyline can do, like smoothing. Polylines are great, and are present in other places like fonts (see **typography** section below).
 
 ## ofImage and transforms
 
@@ -55,9 +57,11 @@ Many different variables in this bounce sketch conceptually relate to the same t
 
 re-code our bounce project into a custom particle class. [the solution is in this video](https://www.youtube.com/watch?v=efpIiXcy5tM).
 
-expand it by creating an **array of particles**. (this gets really fun when you add gravity!) make an array of particles generate on a mouse click to look like welding sparks or fireworks.
+expand upon the assignment by creating an **array of particles**. (this gets really fun when you add gravity!) make an array of particles generate on a mouse click to look like welding sparks or fireworks.
+
+can you add parameters to your class, giving each particle a unique direction, speed, color?
 
-## typography
+### typography
 
 bonus video content, [getting a polyline from a font](https://www.youtube.com/watch?v=A-_0AhArveM).
 

draft/05/readme.md

@@ -1,5 +1,7 @@
 # Bootcamp 05
 
+15 minutes, split into groups and share homework
+
 ### 3D, pixels, recursion
 
 15 minutes of share work time, 3-4 person groups.
@@ -10,14 +12,14 @@ load an image and read its pixels with `getColor`, learn about the `ofColor` obj
 
 ```c++
 void ofApp::draw(){
-    ofBackground(0);
-    img.draw(0,0);
-    for (int i = 0; i < img.getWidth(); i+=10){
-        for (int j = 0; j < img.getHeight(); j+=10){
-            float brightness = img.getColor(i,j).getBrightness();
-            ofDrawCircle(img.getWidth()+i, j, ofMap(brightness, 0, 255, 0, 5));
-        }
+  ofBackground(0);
+  img.draw(0,0);
+  for (int i = 0; i < img.getWidth(); i+=10){
+    for (int j = 0; j < img.getHeight(); j+=10){
+      float brightness = img.getColor(i,j).getBrightness();
+      ofDrawCircle(img.getWidth()+i, j, ofMap(brightness, 0, 255, 0, 5));
     }
+  }
 }
 ```
 
@@ -40,15 +42,15 @@ talk about how recursion is similar to and unlike a loop. we need to repeat for
 
 ```C++
 void ofApp::splitRectangle(float x, float y, float width, float height){
-    if (width > 1 && ofRandom(0, 1) > 0.5){
-        splitRectangle(x          , y           , width/2, height/2);
-        splitRectangle(x + width/2, y           , width/2, height/2);
-        splitRectangle(x + width/2, y + height/2, width/2, height/2);
-        splitRectangle(x          , y + height/2, width/2, height/2);
-    } else {
-        ofDrawRectangle(x,y,width, height);
-    }
-    //ofDrawRectangle(x,y,width, height);
+  if (width > 1 && ofRandom(0, 1) > 0.5){
+    splitRectangle(x          , y           , width/2, height/2);
+    splitRectangle(x + width/2, y           , width/2, height/2);
+    splitRectangle(x + width/2, y + height/2, width/2, height/2);
+    splitRectangle(x          , y + height/2, width/2, height/2);
+  } else {
+    ofDrawRectangle(x,y,width, height);
+  }
+  //ofDrawRectangle(x,y,width, height);
 }
 ```
 
@@ -60,17 +62,17 @@ Rotate the grass-colored plane to lie flat. discuss the three axes parameters of
 
 ```c++
 void ofApp::draw(){
-    cam.begin();
-    ofSetColor(100, 20, 10);  // brown
-    ofDrawBox(0, 50, 0, 100, 100, 100);
-    
-    ofPushMatrix();
-        ofSetColor(50, 190, 10);  // green
-        ofRotateDeg(90, 1, 0, 0);
-        // ground plane
-        ofDrawRectangle(-250, -250, 500, 500);
-    ofPopMatrix();
-    cam.end();
+  cam.begin();
+  ofSetColor(100, 20, 10);  // brown
+  ofDrawBox(0, 50, 0, 100, 100, 100);
+  
+  ofPushMatrix();
+    ofSetColor(50, 190, 10);  // green
+    ofRotateDeg(90, 1, 0, 0);
+    // ground plane
+    ofDrawRectangle(-250, -250, 500, 500);
+  ofPopMatrix();
+  cam.end();
 }
 ```