Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Nature of Code via Cinder - Modeling the Natural World in C++


Published on

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.

Published in: Technology
  • Be the first to comment

The Nature of Code via Cinder - Modeling the Natural World in C++

  1. 1. The Nature of Code via Cinder Modeling the physical world in C++
  2. 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. 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. 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. 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. 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. 7. See the examples You can check out the code, or just play around with the examples (they’re OS X apps)
  8. 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. 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. 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. 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. 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. 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. 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. 15. Forces of Nature Wind and Gravity Liquids and Friction Attraction / Repulsion
  16. 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. 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. 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. 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. 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. 21. A Particle This particle is an object with a location, velocity, acceleration, and a lifespan. It can update and display itself.
  22. 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. 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. 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. 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. 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. 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. 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. 29. The results are pretty cool
  30. 30. So much we didn’t cover! Fractals Cellular Automata Autonomous Agents and Flocking Neural Networks Genetic Algorithms
  31. 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. 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. 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. 34. Welcome to Xcode!
  35. 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. 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. 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. 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. 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 / Use the forums - every creative coding lib has a solid community.