Memória P&D Design

15º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design

UFAM — Manaus (AM)

Outubro/2024

Explorando a Tecnologia Generativa no Design Gráfico: Do Conceito à Prática com P5.js

Exploring Generative Technology in Graphic Design: From Concept to Practice with P5.js

João Lima
Josinaldo da Silva

Como citar

Lima, João; Silva, Josinaldo da; "Explorando a Tecnologia Generativa no Design Gráfico: Do Conceito à Prática com P5.js", p. 3332-3349. PPG Design Caderno Científico, Manaus, 2024. Anais do XV Congresso Brasileiro de Pesquisa e Desenvolvimento em Design – P&D Design Manaus., DOI https://doi.org/10.29327/5457226.1-395

Resumo

O design é um campo interdisciplinar em constante evolução, que se adapta e se transforma com o surgimento de novas ferramentas, métodos e processos. Nesse contexto, o artigo estuda o campo da tecnologia generativa, reunindo conceitos, exemplos, ferramentas e práticas para avaliar seu impacto e contribuição no design gráfico. Para isso, foram conduzidos estudos teóricos e práticos com diversas ferramentas generativas a fim de avaliar suas características e potencial de uso na criação de artefatos gráficos. Entre essas, selecionamos o p5.js para uma análise mais efetiva de seu uso no processo criativo do designer gráfico. Os resultados mostraram que o p5.js possui grande potencial e eficácia para gerar alternativas complexas e dinâmicas, talvez impossíveis com métodos mais tradicionais. No entanto, a ferramenta mostrou-se limitada no que diz respeito à geração de arquivos para impressão e na gestão de blocos de texto, pois não apresenta ferramentas ágeis para lidar com espaçamentos, alinhamento e escolha tipográfica. Apesar dessas limitações, a tecnologia generativa, particularmente o p5.js, oferece um potencial significativo para o processo criativo no design gráfico.
Palavras-chave:

design gráfico, tecnologia generativa, p5.js

Abstract

Design is an interdisciplinary field in constant evolution, adapting and transforming with the emergence of new tools, methods, and processes. In this context, the article examines the field of generative technology, gathering concepts, examples, tools, and practices to assess its impact and contribution to graphic design. The study involved both theoretical and practical research with various generative tools to evaluate their characteristics and potential for creating graphic artifacts. Among these, p5.js was selected for a more effective analysis of its use in the graphic designer's creative process. The results showed that p5.js has great potential and effectiveness in generating complex and dynamic alternatives, which might be impossible with more traditional methods. However, the tool proved limited in terms of generating files for print and managing text blocks, as it lacks agile tools for handling spacing, alignment, and typographic choices. Despite these limitations, generative technology, particularly p5.js, offers significant potential for the creative process in graphic design.
Keywords:

graphic design, generative technology, p5.js

