ICM – Week #9 – Controlling sound

For this week assignment I got to test the volume option and playing with the oscillator in my old piano keys. The oscillator is being controlled by the mouse so you can play with the mouse and with he keys.

You can find it here.

ICM – Week #14 – Final project – Track and draw

From the past month, we’ve gone through lots of different stages in planning and programing. We changed our idea a week after we made proposal. Our inspiration is zimoun, an European artist that famous of his art installations made of only three simple components, felt balls, DC-motors and cardboard boxes. He mounts the felt balls inside of cardboard boxes and drive them to spring around by DC-motors. We decided to create the visual version of his works, using grids and tracking, and moving circles. Xiwei is actually teaching me some math 🙂 .

We started with drawing a grid on the canvas to be 2D cardboard boxes, and track the mouse so it will fill any curtain square o=into red. That way we can see the route itself that later on will be operated by color moving.



Then we added balls. We created them in white color so they would “hide” on the canvas, unless we move mouse over the boxes, they stay hided. But once we move mouse over boxes, they will show with the boxes turn color at the same time.

After this basic programming, we brought our piece to the class users play testing with several of our fellow classmates. They all expressed that they want to see the cubes stay turned once mouse is over, it also creates a “revealing” sort of motion effect when playing with it. For instance, when our “balls” would be always moving inside of each individual boxes, we wanted to let users to have control over which and how many balls they want to see by act on their ends.


Therefore, we stand out of the format we had for a few weeks and thought about all possible interactions. To put it simple is that we want users to reveal balls inside the boxes by turning the boxes’ colors. And how are we going to do that?

Answer is –Color tracking on canvas by getting the original color from individual video pixels.

After we take that color, we program an algorithm to calculate the closest color on video that captured by the camera, and reflect it on the drawing canvas. The black dot is what being reflected, and it takes the averaged X,Y values that traced the closet RGB values.


When our code is working it’s really fun to play with, but in a lot of cases I know that it was a struggle to find the solution. For example- we found out that using p5 version 5 wont run our code and when we tried it with version 4- it worked. My future thought about p5 is that I have to put more practice in p5 and understand how to debug operations that are not working.

It was a great experience and it made me feel that we can do about anything with code, but I still  need to feel more comfortable around the IDE and syntax wise. I’m really used to the workflow of graphic softwares, and trying to bring the logic of the code to translate the same way as i’m using those software in order to understand better.

The code that worked for us in p5 Ver4 is here .

We showed a presentation in class with slides showing our process, You can find it here: Presentation

ICM – Week #10 – Final projects – New thoughts

We had a few brainstorming last week, thinking how we would like to approach the educational part of our P-comp project. It seems that the group feels that we should focus of the P-comp part of it, and that the P5 interaction will be irrelevant. me and Xiwei decided to make the project in much more artistic direction. I got more familiar with an artists that Xiwei really inspired from: Zimoun, a Swiss sound artist, who mix different materials and mechanics in order to make repetitive sound and environments.

Screen Shot 2015-11-11 at 11.30.57 AM

Our idea is to make sound interaction, that being repeated visually. Unlike the physical sound that being created with ball inside a box, a sound that a user make, will trigger the interactive balls.

ICM – Week #9 – Final projects proposal

To my final ICM project, I teamed with Xiwei to make a visualization guide for our physical computing project made with Ruta. When we presented our P-comp ideas in class I shared my thoughts about making a toy or a game, that is independent and not connected to a computer, but can also teach an electric behavior for young kids. After our brainstorming sessions, we came up with a prototype for our idea, kid’s toy, that exist in the physical world, and for our ICM project – to complete the toy with a guide for the parents, rather than just showing mirrored digital toy. The guide will demonstrate and show what’s going on in every stage of the game puzzle that was solved. We are thinking of a version where the toy conected to the computer and in this one, the parent can control the variables related to the output of the object.

I was inspired by wooden toy games, which I feel can really attract the eye, and if we can make it interactive that can be fun for kids to play with, and also attract parents to get it to their kids.

Barn_Blocks_0102 Barn_Blocks_0054

We draw diagrams for the whole set of toys. that each one teaches a different output:

IMG_1564 IMG_8407

Our first attempt to describe how the toy will look like is this:







The ICM version of the toy will go through all the shapes and possibilities that the child can make with the toy.




ICM – Week #8 – Working with data

After learning to use live data from API in class. I tried to get my hands on Flickr API to get some collection to appear on screen. The amount of time I spend in figuring this out was long, and much more complicated that I thought 🙂 So I went to find a JSON file, which means that I gather data from an existing file. I found JSON file with bunch of information about countries in the world. I edited a bit the list so it will be array format that I will be able to direct the code to the specific element that I visualize.

You can see it here.

ICM – Week #7 – Piano Sliders

This week we started to talk about the DOM library on p5, where we can actually interact with HTML elements in our sketch.

I wanted to make a volume slider for the keyboard I have.

I had some difficulties to connect between values of the sliders, to real values of the volume.

