ICM Final Project Brainstorm

Screen Shot 2018-11-08 at 5.06.56 AM.png

(Image above from the National Geographic infographic on Bird Migration)

Idea 1: A musical project based off of bird migrations

Creating a musical instrument/composition based off of migration/ flight data? Maybe showing say like above, 5 different species = sonic parts that you could turn off and on? As you select the “instrument”, like “Seabirds”, you could then see it drawn out as a line, and hear it solo, or layered with other selected “instruments?”

You could turn on or off different species’s paths. Still very open to what the tones would be like. Would it be a pre-created composition in a way? Where you can add and subtract layers as a user, to hear how the different migrations are working together? Or would it be more like Mta.me, where it draws the migration path, and the user can pluck it with a mousePressed function? A slight delay could help the tones accumulate / later ❤ Giving the user more agency as the composer?






Mta.me by Alexander Chen

Very inspired by a project called “Conductor” (2011) ❤ And thinking about how to playfully interact with data?

[Interactive Link (in browser)]


Stephanie K’s Bird Sounds in C – Was inspired by Stephanie K’s Bird Sounds in C project. It reminded me of an experimental Cellist’s show I went to a couple years ago at a place called the Firehouse. The Oakland-Based musican Helen Newby had played a composition that was comprised of different abstract drawn marks. The marked music sheets were really beautiful artifacts in it themselves ❤


Screen Shot 2018-11-08 at 10.54.46 AM


National Geographic’s Bird Migration / Interactive Map 

Screen Shot 2018-11-08 at 5.07.58 AM.png

Link here 

Also Inspired by Brian House’s thinking about data and sound



Other ideas: 

A 2nd idea : A Firefly catching experience. with each firefly caught? a line from a json data file appears(or maybe it’s musical tones?)? could have then once all of them are caught (slowly accumulating in a jar?) you’re taken to a different level screen, where you release them in the end after succeeding a 2nd task ❤

Video & Pixel Tutorials


Screen Shot 2018-10-31 at 1.12.00 AM.png

This week in ICM, our homework is to create something that applies our new knowledge in Video & Audio in the p5.js environment. Part of the HW is to watch/work through Daniel Shiffman’s coding train playlist #11: Video and Pixels – P5.js. Below are screen-recordings of me following along with the tutorials & their github code examples here ❤ ❤







Continue reading “Video & Pixel Tutorials”


Full Screen (in browser)

P5.js Editor view

Week 6 Assignment

Create a sketch that it uses HTML controls (like buttons, sliders, text input fields) as a means of modifying the sketch’s behavior in real time. (You can adapt a previous homework assignment for this if you’d like.) BONUS: Incorporate an HTML control from p5.dom that we didn’t talk about in class. Alternatively or in addition, use p5.dom to modify other elements on the page (these elements could be added by hand in index.html or dynamically added by your code.)

Continue reading “ICM HW#6: PDOM, CSS & HTML”

ICM: Week 5 – Objects and Arrays



Cloud City 




Arrays and objects allow you to do something new with your programs: keep track of user action over the course of your sketch’s execution. For this week’s assignment, create a sketch that takes advantage of your new skills. The sketch should allow the user to use clicks, key presses, etc. to add new elements to the scene (and potentially to remove them later). Your sketch should use an array of objects. (Using a constructor function or the class syntax is optional.)

Originally I was inspired by Allison Parrish’s example in the notes on Objects & Arrays




  • Thinking about Arrays within Arrays (or really arrays as objects?)
    • Would like to comb back through code with an *objects & methods* approach:
    • When talking with classmate Jiwon Shin  we started talking about how i could add a deletion tool to my current sketch state (which pushed mouseDrag to an empty array when you drew with mouse down to create each cloud). She walked me through how I could push all of the point drawn with the mousePressed into an array that is then pushed into another array – essentially making cloud objects?


  • One issue I hit when deleting was the program would break if you hit the delete key too many times. When debugging it in the console, we noticed it would try to call a negative number from the array (which doesn’t exist), as a solution – limited the call number to positive numbers only. So no matter how many times you hit “c” the program will still only reference the array number 0, and add on as you draw more clouds.


  • it still breaks if you click without drawing something – it confuses the program, due to no information being pushed to one of the arrays?