Video and Sound: Light and Storyboarding

For the lighting workshop, we were to create a sad photo of someone missing someone else. We used the light to create a shadow for one series of photos. We thought it was not sad enough, so we went to a darker location and made a more depressing photo. Marina commented that it looked like an anti-drug advertisement, so I guess it was semi-successful!

Storyboard for upcoming video project:

Intro to Phys Comp: Week 3 Lab

Below are the on and off states of the Digital Input and Output with Arduino lab. It was fairly simple to set up physically on the breadboard and digitally in the code.

The creative lab was to create a combination lock of sorts. This reminded me of a scene in the movie Batman Begins. Bruce Wayne opens a secret entrance to the Batcave by playing several notes on a piano. I knew I couldn't unlock a secret entrance (yet), so I decided to tweak the idea a bit. However, I first needed to create the "keyboard."

I repeated the switch portion of the lab multiple times to create the keys on a typical piano. I then connected them to different pins so that I am able to digitally read whenever each switch was pressed. The coding portion was also relatively easy since it was just repeating the same lines of code for the additional pins.

I then moved on to the audio portion of the project. I wasn't sure how sound worked in Arduino, so I looked at the toneMelody example in the IDE. This example played a simple melody. In this example, it used an external file called pitches.h that contained all the musical notes. I only needed a couple (C-G) so I just looked for the values of these constants to use in my project. 

Now that I learned how to implement these sounds in the code, I needed to figure out how to physically play the sound. I didn't have a speaker, so I went to the shop to look for one. The person at the help desk (Aaron) helped me greatly by hacking together this makeshift speaker from a broken pair of headphones. I treated the speaker like an LED light since I figured that digital output, sound or visual, should be the same. I then assigned each switch with it's own pin. And by using digitalRead, I would play a specific tone out of the speaker whenever a respective switch is pressed. 

I found that the switches didn't really give me the feel of a piano keyboard. So I got some cardboard, cut some flaps to represent keys, and created a very crude keyboard. I then took off the switches for each pin, and taped the negative wire to the bottom of each flap. I then used a long piece of foil and connected a single wire that connected it to the positive current. By pressing down on the flap, the ends of the wire would touch the foil and complete the circuit for the pin.

I learned that wire management is an artform in itself. Although it worked, my project looked incredibly messy with all the different length wires. I decided to clean it up a bit, which took quite a bit of time since I had to rewire everything on the breadboard. This taught me that I definitely need to prepare and carefully plan the positioning of my components and wires for any future projects.

As for the combination lock assignment, I coded it so that when a specific sequence of notes are played, a secret song would play out. In this case, if the first five notes of "Mary Had a Little Lamb" was played in the correct sequence, the combination is complete and it "unlocked" the rest of the song. 

The most difficult part of the project was to figure out how to detect when a note is played once. Since everything is in a very fast loop, I couldn't just digitallyRead whenever a certain pin was read as HIGH because then the combination sequence wouldn't work. I needed to figure out exactly when a note was pressed AND released. I eventually figured it out by keeping track of two global values that detect when a key is pressed and released. Another obstacle was debugging my project. My combination lock logic was not completely working at first. I ended up adding a lot of printlns to the console in order to figure out what was going wrong. I have added the code below.

Visual Language: Typography

I have chosen six typefaces that describe me.

  • Inconsolata
  • Courier New
  • Comic Sans
  • Press Start 2P
  • Vidaloka
  • Special Elite

Because of my programming background, I chose two monotype typefaces: Inconsolata and Courier New. I am starting to see Inconsolata more and more these days in modern text editors, and when I see Courier, it automatically makes me think about programming.

Comic Sans is chosen because it reminded me of the simple days of elementary school. A time when people didn't really judge you based off what font you're using. Comic Sans is kind of seen as an ancient joke nowadays. Hopefully it makes a comeback.

I liked Vidaloka mainly because of the lowercase 'y'. My name is Bryan. So even though it's not that big of a deal, it still gets inconvenient when people take down or refer to me as Brian through emails, even when the correct spelling is right in front of them. I thought that if the 'y' was more special or looked nicer, people would remember it a bit more.

I chose Special Elite and Press Start 2P simply due to my interests. I love watching film and I love played video games. Special Elite reminds me of the type on film scripts, and Press Start 2P is a reference to the low bit text that appeared on early video games.

