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.

Comments

[Matei Adriel]

I hate p5.js. Why you might ask?

• It's slow:
  • The p5 version of this is about 4 times slower (the one in the video is made in vanilla js).
  • The p5 version of this project was about 10 times slower
• It encourages bad practices:
  • you need to make lots or global variables
  • a pain to use with something like typescript

I get why it's neat for beginners, but I wouldn't recommend it to anyone who understands vanilla js.

[Cameren Dolecheck]

I've used p5 a lot for a fairly wide range of project sizes, largest being about 2-3k lines. It definitely got some major downsides. The use of globals my biggest gripe for large projects and testing. Some of the p5 libraries, the p5.sound especially, are horrible with performance, at least with what I was doing.

That being said, the API for p5 is excellent. Since it is based on Processing, the ease of use has been thought through extensively. I definitely don't think I would ever want to use vanilla canvas API. I think the Processing foundations mission of making a library accessible for artists and designers fits perfectly with p5.

Everything you said though is spot on. In the end, it's all about trade-offs.

[Bram Adams]

Cameren, I agree wholeheartedly about the issue with globals! Have you got a chance to play around with p5 instance mode [p5js.org/examples/instance-mode-in...]? It helps somewhat with this issue.

[Cameren Dolecheck]

Yes, I have used instance mode. My P5-Electon Quickstart Template uses p5 instance mode. It definitely solves the problem of globals, but at the cost of readability p.ellipse vs just ellipse. While it is pretty much required in order to build a well structured application, something about it just feels not in the spirit of p5.

Overall, for a vast majority of projects made with p5, I think instance mode is not necessary. Globals really don't matter when you're quickly iterating and building a cool art piece with a code base you are not going to maintain.

[Matei Adriel]

I think that reduces the problem by a little bit, but you are still mutating the variables scoped to the main function. Atm i dont think theres any actual functional way

[Bram Adams]

Great points, Matei! I agree with you about the global variables being an issue, which can lead to weird unforeseen errors.

That said, I still think p5 is great. After playing with the vanilla JS web-canvas API, I find myself reinventing the wheel a lot. Depending on use case, and especially with generative art, I find p5 to be more than sufficient, unless I go crazy with WebGL and the p5.sound library.

I'd go so far as to claim p5 is made for expression, whereas the native API is made for production (people who are very familiar with the API and need very performant projects).

Finally, there are a lot of optimizations p5 makes under the hood that a developer may end up overlooking (for example: creating 100s of circles instead of copying one instance)

edit: very cool galaxy map btw!

[Matei Adriel]

You hit some great points!

1. I also find myself reinventing the wheel a lot. If I'd want to build something bigger I'd go with something high level like pixi (or if you want something super low level but still nice you can take a look at picogl)
2. I think the optimizations are really easy to miss, the best examples beeing those 2 quick doodles I linked in the original comment
3. Yes, it's cool for generative art where you just want to take a screenshot of the final thing, but if you want something real time you might need to rewrite it in vanilla js (or another lib)

Again, i think it's a tool with an amazing educational value, but that comes at the cost of it not beeing the right tool for more advamced stuff

[Daniel Arant]

Have you disabled the friendly error system? According to the docs, it can degrade performance up to 10x. I don't think it's included in the minified version so you don't have to disable it in that case.

p5js.org/reference/#/p5/disableFri...

[Cameren Dolecheck]

I am so happy to see more folks posting about generative art on Dev. The triangle piece was especially cool.

I see you posted the piece by Naon. What other generative artists and pieces do you find interesting? One of the best I see on the generative art subreddits is Tyler Hobbs. One of the more expressive genartists I see around. tylerxhobbs.com

Keep up the good work! Let me know if you need any help. I've done a range of projects in p5. I also have a quickstart for using p5 with Electronjs. imago.dev/p5-electron-quick-start/