ai21.net
语言

Build a single self-contained HTML file: a 3D marble compu…

演示视频

Build a single self-contained HTML file: a 3D marble compu… — 1

提示词

Build a single self-contained HTML file: a 3D marble computer, in the spirit of Wintergatan's marble machine and the Digi-Comp II, that adds two 4-bit numbers using nothing but marbles falling through mechanical toggles.

Hard rules:

1. One HTML file. Three.js from https://t.co/KCQbEZLusb via an import map, plus its OrbitControls addon. No other libraries, no physics engine, no external assets.

2. The mechanism is the computer. Each bit of the result is stored in a two-state toggle (flip-flop) that a marble physically flips as it passes. Carries happen because a marble leaving one toggle rolls on to the next. Do not compute the answer in JavaScript arithmetic anywhere. The displayed result must be read from the toggle states after the last marble stops.

3. Marbles move along tracks with believable gravity and timing. Nothing teleports. You may script motion along paths, but every toggle flip must be caused by a marble arriving at it.

4. Input: two rows of four switches (A and B, 0 to 15), set by clicking. A lever labelled RUN releases the marbles. A counter shows how many marbles have fallen.

5. Output: a row of five result toggles, most significant bit on the left, and a readout that shows the binary and decimal value read from those toggles.

6. A DEMO button runs 5+6, then 9+7, then 15+15, resetting between runs, so it can be screen-recorded without touching anything.

7. Looks: a wooden board, brass toggles, glass marbles, warm studio lighting, soft shadows, a slow camera that follows the busiest part of the machine. It should look good in a square 1080x1080 recording.

8. Short click sounds via the Web Audio API when a toggle flips, started only after the first user click.

9. It must run at 60 fps on a normal laptop and have no console errors.

Output only the complete HTML file.

中文译文

构建一个单一的自包含 HTML 文件:一台 3D 弹珠计算机,承袭 Wintergatan 的弹珠机器与 Digi-Comp II 的精神,只靠弹珠落经机械拨杆来相加两个 4 位数字。

硬性规则:

1. 一个 HTML 文件。通过 import map 从 https://t.co/KCQbEZLusb 引入 Three.js,外加其 OrbitControls 插件。不得使用其他库、不得使用物理引擎、不得使用外部资源。

2. 机构本身就是计算机。结果的每一位都存储在一个双态拨杆(触发器)中,弹珠经过时会以物理方式将其拨动。进位之所以发生,是因为离开一个拨杆的弹珠会继续滚向下一个。任何地方都不得用 JavaScript 算术来计算答案。显示的结果必须在最后一颗弹珠停止后从拨杆状态中读取。

3. 弹珠沿轨道运动,具有可信的重力与节奏。任何东西都不得瞬移。你可以沿路径编写运动脚本,但每一次拨杆翻转都必须由一颗弹珠抵达它而引起。

4. 输入:两排各四个开关(A 和 B,0 到 15),通过点击设定。一个标有 RUN 的拉杆释放弹珠。一个计数器显示已落下多少颗弹珠。

5. 输出:一排五个结果拨杆,最高有效位在左侧,以及一个显示从这些拨杆读出的二进制和十进制值的读数。

6. 一个 DEMO 按钮依次运行 5+6、9+7、15+15,每次运行之间重置,这样无需触碰任何东西就能录屏。

7. 外观:一块木板、黄铜拨杆、玻璃弹珠、温暖的棚拍灯光、柔和的阴影,以及一台缓慢跟随机器最繁忙部分的相机。它在方形 1080x1080 录制中应当好看。

8. 当拨杆翻转时,通过 Web Audio API 发出短促的咔嗒声,仅在用户首次点击之后才开始。

9. 它必须在普通笔记本上以 60 fps 运行,并且没有控制台报错。

只输出完整的 HTML 文件。

溯源

原作者
GodsBoy7777
发布日期
2026-09-24(由推文 ID 反解)
原始出处
查看原帖 ↗
收录来源
yihui-dev/awesome-opus5-5-videos · godsboy7777-150194 · MIT