ICM Week 5

This week we talked about defining our own functions, and tidying our code. While I slightly changed the look of my project from last week I made a lot of changes within the code to expand on what I was trying to do. I originally set out to make an interesting 10print example using triangles instead of diagonal lines. This week I implemented a for-loop instead of an if statement for the actual 10print horizontal printing functionality. I then wanted to further randomize things with some sort of user input. I thought using an object I call “color” would be a fun way to change things up. That way while it is printing different triangular shapes I used the mousePressed function to change the colors being printing. As I continue to expand on these ideas I will be making it more user interactive and intuitive how to change the shapes and the amount times it runs.

I also added a new argument to my printing functions called “times” which dictates how many times each function will run. This became interesting when I realized that if I call two functions in draw at the same time, the spacing would actually be different because they are being drawn together. This created crazier patterns and is an interesting idea to try and expand on in the future. Below are some examples of the resulting images and new code.

ICM Week 4

This week I wanted to focus on creating a simple algorithmic design that iterates, and changes over time. I was really inspired by the 10print example. Instead of using diagonal lines I wanted to incorporate more colors, so I used triangles with fill. I loved watching the program move in rows and grow. I also wanted it to keep changing once it hits the bottom. I began experimenting with different colors and transparencies. Below are some examples of the iterations I went through and the final code.


P Comp Week 4

This week we began experimenting with assigning tones to a speaker. We were also introduced to a pitches.h library designed by Brett Hagman. I used the examples on the Arduino site to help create this simple melody. I also added an if statement so instead of just initializing the song when the program starts, you can trigger it with the touch sensitive resistor in the loop function. Below I figured out a simple melody for the song Old Town Road by Lil Nas X.

After figuring out the melody I wanted, I input the notes into the Arduino IDE. The code is below.


#include "pitches.h"

