CC Midterm Project

With two classmates, I made a frightening physical photobooth experience for Halloween. Under a cloth tent, you crawled in and put your head through a cardboard cutout of a clown. On the screen of a laptop in front, you saw yourself through a creepily-filtered tint, with the facial features of the Joker overlaid. Words you said aloud were transcribed (with the Web Speech API) live onto the photo’s caption, but your audio was played back at the same time through the headphones, distorted and echoing. The experience was completely overwhelming, with a bright blue light shining in your eyes, creepy, reactive, laughing noise playing in the headphones, and the wild screen experience, all in a dark, enclosed space. You could click an onscreen button to capture a photo of yourself, enter your email address, and have it emailed to you.

Lachlan Campbell, Sydney Hu, David Yang. On display: ITP/IMA Halloween Show, Fall 2019.

Photos

App

Here’s the app itself, to try in your browser:

I wrote the majority of the code for the project, using p5.js and a separate Node.js service for sending the emails.

Project log

October 24

In class, we checked in on our progress on the web interface, but mostly prototyped our physical installation. The website still needed significant work, such as filling the screen with the camera without stretching the video feed, and integrating the sound work Sydney did in another codebase. But we decided that since we were physically together in Brooklyn, we went up to the installation space to plan. At first we wanted to use the space under the stairs, but opted for the space at the corner of the room next to the entrance pillar instead. We considered various options for hanging the cloth, installing the monitor/camera, and made a materials list.

My primary task before our next meetup was to redesign the web interface.

October 28

I pushed the website forward significantly today, completing most of my tasks. I switched the entirely-p5 approach out for a static HTML & CSS page, using p5 only for the video feed, and added jQuery like it’s 2009 for simple interactions. This proved much better for the UI I wanted to design, because I had a full toolbox of CSS. I replaced the live caption text with HTML, asking it to poll more frequently so the interface would feel less sluggish, and added a Capture button, styled like that of the iconic iPhone Camera app, with mouse action micro-interactions (custom hover/active animated states), and a flash effect. The capture used html2canvas and downloaded a file to your computer.

November 1

I wrote a Node service for uploading the photos and emailing them to users, using Nodemailer and Amazon SES. On the frontend, I switched out the file download for a prompt for your email address and making a request to the email service.