$ show jmoenig/morphic.js
morphic.js is a dependency-free JavaScript library implementing the Squeak/Self-inspired Morphic UI framework on HTML5 Canvas. It provides a tree-structured scene graph of 'Morph' objects, a damage-based incremental rendering loop that repaints only dirty rectangles, a unified event dispatch system (mouse, touch, keyboard, drag-and-drop, external file drop), and a full widget toolkit including menus, sliders, dials, scroll frames, editable text fields, inspectors, color pickers, speech bubbles, and dialog prompts. It also includes a LOGO-style turtle (PenMorph) with a warp optimization for deep recursion. In production it serves as the GUI kernel for Snap!, the block-based programming environment — the heavy multi-touch editing, shape caching, template-dragging, and file-import behaviors in this file exist to support that use case. Architecturally it is a single-file monolith (~11k lines of code plus extensive embedded documentation) using classical prototypal inheritance mixed with modern ES2020+ syntax (const, arrow functions, optional chaining, async/await, Map). There are no imports, no build step, no package manifest, and zero external runtime dependencies — only browser Canvas/DOM APIs. The primary entry point is `new WorldMorph(canvasElement)`, driven by a requestAnimationFrame loop calling `world.doOneCycle()` (see minimal.html, morphic.html, multiple.html, sample.html for working demos). Data flows from browser events into WorldMorph's event listeners, get dispatched through HandMorph to target Morphs, and state changes push damaged rectangles into a 'broken' list that `doOneCycle()` condenses and redraws incrementally. The most reusable assets are the Point/Rectangle/Color value classes (full 2D vector math, rectangle algebra, HSV/HSL conversion), the self-contained retina display patcher for hi-DPI canvases, the generic Animation/easing engine, the PNG metadata embedding utility (iTXt chunk injection with CRC32), and the dirty-rectangle damage-merging renderer. Each of these can be extracted into a standalone project with minimal modification and demonstrates non-obvious craftsmanship. The codebase is remarkably well-commented with a full programming guide, inheritance hierarchy, and migration notes embedded in the source itself. Caveats: there are no automated tests, no CI, no npm packaging, heavy pollution of the global namespace, and an intentional `eval`-based inspector for developer mode. The AGPL-3.0 license and single-file distribution model reflect its Smalltalk 'kernel image' philosophy rather than modern modular library conventions. It is maintained but commit cadence is sparse (version string 2026-May-11, last push 2026-Sep-01), and 32 open issues show no obvious triage activity.
The LLM identified 5 files worth highlighting for reuse:
A self-contained family of value classes implementing 2D vector arithmetic (polar coordinates, rotation by angle, distance, dot-less cross products), rectangle algebra (intersection, merging, inset/expand, region subdivision around holes), and color models (RGBA, HSV and HSL with bidirectional conversion, mixing, darkening/lightening, inversion). They depend only on each other and can be extracted verbatim into any JS project needing geometric primitives. Demonstrates the classic Squeak/ST-80 geometry API faithfully adapted to JavaScript, including subtle operations like Point.distanceAngle() and Rectangle.amountToTranslateWithin().
A standalone ~150-line module that monkey-patches HTMLCanvasElement and CanvasRenderingContext2D so all canvas widths, heights, drawImage/getImageData calls, and shadow offsets transparently scale by devicePixelRatio/backingStorePixelRatio. Each canvas gets an isRetinaEnabled flag and getPixelRatio() so mixed-resolution surfaces coexist; normalizeCanvas() converts in place or as a copy. It carefully handles non-configurable property descriptors (Safari), Firefox's NS_ERROR_FAILURE quirk, and integer pixel-ratio ceilings to avoid antialiasing artifacts. Extractable as a drop-in hi-DPI canvas utility for any 2D rendering project.
A generic tweening engine where each Animation captures a setter, getter, delta, duration, and easing function, computes a destination from the current state, and steps incrementally toward it. It ships with 12 easing functions (linear, sinusoidal, quadratic, cubic, elastic, and in/out variants) and can be run standalone or registered in a frame-loop queue. The same mechanism is repurposed as a one-shot scheduler (WorldMorph.schedule) and a condition-polling scheduler (WorldMorph.once), avoiding setTimeout patterns. Fully self-contained and extractable as a mini animation library.
The rendering core that makes the scene graph fast: every state change pushes a damaged Rectangle onto the world's 'broken' list; each display cycle condenses clustered rectangles into unions (with a merge-all fallback when over 1000), then redraws only those regions via fullDrawOn with proper clipping. Paired with per-morph cached images, alpha-based free-form hit testing, and 'holes' (untouchable rectangular regions), this implements a classic but non-trivial progressive damage/repaint strategy. The region-merging heuristic is a reusable pattern for any canvas/2D renderer needing to avoid full-frame repaints.
A compact utility that embeds arbitrary strings into PNG metadata by constructing an iTXt chunk (with a hand-rolled CRC32 implementation) and splicing it into the base64-encoded PNG before the IEND trailer, plus the inverse extraction logic in HandMorph.processDrop which scans dropped PNG bytes for a marker and decodes the embedded payload. Snap! uses this to round-trip block source code inside costume images. The writer is ~40 self-contained lines demonstrating low-level binary format manipulation in browser JS and is directly reusable for any application needing data-in-image transport.