Mosaic Recipe Tool

This tool was developed through creative coding in p5.js as a digital response to an old recipe, inspired by a Digital Design workshop with the Otherway studio. The project explores how food, colour and interaction can come together to make cooking feel more playful, visual and shareable.

The tool translates live camera footage or uploaded images into a motion-responsive mosaic grid, extracting colours from the image and reassembling them into a dynamic geometric composition. Rather than simply documenting a recipe or food image, it transforms it into a decorative digital surface, where colours shift, move and become part of a new visual language.

The concept treats colour as an ingredient and the screen as a cooking surface. Images of food, ingredients, recipes or everyday moments can be sampled, mixed and rebuilt through a grid of triangular forms. This creates a playful connection between the sensory experience of cooking and the systems-based logic of digital design.

Originally rooted in recipe-sharing and the desire to make people fall in love with cooking, the tool can also be applied to any image as an interactive visual system. It allows users to turn personal photographs, food memories or visual references into colourful mosaic compositions that can be saved and shared. The final outcome sits between graphic design, creative coding and social media, using interaction as a way to make digital image-making feel more tactile, joyful and alive.

 

A person holds a phone showing a mosaic-style image transformation above a table with a pizza and cutlery.
Mosaic Recipe in Use

The Mosaic Recipe tool in use, translating a food image into a playful colour-based mosaic composition.

A plate of Scottish breakfast transformed into a colourful triangular mosaic pattern by a digital design tool.
Mosaic Recipe

A Scottish breakfast on a plate transformed through the Mosaic Recipe tool into a colour-based triangular mosaic.

A stylised triangular mosaic generated from an original photo of a cocktail, created using the Mosaic Recipe tool.
Mosaic Recipe

The photo of a cocktail transformed through the Mosaic Recipe tool into a geometric triangular mosaic.

A plate of hummus with greens transformed into a triangular digital mosaic using the Mosaic Recipe tool.
Mosaic Recipe

The original photo of a plate of hummus with greens transformed with the Mosaic Recipe tool into a colour-based triangular mosaic.

A cheese platter transformed into a triangular digital mosaic using the Mosaic Recipe tool.
Mosaic Recipe

The original photo of a cheese platter is transformed through the Mosaic Recipe tool into a colour-based triangular mosaic.