Portfolio

Stop Motion

the work documented in this post has gratuitous use of the middle finger. discretion advised I guess.

With my partner, Sarah Liriano, I shot a stop motion animation, set to Oliver Nelson’s Reuben’s Rondo. In it, my character struggles with his anthropomorphized middle finger, after being jostled by a colleague. Though the tone of the animation is light, I intended this piece to be a physical representation of the struggles individuals with obsessive-compulsive, mood, and pervasive-thought disorders may face in their day-to-day life.

We ended up using Dragonframe software and a Canon EOS Mark 3 camera to collect and stitch our stop motion images. I had anticipated how time-intensive the process of shooting the animation would be; approximately 5 hours in total. We planned well in ahead, writing our storyboard before the day we decided to shoot. However, because we neglected to mark up my finger in the shooting phase, editing the middle finger face (which Sarah created in Adobe Illustrator) required tedious, manual, frame by frame adjustment to overlay with my finger.

Pcomp – Initial Final Concepts

For my Physical Computing final, I have two potential ideas:

1. “One Track Mind”

One-track mind is a turntable, with an RC car set atop it. The car and turntable would be moving in opposite directions, at the same velocity, so that the car would stay in the same place on the turntable while it spins. The car and turntable would be in communication with one another through Bluetooth. The interactive, and most difficult part, of this project, would be a potentiometer that would change the speed of the turntable and car simultaneously. I am also considering integrating some sort of LED into the turntable that can help delineate what speeds the turntable/car has reached. I may have the RC car look like a brain.

This is a sketch of my project "one track mind" as described in the text

2. Title TBD

This project would utilize the portable EEG reader NeuroSky, or a more affordable model (pending feedback) to halt the perpetual motion of an RC car. For this project, I would definitely try to make the car look like a brain.

This is a sketch of my project, Title TBD, as described in the text

Pcomp Midterm – Numbskull

With my partner, Simone Salvo, I created a “talking” skull, which would play a Donald trump quotation sound-byte, display a corresponding fake tweet, and flash red, white, and blue eyes – all activated by a hand press on Dostoyevsky’s The Idiot.

In creating this project, we used Arduino Uno because it gives out higher voltage than our standard Arduino Nano (5V vs 3V). Our concept went through two iterations, one where we planned for the use of simple red LEDs for our eyes, and our later iteration where we used multicolor NeoPixel LEDs. Many of the components we programmed for we had worked with in one way or another in our lab, as such much of our code had essentially been pre-written on the Arduino side. However, we found that in order to make our button serial input trigger we had to go back and “uncouple” the code we had written, separating each individual action into their own function. In doing so, we realized that we could have reconfigured our button press feedback to rely on the buttonPress() function, instead of the newState()/oldState() functions. It is simple conditions like these that could have taken out multiple instances of delay() from our Arduino code – which we have learned could have been mitigated with millis().

An initial stage, where our mouth servo motor was successfully being controlled by our book-button.
Fabrication stage

In all, this project worked exactly how we wanted it to for our presentation – moving forward, we could do more to “clean up” our code, and utilize best practice. That is not to say that our code was poorly written, in fact, this project was an opportunity to appreciate the many ways in which solutions can present in programming problems. However, I have a new appreciation for writing code in a style that separates different functions distinctly.

Pcomp Creative Experiment – Home Made Pong Retrospective

Without realizing it, I went ahead in the week we were supposed to learn about the basics of asynchronous communication (week 6) and tried to set up a feedback system with two types of serial input (a week 7 concept). With the help of my instructor, I discovered that (unsurprisingly) more work was needed to read feedback from both of my potentiometers, which I intended to use to determine the position of my pong paddles. I found the Arduino code relatively straightforward to program, though I struggled (and still struggle) to animate two elements of a p5 sketch creatively. To realize my vision, I used my Arduino code but interfaced it with a java sketch written in processing, available here.

One troubleshooting phase video
My successful result!

Though I may not have succeeded in creating the animation I desired in p5, this project was a great entry point into troubleshooting with serial input, and figuring out the complexities of math-based objects in p5. It certainly solidified my capability in integrating serial input into basic objects- however, when I wanted to create objects that relied on serial input but were able to react to the ball element in my sketch, I struggled to make the paddles react to the ball.

