Pts

https://github.com/williamngan/pts
Admin
Pts is a lightweight TypeScript/JavaScript library for visualization and creative coding, offering...
Tokens:68,225
Snippets:262
Trust Score:8.3
License:Apache-2.0
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install and Import Pts with npm

Source: https://github.com/williamngan/pts/blob/master/guide/Get-started-0100.html

Install the Pts library using npm and import necessary classes like CanvasSpace, Pt, and Group into your JavaScript project. This is the recommended approach for modern build setups.

```bash
npm install pts
```

```javascript
import {CanvasSpace, Pt, Group} from "pts"

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

--------------------------------

### Initialize Pts.js Quick Start (JavaScript)

Source: https://github.com/williamngan/pts/blob/master/demo/quickstart.html

Initializes the Pts.js library using the quickStart function, targeting an element with the ID 'demo'. It sets up a basic drawing context and a pointer interaction.

```javascript
Pts.quickStart("demo")( t => form.point( space.pointer ) )
```

--------------------------------

### Initialize Pts.js with quickStart

Source: https://github.com/williamngan/pts/blob/master/guide/Get-started-0100.html

Initializes a Pts.js canvas and returns an animation loop function. This is the quickest way to start prototyping with Pts.js, creating global `space` and `form` variables.

```javascript
var run = Pts.quickStart( "#hello", "#fff" );

// quickStart returns a function wrapper for use in animation loop, eg:
run( function(time, ftime) { ... } );
```

--------------------------------

### Import Pts with npm (ES6)

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0100_Get_started.md

Demonstrates how to import Pts classes using npm for ES6 projects. This requires prior installation via `npm install pts`.

```javascript
import {CanvasSpace, Pt, Group} from "pts"
```

--------------------------------

### Create and Setup CanvasSpace

Source: https://github.com/williamngan/pts/blob/master/guide/Get-started-0100.html

Initialize a CanvasSpace instance, which represents the drawing area. The setup function configures properties like background color and enables features like auto-resizing.

```javascript
var space = new CanvasSpace("#hello");
space.setup({
  bgcolor: "#fff"
});
```

--------------------------------

### Pts Quick Start Example

Source: https://github.com/williamngan/pts/blob/master/demo/testpage.html

Demonstrates the Pts.quickStart function for setting up a Pts canvas and running an animation loop. It includes examples of generating points using different methods and drawing shapes with specified colors and stroke styles. The snippet also shows how to display performance metrics.

```javascript
(function() { 
// Pts.quickStart instantiates a CanvasSapce and CanvasForm and put the respective "space" and "form" variables into global scope and bind mouse and touch events. 
// It returns a function where you can init with callback functions ( animateFn, startFn, actionFn, resizeFn )
// See guides for more details: https://ptsjs.org/guide/Get-started-0100.html
var run = Pts.quickStart( "here", "#999" );
let total = 4000;

function* gen0(count, bound) {
  let i = 0;
  while (i<count) {
    i++;
    yield new Pt(Math.random()*bound.width, Math.random()*bound.height);
  }
}

function gen1(count, bound) {
  let arr = new Group();
  for (let i=0, len=total; i<len; i++) {
    arr.push( new Pt(Math.random()*bound.width, Math.random()*bound.height) );
  }
  return arr;
}

function gen2() {
  return Group.fromArray([
    [20,20],
    [40,100],
    [100,100],
    [90,10]
  ]);
}

let perf = Util.performance();
let testFn = [gen0, gen1, gen2];
let color = ["#f00", "#0f0", "#00f"];
let testId = 2;

// Pass an animate callback function to run
run( ( time, ftime ) => {
  form.fillOnly("#000").rect( [space.center, [space.width/4, space.height/4]] );
  let iter = testFn[testId](total, space.innerBound);
  form.strokeOnly(color[testId], 2).rect( iter );
  form.fillOnly("#000").text( new Pt(20,20), perf() );
});

})();
```

--------------------------------

### Standard Pts Space and Form Setup

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0500_Space.md

Presents a typical template for creating a Pts space and form, suitable for more complex setups than `quickStart`. It shows how to initialize CanvasSpace with options, get the form, add an animation function, and bind mouse/touch events.

```javascript
Pts.namespace( this ); // not needed if using npm package

