展示HN：我将Manim移植到TypeScript（在浏览器中运行3b1b数学动画）

展示HN：我将Manim移植到TypeScript（在浏览器中运行3b1b数学动画）
Show HN: I ported Manim to TypeScript (run 3b1B math animations in the browser)

原始链接: https://github.com/maloyan/manim-web

Manim-web 是一个用于创建解释性动画的 JavaScript 库，灵感来自基于 Python 的 Manim。它允许用户在浏览器中直接构建和渲染数学可视化内容。该库提供各种预构建的几何形状（圆形、正方形、多边形）、文本和 LaTeX 支持、绘图工具以及 3D 对象。淡入淡出、变换和增长等动画效果易于实现。还支持拖动对象等交互元素。代码可以直接用 JavaScript/TypeScript 编写，也可以使用提供的工具从现有的 Python Manim 脚本转换。Manim-web 支持导出为 GIF 和视频格式，并与 React 和 Vue.js 框架兼容。该项目是开源的（MIT 许可证），可在 GitHub 上找到。

## Manim-Web：在浏览器中呈现3Blue1Brown动画开发者纳雷克·马洛扬创建了Manim-Web，这是流行的数学动画引擎Manim的TypeScript移植版本，消除了传统上复杂的设置过程。与需要Python、FFmpeg和LaTeX的原始Python Manim不同，Manim-Web完全在浏览器客户端运行，无需任何安装。它利用Canvas API/WebGL（使用Three.js进行3D渲染）和MathJax/KaTeX进行LaTeX渲染，实现实时60fps动画。API在很大程度上与原始Manim兼容，允许现有知识无缝迁移。 Manim-Web的Web原生特性使其具有交互性——动画可以嵌入到Web应用程序中，并具有可拖动/可点击的元素。一个Python到TypeScript的转换器可以帮助迁移现有项目。该项目是开源的（MIT许可），并且正在积极开发中，核心功能已经可用。您可以在提供的链接中找到在线演示和GitHub仓库。 [https://maloyan.github.io/manim-web/examples](https://maloyan.github.io/manim-web/examples) [https://github.com/maloyan/manim-web](https://github.com/maloyan/manim-web)

原文

import { Scene, Circle, Square, Create, Transform, FadeOut } from 'manim-web';

async function squareToCircle(scene: Scene) {
  const square = new Square({ sideLength: 3 });
  const circle = new Circle({ radius: 1.5 });

  await scene.play(new Create(square));
  await scene.play(new Transform(square, circle));
  await scene.play(new FadeOut(square));
}

Or use a plain <script> tag — see the examples for more.

Geometry — Circle, Rectangle, Polygon, Arrow, Arc, Star, Brace, and more
Text & LaTeX — Text, MathTex, Tex, Paragraph via KaTeX
Graphing — Axes, NumberPlane, FunctionGraph, ParametricFunction, VectorField, BarChart
3D — Sphere, Cube, Cylinder, Torus, Surface3D, ThreeDAxes with orbit controls
Animations — FadeIn/Out, Create, Transform, Write, GrowFromCenter, AnimationGroup, LaggedStart
Interaction — Draggable, Hoverable, Clickable mobjects
Export — GIF and video export
Graphs & Tables — Network graphs, Matrix, Table

import { ManimScene } from 'manim-web/react';

function App() {
  return <ManimScene construct={squareToCircle} width={800} height={450} />;
}

<script setup>
import { ManimScene } from 'manim-web/vue';
</script>

<template>
  <ManimScene :construct="squareToCircle" :width="800" :height="450" />
</template>

Have existing Manim scripts? Convert them:

node tools/py2ts.cjs input.py -o output.ts

git clone https://github.com/maloyan/manim-web.git
cd manim-web
npm install
npm run dev

MIT

展示HN：我将Manim移植到TypeScript（在浏览器中运行3b1b数学动画） Show HN: I ported Manim to TypeScript (run 3b1B math animations in the browser)

展示HN：我将Manim移植到TypeScript（在浏览器中运行3b1b数学动画）
Show HN: I ported Manim to TypeScript (run 3b1B math animations in the browser)