Skip to content

Releases: makeabilitylab/js

0.6.0

20 Jun 22:37

Choose a tag to compare

New features

  • Non-linear morph paths. MakeabilityLabLogoMorpher triangles can now assemble along curved trajectories instead of straight lines. New morph-paths.js module: linearPath, arcPath, bezierPath, spiralPath, plus a MORPH_PATHS registry. The morpher gains a pathFunction, a per-piece stagger (inside-out arrival), and setPath() for live swaps. Defaults match prior behavior.
  • easeOutBack springy-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 toward leafPileOpacity (default 0.75, ~25% translucent) as they fall. Toggle with the new fadeLeavesOnDrop option/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: T key 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

20 Jun 02:07

Choose a tag to compare

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 via groundStaggerMs, groundFallMinMs, groundFallMaxMs, groundPileSpread.
  • startAssembled option — renders the grid + logo fully assembled from the first frame (skips the intro), so nothing animates until you call dropLeaves(). 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 ground

0.4.0

20 Jun 00:13

Choose a tag to compare

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; MakeabilityLabLogoGridFade refactored 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

19 Jun 15:17

Choose a tag to compare

Library and tooling improvements, plus a new logo animation.

New

  • GridFade intro animationMakeabilityLabLogoGridFade: 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(), and equals(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 via npm test (Node) or test/index.html (browser).

Changed

  • Breaking: Vector.angleBetween() now returns the conventional unsigned angle in [0, π] (was a directed angle in [0, 2π)). Use the new signedAngleTo() for a directed angle.

Fixed

  • Triangle.createTriangle used the wrong property name (strokeWeight vs strokeWidth).
  • Removed stray console.log calls that fired on every call in the graphics/logo modules.
  • Fixed the package.json main entry (pointed at a nonexistent bundle) and the VectorTests that never actually asserted.

Maintenance

  • npm run build / npm test scripts; dev-dependency security updates (clears all audit advisories); .DS_Store cleanup; added CLAUDE.md.

v0.2.1 Adds IIFE build

20 May 17:24

Choose a tag to compare

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, and makelab.all.iife.js (plus minified .min.js variants 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 into window.Makelab without 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.js now 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

20 May 13:44

Choose a tag to compare

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

12 Feb 22:09

Choose a tag to compare

Added triangle art .json input parser functionality

v0.1.0 Add "Makeability Lab" label to logo

11 Feb 15:36

Choose a tag to compare

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.