Portfolio

ICM – Week 3 Assignment

This week my partner, Ashwita, and I expanded on my initial balloon popping game concept. We wanted to expand the concept by being able to generate multiple balloons, have those balloons change colors in a non-monochromatic range, have the balloons be pressable buttons (instead of relying on a general mouseClick function), and to incorporate a popping sound and pop counter.

We ran into the following problems. First, we could not figure out how to make a circular moving button (the balloon). We tried doing so by using the distance function and not having the balloons pop when clicked, but when the mouse hovered over the balloons instead. We also struggled with making each balloon, as individual objects, separate clickable entities.

Pending feedback we look forward to making different levels, turning this exercise into a game. Below is a video of our animation, with a final and test iteration of code.

let balloonColor;
let balloonPositionX;
let balloonPositionY;
let s = 'POP lol';
let r,g,b;
let imga, imgb;
    
function setup() {
  createCanvas(800, 600);
  balloonColor = random(255);
  balloonPositionX = random(0,200);
  balloonPositionY = 400;
}


function preload() {
  // sound = loadSound('balloon-pop.mp3'); // balloon pop sound
  imga = loadImage('balloon.png');
  imgb = loadImage('balloon.png');
}

function draw() {
  background(220);
  image(imgb, balloonPositionX, balloonPositionY, 200, 200);
  push();
  pop();
  fill(0);

  // pin 
  ellipse(mouseX, mouseY, 5, 5);
  line(mouseX, mouseY, mouseX + 20, mouseY - 10);
  
  //floating balloon waver
  balloonPositionX = balloonPositionX ;
  balloonPositionY = balloonPositionY - 4;
  if (balloonPositionY === 0) {
    balloonPositionY = 600;
    balloonPositionX = random(0,400);
    balloonColor = random(255,0,0);
  }
  if (mouseIsPressed) {
    // text(s, balloonPositionX , balloonPositionY, 80, 80)
    balloonPositionY = 600;
    balloonPositionX = random(0,800);
    balloonColor = random(255);
  }
}

Below is the code for one of our test iterations

let counter1 = 400; // counter for balloon 1 
let counter2 = 600; // counter for balloon 2
let xpos1, xpos2; // the horizontal positions for the balloon 1 and 2
// let speed = 1;
let position;
let ypos;
var sound;
var imga, imgb;
let bx1, by1, bx2, by2;

function setup() {
  createCanvas(400, 400);
  xpos1 = random(0, 400); // setting a random position for balloon 1
  xpos2 = random(0, 400); // setting a random position for balloon 2
  ypos = random(0, 400); // setting up horizontal pos. differences between Balloon 1&2.
  bx1 = random(0, 600);
  bx2 = random(0, 600);
  by1 = random(0, 400);
  by2 = random(0, 400);
}

function preload() {
  // sound = loadSound('balloon-pop.mp3'); // balloon pop sound
  imga = loadImage('balloon.png');
  imgb = loadImage('balloon.png');
}


function draw() {
  background(255);
  strokeWeight(1);
  image(imga, xpos1, counter1, 200, 200);
  // let ball1 = rect(xpos1,counter1,50, 50) // balloon 1 represented by a square

  // to make the balloon float one after the other in a loop
  if (counter1 <= -50 && counter2 <= -50) {
    counter1 = 400;
    counter2 = 600;
    xpos1 = random(0, 400);
    fill(255); // resets the color every loop 

    if (dist(mouseX, mouseY, xpos1, counter1) < 200 / 2 ||
      dist(mouseX, mouseY, xpos2, counter2) < 200 / 2) {
      background(0);
    } else {
      background(255);
    }
    
    // ellipse(bx1, by1, d, d);
    // ellipse(bx2, by2, d, d);
  }
  image(imgb, xpos2, counter2, 200, 200);
  // let ball2 = rect(xpos2,counter2,50, 50); // balloon 2 represented by a square
  counter1 -= 1;
  counter2 -= 1;


  ellipse(mouseX, mouseY, 5, 5);
  line(mouseX, mouseY, mouseX, mouseY - 15);

  // // making the balloon pop sound
  // if (mouseIsPressed) {
  //   // sound.play();
  //  fill(0,0,255);
  // }


}

Match Watch – Storyboard and Synopsis

This is a gif of our storyboard for Match Watch, a romantic partner surveillance app. It's a series of static black and white images of mannequins.

Our project is an infomercial for a product called Match Watch. Match Watch is an application and digital service designed to help partners keep track of their significant others through questionable surveillance means. Our infomercial will depict a scenario where the application would be necessary, a description of the product, testimonies pertinent to the success of the product (facetiously), and a demonstration of a limited-edition service offering.

