Group Coding

Intro to Computational Media

This week’s assignment was a group coding project. When we met up, I said that I was interested in making some sort of rain animation, but that I lacked the ability to make it happen. Fortunately, my groupmates (Amanda Lee and Yeseul Song) were more than capable. First, they showed me a video of an interactive installation called Text Rain (1999) by Camille Utterback and Romy Achituv. Here is a photo from the exhibit:


Text Rain at the Contemporary Art Center of Virginia

Then we set out to create our own version of Text Rain. Here is what we came up with:

I use “we” very loosely, because the truth is that Amanda and Yeseul were the masterminds behind the operation. They were very kind in explaining each step of the process, and I gave my input, but the fact of the matter is that I still am not entirely sure what’s going on in the code. So I have included comments in the sketch below that state all the things I think I understand, and all the things that still have me scratching my head. My plan is to spend the next week investigating the things I still don’t understand. Huge thanks to Amanda and Yeseul for helping to educate my javascript-ignorant self!

Digital and Analog Inputs and Outputs

Physical Computing

Digital inputs and outputs:



Because I didn’t make a homemade switch last week I decided to include one this week for fun:


Analog inputs:


Above I’m using a potentiometer as my analog input. In the code, the pot value was divided by four to represent the brightness of the LED, from 0 to 255.

For the last part of the lab, I picked photocells as my variable resistors:


In the video above I’m just checking to see that the values were registering. 3.92 represents the amount of voltage, but I’m still not sure what the “800” means in this context.


The more light the photo cells were exposed to, the dimmer the LEDs. I wonder how I could change the code to make it the opposite (more light = brighter LEDs).

I wish I could have experimented more this time around, but I made a stupid mistake that had me stuck for a long time–I forgot to supply power to the photocells! I am also realizing that I’m going to need to get a pair of wire cutters. The wire situation is starting to get out of hand.


Animate Something

Intro to Computational Media

Here was my original concept:

  1. Static image of man blowing a bubble with chewing gum
  2. Mouse over bubble to make it grow in size
  3. When screen is consumed by gum, user can click bubble to reveal image of a man with gum all over his face.
  4. Reset to static image.

This is what I ended up with:






The first problem I ran into was getting the bubble to grow on the mouseover. This was mainly because of syntax issues (shit like, “if (199 <  mouseX < 301)”). There was a long time when the gum would expand regardless of mouse position but I think that was due to a misplaced semicolon.

The biggest issue I had was revealing the image at the end. I was able to figure out the “mouseIsPressed” command, but couldn’t do anything with “mouseClicked,” “mousePressed” or “mouseReleased”. It is unclear to me how to create appropriate variables and then set them to true or false. When I finally gave up, I was still unable to figure out how to leave the jpeg up on the screen without continuously pressing the mouse, and I was also unable to reset the image.

The last thing I need to work on is removing the fixed numbers from my code. The arbitrary numbers have got to go. Go where? I dunno, stick them in Trump’s “Border Wall Budget Sheet” and have Mexico figure it out.

Basic Circuits

Physical Computing

The first thing I did was set up a circuit using a push button. At first I just copied the picture in the Arduino projects book because I wanted to make sure that I could get everything to work without blowing anything up.


Upon examination, I can tell what’s going on. The 220 ohm resistor is connected directly to the power line so I know the LED won’t blow out. The next object in the circuit is the push button. When I push it down, metal leads come into contact, completing the circuit. Until the button gets pushed, it’s an open circuit.

Pushing the button provides power to the LED, and it lights up! The last component is a jumper wire, which connects to ground. (The whole concept of grounding is still confusing to me. But as long as shit is lighting up, my ignorance clearly isn’t holding me back! (I’m going to live to regret these words.))

The next thing I wanted to do was try out the potentiometer. I found some online tutorials and was able to get some sweet potentiometer action. Below you can see the circuit with a single LED, and then two LEDs in series and in parallel:

potentiometer potentiometer-series potentiometer-parallel

Here are two more videos. There was some suspense with the parallel circuit–wasn’t sure the green guy was gonna make it!


Bad Signage

Visual Language

Find three bad signs and one good sign.
Choose one of the bad signs and fix it using photoshop.

The first sign that caught my attention was a surveillance sign in New Haven. Here it is in comparison to a New York surveillance sign that’s posted next to several bike racks:

surveillance-new-haven surveillance-new-york