I placed horizontal guidelines along each typeface to look at the differences in the cap height, x height, baseline, and descender.

Creating expressive text was simultaneously frustrating and fun. It took me pages of random doodlings before I got to my final three choices. My process was to write down random words and think about what things relate to those words.

I would then look at the letters used and figure out if there were any special characteristics that could be used to represent the relationship to the word. I ended up with split, sword, and nail.

Intro to Comp Media: Animated p5.js

I have animated the sketch that I drew last week. There were three requirements to this new animated sketch:

  • one element controlled by the mouse
  • one element that changes over time, independently of the mouse
  • one element that changes everytime the sketch starts up

By utilizing the mouseX and mouseY constants, I am able to change the size of the spirals, the color of the background, and the positioning of the tetris pieces, all based off the positioning of the mouse. 

The element that changes over time, independently of the mouse, would be the rotating tetris pieces and the forever growing circle that is added in the middle of the sketch. 

The element that changes everytime when the sketch is started would be the color of the growing ellipse and the color of one one of the tetris pieces.

I added these previous additions to the sketch because I wanted the tetris pieces to look like they are actually falling or spiraling down into whatever hole they've fallen into. And because vertigo is a state of disorientation, the mouse does not do what the user expects it to do.

In addition to these animations, I also removed almost all the instances of any hardcoding. Variables are used instead of constant values, so this sketch could easily be changed to another canvas side.

The trickiest thing about the project was the rotation of the pieces. I eventually had to restart my progress for the rotating pieces, because I was essentially using trial and error to find the correct positions. When I started on a fresh slate, it allowed me to clearly position the pieces exactly where I wanted them.

Intro to Phys Comp: Week 2 Lab

The lab this week was a great learning experience for my introduction to physical computing. Since I come from a background of software engineering, I am used to testing my work with little consequence. Physical computing is NOT the same. I am sorry, my poor green LEDs. I did not mean to burn you and your brothers out. Eventually, I was able to get the current voltage for the LEDs via resistors and choosing a lower voltage from the Arduino chip. I hope it gets easier!

 

Video and Sound: Bloodchild Sound Piece

by Bryan Hsu and Jingfei Lin

If you haven't read Bloodchild by Octavia Butler, please do so or else none of this stuff will make any sense.

The Bloodchild soundpiece is from the point of view of the achti chosen to be sacrificed for the emergency Tlic birthing. I felt that the relationship between Terran and Tlic is an extension of the relationship between animal and human. In the story, Terrans are fed, nurtured, and cared for, until they are needed to be used for selfish reasons. As Gan carries the injured achti to the house, their breathing and heartbeats become one. Gan is hesitant when killing the achti since he may very well meet the same exact fate.

The audience is required to have already read Bloodchild in order to fully understand this soundpiece. The soundpiece is essentially what the achti hears and experiences, so headphones are recommended to enhance the sense of immersion. If this was an installation, visuals could be used to help heighten the experience, and the next step would obviously be VR.

The recording process all of these sound effects was enlightening. Every sound source (except the music towards then end) was created with what most people would call trash. Most of the recording was done in one day. I went to New Jersey over the weekend, so I was able to capture some more organic sounds such as the nighttime ambient noise and footsteps in a hay field. I ended up becoming very familiar with the Zoom recorder's microphone level. By looking at the sound levels, along with general awareness of external forces like wind, I quickly grew accustomed to rapidly recording sounds without having the need to double check the sound recording with my headphones.

Editing in Adobe Audition was a bit of an ordeal, however I was able to get a hang of it quickly. My final Audition mix is still a bit of a mess though, so in any future projects, I need to remember to be more organized with my sound labeling and track naming. The Effects tool was fun to play around with, but I kind of felt aimless since I was basically using trial and error with the different tools to find the effect I wanted. Overall, this assignment was a challenging and great learning experience.

Visual Language: Design Analysis

I chose the famous movie poster from the Steven Spielberg movie Jaws. I knew that I wanted to analyze a movie poster and Jaws was one that immediately sprung to my mind. Although it is visually simple, it is intensely memorable.  I decided to figure out why this movie poster is such a staple in classic American film.

 

 

 

 

 

Hierarchy

There are three main elements in the poster: the title, the woman, and the shark. They are all approximately the same width and are all centered within the page. However, in terms of height, the shark takes almost 50% of the poster height, and all it's showing is its head. This loudly informs the audience that this shark is more monster than animal. 

