Food Spectrogram

The brief

My flatmate cooked almost every night. I would be at my desk with my headphones off and the flat would fill with this steady, unhurried sound: oil starting to move, a knife finding a rhythm on the board, a lid going on, the long quiet stretch where something is left alone to cook. It was delicious and it was soothing at once, and those two things do not usually sit together. After a few weeks I noticed I was listening to cooking far more often than I was watching it, while every piece of food media I could think of was built the other way round. Recipe videos, mukbang, restaurant reels: the camera points at the plate and the sound is garnish. So I turned it over. Instead of watching someone cook, what if you watched the frequency? Built during Unit 7 of an exchange programme at Chelsea College of Arts, University of the Arts London.

The challenge

The first version drew live, reading the spectrum once per animation frame while the clip played, and that broke it in two ways. The rotation advanced by a fixed amount per frame assuming a steady 60fps, so on a laptop running at 30 the disc only got halfway round before the audio ended: the poster was a by-product of frame rate, the same recording gave a different result every time, and there was no way to get a specific one back. And the disc had no structure. Frying, chewing and room tone are broadband noise, putting energy into every frequency at once, so a raw spectrogram of them is a solid wash. It looked like something, but you could not point at part of it and say what happened there.

How I ran it

1. 01Moved analysis off the clock: the file is decoded and run through a Hann-windowed 2048-point FFT into 1440 slices before anything is drawn. Same file in, same poster out, on any machine. Playback became optional theatre rather than the mechanism.
2. 02Subtracted a noise floor per frequency band, measuring the level each band sits at most of the time, the hiss of the room and the rumble of a fryer, and removing it. What is left is events: the sizzle, the bite, the clatter. This is the change you can actually see.
3. 03Separated rendering from analysis so the same poster can be drawn at any size, which is what makes the print export real rather than a screen grab.
4. 04Stopped the disc rotating as it drew, so time now reads clockwise from twelve o'clock and every file is oriented the same way.
5. 05Set the headline to fill the measure so a series hangs together, with limits: above 104pt a short title opens its letter-spacing instead of growing, below 52pt it breaks to a second line balanced by width, and a block-height ceiling scales everything down before it can reach the disc.

What I managed

• Concept & art direction
• Audio analysis (FFT)
• Typographic system
• p5.js build
• Print export pipeline
• Poster series