Use Code to Make Stuff 2: Processing (& a bit of TouchDesigner)

part 1 here

Storytelling Through Code

This past month, I've been attempting to learn how to use code to tell stories. It's more of an art form than a science, since generative art is too abstract to tell a visual story.

I've written two short stories, linked below. The rest of this post will discuss a few selected pieces from these stories, and the process of their creation.

https://twitter.com/adams_bram/status/1198336132787949568
https://twitter.com/adams_bram/status/1203512289812516864

The Word Spiral

This piece was the second "installment" in the Violet series. In this part, Violet, our protagonist, meets Mahog. Mahog is a magical creature that lives in Violet's book, so I thought it may be cool to have words that have some type of movement, as if they were alive.

What I Learned

1. atan is a powerful rotation tool. If you feed it the height and width offset of an object, it will rotate it by the offset amount of degrees

2. Saving frames is much easier in Processing than in p5. I then use ffmpeg to convert the frame .tif files to a .mp4 The command to do this is as follows:
   

ffmpeg -framerate 30 -pattern_type glob -i '*.tif' \
  -c:v libx264 -r 30 -pix_fmt yuv420p out.mp4

1. Font size can go down to almost 0! The pt format dictates the height of a letter, and there are ~72pts in one inch. This allows for some really cool effects.

The Himalayan Salt Lamp

Have you ever seen a Himalayan salt lamp? They're very popular amongst hipster college students. In the story, Violet has a Himalayan salt that acts as an independent observer of the events in her life.

What I Learned

1. Sketch before you code! When I was a software engineer, I started my day by jumping right into coding. This decision would usually come back to bite me, as I made errors that would take sometimes hours to undo. Pen and paper are extremely powerful, because you can put anything in your head on paper. Even if your sketches are more like scratches, writing will help you clarify your thought process before you commit to coding.

2. Collision detection can be made in a lot of ways! The traditional algorithms used "bounding boxes" but that didn't really work for this piece. Instead, my solution was to check the color of the leading pixel. If the space was occupied by another crack, the crack should stop growing.
   

boolean checkForCollision() {
    if( get(floor(lastSegment.x1), floor(lastSegment.y1) + 10 ) == color(255,255,255)) {
         return true;
    }
    return false;
}

The Hills

The final piece today is actually not Processing, it was made in TouchDesigner. For the uninitiated, TouchDesigner is a visual based programming language. Instead of writing code, we connect "nodes", that are then rendered into a final image or video.

this is what a TouchDesigner network looks like

What I Learned

1. TouchDesigner allows you to get a fully functioning product out of the door in minutes. The downside is that it is quite proprietary, and knowledge isn't the easiest to come by for free (I highly recommend Matthew Ragan).
2. SOPs -> CHOPs -> TOPs -> DATs recurse forever! You'll spend a while getting your head around all the different operator types
3. I still go back and forth on if I'm faster in Processing, but it really depends on what I'm attempting to create. 3D is awesome in TouchDesigner. (TouchDesigner is also kinda expensive)

Have Fun with It

The most important thing about Processing (and coding in general) is to have fun.

Don't worry about the optimal way of doing something.
Don't worry about perfection;
Don't worry about what you don't know.

I've been learning a ton using these tools. I love that I don't need to write tests, that failure is encouraged, and that I get to use code in a brand new way.

For those curious about making art with code, please don't hesitate to reach out to me! I'm learning a ton, and the journey is just beginning!

Soon there will be a Stream

At the end of this month (after my computer parts arrive lol), I will begin streaming the process of making these pieces. Come hang out sometime!

https://www.twitch.tv/bramses