Live Web

Typographic Awareness

For my final, I combined my finals projects for Live Web and Computational Approaches to Typography. I made slightly different versions for each class, but I would like to combine them into one fully functional Chrome extension in the future. My original idea is here.

Playing with Type

demo gif

I started by writing the code to create the interactions I wanted users to have. Mainly I wanted users to mouse over blocks of text and have it look like it was rippling. Here is a basic overview on how my code works:

  1. Use a Treewalker to get all the text nodes on the page
  2. Loop through all the text nodes, and put each text node into a new charGroup element.
  3. Replace the inner HTML of the charGroup string into individual character elements. If one of the charGroup elements was “word” it would be replace with “<character style=’display:inline-block;>w</character><character style=’display:inline-block;>o</character><character style=’display:inline-block;>r</character><character style=’display:inline-block;>d</character>”.
  4. Then I replace the new charGroup element where the original text node used to be.
    textnodes[i].parentNode.replaceChild(newNode, textnodes[i]);
  5. Finally, after it finishes looping through all the text nodes I can manipulate the individual character elements using the animate API and the ‘mousemove’ event listener.

I also used the ambient light sensor to change text opacity and the background color. I think the background color change doesn’t really work that well since the user needs to enable “Generic Sensor Extra Classes” in their Chrome flags. Regardless, I’m glad it worked and I liked this for a first iteration.

All the final code for the Chrome extension is here and you can download it here. Install the extension by going to chrome://extensions and then dragging the file into the browser. Activate the code on any website by click on the extension icon.

Adding more users with Peer.js

demo gif

The site is up here as long as my peer server is still running.

I was able to get Peer.js working within a Chrome extension, but then I had issues with keeping the same peer id as the user went to a new page. I think I needed to use the storage API to permanently store the peer id, but I borrowed a website from Frank De La Cruz at Columbia to show peer.js working for class.

I basically have peer.js sending the mouse and ambient light data as it is received from the other user. Users can choose their own peer id and then call other people whose peer ids they know. I wanted it to be intentional that the other user knows who they are contacting so it’s not totally anonymous and creepy.

All the final code for the web version is here.

I think this was good for a first iteration, but I’m hoping to fully combine the peer.js and chrome extension in the future. I’m also thinking about adding it to my website/blog so you can see if anyone else is also there (:

Online Typographic Awareness

For my final, I would like to combine my work in Allison’s Computational Approaches to Typography class with what we’ve been learning in Live Web. I think this will be particularly interesting because we constantly look at text on the web, but it rarely is something that people interact with beyond clicking on links.

I think it would be interesting to give people an awareness of other people being in the same web space by having the type react to various user inputs. Mouse position is an obvious one, but there are also a bunch of super creepy things that I am interested in using like ambient light sensor, location, and whatnot. I’m basically going to browse through the MDN web API page and see what I can work with and what makes sense to give users an awareness of each other. I’m interested in using mostly passive inputs from the user, but I think it would be nice to have 1-2 active inputs (like buttons, text inputs).

I’m not 100% sure what the actually text content will be or how exactly I’d like to manage multiple users on the page. seems like a solid choice, but I really liked the speed and decentralized nature of peer.js. I think I may use peer.js since I want to learn more about it.

Here are some references for other designers playing with interactive type.

Video Swap Camera

demo gif

I modified my midterm project so that it can record videos instead of taking photos. I used the mediaRecorder API to accomplish this. So now when you take a short video, it’ll return with a video clip randomly selected the database of video clips collected from people using the site. The API is only supported by Firefox and Chrome right now, so unfortunately this doesn’t work on Safari or mobile.


Midterm Camera

demo gif

I switched my original idea to making a camera that captures your image and then shows you a randomly selected image from the database of all photos taken by other users. I thought it would be fun to surprise users with unexpected images. It could be a cool way to see what is happening in the lives of others with little context or information. Photos could come from anywhere at any time. I designed it to work on either a laptop or a phone. I think it’s better on the phone since you can choose between the selfie or external facing camera. Some new things I dealt with were saving images using the file system and using nedb database to keep track of the info I was collecting.


PeerJs on Mobile and Midterm Idea

My idea for my Live Web midterm is to make a site that collects video clips or images based on a 24 hour cycle of time. So when you are on the site, it would play whatever users recorded at that time. Or if no one had recorded anything, you could add something. If multiple people are on the site at once, you’ll be be able to see them in real time. It would basically be a clock where the time is told via photos or videos.


Webcam Chat

gif of several users sending messages

I tried out using HTML5 video and WebRTC. I’ve also got HTTPS running on my site now too! I made a chat where you can send images from your webcam. It works with multiple people, but it’s only me and my friend Jeff in this gif.

This reference on the MDN site was a good resource and I figured out how to fix the weird resolution issue getting the video images to the canvas.


Let's Draw Together

gif of several users drawing

Ivy and I made a simple drawing application where users can draw together using different colors when they go to the same site. We used to send the mouse position from all the users and the draw the image on everyone’s screen.


Color Chat

gif of several users sending messages and changing the background color

I wanted to make a simple chat where users can change the color of the chat box by entering in hex colors. I think colors can convey a lot of emotion and it’s an interesting way to communicate without words. I wanted to find a nicer way to have users select their color, but for now it’s tailored around the ease of working with CSS.


Web Self-Portrait

self portrait screenshot

I changed my self portrait because the first one had a video that was unnecessarily enoorrrrmous and it was sort of boring. Now I have a smaller video file and you can make me say whatever want using the 100 most common words in English according to Wikipedia. I’m imagining this would be fun on a tablet and it might be even more fun if I added some more colorful words.

Click here to play!