Mraph.js is my poor animation engine for drawing geometric shapes in a browser, inspired by manim
Github |
NPM |
Examples
npm install --save mraph
yarn add mraph
Once you installed, try this example below.
import * as MRAPH from "mraph"; // Creates a new layer const layer = new MRAPH.Layer().appendTo(document.body); // Creates some points and sets their position const pointsNum = 50; const layersNum = 5; const angleUnit = (Math.PI * 2) / pointsNum; for (let j = 0; j < layersNum; j++) { for (let i = 1; i <= pointsNum; i++) { const point = new MRAPH.Point(Math.cos(angleUnit * i) * (3 + j * 2), Math.sin(angleUnit * i) * (3 + j * 2)); point.setColor(new MRAPH.Color(Math.random(), Math.random(), Math.random())); layer.add(point); } } // Sets an infinite event // This event will remain perpetually active layer.timeline.addInfinite(() => { layer.scene.children.forEach((point, i, arr) => { point.a = point.center.mult((-1 * i) / arr.length); }); }); // Starts playing animation layer.enableOrbitControl().enableRotate = false; layer.play();
Input this code in your preferred text editor. If all proceeds as it should, you will observe a series of dots engaged in a, hmm..., rather peculiar dance.
Feel free to contribute to this repo