Christina Elizabeth Hall

Final Project: ICM

Dating Stories: An Interactive Film

For my final ICM project, I decided to combine my PComp and ICM finals to create an interactive, nonlinear film.

Dating Stories: An Interactive film is a comedic, ‘choose your own adventure’-style narrative created for adults. The lead actress in the film, Christine, has two choices from her search on a popular dating app: will she go on a date with Douglas or Jared? Ultimately the individual observer gets to decide. By using the physical, interactive board, the observer has the ability to choose what path the date goes on in the film by moving the wooden piece from node to node. Their choices and full narrative are executed on the screen in p5.js.

Here is what the physical board looks like:


And here are some stills from the film:

1-jared-setup-00_00_40_29-still002 2b2-douglas-movie-good-00_00_27_13-still001

At certain points in the film, the viewer will see a split screen that gives them the opportunity to decide what the direction of the film goes in


This project comprised of filming the media, fabricating the board, programming the arduino from the physical interactions, and coding the the responsive media in p5.js.

What I learned from this project
  • How to use a development server
  • How to correctly work with the P5 IDE & git
  • How to effectively use the developer console. CMD + OPT + J all day

I really enjoyed having the opportunity to combine my final project for both ICM and Pcomp. Having the opportunity to use the tools form both of these classes really helped to pull this idea together.

I am hosting the p5.js and Arduino code on Github. Here is the location for the Dating Stories code.

ICM + PCOMP final proposal


I am really interested in creating a non-linear story that gives the user the ability to choose what happens in the story, ultimately affecting how the story is told.

Below is what the installation will look like for the user:




As for a title, I was thinking something along the lines of “London Effect”.  I haven’t finalized this, and need to discuss it further with my partner.

Roy London has a method of acting technique that I studied in the past for many years. Where the choice of the actor as to what they were to do next in the scene was driven by impulse, as long as it works within the context of the story and scene. Instincts are a very important aspects in this type of acting and when a user interacts with this installation, I want them to be forced to quickly choose the direction of the story moving forward to then dictate how the end of the story will be.

Brightness Theremin


Since starting at ITP, I have really enjoyed creating different musical instruments.  In physical computing, I created a theremin and I was excited to try to attempt to create one in p5.js.

This past week we were working with sound and video, so I felt like this was an appropriate class to work with webcam input to create a sound.  My sketch is compiled of a oscillating sound that changes the frequency when your hand gets closer to the webcam. The sketch is is ultimately using brightness to change the frequency and the background color.

As your hand gets closer to the webcam, the brightness of your hand increases the frequency. If you completely cover the webcam, allowing no light to pass, the tone stops.

I worked with Shiffman’s video about a brightness mirror that detects individual pixel brightness and this sounds oscillator example in the p5.js references to create this sketch.

Here’s the sketch.

And here is the code:

var video;

var vScale = 16;

var cols = 48;
var rows = 64;

var osc;
var fft;

function setup() {
 video = createCapture(VIDEO);
 video.size(cols, rows);
 osc = new p5.Oscillator();
 fft = new p5.FFT();

function draw() {
 var bright = 0;
 for (var y = 0; y < video.height; y++) {
 for (var x = 0; x < video.width; x++) {
 var index = (video.width - x + 1 + (y * video.width)) * 4;
 var r = video.pixels[index + 0];
 var g = video.pixels[index + 1];
 var b = video.pixels[index + 2];
 if (r && b && g) {
 bright += ((r + g + b) / 3);
 bright /= (cols * rows);
 background(bright/2, bright, 255 * log(bright));
 osc.freq(bright * 3);

var waveform = fft.waveform(); // analyze the waveform
 for (var i = 0; i < waveform.length; i+=100) {
 var w = map(i, 0, waveform.length, 0, width);
 var z = map(waveform[i], -1, 1, height, 0);
 vertex(w, z);
 ellipse(w, z, 20);

Data Visualization


Using the tools we have already learned, we were asked to create a data visualization from sources data either from previously collected data or from an API.

A topic that I’m particularly interested is climate change. With that in mind, I wanted to incorporate a visual in my project that depicted the rise of CO2 in the atmosphere.

I initially started working with tabular dataset, and quickly decided that it try to move to data that would be easier to work with.  I found a resource that sources JSON data and everything came together nicely after that ;).

Here is the very simple sketch that I create for this concept.