BMWalker.js is a simple JavaScript library supplying the marker information of the biological motion 'Walker'.
Now, you can draw it without difficulty!
Concept movie.
Now, the latest version is 0.6.1(alpha-3 release).
CLICK ME to show apps
CLICK ME to show other demos
<script src="https://tetunori.github.io/BMWalker.js/dist/v0.6.1/bmwalker.js"></script>Just new BMWalker() and you can get marker coordinates via getMarkers() method.
// Create biological motion walker instance
const bmw = new BMWalker();
// Get array of the current marker coordinates
const walkerHeight = 200;
const markers = bmw.getMarkers(walkerHeight);Received array consists of objects as below.
// Return value of getMarkers()
[
{ x: 3.18, y: -170.70, z: 10.9, desc: 'Head' },
{ x: 2.74, y: -115.11, z: 8.2, desc: 'Clavicles' },
{ x: 40.24, y: -121.91, z: 9.1, desc: 'L-Shoulder' },
// ...
]So we can draw gotton markers like below.
// Draw each markers
markers.forEach((m) => {
circle(m.x, m.y, 6);
});
- 'Example 0-1: Basic Usage' On GitHub, Source code On GitHub
- 'Example 0-1: Basic Usage' On OpenProcessing
CLICK ME
new BMWalker([type: Number])Parameters:
| name | note |
|---|---|
[type] |
Optional. Number: Specify BMW_TYPE_HUMAN or BMW_TYPE_PIGEON. If unspecified, BMW_TYPE_HUMAN is selected automatically. |
Returns: BMWalker instance.
ExampleP-1: Constructor Example Pigeon
// Create biological motion walker instance
const bmw = new BMWalker(BMW_TYPE_PIGEON);
- 'Example P-1: Pigeon Basic Example' On GitHub, Source code On GitHub
- 'Example P-1: Pigeon Basic Example' On OpenProcessing
getMarkers(walkerHeight: Number, [tmsec: Number])Overview:
Get all markers that make up 'Walker'.
Parameters:
| name | note |
|---|---|
walkerHeight |
Number: Height size of the 'Walker'. This method returns the coordinates as the height of 'Walker' fits into this value. |
[tmsec] |
Optional. Number: Specify the time in msec for which you would like to get markers. If unspecified, this method returns current marker coordinates. |
Returns:
Array of the marker data Object at specified time. Each data Object has properties below.
| name | note |
|---|---|
x |
Number: x-coordinate of the marker. |
y |
Number: y-coordinate of the marker. |
z |
Number: z-coordinate of the marker. |
desc |
String: Description of the marker like 'Head', 'Clavicles' and so on. |
// Example of Return value of getMarkers()
[
{ x: 3.18, y: -170.70, z: 10.9, desc: "Head" },
{ x: 2.74, y: -115.11, z: 8.2, desc: "Clavicles" },
{ x: 40.24, y: -121.91, z: 9.1, desc: "L-Shoulder" },
// ...
]Example1-1: getMarkers Example 1
// Create biological motion walker instance
const bmw = new BMWalker();
// Get array of the current marker coordinates
const walkerHeight = 100;
const markers = bmw.getMarkers(walkerHeight);
// Draw each markers
markers.forEach((m) => {
circle(m.x, m.y, 6);
});
- 'Example 1-1: getMarkers Example 1' On GitHub, Source code On GitHub
- 'Example 1-1: getMarkers Example 1' On OpenProcessing
Example1-2: getMarkers Example 2
// Create biological motion walker instance
const bmw = new BMWalker();
// Get array of the marker coordinates with bigger size and specified time.
const walkerHeight = 350;
const specifiedTime = 500;
const markers = bmw.getMarkers(walkerHeight, specifiedTime);
// Draw each markers with descriptions
markers.forEach((m) => {
circle(m.x, m.y, 6);
text(m.desc, m.x, m.y + 15);
});
- 'Example 1-2: getMarkers Example 2' On GitHub, Source code On GitHub
- 'Example 1-2: getMarkers Example 2' On OpenProcessing
Example1-3: getMarkers Example 3
// Create biological motion walker instance
const bmw = new BMWalker();
// Get current markers
const walkerHeight = 200;
const markers = bmw.getMarkers(walkerHeight);
// Draw markers with z-position in WEBGL
markers.forEach((m) => {
push();
{
translate(m.x, m.y, m.z);
sphere(2);
}
pop();
});
- 'Example 1-3: getMarkers Example 3' On GitHub, Source code On GitHub
- 'Example 1-3: getMarkers Example 3' On OpenProcessing
Example1-4: getMarkers Example 4
// Create biological motion walker instance
const bmw = new BMWalker();
// Get array of the current marker coordinates
const walkerHeight = 200;
const markers = bmw.getMarkers(walkerHeight);
// Sort with z-position value to avoid inappropriate overlapping
markers.sort( (a, b) => {
if (a.z < b.z) return -1;
if (a.z > b.z) return 1;
return 0;
});
// Draw markers
markers.forEach((m) => {
circle(m.x, m.y, 30);
});
- 'Example 1-4: getMarkers Example 4' On GitHub, Source code On GitHub
- 'Example 1-4: getMarkers Example 4' On OpenProcessing
getLineMarkers(walkerHeight: Number, [tmsec: Number])Overview:
Get combinations of marker coordinates for both ends of all lines that make up 'Walker'.
Parameters:
| name | note |
|---|---|
walkerHeight |
Number: Height size of the 'Walker'. This method returns as the height of 'Walker' fits into this value. |
[tmsec] |
Optional. Number: Specify the time in msec for which you would like to get. If unspecified, this method returns with current time. |
Returns:
Array of the combination of 2 marker Objects. Each marker Object has properties below.
| name | note |
|---|---|
x |
Number: x-coordinate of the marker. |
y |
Number: y-coordinate of the marker. |
z |
Number: z-coordinate of the marker. |
i |
Number: Index value of the marker. |
// Example of Return value of getLineMarkers()
[
[ // Line 0
{ // Marker 0
x: -0.95,
y: -47.4,
z: -7.3,
i: 0,
},
{ // Marker 1
x: -0.76,
y: -31.95,
z: 5.6,
i: 1,
},
],
[ // Line 1
// ...
]Example2-1: getLineMarkers Example
// Create biological motion walker instance
const bmw = new BMWalker();
// Get array of the current line markers
const walkerHeight = 300;
const lineMarkers = bmw.getLineMarkers(walkerHeight);
// Draw lines
lineMarkers.forEach((m) => {
line(m[0].x, m[0].y, m[1].x, m[1].y);
});
- 'Example 2-1: getLineMarkers Example' On GitHub, Source code On GitHub
- 'Example 2-1: getLineMarkers Example' On OpenProcessing
setSpeed(speed: Number)Overview:
Set walking speed.
Parameters:
| name | note |
|---|---|
speed |
Number: Walking speed of the 'Walker'. Set values between minSpeed and maxSpeed(automtically clamped). Default value is 1.0. Setting 0 means stop walking. Walk backward when negative values are set. |
Example 3-1: setSpeed Example
// Create biological motion walker instance
const bmw = new BMWalker();
// Set speed with mouseX coordinate.
const spd = map(mouseX, 0, width, bmw.minSpeed, bmw.maxSpeed);
bmw.setSpeed(spd);
- 'Example 3-1: setSpeed Example' On GitHub, Source code On GitHub
- 'Example 3-1: setSpeed Example' On OpenProcessing
setWalkerParam(bodyStructure: Number, weight: Number, nervousness: Number, happiness: Number)Overview:
Set parameters on the motion of 'Walker'. Valid if the type is BMW_TYPE_HUMAN only.
Parameters:
| name | note |
|---|---|
bodyStructure |
Number: Adjust parameters on body structure. Set values between minBodyStructure and maxBodyStructure(automtically clamped). Default value is 0(means neutral). |
weight |
Number: Adjust parameters on weight. Set values between minWeight and maxWeight(automtically clamped). Default value is 0(means neutral). Positive values are heavy and negative values are light. |
nervousness |
Number: Adjust parameters on nervousness. Set values between minNervousness and maxNervousness(automtically clamped). Default value is 0(means neutral). Positive values are nervous and negative values are relaxed. |
happiness |
Number: Adjust parameters on happiness. Set values between minHappiness and maxHappiness(automtically clamped). Default value is 0(means neutral). Positive values are happy and negative values are sad. |
Example 4-1: setWalkerParam Example
// Create biological motion walker instance
const bmw = new BMWalker();
// Set walker parameters.
const bodyStructure = 1.0;
const weight = -0.2;
const nervousness = 0.0;
const happiness = 3.1;
bmw.setWalkerParam(bodyStructure, weight, nervousness, happiness);
- 'Example 4-1: setWalkerParam Example' On GitHub, Source code On GitHub
- 'Example 4-1: setWalkerParam Example' On OpenProcessing
setCameraParam(azimuth: Number, angularVelocity: Number, elevation: Number, roll: Number)Overview:
Set parameters on the camera.
Parameters:
| name | note |
|---|---|
azimuth |
Number: The rotation angle(in radians) of the 'Walker' around the vertical axis. Set values from -PI to PI. Default value is 0. |
angularVelocity |
Number: The rotation speed(radians/sec) of the 'Walker'. 0 would mean the 'Walker' that does not rotate over a trial. Default value is 0 and recommendation settings are from -2*PI to 2*PI. |
elevation |
Number: The elevation of the camera with respect to the 'Walker'. Essentially a rotation angle(in radians) around the horizontal axis. Set values from -PI to PI. Default value is 0. |
roll |
Number: The roll angle of the camera. Set values from -PI to PI. Default value is 0. |
Example 5-1: setCameraParam Example 1
// Create biological motion walker instance
const bmw = new BMWalker();
// Set walker parameters.
const azimuth = Math.PI / 4;
const angularVelocity = 0;
const elevation = Math.PI / 4;
const roll = 0;
bmw.setCameraParam(azimuth, angularVelocity, elevation, roll);
- 'Example 5-1: setCameraParam Example 1' On GitHub, Source code On GitHub
- 'Example 5-1: setCameraParam Example 1' On OpenProcessing
Example 5-2: setCameraParam Example 2
// Create biological motion walker instance
const bmw = new BMWalker();
// Set walker parameters.
const azimuth = 0;
const angularVelocity = Math.PI / 4;
const elevation = Math.PI / 4;
const roll = 0;
bmw.setCameraParam(azimuth, angularVelocity, elevation, roll);
- 'Example 5-2: setCameraParam Example 2' On GitHub, Source code On GitHub
- 'Example 5-2: setCameraParam Example 2' On OpenProcessing
setTranslationParam(flagTranslation: Boolean)Overview:
Set parameters on translation. It is recommended that resetTimer() be called in advance when flagTranslation is enabled. See resetTimer().
Parameters:
| name | note |
|---|---|
flagTranslation |
Boolean: Whether translation should be enabled or disabled. Default value is false. When this flag is enabled, angularVelocity setting will be ignored. |
Example 6-1: setTranslationParam Example
// Create biological motion walker instance
const bmw = new BMWalker();
// Set params on translation.
const enableTranslation = true;
bmw.setTranslationParam(enableTranslation);
- 'Example 6-1: setTranslationParam Example' On GitHub, Source code On GitHub
- 'Example 6-1: setTranslationParam Example' On OpenProcessing
resetTimer()Overview:
Reset 'Walker' timer(set at constructor). It is recommended that resetTimer() be called in advance when flagTranslation is enabled. See setTranslationParam.
getPeriod()Overview:
Get Loop period of 'Walker' in msec. It depends on speed setting of the 'Walker'. See setSpeed.
Returns:
Loop period in msec as Number.
Attribution-NonCommercial-ShareAlike 4.0 International
Copyright (c) 2022 Tetsunori Nakayama and Nikolaus Troje.
For commercial use, please contact us.
This library is based on the results of BioMotion Lab's researches in York University.
See the URL below in detail.
https://www.biomotionlab.ca/
Tetsunori Nakayama.