Referências bibliográficas

  • SANTOS COSTA, Daniele dos; SIGRIST, Vanina Carrara. Webarte: a biblioteca p5.js e o estudo de caso do projeto cápsulas sonoras. Revista Extensão, v. 23, n. 1, p. 41-50, 2023. Disponível em: . Acesso em 20 de abril 2024.

  • ENDO, Gabriel. Design generativo para sistemas visuais: uma abordagem sistematizada e sistêmica. 2023. UNB. Disponível em .

  • ESPINOZA, José Luis. Estudio iconográfico de las manifestaciones textiles de la Parroquia Cacha para la creación de una tipografía experimental. 2018. Riobamba. Disponível em: .

  • FROLOV, Oleg. Processing Posters. In: Behance, 2019. Disponível em: https://www.behance.net/Volorf. Acesso em: 15 abr. 2024.

  • GACHADOAT, Julien. Generative Art is. V3GA, s.d. Disponível em: . Acesso em: 29 jul. 2024.

  • GALANTER, Philip. Generative Art Theory. In: PAUL, Christiane (Ed.). A Companion to Digital Art. [S.l.]: Wiley Blackwell, 2016. Disponível em: https://doi.org/10.1002/9781118475249.ch5. Acesso em: 29 jul. 2024.

  • GALANTER, Philip. What Is Generative Art? Complexity Theory as a Context for Art Theory. 2003. 15º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, Manaus (AM). Disponível em: https://philipgalanter.com/downloads/ga2003_what_is_genart.pdf. Acesso em: 29 janeiro de 2024.

  • GROSS, Benedikt; BOHNACKER, Hartmut. Generative Design: Visualize, Program, and Create with JavaScript in p5.js. New York: Princeton Architectural Press, 2018.

  • GUERRERO, Manolo. Typecode: uma introdução à tipografia generativa. In: O Tipo da Fonte, 2017. Disponível em: . Acesso em: 15 abr. 2024.

  • GUERRERO, Manolo. Diseño tipográfico experimental. Recuperado el, v. 6, 2014. Disponível em: .

  • FISCHER, Thomas; HERR, Christiane. Teaching Generative Design. International Conference on Generative Art, jan. 2001.

  • KELLEHER, Caitlin; PAUSCH, Randy. Lowering the barriers to programming: A taxonomy of programming environments and languages for novice programmers. ACM Computing Surveys (CSUR), v. 37, n. 2, p. 83-137, 2005.

  • MAGALHÃES, Miguel. Design generativo: experiências sinestésica na música eletrônica. ESAD, 2020. Disponível em: http://hdl.handle.net/10400.26/33234.

  • MEGGS, Philip B.; PURVIS, Alston W. História do design gráfico. Cosac Naify, 2009.

  • NADDEO, Diogo Navarro Loureiro de Barros et al. Arte Generativa: Uma Análise Conceitual, Processual e Referencial. Vol 1, UFRB, 2014.

  • NASCIMENTO, Ruben David Ferreira Amaral do. Tipografia experimental em sistemas generativos. Design Gráfico-Instituto de Arte, Design e Empresa-Universitário, 2017.

  • NODEBOX. NodeBox. Disponível em: http://nodebox.net. Acesso em: 19 jun. 2024.

  • MELLO, Patricia Oakim Bandeira de. Arte e programação na linguagem Processing. 2015. 137 f. Dissertação (Mestrado em Tecnologias da Inteligência e Design Digital) – Programa de Estudos Pós-Graduados em Tecnologias da Inteligência e Design Digital, Pontifícia Universidade Católica de São Paulo, São Paulo, 2015.

  • OMINE, Eduardo Hiroshi. Design gráfico computacional: computação aplicada no projeto e na produção de imagens dinâmicas e interativas. 2014. Dissertação (Mestrado em Design e Arquitetura) - Faculdade de Arquitetura e Urbanismo, Universidade de São Paulo, São Paulo, 2014. doi: 10.11606/D.16.2014.tde-12092014-122450. Acesso em: 2024-07-29.

  • OPENPROCESSING. OpenProcessing. Disponível em: https://www.openprocessing.org. Acesso em: 15 mar. 2024.

  • P5.JS. P5.js. Disponível em: https://p5js.org. Acesso em: 19 jun. 2024.

  • ROCHA, Claudio. Projeto tipográfico: análise e produção de fontes digitais. Rosari, 2003.

  • SANT'ANNA, Hugo Cristo. Entre foguetes, estrelas e canetas: relato de experiência de ensino de princípios da Computação para estudantes de graduação em Design. Projetica, [S.l.], v. 13, n. 3, p. 166–183, 2022. DOI: 10.5433/2236-2207.2022v13n3p166. Disponível em: https://ojs.uel.br/revistas/uel/index.php/projetica/article/view/46940. Acesso em: 29 jul. 2024.

  • SILVA, Caio Pereira; SILVEIRA, Lucas Corá. Sound system: sistema tipográfico generativo baseado em algoritmos musicais. 2017. 70 f., il. Trabalho de Conclusão de Curso (Bacharelado em Desenho Industrial) — Universidade de Brasília, Brasília, 2017.

  • TRIGGS, Teal et al. The typographic experiment: radical innovation in contemporary type design. Thames & Hudson, 2003.

  • VIEIRA, Bruna Luz; BRUSCATO, Léia Miotto. Parâmetros para a criação de sistemas generativos de identidade visual. Estudos em Design, Rio de Janeiro, v. 31, n. 3, 2023. Disponível em: https://estudosemdesign.emnuvens.com.br/design/article/view/1816. Acesso em: 29 maio de 2024.

  • VOICU, D. Which to Choose: Processing or p5.js. 2017. Disponível em: . Acesso em: 9 mar. 2024.