Locusing

A declarative graphics and animation library for mathematical visualization.

Locusing combines the elegance of Manim with the interactivity of Diagramatics, bringing beautiful mathematical animations to the web.

Features

• Declarative API - Immutable, composable diagram primitives
• Manim-style Animations - 30+ built-in animations (Create, FadeIn, Transform, etc.)
• Interactive Controls - Sliders, draggable points, and constraints
• Hand-drawn Style - Rough.js integration for sketch-like graphics
• Mathematical Tools - Vectors, matrices, Bezier curves, coordinate systems
• Geometry Constructions - Compass-and-straightedge style constructions

Packages

| Package | Description | |:--------|:------------| | @wangyaoshen/core | Core rendering engine with SVG and Rough.js support | | @wangyaoshen/animate | Manim-style animation system powered by GSAP | | @wangyaoshen/math | Mathematical utilities (vectors, matrices, curves) | | @wangyaoshen/geometry | Coordinate systems and geometric constructions | | @wangyaoshen/interactive | Interactive controls and constraints |

Quick Start

# Install packages
pnpm add @wangyaoshen/core @wangyaoshen/animate @wangyaoshen/math

Static Diagram

import { square, circle, text, combine, renderToSVG } from '@wangyaoshen/core';

// Create shapes
const sq = square(100).fill('#EA580C');
const label = text('Hello').translate(0, 80);

// Combine and render
const diagram = combine(sq, label);
renderToSVG(diagram, document.getElementById('canvas'));

Animated Scene

import { Scene, Create, FadeOut, Wait } from '@wangyaoshen/animate';
import { square, circle } from '@wangyaoshen/core';

class MyScene extends Scene {
  construct() {
    const sq = square(100).fill('#EA580C');
    const c = circle(50).fill('#58C4DD');

    this.play(Create(sq));
    this.play(Create(c, { delay: 0.5 }));
    this.wait(1);
    this.play(FadeOut(sq), FadeOut(c));
  }
}

const scene = new MyScene(document.getElementById('canvas'));
scene.render();

Interactive Diagram

import { Interactive } from '@wangyaoshen/interactive';
import { circle } from '@wangyaoshen/core';

const interactive = new Interactive(container);

interactive.slider({
  min: 10,
  max: 100,
  value: 50,
  onChange: (radius) => {
    const c = circle(radius).fill('#EA580C');
    interactive.update(c);
  }
});

Animation Library

Creation Animations

• Create - Draw stroke animation
• Write - Text writing effect
• GrowFromCenter - Scale from center
• DrawBorderThenFill - Draw border then fill

Fade Animations

• FadeIn / FadeOut
• FadeInFrom / FadeOutTo

Transform Animations

• Transform - Morph between shapes
• ReplacementTransform - Replace with transform
• Morphing - SVG path morphing (requires GSAP MorphSVG)

Movement Animations

• Shift - Relative movement
• MoveTo - Absolute movement
• MoveAlongPath - Follow a path
• Rotate / Scale

Indication Animations

• Indicate - Highlight effect
• Circumscribe - Circle around
• Wiggle - Shake effect
• Flash - Flash effect

Composition

• Succession - Play in sequence
• LaggedStart - Staggered start times

Development

# Install dependencies
pnpm install

# Run playground
pnpm dev

# Build all packages
pnpm build

# Run tests
pnpm test

Credits

• GSAP - Animation engine
• Rough.js - Hand-drawn style graphics
• KaTeX - LaTeX rendering (playground)
• Manim - Animation API inspiration
• Diagramatics - Interactive diagram inspiration

License

MIT License - see LICENSE for details.