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”

P.Comp: Midterm Progress <3



I made a quick prototype last night with some materials around the house like the cardboard from a Cinnamon Toast Crunch box and a CD case to help with the Pepper’s Ghost illusion. Jiwon kept working with bluetooth options and had a feather coming in tonite. So fun! : D We’re using P5.js on a smartphone to create the image and by decreasing the particle amount, the program is able to run much better now on the phone too ❤

Continue reading “P.Comp: Midterm Progress <3”


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”

Midterm Project Idea




Pepper’s Ghost

My Halloween Midterm partner is the wonderful Jiwon Shin!  ❤ ❤ ❤  Initially we were inspired by the optical effect of a Pepper’s Ghost hologram .  After some super fun brainstorming (and some pepper’s ghost youtube watching), we landed on the idea of  using an accelerometer to sense if we’ve “shaken” ( tilted ) a bottle or not to help a trapped soul escape.We were very inspired by Yoko Ono’s exhibit “We are all water”

Continue reading “Midterm Project Idea”

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?