https://github.com/osteele/p5pose-optitrack
Use p5.js to render data from an OptiTrack CSV -> WebSocket server.
https://github.com/osteele/p5pose-optitrack
optitrack p5js posenet
Last synced: about 1 month ago
JSON representation
Use p5.js to render data from an OptiTrack CSV -> WebSocket server.
- Host: GitHub
- URL: https://github.com/osteele/p5pose-optitrack
- Owner: osteele
- Created: 2019-10-29T07:26:07.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-30T00:38:05.000Z (almost 6 years ago)
- Last Synced: 2025-08-28T11:16:55.251Z (about 1 month ago)
- Topics: optitrack, p5js, posenet
- Language: JavaScript
- Homepage:
- Size: 91.8 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# P5.JS <-> OptiTrack Starter Kit
This repository uses [p5.js](https://p5js.org) to render data from an [OptiTrack
CSV -> WebSocket server](https://github.com/osteele/optitrack-ws-server).
## Installation
1. Clone this repo.
2. Install [Node.js](https://nodejs.org).
- On macOS, [install HomeBrew](https://brew.sh), and then enter `brew install node` into a terminal window.
- On Windows, install it from the [Node.js download page](https://nodejs.org/en/).
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](https://github.com/osteele/optitrack-ws-server).
3. Enter `npm start`
If you added `serverUrl` property, the modified code should look like:
```javascript
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](https://learn.ml5js.org/docs/#/reference/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](https://github.com/processing/p5.js/wiki/Global-and-instance-mode).
```json
{
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](https://learn.ml5js.org/docs/#/reference/posenet?id=on39pose39-).
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