Design Dynamic Visual Systems Unleash the power of computational design to boost your creativity ARTEC 35 @ IPT, Tomar 2025-04-07 Pedro Amado [email protected] with p5js 

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); 

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. 

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) 

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 

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 

PAMADO × ARTEC35 7 https://www.14et.uevora.pt/ call for papers 15ET @ ESMAD Póvoa do Varzim soon! -- 

PAMADO × ARTEC35 8 https://ligatures.fba.up.pt/2025/ Summer School 17–18 July 2025 

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? 

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 

PAMADO × ARTEC35 11 Reas & McWilliams, 2010, pp. 8–9 As a designer or artist, why would I want or need to write software? 

PAMADO × ARTEC35 12 Nicholas Felton, Feltron Report 2008: http://feltron.com/FAR08.html 

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) 

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 

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 

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 

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 

PAMADO × ARTEC35 18 Poster Based on the work of Karel Martens : https://www.instagram.com/p/B3JcC4sBVP4/?igshid=1o96gbecy3ciq 

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

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/ 

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% 

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 

PAMADO × ARTEC35 23 Nicholas Felton, Typecon: http://feltron.com/TypeCon.html 

PAMADO × ARTEC35 24 Data Glitches, curated by Giovanni Magni : https://www.instagram.com/p/B3CMJrsCO2G/?igshid=lqx5ksp37wum 

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/ 

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/ 

PAMADO × ARTEC35 27 Visual & Conceptual references: https://www.instagram.com/p/CjpDz4lp4X0/ 

PAMADO × ARTEC35 28 Visual & Conceptual references: https://www.instagram.com/p/ClShSlcIqV0 

PAMADO × ARTEC35 29 Visual & Conceptual references: https://www.instagram.com/p/CjC-FjpNOjO/ 

PAMADO × ARTEC35 30 Alguns exemplos do workshop anterior: Marta Valente, & Margarida Torrinha (IPCA, 2019) 

PAMADO × ARTEC35 31 Alguns exemplos do workshop anterior: Mara Fernandes, & Inês Faria (IPCA, 2019) 

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/ ) 

PAMADO × ARTEC35 33 Conceptual reference. Processing ”ecossystem”: https://processing.org/ Conceptual reference Processing 

PAMADO × ARTEC35 34 Conceptual reference Conceptual reference Processing Ecossystem DBN > Java > p5.js Arduino > processing.py… 

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 

PAMADO × ARTEC35 36 Learning more: https://p5js.org/ 

PAMADO × ARTEC35 37 Learning more… Shiffman! https://www.youtube.com/c/TheCodingTrain/playlists 

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 

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 

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