tools: P5.js, WebGL, and Kinect


I created a sketch using P5.js and WebGL, connected with Kinect V2, and let 1-3 users interact with it. I then captured the sketch reacting to the gestures of the users.

The sketch is a recreation of a body architecture with huge bubbles for the user’s body and three halos above the user’s head in 3D space. Halo on the left is connected to the left hand and halo on the right is connected to the right hand, and the distances from each halo to each hand are equal to the distances from head to each according feet. Also, halo in the center is connected to the head, and the distance from the center halo to the head is equal to the distance from the head to the spine base. I wanted to encourage people to change their gestures more actively to figure out correlations among their joints in the sketch. In terms of graphics, I used WebGL, which is a JavaScript API for rendering interactive 3D and 2D graphics, and I made the mouse cursor to control the perspective of the sketch.