Final Project Journal


My idea for my final project is to see if I can create a system that allows for someone’s mobile devices to become a pixel in a light show. The idea is currently intended only for implementation in a seated venue, as it would ask the user to input their seat row and number in order to determine which pixel the phone should represent. The main challenge that I see myself facing is figuring out how to allow multiple phones to access the same pixel information and controlling for latency.


This week I began getting node.js under my belt just by following Shiffman’s tutorials. So far I got a localhost server running on my computer and managed to get an older p5.js sketch running.

Final Result

I have a working demo locally on my computer! I was unable to get a hosting platform up in time that supported Node.JS, so we won’t be able to demo on people’s phones as I had hoped, but I’m pretty happy with this proof of concept so far.

So the way I have structured it is that the Node server sends a master clock to all the clients. When a client is loaded, it prompts the user to enter a pixel number. Once the pixel number is set, the animation begins, using the master clock as a framerate to drive the pixels.

Here is the Node code:

var express = require("express");

var app = express();
var server = app.listen(3000);


console.log("My socket server is running.");

var socket = require('');

var io = socket(server);

var start =;

io.sockets.on('connection', newConnection);

function newConnection(socket) {
	console.log('new connection: ' +;

function timer() {
	var delta = - start; // milliseconds elapsed since start
    socket.broadcast.emit('milli', delta);

setInterval(timer, 50);

And here is the p5 code:

var input, button, greeting, pixel, socket, frame, delta;

function setup() { 
  createCanvas(displayWidth, displayHeight);
  colorMode(HSB, 360, 100, 100);
  input = createInput();
  input.position(20, 65);

  button = createButton('submit');
  button.position(input.x + input.width, 65);

  greeting = createElement('h2', 'What pixel are you?');
  greeting.position(20, 5);

  socket = io.connect('http://localhost:3000');
  socket.on('milli', framerate);

function draw(){
    fill(counter(pixel)*12, 100, 100);
    rect(0, 0, width, height);

function greet(){
  pixel = int(input.value());  

function framerate(delta){
   frame = ceil((delta/55)) % 30;

function counter(x) {
  var count = (frame + x) % 30;
  return count;

And here is a video: Video

Written on November 15, 2017