# 代码即画笔：生成视觉七引擎实测 ## 概述 本期为第二轮评测，聚焦"前端设计类"中一个长期被低估的细分赛道——**代码驱动视觉生成**（creative coding / generative visual）。它不属于"需求到页面"的工坊流，也不属于"截图到组件"的还原流，而是一群以"写代码当画笔"为内核的引擎：用 `p5.js`、Canvas、Three.js 生成静态画面，用 Remotion、Manim、Processing 生成可逐帧渲染的动效与视频，用动效卡片引擎生成可投放的知识短视频。我们实测了七款覆盖"画布—动效—视频—三维"四层的引擎，发现这条赛道的**变现天花板远高于静态配图**：程序化视频、数学动画、品牌生成艺术正在成为知识付费与广告创意的新供给。本文给出五维评分、变现路径、训练营拆解与选型排行榜。 ## 评测总表 | 引擎 | 视觉层 | 核心栈 | 完整度 | 上手 | 变现 | 训练营 | 社区 | 综合 | |------|--------|--------|:---:|:---:|:---:|:---:|:---:|:---:| | algorithmic-art | 画布生成 | p5.js + 种子随机 | ★★★★ | ★★★★ | ★★★ | ★★★★★ | ★★★★★ | ★★★★☆ | | canvas-design | Web 画布 | HTML5 Canvas | ★★★ | ★★★ | ★★★ | ★★★★ | ★★★ | ★★★☆ | | remotion-video-creator | 编程式视频 | React + FFmpeg | ★★★★★ | ★★★ | ★★★★★ | ★★★★ | ★★★★★ | ★★★★★ | | manim-video-creator | 数学动画 | Python Manim | ★★★★ | ★★ | ★★★★ | ★★★★★ | ★★★★★ | ★★★★☆ | | processing-video-creator | 创意编程 | Processing(Java) | ★★★ | ★★★ | ★★ | ★★★ | ★★★ | ★★★☆ | | knowledge-card-pro | 动效卡片 | HTML/CSS/JS | ★★★★ | ★★★★ | ★★★★ | ★★★★★ | ★★★ | ★★★★☆ | | threejs-animation | 三维生成 | WebGL / Three.js | ★★★★ | ★★ | ★★★★ | ★★★ | ★★★★ | ★★★★ | > 评分规则：五星制，上手难度越高（越易用）星越多；综合分按权重 功能25% / 上手20% / 变现25% / 训练营15% / 社区15% 折算。 ## 逐个深度评测 ### 1. algorithmic-art —— 种子随机下的生成艺术底座 - **来源**：Claude Code 官方示例技能（example-skills 同名镜像），本地已安装。 - **安装**：随 Claude Code 内置，调用 `/algorithmic-art` 即可。 - **核心功能**：以 `p5.js` 为画布，用**可复现的种子随机**（seeded randomness）驱动流场（flow field）、粒子系统（particle system）、噪声纹理等生成式构图，支持交互式参数探索——调一参数、重渲一帧。它强调"原创算法艺术"而非临摹他人作品，规避版权风险。 - **五维评分**：完整度★★★★｜上手★★★★｜变现★★★｜训练营★★★★★｜社区★★★★★。 - **变现 / 训练营**：是七引擎里最适合做"生成艺术入门训练营"的底座——p5.js 生态（OpenProcessing、p5js.ai 画廊）极度成熟，社区分享氛围浓厚。变现可走壁纸/品牌主视觉/NFT 风格化资产，但单件溢价有限，更适合作为引流课与创意编程兴趣课的核心教具。 - **竞品对比**：相比 `processing-video-creator` 更轻、更 Web 原生；相比 `threejs-animation` 更易上手但缺三维纵深。 ### 2. canvas-design —— Web 原生画布的精绘工具 - **来源**：官方示例技能（canvas-design / example-skills:canvas-design）。 - **安装**：内置示例技能，直接触发"画布 / canvas 设计"。 - **核心功能**：基于 HTML5 Canvas API 精绘几何图形、信息卡片、自定义可视化。不依赖第三方渲染库，输出是可直接嵌入网页的轻量画布组件。 - **五维评分**：完整度★★★｜上手★★★｜变现★★★｜训练营★★★★｜社区★★★。 - **变现 / 训练营**：胜在"无依赖、可内嵌"，适合做数据看板定制、运营活动 H5 的 bespoke 视觉块。训练营里它是讲解"像素、坐标系、渲染循环"基本概念的最佳入门，但因缺乏算法库支撑，深度不及 p5.js。 - **竞品对比**：与 `algorithmic-art` 是"裸 Canvas vs p5.js"的关系——后者帮你封装好渲染循环与数学工具，canvas-design 留给你全部控制权，也留下全部样板代码。 ### 3. remotion-video-creator —— 把 React 写成视频产线 - **来源**：本地技能 `remotion-video-creator`，对标开源项目 Remotion。 - **安装**：技能内置；底层依赖 `npm i remotion` 与 FFmpeg。 - **核心功能**：用 **React 组件描述视频的每一帧**，靠 ``、`useCurrentFrame()` 编排时间线，最终逐帧渲染为真实 MP4。可接 API 数据、可套 CSS/SVG/Canvas，本质是"把前端工程能力复用到视频"。 - **五维评分**：完整度★★★★★｜上手★★★｜变现★★★★★｜训练营★★★★｜社区★★★★★。 - **变现 / 训练营**：本期**变现潜力第一**。程序化视频在动态广告、个性化营销、数据可视化短片、批量口播视频模板上需求强劲，可封装成"视频模板 SaaS"或按条计费的服务。训练营需前置 React 基础，但一旦跑通，学员能产出可售卖的成品。 - **竞品对比**：相比 `manim-video-creator` 通用得多——Manim 强在数学，Remotion 强在"任意 Web 视觉都能视频化"；二者是互补关系而非替代。 ### 4. manim-video-creator —— 3Blue1Brown 同款数学引擎 - **来源**：本地技能 `manim-video-creator`，对标 3b1b/manim。 - **安装**：技能内置；底层 `pip install manim`，需 LaTeX 与渲染依赖。 - **核心功能**：用 Python 精确驱动几何变换、函数图像、矩阵演算的可视化动画，是"解释型数学视频"的专用引擎。 - **五维评分**：完整度★★★★｜上手★★｜变现★★★★｜训练营★★★★★｜社区★★★★★。 - **变现 / 训练营**：教育赛道**变现确定性强**——数学/物理/AI 原理科普课是付费刚需，Grant Sanderson 的成功已验证天花板。Manim Community 维护活跃、文档完善。痛点是曲线陡（Python + 数学 + 渲染依赖），训练营需安排 2–3 天环境与概念铺垫。 - **竞品对比**：在"精确数学动画"维度无对手；Remotion 适合叙事、Manim 适合推导，二者搭配可覆盖整套教育视频产线。 ### 5. processing-video-creator —— 经典创意编程的怀旧引擎 - **来源**：本地技能 `processing-video-creator`，对标 Processing.org（Java 生态）。 - **安装**：技能内置；运行依赖 Processing 运行时或 p5.js 转译。 - **核心功能**：以 Processing 的 `setup()/draw()` 范式做生成式草图与艺术短片，偏"展览装置 / 艺术家工具"气质。 - **五维评分**：完整度★★★｜上手★★★｜变现★★｜训练营★★★｜社区★★★。 - **变现 / 训练营**：七引擎里**变现与社区最弱**——Java 生态对现代前端不友好，年轻创作者更倾向 p5.js（即 `algorithmic-art`）。适合作为"创意编程史 / 媒体艺术"选修课的体验单元，不宜作主线。 - **竞品对比**：被 `algorithmic-art`（p5.js 即 Processing 的 JS 分支）全面替代，仅"保留 Java 性能与原生桌面导出"这点仍有价值。 ### 6. knowledge-card-pro —— 动效知识卡片的量产引擎 - **来源**：本地技能 `knowledge-card-pro`。 - **安装**：内置技能，触发"知识卡片视频 / 科普短视频"。 - **核心功能**：生成带**动画效果**的理工科知识卡片短视频（16:9 横屏），覆盖通信、网络、计算机、AI、数学物理等 STEM 科普。一条概念 = 一张动效卡片，开箱即得可投放成品。 - **五维评分**：完整度★★★★｜上手★★★★｜变现★★★★｜训练营★★★★★｜社区★★★。 - **变现 / 训练营**：**训练营适用性第一梯队**——门槛低、产出即成品、垂直度高，最适合"科普短视频矩阵"类训练营。变现走知识付费切片、平台流量分成、企业培训微课。 - **竞品对比**：与"卡片即成品"类静态配图引擎不同，它强在**动效**与**STEM 垂直模板**；与 `remotion-video-creator` 相比更轻、更模板化，但自由度低。 ### 7. threejs-animation —— WebGL 三维生成视觉 - **来源**：第三方市场技能 `cloudai-x/threejs-skills@threejs-animation`，安装量 7.7K。 - **安装**：`npx skills add cloudai-x/threejs-skills@threejs-animation`。 - **核心功能**：基于 Three.js / WebGL 做三维场景、粒子、着色器动画，输出可嵌入网页的交互式 3D 视觉。 - **五维评分**：完整度★★★★｜上手★★｜变现★★★★｜训练营★★★｜社区★★★★。 - **变现 / 训练营**：**三维是高溢价区**——品牌官网英雄区、数据三维可视化、元宇宙/数字孪生展示都能收费。痛点是 WebGL/着色器门槛高，训练营需前置图形学基础，适合进阶营而非入门营。 - **竞品对比**：在三维维度独占生态位（本地七引擎中唯一 3D），与 `algorithmic-art`（2D 生成）互补，共同覆盖"二维 + 三维"生成视觉全谱。 ## 生成视觉生态分类（思维导图） ```mermaid mindmap root((代码即画笔
生成视觉)) 画布层 2D p5.js 生成艺术 algorithmic-art HTML5 Canvas 精绘 canvas-design 动效层 动画 知识卡片动效 knowledge-card-pro 三维 WebGL threejs-animation 视频层 逐帧渲染 通用编程式视频 remotion-video-creator 数学专用动画 manim-video-creator 经典创意编程 processing-video-creator 变现出口 教育付费 品牌视觉资产 程序化广告 科普短视频矩阵 ``` ## 推荐排行榜 **按变现潜力** 1. remotion-video-creator —— 程序化视频，模板可复售、可批量化 2. manim-video-creator —— 教育/科普付费刚需 3. knowledge-card-pro —— 科普切片矩阵，出片快 4. threejs-animation —— 三维高溢价，品牌官网首选 5. algorithmic-art —— 引流与品牌主视觉资产 **按训练营适用性** 1. algorithmic-art —— 创意编程入门最佳底座 2. knowledge-card-pro —— 低门槛、产出即成品 3. manim-video-creator —— 数学/理工科普王牌（需前置铺垫） 4. remotion-video-creator —— 进阶营，前置 React 5. canvas-design —— 渲染基础概念教学 **按上手友好度** 1. knowledge-card-pro / algorithmic-art（并列） 2. canvas-design 3. remotion-video-creator 4. processing-video-creator 5. manim-video-creator / threejs-animation（并列，门槛最高） **给决策者的一句话**：要做**变现**首选 Remotion；要做**教育训练营**首选 p5.js + Manim 组合；要做**低成本出片矩阵**首选 knowledge-card-pro；三维留给有图形学储备的团队。 ## 参考来源 1. [p5.js 官方网站](https://p5js.org/) — 创意编程 JS 库，algorithmic-art 的底层渲染引擎与社区起点。 2. [Remotion | Make videos programmatically](https://www.remotion.dev/) — 用 React 编程式生成真实 MP4 视频的官方引擎。 3. [GitHub - 3b1b/manim](https://github.com/3b1b/manim) — 3Blue1Brown 出品的数学动画引擎，manim-video-creator 的对标项目。 4. [Manim Community](https://www.manim.community/) — 社区维护版 Manim 文档与生态，活跃度参考。 5. [skills.sh 技能市场](https://skills.sh/) — `threejs-animation`、`generative-art`、`nft-art-generation` 等生成视觉技能的安装量与分布来源。 > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。