pts

You can use an image as a CanvasPattern to fill shapes via form.fill(pattern).

• Load a pattern directly: const pattern = await Img.loadPattern(url, space);
• Get pattern from Img instance: const pattern = img.pattern();

To transform a pattern, use pattern.setTransform(matrix). Pts provides an easy way to generate a DOMMatrix from a Mat object for this purpose.

// Load and use as pattern
const pattern = await Img.loadPattern( "tile.jpg", space );
form.fill( pattern ).rect( rect );

// Transform pattern using a DOMMatrix from a Mat
const m = new Mat().translate2D( ... ).rotate2D( ... ).domMatrix;
pattern.setTransform( m );

You can enhance Tempo animations using the following techniques:

Tweening with Shaping: Since the t parameter in the progress callback ranges from 0 to 1, you can pass it through a Shaping function to change the easing style.

Staggering: To offset the timing of a beat, pass an optional second parameter (in milliseconds) to the .progress() method. A negative value activates the callback sooner.

Cycling: You can use Num.cycle to map the t value from [0...1] to a [0...1...0] range for oscillating effects.

For modern web development workflows, install Pts using npm. This allows you to import specific modules into your project to keep your bundle size optimized.

npm install pts

The Tempo class is a utility for creating intuitive animation sequences based on beats rather than raw milliseconds. You can initialize a Tempo instance using beats-per-minute (BPM) or by specifying the duration of a single beat in milliseconds.

To use Tempo, create an instance and then use the .every() method to define periodic animation triggers.

// 120 beats-per-minute, or 500ms per beat
let tempo = new Tempo( 120 ); 

// 500ms per beat, or 120 bpm
let another = Tempo.fromBeat( 500 ); 

Because Pt (a subclass of Float32Array) and Group (a subclass of Array) are passed by reference in JavaScript, you must clone them if you intend to modify values without affecting the original object.

Functions prefixed with $ (e.g., $add, $subtract) are designed to return a new Pt instance, leaving the original unchanged.

Editable Img instances maintain an internal canvas. You can draw directly onto this canvas by creating a new CanvasForm instance using img.ctx.

Workflow:

1. Access the context: const imgForm = new CanvasForm( img.ctx );
2. Use CanvasForm methods (e.g., .fill(), .rect()) to draw on the image.
3. To display the results, use form.image(img.canvas) instead of passing the img object itself.
4. Use img.sync() to update the original image with the edits made to the internal canvas.

You can also apply CSS-style filters using img.filter("filter-string") (e.g., "blur(10px) contrast(20%)").

To use Pts in an npm-based project, install the package using npm install pts. You can then import the necessary classes directly. If you need to support older environments by compiling to ES5, import from the pts/dist/es5 path.

npm install pts

// For ES6
import {CanvasSpace, Pt, Group} from "pts"

// For ES5 compatibility
import {CanvasSpace, Pt, Group} from "pts/dist/es5"

The react-pts-canvas library wraps Pts in a React component, providing both functional and class component support. You can create animations by passing an onAnimate callback to the <PtsCanvas /> component.

<PtsCanvas
  background="#9ab"
  onAnimate={ (space, form, time, ftime) => {...} }
/>

The BodyPose class is used to manage and visualize human pose keypoints estimated by PoseNet (tensorflow.js). It accepts raw PoseNet JSON data and provides high-level methods to retrieve specific body parts, joints, or wireframes for drawing with Pts.

Data Format

BodyPose expects PoseNet JSON data in the following structure:

{
  "score": number,
  "keypoints": [ { "position": { "x": number, "y": number }, "score": number }, ... ]
}

Usage Workflow

1. Prepare Input: Use square-sized images or videos for best results. Use BodyPose.squareBuffer to take a square crop of your input.
2. Update Pose: Pass the raw PoseNet JSON into BodyPose.update(data).
3. Draw: Use the BodyPose methods to retrieve points or shapes for rendering.

To use vector graphics instead of canvas, follow these steps:

1. Instantiate SVGSpace instead of CanvasSpace. space.getForm() will automatically return an SVGForm.
2. Call form.scope(this) at the beginning of your animate callback to optimize rendering by tracking DOM elements.
3. Important: Do not use ES6 arrow functions for player callbacks (e.g., animate: (time, ftime) => ...). Use standard function syntax (animate: function(time, ftime) ...) so that this is correctly bound for form.scope(this).