Projection Demo

Compare original purple points with their closest points on a line, quadratic Bézier curve or plane. Dashed links show the discarded displacement; projected points change from purple to pink with increasing distance relative to the current maximum. The table and full-precision CSV contain the same projections, including hidden points.

In 2D, drag the blue geometry handles or open Geometry coordinates and apply numeric coordinates. x increases rightward and y downward in the demo coordinate system (0–640, 0–380). The line is infinite: the solid part joins A and B, dashed extensions continue beyond them. t=((p−a)·(b−a))/|b−a|² and p′=a+t(b−a); t=0 at A and t=1 at B, so t is dimensionless and can fall outside [0,1]. The lower strip shows this parameter with labelled ends.

For a quadratic Bézier segment, B(t)=(1−t)²P0+2(1−t)tP1+t²P2, 0≤t≤1. Projection compares the endpoints and all numerical stationary candidates of squared distance. A closest endpoint need not have a perpendicular residual. Equal closest points are possible; t is a curve parameter, not arc length. Coincident curve controls are allowed; identical line endpoints are rejected.

In 3D, Render 3D creates the scene; drag the background to rotate, Ctrl/Meta+wheel to zoom. A blue corner moves in a plane parallel to the screen through that corner. Numeric coordinates (−10 to 10) also work without WebGL. XY/XZ/YZ set actual coordinate planes. The transparent patch visualizes an infinite plane, not a triangle boundary. Projection uses p′=p−n((p−o)·n) for unit normal n. u,v are orthonormal coordinates relative to the three corners’ centroid, not global x,y. For XY, (2,3,4) projects to (2,3,0), distance 4.

Randomize generates 18 2D or 24 3D demo points; Reset restores the original seeded points and geometry in the current mode. Invalid/collinear plane coordinates retain the previous geometry. View toggles and plane changes preserve the renderer and camera; switching tabs pauses rendering. This is a small interactive projection demo, without own dataset import or high-dimensional projection. Everything runs in your browser.