The NYU version is pretty typical of surveillance signs. It depicts a black camera pointing out in the viewer’s direction and has a clear WARNING (in the signature NYU purple). The subtext is, DON’T EVEN THINK ABOUT STEALING THESE BIKES.

Meanwhile, the New Haven sign is perplexing. You’ve probably seen signs in shops that say “Smile! You’re on camera :)” in order to deter theft. Those are slightly irritating, but the New Haven sign takes it to a whole other level. You’re really going to say “LOOKING GOOD,” when the subtext is “DON’T PULL ANY SHIT, Y’HEAR?” How passive-aggressive is that? Graphically, the play button embedded in the rising sun makes no sense, and the stark black camera against the friendly pale blue background feels like I’m in a Big Brother dystopia. Yikes.

The next bad sign I encountered was in Chinatown, NYC:


The logo for Jo Jo Skin Care is appalling. At first glance, it looks kind of like a fish with a barbed tail. Then there’s the eerie thespian mask-like face. Then there’s the negative space that creates a slight optical illusion of a face in profile. It took me a full minute to realize that the logo is actually a “J”. I’m having a really hard time understanding the concentric semicircles that protrude from the face (the part that I originally thought was a fish fin). Is that supposed to be an earring? Holy shit, I’m just now realizing as I type up this post that it’s representative of the “o” in “Jo”. To me, it’s more representative of the “o” in “oy vey”.

Here is the first sign I came across that I liked:



Even though it’s a little too busy for my taste, I liked the minimalist color palette, the artist’s illustration of the cityscape, and the font. The font reminds me of hammered steel and construction beams.

Here is my favorite bad sign, and the one I decided to fix:


Photo by user sbolrock via Flickr

I’ll admit that I cheated a little bit–I told my friend Shazeda about this assignment and she immediately texted me her favorite bad road sign. Though she didn’t take the picture above, it’s a sign that she’s passed several times on road trips through Canada.

On the one hand, I love everything about this sign and feel like it’s kind of blasphemous to change it. On the other hand…this can’t possibly be the best way to convey that there are strong winds in a particular area. Below are two incarnations of my first concept:

wind-flip wind-flip-white

I retained some of the “whimsy” from the original, because it’s doubtful your average wind would be strong enough to flip a car. The text is in French because the road sign is located in Quebec (though ideally the image should speak for itself). I wasn’t sure whether I preferred a white or black gust of wind. Still on the fence.

Here is a more nuanced version:


In this version, the gust of wind is much less prominent than the swerving car. It’s more realistic, but I’m not sure I prefer it. The negative space on the right bothers me.

Here is my favorite version of all, with a side by side comparison to the original:

quebec_wind_sign-svg caution-hot-air


DIY: At Home Birth on National Preserve Radio

Video and Sound

A satirical podcast that re-imagines Octavia Butler’s short science fiction story “Bloodchild” as a DIY radio show.

Music from Bensound.

A brief reflection: I wish we had recorded in a soundproof room, and with a higher quality microphone (actually, make that two higher quality mics, because my Theatre BA-approved voice kept smothering Lindsey’s low-key delivery). I’m proud of the script, and I’m grateful to Lindsey for veering us in a humorous direction, away from my self-serious brainstorm. I liked our professor Marina’s suggestion to include realistic screams as a counterpoint to the ironic dialogue. I think I need to spend more time in the uncanny valley. As an aside, big thanks to Eddie Pruette who graciously agreed to scream, moan, vomit and perform grubectomies on a moment’s notice. And I just realized I totally forgot to compensate him with falafel! Better get on that.

Assignment: draw something using p5.js

Intro to Computational Media

Because I am a masochist, I attempted a self-portrait using p5.js. I decided to make my canvas 500 x 500. I started with an oval at the center, and made a little reference drawing to remind myself where the vertices of the ellipse occur, given a width of 300 and a length of 400. This reference image was ultimately of little use, because I grew impatient and just trial-and-errored the shit out of every object. Here is the concept image and oval:

concept-face     reference-oval

Fast-forward an hour or so, things are going swimmingly:

Then I made the critical error of thinking fill() would be chill guy. Like, “Have you met fill()? Everybody loves fill()!” Turns out, fill() is a pain in the ass:

As you can see above, in the 21st command I tried to fill in that last ellipse to create a more legitimate nostril. BLACKOUT. I spent a long time trying to fix this, to no avail. Okay fine javascript, I’m just gonna accept that you have a grudge against nostrils and move on.

