龚敬洋 3a962583e3 | 3 년 전 | ||
---|---|---|---|
deploy | 删除 | 3 년 전 | |
frontend | 删除 | 3 년 전 | |
.DS_Store | 3 년 전 | ||
README.md | 3 년 전 |
Manim(Mathematical Animation Engine)是由知名Youtube频道3Blue1Brown的运营者Grant Sanderson开发的一个数学动画制作引擎。它可以让用户通过编程的方式精准的生成解释性的数学动 画,以帮助观众更加直观的理解晦涩难懂的数学概念。
随着Manim功能的扩展,现如今许多科普视频作者都会使用Manim工具制作动画来帮助更直观的解释专 业的知识。然而,使用Manim工具需要通过Python语言编写脚本来控制动画中的一切元素与逻辑,这 就使得该工具具有一定的使用⻔槛。此外,Manim渲染和生成动画需要占用一定的系统资源,当画面中元素较为复杂时,就会对用户的硬件系统造成不小的压力。本项目旨在通过网⻚UI交互的形式,让用户能够直观的创建动画中所需的元素,并通过云端渲染快速得到最终的科普动画。
UCloud镜像:
名称 | ManimOnline |
---|---|
ID | uimage-d5ups52d |
用户名 | ubuntu |
密码 | abcd123456 |
若要使用镜像部署本项目,请将镜像恢复到一台云主机上,随后输入如下命令启动服务:(服务器镜像中装有screen工具,可创建一个独立的screen使得服务可以在后台持续运行)
> sudo su
> cd /home/ubuntu/manim_backend/
> export FLASK_APP=app.py
> export FLASK_ENV=development
> flask run --host 0.0.0.0 --port 80
若要在云主机上部署本项目,请使用Ubuntu或其他带有apt-get工具的系统。
由于本项目使用了Manim作为动画生成工具,因此请先安装必要的系统依赖库:
> apt install sox ffmpeg libcairo2 libcairo2-dev texlive-full
请确保系统中装有python环境及pip工具,并通过pip工具安装Flask环境及Manim库:
> pip3 install Flask
> pip3 install Flask-Cors
> pip3 install manimlib
请使用如下命令启动服务:
> export FLASK_RUN=app.py
> export FLASK_ENV=development
> flask run --host 0.0.0.0 --port 80
若要使用交互式方法生成动画,您可以通过界面上半部分的组件来创建动画逻辑。为了演示起见,我们在网页中预设了一组动画生成逻辑,您只需要在对应位置输入画布名称并选择画质即可直接提交生成。随后您需要稍等片刻,网站会自动跳转到视频播放界面(后台可以看到视频生成进度)。
若要直接使用Python代码生成动画,您可以直接在界面下半部分的代码框中输入Python代码,输入画布名称并选择画质即可提交生成(请注意,画布名称需与场景类名一致!)。随后稍等片刻,网站同样会自动跳转到对应的视频播放界面。
您可以使用如下的Python代码进行较为复杂的动画生成测试:(该场景元素较为复杂,在常规云主机上可能需要花费1~2分钟左右进行视频生成,此时前端无任何反应属正常现象,请耐心等待,同时也可以通过后台追踪生成进度)
from manimlib.imports import *
# Test即为画布名
class Test(Scene):
def construct(self):
title = TextMobject("Hello World!") # 文字
basel = TexMobject( # 公式
"\\sigma (x) = \\frac{1}{1+e^{-x}}"
)
VGroup(title, basel).arrange(DOWN) # 集合到一起后排列位置
self.play(
Write(title), # "写"出title文字
FadeInFrom(basel, UP), # 将basel公式从上方淡入
)
self.wait() # 停顿一秒
transform_title = TextMobject("That was a transform")
transform_title.to_corner(UP + LEFT) # 放到最左上角
self.play(
Transform(title, transform_title), # 将title变换为transform_title
LaggedStart(*map(FadeOutAndShiftDown, basel)), # 将basel公式中的每个字符依次从下方淡出
)
self.wait() # 停顿一秒
grid = NumberPlane() # 构建一个坐标平面
grid_title = TextMobject("This is a grid")
grid_title.scale(1.5)
grid_title.move_to(transform_title)
self.add(grid, grid_title) # 确保grid_title在grid上方
self.play(
FadeOut(title), # 淡出title
FadeInFromDown(grid_title), # 从下方淡入grid_title
ShowCreation(grid, run_time=3, lag_ratio=0.1), # 创建grid的动画,时长为3,延迟为10%
)
self.wait()
grid_transform_title = TextMobject(
"That was a non-linear function \\\\"
"applied to the grid"
)
grid_transform_title.move_to(grid_title, UL)
grid.prepare_for_nonlinear_transform() # 让grid准备进行非线性变换
self.play(
grid.apply_function, # 对grid施加一个函数,实现非线性变换
lambda p: p + np.array([ # 输入值为一个点,返回值也为一个点
np.sin(p[1]),
np.sin(p[0]),
0,
]),
run_time=3,
)
self.wait()
self.play(
Transform(grid_title, grid_transform_title)
)
self.wait()
本项目使用Flask作为后端框架,因此仅需使用带有Flask的python3环境打开deploy目录即可构建后端开发环境。其他系统及库依赖与部署环境一致。
本项目使用了Vue Cli作为前端生成框架,frontend文件夹中包含了所有前端构建的源码。若要搭建前端开发环境,请先在系统中安装Vue-Cli 3脚手架及相应的Node JS工具。随后在系统中使用如下命令安装必要的依赖库:
> npm install axios --save-dev
> npm install element-ui -S
如若该vue文件还未部署到服务器上,需把src/components中所有涉及到的地址与axios请求中的url前加上后端地址,这样就可以与后端产生交互。
请使用如下命令生成dist文件夹,并将其中对应的文件放入后端对应的templates及static目录内,即可将构建完成的前端网页部署到网站中:
> npm run build
本项目尚处于开发初级阶段,网站中可能存在些许BUG(尤其是前端交互界面),还请多多谅解!
如有任何问题或建议,请联系我们:
Github:GONGGONGJOHN
WeChat: gonggongjohn