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
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. Socket.io 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.
- ALLES NEU / Schultz Schultz - experimental interactions to manipulate typographic forms or also this link
- Dia Studio - not necessarily interactive, but their motion graphic work is amazing
- Four Letter Word / Purin Phanichphant Brian Singer & Chloe Bensahel - Saw this at SF Design Week. Thought it was okay, but people were sooooo enthralled by this
- Text Rain / Camille Utterback - an ITP classic
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.Read more...
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.Read more...
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.Read more...
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.Read more...
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 socket.io to send the mouse position from all the users and the draw the image on everyone’s screen.Read more...
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.Read more...
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.Read more...