Wireframe Morphing (2D) — Vertex-Lerp Shape Cycle
2D companion to the Three.js wireframe morph: a Canvas 2D engine builds one shared ring of vertices and lerps it between square, circle, star and triangle outlines, exposing vertex count, morph speed, rotation and a manual scrub slider that the 3D version keeps hidden inside its geometry buffers.
The 3D version morphs a subdivided icosahedron's vertex buffer between four target position arrays computed from the same unit-sphere directions — a technique that only works because Three.js hands you a `BufferAttribute` to mutate directly. This 2D companion rebuilds that same idea in plain Canvas 2D: a ring of N points, evenly spaced by angle, gets four target radius functions (constant for the circle, a regular-polygon distance formula for the square and triangle, a cosine-modulated radius for the five-point star), and every frame lerps the current positions toward the next target with the identical cubic ease-in-out curve. Because the shape morph is now a 2D projection problem rather than a 3D rotation problem, the controls can expose the underlying mechanism directly — drag the vertex-count slider from 8 to 220 and watch the outlines go from an angular low-poly silhouette to a near-perfect curve, or grab the manual scrub slider to freeze the interpolation at any exact percentage between two shapes instead of waiting for the autoplay loop.
Canvas 2D vertex-lerp engine: a shared N-point ring is rebuilt from four analytic radius functions (circle, regular-polygon square/triangle, cosine-star) and interpolated between them each frame with a cubic ease-in-out, driven by vertex-count, segment-duration and rotation-speed sliders plus a manual scrub slider and Play/Pause.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install