morph3d-js
Description
Morph3D is a real-time animation: a morphing shape made of a point cloud. A single object of several hundred small dots continuously rotates, drifts across the screen and smoothly transforms into three geometric shapes - a sphere, a cube and a donut (torus). The project has two color themes: Light (default) draws dots in black and gray on a white background, while Dark uses soft neon colors on a black background, with the color smoothly cycling through the palette. In both themes each dot's shade is set by its depth, so the flat point cloud reads as a volumetric 3D shape.
The project is a JavaScript / HTML5 Canvas 2D demo scene with no external dependencies, ported from the original OpenGL Windows screensaver. The original animation logic is taken from the morph3d-src project - shape generation, the morphing state machine, rotation, screen movement and perspective projection - replacing native OpenGL rendering with a pure Canvas 2D implementation that runs in any modern browser.
Technologies
- JavaScript (ES6) - modern syntax, strict mode, fully self-contained
- HTML5 Canvas 2D - all rendering through the canvas 2D context (filled circles); no WebGL
- requestAnimationFrame - the animation loop runs on browser frame callbacks
- Delta-time updates - movement and morphing follow real elapsed time, so speed is identical on 60 Hz and 144 Hz displays
- devicePixelRatio scaling - the canvas backing store scales with display density for crisp rendering
- No external dependencies - no npm packages, no Three.js, no build tools