Zack Lee's blog

Multi-Square

Posted at — Nov 5, 2019

I worked with Lizzy Chiappini on this ICM project. We were tasked with manipulating an image or video at the pixel level and making a 1 minute color experience for the class to view.

Lizzy and I decided to work on a sketch that would take video pixels, group them into a specified number of segments based off of a grid and then mix up the pixel grouping order so that we could shuffle the video pixels and make it look like the user is cut up into many pieces.

This code works by giving the sketch a variable that determines the number of segments in the sketch and then breaks up the pixels from the webcam feed into that determined number of smaller images. The canvas is then broken up into positions X and Y for the placement for each of the images. The images are then places at a shuffles X and Y position.

We then decided that we wanted to start with the webcam video cut up into many pieces, we chose to start at 20x20 and then over 1 minute move down to 1x1 (meaning the video the full un-shuffled video would display). We were able to build this in the code by creating a function that is called in draw and relies on the millisecond counter and reduces the number of segments after 3000 milliseconds (3 seconds) so that we can have 20 iterations of the shuffled video in 1 minute.

Additionally, we decided to change hue of the pixels over time: the sketch starts with red and changes to cyan. In order to reduce lag and use the same counter as the segment shuffler we mapped the hue from 0 to 40 (instead of 0 to 360) so pixel hue now goes from 0 to 20 (which is the same as 0 to 180) the hue changes every 3 seconds as well.

The purpose of this sketch is for the view to start by seeing something chaotic and then slowly, over the course of 1 minute, the viewer begins to understand what they are seeing. We chose the spectrum of red to cyan to represent this emotional arch. We start with red (heat, energy, anger, passion) and then move to cyan (cool, slow, clear). The viewer starts out confused by what they are seeing and over the course of 1 minute the the pattern of the sketch become clear (mentally and literally because the number of segments continues to reduce).

multiSquare

5-10 words to describe the experience:

2-3 words to describe each “section” of your piece:

  1. 20 red images

  2. 10 green images

  3. 1 cyan image

See full code and sketch at the this link.

comments powered by Disqus