Objects

Any rendered vector element in the scene is a WObject. These objects serve as the building blocks for creating and manipulating visual elements in the scene. They can be transformed, styled, and animated to suit various needs.

WObjects share a common set of attributes, which can be get, set and (therefore) animated, namely x, y, scaleX, scaleY, rotate, opacity, fillColor, fillOpacity, strokeWidth and strokeColor.

There also exist sugar properties in the form of position and scale, which allow simultaneous assignment of similar attributes.

For further information on animating the above attributes, refer to the Animations section.

Groups

These objects hold other WObjects as their children, acting as containers for organizing scenes.

import { WGroup, WObject } from "wanim";

const stars: Star[] = [];
const group = new WGroup();
this.add(group);

for (let i = 0; i < 3; i++) {
    const star = new Star(-3 + i * 3, 0);
    star.fill("yellow");
    star.show();
    stars.push(star);
    group.add(star);
}

Paths

The majority of graphical elements in wanim are based on paths defined using a WPathObject to ensure high resolution and a way to define common effects. They can be initialized using SVG path definitions or from a set of points or cubic bezier nodes.

import { WPath, WPathObject } from "wanim";

const pathA = new WPathObject();
pathA.path = new WPath(
    // these quadruples represent the starting point, first and
    // second controls points and the end point of the curve.
    [[-1.2, 1.3], [-0.4, -1.8], [1.1, 0.6], [0.5, -1.0]]
    [[0.5, -1.0], [-0.3, -0.2], [1.9, -1.7], [1.8, 1.6]]
)

// or ...
const pathB = WPathObject.fromSVGPath("M -1.2 1.3 C -0.4 -1.8, 1.1 0.6, 0.5 -1.0 C -0.3 -0.2, 1.9 -1.7, 1.8 1.6")

Basic Shapes

There are several pre-defined shapes that you can use.

Shape	Parameters
Circle	Radius
Square	Half-side length
Line	Start, End
Regular N-gon	Sides, Radius
Star	Tips, Radius
Dot

Text

Regular Text

TODO.

LaTeX

Wanim supports LaTeX rendering using the WTex class. This allows you to display mathematical expressions using familiar syntax.

const tex = this.add(new WTex("f(z) = \\frac{1}{2 \\pi i} \\oint_C \\frac{f(\\zeta)}{\\zeta - z} \\, d\\zeta"));
await tex.rendered;
await this.play(Create(tex));