JavaScript Resources

Pages

JavaScript Arrays · Iteration Methods · p5.js Resources · Visual Studio Code for p5.js · PoseNet

Tutorials and Examples

• JavaScript Crash Course
• p5.js Learn, Examples
• Annotated p5.js + PoseNet project. (Note that this uses the p5. prefix. Code created from the more recent template doesn’t need this.)

JavaScript Reference Documentation

• JavaScript Array Methods – (MDN, W3Schools)
• JavaScript String Methods — (MDN, W3Schools)

P5 Reference Documentation

• p5.js Reference
• p5.js cheat sheet

PoseNet Documentation

• PoseNet ml5.js documentation
• PoseNet reference documentation

Recipes

• Rotate around a point. This p5.js sketch includes a function rotateAbout that rotates a shape around a specific point, instead of around the origin (upper left corner). In the sketch, it’s used to rotate the rectangle around its center.
• Calibrate a sensor reading. Here’s an example of how to calibrate a sensor. In the sketch, the mouse X position is used to stand in for the first (yaw) euler angle, so that the code can run without a physical IMU. When you click, the program interprets this as “the physical device is now in its start position. Whatever angle the sensor returns should now be treated as the start position, even if the actual sensor number is different”. It does this by recording the current sensor angle, and subtracting it from the sensor angles. This is similar to the calibration process that you’ve seen for the Optitrack and other devices, where the performer assumes a known position and the device operator tells the computer “this is the known start position”.