On Creative Coding

October 5th, 2018

I give creative coding a lot of credit for my development as a developer 😉. The reason is that the feedback loop is very quick and very satisfying. I have another article on here that warns against worrying too much about picking a specific framework to learn and advises to just start building something. Learning happens quickest when the feedback loop is tightest.

What I mean by that is 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 are so that you can adjust and get better.

Coding is similar. You want to be able to add features, test them, and learn from 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.

Creative coding has a tight feedback loop because 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 sometimes you'll learn that it wasn't a good idea to try in the first place).

Of course this is the long-term benefit of this style of coding, but there's intrinsic value too. Creative coding is satisfying in itself. It's creating art, which you can enjoy for its own sake.

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?"Sorry mobile readers, it was the first thing that came to mind. Come back later with a mouse.

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 much smaller pieces. Usually they scratch a curiosity itch for me as well. BPA has been on display at the A+D Museum in Los Angeles, and at the Tesla launch party for the Model S.

It's a visualization of a complex system. It would be similar to a model of cascading bank failures.

Another one that I like is called Segra. It's a visualization of a model of neighborhood segregation that occurs when agents prefer not to be in the minority.

There's also other ones like Robot VJ, Twitter Chimes, Desert Party, Geo Clock, DelTriPerNo, Color Sort, Wave Pendulum, Winter Trees, Color Blinds, and some looping animations that I turned into gifs.

How did I start?

For me, I often start with something that I'm curious about -- usually a concept that I'd like to see visualized. In the case of BPA, I was reading about a particular thought experiment called "Bridge Players Anonymous" and I wanted to see what it could look like.

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 run a different door, and enter an adjacent room.

The fun starts when a person runs into a room with three people, because they will trigger another exodus, which can trigger another exodus, and another...

Here's what it looks like while running through 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 the color and other parameters, and from there, 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 the color. Horizontal movement changes the hue and 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 the brightness.https://gist.github.com/davidguttman/94d30448eaf3a226fc2eafe590c714b2

The next thing that you could try is to not only control the color with your mouse movements, but also the size and/or rotation.https://gist.github.com/davidguttman/af34fc391c47baed93a463b3c2b40bc8

After that I would experiment with controlling multiple squares. Instead of just one square on screen, create a grid of four and have them affected slightly differently by where the mouse is.https://gist.github.com/davidguttman/318b441c11f4cdcd7994f5239b2a6e37

What's Next

By now you should 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, evaluate, and do something else.

The decision of what to do next is your own. I 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 to have the boxes rotate on their own, and the mouse position will affect that speed.

I don't have good advice on when to stop or call something finished. When I make things like this I either stop when I get bored or when I find myself spending more time playing/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.