Live Web Wk5: Midterm Concept

Objective: My goal is to visualize the phenomenon of color and pitch frequency. Since both pitch and color use frequencyI aim to show the correlation between the two.

Interaction:
a.) On the “learn” page, when a person clicks/hovers over a section of color, the wavelength of the color will show up and the associated pitch will also be played. For example, if the person hovers over the red section, the pitch played will be lower because red has a lower frequency. This also means a longer wavelength.

b.) There will be another “playground/drawing” page where people click to create wavelength lines. When the person selects a color, the person will be able click to draw that color’s wavelength. The associated pitch will also play.

191009_liveweb_midterm_concept

Understanding Networks All Wk: Reading Notes

Live Web Wk 5: WebRTC – Peer Garden!

Try it out: https://el3015.itp.io:8085/main.html

Code here: https://github.com/emilylin-itp/live-web/tree/gh-pages/wk5/wk5_peergarden

For this assignment, I focused mostly on just trying to understand how peer js and socket.io could work together. The functions I wanted to achieve were: a.) show my/users’ personal peer id, b.) be able to send the peer id of the other user via socket when the user “joins” the garden, c.) display the video stream to other user.

There are some logical mistakes in what I ended up with though. First of all, if you are the last person to join you would not see any one else’s live stream. There needs to be a way that once you join the garden you can see everyone who is in there. Not sure how I would do this exactly, but something to look into. Treated this more as socket + peerjs practice then as a project that is conceptually sound.

Questions:

  • If Peer to Peer/Web RTC is in between UDP + TCP, then what is an example of a a communication/app that is using completely UDP?
  • Having issues with getting this “run your own peer server” to work: https://itp.nyu.edu/~sve204/liveweb_fall2019/peerserver.html
  • Why can’t I appendChild for my video into a div? Following the syntax but not working…
  • Why won’t the setAttribute or className(‘class name’) work on my video in the client side js?
  • Why won’t this add the class ‘ovideoStyle’? Below doesn’t work…
    document.gvideoContainer.appendChild(ovideoElement, 'ovideoStyle');

References mentioned in class: 

Helpful resources:

Live Web Wk 4: GIF Chat!

Live website:
https://gifchat-el.glitch.me/
https://el3015.itp.io:8083/index.html

Code: https://github.com/emilylin-itp/live-web/tree/gh-pages/wk4/20191006_gif_chat

Note: still a WIP, need to work out the css/responsiveness bit. Also have to figure out why the camera + username input doesn’t work once I run it on forever in the terminal. In general, I need to learn how to properly add the SSL certificate to my express server. I went back to using the http request server so I could add the certificates, but it doesn’t always work?

Credit: Biggest thank you to super helpful resident Dan for helping me getting set up on glitch as a solution for the security issues I’ve been stumbling across! Will figure out security stuff, but am really digging glitch so far!

For this week’s assignment, Tushar and I decided to develop our gibberish chat project from week 2. Instead of chat messaging between 2 people, we wanted to allow the pair to send gifs to one another. Not only gifs, but gibberish gifs. Initially we had sought to mess with the base image text to create glitchy gifs. However, we didn’t get to it in time. Making a javascript gif turned out to be complicated enough.

I focused on integrating the socket room partnering code with our new gif code, html+ css, and trying to get the images to be displayed as frames. So every time I clicked the image would be stored in the array. Then the images would be displayed as animation frames using “appendChild” function. Tushar worked on the code for making it into a gif and sharing the gif via socket.io.

This time around, I wanted to use bootstrap (just a personal goal to try to make more responsive designs). But I think this messed things up a bit – it became a mess when really it shouldn’t have been. Need to spend more time make it look like the current version but without the bootstrap. Overall, coding this was a good time!

Questions: 

  • The moment I run “forever start server.js” the communication between the sockets are gone! The username doesn’t show up for the other persons and the gif also doesn’t appear. Why does this happen when I run it forever, works fine when I run node server.js?
  • How can I add the SSL certificate to my express server and still use socket.io.  Followed this: https://hackernoon.com/set-up-ssl-in-nodejs-and-express-using-openssl-f2529eab5bb, but it still didn’t work. I had to change my express to be https server.

Helpful Resources:

Joy and Games Wk 4: Rube Goldberg Machine

Assignment: Make a Rube Goldberg device in Unity. The device should include at least 5 separate steps/phases.

I know what I made is such a basic animation with very basic shapes and physics, but this was quite a challenge for me. Still trying to get a handle on Unity and everything (even the most simple event I have in mind) requires a tutorial viewing. It was a good time, but needless to say I am a noob and feeling it. Note to self: everyone needs to start somewhere! I’m starting here! Happy to have the semester to practice Unity.

