Automata Engine

一个用于演示一个高性能的 JavaScript 元胞自动机渲染引擎。

这个项目既可以把 engine.js 作为单独的引擎文件，直接嵌入你现有的 Web 项目中使用；也可以保留当前这套页面、样式和控制逻辑，作为一个完整可运行的独立应用直接打包部署。

功能

• 展示预置图案的周期演化
• 支持 ASCII 文本图案导入，加载任意自定义图案
• 支持时间回溯
• 支持脉冲生成
• 支持展示文字扩散到规则演化的独立 showcase 序列
• 支持多种渲染配色
• 支持单独引擎嵌入已有项目，或整体作为完整应用交付

目录

• index.html：独立演示页面
• engine.js：站点无关的核心引擎
• demo.js：演示页控制逻辑
• styles.css：演示页样式

集成方式

• 单文件嵌入：将 engine.js 引入现有页面或前端项目，自行接入你的画布、按钮和业务逻辑。
• 整体打包：保留 index.html、styles.css、demo.js 与 engine.js，即可作为一个完整的演示或产品页面直接部署。
• 渐进接入：可以先用现成页面快速验证效果，再按需把引擎抽离到现有系统中复用。

运行

直接用浏览器打开 index.html 即可。

如果你更喜欢本地静态服务器，也可以在项目根目录执行：

python3 -m http.server

然后访问：

http://localhost:8000/automata-engine/

页面参数说明

• Playback：播放、暂停、单步推进，以及按历史快照回退 1 步或 30 步。
• Preset：从经典结构库中选择预置图案。
• Load Preset：将选中的预置图案装载到画布中央并开始演化。
• Showcase Word：重新播放默认文字的扩散与规则演化序列。
• Load ASCII：读取文本框中的 ASCII 图案并居中装载。
• Random Soup：随机生成一份初始细胞分布。
• Click to Toggle Cells：点击画布时直接翻转对应位置细胞的生死状态。
• Click to Inject Pulse：点击画布时在该位置生成一个环形脉冲。
• Pulse Center：在画布中心生成环形脉冲，适合测试碰撞和波前传播。
• Clear：清空网格、历史和统计状态。
• FPS：控制演化推进速度。
• Trail States：控制细胞从死亡到完全消失前的拖尾层数。
• Cell Size：控制单个细胞像素尺寸，数值越大单元越粗、可见网格越稀。
• Palette：切换渲染配色，当前支持 Neon Blue、Monochrome、Amber。
• Stats / Generation：当前演化世代数。
• Stats / Active Cells：当前存活细胞数量。
• Stats / History：当前可回溯的历史快照数量。
• Stats / Phase：当前所处阶段，如 manual、hold_text、stroke_expand、evolve、reverse。

自定义图案

在 ASCII 输入框中使用以下字符表示存活细胞：

• #
• O
• 1
• X
• @

例如：

..#........
....#......
.###.......

交互

• 点击画布：切换细胞状态
• 切换到 Click to Inject Pulse 后点击画布：注入脉冲
• Rewind：按历史快照回退
• Showcase Word：重新播放文字扩散与演化序列
• Space：播放 / 暂停
• →：单步前进
• ←：回退一步