var space = new CanvasSpace("elemID").setup({ retina: true });
var form = space.getForm();

space.add( (time, ftime) => {
  form.fill("#f03").point( space.pointer, 10, "circle" ); 
} );

space.bindMouse().bindTouch().play();
```

--------------------------------

### Quick Start with Pts.quickStart

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0500_Space.md

Illustrates the quickest way to start with Pts.js using the `quickStart` function. It initializes a CanvasSpace, adds space and form instances to the scope, and sets up an interactive animation loop.

```javascript
Pts.namespace( this ); // not needed if using npm package

let run = Pts.quickStart( "elemID", "#f03" )
run( (time, ftime) => form.fill("#f03").point( space.pointer, 10, "circle" ) );
```

--------------------------------

### Include Pts as a Script

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0100_Get_started.md

Illustrates how to include Pts using script tags in an HTML file. This method requires downloading `pts.js` or using a CDN.

```html
<script type="text/javascript" src="path/to/pts.js"></script>
<script type="text/javascript" src="path/to/my_script.js"></script>
```

--------------------------------

### Quick Start with Pts quickStart Function

Source: https://github.com/williamngan/pts/blob/master/guide/Space-0500.html

Initiates a CanvasSpace and adds 'space' and 'form' instances into the current scope for rapid interactive piece creation. This is the quickest way to start with Pts.

```javascript
Pts.namespace( this ); // not needed if using npm package

let run = Pts.quickStart( "elemID", "#f03" )
run( (time, ftime) => form.fill("#f03").point( space.pointer, 10, "circle" ) );
```

--------------------------------

### Create and Setup CanvasSpace

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0100_Get_started.md

Initializes a CanvasSpace targeting an HTML element (e.g., '#hello') and sets up its initial properties like background color. The element can be a canvas or a container div.

```javascript
var space = new CanvasSpace("#hello");
space.setup({ bgcolor: "#fff" });
```

--------------------------------

### Quick Start Initialization

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0100_Get_started.md

Initializes a PTS CanvasSpace and CanvasForm, creating global 'space' and 'form' variables. It also returns an animation function for use in a loop.

```javascript
var run = Pts.quickStart( "#hello", "#fff" );

// quickStart returns a function wrapper for use in animation loop, eg:
run( function(time, ftime) { ... } );
```

--------------------------------

### Pts.js quickStart Example

Source: https://github.com/williamngan/pts/blob/master/index.html

Demonstrates drawing a dot that follows the pointer using Pts.js in a single line of code. This snippet requires a Pts.js space and form object to be initialized beforehand.

```javascript
Pts.quickStart("myID")(t => form.point(space.pointer))
```

--------------------------------

### Pts: Dynamic Shape Animation Example

Source: https://github.com/williamngan/pts/blob/master/guide/Get-started-0100.html

This JavaScript snippet showcases the Pts library's capabilities for creating animated graphics. It sets up a canvas, draws a dynamic rectangle that shears over time, creates triangles from its segments, inscribes circles within these triangles, and visualizes the mouse pointer. It utilizes CanvasSpace for rendering and various Pts geometric classes.

```javascript
// setup
Pts.namespace(this);
var space = new CanvasSpace("#hello").setup({
  bgcolor: "#fff"
});
var form = space.getForm();

// animation
space.add( (time, ftime) => {

  // rectangle
  var rect = Rectangle.fromCenter( space.center, space.size.$divide(2) );
  var poly = Rectangle.corners( rect );
  poly.shear2D( Num.cycle( time%5000/5000 ) - 0.5, space.center );
  
  // triangle
  var tris = poly.segments( 2, 1, true );
  tris.map( (t) => t.push( space.pointer ) );
  
  // circle
  var circles = tris.map( (t) => Triangle.incircle( t ) );
  
  // drawing
  form.fillOnly("#123").polygon( poly );
  form.fill("#f03").circles( circles );
  form.strokeOnly("#fff ", 3 ).polygons( tris );
  form.fill("#123").point( space.pointer, 5 );
  
});

space.play().bindMouse();

