跳到正文
网页珍奇柜Web Curio

ASCII 现场编码游乐场

play.core (ASCII Playground),Andreas Gysin (ertdfgcvb),2020 年

正在布展…

原作直展:这是 Andreas Gysin (ertdfgcvb) 的原始作品,按 Apache-2.0 许可证收录(版本 b2d30ac)。运行时和六个演示程序原样展出,未作任何修改;本柜的宿主页用 import map 让程序里的绝对路径指向这个目录,并加了切换程序的链接。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步程序导出 main(coord, context, cursor, buffer) 函数,运行时对每个格子调用一次。
  2. 第 2 步返回值可以是字符,也可以是带颜色、背景、字重的对象。
  3. 第 3 步渲染器可输出为 DOM 文本行或 canvas,只重绘发生变化的行。
  4. 第 4 步提供 sdf、vec2、噪声等小工具模块,让字符画像 GLSL 一样写。

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Build a runtime that measures one monospace glyph, computes cols and rows for the viewport, and every animation frame calls a user function once per cell with normalized coordinates, time and pointer position. Let the function return a character (or an object with char and color), store results in a flat buffer, and diff against the previous frame so only changed rows are written as innerText spans. Ship a tiny math kit (vec2, length, smoothstep, a signed-distance circle and box) so users can turn distance values into a density ramp like ' .:-=+*#%@'. Add a hot-reload text editor beside the output for live coding.

档案

能不能拿来用

原作以 Apache-2.0 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Live site loads (HTTP 200, title 'Play'); repo metadata via gh api: Apache-2.0, created 2020-08-26.