Intro to Comp Media: DriVR prototype

For this week's assignment, I started to work on a digital prototype for an idea I have for the p.comp final. I want to create a device that allows you to edit and direct your own car chase movie scene. The device would be a steering wheel, an accelerator, and a brake pedal. For this prototype, I've turned the functions of the components to key presses on a keyboard. The left and right arrows would represent the steering wheel, the up arrow is the accelerator, and the down arrow is the brake. When you turn the wheel, the car chase scene switches to another scene from another movie. Accelerating and braking would speed and slow down the scene. 

I had several issues with loading these car chase scenes, I think mostly due to the web editor. I was first unable to upload clips more than 10mb (later the limit decreased to 5mb). I was also unable to find the path of the uploaded files programmatically. It looks like the web editor automatically translates file paths of uploaded files to the actual file path on the amazon web servers. I think once I set up a local environment, most of these issues will be fixed.

code here

Intro to Phys Comp: Final Ideas

I want to get my hands dirty with interactive storytelling, so I want to create a project that allows the user to be a part of a film. An idea I have is a Car Chase Simulator. 

The user interface would be the obvious car parts: a steering wheel, a gas and brake pedal, and a gear shifter. There would also need to be a screen to display video, preferably a wide one to simulate the front windshield. The user would start the movie by starting the car. As the user controls the wheel and pedals, the movie changes to different scenes. There would be a large collection of car chase footage from famous movies, so when the user turns left, the scene would change depending on the current state of the movie.


Just thinking about the process of creating this project is giving me a slight panic attack. Although I have a good idea of how all the user inputs would work, the thought of recreating the interior of a car and collecting hundreds of car chase movie clips, and editing them, and then coding the logic... It's a lot of work! But I think it's doable with the skills I currently have. This project would combine a lot of the skills I have and are learning at ITP.


Intro to Phys Comp: Spooky Midterm

Halloween isn't scary enough these days. My partner Rogue and I wanted to create something that would shock and frighten. We created something not of this world. We created... a ghost.

AKA a silhouette of a Halloween mask that follows you around. Spooky!

Since the midterm project was to be Halloween related, I wanted to make something that would primarily be used in the dark. We ended up deciding on a device that detects a user walking along a surface, and depending on where the location the user is currently at on the surface, project a shadow at a corresponding location on the wall.

Our main component to detect the user interaction would be several FSRs embedded underneath a cardboard walkway. The input data from these FSRs are then used to light up specific blue LEDs. The LED will light up depending on which FSR the user has currently applied pressure to. The light from each LED would then cast a shadow off of a central mask, creating a silhouette on the wall.

The circuit design of this project was fairly simple, however the hard part was implementing it into something tangible that a user could use. Our project required a lot of space which was something that Rogue and I were not too accustomed to in our past physical computing projects. The most difficult part was probably the angling and positioning of the lights in order to cast a nice silhouette on the wall. Below is a short montage video that details the process of how we built this project.

Issues/Stuff we wish we could have done better

Rogue and I ran into a lot of issues that we had to compromise with in order to finish the project. We had originally intended for the mask to also move by using a servo motor. The motor would then move as the user walks through the cardboard path. Unfortunately, when using the Servo library in Arduino, two pins are disabled (9 and 10). This loss of real estate would not allow us to use the four LEDs, so we decided to do without the motor for now. A solution to that problem was to perhaps use another Arduino board. 

We had also originally wanted to use Red/Yellow/Orange LEDs to cast the light since it fit more with the theme. However, the silhouette created by these warmer colors were not as clear as the blue LED lights, so we had to again scrap an idea. Jeff mentioned how a stronger light source would have made the project much better and I agreed. I hope we learn how to implement stronger components to our projects in future classes.

Overall, the midterm project was an amazing learning experience for me. Being able to turn a kind of silly idea into a working prototype in such a short amount of time was something I had doubts on. But now I know I can do it! Thanks again to Rogue Fong for being a great partner. 


Intro to Comp Media: ITPness

Some guy compiled a 25k+ entry'd json of comments from pornhub content. I decided to use it in this week's assignment. It probably wasn't the best idea, but by the time I realized that, I was already too far in.

These comments were like 99% incredibly vulgar, so I first decided to clean up the language a bit by replacing certain "bad" words with a "good alternative". I used the same data structure that I used for my Morse code translation in my previous assignment. The replacing of these words reminded me of the R rated movies shown on like TNT or something and how they would have dubbed lines over swear words.

