I've been wanting to understand how feasible it is to use eye gaze detection in a web-based interactive animation. So, while playing with a 3D version of schotter (a grid of cubes), I thought it would be interesting to create a brightness mirror which parameters are influenced by the distance between the observer and the camera.
I started with the flipboard mirror, I wanted to use a grid composed by four sided cubes, each side of the cube has a different grayscale value, the cube rotates in one axis and stops once the side facing the camera matches the value averaged from the camera input. Here's how each individual module would behave, in this case I used color blocks oscilating randomly to simulate a grayscale value:
Once satisfied with the individual module I created a grid of cubes, added the camera and extracted a grayscale values to trigger the cubes rotation:
Then, using the ml5 library I created a simple sketch to detect and measure the distance between the eyes of the observer:
Finally, I merged both sketches into one and linked the distance between the eyes to the size of the grid. Achieving the effect I wanted, the further the subject the less precise the image reflection produced:
Even though the results are not as smooth as I hoped for, building this animation allowed me to get an initial understanding of the 3D object logic in p5js.
