Manim.js

KO | EN

gitlite — search

#hacktoberfest #llm #android #machine-learning #rust #docker #macos #java #awesome #kubernetes #pytorch #ios #mcp #open-source

(★ 448)

Replicating 3Blue1Brown's math animation engine in JavaScript (p5.js)

File Explorer

Download Latest Version (.zip)

- 0_dfs.js
- 1_bfs.js
- 2_prim.js
- 3_kruskal.js
- 4_dijkstra.js
- 5_topsort.js
- 6_floyd.js
- 7_maxflow.js
- 8_cut.js
- 9_scc.js
- end.js
- graph.html
- graph.js
- - arial.ttf
  - CascadiaMono-LICENSE.txt
  - CascadiaMono.ttf
  - comic.ttf
  - comicbd.ttf
  - comici.ttf
  - comicz.ttf
  - emoji.ttf
  - TektonPro-Bold.otf
  - TektonPro-BoldCond.otf
  - TektonPro-BoldExt.otf
  - TektonPro-BoldObl.otf
  - times.ttf
  - timesbd.ttf
  - timesbi.ttf
  - timesi.ttf
- - 3b1b_logo.jpg
  - youtube_logo.webp
- - katex-swap.css
  - katex-swap.min.css
  - katex.css
  - katex.js
  - katex.min.css
  - katex.min.js
  - katex.mjs
  - README.md
- - axes.mtl
  - axes.obj
  - r.mtl
  - r.obj
  - x_0.mtl
  - x_0.obj
  - x_1.mtl
  - x_1.obj
  - x_2.mtl
  - x_2.obj
  - y.mtl
  - y.obj
- - p5.dom.min.js
  - p5.js
  - p5.min.js
  - p5.sound.js
  - p5.sound.min.js
- - GitHubThumbnail.png
- - 1.png
  - 2.webp
  - 3.webp
  - 4.webp
- chapter_1.js
- chapter_2.js
- chapter_3.js
- chapter_4.js
- chapter_5.js
- chapter_6.js
- chapter_7.js
- part2_utils.js
- part3_utils.js
- part_1.html
- part_2.html
- part_3.html
- - dpo.html
  - dpo_0.js
  - dpo_1.js
  - dpo_2.js
  - dpo_3.js
  - dpo_4.js
  - dpo_5.js
  - elr.js
- - openai.svg
- llm_anim.js
- - EightQueens.js
  - index.html
  - queen.png
  - sketch.js
- - 181227.png
  - Fade.png
  - intro.html
  - intro.js
- - index.html
  - out0 (100).png
  - sketch.js
  - Sudoku4.csv
- 3d.js
- brain.js
- figures.js
- globals.js
- graphics.js
- math.js
- proto.js
- text.js
- timer.js
- utils.js
.gitignore
Manim.js
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# [Manim](https://github.com/3b1b/manim).js
![Screenshot](https://raw.githubusercontent.com/JazonJiao/Manim.js/master/lib/thumbnails/GitHubThumbnail.png)

Manim.js aims to emulate [3b1b](https://www.youtube.com/3blue1brown)-style math animations using JavaScript ([p5.js](https://github.com/processing/p5.js?files=1)).

Subscribe to my new YouTube channel, **Jazon Jiao**!: https://www.youtube.com/@JazonJiao

I am honored that in 2019, Grant Sanderson from 3b1b [recommended](https://x.com/3blue1brown/status/1110272030610345985) my videos, but my original channel no longer exists. Grant also approved the use of "Manim.js" as the name of this project.

Usage: All util classes are located in `/src`, with detailed documentation. Feel free to use my tools to make your own visualizations of math or CS concepts! As an example, here's how you could create an simple graph. Include this code and other necessary source files in an html file (see, for example, Graph Algorithms/graph.html), and then open the browser.

```JavaScript
let G = {
    V: [[100, 200],  // vertex 0 coordinates on canvas
        [260, 100],  // vertex 1
        [260, 300],  // vertex 2
        [420, 200],  // vertex 3
    ],
    E: [[0, 1], [0, 2], [1, 2], [1, 3], [2, 3]]  // edges
};

let p = new p5(GraphExample);   // creates the p5 object to render the animation
```

PS: I created Manim.js in 2018 because I could not get manim to work at the time.
I chose p5.js since I was greatly inspired by [the Coding Train](https://www.youtube.com/@TheCodingTrain) who made hundreds of wonderful videos with p5.js.

Manim.js

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Manim.js

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README