p5.js Design Tools Directory

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

• Poster.System by Paco Hardt
• Kiel Danger Mutschelknaus – Space Type Generator
  • Kiel Danger Mutschelknaus – Space Type Generator – Stripes
  • Kiel Danger Mutschelknaus – Space Type Generator – Coil
  • Kiel Danger Mutschelknaus – Space Type Generator – Ribbon
  • Kiel Danger Mutschelknaus – Space Type Generator – Layers
  • Kiel Danger Mutschelknaus – Space Type Generator – Danger
  • Kiel Danger Mutschelknaus – Space Type Generator – Badge
  • Kiel Danger Mutschelknaus – Space Type Generator – Clutter
  • Kiel Danger Mutschelknaus – Space Type Generator – Construct
  • Kiel Danger Mutschelknaus – Space Type Generator – Snap
  • Kiel Danger Mutschelknaus – Space Type Generator – Flash
  • Kiel Danger Mutschelknaus – Space Type Generator – Pow
  • Kiel Danger Mutschelknaus – Space Type Generator – Crash
  • Kiel Danger Mutschelknaus – Space Type Generator – Vessel
• Tim Rodenbröker – P5 Studio
  https://greetizify.studiodev.xyz/
• https://voronoi-halo.alistairmcclymont.com/
• Nahuel Gerth – Iso Drawing
• https://nahuelgerth.de/tools/pitch-drums/
• https://nahuelgerth.de/tools/body-picker/
• Lena Weber – Mono Tool – http://www.aspektedesrasters.de/
• Tim Rodenbröker for Tonboutique Records
• Joao Generoso – Lattice
• Nick David – Architecture
• https://typemorpher.xyz
• Graphic Ground
• Plotter – gubernat.org
• Jake Welch – Tools
• Jake Welch – Gradient Flower Tool
• Jake Welch – Noise Painting Generator
• Jake Welch – Tile Collage Generator
• https://jake-welch-design.github.io/Glitch_type_generator_tool/
• uglyph.xyz
• Webtools by Stefan Milic
• https://hypeland.nl/projects/save-our-sound/
• https://decoy.life/watertrail/
• Stefan Milic – Visual Echoes
• https://notwk.london/
• https://otf.bauhauslabor.de/#/
• https://bbtgnn.github.io/hofmann-1.0.0/index.html
• https://gradientor.afterimage.cc/
• https://typemorpher.xyz/p5-sketch-01
• Generativetools.de
• https://tools.dia.tv/
• https://tools.dia.tv/ouroborus/
• https://maxenceduterne.com/physarumtype
• https://www.atery.artikulierung.ch/121_tool/
• https://joaogeneroso.com/clients/doi-codi/plataforma/post.html
• https://kikoo-playground.studiodev.xyz/
• gianluca.club
• TwoPoints.Net x Tim Rodenbröker – La Luz Negra