“The F Generator sits at the perfect intersection where digital starts to feel tactile, and you want to dig into the code itself to see what else this variable logo design system can do.” —Boo Wong
Overview: For the Fabric Workshop and Museum in Philadelphia, which displays historical and contemporary textile art alongside each other, student Jocelyn Ziying Zhao at Pasadena-based ArtCenter College of Design created a generative design tool that visitors can use to output their own versions of the museum’s logo. Zhao refreshed the museum’s brand with a single F inspired by the Jacquard loom; she then created the F Generator to combine the aesthetics of traditional weaving with creative coding. Through this interactive experience, Zhao takes the museum from its foundation in fabric and expands it to a range of diverse media.
The F Generator features two modes—layering and animation—in which users can prototype their logo design and then animate it frame by frame.
Zhao developed the F Generator in Processing and used After Effects to flesh out its animation mode.
As the sole designer responsible for its execution, Zhao created this project in seven weeks with help from her professors Brad Bartlett and Roy Tatum and additional help from Professor Ivan Cruz.
Comments by Jocelyn Ziying Zhao:
How would you speculate that the F Generator would help connect the Fabric Museum to its audience? “By offering visitors the ability to craft custom logos, the museum fosters a personal connection through interactive engagement. Creative coding serves as a beacon of innovation, drawing the eyes of the tech and art sectors and enhancing the museum’s recognition. Meanwhile, the use of timestamps creates a living
digital archive, charting the museum’s progression and visitor engagement across a growing timeline.”
What is the core functionality of the F Generator? “The software’s core functionality encompasses two distinct modes: layering and animation. The layering mode offers visitors the ability to combine up to three layers of Fs, each with eleven sets of grid units and seven color palettes, and allows them to experiment with a multitude of combinations. The animation mode provides four sets of shapes mapped onto ASCII characters, enabling users to timestamp and export individual frames.”
When creating this project, did you use any applications you hadn’t used before? “This project marked my first encounter with Processing, a gateway to the world of creative coding that has become a significant focus of my work. The coding process was the most challenging part, especially since this was my first time using Processing and stepping into the world of ASCII art. I had to code every logo out in Processing, connect with controllers, map characters to animation and create software with multiple states. But the result was rewarding. I extend my gratitude to the professors and peers who helped me along this journey.”
