On Creative Coding

October 19th, 2018

I give creative coding a lot of credit for my development as a developer 😉.

Learning happens quickest when the feedback loop is tightest. If you were to play golf in the dark, you'd never improve because it would take too long to figure out how off your swings were so that you could adjust and get better. Coding is similar. You want to be able to add features, test them, and learn how close you were to hitting the mark. If you're not the user of the features that you're building, there can be a long delay in getting appropriate feedback. (Relatedly, I have another article on here that warns against worrying too much about picking a specific framework to learn. Just start building something.)

With creative coding, the feedback loop is very quick and very satisfying. You can have an idea for a new feature (I use that term loosely), and you'll know immediately if it was implemented correctly--or if it wasn't a good idea to try in the first place.

Learning and experimentation are the long-term benefits of this style of coding, but there's intrinsic value too. Creative coding is satisfying in itself. It creates art, which you can enjoy for its own sake.

Moreover, even extremely simple ideas can be satisfying to execute. For example, "What if I used the mouse's X coordinate to control the hue and the mouse's Y coordinate to control the saturation?"

(EDIT: If you're on mobile this will use your device's rotatation around its X and Y axes)

Easy enough to find out!https://gist.github.com/davidguttman/3c8d0f1613da8363e04a26aaccf62601

What are some of my creative-coding projects?

My most successful creative-coding project is Sonic Stalagmites. A variation of that piece turned into a concert with Yo-Yo Ma. Further derivations have become framed prints that I've sold to collectors.

I've also created a number of smaller pieces. For example, BPA--a visualization of a complex system--has been displayed at the A+D Museum in Los Angeles and at the launch party for the Tesla Model S. Another one is Segra, a visualization of a model of neighborhood segregation that occurs when agents prefer not to be in the minority. Others include Robot VJ, Desert Party, Geo Clock, DelTriPerNo, Wave Pendulum, Twitter Chimes, Color Sort, Winter Trees, Color Blinds, and some looping animations that I turned into gifs.

How did I start?

Projects start with something that I'm curious about--usually a concept that I'd like to see visualized.

In the case of BPA, for instance, I was reading about a thought-experiment called "Bridge Players Anonymous." The thought-experiment is as follows: There's a building made up of an infinite number of rooms. All rooms have four walls and a door on each wall. Each room can have people in it. However, at any point in time if there are four people in a room, each of the four people runs to a different door and enters an adjacent room. So, the fun starts when a person runs into a room that already contains three people; that triggers another exodus, which can trigger another exodus, and another.

I wanted to see what it could look like, so I coded it. Here's a view of several different rendering modes:

How should someone approach creative coding?

When just starting out, it's easiest to start with a tutorial and branch off from there. Start by changing color and other parameters. Then start to modify other logic. Once you get the hang of that, you can start adding code.

A lot of people get stuck when they start from scratch. The key is to start simple and iterate. Make sure that you're able to get very small incremental results.

Example

So, let's take the color square I started with and modify it a bit.

Right now it just listens to mouse movements to change color. Horizontal movement changes the hue; vertical movement changes the saturation.

If you're just starting out, try switching it so that vertical movement changes the hue and horizontal movement controls the saturation. Or maybe keep saturation constant and have the mouse control brightness.https://gist.github.com/davidguttman/94d30448eaf3a226fc2eafe590c714b2

The next thing that you could try is to expand the field a bit: don't only control the color of the square with mouse movements, but also change the size and rotation.https://gist.github.com/davidguttman/af34fc391c47baed93a463b3c2b40bc8

After that I would experiment with controlling multiple squares. Create a grid of four squares and have them affected differently by where the mouse is.https://gist.github.com/davidguttman/318b441c11f4cdcd7994f5239b2a6e37

What's Next

You get the point. From here, you can continue to iterate on this piece. Obviously, there's no right answer. You think of something; you do it; you evaluate; you do something else.

The decision of what to do next is your own. You might want to try to make it look like the boxes are rotating away from the viewer instead of just along the plane of the page. You might want the boxes to rotate on their own, with the mouse position affecting their speed.

I don't have good advice on when to stop or call something finished. When I make things like this, I stop either when I get bored or when I find myself spending more time playing and being mesmerized than coding.

Resources

There are great creative-coding communities surrounding various tools/frameworks/libraries/whatever you want to call them.

I started with Processing which originally was a Java framework. Now there's a very successful JavaScript port, p5.js.

The Coding Train is an awesome channel featuring a lot of creative coding tutorials featuring p5.js.