```

--------------------------------

### Draw Point at Pointer Location (Simple)

Source: https://github.com/williamngan/pts/blob/master/guide/Get-started-0100.html

Adds a player to the Pts.js space to draw a static point at the current pointer location. This is a basic example showing how to use `form.point` with `space.pointer`.

```javascript
space.add( () => form.point( space.pointer, 10 ) );
```

--------------------------------

### pts Canvas Drawing Example

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0100_Get_started.md

Sets up a CanvasSpace, defines an animation loop to draw a dynamic scene. It creates a rectangle, subdivides it into triangles, and draws circles within these triangles, all while responding to the mouse pointer. The animation uses time to shear the rectangle and cycle through values.

```javascript
// setup
Pts.namespace(this);
var space = new CanvasSpace("#hello").setup({"bgcolor": "#fff"});
var form = space.getForm();

// animation
space.add( (time, ftime) => {

  // rectangle
  var rect = Rectangle.fromCenter( space.center, space.size.$divide(2) );
  var poly = Rectangle.corners( rect );
  poly.shear2D( Num.cycle( time%5000/5000 ) - 0.5, space.center );
  
  // triangle
  var tris = poly.segments( 2, 1, true );
  tris.map( (t) => t.push( space.pointer ) );
  
  // circle
  var circles = tris.map( (t) => Triangle.incircle( t ) );
  
  // drawing
  form.fillOnly("#123").polygon( poly );
  form.fill("#f03").circles( circles );
  form.strokeOnly("#fff ", 3 ).polygons( tris );
  form.fill("#123").point( space.pointer, 5 );
  
});

space.play().bindMouse();
```

--------------------------------

### Use Pts as a Script

Source: https://github.com/williamngan/pts/blob/master/guide/Get-started-0100.html

Include Pts directly in your HTML file using script tags, either from a CDN or a local file. This method is suitable for simpler projects or when not using a module bundler.

```html
<script type="text/javascript" src="path/to/pts.js"></script>
<script type="text/javascript" src="path/to/my_script.js"></script>
```

--------------------------------

### Import Pts with npm (ES5)

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0100_Get_started.md

Shows how to import Pts classes for ES5 compatible projects when using npm. This targets the ES5 distribution of the library.

```javascript
import {CanvasSpace, Pt, Group} from "pts/dist/es5"
```

--------------------------------

### Pts Development Build and Test Commands

Source: https://github.com/williamngan/pts/blob/master/README.md

Provides essential bash commands for developers working on the Pts library. These commands cover installing dependencies, starting the development server, building the project, and running tests.

```bash
npm install
npm start
npm run build
npm test
```

--------------------------------

### Namespace Pts Globally

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0100_Get_started.md

Adds Pts classes to the global scope for easier access when using Pts as a script file. This avoids the need for the `Pts.` prefix.

```javascript
Pts.namespace( window );
```

--------------------------------

### Get CanvasForm Instance

Source: https://github.com/williamngan/pts/blob/master/guide/Get-started-0100.html

Obtain a CanvasForm instance from the CanvasSpace. The Form object provides methods for drawing various shapes and elements onto the canvas.

```javascript
var form = space.getForm();
```

--------------------------------

### Initiate Custom Form

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0100_Get_started.md

Demonstrates how to initiate a custom form class by extending `CanvasForm` or `Form`. This allows for custom drawing functionalities.

```javascript
// Initiate your own BeautifulForm class
var form = new BeautifulForm( space );
```

--------------------------------

### Draw Pulsating Point at Pointer Location

Source: https://github.com/williamngan/pts/blob/master/guide/Get-started-0100.html

Adds a player to the Pts.js space to continuously render an animation. This example draws a pulsating circle at the current pointer (mouse/touch) location, dynamically changing its radius.

```javascript
space.add( (time, ftime) => {
  let radius = Num.cycle( (time%1000)/1000 ) * 20;
  form.fill("#09f").point( space.pointer, radius, "circle" );
});
```

--------------------------------

### Namespace Pts Globally

Source: https://github.com/williamngan/pts/blob/master/guide/Get-started-0100.html

When using Pts as a script, you can add it to the global scope for easier access to its classes without the 'Pts.' prefix. This simplifies code writing.

```javascript
Pts.namespace( window );

