The Nature of Code via CinderModeling the physical world in C++

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.

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.

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.

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.

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++!

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)

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.

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

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

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.

Perlin noise in action

Motion and

DirectionSimulated 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)

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

Vectors

Manipulate Vectors just like you would numberslocation = 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!

Forces of Nature

Wind and Gravity Liquids and Friction Attraction / Repulsion

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

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)

WavesCreative 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

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)

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!

A Particle

This particle is an object

with a location, velocity,

acceleration, and a

lifespan.

It can update and

display itself.

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.

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.

Something to build on

Even simple

particle systems

are surprisingly

visually interesting.

Add custom

images or different

OpenGL blending

modes for more

exciting results.

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.

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

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.

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.

The results are pretty cool

So much we didn’t cover!Fractals

Cellular Automata

Autonomous Agents and Flocking

Neural Networks

Genetic Algorithms

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.

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.

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.

Welcome to Xcode!

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.

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.

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);

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.

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.