Publicado em: 08 Janeiro 2026

Workshop "Grid Lock & Drop It" com Pedro Amado

Workshop gratuito mas limitado a 12 participantes.

No dia 13 de janeiro de 2026, das 16h00 às 20h00, na sala B207, a Pós-Graduação em Web Design vai organizar o workshop Grid Lock & Drop It: A workshop on dynamic branding programming with p5.js, com Pedro Amado (FBAUP/i2ADS/Ligatures).

Grid Lock & Drop It
A workshop on dynamic branding programming with p5.js
By Pedro Amado FBAUP/i2ADS/Ligatures

Overview
The goal of this workshop is to introduce participants to creative coding in Graphic Design. In a one-day beginner-level introduction, participants will be introduced to p5.js library while designing a fully functional, dynamic branding system proof-of-concept web application.

Participants will be guided through the first steps of computer programming: using variables, functions, parameters, conditions, and loops to structure the algorithm and decision trees, and media such as vector shapes, images, and typography to produce an interactive branding generator application capable of exporting assets such as patterns for posters or visual applications.

Workshop Program (ESMAD, 13 Jan, 16h–20h GMT)
0. Introduction (participants, instructors & Setup of the p5.js Web Editor; Basic Drawing);

1. The "Atom" & The "Matrix" (Foundations):
– Explanation of the Coordinate System (and the Normalized/Normalization of coordinates);
– The "Unit" (Normalized Design) Custom function(s) & Transforming;
– The 3x3 Grid (Introduction to for loops);

2. Interaction & Motion (The Engine)
– GUI (DOM Elements); Creating controls for: GridSize (rows/cols) and TileScale; Connecting GUI variables to the grid loop logic.
– Animation & Tweening: Introduction to Linear Interpolation (lerp). and Randomization

3. Image Data & Sampling (The Input)
– Drag, Drop & Load: Implementing drop() event in p5.js to handle file uploads; and Loading the user's image into an off-screen graphic or variable (p5.Image).
– Pixel Reading (Understanding the img.get(x, y) function)

4. The Dynamic Branding System

– Putting it all together with Conditional (if) statements
– Final Output: Adding a keybind (e.g., 'S') to saveCanvas() as an image/vector file

Requirements
Participants must have access to a personal computer with a modern browser (e.g., Chrome), a stable Internet connection to participate in the workshop.
The workshop will be held in the Portuguese language, but it is suitable for English-speaking participants.

Instructor
Pedro Amado (Ph.D., MFA) is an Associate Professor of Web Design, Typography, and Typeface Design at FBAUP. Integrated researcher and member of the board of the i2ADS research institute, coordinator of the Ligatures Special Interest Group, a founding member of the ATIPO, and country delegate for the ATypI. Passionate for digital tinkering, amateur letterpress printer, he focuses his research and development activities on computational and post-digital typography and editorial design, as well as human-computer interaction.

Registration
Ângelo Gonçalves (adg@esmad.ipp.pt)
Limited to 12 participants.