TasteBytes: A Visual Food Journey

I am a traveler and food lover; my most vivid memories of cities like Kyoto, Suzhou, and Istanbul are tied to the food I have tasted. However, a photo of a dish rarely captures the dynamic, immersive experience of tasting it. This sense of loss inspired me to create TasteBytes: I wanted to capture the “digital soul” of food without relying on literal visual representations or sound. My main design inquiry was the following: How do we render the multi-sensory, subjective experience of eating into a cohesive, interactive visual language? In response to this, I delved into the concept of synesthesia—combining sensory inputs with each other through code. Using p5.js and HTML DOM objects, I created an interactive digital dining plate. I mapped three fundamental food parameters onto generative visual outputs: Taste is mapped to a highly curated palette (from sweet pinks to spicy, high-contrast reds); Temperature determines the kinetic energy and velocity of the particles; and Texture determines the geometric complexity, smoothly transitioning between sharp triangles and soft circle forms. These variables can be mixed manually by the user using sliders or by choosing travel memory presets, such as Xinjiang Kebab or the Matcha Smoothie. The most important lesson of this prototyping exercise was how to bridge a front-end UI with a generative canvas. Technically, I learned how to manipulate arrays, use boundary-detection math, and use custom shape functions to control hundreds of particles at once. Theoretically, I learned that data mapping does not simply involve math, but is also an artistic decision. A spicy kebab must not be merely red; it requires chaotic and fast-paced movement to truly feel spicy. TasteBytes ultimately proves to be an effective, expressive medium for translating human senses into interactive art using code.