Public Technology Observation – LinkNYC

In observing how consumers utilize LinkNYC, my cynicism and disdain for this public technology have been affirmed. On the surface, LinkNYC is benign, if not handy; built so that its buttons and touch screen sit at a height that is accessible to all, adults and children alike. As LinkNYC is a New York City initiative, Link booths are presumably ADA compliant. However, LinkNYC is a private piece of surveillance technology, and like all surveillance technology, it has a disparate impact on who is “targeted” by its true purpose. LinkNYC booths and their private parent company have been at the center of many lawsuits surrounding data privacy violations. The ease and inviting aesthetic of LinkNYC obfuscates its nefarious, similarly opaque practices of data collection and sale.

In my observation of how this technology is used, the majority of peoples who gave “links” more than a passing glance were individuals who appeared unconventionally housed. Were LinkNYC a public good, with no perverse incentive to collect and monetize the data of its users, I would take no issue with this dynamic. However, the fact that LinkNYC (in my observation) almost exclusively appeals to vulnerable peoples in our society, one must consider how features that may seem convenient at first glance, are ultimately predatory. For instance, LinkNYC has phone charging ports that, in keeping with the interaction trends I witnessed, unconventionally housed peoples utilized the most, and longest. Bear in mind, these are individuals who may not be able to charge their phones at home, at work, or even in a private business due to stigma – convenient design features for the more privileged can be lifelines for these individuals. 

The majority of people I witnessed using LinkNYC used these booths to charge their phones – these transactions took the longest, almost definitely contingent on the user’s battery charge.  I did not witness anyone use LinkNYC to place a phone call, perhaps this speaks to how little people place phone calls in general.

Sound Guide Reflection

Creating a sound guide gave me perspective into how mindlessly I ingest subtle audio cues in my environment. I got to know the history of 370 Jay Street through our sound guide.  By searching the history of each sound Sylvan and I recorded through our initial walk in the basement; I inverted my usual approach for understating a space, and am grateful for having experienced this process differently. I would not take any element of this process back, though, I might have wanted to do some research about the space before entering the basement so that we could better select the sounds we warped into abstraction. Furthermore (though there was equal input throughout), I might have delegated the load of sound editing and pamphlet making more evenly, though we were both versed in these practices. Overall, I am pleased with our ability to guide without direct guidance, as the excess of guidance in the sound guide, I attempted leading up to this project frustrated me greatly.

ICM – Week 2 Assignment

For this week I was tasked with animating a scenario where elements acted automatically and were interactive. I knew I wanted to animate a poppable balloon, however, my initial approach (which I, unfortunately, scrapped before I could document) left me more confused than inspired. After an insightful help session with my professor, I was put on the right track, and was able to animate the following work. Partly my issue stemmed from not knowing the material well enough, though I would say a larger issue I ran into was conceptualizing how best to plan and approach my design in individual steps.

Balloon Popping!

Below is the code I wrote to generate my project.

let balloonColor;
let balloonPositionX;
let balloonPositionY;
let s = 'POP lol';
    
function setup() {
  createCanvas(400, 600);
  balloonColor = random(255)
  balloonPositionX = 200
  balloonPositionY = 400
}

function draw() {
  background(220);

  fill(balloonColor);
  ellipse(balloonPositionX, balloonPositionY, 100, 140);
  push();
  noFill();
  bezier(balloonPositionX, balloonPositionY + 70, balloonPositionX + 20, balloonPositionY + 100, balloonPositionX - 20, balloonPositionY + 150, balloonPositionX, balloonPositionY + 200);
  pop();
  fill(0);
  ellipse(mouseX, mouseY, 5, 5);
  line(mouseX, mouseY, mouseX + 20, mouseY - 10);
  balloonPositionX = balloonPositionX + random (-1,1);
  balloonPositionY = balloonPositionY - 4;
  if (balloonPositionY === 0) {
    balloonPositionY = 600;
    balloonColor = random(255);
  }
  if (mouseIsPressed) {
    text(s, balloonPositionX - 20, balloonPositionY, 80, 80)
    balloonPositionY = 400;
    balloonColor = random(255);
  }
}

Moving forward with this project, I’d like to be able to have the balloons generate in multi-color (non-monochrome). Furthermore, I would like to add a pop counter, and have multiple balloons generate, to turn this small project into a full game.

Creative Switch