// Now you can use Group directly instead of Pts.Group
```

--------------------------------

### Define Demo Element Style (CSS)

Source: https://github.com/williamngan/pts/blob/master/demo/quickstart.html

Styles a specific HTML element with the ID 'demo' to have a fixed width and height. This is often used as a container for graphical applications.

```css
#demo { width: 600px; height: 600px; }
```

--------------------------------

### Pts.js Starter Kit Setup

Source: https://github.com/williamngan/pts/blob/master/guide/md/_8000_Extensions.md

A starter kit for building Pts.js projects with support for JavaScript and TypeScript. It leverages esbuild for fast builds and optimization, resulting in small bundle sizes.

```javascript
// Example usage within a Pts.js project setup
// (No specific code snippet provided in source text, but describes functionality)
```

--------------------------------

### Drawing a Static Point

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0100_Get_started.md

Adds a player to the space to draw a static point at the current pointer position with a radius of 10. This demonstrates basic drawing using the 'form' object.

```javascript
space.add( () => form.point( space.pointer, 10 ) );
```

--------------------------------

### Pts Space and Player API

Source: https://github.com/williamngan/pts/blob/master/guide/Space-0500.html

Comprehensive documentation for Pts Space and IPlayer functionalities, covering initialization, setup options, player management, and event handling.

```APIDOC
Space:
  __constructor(element: HTMLElement | string, options?: object)
    Initializes a new Space instance.
    element: The DOM element or CSS selector for the rendering context.
    options: Optional configuration for the space.

  setup(options: object):
    Configures the space's properties.
    options:
      bgcolor: string - Background color (e.g., "#f00", "rgb(255,0,0)").
      retina: boolean - Enables high-DPI rendering if true.
      resize: boolean - Enables resize event tracking if true.

  add(player: function | object):
    Adds a player to the space.
    player: A function or an object conforming to the IPlayer interface.

  remove(player: function | object):
    Removes a player from the space.

IPlayer Interface:
  An interface defining optional callback methods for players.

  start(bound: {x, y, width, height}, space: Space):
    Called when the space is ready. Used for initialization.
    bound: The bounding box of the space.
    space: The Space instance.

  animate(time: number, ftime: number, space: Space):
    Called continuously for animation frames.
    time: Current running time.
    ftime: Time taken for the previous frame.
    space: The Space instance.

  action(type: string, x: number, y: number, event: Event):
    Called when a user interaction event occurs.
    type: The type of action (e.g., "up", "down", "move", "drag", "drop", "over", "out").
    x: The x-coordinate of the action.
    y: The y-coordinate of the action.
    event: The native browser event object.
    See also: bindMouse

  resize(size: {width, height}, event: Event):
    Called when the space is resized. Requires `resize: true` in setup.
    size: An object containing the new width and height.
    event: The native browser event object.
```

--------------------------------

### Basic Pts CanvasSpace and Form Setup

Source: https://github.com/williamngan/pts/blob/master/guide/Space-0500.html

A typical template for creating a Pts space and form manually, offering more control than quickStart. It allows adding animation functions or IPlayer objects and binding interaction events.

```javascript
Pts.namespace( this ); // not needed if using npm package

var space = new CanvasSpace("elemID").setup({ retina: true });
var form = space.getForm();

space.add( (time, ftime) => {
  form.fill("#f03").point( space.pointer, 10, "circle" ); 
} );

space.bindMouse().bindTouch().play();
```

--------------------------------

### Install Pts.js via npm

Source: https://github.com/williamngan/pts/blob/master/index.html

Instructions for installing the Pts.js library as an npm module. This is the recommended method for integrating Pts.js into modern JavaScript projects and build workflows.

```bash
npm install pts
```

--------------------------------

### Create Custom Form

Source: https://github.com/williamngan/pts/blob/master/guide/Get-started-0100.html

Extend the base Form or CanvasForm class to create custom drawing tools or 'pencils' with unique functionalities. Instantiate your custom form with the space.

```javascript
// Assuming BeautifulForm is a custom class extending Form or CanvasForm
var form = new BeautifulForm( space );
```

--------------------------------

### SVGSpace Setup and Usage

Source: https://github.com/williamngan/pts/blob/master/guide/Space-0500.html

Instructions for switching from CanvasSpace to SVGSpace, including necessary setup for scope tracking and function syntax.

```javascript
// Initiate as SVGSpace
let space = new SVGSpace("#svg-container");
let form = space.getForm(); // Returns SVGForm

