Modeling the natural world through Daniel Shiffman's book "The Nature of Code" - a look at the nature of animation and interaction as found in the natural world. I use Cinder and C++ for my examples and explain why one would use those tools as opposed to say, Processing, or Flash.

1. The Nature of Code via Cinder
Modeling the physical world in C++

2. What am I here to talk about?
Daniel Shiffman’s new book The
Nature of Code is out!
The Nature of Code is a deep dive
into modeling the behaviors of the
physical world in Processing
I’ve been working on translating
Shiffman’s examples, and my own
exercise solutions, into the
awesome creative coding
framework Cinder.

3. What’s my story?
I’ve been interested in creative coding, programming
animation, and rich interaction for much of the last
five years.
“Creative Coding” fits my jack-of-all-trades
background; these tools don’t fit neatly into any box.
Author of ModulatorP5, a processing library I created
for a visual performance at the Milwaukee Ave. Arts
Festival.

4. What’s in The Nature of Code?
Covers everything from vectors and forces, through
oscillation and rotation, to physics libraries, flocking,
cellular automata and beyond
Focusing on the first half - a nice toolbox for motion
and animation.

5. For Beginners
NOC was written with Processing
experience in mind.
Shiffman was the author of Learning
Processing, a great place to start for
those without much experience with
code.

6. Approaching The Nature of Code
No experience with Processing and little with
programming in general? Pick up Learning
Processing.
Have some experience in programming, particularly
Processing, or JavaScript/ActionScript? Go for it.
Want to apply these techniques in 3D, have an
intense project planned, or just masochistic? Use
C++!

7. See the examples
https://github.com/nathankoch/nature-of-code-cinder
You can check out the code, or just play around with
the examples (they’re OS X apps)

8. First Steps
Randomization, probability, and Perlin noise
Building blocks of a lot of later techniques
Breaking a sketch down into objects with their own
behavior and properties.

9. Randomization and Probability
We’ve all seen this sort of thing
before.
Straight random number
generation - an equal chance of
moving in each direction, a.k.a.
Uniform Distribution.
We can shape the results by
weighting certain ranges. An equal chance of going in
every direction

10. Normal (Gaussian) distribution
Clusters around a
given point in the
spectrum of possible
results.
Intuitively feels much
more natural than a
uniform distribution.
Alter the distribution
with mean and
standard deviation.
Gaussian distribution in action

11. Perlin noise
You’ve all seen Perlin noise before.
Ken Perlin pioneered it for use in
Tron in the 80’s, but now it’s
ubiquitous.
A series of numbers changing
smoothly over time, is much more
organic than straight randomization.

12. Perlin noise in action
Motion and
Direction
Simulated Landscapes“Photoshop Clouds”
Initially it may help to think of noise as simply changing
over time, e.g. noise(time)
When you’ve mastered that, think of noise as a 2 (or 3!)
dimensional landscape you can “traverse”, e.g. noise(x, y)

13. Vectors
x = 0
drawStickFigure(x, 100)
x = x + 1
We aren’t modeling velocity, or acceleration, or the
world around our stick figure here.
There’s no real sense of direction here either. It’s
possible but inelegant to simulate it.
Life before Vectors

14. Vectors
Manipulate Vectors just like you would numbers
location = new Vector(width/2, height/2)
velocity = new Vector(0.2, 0.1)
drawStickFigure(location)
location = location + velocity
Beyond velocity and location - why not acceleration?
acceleration = new Vector(0.01, 0.02)
velocity = velocity + acceleration
Once you understand vectors, it’s not a big jump to
modeling real-world forces - they’re just vectors!

15. Forces of Nature
Wind and Gravity Liquids and Friction Attraction / Repulsion

16. Rotation
The easiest way to get started
is to lean on Processing’s
rotate(angle) function.
Change angle over time, and
your figure rotates!
But you haven’t really modeled
facing with this, just displaying
the entity at an angle.
Angle value accelerating over time

17. Angular Motion
Get ready for some trig!
We want to derive the angle of
rotation from the velocity to point
in the direction of movement.
The figure on the right should look
familiar.
What we want to know is the
angle, the inverse of tangent.
angle = atan(velocity.y/velocity.x)

18. Waves
Creative Coding frameworks, and coding libraries in general,
give us tools to calculate sin(), cos() etc.
Like Perlin noise, it helps to think of moving along a wave over
time.
Plot a wave, or modulate something over time with one!
Wave in motion

19. Forces + Angular Motion =
Pendulums
The motion of the
pendulum is affected by
both gravity and the angle
(theta in the figure)
angularAcceleration = gravity *
sin(theta)

