This repository holds examples of Kinectron with p5.js and three.js.
These examples are dependent of the following libraries:
- kinectron.bundle.js 0.0.5.1
- p5.js 0.6.1
- p5.dom.js 0.3.4
- peer.js 0.3.14
- three.js r94
To run the examples, follow these instructions:
- Download this repository or clone it.
- If you downloaded it, unzip it.
- Open your terminal and cd to the folder
- Run a local server, we suggest using Python:
Python2:
python -m SimpleHTTPServerPython3:
python3 -m http.server- Finally visit http://localhost:8000/ so that your browser opens index.html and runs the example.
p5.js examples live in the p5js_examples folder. Each example includes the following files:
- index.html
- sketch.js
- recorded_skeleton.js
<html>
<head>
<script src="../libraries/p5.min.js" type="text/javascript"></script>
<script src="../libraries/p5.dom.js" type="text/javascript"></script>
<script src="../libraries/kinectron.bundle.js" type="text/javascript"></script>
<script src="./js/recorded_skeleton.js" type="text/javascript"></script>
<script src="./js/sketch.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>On the head section, we import the external files for our project:
- p5.min.js: p5.js library, lives at "libraries", one folder up.
- p5.dom.js: p5.dom.js library, lives at "libraries", one folder up.
- kinectron.bundle.js: Kinectron client library, lives at "libraries", one folder up.
- recorded_skeleton.js: recorded Kinectron data, lives at "js", same level.
- sketch.js: p5.js sketch, lives at "js", same level.
//variable for storing the canvas
let myCanvas = null;
//variable for storing the kinectron client
let kinectron = null;
//variable for storing the kinectron server ip address
let kinectronIpAddress = "";
let liveData = false;
function preload() {
}
function setup() {
//create canvas
myCanvas = createCanvas(500, 500);
//white background
background(255);
if (!liveData) {
initKinectron();
}
}
function draw() {
}
function initKinectron() {
kinectron = new Kinectron(kinectronIpAddress)
}Variables:
- myCanvas: variable for storing the canvas created with p5.js.
- kinectron: variable for storing a Kinectron instance.
- kinectronIpAddress: String variable for storing the IP address from the Kinectron server. The format is "X.X.X.X", where X is a number between 0 to 255.
- liveData: boolean variable for signaling if the Kinectron data used is live (liveData = true) or is pre-recorded data (liveData = false).
Functions:
- preload(): p5.js function, executes first, once. All calls to loading assets, such as images, JSON files, go here.
- setup(): p5.js function, executes right after preload(), once. All configuration of initial conditions, such as creating the canvas and assigning callbacks, go here.
- draw(): p5.js function, executes right after setup(), on a loop, by default at a maximum speed of 60 times per second. All animation functions that need to be triggered at a specific rate, go here.
- initKinectron(): function for initializing a kinectron instance.
three.js examples live in the threejs_examples folder. Each example includes the following files and folders:
- index.html file
- js/ folder
If you find any problem or have a doubt with any of these examples, please submit an issue to this repository.
If you want to contribute an example, please fork this repository and submit a pull request.
MIT