Week 9 - Working with Databases, Final Project Discussion

screenshot-of-the-website

I have been thinking a lot about how the political discourse in this country has devolved into incendiary personal attacks and binary thinking. Social and traditional media companies wield connected technologies that serve to exacerbate the problem - instead of equipping citizens with the ability to confront the onslaught of information increasingly available, we are forced into camps in order to break up the chaos into easy-to-digest bites. If one does an honest assessment of the fear and uncertainty that is generated by the ever-changing social landscape, they can begin understand the worldwide shift towards authoritarian governments and the closing of borders.

So I want to run a small experiment in political discourse using some of the tech we have been presented with in class. I have made a prototype website that asks tough political questions in order to gauge the true opinions of a generally homogenous group of graduate students. In order to increase trust, the user data is recorded but anonymized. Once the survery is over, the user can see the results of their group and also delete their data if desired. The prototype is available now here - http://wpb245.itp.io:8089/index.html

Open the console by pressing ```cmd + option + i ``` and see your user ID and response data. This data is recorded on the server database.

Week 8 - Modifying Capture

This week I focused on trying to send a compressed snapshot of a canvas from the client to the server and have the server bounce that image back to the client to be drawn much smaller and replace the cursor at the mouse position. This small avatar image would replace the cursor and allow users of the site to know who was who while they played the musical game that I proposed at the midterm.

The site (with all its errors) can be visited here: https://wpb245.itp.io:8088/snapshot-export.html

I was able to get the canvas snapshot over to the server using our class notes. There I would store the image in an array according to the client’s socket id. The idea was then to emit that image out to the client and have ti be drawn to the canvas at the mouse position. I ran into a number of errors along the way which I will outline.

The first mod I made to the class code is that the client snapshots would be stored on the server in a folder called “userImages” with each client’s socket id as the file name. This way, a client can take a new photo until they are happy with the shot.

userImages-folder-demo.gif

Once this image was on the server, I was able to emit it back to the client in the same function as the image was received. The issue then was to draw that image on the canvas which is where most of the code broke down. I could not figure out how to properly store the image and draw it to the canvas.

I first tried to copy the same code from the server side surrounding the Buffer()object to the client side, where I got the following error:

Buffer-is-not-defined
browserify-logo-a-wizard-hat

This caused me to realize that the Buffer() object was a Node module. After some Googling, I found that it is possible to install discrete Node modules on the client side using the require()method as outlined in this Github repo from Feross Aboukhadijeh coupled with a package called Browserify, although I was not able to implement this directly. Here you can see the errors I got after trying to require(buffer):

more-buffer-errors

So after abandoning this method, I was able to get the snapshot back to the client, but kept getting errors when trying to draw the image that I received to the canvas. Here is my socket function on the client side to receive the image without the Buffer() object included.

last-try-on-receiving-the-image

And here is my trying to draw it to the canvas which returned the subsequent error:

drawImage-function-failed
drawImage-console-error

SOLVED IN CLASS: Since we receive the pic as a data url from the server, we can just set that url equal to the src of the snapshot <div>, and it all works! We do not have to strip off the data url like we do on the server side. See below:

Screen Shot 2019-10-30 at 1.07.49 PM.png

Week 6 - Midterm Project Idea

I am wanting to expand on my Interactive Chords sketch by adding video snapshots for each user to identify themselves and then make a way to orchestrate the users to play a song together. I imagine some Guitar Hero-style interface where the users must move their mouse to the incoming note, but they should also try to balance themselves out so that too many people don’t get stuck in one place before the next note comes. Then they could try to move the mouse to hit the note targets as the song progresses.

I could also act as a super-user conductor to direct the players to areas on the page where the notes will need to happen. One issue of course will be timing since music is so dependent on rhythm. Below is a quick prototype of the notes moving by and a link here to the code.

interactive-prototype-of-3D-musical-notes

week 4 - Xaoh Socket.io Library (presentation)

Eric Weinstein said recently in a podcast that there is a part of us that is dying to be seduced and sold something, an illusion. Our team got really interested this week in these and how we might do something similar with our presentation, given the expectation of a live video broadcast. There are other examples that we see in our daily lives that we don’t really think twice or complain about. So we sought to explore that and spark a conversation in class.

But is he really there?

But is he really there?

week 3 - Interactive Chords

Let’s play a song!!

interactive-chords-p5-sketch

I made an interactive musical web page where users can build chords by placing their mouse over the designated notes. I thought it would be fun for multiple users to login and play the chords together. And in doing this, I began to understand the limits of synchronous programming.

