Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Dynamic Visual Systems with p5.js

Avatar for Pedro Amado Pedro Amado
April 07, 2025
15

Design Dynamic Visual Systems with p5.js

ARTEC 35 @ IPT, Tomar 2025-04-07
https://www.instagram.com/artec_dtag/

In this hands-on, beginner-friendly workshop, you’ll discover how to turn computer algorithms into symbols, brands, or full dynamic visual systems. We will use code to develop our concepts and designs into captivating visual identities.

No prior coding experience? No problem! We’ll guide you through the playful world of p5.js —a coding library designed to keep this simple and fun, loved by artists and designers— to craft generative graphics that breathe life into visual branding, or other communication pictographic and communication design systems.

Inspired by Karl Gerstner Designing Programmes, and Martin Lorenz’s Flexible Visual Systems, you’ll learn to design a dynamic rule-based process, instead of static single logos or symbols. You will be able to create dynamic patterns that morph, adapt, and surprise. Imagine coding a brand that evolves with every click, or a visual identity that generates infinite variations—all while sipping coffee and geeking out with fellow designers.

We’ll draw inspiration from iconic Portuguese designers and reverse-engineer their concepts into interactive code. By the end, you’ll export your own generative assets, ready to plug into posters, apps, or animations. Spoiler-alert: You’ll leave wondering why you didn’t start coding sooner!

Workshop
Code a flexible visual identity inspired by a Portuguese brand. Start with rules (e.g., “All circles must align to a grid, but colors are wild”). Add interactivity: Let users “remix” your system with sliders or clicks. Make it available to use or edit in other DTP software.

Total (Maximum) Time: 3 hours

Program:

Icebreaker (~15 mins)
Introduction (participants, instructors);
Conceptual reference
“Instead of Solutions for Problems Programmes for Solutions” Karl Gerstner and Martin Lorenz systematic approach
Visual and Historical references,
Quick overview of the processing and p5js “ecosystem” (Website and Editor);

Let’s Get Sketchy! (~45 minutes)
Hello World! — basic filesystem and program structure;
Drawing with code instructions: basic shapes & properties;
Drawing in a "normalized space" (0-1 space for endless scalability transformations!);
Turn numbers into design dials (color palettes, spacing, rotation) by using variables: from simple numeric variables, complex(ish) array variables;
Challenge: Create a geometric logo that resizes flawlessly.

Short (will there be Coffee?) break! (~15 minutes)

