Brandon Roots
  • INTERACTIVE
  • FILM
  • ABOUT
  • CONTACT
June 29, 2021

Final Project Update

broots ITP, Live Web

This week I continued work on my final project for Live Web. My goal was to integrate Socket.io into an existing P5.js sketch I created in The Nature of Code to enable multiple users on the same canvas.

After our earlier assignments in Live Web adding the basic Socket.io server code to the P5 sketch was simple enough. For my initial setup all users are peers on the same page. In order to reduce the workload on the server the user who has the oldest socket connection is dynamically assigned by the server as the “controller” of the planet array.

// Planet controller
if(users[0].id == socket.id){
	var data = true;
	socket.emit('planetController', data); //you are the first socket
} else {
	var data = false;
	socket.emit('planetController', data); //you are not the first socket
}

socket.on('disconnect', function() {
	console.log("Client has disconnected " + socket.id);
	io.emit('peer_disconnect', socket.id);
	for (let i = 0; i < users.length; i++) {
		if (users[i].id == socket.id) {
			users.splice(i,1);
		}
	}

	// Update planet controller
	// First make sure a user is connected, otherwise server will crash
	if(users.length > 0){
		var data = true;
		users[0].emit('planetController', data); //you are the first socket
	}
});

The “controller” emits a planet array on a designated interval that is broadcast to the other users, currently every second, that is then applied by all other users.

Sorting out what data to send as the planet array took some troubleshooting. My initial attempt at emitting the array of planet objects resulted in an error in the Javascript Console:

Wrapping the array in JSON.stringify() lead to another error:

Manually looping through the necessary variables in the planet array lead to:

function emitPlanets() {
  if(planetControl && planets.length > 0 && fpsCounter == 1){

    var planetArrayTemp = [];

    for (let [i, planet] of planets.entries()) {
      var planetTemp = [];
      planetTemp.push(planet.scale);
      planetTemp.push(planet.pos.x);
      planetTemp.push(planet.pos.y);
      planetTemp.push(planet.vel.x);
      planetTemp.push(planet.vel.y);
      planetTemp.push(planet.acc.x);
      planetTemp.push(planet.acc.y);
      planetTemp.push(planet.mass);
      planetTemp.push(planet.r);

      // Need to handle sound variables too!!

      planetArrayTemp.push(planetTemp);
    }
    console.log('Emitting planet array')
    socket.emit('planets', planetArrayTemp);
    //console.log(planetArrayTemp);
  }
}

Which works!

There is still some optimizing to do, but the main functionality is there!

Final Project Proposal Final Project Presentation

Related Posts

Fractal Plant – Foiled by  Registers

Homemade Hardware, ITP, Solar Plant

Fractal Plant – Foiled by Registers

Since receiving the PCBs and successfully soldering the board together I have been trying to rewrite code for the I2C port expander. This has been immensely difficult! The Inkplate Arduino Library makes considerable use of an “Mcp” class, which is written to work with the MCP23017 GPIO expander IC. These chips are quite difficult to […]

“Handling” Playtest Week

Handling, ITP

“Handling” Playtest Week

Last week we attended “Playtest Thursday” on the second floor of 370 Jay St with our games. I came away from the experience with some very specific feedback. Seeing a number of people play the game showed me things I didn’t anticipate. Some folks approached the cabinet and immediately treated it as a touch screen. […]

Fractal Plant – Beta Build

Homemade Hardware, ITP, Solar Plant

Fractal Plant – Beta Build

The boards arrived! Amazingly within an hour of one another. Based on the experience I think that JLCPCB is a better value. With shipping OSHPark was $55.50 for 3 boards. JLCPCB was $26.36 for 10 boards. Aside from a higher cost OSHPark also left sharp bits of tabs around the edges of the boards which […]

Recent Posts

  • Fractal Plant – Foiled by  RegistersFractal Plant – Foiled by Registers
    May 9, 2022
  • “Handling” Playtest Week“Handling” Playtest Week
    May 5, 2022
  • Fractal Plant – Beta BuildFractal Plant – Beta Build
    April 24, 2022
Brandon Roots