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:
Here was my original concept:
- Static image of man blowing a bubble with chewing gum
- Mouse over bubble to make it grow in size
- When screen is consumed by gum, user can click bubble to reveal image of a man with gum all over his face.
- 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.
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:
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:
Here is my final drawing, side-by-side with the original concept image:
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!