Generative Design Poster
Roles
P5.js JavaScript Coder, Graphic Design
Team
Samantha Mirabella
Jenna Cianfarani
Timeline
November 2024
Tools
Open Processing, Figma
Project Overview
Our poster "Pixels with Personality" was created using p5.js, a JavaScript library that brings digital creativity to life through code. We used a p5.js sketch and the p5.riso library to code our design, combining colours, shapes, and an interactive element to produce our output with a Riso printer. Once our design was complete, we exported it as layers to isolate each colour for turning our digital art into prints.Context
We were tasked to design and write a sketch in p5.js that proposes a positive answer to the prompt "What does programming language as a radical community look like?"The Prompt
"Pixels with Personality" explores code as a medium for creative expression, where each pixel—and the coder behind it—brings a unique perspective to the design. Coding allows for individuality and inclusivity through its diverse possibilities, turning technical lines of code into digital art. Just as pixels combine to form digital artwork, individuals contribute their unique personalities and perspectives to build a diverse and connected community.The Concept
Process
We began by drawing drafts of what we wanted our final designs to look like. From there, we wrote pseudocode and created a detailed flowchart to plan how we could translate our design into code. The pseudocode and flowchart outlines decision points, loops, and conditional paths, guiding the execution of our design and the interactive element.
Key Takeaways
Through this project, I learned that code is not limited to digital formats as it can be turned into tangible forms of art. I also learned how to personalize code by importing custom fonts and how to create compelling visuals by scaling and transforming shapes, enhancing my ability to precisely position elements using coordinates.