Angela Velasquez

Generative Poster

The main concept for this project was to create a Generative Piece of art using my personal style. It evolved into a fun unique printable.

It’s partly inspired by a previous personal project. It’s related at two levels, first the code part as the old projects was experimenting with pure CSS illustrations1 and a second part which is drawing characters with code. When I created the CSS illustrations the inspiration came from the capabilities of HTML and CSS to create visuals from scratch, as a blank digital canvas. I created a few interactive pieces of minimalistic characters with a switch button to toggle between day and night, just like a light and dark mode for interfaces. Nowadays the dark and light theme is a common pattern, but at the moment (more than 10 years ago) it felt new and refreshing. The entire experience of experimenting with CSS felt whimsical and powerful. A few lines of properties, attributes and values were enough to generate interactive visuals. I decided to build on top of that original idea, and mix it with the generative concepts I’ve learned so far. That’s how I ended up with: “All my friends”.

The System

The main functionality is defined through a single function to generate the characters: function drawFriends(col, row, cell,h,s) I’m passing the column, row, cell, hue and saturation through the function:

• col and row are used in the Loop inside the Draw function from p5.js to define the grid.
• cell it’s the core value that defines proportions, sizing and spacing of the characters.
• h and s are hue and saturation. I’m using HSL mode for defining color and maintaining a cohesive colorful palette.

As mentioned above, the function is called inside a nested loop to define the columns and rows of the grid inside the Draw function. There are 3 interactive elements.

1. Radio buttons to change colors, this implies a change in the hue, which provides a different mood to the piece.
2. Sound implementation, simple but according to the tone of my piece, there’s a barking sound mapped with the mouseY and windowHeight position.
3. Printing the piece, handled by a keyPressed function, to allow the viewer to take a snapshot of a unique set of Friends to print as a poster, postcard, or just to save it digitally for their own use.

Link to P5 Projects:

All my friends Project