// Add to the beginning of animate callback
form.scope( this );

// Change es6 arrow function to standard function
animate: function( time, ftime) { ... }
```

--------------------------------

### ES6 Module Import Example

Source: https://github.com/williamngan/pts/blob/master/docs/index.html

Demonstrates how to import Pts.js classes using ES6 modules for use in your projects. This is the recommended way for modern JavaScript development.

```javascript
import {Polygon} from "Op";

// Example usage:
// Polygon.centroid( myPts );
```

--------------------------------

### Initialize Syntax Highlighting

Source: https://github.com/williamngan/pts/blob/master/guide/Introduction-0000.html

Initializes the highlight.js library to automatically detect and highlight code blocks on the page. This is a common setup for documentation sites to improve code readability.

```javascript
hljs.initHighlightingOnLoad();
```

--------------------------------

### Tempo Cheat Sheet: Callbacks

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0700_Animation.md

Summarizes how to use `every`, `start`, and `progress` to manage animation callbacks, including how to optionally stop animations.

```javascript
let fiveBeats = tempo.every( 5 );

fiveBeats.start( (count) => { 
  // do something at start of every period
  return count > 5; // optionally return true to stop animating
});

fiveBeats.progress( (count, t, time, isStart) =>  {
  // do something during each period
});
```

--------------------------------

### Get CanvasForm

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0100_Get_started.md

Retrieves the default CanvasForm instance associated with a CanvasSpace. This form object provides methods for drawing on the canvas.

```javascript
var form = space.getForm();
```

--------------------------------

### Create and Play Sound Instance

Source: https://github.com/williamngan/pts/blob/master/guide/Sound-0800.html

Demonstrates how to load audio files, generate sound waves, capture microphone input, and control playback of a Sound instance. It covers loading from files, using AudioBuffer, microphone input, generating sine waves, and advanced usage with nodes and contexts.

```javascript
Sound.load( "path/file.mp3" ).then( d => s = d ); // from file
Sound.loadAsBuffer( "path/file.mp3" ).then( d => s = d ); // using AudioBuffer instead
Sound.input().then( d => s = d ); // get microphone input
s = Sound.generate( "sine", 120 ); // sine wave at 120hz
s = Sound.from( node, context ); // advanced use case

s.start();
s.stop();
s.toggle();
```

--------------------------------

### Draw Sheared Rectangle and Polygon

Source: https://github.com/williamngan/pts/blob/master/guide/Get-started-0100.html

Demonstrates drawing geometric shapes using Pts.js classes like `Rectangle` and `Group`. This snippet creates a rectangle, gets its corners, shears the polygon dynamically, and draws both shapes.

```javascript
var rect = Rectangle.fromCenter( space.center, space.size.$divide(2) );
var poly = Rectangle.corners( rect );
poly.shear2D( Num.cycle( time%5000/5000 ) - 0.5, space.center );    

form.fillOnly("#123").polygon( poly );
form.strokeOnly("#fff", 3).rect( rect );
```

--------------------------------

### PTS Project Navigation and Analytics Setup

Source: https://github.com/williamngan/pts/blob/master/demo/index.html

Initializes Google Analytics and sets up navigation logic for the PTS project. It redirects the user to a default demo if no 'name' parameter is present in the URL and handles clicks on demo elements to update the URL or open new windows.

```javascript
if (src) document.querySelector("body").appendChild( src );
var index = window.location.href.indexOf("?name");
if ( index < 0 ) {
  window.location.href = window.location.origin+window.location.pathname+"?name=circle.intersectCircle2D";
}
var demos = document.querySelectorAll(".demo");
for (var i=0; i<demos.length; i++) {
  var file = demos[i].getAttribute("data-src");
  demos[i].addEventListener("click", function() {
    var sel = this.getAttribute("data-src");
    if (sel.indexOf("https://") === 0) {
      window.open( sel, "pts_demo" );
    } else {
      window.location.href = window.location.origin+window.location.pathname+"?name="+sel;
    }
  }.bind( demos[i] ) );
}
(function(i,s,o,g,r,a,m){
  i['GoogleAnalyticsObject']=r;
  i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)
  },i[r].l=1*new Date();
  a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];
  a.async=1;
  a.src=g;
  m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-104913373-1', 'auto');
