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
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:
- Use a Treewalker to get all the text nodes on the page
- Loop through all the text nodes, and put each text node into a new charGroup element.
- 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>”.
- Then I replace the new charGroup element where the original text node used to be.
- 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
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 (:
- What Web Can Do Today
- Animate elements function in Web API
- Find and replace text characters
- Nodes MDN Reference
- Text elements MDN Reference
- Get elements from point (get an array of elements that are under your mouse) MDN Reference
- Get the top most element from point MDN Reference
- Using the ambient light sensor
- Regular expression to remove white space in text
- Find all text nodes on a site