As pictured below, I had a similar issue with the stroke() command. When I tried to make my hair swooshes purple, my whole face became purple. whyjavascriptwhyyyy:

Here is my final drawing, side-by-side with the original concept image:

face-alone  concept-face

It was really frustrating to spend ages trying to de-bug and getting nowhere, but overall I enjoyed the assignment. My secondary headache was arc() going clockwise, when it really should go counter-clockwise (starting in Quadrant I). That’s just common sense!

What is Interaction?

Physical Computing

As soon as I started reading Chris Crawford’s book called The Art of Interactive Design, I thought about a Facebook post that my friend (and ITP alum!) Sharang Biswas put up a few days ago:

The word “interactive” seems to have become a synonym of “embedded with electronics”… I just saw a post about an “interactive ball”…because obvi balls are never otherwise interactive…

I think Crawford would argue that balls in and of themselves are not interactive (a ball is not an “actor” that listens, thinks, or speaks…but a ball can certainly be the facilitator of interaction). However, Crawford would agree that just because something has an electronic component does not make it “interactive”. The examples he initially cites are not electronic at all–Interactive Rugs! Interactive Shampoo! Interactive Granola Bars! I would pay good money to see an interactive granola bar.

I scoff, but I admit that defining interaction is difficult, and I’m struggling to come up with a definition of my own. I appreciate Crawford’s idea of degrees of interactivity, as opposed to a binary. For example, I interact with a vending machine to get my granola bar, but it’s a fairly low level of interactivity. My granola bar is a zero interactivity object. I can anthropomorphize the thing, create a whole dialogue for it, like, “Please Melissa, I am but a paltry snack, unworthy of your stomach. Spare me!” but all this is for naught. I have no empathy for the bar. I eat it noisily and mirthfully.

The part of Crawford’s definition that trips me up is the “thinking” element. Aren’t musical instruments interactive? But these are unthinking things. Is a guitar only truly interactive if after hearing me play it’s got something to say back? Like, “Melissa, the e-string is out of tune” or “Melissa, the song you’re writing is very derivative of the Pachelbel’s Canon.” Is that better? Do we want to endow our instruments with the insights of our shitty boyfriends?

I strongly agree with Bret Victor that we need to harness human capabilities. Something that strikes me in the “vision of the future” is that there’s no need for humans at all. The girl can look up recipes without her mom’s help, the office dudes can see they need a new pump without a meeting…basically the computers can do all the work, and all we need to do is make little swipey motions. It’s hardly a future I want to live in.

Analysis of Moby Dick

Visual Language

To clarify: the analysis in question has nothing to do with the content of the book (which I have not remotely read), but the design of the book cover:


First, I created a grid:


The separation of the horizontal sections is more apparent to me than the verticals. Horizontally, there are three or four prominent sections–the title, the author and illustrator, and the image of the eponymous whale. The title and the image take up almost the same amount of space on the cover. Though the vertical subdivisions are more open to interpretation, the gridlines show that bulk of the whale runs through the center.

The next thing I created was the palette:


I am drawn to a simple palette. I like that the image is not a stark black, white, and blue, but a sandy beige, a charcoal black, and a muted blue. It gives the cover a hand-made feel. It appears more like a primary source document than a cheap copy.

The pop of blue is my favorite part of the image. It shows the movement of the water, which is wrapped like tendrils around the head of the whale. The inclusion of blue brings the image to life. I decided to color the blue black, just to see how that would change my overall impression of the image:


Unsurprisingly, I find the design much less effective. The water reminds me of a poorly placed wig. I think that were the artist constrained to black and white, he would have had to reconceptualize the image.

The next thing I looked at was the typography. I recalled what my professor, Katherine Dillon, said about the virtues of consistency. She mentioned that a common design mistake is the inclusion of too many fonts. In this cover, the font of the title and the font of the author/illustrator are very similar. As you can see, some letters (like the “d” and “c”) are almost identical in appearance, but a few others (like the “m” and “b”) have noticeable differences. Overall, I don’t think the designer got carried away with variances in font. The typography has a nice consistency:

!!!!!!!!!!!!!moby-dick-typo-same              moby-dick-typo-diff

The main typographical flourish is on the “b” and the “k”. I really like this detail. The curlicues seem almost thematic. They remind me of little fishes, and of rope being tied around a mast:

!!!!!!!!!!!!!moby-dick-fishies               moby-dick-rope

As a final note, I’m proud of my first foray into photoshop!


PS. (phoray???)