ga('send', 'pageview');
```

--------------------------------

### Use pts-starter-kit for JavaScript/TypeScript Projects

Source: https://github.com/williamngan/pts/blob/master/guide/Extensions-8000.html

Provides a convenient way to build Pts.js projects with support for both JavaScript and TypeScript. It leverages esbuild for fast builds and is optimized for size, with the repo demo being around 26kb when minified and gzipped.

```javascript
import pts from 'pts';
// ... your Pts.js code
```

```typescript
import { Pts } from 'pts';
// ... your Pts.js code
```

--------------------------------

### Drawing a Sheared Polygon

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0100_Get_started.md

Creates a rectangle and its corner points, then applies a shear transformation to the polygon based on time. Finally, it draws the original rectangle and the transformed polygon.

```javascript
var rect = Rectangle.fromCenter( space.center, space.size.$divide(2) );
var poly = Rectangle.corners( rect );
poly.shear2D( Num.cycle( time%5000/5000 ) - 0.5, space.center );    

form.fillOnly("#123").polygon( poly );
form.strokeOnly("#fff", 3).rect( rect );
```

--------------------------------

### Dynamic Script Loading and Demo Setup

Source: https://github.com/williamngan/pts/blob/master/demo/index.html

Dynamically creates and appends a script tag to the document based on a query parameter 'name'. It also sets up event listeners for script loading to update UI elements with demo descriptions and source code links. Handles cases where the 'name' parameter is missing or invalid.

```javascript
var src = null;
var qfile = qs("name", 50);
if (!qfile) qfile = "template";
if (qfile.indexOf("/") >= 0 || qfile.split(".").length > 2 )
  qfile="";
src = document.createElement('script');
src.setAttribute("type", "text/javascript");
src.setAttribute("id", "src");
src.setAttribute("src", "../demo/" + qfile + ".js");
var link = document.createElement("a");
link.setAttribute("class", "source-code");
link.setAttribute("href", "./edit/?name=" + qfile);
// link.setAttribute("target", "pts_github");
link.textContent = "► view/edit code";
src.onload = function () {
  var hint = document.querySelector("#hint");
  hint.innerHTML = "";
  hint.appendChild( link );
  var desc = document.querySelector("#description");
  if (window.demoDescription) {
    desc.textContent = ": "+window.demoDescription;
  }
};
```

--------------------------------

### Drawing a Pulsating Circle

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0100_Get_started.md

Adds a player to the space to draw a pulsating circle at the pointer's location. The radius is dynamically calculated based on time, cycling between 0 and 20.

```javascript
space.add( (time, ftime) => {
  let radius = Num.cycle( (time%1000)/1000 ) * 20;
  form.fill("#09f").point( space.pointer, radius, "circle" );
});
```

--------------------------------

### Pts Sound Instance Creation and Playback

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0800_Sound.md

A collection of methods for creating and controlling Pts Sound instances. This includes loading from files, using `AudioBuffer`, capturing microphone input, generating synthetic sounds, and creating instances from custom nodes. Playback is controlled via `start`, `stop`, and `toggle` methods.

```APIDOC
Sound.load( path: string ): Promise<Sound>
  Loads an audio file from a given path.

Sound.loadAsBuffer( path: string ): Promise<Sound>
  Loads an audio file into an AudioBuffer.

Sound.input(): Promise<Sound>
  Captures microphone input and returns a Sound instance.

Sound.generate( type: string, frequency: number ): Sound
  Generates a synthetic sound wave (e.g., "sine") at a specified frequency.

Sound.from( node: AudioNode, context: AudioContext ): Sound
  Creates a Pts Sound instance from an existing Web Audio API node and context.

Sound.prototype.start(): void
  Starts playback of the sound and connects the AudioNode to the AudioContext destination.

