Skip to content

Files

Latest commit

b23cf06 · May 9, 2020

History

History

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
May 9, 2020
May 8, 2020

Bootcamp 02

15 minutes, split into groups and share homework

animation, sine, map

two ways to approach animation:

  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!

1. 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.

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.

// start with this
float y = ofGetElapsedTimef();
// evolve to this
float y = ofMap(sin(ofGetElapsedTimef(), -1, 1, 0, ofGetHeight()), 

ofDrawCircle(ofGetWidth() / 2, y, 10);

We aren't using sine as in trigonometry, but simply as a function that has an input and output (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.

float color = ofMap(sin(ofGetElapsedTimef()), -1, 1, 0, 255);
ofBackground(color);

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.

float x = ofRandom(ofGetWidth());
float y = ofRandom(ofGetHeight());
circle(x, y, 10);

think of random in 2 ways: directly visualizing random (the sketch above), or use random to affect a variable which in turn is visualized, so there is a layer of abstraction between you and random.

// random walker
x += ofRandom(-5, 5);
y += ofRandom(-5, 5);
circle(x, y, 2);

Homework

have fun with sin(ofGetElapsedTimef()), using map for position, colors.

what are some other ways you can layer abstraction between you and random?