粒子可视化使用场景
- 创意编程研究研究粒子构图、worker 传输和本地画布绘制。
- 技术图形原型将技术行为组织成聚焦的视觉构图。
- Canvas 2D 探索探索密集点阵场，而不额外加入界面控件。
Worker 与 Canvas 亮点
- 12,000 个粒子可见的数量标示明确了粒子场的规模。
- postMessage 传输传输标签指出了本地通信方式。
- 渲染 FPS运行时读数将视觉输出与实现细节区分开来。
- 以脱离主线程计算为主题标题为图形确立了明确的技术前提。
粒子场构图
1 / 1带有运行时语境的粒子场
这个官方 OpenDesign 示例将 Canvas 2D 粒子场可视化器呈现为一幅单一、高对比度的图形。构图把大号白色标题“Compute off the main thread.”置于左上方，同时让宽阔的绿色粒子形态占据中央和右侧。Web Worker 负责初始化点位，主线程负责绘制；源代码没有用户操作控件。
粒子场并不是普通的云状效果。各个点聚集成圆润的环状形态，中央附近留有深色开口。这片留白在非常密集的表面内部形成了清晰的视觉焦点，因此观者可以观察结构，而不只是看到均匀噪点。霓虹绿色的点与近黑色背景相配，也让整幅构图保持良好对比度。
技术视觉的使用场景
当技术演示需要呈现为完成度较高的视觉作品，而不是调试面板时，这种设计很有用。克制的信息层适用于演示文稿、落地页过渡区或创意编程研究；在这些场景中，粒子场是主要主体，而实现相关术语保持可见但足够紧凑。
底部一行包含三种不同类型的信息：“12,000”表示粒子数量，“postMessage”表示传输方式，而在截取的运行时状态中，“121”显示在“RENDER FPS”上方。将这些数值相邻但分开呈现，可以让读者区分场景规模、通信模式和本地渲染观测值。代价是，这些标签解释了概念，却没有说明数值是如何计算的。
场景规模
12,000 PARTICLES 标签使密度成为视觉研究中明确的一部分。
传输语境
postMessage TRANSPORT 标签将绘制出的粒子场与浏览器通信联系起来。
运行时观测
RENDER FPS 数值提供了本地语境，但不作为比较基准。
构图与阅读顺序
左上方的标题尺寸很大，并换成两行显示，使“Compute off the”和“main thread.”成为最先稳定建立的阅读锚点。上方小号、字距拉开的“WORKER VISUALIZER”标签标识了主题。这种排版尺度形成了有力的编辑式入口，但也意味着标题会在粒子场旁占据大量横向和纵向空间。
源代码使用均匀分布的角度和 0.15 到 1.0 的随机半径来初始化 12,000 个点。这个内半径解释了可见的深色中心，而径向分布则使许多点集中在其附近。Canvas 2D 在半透明深色重绘层上绘制小型绿色方块。固定的底部标签位于任何面板之外，从而保留了海报式构图，同时不暗示使用 WebGL 渲染器或 GPU 基准测试。
可观测的关系
三个统计项采用一致的模式：较大的数值或词语位于较小的全大写标签上方。“12,000”和“121”是数值观测结果，而“postMessage”是文本形式的传输值。统一的处理方式让它们便于作为一组浏览，但不同的值类型仍需要依靠标签来解释含义。
两条传输路径，不同的运动行为
源代码支持两条 worker 传输路径。在所提供的非隔离环境预览中，postMessage 会传递初始位置，但从未启动 step 函数，因此反复进行 Canvas 绘制并不能证明粒子模拟在持续运行。截取到的 121 RENDER FPS 数值估算的是本地重绘节奏，而不是粒子更新频率或比较性能。这里没有确立任何已连接的服务、存储数据、生产部署或经过科学验证的粒子动力学。
| 传输路径 | Worker 行为 | 可见粒子场的含义 |
|---|---|---|
| SharedArrayBuffer | 需要跨源隔离；初始化共享位置，并启动周期性执行的 step 函数。 | 主线程读取共享位置，同时 worker 代码持续演进点阵场。 |
| postMessage 回退路径 | 初始化并发送一个位置缓冲区，但不会调用 step。 | 主线程反复重绘这些初始位置；变化中的渲染 FPS 标签并不能证明粒子正在移动。 |
如何在 OpenDesign 中创建粒子场可视化设计
建立视觉语法
从近黑色画布、霓虹绿色粒子场、小号字距拉开的主题标签和两行白色标题开始。将标题保持在左上方，并为右侧的粒子形态预留空间。
建议提示词创建一个粒子场可视化设计：使用近黑色画布、大号两行标题“Compute off the main thread.”、带有深色中央开口的密集绿色粒子场，以及底部统计行，显示 12,000 PARTICLES、postMessage TRANSPORT 和一项本地 RENDER FPS 观测值。仅展示视觉行为；不要暗示已连接的服务、持续运行的回退模拟或基准测试性能。
优化粒子结构
将点组织成宽阔、圆润的场，并保留清晰可见的中央空洞，而不是均匀铺满。检查粒子场在标题旁是否仍然清晰易读，并确保点的密度不会填掉中央留白。
检查运行时层
在底部统计信息中，将数量、传输方式和渲染观测值明确区分开来。匹配源代码中的 Canvas 2D 绘制和本地 worker 初始化逻辑。如果需要连续运动，应在选定的传输路径中实现并测试周期性更新，而不是把较高的重绘 FPS 数值当作模拟运行的证明。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
