Selfie Box

Interactive installation with Socket.io and P5.js

Overview

In the context of an exhibition on the topic "Selfie Cult - Self Portraits of the Great Masters" we designed an interactive Selfie Box . Visitors can use it to draw their own self-portrait with their smartphone. The smartphone acts here as a brush. By scanning a QR code, the visitors' device is connected to the server and they are asked to take a selfie. After the photo has appeared on the beamer, you can start painting your own self-portrait.

  • Timeline
    März 2021, 16 Wochen
  • Teampartner
  • Course name
    System Design
  • Supervision
    Prof. Hartmut Bohnacker
  • Tools
    Java Script, Socket.io, P5.js
How it works

After the selfie is taken, it is converted to Base64 and sent to the server with the rotation parameters of the smartphone via Socket.io. At the server, the received data is forwarded to the desktop and decoded into jpg by Base64. On the desktop the image is painted on the P5.js canvas. Based on the rotation data, the desktop can adjust whether the image was taken in landscape or portrait format. If necessary, the photo is rotated accordingly. The data read from the acceleration sensor of the smartphone is also transmitted to the desktop via Socket.io and converted into coordinates there.