Sound.prototype.stop(): void
  Stops playback of the sound and disconnects the AudioNode.

Sound.prototype.toggle(): void
  Toggles between playing and stopping the sound.
```

--------------------------------

### CanvasForm Text Layout Examples

Source: https://github.com/williamngan/pts/blob/master/guide/Typography-0600.html

Demonstrates various methods of the Pts CanvasForm for rendering text within defined areas. Includes basic text boxes, multi-line paragraphs, text alignment, and overflow control.

```javascript
// put text content in an area defined by a Group
form.textBox( area, content );
```

```javascript
// put in bottom, use "..." when truncated
form.textBox( area, content, "bottom", "..." );
```

```javascript
// align text before putting into textBox
form.alignText("left", "top").textBox( area, content );
```

```javascript
// put multi-line text in a box with line-height of 1.5
form.paragraphBox( area, content, 1.5 );
```

```javascript
// multi-line text center aligned, place in middle and allow overflow
form.alignText("center").paragraphBox( area, content, 1.5, "middle", false );
```

```javascript
// Use heuristics to estimate font width
form.fontWidthEstimate(true).paragraphBox( area, content );
```

--------------------------------

### Integrate Pts with Tone.js

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0800_Sound.md

This example illustrates how to create a Pts Sound instance from an existing Tone.js synthesizer. It allows Pts to visualize audio generated by Tone.js, enabling complex interactive music experiences. The `Sound.from` static method takes the audio node and its context as arguments.

```javascript
let synth = new Tone.Synth(); 
let sound = Sound.from( synth, synth.context ); // create Pts Sound instance
synth.toMaster(); // play using tone.js instead of Pts
```

--------------------------------

### Create and Setup CanvasSpace

Source: https://github.com/williamngan/pts/blob/master/guide/Space-0500.html

Demonstrates how to initialize a CanvasSpace instance using a CSS selector and configure its background color and retina display. The selector can target an existing element or a new canvas will be appended.

```javascript
let space = new CanvasSpace( "#hello" );
space.setup({ bgcolor: "#123", retina: true });
```

--------------------------------

### Sound Input Methods

Source: https://github.com/williamngan/pts/blob/master/guide/Sound-0800.html

Provides static methods to load or generate audio input. Supports loading from files or audio elements, creating dynamic audio, and capturing microphone input.

```APIDOC
Sound.load( url | audioElement )
  - Loads sound from a URL or an existing <audio> element.
  - Returns a Promise that resolves with the Sound instance.
  - Example: Sound.load( "/path/to/hello.mp3" ).then( s => sound = s );
  - Example: Sound.load( audioElem ).then( s => sound = s );

Sound.loadAsBuffer( url )
  - Loads sound as an audio buffer, recommended for Safari/iOS compatibility.
  - Returns a Promise.
  - Example: Sound.loadAsBuffer( "/path/to/hello.mp3" ).then( s => sound = s );

Sound.generate( type, frequency )
  - Creates dynamic audio, e.g., a sine oscillator at a given frequency.
  - Example: let sound = Sound.generate( "sine", 120 ); // sine oscillator at 120Hz

Sound.input( constraints )
  - Captures audio from the default input device (microphone).
  - Returns a Promise that resolves when the input device is ready.
  - Example: Sound.input().then( s => sound = s ); // default input device
  - Example: Sound.input( constraints ).then( s => sound = s ); // advanced use cases
```

--------------------------------

### Creating a Pt Instance

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0200_Pt.md

Demonstrates various ways to instantiate a Pt object, including default creation, from multiple arguments, arrays, objects, other Pt instances, and using a static make method.

```javascript
// Defaults to (0,0)
new Pt()

// From a series of parameters, array, or object
new Pt( 1, 2, 3, 4 )
new Pt( [1,2,3] )
new Pt( {x:0, y:1, z:2, w:3} )
new Pt( anotherPt )

