p5.js Design Tools Directory

Published by Tim on Sunday June 23, 2024

Last modified on December 4th, 2024 at 19:05

p5studio

Hi!

In this post I’ll collect case studies and direct links to tools that people have built with p5.js and Processing. Do you know more great examples? Awesome, please send me an e-mail to feedback@timrodenbroeker.de. Thanks!

What is a Tool in this context?

This post is research for my course on tools for p5.js. The term ‘tool’ is narrowed down significantly here:

By ‘tool’ in this context, I mean a p5.js sketch that can be modified and controlled via a simple user interface consisting of HTML input elements. That way, the design system can be shared and used by non-coders.

Highlights

https://greetizify.studiodev.xyz/

This greeting card generator by Marie Malarme is a great example of what creatively coded experiments can be applied to in a playful way, while advertising your skills. She combines the aesthetics of rasterisation with multiple creative motion effects and lets you explore some variable ranges via the sliders and toggles.
The variables you select for your sliders is an impactful decision for the flexibility of your tool, as it is a direct representation of its limitations. It’s important to find a balance between maximal flexibility and a coherent aesthetic.

Nahuel Gerth – Iso Drawing

There are infinite possibilities when creating a graphical user interface. This tool by Nahuel Gerth is a wonderful example that input can be delivered in very creative and inspiring ways. Once you mastered the “basic” input types, you can dream up many more (un)usable interfaces.

Jake Welch – Noise Painting Generator

Tools can be a very effective way to experiment with image input. Changing the variables and therefore transformations that are applied to every pixel of an image can create a huge variety of effects in a simple system. This generator by Jake Welch is a nice example of how you can create your own personalised effects and filters via code. In the end a tools is a transformer from input to output.

Joao Generoso – Lattice

This tool by Joao Generoso is simply amazing. It’s a great example of how flexible and powerful a tool can be, while sticking to a simple idea. Joao includes settings for easing, key-framing and much more and even enables the user to download an .mp4.

A growing, unsorted List

Related

Enjoying the content?

I put a lot of love and effort into developing content on Creative Coding. Since 2018, I have published 219 interviews, case studies, and tutorials, along with over 280 lessons in 17 online courses – and there's more to come! If you'd like to support my work and help keep this platform evolving, please consider supporting me on Patreon. Thank you very much!

Speaking Image

Monthly Newsletter

Fresh perspectives circling around Creative Coding, Design and Technology, every first Friday of the month, directly to your inbox.

Related

A custom Mockup Tool, built with Processing (updated)

For my students at Elisava, I have created a new version of my mockup-tool. You need two different files for […]

Marcus Aurelius Meditations

Since the beginning of the Corona crisis, I have been more and more interested in the history of ancient philosophy. […]

Form follows Music: The Bach-Project

Generative visuals made from the "Prelude in C" by Johann Sebastian Bach.

FFMPEG Snippet Collection

FFMPEG is a very small and handy tool for converting and editing media from the command-line. Not only is it […]

Discoveries in the Public Domain

The internet holds incredible treasures of media, free to use for anyone. This short video-essay gives you insights into the […]