P5.JS <-> OptiTrack Starter Kit

This repository uses p5.js to render data from an OptiTrack CSV -> WebSocket server.

Installation

1. Clone this repo.

2. Install Node.js.

   • On macOS, install HomeBrew, and then enter brew install node into a terminal window.
   • On Windows, install it from the Node.js download page.

3. In a terminal window:

   • Change directories (cd) into the repository directory.
   • Enter npm install

Running

In a terminal window:

1. Change directories (cd) into the repository directory.
2. Either:
   1. Add a serverUrl property to the optitrack.poseNet() call in sketch.js; or:
   2. Run an OptiTrack CSV -> WebSocket server.
3. Enter npm start

If you added serverUrl property, the modified code should look like:

  const poseNet = optitrack.poseNet(video, { p5, serverUrl: 'ws://myserver.example.com:8764' },
    () => p5.select('#status').hide());

where myserver.example.com and 8764 are the hostname and port of a WebSocket server.

This will open PoseNet in a browser window.

API

The code in optitrack.js provides an API that is very similar to the ml5.js PoseNet API. Code that uses ml5.poseNet can be trivially adapted to render (a projection of) OptiTrack data instead, or more extensively modified to make use of 3D data.

const poseNet = optitrack.poseNet(?video, ?options, ?callback);

Parameters

• video: OPTIONAL. Optional HTMLVideoElement. If present, the x and y coordinates from the 3D position are scaled to the dimensions of this element, to create the 2D position. (This can any object that provides width and height properties.)

• callback: OPTIONAL. A function that is called when the WebSocket connection is established.

• options: OPTIONAL. An object that contains the following properties. p5 is the global p5 variable. It is required when p5.js is used in instance mode.

  {
      p5: p5,
      frameRate: 1,
      serverUrl: 'ws://localhost:8765'
  }

Methods

posenet.on('pose', callback)

An event listener that returns the results when a pose is detected.

This is upwards-compatible with the ML5's posenet.on method.

Each keypoint in the array includes both a position: {x, y} property (the same as PoseNet), but also a pos: {x, y, z} with the 3D OptiTrack data.

License

MIT License