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-installation

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!

http://alpha.editor.p5js.org/projects/Sk9aWQPT

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:

gum-sequence1

gum-sequence2

gum-sequence3

gum-sequence4

gum-sequence5

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.

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!