Use Code to Make Stuff: p5.js

We developers use code to make stuff. The stuff we make generally revolves around web servers, web development, dev ops, databases etc. That kind of stuff gets repetitive and dry, and "spicing up the relationship" means learning new frameworks and libraries for .06873% improved performance on a production app.

But what if code could be used for more? What if code could be used to make art?

A generative art piece created by Manolo Gamboa Naon

I recently got into p5.js, a library based off of Processing. The only real experience I had with graphics programming in the past was Java AWT (shudders), and I kind of avoided it since. What changed my opinion was generative art.

Generative art is a thing of beauty. It embraces the chaotic nature of the Math.random() to make works that are inspiring, and never before seen.

You don't need to be a designer or an artist to make generative art. You create the designer using code.

In this post, I'd like to discuss a few pieces I've made in the past week and what I learned making them.

The Color Triangle Pyramid

Based off of Tobias Meyer's 1775 color triangle, I thought it would be cool to have each triangle represent a different HSB value.

What I learned:

• you can, and should, use instances of items like you might in React. In this work, I set up a Triangle() component with a "color" prop
• the nice thing about computer design is if you don't like a background, you can just try another! I also have this piece against a dark blue and gray background
• variables are your friend, store height and width of your canvas for later use

The Mythological Disarray

This piece is based off of the cubic disarray algorithm. Generative Artistry has an amazing tutorial I highly recommend you read.

What I learned:

• I thought I would need to manipulate pixel values one by one to get that rotation effect, so I spent a lot of time fiddling with the loadPixels method. Turns out, an image is just a colored rectangle in p5. This allowed me to chop the image into squares and fiddle with them manually
• When you need to rotate(), remember to translate()! Rotating effects the entire canvas, unless...
• You use push() and pop(), which create a "temporary state" that reverts after the pop()

Craigslist Lost Connections

This piece was inspired by those cool data visualizations on the internet that show how we're all interconnected. The data, however, is fake :).

What I learned:

• an array of connections can be generated very simply. You need two components:
  1. A list of who's connected to who
  2. An ID for each point
• Circles are amazing. Because they have infinite vertices, you can find any (x,y) on a circle perimeter using the equations: x = cos(radians(angle)) * radius and y = sin(radians(angle)) * radius. Just memorize this, I have no idea how it works either. Something math, I presume.
• The draw() function is called in p5 once per frame, which is very fast. In order to slow the process down and appreciate the outcomes, you can lower the frame rate by calling frameRate(1)

Conclusion

Code is really powerful stuff. When you're drowning in the web development ocean, or if you need to take a breather from the REST vs GraphQL wars, come over and play around with p5. We have cookies.

Well actually, we have circles. But you can use circles to make cookies.