Manim2D

A JavaScript library for creating mathematical animations and visualizations, inspired by Manim.

Installation

Quick Start

Create a new Manim2D project:

npx manim2d createapp my-project
cd my-project
npm install
npm run dev

Manual Installation

npm install manim2d

Usage

import { MainFrame, Rectangle, Circle, Colors } from 'manim2d';

// Create animation frame
const scene = new MainFrame("canvas");
const colors = new Colors();

// Create shapes
const rect = new Rectangle(100, 100, 150, 100, colors.BLUE);
const circle = new Circle(300, 200, 50, colors.RED);

// Add to scene and play
scene.add(rect, circle);
scene.play();

Features

• Geometric Shapes: Rectangle, Circle, Line, Dot
• Text Rendering: Styled text with custom fonts
• Animations: Linear motion, custom animations
• Coordinate Systems: Mathematical coordinate grids
• Function Plotting: Graph mathematical functions
• Colors: Predefined color palette
• Export: Video recording capabilities

API Reference

Shapes

Rectangle

new Rectangle(x, y, width, height, strokeColor, lineWidth, fill, fillColor)

Circle

new Circle(centerX, centerY, radius, strokeColor, fill, fillColor)

Line

new Line(x, y, length, angle, strokeColor, label, labelText, dashed, arrowTip)

Text

new Text(text, x, y, strokeColor, size, font)

Animations

LinearMotion

new LinearMotion(object, direction, distance)

Systems

CoordinateSystem

new CoordinateSystem(x, y, labeled, spacing, axisColor)

Graph

new Graph(expression, strokeColor, minX, maxX, step, scale)

Examples

Check out the starter template created by npx manim2d createapp for comprehensive examples.

Development

git clone <repository>
cd manim2d
npm install
npm run dev

Project Structure

manim2d/
├── src/
│   └── index.js          # Main library file with all classes
├── bin/
│   └── create-app.js     # CLI tool for creating projects
├── templates/
│   ├── index.html        # HTML template
│   ├── main.js          # JavaScript template with examples
│   ├── package.json     # Package template
│   └── vite.config.js   # Vite configuration template
└── package.json         # Package configuration

License

MIT

Demo

canvas-animation (1).webm