I looked also at the volume media element, and also at the p5 sound library.

I ended up just using the example of the background. You can check it our here.

ICM – Week #5 – Piano keyboard – Rearranging code and visual

This week I sat with Leon, who showed me a few ways of making the code much more elegant and efficient. We used arrays to arrange the actions that are going to be distribute in any letter pressed. This is how the notes variable looks like:

First variable is the key code pressed, second variable is the color code and third is the location on the X axis.

var notes = [
[65, ‘#72d0f4’, 210],
[83, ‘#6effe5’, 190],
[68, ‘#fcbc57’, 180],
[70, ‘#f076ff’,170],
[72, ‘#ababee’,160],
[74, ‘#f295fd’,150],
[75, ‘#95e3fd’,140],
[76, ‘#f6ff6e’,130]

Next step is to add a sound to each key pressed.



After I couldn’t find key notes online, in a way that I can use it in the project, I met Xiaolong, who loves music and making very cool musical instruments. He offered to record it and that’s how he got the name – Xiaolong- king of keys.


I met Leon again, and he magically found a creative way to add a 4th variable inside the array. Leon is a genius.

The keyboard piano turns out quite fun, check it out here.


ICM – Week #4 – Piano keyboard – Colors and notes

So this week, I rearranges a bit my code, and sat with Laura how I can control the color and to assign each key the right location of key using if/else. Although I used functions, I still need to learn how to make the values easier than writing (x+120), I know I should use *,or /, but it was so specific for each note…I hope soon we can here the keyboard make sounds 🙂

Check it out here.

ICM – Week #3 – Piano keyboard

This week I we were asked to pair with someone from our class, in order to have two more eyes watching our code. Sometimes it seems to be the thing missing while writing and finding a solution for the correct code structur.

I collaborated with Juan José Egúsquiza Franco.

We started with Juan José idea of keyboard that changes color each click. I added the thought of maybe creating from this keyboard, a piano that we could play with different keys from the keyboard. 

I joined this passed week Moon’s session, and it was really inspiring. Moon makes it looks easy and simple, which is a good way to think like that, but I feel that I need to learn where those complex but easy codes come from first. it was a great session anyway..After the session Moon explained us how to create shapes in “for loop” and connect them to another action –  drawing circles notes out of the keys.

Example of creating 5 lines for the music notes:

var spaceOfLines = 20;
var beginningOfLines = 100;

function draw() {

  for (var i = 0; i < 5; i++) {
    line(0, spaceOfLines * i + beginningOfLines,
      width, spaceOfLines * i + beginningOfLines);

The “for loop” actually limits the action of writing lines to up to 5 in specific location and spaces between each one. When we got to the point of adding the key press to this code, we couldn’t figure how to make each shape different in matter of difference in keys pressed, that defined by any other square. We had 8 ones, but how can “a” be associated with the first key, if it was created by a “for loop” function?… We struggled with the code, and decided to take this day to see Shiffman’s videos and come with new ideas.

The day after, we decided to create this code from scratch by drawing each square in the old fashioned way, and without loops so we can figure a way to connect key’s pressed. Our first try didn’t work, and we couldn’t figure how to connect the keys to the keyboard. We sat with Sam Lavigne, to figure how to make a specific key to react. He showed us how we can check a specific key “Writing”, which means, that when you press the key, you can see it’s value in the bottom window of p5. Than we had the values of the keys instead of writing ‘a’, and that was the problem. We had nice experience with for loops and creating functions.

You can see the final sketch here.

ICM – Week #2 – Interactive “Etch A Sketch”

This week we went over declaring variables, in order to use it easily down the road with our coding.

A variable get declaration in the top of the setup function.

For example in order to draw a line we should first give our variable (var) it’s position:

So before the code:

var lastX;

var lastY;



in the draw section:


lastY= mouseY;


Im going to try it out in this week’s homework, by creating an “Etch A Sketch” Which probably got to my mind after reading “sketch.js” in P5 environment.

I started by finding a good picture file of the original piece, and cleaning it in photoshop. I also made a scrolling button, so it can move with the lines created. After I failed to upload the image as we learned in class, I went to Jason to get some help, he recognized there is a bug regarding uploading jpeg, so it means we found a bug!

I still hsd to get those home work done, so he nicely showed me a few more ways of getting this jpeg as a background. The solution was to upload the image as a different HTML element, we opened the .js file of the project and edited the CSS code lines. I hope next time I can just do it easily by uploading a jpeg to the library and that’s it 🙂

We figured that the canvas will have to be on top of the image, so we gave it 0.7 opacity..these is why there is a little bit of faded feeling tot he image. But anyway it helps the line to be more grey- which s good.

I got up to here.

Another part of our homework was to bring some inspiring works that we would like to try and do.\

 Rafael Rozendaal I started following him few years ago, he’s doing a lot of coding but also physical works. And…he also writes Haiku’s! (this is great).

Another inspiring piece is this cute website: http://animade.tv/frankensim/