Final Project Journal

Concept

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.

Updates

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);

app.use(express.static('public'));

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


var socket = require('socket.io');

var io = socket(server);

var start = Date.now();

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

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

function timer() {
	var delta = Date.now() - start; // milliseconds elapsed since start
    socket.broadcast.emit('milli', delta);
    console.log(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);
  //frameRate(14);
  
  input = createInput();
  input.position(20, 65);

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

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

  textAlign(CENTER);
  textSize(50);
  socket = io.connect('http://localhost:3000');
  socket.on('milli', framerate);
} 


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


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

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

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

And here is a video: Video

Written on November 15, 2017