Questions: 

  • How to make the colors change on an event and have that see-saw like cup motion in my 3rd reference? Tried to do it using hinge joint but didn’t work. What am I doing wrong? Does it require a script?
  • Why is that salon-like hinge at 0:23 so wonky and changing the shape of the door?
  • How to properly animate and save the animation? Right now, the below is just a screen recording for documentation purposes. If I were to render, how would I go about doing it in a fast way. Also, is it even worth it to render or should we only do it when we want to “deploy”?

Helpful Resources (that weren’t in the Unity Documentation): 

Understanding Networks Wk 2-4: Traceroute

Live site: https://emilylin-itp.github.io/understanding-networks/traceroute_dir/index.html

Code here: https://github.com/emilylin-itp/understanding-networks/tree/gh-pages/traceroute_dir

For this traceroute assignment, I used my traceroute data to create a spin-off of google maps. Calling it Traceroute Hop Stops!

I first collected the traceroute data from my home, school and a coffee shop. Next, I converted it into a json file.

I used https://www.iplocation.net/ to help to help me find the coordinates, city, ISP of each IP address that showed up in my traceroute. I noticed for each hop, traceroute will send three IP packets.

Helpful note I read from here: “Traceroute uses the TTL (Time to Live) field in the IP packet header. Normally, TTL is used to prevent packets from being forwarded forever when there is a routing loop. Whenever an IP packet is forwarded by a router, the TTL is decreased by one. When the TTL is zero, the IP packet will be discarded.”

With the json file, I was hoping to be able to dynamically alter the site by using AJAX xmlHttpRequest (as I did for my data art site). Unfortunately, I was struggling to get it to work in time. So, a lot of the data is manually inputted in HTML (I know, it is definitely not the smartest way of doing this). It is also not utilizing my json files!  I’m hoping to simplify my code in the following week so I don’t have endless lines of HTML.

Included an overview map with all the major ISP that keep coming up in my traceroutes. I used Mapbox to make these maps.

Helpful Resources:

 

Understanding Networks Wk 4: Definitions

WebRTC (Web Real Time Communication): is a free, open source project that enables web browsers with real-time communication capabilities. WebRTC doesn’t require any plug-ins or applications. The technology allows video, audio streaming, and data sharing between clients.

Routing: a process performed by network layer in order to deliver the packet. It chooses the optimal path from one network to another. 3 types of routing: a.) static routing, b.) default routing, c.) dynamic routing

  • Static routing: manually adding routers into routing table. Advantages of this are that it is more secure, there is no bandwidth usage, and there is “no routing overhead for router CPU which means a cheaper router can be used to do routing.”
  • Default routing: this routing doesn’t care about which network the packet belongs to. It will send all packets towards a single router that is configured for it to be sent to.
  • Dynamic routing:  this routing makes automatic adjustments of the routes according to the current state of the route in the routing table. When the router finds a change in the topology then the router advertises it to all the other routers. The advantage of dynamic routing are that it is more effective at finding the best route and that it’s easy to configure. Disadvantages are that is consumes more bandwidth and is less secure than static routing.
  • Reference: https://www.geeksforgeeks.org/types-of-routing/

UTF: character encoding capable of encoding all possible characters (also known as code points) in unicode. UTF stands for Unicode Transformation Format.

TCP vs UDP: stands for Transmission Control Protocol (TCP)/ Internet Protocol (IP). UDP stands for User Datagram Protocol.

  • TCP
    • “TCP provides a way to deliver and receive an ordered and error-checked stream of information packets over the network.”
    • TCP is most commonly used protocol on the Internet
    • When you request a site, your computer sends TCP packets to the web server’s address. The server sends back a stream of TCP packet, which your web browser stitches together to form the web page.
    • TCP is very reliable! Packets are sent with TCP are tracked so no data is lost or corrupted in the transit.
    • It is able to be this reliable because it orders packets by numbering them. It error-checks by having the recipient send a response back to the sender saying that is has received the message.
    • Error correction built it/ more reliable –> but slower
  • UDP
    • “UDP is used by apps to deliver a faster stream of information by doing away with error-checking.”
    • “When an app uses UDP, packets are just sent to the recipient. The sender doesn’t wait to make sure the recipient received the packet – it just keeps sending packets.”
    • They can be lost, sender won’t resend them. Losing all the check-ins means faster communication time though!
    • “UDP is used when speed is desirable and error correction isn’t necessary.” Often used for live broadcasts and online games.
    • No error correction –> but so fast!
  • Reference: https://www.howtogeek.com/190014/htg-explains-what-is-the-difference-between-tcp-and-udp/