Quickstart

This guide will lead you through displaying simple scenes using wanim, a web engine for mathematical animations, inspired by manim.

We will install the library and create a WanimScene, which acts as a container for running a scripted animation. To this we will add a circle, which should animate its entry. Then we will extend this animation by morphing the circle into a square. This will give you an introduction to wanim’s animation engine. […]

Installation

Danger

This is pre-written for the future - we don’t actually have anything published yet.

You can install wanim in two ways:

Package Manager

Via your favorite package manager:

npm

npm install wanim

yarn

yarn add wanim

You can then import the library in your JavaScript code:

import { WanimScene, wanim } from "wanim";

<script> Tag

You can also import wanim directly into the web page using a <script> tag. If you are using vanilla JavaScript without a build system, this approach is probably for you.

You can use the modern import syntax:

<script type="module">
    import { WanimScene, wanim } from "https://cdn.jsdelivr.net/npm/wanim@latest/+esm";
</script>

Or you can add Wanim as a global variable using the legacy include:

<script src="https://cdn.jsdelivr.net/npm/wanim@latest/dist/wanim.js"></script>
<script>
    const { wanim, WanimScene } = Wanim;
</script>

Create a circle

In your JavaScript code add the following segment, which creates a pink circle in a fullscreen scene.

class CreateCircle extends WanimScene {
    async run() {
        const circle = this.add(new Circle(0, 0, 2));
        circle.fill("pink");
        await this.play(Create(circle));
    }
}

wanim(CreateCircle);