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

Leave a comment.

Your email address will not be published. Required fields are marked *