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
Workshop sobre dynamic branding programming with p5.js
Com Pedro Amado, FBAUP/i2ADS/Ligatures
Visão Geral
O objetivo deste workshop é introduzir os participantes à programação criativa (creative coding) no Design Gráfico. Num workshop de um dia, de nível iniciante, os participantes serão apresentados à biblioteca p5.js enquanto desenham uma prova de conceito de uma aplicação web de um sistema de branding dinâmico totalmente funcional. Os participantes serão guiados pelos primeiros passos da programação de computadores: utilizando variáveis, funções, parâmetros, condições e ciclos (loops) para estruturar o algoritmo e árvores de decisão, e meios como formas vetoriais, imagens e tipografia para produzir uma aplicação geradora de branding interativo, capaz de exportar recursos (assets) como padrões para cartazes ou aplicações visuais.
Programa do Workshop (ESMAD, 13 Jan, 16h–20h GMT)
0. Introdução
Participantes, instrutores e Configuração do Editor Web p5.js; Desenho Básico.
1. O "Átomo" e a "Matriz" (Fundamentos)
Explicação do Sistema de Coordenadas (e a Normalização de coordenadas);
A "Unidade" (Design Normalizado): Funções personalizadas e Transformação;
A Grelha 3x3 (Introdução aos for loops).
2. Interação e Movimento (O Motor)
GUI (Elementos DOM); Criação de controlos para: Tamanho da Grelha (linhas/colunas) e Escala do Mosaico (TileScale); Ligar variáveis da GUI à lógica do ciclo da grelha;
Animação e Tweening: Introdução à Interpolação Linear (lerp) e Aleatoriedade.
3. Dados de Imagem e Amostragem (O Input)
Arrastar, Largar e Carregar: Implementação do evento drop() no p5.js para gerir o carregamento de ficheiros; Carregamento da imagem do utilizador para um gráfico off-screen ou variável (p5.Image);
Leitura de Pixeis (Compreender a função img.get(x, y)).
4. O Sistema de Branding Dinâmico
Juntar tudo com instruções Condicionais (if);
Saída Final: Adicionar um atalho de teclado (ex: 'S') para saveCanvas() como ficheiro de imagem/vetorial.
Requisitos
Os participantes devem ter acesso a um computador pessoal com um navegador moderno (ex: Chrome) e uma ligação estável à Internet para participar no workshop. O workshop será realizado em língua portuguesa, mas é adequado para participantes de língua inglesa.
Biografia
Pedro Amado (Ph.D., MFA) é Professor Associado de Web Design, Tipografia e Design de Tipografia na FBAUP. Investigador integrado e membro da direção do instituto de investigação i2ADS, coordenador do Grupo de Interesse Especial Ligatures, membro fundador da ATIPO e delegado nacional da ATypI. Apaixonado por experimentação digital (digital tinkering) e impressor amador de tipografia (letterpress), foca as suas atividades de investigação e desenvolvimento na tipografia computacional e pós-digital e no design editorial, bem como na interação humano-computador.
Candidaturas
Candidaturas gratuitas. Limitadas a 12 participantes.
Através de um e-mail para o docente Ângelo Gonçalves (adg@esmad.ipp.pt)
