About Food Ingredient Visualiser

Seeing Dinner Differently: Turning Ingredients into Art

The idea for my latest short project (let’s call it: ‘single’, following the music world), started where most good ideas do: at the dinner table. We were chatting about our day, and to explain something, I used food ingredients and data visualisation as my example - turning the explanation into a kind of art. My daughter, halfway through her pasta, looked at me and said, “It’s funny how everything you talk about ends up mixed with art or technology… or lately, AI.” She wasn’t wrong.

From kitchen table to code

I started experimenting with an interactive application that could visualise food ingredients (or components). Imagine a recipe for a spoonful of Nutella: what’s actually in there? - maybe protein, sugar, carbs, vitamins, etc. - and then how much of each? We now can make a visual composition where each ingredient is represented by different geometrical shapes and colours.

To get there I used Lovable.dev, I designed the prompt and then started to chat with the tool and it did all the coding behind it. It took a couple of commands and edits to get to this point, and I’ll leave it here for now, as I’m using the freemium and it has limited daily credits.

Lovable put together to app and it now has access to a real food database, so it can read and process the ingredients data and translate it into visual cues without any order or control. What is it for, you will ask? - Mainly for fun, but also with the idea that I’ll learn ingredients much faster if I associate them with colours, rather than just numbers and measures.

Why visualise food at all?

There’s something playful and revealing about seeing random food, or your dinner, abstracted into art. It reminded me of those Fantasia sequences where music came to life as dancing shapes and colours. Food has its own rhythm and personality too, of course, this is nothing new. A curry might feel like a jazz improvisation (spicy, spontaneous, layered), while a ham & cheese toastie is more like a clean acoustic song.

On the practical side, visualising ingredients makes proportions instantly obvious. You notice if a dish is 70% carbs, or a salad is secretly mostly sugar or minerals.

Right now, I see this as a toy or a tool for both creativity and awareness, something that allows me to see food in a new and different way that how it’s shown commercially. Almost everyone can understand when there is mora yellow shapes that blue ones, but for many is pretty difficult to understand the difference bet 1350g and 1.35kg and on. It’s early days, but the idea of turning what we eat into a visual data feels like a natural extension of how I already see the world: where technology and art, play together in everyday life.

App features: it’s responsive, light/dark mode, interactive (shapes are draggable) and nd lets you export and save the generated image.

You can try it out and play with it at the link below (works better in landscape mode). And if this project is something you want to get involved in or help develop further, definitely get in touch!

https://food-ingredient-visualizer.lovable.app/