ICM – Week 7 Assignment

This week we were tasked with cleaning up the code from last week’s assignment. Frankly, I found that my code was clean and satisfactory, without redundancies, so I added an outro level to my animation exercise that prevented my users from surpassing 100 cat clicks.

The ease with which I was able to construct this level was surprisingly gratifying. Without assistance, and with minimal troubleshooting, I was able to execute a precise vision of what I wanted to create; I have come a long way. I find it both satisfying and funny that for each week, with each tool I’ve learned, I’ve come closer and closer to the game I wanted to create for my first ICM class. To that end, my increased comfortability with JavaScript has given me hope that I will, eventually, be able to approach and master (with time) higher-level programming concepts like machine learning, and addictive user interface development. To be clear, I am not interested in understanding these tools exclusively because I want to generate with these tools – I see danger in their overuse, but recognize that in order to contend with the dangers these tools present I must first understand them. In a funny way, my addition this week reflects my concern that technology grabs our attention to a toxic degree, and I am excited that I can push back against this trend at a level that reflects my (growing!) capability.

Images for this and last week’s documentation to come

ICM – Week 6 Assignment

This week, our class was expected to create a sketch with constructor-based objects, and explain our sketch. I decided to continue on an original idea I had had, a balloon popping game, utilizing new and old skills from throughout my projects. I used arrays to generate my cats, and the transparent “button” ellipses that allowed my counter to increase, and the position of the cats to reset. I used for loops to populate my arrays, and move my cloud animations (as I had done in the past). I also uploaded a new font to match the 8-bit aesthetic of my animation, and a loading screen that reflected the same aesthetic

The only issue I ran into was when I tried to draw from a randomized “meow” array, which would play when I pressed my ellipse balloon buttons. I assume the issue came from the syntax I used after establishing the variable in the constructor, or the syntax I used when linking it to the event “clicked”.

Pcomp Creative Experiment – Audio Player Retrospective

As a creative adaptation to the fifth “tone output” lab I attempted to get a speaker to play a preloaded wav file of “The Price is Right” theme song. My hope was that I could use 3 buttons to operate as rewind, play/pause, and fast forward commands for my song. Though this project was not successful, I found the process of attempting to troubleshoot my circuit and code incredibly valuable.

This was my first attempt at assembling a circuit with an Arduino Uno, and it was a wakeup call for me to better understand C++ programming in the Arduino application. I was able to reach a point of comfort where I could test feedback from the components in my circuit. This was helpful in realizing that one of my buttons was broken, but that my other buttons worked and my SD card reader was transmitting information to my Uno.

I believe my failure came from my circuit building, and when I attempt this project again I will rectify two elements. First, I will try to build my circuit with different buttons, as I found these components hard to plug in and a source of frustration in my initial stages. Second, I was not using a “standard issue” speaker, instead, I used a cheap tweeter which I had purchased at Tinkersphere. I had checked this component, with a potentiometer, and while it “worked” I believe I should have soldered the comparatively frayed wire ends of the speaker to the more solid, easily pluggable wires.

Match Watch – Process

Our finished product!

For my final project in Comm Lab, Video & Sound, I collaborated with Youngmin Choi and Julie Lizardo to write, direct, and edit a commercial for the fictitious product, Match Watch. Match Watch would be a surveillance service for couples to keep tabs on each other to a toxic degree by utilizing contemporary surveillance technologies present in day-to-day applications.

In this sense, Match Watch is both a parody and a satire. Match Watch parodies the glib way in which technology companies present privacy-invasive technologies both for their own gain and often to the detriment of their users. Match Watch satirizes how these same technology companies facilitate toxic relationship habits, like stalking, with features like location services.

Developing Match Watch was a fascinating insight into the process of shooting a semi-professional grade video, and satisfying closure to this course. In each step of our project, we utilized skills that we have learned throughout our course, adapting these skills to fit our needs as unique issues arose. For instance, in order to shoot a scene of me walking down a hallway, we placed a tripod on a rolling chair to facilitate a stable tracking shot. Similarly, when faced with an issue where (in retrospect) one of our actors had spoken too softly, we used Adobe Audacity to raise the volume of their dialogue without distorting the clip.

