https://github.com/seiyacooper/mraph.js

✏️ Mraph.js is my poor rendering engine for graphing mathematical objects in a browser.
https://github.com/seiyacooper/mraph.js

canvas canvas2d graphics javascript mathematics phisics render webgl

Last synced: 5 months ago
JSON representation

✏️ Mraph.js is my poor rendering engine for graphing mathematical objects in a browser.

• Host: GitHub
• URL: https://github.com/seiyacooper/mraph.js
• Owner: SeiyaCooper
• License: apache-2.0
• Created: 2022-12-27T15:14:22.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-08-29T07:13:30.000Z (10 months ago)
• Last Synced: 2025-10-09T15:15:01.655Z (9 months ago)
• Topics: canvas, canvas2d, graphics, javascript, mathematics, phisics, render, webgl
• Language: JavaScript
• Homepage: https://seiyacooper.github.io/Mraph.js/
• Size: 1.27 MB
• Stars: 44
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


    



[![npm](https://img.shields.io/npm/v/mraph)](https://www.npmjs.com/package/mraph)

[![GitHub](https://img.shields.io/github/license/SeiyaCooper/Mraph.js)](https://github.com/SeiyaCooper/Mraph.js/blob/main/LICENSE)

[![last commit](https://img.shields.io/github/last-commit/SeiyaCooper/Mraph.js)](https://github.com/SeiyaCooper/Mraph.js/commits/main)

Mraph.js is my poor animation engine for drawing geometric shapes in a browser, inspired by [manim](https://github.com/3b1b/manim)   

[Github](https://github.com/SeiyaCooper/Mraph.js) |

[NPM](https://www.npmjs.com/package/mraph) |

[Examples](https://seiyacooper.github.io/Mraph.js/gallery)

# Usage

### Install with npm:

```shell

npm install --save mraph

```

### or use yarn:

```shell

yarn add mraph

```

### A short example:

Once you installed, try this example below.

```js

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.

[See more (not such dances)](/Mraph.js/gallery)

# Contribution

Feel free to contribute to this repo