An example of a Dissonant Trail. Hover over/tap the image to see how it was constructed. Keep in mind these GIFs are large (~20 MB) if you are on data.

Background

I’m currently taking a class on Stochastic Processes and thought it’d be cool to make some generative art using what I learned. I have some bigger ideas involving stochastic processes in the works, but in the meanwhile, I thought I’d share some art that I made with it.

Making Dissonant Trails

I considered an $n$ discrete state system and wanted to visualize the transitions between the states. Instead of showing the probabilities of the transitions between states, I put particles at the states and simulated multiple timesteps to determine each particle’s path. Visualizing the path gives the “trail” part of the visual. The “dissonant” part comes from the noise of particles colliding with each other.

To make this abstract idea concrete, I used D3 to simulate the particles, and used D3-Force to make the particles move between states.

I considered one particle and visualized its path in a system and I got this:

At first, it looks like a bunch of scribbling, but there’s actually some interesting things going on. For example, at the top, the path stayed in the same state but sort-of moved around, probably colliding with other particles. Next, I considered multiple particles’ paths in a system:

Looks like a box of crayons!

If you’re interested in how each path is constructed, here’s a video showing the particles over time:

At this point, I thought it was pretty cool and started messing with some of the stylistic elements, like the stroke properties and background:

I wanted to try visualizing even more paths and particles, but the rendering on the page was becoming super slow, so I had to cap it off at a point.

Ultimately, the uniqueness of a generative piece comes from a) the number of states b) the transition matrix c) sampling from the transition matrix and d) moving the states location over time.

Examples

Poster A graphic with some of the dissonant trails

Check out the full code to make your own Dissonant Trails here.