ICM – Week 5 Assignment

This week, my class was expected to represent our comfort in defining our own functions and creating objects. After some practice, I felt very comfortable using these tools – and utilized some old code that I had used to make balloons float, to make a pattern of multiple bubbles floating. This was satisfying because I had initially struggled with making multiple balloons float, and I was able to overcome this obstacle and apply it in a new animation. I also learned how to add audio and gifs into my animation, I look forward to using these skills in future projects.

I ran into two interesting issues. First, for whatever reason, I could not get Adobe Photoshop to represent the color I had generated for my background in the background of my seaweed images. Second, I wanted to try and generate a realistic water ripple pattern and was not able to find any examples written in JavaScript. In the future, I’d like to see if there is a way I could interface different languages in a similar manner to p5.serialport.js (used to communicate with Arduino).

Below is a video of my final animation:

Below is the code I used:

let x;
let y;
let speedX;
let speedY;
let d ;
let gif_loadImg;
let gif_createImg;

let b1 = {
  x: 0,
  y: 25,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b2 = {
  x: 50,
  y: 40,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b3 = {
  x: 100,
  y: 60,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b4 = {
  x: 125,
  y: 91,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b5 = {
  x: 150,
  y: 84,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b6 = {
  x: 400,
  y: 93,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b7 = {
  x: 450,
  y: 101,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b8 = {
  x: 500,
  y: 30,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b9 = {
  x: 3700,
  y: 74,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b10 = {
  x: 420,
  y: 24,
  speedX: 3,
  speedY: 5,
  d: 5
};
let b11 = {
  x: 400,
  y: 300,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b12 = {
  x: 450,
  y: 250,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b13 = {
  x: 500,
  y: 275,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b14 = {
  x: 370,
  y: 274,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b15 = {
  x: 420,
  y: 244,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b16 = {
  x: 42,
  y: 24,
  speedX: 3,
  speedY: 5,
  d: 5
};
let b17 = {
  x: 24,
  y: 300,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b18 = {
  x: 45,
  y: 250,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b19 = {
  x: 65,
  y: 275,
  speedX: 3,
  speedY: 5,
  d: 5
};

let b20 = {
  x: 37,
  y: 274,
  speedX: 3,
  speedY: 5,
  d: 5
}

let b21 = {
  x: 90,
  y: 244,
  speedX: 3,
  speedY: 5,
  d: 5
};

let bg = {
  r: 62,
  g: 96,
  b: 167
}

function clearCanvas(r, g, b) {
  background(r, g, b);
}

function drawBubble(x, y, d, bubbleColor) {
  fill(bubbleColor);
  circle(x, y, d);
}

function initializeBubble(b1) {
  b1.x = width / 18;
  b1.y = height / 2;
  b1.speedX = b1.speedX + random(-1, 1);
  b1.speedY = -1;
  b1.d = 5;
}

function updateBubble(b1) {
  b1.x = b1.x + random(-1, 1);
  b1.y = b1.y - 1;
  if (b1.y < 0) 
  b1.y = height; 
}
  
// drew gif insertion concept from https://editor.p5js.org/kjhollen/sketches/S1bVzeF8Z
function preload() {
  gif_loadImg = loadImage("fishes.gif");
  gif_createImg = createImg("fishes.gif");
  song = loadSound('dive.mp3');
  img1 = loadImage('seaweed.png');
  img2 = loadImage('seaweed3.png');
}

function setup() {
  createCanvas(550, 390);
    initializeBubble(b1);
}

function mousePressed() {
  if (song.isPlaying()) {
    // .isPlaying() returns a boolean
    song.stop();
  } else {
    song.play();
  }
}
function draw() {
  clearCanvas(bg.r, bg.g, bg.b);
  gif_createImg.position(155, 0);
  image(img1, 0, 200);
  image(img2, 350, 200);

//b1
drawBubble(b1.x, b1.y, b1.d, 255);
  updateBubble(b1);
  
//b2
drawBubble(b2.x, b2.y, b2.d, 255);
  updateBubble(b2);  

//b3
drawBubble(b3.x, b3.y, b3.d, 255);
  updateBubble(b3);    

//b4
drawBubble(b4.x, b4.y, b4.d, 255);
  updateBubble(b4);    
  
//b5
drawBubble(b5.x, b5.y, b5.d, 255);
  updateBubble(b5);    
  
//b6
drawBubble(b6.x, b6.y, b6.d, 255);
  updateBubble(b6);    
  
//b7
drawBubble(b7.x, b7.y, b7.d, 255);
  updateBubble(b7);    
  
//b8
drawBubble(b8.x, b8.y, b8.d, 255);
  updateBubble(b8);    
  
//b9
drawBubble(b9.x, b9.y, b9.d, 255);
  updateBubble(b9);    
  
//b10
drawBubble(b10.x, b10.y, b10.d, 255);
  updateBubble(b10);  

//b11
drawBubble(b11.x, b11.y, b11.d, 255);
  updateBubble(b11);    
  
//b12
drawBubble(b12.x, b12.y, b12.d, 255);
  updateBubble(b12);    
  
//b13
drawBubble(b13.x, b13.y, b13.d, 255);
  updateBubble(b13);    
  
//b14
drawBubble(b14.x, b14.y, b14.d, 255);
  updateBubble(b14);

//b15
drawBubble(b15.x, b15.y, b15.d, 255);
  updateBubble(b15);

//b16
drawBubble(b16.x, b16.y, b16.d, 255);
  updateBubble(b16);    
  
//b17
drawBubble(b17.x, b17.y, b17.d, 255);
  updateBubble(b17);    
  
//b18
drawBubble(b18.x, b18.y, b18.d, 255);
  updateBubble(b18);    
  
//b19
drawBubble(b19.x, b19.y, b19.d, 255);
  updateBubble(b19);

//b20
drawBubble(b20.x, b20.y, b20.d, 255);
  updateBubble(b20);

//b21
drawBubble(b21.x, b21.y, b21.d, 255);
  updateBubble(b21);   
}

ICM – Week 4 Assignment

This week, my assignment was to present my competence using for loops. While thinking of projects I often came up with ideas that relied on more advanced concepts – specifically arrays and objects. Initially, I tried to create a yahtzee-esque game, which I intend to complete once I have a mastery of arrays, and particularly, the shuffle function. However, I ended up creating a grid of multiple faces to represent the range of emotions I could be feeling on a given day. As a cute added feature, I included a mouseIspressed function that printed “Lol don’t worry about me, life’s great rn”.

In the future, I believe I could use an array, and the shuffle function, to display a randomized grid of a greater variety of emotions – and would like to do so. Creating the for loops, and aligning these three images in the grid were relatively time-intensive, though creating this project has definitely given me greater insight into how to troubleshoot positioning issues in for loop generated grids.

This is a picture of my screen, which shows the code and preview that I described above

Below is my code

const GRID_SIZE = 3;
let confused;
// function preload() {
//   img = loadImage('confused.png');}
let frustrated;
// function preload() {
//   img = loadImage('frustrated.png');}
let sleepy;
// function preload() {
//   img = loadImage('sleepy.png');}

function setup() {
  createCanvas(400, 400);
  confused = loadImage('confused.png', img => {
    image(img, 0, 0);
  });
  frustrated = loadImage('frustrated.png', img => {
    image(img, 0, 0);
  });
  sleepy = loadImage('sleepy.png', img => {
    image(img, 2, 2);
  });
}

function draw() {
  background(220);
  textSize(16);
  let rectSide = width / GRID_SIZE;
  for (let x = 0; x < GRID_SIZE; x += 1) {
    for (let y = 0; y < GRID_SIZE; y += 1) {
      let xPos = x * rectSide;
      let yPos = y * rectSide;
      rect(xPos, yPos, rectSide, rectSide);
      let circleSize = width / 3;
      for (let i = 0; i < width; i += GRID_SIZE) {
        image(confused, xPos + 35, height / 2.4, 80, 80);
      }
      for (let i = 0; i < width; i += GRID_SIZE) {
        image(frustrated, xPos + 35, height / 9.7, 80, 80);
      }
      for (let i = 0; i < width; i += GRID_SIZE) {
        image(sleepy, xPos + 38, height / 1.35, 83, 83);
      }
    }
    if (mouseIsPressed){print ("Lol don't worry about me, life's great rn")}
  }
}