Here to the right, you can easily see how imposing the image of the shark is when compared to the title and the woman. Another thing to note is that the woman is caught in between these two other elements. She is visually caught between two sets of jaws. She has nowhere to go, and we feel the peril that she herself has yet to even acknowledge.

Color palette

There are three main colors in the poster: red, white, and blue. The film takes place during the 4th of July, so the color scheme works in regard to subverting the general fun and carefree that we usually associate to this holiday. The red JAWS title invokes a sense of danger and the color of blood in the water.

There are many shades of blue in this poster. It starts with a light shade of blue where the water meets the sky. It then gets darker and darker as the water gets deeper, representing the ominous and dangers that are waiting underneath the waters. As seen to the right, the white background only takes up about 25% of the poster. The rest of the poster is blue, which feeds into the unknown fears we have of the sea. 

Typography/Negative space

The closest font that I could find for the title is Franklin Gothic Bold. There is a font out there named Amity Jack, but that font was created in 2009 so it was likely inspired by the movie. The A, W, and S follow the Franklin Gothic Bold typography closely, however the J seems to have been altered. The end is angled and cutoff,  creating a fishhook like image. I also noticed that the sharp triangles in the A and W created by the negative space look a bit like teeth, which enhances my previous point on how the woman is about to be eaten by two sets of jaws.

The Jaws poster is one of the most memorable aspects of this great film. It's simplicity and color scheme invokes many feelings about the dangers of the unknown.  I no longer watch movie trailers since they give away too much of the plot of a film, so I am paying much more attention to movie posters these days. Although most are generically bland and uninspired, when I do see an interesting poster, it will lure me to the theater like no other.

Intro to Comp Media: p5.js portrait

I worked as an Android Developer at my last job for two years. During that job, my favorite part of it was debugging and tracing through code that I did not personally write. It was voyeuristic and enlightening, reading someone's computational diary and learning about another person. However, you could not see that through the final product. That is what makes computation fascinating to me because there are so many different ways to tackle a specific problem. I am very interested in projects that can visualize or depict an individual's problem solving thought process through their interaction with an external device. Games come to mind. Boardgames or puzzle games that require the player to solve a specific problem really show a side of human creativity and behavior that I find fascinating. 

With that being said, the hardest part of this assignment was not solving the problem, but figuring out what WAS the problem. I didn't really want to completely remake a known piece of art. Nor did I want to create something that looks dumb. So I did a bit of both.

I love watching movies and I love playing video games. Vertigo's movie poster is pretty famous for its design seeing as how I had a poster of it hanging in my room before I even watched the movie (it was ok). I decided I would try to recreate that poster, but with a twist by replacing the silhouettes of the man and woman with some Tetris pieces.

I attempted to recreate the spiral in the Vertigo poster and completely failed. There was no way I was going to spend my time recreating it manually since I knew it could be done with some kind of algorithm. But good luck staring and analyzing that spiral without getting any migraines. I decided to go for something much simpler. I ended up with this:

To be honest, I thought this looked really stupid. The repeated circles did not give me the headaches I wanted, and the Tetris block looked completely out of place. The upside was that the circles and the iris ended up looking a bit like H.A.L.

In order to add to the disorientating nature that the original Vertigo poster had, I played around with how I was creating the circles in my loop. I was surprised to see that such minor changes, like incrementing the position of a coordinate, could cause such a cool looking effect. I also lowered the opacity for most of my fills, which made the portrait a bit more glowy. This is the end product:

The web editor is pretty easy to use. I kind of wish it had some sort of capability to automatically autocomplete method names like in an IDE, but having the reference page on another browser tab was good enough. It did crash on me a couple times, and I lost a bit of progress because I didn't save. There should definitely be some sort of auto-save. Overall, it was a fun and fresh experience, and I can't wait to get even deeper into p5.js.

Intro to Phys Comp: Physical Interaction

I agree with Chris Crawford when he said that interactions should be a measurable attribute, rather than a binary yes or no. Like a conversation, the amount of physical interaction also depends on the amount of effort put into listening, thinking, and speaking by both "actors." This effort goes along Bret Victor's proposal on how the human body contains an infinite-like amount of interaction output methods and we should not limit these interactions to only our fingers. I define physical interaction as a sliding scale that measures the combined effort that actors communicate among each other. You can think of it as how "in love" these actors are with each other. When the communication is forced and awkward, there is no second date. But when that spark appears, and conversation is seamless and enjoyable, that is when physical interaction would be at its best.

