Project Origins & Inspiration

During my first week at ITP, I found myself skipping meals and disconnecting from meaningful food experiences – a stark contrast to my pandemic days of home-cooked meals alongside professional chef roommates. This experience led to my initial exploration of how "something is food only with respect to some other thing," documented in an earlier blog post examining food's inherently relational nature.

Initial blog where I first explore the idea

This investigation revealed how food exists within a complex web of relationships: cultural, social, economic, and personal. While the initial blog post explored these connections conceptually, I wanted to take this idea further by creating an interactive experience that would allow people to examine these relationships in detail.

I chose to focus on a single item – a chicken burger patty from Burger King – and trace its journey through various systems and identities. This seemingly simple food item becomes a lens through which we can understand the intricate networks that bring our food from farm to table.

The goal was to transform this theoretical framework into an engaging digital experience that would help users understand how a single piece of food simultaneously exists as a biological entity, economic commodity, cultural symbol, and technological product.

Design Considerations

After establishing the core concept, I needed to determine the most effective way to present this complex web of relationships and identifiers. The primary challenge was making a large amount of technical information accessible and engaging.

Looking at the data from the supply chain analysis, it became clear that a digital interface would be the most suitable medium for several reasons:

• The need to show multiple layers of information

• The ability to reveal relationships dynamically

• The possibility to navigate between different stages of the journey

• The capacity to scale from overview to detailed information

I began by mapping out the user flow, starting from the QR code scan to the detailed exploration of each stage. The flow needed to be intuitive while handling multiple levels of information hierarchy:

Information Architecture

Early wireframes helped establish the basic structure of the experience. I sketched out several key screens:

• A timeline view showing all stages

• Individual stage landing pages

• Detailed code exploration views

• Relationship visualization screens

Initial Paper Wireframes

The main design priorities focused on creating a clear hierarchy of information, enabling intuitive navigation between stages, showcasing relationships between different codes and systems, and maintaining visual consistency across various levels of detail.

Visual Direction

In developing the visual aesthetic for this digital experience, I sought to create an interface that would feel both futuristic and technically sophisticated while remaining accessible to users. My inspiration came from several key sources that helped shape the final design direction.

The primary influence came from science fiction interface designs, particularly those featuring technical readouts and data visualization elements. These interfaces typically employ bright, neon-like elements against dark backgrounds, creating a stark contrast that emphasizes the technical nature of the information being displayed. This aesthetic resonated with my project's goal of revealing the hidden technical systems behind our food.

Science fiction Interfaces

Bleximo's corporate design system provided insights into how complex technical information could be presented in a clean, modern format. Their use of card-based layouts and monochromatic schemes with strategic color highlights demonstrated how to maintain visual interest while handling dense information. The geometric elements and careful use of whitespace in their design influenced my approach to organizing the multiple layers of data in my interface.

The Afera app's minimal black and white aesthetic showed how sophisticated technical information could be presented on mobile devices without overwhelming the user. Their strong typography hierarchy and effective use of negative space helped inform my decisions about content organization and readability.

Other Inspiration for Interfaces

Drawing from these references, I developed a design system centered around a dark mode interface that emphasizes data visualization, employing monospaced typography for technical information and grid-based layouts for organized hierarchy. The design uses subtle animations for state transitions and maintains a minimal color palette with strategic accent colors to highlight important information and relationships.

This visual direction aims to create an experience that feels authoritative and futuristic while remaining engaging and accessible, helping users navigate through the complex web of relationships and identifiers that define our food systems.

Initial Prototype & Visual Changes

I first focused on establishing the foundation for the project by creating a robust data pipeline and basic visual interface. the goal was to successfully load the NYC Squirrel Census data from a CSV file, process it into a usable format, and create a simple but informative visualization that displays key squirrel characteristics. This stage was crucial as it sets up the data structure that will later drive the sound generation and creates an initial visual feedback system for debugging and development.

Initial for Interfaces

The initial design used a restrained palette of black text on white backgrounds, with subtle dotted lines and geometric shapes to create visual structure. This approach helped establish a clear hierarchy of information while maintaining readability. Each stage was represented by a distinct icon, helping users navigate between different aspects of the food system's journey.

However, while working on the project, I discovered an interface visualization that dramatically shifted my visual direction. The terminal-style display with its yellow frame, dark background, and network visualization captured the technical nature of the project perfectly.

Visual I was inspired by on Arena

This discovery prompted a significant pivot in the visual design. The terminal aesthetic, with its suggestion of accessing hidden systems and technical data, aligned perfectly with the project's goal of revealing the hidden identifiers and relationships in our food system. The combination of the dark background, monospaced typography, and the use of bright accent colors (yellow and cyan) offered a more compelling way to present the complex web of relationships between different stages and codes.

The contrast between these two approaches - from the initial minimal design to the more technically-inspired terminal aesthetic - helped refine the project's visual language into something that better served its conceptual goals.

Custom Dithering Tool

In developing the visual aesthetic for the project, I wanted to create a distinctive look for the imagery using dithering techniques. While this could be done in Photoshop, the process was time-consuming and didn't offer the precise control I needed. This led me to develop a custom dithering tool.

