PTS.JS · POINT · GROUP · FORM · WILLIAM NGAN, 2017
between points.
A composition is not a drawing. It is a set of relations between points that the renderer happens to render. Move your cursor through the field.
what you're seeing.
Eighty Pts are placed across the chamber and given small randomized velocities. Each frame, every point drifts. Pairs within a threshold distance are connected by a line — that line exists nowhere except in the relation between two points.
Your cursor is a Pt too. Points within its radius experience a small repulsive force; lines passing near it tint vermillion. The composition is not playing back; it is being computed in real time. The state at any moment is a function of every point's drift plus your cursor's history.
Three switchable modes show the same point set rendered as different forms — proximity-line graph, arc tessellation, sweeping polygon. The geometry is the same. The Form changes.
That separation — what is a thing versus how to draw it — is the whole argument of Pts.js. Three.js conflates them; D3 conflates them; p5.js conflates them. Pts.js does not.
the three primitives.
-
Pt
The atom. A vector with arithmetic —
add,subtract,magnitude,angle. Every shape in this composition begins as aPt. -
Group
A sequence of
Pts. Two points form a line; three form a triangle; many form a polyline, a curve, a polygon. Same data structure for all of them. The difference is how a Form interprets it. -
Form
The renderer. Given a
Groupand aCanvasSpace, a Form draws — as stroke, fill, point cluster, polygon, arc. The geometry never knows what it will be drawn as.
lineage.
- 1990sProcessing — Casey Reas + Ben Fry at MIT. Java-based creative coding. Establishes the convention that "draw something" code is its own genre.
- 2014p5.js — Lauren McCarthy. Processing in the browser. Becomes the default teaching tool for generative work.
- 2017Pts.js — William Ngan. A library for compositional work, not sketches. Distinct philosophy: points are first-class, geometry composes, rendering is a separate concern.
- 2018+Editorial generative work — Pts.js becomes the choice when a designer wants generative output that looks like design, not like a coder's experiment. Books, posters, identity systems, scroll-driven editorial.
when to reach for it.
Reach for Pts.js when the work is compositional and the aesthetic matters. Editorial covers, identity systems, scroll-driven informational pieces with geometric vocabulary, generative typography, sound visualization with form-driven shapes. Pieces where the rendering wants to feel placed, not sketched.
Reach elsewhere when you need 3D (Three.js), high-frequency motion-graphics output (Pixi.js), sketch-as-pedagogy (p5.js), data-encoded charts (D3, Vega-Lite), or hand-drawn aesthetic (Rough.js).
Stack neighbors: p5.js (sketch-first), Paper.js (vector authoring), Two.js (multi-target 2D), Rough.js (hand-drawn), Pixi.js (2D WebGL performance ceiling).