Releases: makeabilitylab/js
0.6.0
New features
- Non-linear morph paths.
MakeabilityLabLogoMorphertriangles can now assemble along curved trajectories instead of straight lines. Newmorph-paths.jsmodule:linearPath,arcPath,bezierPath,spiralPath, plus aMORPH_PATHSregistry. The morpher gains apathFunction, a per-piecestagger(inside-out arrival), andsetPath()for live swaps. Defaults match prior behavior. easeOutBackspringy-overshoot easing added to the math module.MakeabilityLabLogo.setLTriangleFillColor(color)convenience setter — accepts translucent values (e.g.rgba(255,255,255,0.5)) so the colored logo can show through the L.- LeafFall translucent pile. When
dropLeaves()runs, leaves now fade towardleafPileOpacity(default0.75, ~25% translucent) as they fall. Toggle with the newfadeLeavesOnDropoption/property (default on); the logo and pinned cells are unaffected.
Demos
- New MakeabilityLabLogoMorphPaths demo with a floating, collapsible, accessible control sidebar (path / easing / stagger / size / source / playback).
- MakeabilityLabLogoLeafFall demo:
Tkey toggles the leaf fade.
Notes
- Backward compatible (minor bump). The leaf fade defaults to on, so existing LeafFall usages will show a slightly translucent pile after dropping; pass
{ fadeLeavesOnDrop: false }to keep leaves fully opaque.
0.5.0
Adds two opt-in capabilities to MakeabilityLabLogoLeafFall. The existing fall-in intro is unchanged when neither is used.
✨ New
dropLeaves()— drops every background grid triangle to the bottom of the screen into a pile (gravity-accurate fall, sideways drift, and a tumble to a random resting angle) while the logo stays fixed: its colored triangles, black M-shadow, translucent L, and outlines don't move. Tunable viagroundStaggerMs,groundFallMinMs,groundFallMaxMs,groundPileSpread.startAssembledoption — renders the grid + logo fully assembled from the first frame (skips the intro), so nothing animates until you calldropLeaves(). Handy for things like a custom 404 page.
The Leaf Fall demo gains an F key to trigger the drop.
♻️ Internal
buildIntroPieces now tags the pinned grid pieces with isLogoColor (and carries each piece's source tri) so the drop can keep the colored logo fixed. Additive only — no change to colors, pinning, or motion; ZoomFade and GridFade are unaffected.
CDN
import { MakeabilityLabLogo, MakeabilityLabLogoLeafFall }
from 'https://cdn.jsdelivr.net/gh/makeabilitylab/js@0.5.0/dist/makelab.logo.min.js';
const anim = new MakeabilityLabLogoLeafFall(logo, w, h, { startAssembled: true });
// ...render loop...
anim.dropLeaves(); // logo stays, leaves fall to the ground0.4.0
Two new framework-agnostic logo intro animations, in the same family as the existing Grid Fade:
✨ New
MakeabilityLabLogoLeafFall— a full-canvas triangle grid flutters down from the top like falling leaves (each weaves side to side and tumbles, settling to its exact spot), then the logo's pieces fall in to complete it. The M and L outlines fall as their individual line segments, randomly sequenced.MakeabilityLabLogoZoomFade— pieces fly in toward the viewer from a shared perspective origin, sweeping inward and shrinking to land on the screen plane, with per-piece depth variation for a real 3D feel.
In both, the colored logo emerges from the backing grid (the 12 colored grid cells are pinned to the logo colors) rather than dropping redundant copies; only the black M-shadow, translucent L overlay, and outline segments animate in on top.
♻️ Internal
- Shared grid-alignment, piece-building, and transform helpers factored into
makelab-logo-intro-utils.js;MakeabilityLabLogoGridFaderefactored to reuse them (no behavior change). - New demo apps for both animations; rebuilt
dist/bundles.
CDN
import { MakeabilityLabLogoLeafFall, MakeabilityLabLogoZoomFade }
from 'https://cdn.jsdelivr.net/gh/makeabilitylab/js@0.4.0/dist/makelab.logo.min.js';0.3.0
Library and tooling improvements, plus a new logo animation.
New
- GridFade intro animation —
MakeabilityLabLogoGridFade: a full-canvas grid of triangles fades in at staggered times, then the Makeability Lab logo fades in on top (grid cells under the logo match its orientation and colors for a seamless reveal). Includes a responsive demo app. - Vector gains
signedAngleTo()(directed angle),clone(), andequals(other, epsilon). - The math module now exports
map,clamp,randomGaussian, and the easing functions (easeInCubic,easeOutCubic,easeOutQuad,easeInOutCubic) — previously defined but missing from the bundles. - Zero-dependency test suite (
test/), runnable vianpm test(Node) ortest/index.html(browser).
Changed
- Breaking:
Vector.angleBetween()now returns the conventional unsigned angle in[0, π](was a directed angle in[0, 2π)). Use the newsignedAngleTo()for a directed angle.
Fixed
Triangle.createTriangleused the wrong property name (strokeWeightvsstrokeWidth).- Removed stray
console.logcalls that fired on every call in the graphics/logo modules. - Fixed the
package.jsonmainentry (pointed at a nonexistent bundle) and theVectorTeststhat never actually asserted.
Maintenance
npm run build/npm testscripts; dev-dependency security updates (clears all audit advisories);.DS_Storecleanup; addedCLAUDE.md.
v0.2.1 Adds IIFE build
This release adds IIFE (Immediately Invoked Function Expression) builds for all modules, enabling simple <script> tag usage without ES module imports. This is especially useful for p5.js sketches, classroom demos, and other educational contexts where import statements add unnecessary complexity.
New
- IIFE builds for every module:
makelab.math.iife.js,makelab.graphics.iife.js,makelab.serial.iife.js,makelab.logo.iife.js, andmakelab.all.iife.js(plus minified.min.jsvariants of each) - Global scope hoisting: commonly used exports (
Serial,SerialEvents,SerialState,Vector,lerp) are automatically available as global variables after loading an IIFE build - Multiple IIFE coexistence: IIFE builds use
extend: true, so loading multiple modules (e.g.,makelab.math.iife.js+makelab.serial.iife.js) merges intowindow.Makelabwithout conflicts
Usage
<script src="https://cdn.jsdelivr.net/gh/makeabilitylab/js@0.2.1/dist/makelab.serial.iife.min.js"></script>
<script>
const serial = new Serial();
serial.on(SerialEvents.DATA_RECEIVED, (sender, data) => console.log(data));
</script>Build changes
- Rollup config refactored with
createModuleConfigs()helper to generate ESM + IIFE outputs per module - Removed
rollup.config.simple.js(redundant —rollup.config.jsnow covers all use cases) - Removed
webpack.config.js(superseded by Rollup) - README updated with IIFE quick start, CDN URLs, and "Which build format?" guide
Full output files
Each module now produces 4 files: .js, .min.js, .iife.js, .iife.min.js (20 files total across 5 modules).
v0.2.0 Add serial module and color utility exports
New serial module
- Web Serial API wrapper for text-based communication with Arduino/ESP32
- Event-driven API: on(), off(), fireEvent() with string-based event types
- Connection state tracking (closed, opening, open, closing)
- Robust line splitting (handles \r\n, \n, \r)
- Write guards, improved error messages, browser support check
New color utilities
- Added rgbToHex() to color-utils.js
- Exported hsvToRgb, rgbToHsv, rgbToHex, hexStringToRgb, and other color functions from graphics index
Demo apps
- apps/serial/SerialTest — basic connect/send/receive test
- apps/serial/SerialColorTest — bidirectional HSV color picker for NeoPixel control
Updated README with serial module documentation.
0.1.2 Added triangle art
Added triangle art .json input parser functionality
v0.1.0 Add "Makeability Lab" label to logo
Added easing animation support
Added "Makeability Lab" logo text beneath logo
Added L outline support
Changed static methods on MakeabilityLabLogo from getHeight to getGridHeight, etc.