I wanted to use FaceOsc and Processing to create something playful. So I decided to use the data I get from FaceOsc to simulate window fog. The intention was to simulate what happens when you blow on your car window on a cold day. The window fogs up when you open up your mouth (using the ratio of your mouth height to width) and the dimensions of the fogging are controlled by your distance to the camera. I then wanted to draw on the fog, so I used touchOsc’s xy-pad on my iPad. When you’re not blowing on the window, the fog and lines fade away.

A lot of the simulation of the fogging (aka randomness) is inspired from Matt Pearson’s 100 Abandoned Art project: http://abandonedart.org/ . As you open your mouth, the application draws a circle on top of the previous circle. Each circle is actually drawn as a shape with each point on the circle connected by smoothed lines. To create a more realistic effect, I randomized each x-y points around the circle. Figuring out the right parameters for the randomization and the right values took a little bit of time: making it look frosty but not too frosty. It took a little bit of time to also tweak the rate at which shapes were drawn and faded away. The biggest challenge was fading the fog away gracefully. Since layers/shapes are stacked on top of each other, when the combined opacity level for multiple of the shapes reach 255, they all merge into one. When that “255” layer fades away, the effect is of one big blob disappearing. To work around that, I first tried collecting all the shapes I had drawn and redrawing all of them at each frame. This was computationally intensive and too slow. Instead, I finally figured out that I could simulate the effect by just overlaying the shapes that I had collected during the fade, which works well enough.