PIXELS WITH PERSONALITY
Company Type
School Project for Generative Design.
Timeline
September - December 2024
Generative Designer
P5.js Coder
Graphic Design
My Role
Tools
Figma
Open Processing
Pixels with Personality was created using P5.js, a JavaScript library that bridges coding and visual art. We used P5.js to design and program our digital artwork, combining shapes, colours, and interactive elements that reflect individuality and creativity. Once the designs were finalized, they were exported into layers compatible with the Riso printer, ensuring each colour channel was perfectly aligned for printing. This process allowed us to transform our digital art into tangible prints while maintaining the unique, personal touch of the original designs.
Team
Jenna Cianfarani & Samantha Mirabella
DESIGN PROCESS
THE CONCEPT
The title of our poster, Pixels with Personality, embodies the concept of using code as a medium for creative expression. It highlights how programming transcends technical constraints, offering opportunities for individuality and inclusivity. Just as pixels are the building blocks of digital art, coders contribute unique perspectives to a diverse and interconnected community. This idea reflects the freedom and creativity found in tools like p5.js, which bridges the worlds of art and programming, as discussed in the Artists and Hackers podcast, “Can a programming language be a radical community?” Our project challenges the perception of coding as strictly functional, showcasing its potential as a platform for artistic exploration. By blending structure with creativity through images, colours, shapes, and text, we invite viewers to reimagine coding as a deeply personal and expressive art form.
As part of our project, we created a detailed coding flowchart to visualize the structure and logic of our program. This flowchart served as a roadmap, outlining the key processes from user input to the generation of creative outputs. It included decision points, loops, and conditional paths, showcasing how our code integrates artistic elements like shapes, colours, and text to produce dynamic results. By breaking down the steps, the flowchart not only helped us refine our program's functionality but also provided a clear representation of how coding principles could be applied to creative expression. It was a valuable tool for collaboration, ensuring that everyone on the team had a shared understanding of the program’s structure and flow.
PREPARING THE FLOW
1. Define the riso colours fluorescent pink and sky blue
Define the moon and sun dimensions and colour
Define window detail dimensions and colour
2. Set up the canvas
Create an 8.5 x 11 inch canvas
input(“day” or “night”)
Set the background colour - if (“day”){color = pink} else{color = blue}
3. Draw the grid lines
Start with the stroke color - use user input to set the color of the lines to either blue or pink
if(“day”){color = blue} else{color = pink}
Choose the stroke weight, we can make this 4px
for-loop --> for(let i = 0; i< 2; i++) {VerticalLine(), HorizontalLine()} --> to draw the lines
4. Add the pixel pattern on the windows
Create squares and position them on windows
5. Draw the moon or the sun behind the grid
fill colour white
no stroke()
if(“day”)
ellipse (x,y, d)
else if(“night”)
PSUEDOCODE
ellipse(x,y,d)
ellipse(x+20,y,d)
6. Draw text
function draw text()
fill colour
text size
text align
text “pixels with personality”
7. Draw 3 large circles to overlap the window
fill colour white
no stroke()
ellipse()
8. Draw the animals
function draw animals()
Draw the animal on the left which is the dog
Use ellipse, triangles, and curves to draw the dog
Use beginShape() and endShape() to make custom parts of the animal, the tail
Draw animal on the right which is the cat
Use ellipse, triangles, and curves to draw the cat
Use beginShape() and endShape() to make custom parts of the animal, the tail
Add details to the animals
Set fill colour for individual shape details
Use ellipse to create eyes and nose and for the dog and spots on the cat
Use beginShape() and endShape(CLOSE) to create star shape eyes for the cat
Through creating this code, I learned how to work with layers and transparency to build dynamic compositions and how to integrate typography using custom fonts for a creative touch. I explored geometric shapes, scaling, and transformations to design detailed elements like the dog and cat, which helped me improve my understanding of coordinate systems and spatial accuracy. Using create graphics () showed me how to manage separate elements more efficiently, and conditional logic allowed me to add interactivity to my work. I also gained valuable experience with colour consistency, modular design, and iterative problem-solving, all while refining my attention to detail to improve the final visual outcome.