As these new translations started printing out, some of them actually reminded me of comments people would say to others for their first couple ICM assignments. So I took several ICM projects from the first week and imported them into my project (sorry, I didn't ask for permission. let me know if you want them taken down!)

Finally, I implemented it so that several users(someone from the class) would "comment" on a random p5.js sketch, simulating a live stream of comments like you would see on video streaming sites such as... YouTube. These comments are PG-ified to the best of my abilities.

After reading through hundreds of these pornhub comments, I experienced a numbness in my brain. Censorship became such a meaningless concept to me during this time of desensitization. Not sure where I'm going with this, but if you want to see the unedited versions of the comments, you can comment out "c = filterBadWord(c);" in the code. 

code here

Visual Language: Taipei Logo

This week's assignment was to create a logo for a city of my choice. I chose Taipei, the capital of Taiwan.

I first analyzed the Chinese characters and the meaning behind them. I then created a mind map of what Taipei means to me. I also asked several of my classmates who have been or lived in Taipei to give me some additional feedback. 

With this information, I started sketching out some possible logos. My process was basically trying to combine two or three of the identities that were present in the mindmap. 

I knew that I wanted to incorporate food into the logo because everybody associates Taipei with the street food available at the iconic night markets. Another identity I wish to incorporate was the moped/scooter. These are everywhere in Taipei and remind me of the city whenever I see one. Lastly, was the Taipei 101 skyscraper. I was at first very hesitant to incorporate the building since it seemed so cliche. But it was hard for me not to include it due to its overwhelming presence in the city. 

I eventually ended up incorporating the food and the 101 identities for my logo, mostly inspired by a stack of bowls. Taipei 101's unique structure looks like several sections of the building are stacked on top of each other. I then used bowls because one of Taipei's most famous foods is the Taiwanese beef noodle soup. After sketching out a rough sketch, I started working on the logo digitally.

Above was the first draft of my logo. I found that the heat lines at the top of the logo did not look right. I wanted to show heat because the temperature in Taipei is incredibly hot and humid, but these heat lines didn't really convey this sort of intense heat. It eventually led me to turn these heat lines into noodles. I also felt that the removal of the outlines made the logo feel a lot less cartoony and cliparty.

Here is the final product. I put together several logos using different colors. I also situated them on a moped helmet and a t-shirt.

Special thanks to Siman Li for helping me in this design progress!

Intro to Comp Media: Morso

Play the game here!

View code here.

I created a little game that kind of teaches you morse code. I used two DOM elements: a button to start the game and a textfield to input the text that you wish to play with.

I had some trouble centering some of the DOM elements. I tried to add a div, but I wasn't too sure on how to add already created elements to it. There are also a lot of other features that I wish to incorporate into Morso:

  • collision detection between Morso and the morse code
  • multiple difficulties
  • more visual effects

Hopefully I will be able to incorporate some physical computing elements to this project it with a real morse code dialer!

Intro to Phys Comp: Serial Input

I decided to control an ICM project that's still a work in progress. I used two potentiometers as analog inputs to control the movement of an ellipse and a line.

For the Serial input, I used a ":" as a delimiter to separate the two analog inputs. I then mapped 

In p5.js, I used the split function to grab the two analog values of the potentiometer. I then mapped the values to a range that's suitable for my sketch. One value controlled the amplitude, the other value controlled the frequency.

The end result worked exactly as how I expected. Having the option to use multiple analog and digital inputs opens so many possibilities for future projects. Because I will be continuing to work on this p5 project, I have many ideas of how to incorporate physical input to its final form.

Visual Language: Business Card

Here's my business card! It took me a long time to come up with an idea of what I wanted. I originally wanted to try to use lots of noise and "overwhelm the eye", but it looked way too messy and unprofessional. Software engineers should not be known for their messy code, so I scrapped that idea and went for something a bit more clean and minimalistic. 

I used the color red because it is a very lucky and strong color in Chinese culture. I also used two non-serif fonts (Futura and Avenir) as my type because I liked how clean it looked with the card. My name being on the edge of the card was done so that the first thing a person would see when pulling out my business card would be my name.

Since I did not come from a design background, I asked a couple of my classmates who do for advice and inspiration. Special thanks to Diana Na and Grau Recarens for the help!