20. Particle Systems
Coined for the effect used in Star Trek II, they show
up everywhere to this day.
There’s a spectrum of “out of the box” tools for
particle systems, but we’ll stick to hand-rolling them.
Using all the concepts we’ve seen up to this point.
At their most basic, just a collection of particle
objects!

21. A Particle
This particle is an object
with a location, velocity,
acceleration, and a
lifespan.
It can update and
display itself.

22. A system of particles
Straight-up arrays don’t work well for this.
Arrays in Processing/Java and C++ are of a fixed length e.g.
myParticles[20], but they have concepts like ArrayList and
Vector in their libraries that are more flexible.
Using an ArrayList is a good start, building your own “particle
manager” is even better.

23. A Particle System in action
This is simpler than it
looks, we have a
collection of
ParticleSystems, each
of which has its own
collection of Particles.
Each of the particles,
when created, is given
a random initial velocity,
but they’re also affected
by a gravitational force.

24. Something to build on
Even simple
particle systems
are surprisingly
visually interesting.
Add custom
images or different
OpenGL blending
modes for more
exciting results.

25. Physics
Physics is hard.
Everything up to this point models only the easiest
aspects of the physic world.
No collisions!
Lean on a Physics library like Box2D.

26. Box2D
Box2D is awesome.
It also takes a serious mental shift from what we’ve
seen so far.
Box2D works in dimensions modeled after the real
world - weight in kilos, size in meters, not pixels!
An object in our simulated world, like a Particle, now
holds on to a Box2D Body, an entity with weight,
friction, bounce...

27. Using Box2D
Using Processing? Check out Daniel Shiffman’s
PBox2D.
Using Cinder or oF? Just drop the original Box2D
C++ files right into your project.

28. More physics library concepts
Box2D has a World, giving you “rules” like
gravitational force.
Everything within this World has a Body, with mass
and size.
Expect to translate between the pixel world and the
“real” physics world.

29. The results are pretty cool

30. So much we didn’t cover!
Fractals
Cellular Automata
Autonomous Agents and Flocking
Neural Networks
Genetic Algorithms

31. So what does it all add up to?
The natural world is a rich source of inspiration for
coders and artists.
Modeling these behaviors counters that “computer-y”
feeling many of us encounter in this medium - that it
feels too linear or too random.

32. So what is Cinder?
In their words - Cinder is a community-developed, free
and open source library for professional-quality
creative coding in C++.
Build your projects in native C++ code, using Xcode or
Visual Studio.
Contains a lot of the features you may know from
Processing, like an event loop and drawing 2D
primitives.

33. What’s Cinder’s story?
Originally launched by the Barbarian Group, also now
sponsored by the Mill.
A small group of core developers, and the stable
version moves forward slowly but solidly.
Out in the wild long enough for us to see some great
work.

34. Welcome to Xcode!

35. Why use Cinder?
It’s stunningly fast on a modern machine.
Much closer to the metal - built for the GPU.
You’re building real native applications for OS X and
Windows.
You’re doing something outside of Java’s
wheelhouse.

36. So what to use?
Are you learning or teaching creative coding? Use
Processing.
Are you building a long-running interactive
installation? Consider Cinder or openFrameworks.
What culture are you more comfortable with?
Processing came out of academia. openFrameworks
is a wild west for new digital artists. Cinder sees more
use in agency projects, or in for-pay products like iOS
apps.

37. Processing vs. Cinder code
Processing Cinder
color(255, 255, 255); gl::color(1.0, 1.0, 1.0);
PVector pt = new PVector(x, y);
ellipse(pt.x, pt.y, 16, 16);
Vec2f loc = Vec2f(x, y);
gl::drawSolidCircle(loc, 16);
noFill();
stroke(0);
ellipse(pt.x, pt.y, 16, 16);
gl::color(0, 0, 0);
gl::drawStrokedCircle(loc, 16);
rect(x, y, w, h);
float topLeft = Vec2f(x, y);
float bottomRight = Vec2f(x+w, y+h);
Rectf r = Rectf(topLeft, bottomRight);
gl::drawSolidRect(r);

38. Cinder and “modern C++”
Difference between Cinder and Processing or oF
Cinder uses all the techniques found in modern C++
software engineering.
This includes the Boost libraries and support for
C++11
Techniques can be hard for beginners, but help the
productivity of intermediate and advanced devs.
Shared pointers, const parameters, range-based for
loops.

39. Where next?
Pick up the Nature of Code in physical or digital!
Feel free to hit me up with any questions related to
any of this: @nkoch / nathanrkoch@gmail.com
Use the forums - every creative coding lib has a solid
community.