Now that I think about it, there isn't very much digital technology that would be considered something with high physical interaction. Like Victor said, we rely so heavily on our hands that we often forget the rest of our body. I think that smartphones are surprisingly not as physically interactive as they should be. The only recent feature I could think of that gives feedback to the user would be Apple's 3D touch, and even that feature is kind of wasted since it is typically used to the exact same extent as a long hold press. Although having more haptic feedback is a step in the right direction, the step is far too small for my liking.

Nitish, Ari, and I worked on creating a self sustaining shoe for our fantasy device. Although our first major concern seemed to be how a shoe could self sustain itself, we also started to think of ways the shoe could act as a sort of "smart" shoe.

After the readings, I started to think of what physical interactions we could implement to such a shoe. I immediately thought of using toes as a method of input. People who have lost their arms have learned to adapt and utilize their feet and toes to do tasks that many would find difficult without hands. I think that studying the behavior of those who are forced to change the way they interact with the physical world could reveal interesting possibilities for future technologies.

Video and Sound: Plagiarism

Embrace the Remix

The Ecstasy of Influence

The readings/viewings this week focused mainly on the concept of plagiarism and how current copyright laws are a detriment on furthering future artistic endeavors. 

In both critiques, large corporations (Disney and Apple) are shown as hypocrites. In The Ecstasy of Influence, Jonathan Lethen combines Disney and denial, penning the term “disnial”. In Embrace the Remix, Kirby Ferguson criticizes Steve Jobs' drastic change in his stance on the open-sourceness of certain patents.  Disney and Apple are two of the most successful companies in the world at the moment, which makes them an easy target for these types of criticism. Although they may be taking away the quantity of potential art in the world, I’m not sure if their business practices are taking away the quality of said art. They have constantly been able to manufacture high quality products. So even though I may or may not agree with their practices, I do not think that they should be taken full blame of limiting creative output in the world.

I think plagiarism is accepted when something's considered "good" and severely frowned upon when something's ehh. In both the reading and the video, Bob Dylan is mentioned because he's known to sample previous works of music. Nobody cares because Bob Dylan is "good." But when Vanilla Ice samples Queen, everybody bashes on the poor guy. Everybody's a hypocrite in some way, and the inclusions of money and greed only escalate these kinds of reactions further.

Video and Sound: Soundwalk

I started the audio walk around 11:45am.

The sounds from the real world blended with the audio from my headphones, creating a surreal state of both past and present. I wandered through Central Park in another realm. It was isolating. 

And it was spooky as hell. I wouldn’t know whether the sounds came from my phone or the world. I would hear kids running and playing, look around, and see no kids. Ghost kids?...

And then there’d be moments when Cardiff would narrate EXACTLY what was going around. She literally narrated “a woman is taking a photograph,” and ten feet to my left I’d see a woman taking a goddamn photograph! I looked around and imagined Cardiff surveilling me from afar. 

Events like these happened throughout the walk. I was there, and then I wasn’t.

When I reached the clock tower in the zoo, I heard a bell. I assumed it was from the audio, until I realized that it wasn’t.  It just so happened to be noon time and the clock bell rang and rang. To make sure, I cheated and removed my headphones, leaving Cardiff’s past. The noise of the present was quieter, with only the bell ringing in the background.

I put my headphones back on, hearing again those ghostly children laughing along with that clock tower bell. The music of the past is discordant with that of the present, yet we can’t help but to look backwards and find those brief moments of harmony.

Thanks to Danni H. for accompanying me and helping me with these pictures!

Thanks to Danni H. for accompanying me and helping me with these pictures!

Doc day!

Here's the first post for my ITP blog. Exciting!

The video documentation workshop was very informative. The two presenters kept it relaxed and casual, making it very comfortable for everyone on their first (zero?) day jitters.

Matt (left) and Joe (right) crackin jokes

Matt (left) and Joe (right) crackin jokes

The importance of having clean and thorough documentation was stressed heavily in both documentation workshops, so I need to make sure to give myself time to keep this blog updated pretty frequently.

I had a diary when I was a child. My mom gave me a journal and told me to start writing my thoughts and dreams. I think I essayed something like "this is stupid" and went to play video games. We'll see how this blogging goes.