Category Archives: code

icm final โœจโœจ

The last two weeks have been tough for me on many levels. I decided to pivot my final project from sandwiches. I got some great feedback on that project, but just not enough time to flesh it out the way I want.

For this week (our last week), I instead built out a virtual version of my pcomp project, which is aย lego music sequencer. Some of the functional code I had already written last week.

Here’s the working prototype (which is sure to keep changing!)

Screen Shot 2017-11-28 at 11.20.37 AM.png

I was at first avoiding merging ICM + pcomp for a long time, because I don’t feel like this project, as a browser game, totally stands on its own as a satisfying interaction. Still, this was actually one of the most challenging things I’ve coded so far in ICM. I feel pretty proud, and I learned so much from the experience.

I was up for at least 8 hours in Bobst, where it’s climate-controlled to keep you AWAKE. M2M chocolate and tea kept me going through the wee hours…

The process really pushed me to be very deliberate, detailed, and creative with my debugging. I was working with several layers of storing information…

  • built-in 1D pixel color array ([r,g,b,a])
  • analyzing a 2D brickArrayย (based on x,y coordinates,ย incremented out per brick width and height)
  • asking the 2D brickArray if each index item was more red, green, yellow, or blue based on a ratio of [r] vs [g] vs [b]
  • based on color, storing values “R” “Y” “B” “G” as strings into a 2D “songArray”
  • interpreting strings and playing corresponding sounds
  • stepping through a column of sound at a time, based on frameCount% intervals

Some stills from that late night:

Screen Shot 2017-11-27 at 7.58.12 PM.png

Setting up an array of brick colors… why is it not working?? Ah, because I used “push()” incorrectly.

Screen Shot 2017-11-27 at 8.32.18 PM.png

Finally, console is telling me where each brick is on the grid. Took a while to make sure “x,” “y,” columns and rows were aligned and not reflecting on the wrong axis.


If the sound was successfully stored, it would tell me in the console. (see: “BLUE, beatbox @ x2, y6”)

Screen Shot 2017-11-27 at 8.32.20 PM.png

When experimenting with p5 pixels, I wrote a function to draw a rectangle for each unit to make sure the computer was seeing the image.


Here I was experimenting with pixels, to see if p5 could read the blue lego image as “on top of” the white grid image.”

When we tested it in class, my tester got the premise of it pretty easily. People liked the idea.ย Here were the questions I posed:

  • What do you think a physical experience offers that this one doesn’t? and vice versa?
  • Imagine you can record your own sounds. How long do you think you would play with this before getting bored?
  • What kind of sounds would you like to hear?

The “found sounds” aspect really appealed to people. Mimi asked me to consider if “playing with legos” is the main interaction, or “building music.” Someone suggested screaming lego people…


sandwich side note:

Here’s some of the feedback I got from user-testing my sandwich prototype. I would love to continue this sometime, maybe during J-term? I have too many ideas!

  • “professionalism” section really made people think about their personal definitions
  • people chuckled when they were defining “sandwiches”ย 
  • introduction felt a little long/text-heavy (for some, not all)
  • because it’s modeled after a work test, you want to just get it over with (for some)
  • the ending was confusing. needed resolution. more frustrating than communicating a lack of agency (“I would think your code was broken”)
  • user-testing prototype worked really well!



stop & frisk data, 2016

This week’s homework was pretty challenging for me. I spent most time reviewing Dan Shiffman’s videos to understand how strings and APIs work. (It did help this week, to do part of the quiz *first*, instead of in retrospect.)

The other hard part was figuring out what kind of data set to work with. I spent a good couple hours getting distracted between all these API sites…

These are the ones I narrowed down to, not even the full list!

Screen Shot 2017-10-23 at 12.33.07 AM.png

I’ve always wanted to do something rooted in my surroundings; especially after civic hacking stuff back home in Boston, it lends this sense of investment to do stuff in your own city.

Screen Shot 2017-10-23 at 12.36.28 AM.png

There is so much just on NYC open data alone. (Not to mention, multiple rat sighting maps…)

Screen Shot 2017-10-23 at 12.38.00 AM.png

Here is the CSV for NYC Stop and Frisk data, in the year 2016,ย taken from the NYPD site.

Stop-and-Frisk is a NYC-specific program aiming to lower crime by detaining and searching people “at random,” for dangerous assets, drugs, contraband. It’s known for being incredibly racially biased, and having pretty much no effect on crime.

I wanted to highlight with visuals how biased and ineffective Stop and Frisk is in general, by using a data set to show amount of people stopped last year.

Screen Shot 2017-10-23 at 12.49.29 AM.png