So I started with this p5 sketch and met with Shawn to help port it over to work with my socket server. The end result works ok on it’s own - try it out!!!

The problem is that as soon as new users login, it gets a bit squirrelly trying to get through the draw loop. So I sat down with Cassie and she showed me some ways to create this sketch again using a for loop of <div>’s with class ID’s for hovering events and such. Here is what she showed me. This will work much better when more users are on.

Week 2 - Chat Server

I modified the chat server example Shawn gave us here. I started with an animated “Loading…” message which is obviously superfluous, but I dug it in a 90’s kind of way. This builds anticipation and gives the impression that something significant is happening/has happened. It’s based on a number of <code>setInterval()</code> loops and end with a <code>clearInterval();</code>command after a certain number of loops and a callback function to trigger a “Welcome” message.

The “Welcome” message is a short line and a fun bit of Beavis and Butthead ASCII art. I loaded this <code>.txt</code> from the server using the <code>ajax.js</code> example that Shawn provided and had to use the <code><pre> </pre></code> tag from this Stackoverflow disucssion around the ASCII art in the text file to get the format right.

I also wanted to track user names, which I was able to do based on the <code>socket.id</code> value in the <code>server.js</code> file. Cassie was able to help me troubleshoot my issues with sending the <code>socket.id</code>. I did not realize that I needed to kill to server process on my droplet in order to upload a new <code>server.js</code> file. I was under the impression that it acted the same as uploading a new <code>index.html</code> file. So I would see the changes on the front end, but nothing would change on the back end. Cassie showed me the <code>ps -aux</code> bash command which lists all the running processes on my server. From there we used <code>ps -aux | grep “node server.js”</code> to get the process ID of the running server and then killed it with <code>kill -9 "<process id>”</code>. This was very helpful as I had been making changes and not seeing any results!!

So now when a new user sends a message, their <code>socket.id</code> is prepended to it. I would like to give users a way to enter a user name and have it be stored to their unique <code>socket.id</code>, but I didn’t have enough time before class. Cassie suggested creating a <code>const userList = { };</code> object and having the user input their own username and store the value in a key/value pair as <code>userList[socket.id] = “<username">”</code>.

Week 1 - Self Portrait

A self-portrait can be many things. Indeed we are many things. I myself wear a number of different hats in any one day, and my identity is an amalgamation of many sub-personas that I have worked to integrate throughout my life. Some of these personas I loathe and some I cherish. They are all here nonetheless.

I had a bit of fun with this. I was able to get some interactive elements with video, changing on click and showing and hiding different videos. Although I wasn’t able to get the exact interaction I wanted, I like the cacophony that ensues as the videos fail to pause and play as intended. You can view the “piece” here - https://billythemusical.github.io/live-web/week-1-self-portrait/

twitch_474x356.png

Live Online Platform - As far as a live web platform to check out, I really like Twitch. It’s a place where people go to watch other people, called streamers, play video games live. It is an incredibly robust platform with hundreds of games to choose from like World of Warcraft, Fortnite, PUBG, League of Legends, Call of Duty, and NBA2K. There many thousands of streamers, all playing live at any time of day. Some of the biggest streamers have upwards of a hundred thousand viewers each time they go online.

Follower-ship is balanced on a sliding scale between skill and showmanship. One of my favorite streamers is DrDisrespect - an uber-macho RPG player who sports a real mullet, Oakley-style sunglasses, and a thick mustache. He explodes with loud grunts and profanities when he gets a win and talks tons of crap, even when playing alongside very young competitors (I think the site is limited to those over age 13). When “Doc,” as he’s affectionately known amongst his followers, goes online, there are thousands pouring in to the chat stream, which runs live with each broadcast.

Since streamers can garner so many followers, there’s a large sponsorship and advertisement network attached, and it is estimated that the top 10 gamers garner over $20 million/year between them (source). While logging on to Doc’s stream today, I saw an ad beforehand which had the caption “This Ad Goes To Support DrDisrespect” which I thought was interesting. These streamers are basically afforded their own broadcast network. And the professional gaming industry is fast-growing industry, not only in an online context, but in actual live events where attendees can watch their favorite players and teams compete in the flesh.

The site’s tag line is “Don’t just watch, join in”:

Welcome to Twitch. We are a global community of millions who come together each day to create their own entertainment: unique, live, unpredictable, never-to-be repeated experiences created by the magical interactions of the many. With chat built into every stream, you don’t just watch on Twitch, you’re a part of the show.