Category Archives: code

🎵🔴🔶🔵 lego sound sequencer 🔵🔶🔴🎵

the winter show

Here’s the project setup, an hour before the show (and me, nervous and excited.)



things I learned:

it’s fun, it’s funny

Once people got it, they really loved it! People described it as “fun,” “addicting,” that they could “just keep going.” People smiled, laughed, got silly with the sounds: “ba-ba-ba-ba…. aaaaah….. hellooooooo?”


I would feel a little nervous if I saw them put on headphones without reacting… then immediately relax if they started smiling. “That’s so funny,” they’d say about the sounds. “Like a bunch of animals,” or “a load of babies.”




I feel good that I built up enough of a system that people started imagining other applications for it…

What if you could use it as a gameboard base, and create other blocks, puzzles, and drawings to play on top?

What if you could build upwards? Or save your song?


fewer bricks is better

It was often more effective to play with a few bricks at a time. More than roughly 2 of each color made everything a very noisy wash. From an interaction standpoint, it felt important to be able to see the causality of what you were building.


kids just wanna play

Kids just want to play with legos. They’re the best testers in that way, regardless of your project’s audience, because they’re not going to listen to you… they’re not going to read… they’re just going to explore hands first.

Here are some nice things that thoughtful little people made.

IMG_20171217_174200Like some of the adults, too, the kids were driven by what looked cool, not what sounded best. In fact, the temptation to make something with Legos was so strong that even people who were just loitering would just drop some bricks on the canvas for fun.


go with the grain

In some ways, I made a project which is against the grain of legos. You can’t push things together very hard, and you can’t stack things to any novel result.

In some ways, it was much better for adults, because it required deliberate care and attention. One parent said of their kid, “She doesn’t really know what to listen for.”
Adults might love the concept behind it, or start dreaming about the business prospects…
Legos shouldn’t required deliberate care and attention. In this sense, my project opposed Lego-ness.

Screen Shot 2017-12-22 at 1.36.28 PM.png

My project also opposed the grain of public interactive showcases: it was very sensitive to changes in noise and light. The tech wasn’t too forgiving– errors in image-processing sometimes felt jarring and obvious.

Finally, as more visitors came and played with it, it would often behave more and more “broken” until I restarted it. Though, I think that’s probably common for many projects. Still, my dream for it was for recorded voices to accumulate, erase, and become more interesting over time, capturing the vibe of the last musician.



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.