Snail Trail

I See You

I designed an interactive art installation that is meant to be used in a gallery art installation.  This piece encourages users to explore movement, space, identity, and the notion of surveillance capitalism.

Video Example

Snail Trail is an interactive sketch meant to be used in an art installation. This piece encourages users to explore movement, space, and identity while also challenging the notion of surveillance capitalism. The p5.js sketch uses Tensorflow.js Posenet to create an audience-generated art installation as people move around their space.

Prototyping Using Tensorflow.js Posenet and Google's Teachable Machine

Through the exploration of Tensorflow.js Posenet and Google's Teachable Machine, I explored image detection and classification, creating a well informed base for the project.

p5.js Code

Snail Trail runs using this code:

let positions = [];
let capture;
let scaleFactor = 1.50;
let flipHorizontal = false;
let outputStride = 16;
let imageElement;
let net;

function preload() {
  posenet.load().then(function(_net) {
    net = _net;
  });
}

function setup() {
  createCanvas(800, 600,  capture = createCapture(VIDEO));
  capture.hide();
  imageElement = document.getElementsByTagName('video')[0];
  setInterval(getPose,20);
}

function draw() {

  for (let i = 0; i < positions.length; i++) {
    if(i > 0) break;
    let pos = positions[i];
    ellipse(pos.x, pos.y, 50, 50);
    ellipseColor = color(0);
    ellipseColor.setAlpha(12);
    fill(ellipseColor);
    noStroke();
  }

}

function getPose() {

  net.estimateSinglePose(imageElement, scaleFactor, flipHorizontal, outputStride).then(function(pose) {
    console.log("NUM OF POSITIONS: " + pose.keypoints.length);
    positions = [];
    for (let i = 0; i < pose.keypoints.length; i++) {
      positions.push(pose.keypoints[i].position);
    }
  });
}

User Experience

When addressing the user experience of this piece, it was integral to consider the user flow in various situations.