“Everything is Connected” – Visual Poster

Link to view project: https://editor.p5js.org/19lizae/full/2PEXChktB

Concept and process:

My poster titled “Everything is Connected” draws inspiration from vintage botanical posters and uses the computers camera as a way to navigate it in a novel way. The botanical posters you see above represent a family of distinct looking plants which are actually part of the same family. I wanted to expand that idea to other parts of nature and emphasize both their differences as well as how they are part of a bigger circular system. The interaction concept is being able to physically zoom in with your face to see the details of each element, and then zoom out to see the bigger picture.

My initial draft of the poster in Figma included a set of not only natural things but also technology and the human mind, however I realized that this metaphor is too difficult to understand at a glance without too much textual explanation. So, I decided to shift to only using different objects from nature.

I decided to hand draw and annotate the different elements in their zoomed out form in order to better mimic the artistic style of my inspiration posters. I found a lot of different references of posters and ink drawings of each element to make sure I can draw it as well as possible. For the close ups, I wanted to show the intricacies and the beauty of each individual object on its own. I felt using high resolution images rather than drawings would demonstrate the concept better than hand drawn elements.

Interaction and Code:

For the code, I used a sample from the ml5 library that already recognized the bounding box of the face. My task was to map the face movement in a way that it can move the canvas left and right as well as control depth. Left/right movement was controlled by calculating the distance between the face rectangles center in relationship to the center of the canvas. The depth was controlled by the height of the rectangle (since it would get bigger the closer the face is to the camera)

Here is the sample code I built off of: https://editor.p5js.org/ml5/sketches/fMCIspRD7_

I built the code piece by piece testing out the different thresholds of the depth and movement. I originally used filler images and then after getting it to work, I added my final images

I also decided to arrange all of my images in circular order as opposed to the original rectangle I had, so it would further emphasize the connectedness of the elements when they are all zoomed out.