Build Your Brand System (~90 minutes)
I'm a function, you're a function, we are all… er… custom functions?;
Making patterns by using Loop (cycles) and Nested Loops;
Add “personality” to your system: controlling the flow with If-else conditions;
Challenge: Design a pattern-based logo that reacts to mouse movement.
[Hey… if we have time, we'll be] Using Media: loading fonts and images;
Using randomness;
Putting it all together!
Saving and exporting the results;
Show & Tell: Rapid-fire presentations + feedback. (~15 minutes)

Avatar for Pedro Amado

Pedro Amado

April 07, 2025
Tweet

Transcript

  1. Design Dynamic Visual Systems Unleash the power of computational design

    to boost your creativity ARTEC 35 @ IPT, Tomar 2025-04-07 Pedro Amado pamado@fba.up.pt with p5js
  2. PAMADO × ARTEC35 2 Workshop objectives & sketchbook : https://bit.ly/4dBAs5e

    Design Dynamic Visual Systems with p5js Part 1 (Icebreaker) Introduction (participants, instructors); — Conceptual reference — “Instead of Solutions for Problems Programmes for Solutions” Karl Gerstner and Martin Lorenz systematic approach; — Visual and Historical references, (Hands-on!) — Quick overview of the processing and p5js “ecosystem” (Website and Editor);
  3. PAMADO × ARTEC35 3 Workshop objectives & sketchbook : https://bit.ly/4dBAs5e

    Design Dynamic Visual Systems with p5js Part 2 (Let’s Get Sketchy!) — Hello World! — basic filesystem and program structure; — Drawing with code instructions: basic shapes & properties; — Drawing in a "normalized space" (0-1 space for endless scalability transformations!); — Turn numbers into design dials (color palettes, spacing, rotation) by using variables: from simple numeric variables, complex(ish) array variables; Challenge: Create a geometric logo that resizes flawlessly.
  4. PAMADO × ARTEC35 4 Workshop objectives & sketchbook : https://bit.ly/4dBAs5e

    Design Dynamic Visual Systems with p5js Part 3 (Build Your Brand System ) — I'm a function, you're a function, we are all… er… custom functions?; — Making patterns by using Loop (cycles) and Nested Loops; — Add “personality” to your system: controlling the flow with If-else conditions; Challenge: Design a pattern-based logo that reacts to mouse movement. Show & Tell: Rapid-fire presentations + feedback. (~15 minutes)
  5. PAMADO × ARTEC35 5 Apresentação Pedro Amado Licenciatura Design de

    Comunicação (FBAUP, 2002) Mestrado Arte Multimédia (FBAUP, 2007) Doutoramento Ciências e Tecnologias da Comunicação (UA, 2014) Membro do instituto de investigação i2ADS (2018—) Colaborador do ID+ grupo de investigação NIT (2021–) Delegado Português da ATypI (2012—) Membro fundador da ATIPO (2018—) Main R&D interests: Typography & Type Design Human-Computer Interaction RESEARCH INSTITUTE IN ART, DESIGN AND SOCIETY
  6. PAMADO × ARTEC35 6 Personal Presentation Pedro Amado Graphic Design

    Degree (FBAUP, 2002) MfA in Multimedia Art (FBAUP, 2007) Ph.D. in Communication Sciences and Technologies (UA, 2014) Integrated Member (Researcher / Board) of the i2ADS (2018—) Colaborator member of the ID+ / NIT (2021–) Portuguese Delegate for the ATypI w/ Vítor Quelhas (2012—) Founding member of the ATIPO (2018—) RESEARCH INSTITUTE IN ART, DESIGN AND SOCIETY
  7. PAMADO × ARTEC35 9 Apresentação Participantes And you? — Name

    — Where are you from? — What’s your background/training/course? — What do you like doing most? — Have you coded before? — What do you expect from this workshop?
  8. PAMADO × ARTEC35 10 Workshop objectives & sketchbook : https://editor.p5js.org/pedamado/collections/QL5H2uTp3

    Slide Deck: https://speakerdeck.com/pedamado/design-dynamic-visual-systems-with-p5-dot-js https://bit.ly/4i1OXkP
  9. PAMADO × ARTEC35 11 Reas & McWilliams, 2010, pp. 8–9

    As a designer or artist, why would I want or need to write software?
  10. PAMADO × ARTEC35 13 Código (Reas & McWilliams, 2010, p.

    15) Source Code = Algoritmo numa linguagem de programação Specifically, computer programming languages are designed for the way people are taught to read and write from a young age, with the precision necessary for instructing a computer Linguagem Natural Pseudo-código Código (interpretado) Código (compilado / binário / executável)
  11. PAMADO × ARTEC35 14 Reas & McWilliams, 2010, p. 25

    As a designer or artist, why would I want or need to write software to convey my unique vision
  12. PAMADO × ARTEC35 15 Reas & McWilliams, 2010, p. 25

    As a designer or artist, why would I want or need to write software to produce new experiences
  13. PAMADO × ARTEC35 16 Reas & McWilliams, 2010, p. 25

    As a designer or artist, why would I want or need to write software to go beyond limitations
  14. PAMADO × ARTEC35 17 Conceptual reference: Karel Martens. Dutch graphic

    designer Conceptual reference (visual references, modular concepts, and a quick overview of the processing “ecosystem”) Karel Martens Icon Viewer (adapted from detail), Karel Martens, 2017
  15. PAMADO × ARTEC35 18 Poster Based on the work of

    Karel Martens : https://www.instagram.com/p/B3JcC4sBVP4/?igshid=1o96gbecy3ciq
  16. PAMADO × ARTEC35 19 Conceptual reference: Truchet’s Tiles. Sébastien Truchet,

    1704: https://pelletierauger.com/en/projects/the-tilings-of-truchet.html
  17. PAMADO × ARTEC35 20 Conceptual reference: Truchet’s Tiles. Sébastien Truchet,

    1704: https://pelletierauger.com/en/projects/the-tilings-of-truchet.html http://arearugscarpet.blogspot.com/2014/04/the-curse-of-truchets-tiles.html & https://christophercarlson.com/portfolio/multi-scale-truchet-patterns/
  18. PAMADO × ARTEC35 21 Conceptual reference: Truchet’s Tiles. -50% -0.5

    -0.5 -0.3 -0.3 +0.5 +0.5 +0.3 +0.3 0 -50% 0 0 +50% +33.3% -33.3% +50% -50% -0.5 -0.5 -0.3 -0.3 +0.5 +0.5 +0.3 +0.3 0 -50% 0 0 +50% +33.3% -33.3% +50%
  19. PAMADO × ARTEC35 22 Conceptual reference: Truchet’s Tiles. -50% -0.5

    -0.5 -0.3 -0.3 +0.5 +0.5 +0.3 +0.3 0 -50% 0 0 +50% +33.3% -33.3% +50% -50% -0.5 -0.5 -0.3 -0.3 +0.5 +0.5 +0.3 +0.3 0 -50% 0 0 +50% +33.3% -33.3% +50% 0, 0 -0.5, -0.5 +0.3, -0.3 +0.5, +0.5 -0.5, +0.5 -0.333, -0.333 +0.5, +0.333 +0.333, +0.5 -0.5, -0.333 0, 0 -0.3, +0.3
  20. PAMADO × ARTEC35 24 Data Glitches, curated by Giovanni Magni

    : https://www.instagram.com/p/B3CMJrsCO2G/?igshid=lqx5ksp37wum
  21. PAMADO × ARTEC35 25 Visual & Conceptual references: Frieder Nake

    https://collections.vam.ac.uk/item/O211685/hommage-a-paul-klee-13965-print-nake-frieder/hommage-%C3%A0-paul-klee-13965-print-nake-frieder/
  22. PAMADO × ARTEC35 26 Conceptual reference. Ricardo Phillipe Dantas &

    Fábio Duarte Martins (Item Zero) Untitled work in progress (adapted from detail), Ricardo Phillipe Dantas, 2019 Mezzotint gaussian distribution print for INCM Itálica collection (Item Zero, 2020): https://www.instagram.com/p/CIyjt9EhYxc/
  23. PAMADO × ARTEC35 30 Alguns exemplos do workshop anterior: Marta

    Valente, & Margarida Torrinha (IPCA, 2019)
  24. PAMADO × ARTEC35 32 More Artists, Designers & References: https://lsi.fba.up.pt/2019/autores-artistas/index.html#percursosres

    (and, of course, check out the PCD’s Instagram account for cool people to follow: https://www.instagram.com/pcdporto/following/ )
  25. PAMADO × ARTEC35 35 Conceptual reference DBN Design by Numbers

    John Maeda, MIT Media Lab 1999 Logo Seymour Papert, Cynthia Solomon &Wally Feurzeig, 1960 Processing Ben Fry & Casey Reas, Aesthetics + Computation group, 2002 Javascript D3.js HTML5 Processing.py Python Java C Wiring 2003 OpenFrameworks Zach Lieberman, Theodore Watson, & Arturo Castro, 2005 Wordpress Herokuapp, Glitch.com Mobile & Web Apps Physical Computing Machine Learning Typopgraphy & Type Design DTP, Print Data Visualization Editorial Design Games PostScript Arduino 2005 C++ p5.js Lauren Lee McCarthy 2014 C# (Unity), Swift,… CSS Node.js PHP Touch Designer MySQL, Firebase Typescript, React, Vue, Angular Ruby Processing Ruby DrawBot Just van Rossum, Erik van Blokland, Frederik Berlaen, 2003 NodeBox Basil.js Ted Davis, Benedikt Groß & Ludwig Zeller, 2013 Nodes.io Nick Nikolov, Marcin Ignac & Damien Seguin, 2017
  26. PAMADO × ARTEC35 38 We’ll be working on Vítor da

    Silva’s graphic design legacy: https://pt.wikipedia.org/wiki/V%C3%ADtor_da_Silva
  27. PAMADO × ARTEC35 39 We’ll be working on Vítor da

    Silva’s graphic design legacy: https://pt.wikipedia.org/wiki/V%C3%ADtor_da_Silva
  28. PAMADO × ARTEC35 40 Workshop objectives & sketchbook : https://editor.p5js.org/pedamado/collections/QL5H2uTp3

    Slide Deck: https://speakerdeck.com/pedamado/design-dynamic-visual-systems-with-p5-dot-js https://bit.ly/4i1OXkP