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
- https://www.andbc.co/work/capoeira
- 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
- https://dodgerbluelab.github.io/rcstudio/
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!
Related
For my students at Elisava, I have created a new version of my mockup-tool. You need two different files for […]
Since the beginning of the Corona crisis, I have been more and more interested in the history of ancient philosophy. […]
Generative visuals made from the "Prelude in C" by Johann Sebastian Bach.
FFMPEG is a very small and handy tool for converting and editing media from the command-line. Not only is it […]
The internet holds incredible treasures of media, free to use for anyone. This short video-essay gives you insights into the […]