// notes in the melody:
int melody[] = {

// note durations: 4 = quarter note, 8 = eighth note, etc.:
int noteDurations[] = {
  8, 8, 4, 4, 4, 8, 8, 8, 4,8,8,8,8,2,4,4,8,4,4
void setup() {


 void loop() {

   // get a sensor reading:
   int sensorReading = analogRead(A0);
   int frequency= map(sensorReading, 0, 1023, 100,880);
       // iterate over the notes of the melody:
  for (int thisNote = 0; thisNote < 19; thisNote++) {

    // to calculate the note duration, take one second divided by the note type.
    //e.g. quarter note = 1000 / 4, eighth note = 1000/8, etc.
    int noteDuration = 1000 / noteDurations[thisNote];
    tone(9, melody[thisNote], noteDuration);

    // to distinguish the notes, set a minimum time between them.
    // the note's duration + 30% seems to work well:
    int pauseBetweenNotes = noteDuration * 1.30;
    // stop the tone playing:
    else {
      Serial.println("not pressed");


Below is the final application in use.

Next week I hope to expand on the use of triggering different sounds and LED’s. Eventually I want to create musical applications and hardware, that can interface with the computer in a more intuitive way.

ICM Week 3

For this week’s project Neta and I attempted to make a breathing exercise. We start on the home screen, where we see a prompt that asks how you are feeling. There are two black circles to choose from. When you hover over either circle another prompt appears. “Are you anxious?” or “Feeling good?” If you choose feeling good, it takes you to our exit function. If you choose, anxious it take you to the breathing exercise. This is what the graphics look like.

We originally wanted the circle to inflate while the cursor is hovering, and then stop itself after four seconds. This is where we ran into some issues. We couldn’t get the circle to stop without ending the If conditional. When we did set it to start deflating, it would get caught in a feedback loop at its maximum size. I think by controlling the circle with different variables it could’ve helped us achieve what we wanted. I think a “for loop” could’ve helped too but it is not something we have figured out yet. We did get a slider on the exercise page to turn the background from yellow to pure white.

We then added a smiley face instead of the cursor on the exit function for aesthetics.

Below is the code for the home screen.

We also built on the game state changing in my last project to change when options are clicked.

Here is a link to the final project.


P-Comp Week 3

This week for my observation assignment I decided to look at the Whole Foods automated register lanes. At the 365 whole Foods by Atlantic Avenue, there is always a backup around peak hours. There are three dedicated lanes that flash a new register once it becomes open. If I were designing these lanes I would try my best to incorporate the fact that everyone is extremely frustrated while checking out of the grocery store. They have kids at home, work to finish and places to be. This means everyone just wants to get out of there.

I tend to think of the status bar as an inspiration to make this system better. Why is it so satisfying to watch our data upload with a bar? Imagine uploading and downloading without it! These lanes seem to choose which of the three at random (with a preference to the express lane). How do they code the split? And what data caused the way they divvy up the lanes? This could cause more frustration for the other lanes but does provide a speedier experience for those not getting as much. All of these questions run through the minds of the people in the lanes. They also have screens displaying cooking videos, which do help I think to keep people distracted but also has the feeling of trying to sell you more product.

One way I think I would make this experience better is by using the status bar idea. Create a whole foods app (use the existing prime now app they make you download for discounts, where they are probably just selling more of your data/preferences). Instead, use the app to show the average wait time of both lanes in real time. This could be made using cameras and machine learning. That way, people know the wait time and can plan their expectations accordingly. Also, I would use this data to inform an algorithm that would disperse the express lane-regular lane ratio accordingly.

ICM Week 2

I’m very interested in making games so I decided to focus my project on calls to action and level building. I used simple commands like dragging your cursor over an object, to get the user to trigger an action. I then wanted the game to call a new function to do something else. I made levels for this.

Here I built in the four stages of the project.

These are all the variables I defined
Here you can see I collected the amount of time the user has been clicking, then triggering the next level.


P Comp Blog 2

Getting started with breadboards was really exciting. I want to make hardware for musical applications eventually, so I decided to make a piano light switch.

The first thing I did was set up the connections on my breadboard. I used five lights, each using a 220 ohm resistor. I arranged everything in parallel so that I could close circuits separately.

To create the piano I wrapped a piece of aluminum around the side of a piece of cardboard. I connected that strip of aluminum to the breadboard’s ground. Then I separately connected each LED’s ground to the piece of cardboard, with an opening. This allowed me to use another piece of aluminum wrapped around my finger to close each circuit, when pressed.

ICM Blog #1

I am interested in all types of interaction design. And while I come from mainly a filmmaking background, I have had some experience in making VR, coding in C# for Unity and basic Arduino commands. I imagine myself building upon my knowledge and opening the doors for a lot of projects. This could include the making of devices that work with the internet of things, interactive art using Arduino and motors, and the opportunity to create my own tools for art.

For this week in Intro to Comp Media, I started working with basic shapes and colors in the P5.JS web editor. Once I got the hang of things I started thinking of Picasso as an inspiration, to make a simple abstract portrait. I began drawing on graph paper because I wanted to be able to think about which coordinates to use first when I started sketching.

These are some of the images I used for inspiration.

I began coding and filled in the specific shapes. For some of them, I defined integers in order to keep variables in relation to each other. This can be seen in my second screenshot where I refer to the coordinates in relation to smokex and smokey.

Also I had an RGB color picker on another tab so I was able to find the colors I needed with exact values. I tried to keep things minimal and abstract for the aesthetic. I also added smaller randomized ellipses inside of the smoke to resemble embers.

This is the code for how I made the facial outline.
This is the code for how I made the smoke.

Below is my final piece.

There is a link at the bottom to open it in the web editor, and see all the code there.


P-Comp Blog 1

“…good interactivity design integrates form with function.”

This quote from Chapter 1 of The Art of Interactivity Design perfectly sums up what I hope to bring to all of my designs in this class. As a cinematographer I find a great a parallel to this idea (ignore the fact film itself is not interactive for a second). Often I would see my peers, going after the prettiest shots they could. They would call out, “doing it for the reel” which consisted of potentially abandoning the director’s vision, so they could steal a few shots for their portfolio. And while I could do plenty of reel-hunting in my time, I always try and stick to the director’s vision. I stick to what is going to keep the viewer not only interested, but following the story arc/focusing on pivotal details/focusing on specific characters. I don’t care if there is a pretty shot with the sky outside, if it has nothing to do with the film. I spend my time trying to design an experience for the viewer. And while it might not be the prettiest, it keeps the audience engaged in the stories vision and point of view. And the greatest films in my opinion are those that focus on good form and function. We must understand the story we tell, the interaction we design, and everything around it. And if they service each other we can create real art that is meaningful and reaches its goal.

And while film might not reach the author’s definition of an interactive process, Virtual Reality and other mediums are opening the doors for us to tell stories in more immersive ways. These principles will be very important to telling those stories. Maybe, focusing less on the “awe” factor in VR and instead on the new ways users can now interact with character/plot/theme. Also the design should focus on using more than just hands and pointers.

Bret Victor poses the idea in The Future of Interaction Design, that we should not be limited to interacting with only our hands. And while it is number one way we interact with technology, we should be designing for new types of interaction. For example, recording spatial awareness and eye gazing.

Questions I have going forward:

How can virtual reality stories move us in ways that two dimensional screens cannot?