I debugged by using console.log() to continuously print out strings. Later on, I wrote functions to display only text for specific races.

My dataset is currently incomplete, since I never did figure out what “Q” was an abbreviation for.

Overall, this feels like an unfinished experiment to me, and I would definitely like to do more! The aesthetics are kind of rough and arbitrary. Technically, I would like to push myselfย by adding a layer of dataโ€” e.g. showing how the MAJORITY of people who were frisked did not have any contraband, any arms, any weapons whatsoever.


As someone who can be impatient with direction-following, I definitely reached my limit this week of “figuring stuff out on my own.” In other wordsโ€” I couldn’t just subsist on skimming libraries and glancing back at in-class exercises!


leWitt maker (now with 900% more FUNCTION!)

Last week, I made this Sol LeWitt wall-drawing-builder.

Screen Shot 2017-10-02 at 2.14.44 AM.png

It totally does the job, but with very free-spirited, non-compartmentalized code. I have only one function, “randomLines(),” holding the whole thing together. (see above)

Looking at this, it’s not immediately clear what’s going on. Thank god for past Kathy’s comments! And yet still it would be such an undertaking if I wanted to change the way it behaves at all.

This week, we were tasked with rewriting our programs with functions. I’ve worked with functions before so I thought it would be a breeze to simplify my code this way. It wasn’t difficult per se, but definitely I hit a few crossroads in the process.

My objective:
I need something to randomly draw lines, and I need it to do that in a quadrant that I click.

Seems simple enough! But I realized that I had a number of options.

  • I can randomly draw lines, but what kind of lines?
  • Do I need to tell p5 how to make a horizontal line every time I draw?
  • Do I make the lines random when I draw, or make them random before I draw?
  • I can figure out what quadrant, but is it when I click? Or is it all the time?

I did some pseudocode to figure it all out…


I made separate functions for “checking,” and “executing.” For example, checking what quadrant I was in was separate from drawing in that quadrant. This felt cleaner and less error-prone.

I organized the 4 types of lines in their own functions as well. With this flexibility, I can change things so that some lines are drawn randomly and some are not.

There are 9 new custom functions, where there used to be just one.

  • findMouse();
    • checks mouse position against quadrant bounds, returns quadrant #
  • drawLines(x,y);
    • draws a random line pattern using (x,y) to determine location
    • (x,y) are provided by input from “mousePressed()” and “findMouse()”
  • randomNumber();
    • generates a number between 1-5, assigns to global variable “r”
  • randomLines();
    • draws 1 of 4 line types based on variable “r,” determined by randomNumber();
  • horizontal();
    • draws horizontal lines
  • vertical();
    • draws vertical lines
  • diagonal1();
    • draws lines starting from top left
  • diagonal2();
    • draws lines starting from top right

You can check out the improved code here.

banana death

For homework this week, I created game about the urgency of uneaten fruit at home.ย Eat your bananas before they go bad!

(inspired by a true story)


[play the game]
[open code in p5]


I started off imagining a single banana that would change color over a constant time. After looking at classmate Chris Chao’s sketch, I was inspired to put some more interactivity into it. What could be more urgent than clicking on falling objects?


Screen Shot 2017-09-19 at 12.13.18 AM

I was able to make one banana fall pretty easily, using a “y” variable and “y++”. I changed the colors using an “if” statement and color variables.

Screen Shot 2017-09-18 at 9.21.01 PM

A few things I tried, and couldn’t figure out:

  1. How can I make mousePressed() interact with multiple individual banana objects? So far, I can only have my mouseX and mouseY interact with a single “x,y,” which happens to be my central banana. What I did instead was make a big click radius so that clicking anywhere in the banana cluster would clear the screen.
  2. How can I make each banana fall at a random rate? Without objects, every new random() speed I created would affect every single banana.
  3. How do I get bananas that “remember” where they are? I would like bananas in random locations, that would still be bound to the screen AND follow the “if” statement color changes. They would not need to be positioned relative to each other.

The struggle was getting multiple bananas to behave in their own individual way. I’ve done a semester’s worth of object oriented programming before, a few years ago. I would have liked to practice making this an object-oriented game, if I had the time to relearn some OOP.


For a while, they were glued to the same y axis.

What I ended up doing was drawing a single central banana, which had other bananas offset around it, falling at a constant speed. I used arguments/parameters for this in a separate banana() function.

By the end I felt like my code was pretty messy. I had some logic written in draw(), and then other logic in “banana().” Some of this messiness was because of how variables changed over time, or function-specific arguments… or just encountering a bug when I put it in one versus another. I have looots of “if” statements that feel ripe for error.

Still, writing console.log() at every turned helped me figure out where things were broken, at every turn.