Initial P5.js Prototype

Initial dithering prototype using Bayers Matrix

The project began as a simple P5.js sketch that explored basic dithering concepts. This helped me understand the fundamentals of different dithering algorithms and how they could be applied to create various visual effects.

Dithering Techniques

I then created a locally running program that implemented three classic dithering algorithms, each offering unique characteristics:

1. Floyd-Steinberg Dithering: Distributes quantization errors to neighbouring pixels using a serpentine pattern

2. Ordered (Bayer) Dithering: Uses a predetermined matrix pattern to create a more structured effect

3. Atkinson Dithering: A balanced approach that prevents excessive darkening while maintaining good detail
   
   

Here is the pseudo code for the application I built :

// Main Program Flow
START PROGRAM
    Initialize canvas and controls
    Set up event listeners for user interactions
    
    WHEN user uploads image:
        Load image to canvas
        Display original and prepare for processing
        Enable download button
    
    WHEN user changes settings (pattern/threshold/palette):
        Clear output canvas
        Copy original image
        Apply selected dithering algorithm
        Display result

// Core Dithering Process
FUNCTION update_dithering:
    GET selected dithering pattern
    GET color palette
    GET image data
    
    SWITCH dithering pattern:
        CASE 'floydSteinberg': Apply Floyd-Steinberg algorithm
        CASE 'orderedBayer': Apply Ordered Bayer algorithm
        CASE 'atkinson': Apply Atkinson algorithm
    
    UPDATE canvas with processed image

// Dithering Algorithms
FUNCTION floyd_steinberg_dither(image_data):
    FOR each pixel in image:
        old_color = get_pixel_color(pixel)
        new_color = find_closest_color(old_color, palette)
        set_pixel_color(pixel, new_color)
        
        error = old_color - new_color
        DISTRIBUTE error to neighboring pixels:
            right pixel      gets 7/16 of error
            bottom-left     gets 3/16 of error
            bottom pixel    gets 5/16 of error
            bottom-right    gets 1/16 of error

FUNCTION ordered_bayer_dither(image_data):
    DEFINE 4x4 Bayer matrix
    FOR each pixel in image:
        threshold = (bayer_matrix[y % 4][x % 4] / 16) * threshold_value
        adjusted_color = pixel_color + threshold
        new_color = find_closest_color(adjusted_color, palette)
        set_pixel_color(pixel, new_color)

FUNCTION atkinson_dither(image_data):
    FOR each pixel in image:
        old_color = get_pixel_color(pixel)
        new_color = find_closest_color(old_color, palette)
        set_pixel_color(pixel, new_color)
        
        error = old_color - new_color
        DISTRIBUTE error (1/8) to six neighboring pixels:
            right, far-right
            bottom-left, bottom, bottom-right
            two-rows-bottom

// Color Processing
FUNCTION find_closest_color(target_color, palette):
    min_distance = INFINITY
    closest_color = null
    
    FOR each color in palette:
        distance = calculate_color_distance(target_color, color)
        IF distance < min_distance:
            min_distance = distance
            closest_color = color
    
    RETURN closest_color

Final Implementation

The final tool was developed as a web application with a focused set of features:

Custom Dithering Application built for Image manipulation

Key features include:

• Multiple dithering algorithm options

• Custom color palette support

• Threshold adjustment

• Real-time preview

• Batch processing capability

• Direct download of processed images

The tool significantly streamlined my workflow, allowing me to quickly process images for the project while maintaining consistent visual quality across all graphics.

Final Experience

After implementing the dithering tool and refining the visual design, I brought all the elements together into a cohesive digital experience. The final interface draws inspiration from vintage terminal aesthetics while maintaining modern usability standards.

Key Screens

Final Application with dithered images

The experience follows a clear progression:

1. Users begin at a minimal splash screen featuring the project logo

2. A timeline view presents all seven stages of the chicken patty's journey

3. Each stage expands to reveal detailed code identifiers and relationships

4. Individual codes can be explored with full descriptions and visualizations

Interactive Prototype

The interface emphasizes:

• Clean typography using monospace fonts

• Terminal-inspired black background with yellow accents

• Smooth transitions between states

• Clear information hierarchy

• Interactive relationship visualizations

Try It Yourself

Scan the QR code to explore the prototype on your mobile device. The experience is optimized for both mobile and desktop viewing, allowing you to trace the journey of a chicken patty through various systems and identifiers.

QR code with final application

Conclusion

This project transformed a simple chicken patty into a lens for examining the complex systems that define our food. What started as an exploration of food's relational nature became an interactive digital experience revealing the hidden identifiers and relationships in our food system.

The final exhibition piece bridges physical and digital realms: a chicken patty encased in resin, accompanied by a QR code. When scanned, viewers access an interface that unveils the multiple identities of this single food item across seven distinct stages, from financial instruments to environmental impact metrics.

Looking ahead, this concept could expand to include multiple food items, interactive physical components, or real-time data connections. The project demonstrates how food exists not just as sustenance, but as a nexus point connecting financial, biological, technological, and social systems, inviting us to reconsider our relationship with what we eat.

References

1. Claude by Anthropic

2. https://p5js.org/reference