Lesson Plan

Transmitting Other Data Types:

Collaborative Drawing, Mouse Events, Other data:

Notes

The Canvas

JavaScript 103: Objects and JSON

p5.js with Sockets

Assignments:

• [x] Improve on the example, send a different type of event to the server and to the clients. This could be a collaborative drawing program or a means to control other people's experience.

<aside> 💡 https://jz2450.itp.io/w3-handholding/

Screen Recording 2023-02-13 at 12.25.17 PM.mov

Longing for a little physical touch in cold cold corporate America?

I repurposed the example code from Shawn to make a little multi-user experience where you can hold hands with people from around the world. Get a little close to another hand and feel it start to tingle…

This one was definitely more involved on the client side for me. In terms of server side stuff I spent the most time configuring my server to serve multiple projects at once so that they all stay live. I did this by creating an httpserver.js file and running it from the root folder. The only thing I added to it for this week was a little w3mouse call, a unique call for this week’s assignment only.

I feel like my sketch was super convoluted, definitely could be cleaner and there are a bunch of foreach loops which I’m sure are not necessary. The biggest challenge was debugging for more than three users, and making sure three-way-handshakes are more than kosher. I did so by going through each potential match up and sorting by distance, then removing the coupled up hands from a list of all hands, singling out the single ones (sorry single people). I think it would have been so much easier to do an emit to all users rather than processing the user’s cursor individually. Maybe something to fix in the future.

</aside>

• [x] Email me your NetID and Digital Ocean Server IP and I'll setup YOURNETID.itp.io to point to your server. We'll need this done for next class so the sooner the better!

Class Notes

<aside> ✍️ to check whats using the port if node not working:

try lsof -i :80 | grep LISTEN

then get the process number to kill!

</aside>