For this assignment, I knew that I wanted to use a material that was readily accessible, unconventional, and conductive. Gatorade was a natural choice as a medium, as the same chemicals that imbue the beverage with electrolytic properties are what make it so beneficial for biological replenishment. The circuit sits atop the Gatorade bottle top, with the ground and live wires sitting inside the Gatorade bottle. The switch occurs when the Gatorade vessel tips and the Gatorade liquid completes the circuit between the two live wires.

In order to create this circuit, I learned how to solder. This was essential not only to connect my LED (circuit success indicator) to my resistor and power source. One of the greatest frustrations I ran into in this process was that I could not find a sufficiently small heat wrap to sufficiently waterproof my ground wires, in order to prevent my circuit from shorting. To mitigate this issue, I soldered the ground wires together and wrapped the soldered connection in electrical tape; passable, but not preferable.

I created two versions, the second more aesthetically pleasing. Below are videos documenting the first test of my circuit, the completion of my first design, and the completion of my final design.

Circuit Test
Switch Test Version 1
Switch Test Final Version

Creating a Sound Guide for 370 Jay Street

My partner, Sylvan Zheng, and I went through many concepts of where to conduct our sound guide. Initially, we had decided to conduct our sound walk in the elevators for 370 Jay Street. In preparation for this project, we recorded sounds from each floor’s lobby and sounds of each elevator with a zoom and shotgun mic. We ended up using none of this material.

Spontaneously, we decided to take the freight elevator to the bottom floors of our building. It was during this excursion that we stumbled upon our Sound Guide location – floor CM.

Sylvan and I, using the same recording materials, recorded sounds from floor CM: air conditioning, heavy machinery, and other ambient industrial noises. We mixed the audio component of sound guide in Ableton, mixing our recorded noises with droning music, and beginning the track with an ominous introduction.

You may access our audio guide here.

Our audio guide was very hands-off in directing our listeners through the space we selected. Thus, we created a supplementary packet with a map and newspaper clippings about the history of some of the elements on the floor. We went through different iterations of our map based on feedback from our peers who attempted our sound walk.

Below is a gallery of the accompanying packet pages.

On the cover of our packet, we included Ode on a Grecian Urn by John Keates – Keates’ poem touches on the fall of empires and the beauty of their rebirth, a perfect metaphor for the reconstruction of 370 Jay Street.

ICM – Week 1 Assignment

Part 1

I see a practical application to creative computation in my work in Child Psychology research. Too often we fail to collect data from children because our studies’ “games” are excruciatingly boring, straining the attention spans of our subjects. I believe this issue extends to science education for children as well. I would like to build a more engaging synthetic face animation that could speak research prompts to children, to improve the efficacy of our data collection. I would also like to see more tactile early learning educational tools to teach scientific concepts – much like the Nervous System project listed in the ICM wiki page.

Part 2

I enjoyed the face making task, though at times I found the web editor tedious to work with. I struggled to interpret the directions for how to generate arcs – I mitigated this issue by googling other, more clear tutorials. I would say benefitted overall from drawing the components of my face out before programming it. However, I was not prepared for how much time generating and coloring each element of my face would take. Because creating each component of my face took so long, and even though I set the j5 visual preferences to night mode, I found the display made my eyes tired over time.

Steps of Face Documentation:

I sketched my face, marking which order I might make certain elements.

sketched self portrait with simple shapes and notes

I created each element of my face without color.

Code and digital preliminary self portrait based on aforementioned sketch

I figured out which colors I wanted to use by using a droplet tool to identify color hex codes that best reflect my “bodily palette”. Unfortunately this progress was deleted.

Aforementioned digital self portrait and code, colorized

Sound Guide Response

After experiencing the Whale Creek sound guide, I have left with a new frustration with the multi media mode. Much of the information conveyed by the narrator in this podcast was communicated on plaques throughout the space. What information was not conveyed on these plaques, in my opinion, would have been better left unsaid. Intermittent rhetorical questions, campily voice-acted fictionalizations, and nonsensical linguistic musings undermine the only facet of the audio experience I appreciated: the narrator’s voice. The inclusion of an accompanying packet was cumbersome, and I mostly used it to take my own notes. My final complaint was the artists’ music choice, largely ambient music employed nonsensically, provided no value added to the experience. If anything, their brief inclusion of an Alicia Keys track could have set them up for prosecution over licensing rights violations.

Perhaps I left the Whale Creek experience underwhelmed because, according to the audio guide (but not the pamphlet) I had arrived at the inopportune time – morning instead of evening. Furthermore, I appreciate how this sound guide made me aware of the temporal limitations of the medium if it is not continuously, as I was not able to walk the entirety of the space in coordination with the guide due to construction. Lastly, I will concede my appreciation of the artist’s choice to separate their audio narrative into multiple episodes, to allow time for self reflection.