Pt.make( 5, 0 ) // same as new Pt(0,0,0,0,0)
```

--------------------------------

### Google Analytics Initialization

Source: https://github.com/williamngan/pts/blob/master/guide/Typography-0600.html

Standard JavaScript code snippet for initializing Google Analytics tracking on a webpage.

```javascript
hljs.initHighlightingOnLoad();
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-104913373-1', 'auto');
ga('send', 'pageview');
```

--------------------------------

### CanvasSpace Properties

Source: https://github.com/williamngan/pts/blob/master/guide/Space-0500.html

Access convenient properties of a CanvasSpace instance to get pointer position, size, center, and element references.

```javascript
// Access pointer position
let pointerPosition = space.pointer;

// Get size and boundary information
let spaceSize = space.size;
let spaceCenter = space.center;
let spaceWidth = space.width;
let spaceHeight = space.height;
let innerBounds = space.innerBound;

// Get HTML elements
let spaceElement = space.element;
let parentElement = space.parent;
```

--------------------------------

### CanvasForm Drawing Example

Source: https://github.com/williamngan/pts/blob/master/guide/Space-0500.html

Demonstrates how to use CanvasForm to draw shapes like circles and points within an animation loop.

```javascript
let space = new CanvasSpace("#paper");
let form = space.getForm(); // get default CanvasForm

space.add( (time, ftime) => {
    form.stroke("#fff").fill("#f03").circle( c );
    form.point( p, 10 );   
} );
```

--------------------------------

### Rectangle Module Rectangle Operations

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0400_Op.md

Functions for creating and manipulating rectangles, such as creation from center, getting corners, sides, quadrants, and intersection.

```javascript
Rectangle.fromCenter( center, 100, 50 );
Rectangle.corners();
Rectangle.sides();
Rectangle.quadrants(); // get 4 inner rectangles
Rectangle.intersectRect2D( rect1, rect2 );
```

--------------------------------

### Initialize Google Analytics

Source: https://github.com/williamngan/pts/blob/master/guide/assets/footer.html

This snippet initializes Google Analytics tracking for the website. It configures the tracking ID and sends an initial page view event.

```javascript
hljs.initHighlightingOnLoad();
(function(i,s,o,g,r,a,m){
  i['GoogleAnalyticsObject']=r;
  i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)
  },i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
  m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-104913373-1', 'auto');
ga('send', 'pageview');
```

--------------------------------

### Install Pts.js via CDN

Source: https://github.com/williamngan/pts/blob/master/index.html

Instructions for including the Pts.js library directly in an HTML file using a CDN link. This method is suitable for quick prototyping or projects that do not use a module bundler.

```html
<script src="/path/to/pts.min.js"></script>
```

--------------------------------

### CanvasSpace Animation and Interaction

Source: https://github.com/williamngan/pts/blob/master/guide/Space-0500.html

Control animation playback and bind mouse/touch events for interactive spaces. Supports chaining methods for concise setup.

```javascript
space.play();
space.playOnce( 1000 ); // play 1 sec then stop
space.pause();
space.resume();
space.stop();
```

```javascript
// You can chain multiple functions together
space.bindMouse().bindTouch().play();
```

--------------------------------

### Sound Input Methods

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0800_Sound.md

Provides static methods to load audio from files, generate audio dynamically, or capture microphone input. Each method returns a Promise that resolves with a Sound instance.

```javascript
// Load sound from a URL
Sound.load( "/path/to/hello.mp3" ).then( s => sound = s );
// Load sound from an existing <audio> element
Sound.load( audioElem ).then( s => sound = s );

// Load sound as a buffer (for Safari/iOS compatibility)
Sound.loadAsBuffer( "/path/to/hello.mp3" ).then( s => sound = s );

// Generate a sound (e.g., sine wave at 120Hz)
let sound = Sound.generate( "sine", 120 );

// Get audio from default microphone input
let sound;
Sound.input().then( s => sound = s ); // default input device
// Get audio with specific constraints
Sound.input( constraints ).then( s => sound = s );
```

--------------------------------

### Get Pixel RGBA Color

Source: https://github.com/williamngan/pts/blob/master/guide/md/_0900_Image.md

Retrieves the RGBA color values of a specific pixel on the image. This function is fundamental for pixel-level image analysis and manipulation.

```javascript
// Assuming 'img' is a loaded Img object
// and 'pixelPosition' is a Point object
let rgbaColor = img.pixel( pixelPosition );
```
Tokens:
Raw