Software: Processing
Pixels are the fundamental building blocks of bitmap images and digital displays. Conventionally, pixels are square, uniform, and parked in a static Cartesian grid. Challenge these assumptions by writing code to reconstruct an image using custom picture elements of your own choosing. What if pixels were hexagonal? Could they be arranged on an irregular lattice? What if an image was itself constructed from fragments of other images, or from a database of tiny icons, symbols, or emojis?
This project will employ an outside data source: images (photographs, drawings, etc.), video, text (qualitative or quantitative data), or sound files and timers to produce transformations in that data. With your piece, consider the connection between your data and how you are using and interpreting it. This work should have a critical standpoint – that does not mean it has to offer a judgment or assessment (positive or negative) but rather that it makes visible things that might otherwise be hidden or not considered or taken for granted.
Starting point:
Utilized project brief for initial inspiration and ideas
Had utilized API keys in data science courses and wanted to apply them outside of machine learning
Inspired by others’ use of text in prior creative coding projects and in textile pieces
Liked concept of extracting real-time data for commentary and integrating data into art
Ending point:
Recreated Met Gala red carpet looks using headlines (text) as pixels
Used API key to fetch headlines about fast fashion/(un)sustainability
API queries included: "textile waste", "ethical fashion", "unsustainable fashion", "textile", "child labor", “greenwashing”, and “microplastics”
Used pixel colors from original image for imported text with decreasing font sizes to refine image clarity
Modifications in between:
Initially wanted to fetch news headlines in real-time to recreate images, but found formatting to fit frame was too challenging and many articles were irrelevant
Originally hoped to have text appear from left to right across canvas to show text as headlines more clearly, but formatting line break points was difficult so implemented incremental font change instead
Plot from k-means cluster using API key
Love, Robert Indiana (1966)
Pixel text source (.txt file containing 20 news headlines)
News headline results for “fast fashion” API query
After
Blake Lively, 2018 Met Gala ("Heavenly Bodies: Fashion and the Catholic Imagination")
Before
After
Rihanna, 2015 Met Gala ("China: Through the Looking Glass")
Before
After
Kim Kardashian, 2021 Met Gala ("In America: A Lexicon of Fashion")
Before
Shapes, colors, and overall imagery were directly taken from real images of celebrities at the Met Gala; I chose the Met Gala because of its well-known significance in the fashion industry
Text was taken from headlines from multiple API queries ("fast fashion", "textile waste", "unsustainable fashion", "child labor", "greenwashing", "microplastics", "Shein", "Primark", etc.) from NewsAPI.org and placed in Old Standard TT Bold font to emulate newspaper headlines
I chose headlines about the unsustainability of fashion practices to encourage viewers to reconsider fashion pieces from a different perspective, namely how their production impacts the environment, who made the piece (and were they compensated), and what happens to the pieces once they have been worn
After fetching headlines, I manually put words in all-caps that stood out to me as being most aggressive and critical for emphasis
I chose to have the text decrease in size iteratively to encourage viewers to read each headline before zooming out to show the fashion piece once the headlines are no longer legible
Knowing what these images are assembled of, viewers are confronted with the disturbing reality that many of the beautiful pieces worn by these celebrities are contributing to large-scale environmental pollution and waste (and they might be too)
Initial layout for each image
Allow user to fetch headlines in real-time using API key by typing in a query of their choice
Randomize the starting point of each line of text as opposed to starting evenly on each headline title (or allow headlines to wrap from the previous line without going offscreen)
In addition to placing specific words in all-caps, enable words to be placed in different font sizes for emphasis and attention, meaning each word would change size on its own scale
Allow headlines to appear on the screen from left to right as though they are being typed in real-time as opposed to presented all at once upon program run
Enable user to select reference images that are portrait as opposed to landscape format only
This project was one of the smaller weekly projects we completed during my study abroad course in Vienna about creative coding. However, despite being a “smaller” project, it was my first time integrating my programming knowledge with my design knowledge so closely, allowing me to achieve my goal of creating a visual image out of data/digital information. I was also the only person in my course who chose to use an API to source data as “pixels” for their project, meaning it was up to me to do the proper research on how to fetch data on topics of my choice using a software I had only been using for two weeks (Processing). Despite having its challenges, I was extremely satisfied with the final product and believe it not only achieves the product goals but also encourages viewers to actively think about what they are seeing, even after the image has changed or the program stops running. In this way, it was quite meaningful to see how data and design can be used to drive forward positive social change and leave a lasting impression on those who interact with your work.