ICM week 8 – Trippy Mirror

This week I created a trippy mirror using P5 using input from a webcam:

https://editor.p5js.org/ukpfilms/sketches/0Ia0ZObuj

The project was conceptually inspired by the mechanical mirrors created by my physical computing professor Daniel Rozin and the P5 code was created based on the Brightness Mirror tutorial by Daniel Shiffman on the Coding Train:

The basic structure of the sketch is similar to the coding train tutorial, video information is taken from the webcam with the createCapture(VIDEO) DOM element. Pixels form the videos are made into a pixel array to be accessed with the loadPixels() function, then information from the pixel array is assigned to other draw function elements in the sketch. In the coding train example, the brightness of the video pixels are assigned to the size of the mirror pixels, which are square; in my sketch I took the rbg value of the video and assigned it to the fill of the mirror pixels, which are ellipse (I mapped the ellipse rbg value with a random range from +10 to -10 of the original value from the pixel to add variety) and the brightness of the video pixels also influencing the size of the ellipse pixels.

Next, I added mouse interaction to the sketch by having the mouseX and mouseY position influence the color of the background along with the size of the ellipses on the canvas.

Ideally I wanted the pixels on the mirror to interact with the mouse as it moves and clicks in a way similar to the Pusheen pixel sketch by ITP resident August Luhr:

https://github.com/itpresidents/icm-help-sessions-2020/blob/master/session-06/session-06-example.md

I followed the tutorial and tried to make each pixel into an interactive object that can perform functions such as floating away from the mouse and moving back to the original location when mouse is clicked. However, the Pusheen sketch uses a stationary image with its pixels converted into objects in setup and only moves around in draw. Since my sketch uses a live video feed for the source of the pixel information, I cannot create the objects in the setup loop, and when I have both the creation of the pixel objects and their behavior in the draw loop, P5 freezes if I try to run the sketch; I assume it is too much processing power to create so many new objects and have then behave every draw loop.

In order to emulate a similar mouse interaction as the Pusheen sketch, I created an array of circles which follows the mouse position that increases in size every draw loop and splices away as new circles are created, forming a trial of vanishing circles that follows the mouse around. The behavior of the circles in the array does not directly interact with the pixels in the original mirror, but it does add another layer of interactive visual element to the sketch as a whole.

The final layer of interaction I added to my mirror is for the behavior of the mirror to change when mouse is clicked. In my initial attempt, I tried to directly change the variables of the mirror’s ellipse when mouse is clicked. However, there is no response when I click the mouse when I wrote the sketch that way, probably because the variables used to determine the ellipses’ attributes are determined in two “for” loops in the draw function and the mousePressed() function either cannot access or gets overwritten by the changes to the same variables which occurs in those loops. I tried making the variables global and putting the mousePressed() function inside the draw loop, along with using an if statement to check if the mouse is being pressed to change the behavior of the ellipse pixels inside the “for” loops as well, but those methods don’t seem to work either.

In the end, I used a Boolean variable to change the mirror behavior when mouse is clicked. I used the mousePressed() function to change the Boolean to the opposite of itself, then went back to the various loops and functions in the draw loop to give them a different characteristic based on “if” statements which checks if the boolean is true or false. This method allowed me to change the behavior of the mirror across two modes which switches when the mouse clicks – one mode with transparent ellipse pixels with relatively consistent size that flashes a random color similar to the original video pixel every draw loop, and a background that changes color based on mouse position; the second mode has mirror pixels that changes in size based on mouse position, more consistent colors, and a flickering alpha value.