A real-time face filter built with code where typography responds to your face, with clay sculptures and a poster alongside it to make coding feel like craft.

Interactive Face Filter

• Self-initiated project combining creative coding and physical making

• Build an interactive face filter using p5.js

• Make code feel approachable and tactile to a non-technical audience

• Include a teaching element: a poster explaining coding logic visually

• Make clay sculptures that physically represent coding block structures

• Exhibited in class with live audience participation

I designed the words in Illustrator first, giving them a 3D effect, then used code to make them into a real-time interactive face filter. The filter changes the word displayed when you move your mouth, and by a click of a button you can also switch to another filter variation. I also designed a poster to teach people to understand coding logic visually, and made clay sculptures that imitate the structure of coding blocks. The clay and the code sitting next to each other was the point. It was exhibited in class with participants actively trying the filter.

Seeing people interact directly with something I had built from code felt completely different to showing a finished design. The project made me realise that creative coding is just another material to work with, and that the most interesting things happen when you treat it the same way you would treat clay or paper rather than as a purely technical skill.

Coding has a reputation for being abstract and difficult to access, especially for people from a visual or craft background. I wanted to challenge that by making a project where the code was something you could see, touch, and play with in real time.

My task was to design and build a face filter from scratch using p5.js, and to wrap it in a wider project that helped an audience understand the logic behind what they were interacting with, without using technical language.