hairline-create

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Hairline: create a figure

Hairline：创建图形

You are making one figure in the Hairline style: an isometric line drawing, built from rounded solids in a single stroke, that answers the pointer. It ships as one HTML file with nothing to install. The six figures of

@lucasmarkes/hairline

are the bar;

examples/terrain.js

and

examples/riffle.js

are two of them, in the format you will write.

You write one thing: the figure. The engine (

kernel.js

) and the page (

bench.html

) are fixed. Never edit them, never paste a changed copy of them, and never write again what the kernel already gives you.

Every file named below is in this skill's folder. The figure and the page are written in the person's working directory: run

build.mjs

validate.mjs

and

look.mjs

from there, by their path in this folder.

你正在用 Hairline 风格创作一幅图形：一幅由圆润实体和单线笔触构成的等距线画，能够响应指针操作。它以单个 HTML 文件交付，无需安装任何内容。

@lucasmarkes/hairline

中的六幅图形是评判基准；

examples/terrain.js

和

examples/riffle.js

是其中两幅，采用你将要编写的格式。

你只编写一样东西：图形本身。引擎（

kernel.js

）和页面（

bench.html

）是固定的。绝不修改它们，绝不粘贴修改过的副本，也绝不重复编写 kernel 已经提供的内容。

以下提到的每个文件都位于此 skill 的文件夹中。图形和页面写入用户的工作目录：在此目录中运行

build.mjs

、

validate.mjs

和

look.mjs

，脚本路径指向此文件夹。

1. Concept

1. 概念

Read

concepts.md

. Then offer two or three concepts, one line each:

Name. The object. What the pointer does to it. What the read-out says.

Wait for the person to pick. Skip this step only when they arrived with the object and the gesture already chosen. If there is nobody to ask, take the concept with the strongest rest pose and say which you took.

One figure, one idea. A concept that needs a label to be understood is not a concept yet.

读取

concepts.md

。然后给出两到三个概念，每个概念占一行：

名称。 物体是什么。指针会对它做什么。读数会显示什么。

等待用户选择。只有当用户到来时已经选好了物体和交互动作，才可跳过此步骤。如果没有人可询问，则选择静止姿态表现力最强的概念，并说明你采用了哪一个。

一幅图，一个想法。一个还需要标签才能理解的概念，尚未真正成形。

2. Build

2. 构建

Read
```
rules.md
```
. The ten rules are not advice: a figure that breaks one is not finished.
Read the index at the top of
```
kernel.js
```
: the comment under the hash line, down to
```
var HL
```
. It lists everything you may call. Do not read the code under it.
Read the example nearer your concept:
```
examples/terrain.js
```
for a continuous field,
```
examples/riffle.js
```
for discrete items.
Write the figure as
```
<name>.js
```
in the person's working directory, in the shape of the examples: take what you need from
```
HL
```
, define
```
mount({ stage, svg, read }, value)
```
returning
```
{ set, destroy }
```
, and end the file with
```
hairline({ name, means, rules, range, mount })
```
.
- ```
name
```
  : lowercase, one word or hyphenated.
- ```
means
```
  : one sentence, 140 characters at most, saying what the figure shows. It is the line under the stage.
- ```
rules
```
  : the numbers of the rules this figure leans on most.
- ```
range
```
  : the one number the slider drives, at intensity 0, 0.5 and 1. The middle one is the default, and the three move one way.
```
mount
```
  's
```
value
```
  , and the
```
value
```
  that
```
set(value)
```
  gets when the slider moves, is this number: the figure's own, read on
```
range
```
  , not 0 to 1.
Assemble it:
```
node build.mjs <name>.js
```
writes
```
hairline-<name>.html
```
, and so does each run of
```
look.mjs
```
in step 3. Without Node, copy
```
bench.html
```
and put the contents of
```
kernel.js
```
where
```
/*KERNEL*/
```
is and your figure where
```
/*FIGURE*/
```
is, by file operation, changing nothing else.

读取
```
rules.md
```
。这十条规则不是建议：任何违反其中一条的图形都尚未完成。
读取
```
kernel.js
```
顶部的索引：hash line 下方直到
```
var HL
```
的注释。它列出了你可以调用的全部内容。不要阅读其下方的代码。
读取与概念更接近的示例：连续场使用
```
examples/terrain.js
```
，离散对象使用
```
examples/riffle.js
```
。
在用户的工作目录中按示例的形式将图形编写为
```
<name>.js
```
：从
```
HL
```
中取用所需内容，定义
```
mount({ stage, svg, read }, value)
```
并返回
```
{ set, destroy }
```
，最后以
```
hairline({ name, means, rules, range, mount })
```
结束文件。
- ```
name
```
  ：小写单词，或以连字符连接的形式。
- ```
means
```
  ：一句话，最多 140 个字符，说明图形展示的内容。它显示在 stage 下方。
- ```
rules
```
  ：该图形最依赖的规则编号。
- ```
range
```
  ：滑块所驱动的唯一数值，在强度为 0、0.5 和 1 时各对应一个值。中间值是默认值，这三个值沿同一方向变化。
```
mount
```
  的
```
value
```
  ，以及滑块移动时传给
```
set(value)
```
  的
```
value
```
  ，都是这个数值：图形自身定义的数值，通过
```
range
```
  读取，而不是 0 到 1。
进行组装：
```
node build.mjs <name>.js
```
会生成
```
hairline-<name>.html
```
，第 3 步中每次运行
```
look.mjs
```
也会生成该文件。如果没有 Node，则复制
```
bench.html
```
，通过文件操作将
```
kernel.js
```
的内容放到
```
/*KERNEL*/
```
处，将图形放到
```
/*FIGURE*/
```
处，除此之外不做任何改动。

3. Check

3. 检查

```
node look.mjs <name>.js --answer x,y,z --edge x,y,z
```
, the points being world points of your figure, as
```
look.md
```
says. It builds the page, validates it, takes the eight pictures on one sheet,
```
hairline-<name>-look.png
```
, and checks the frame, the read-out and the console. Fix every line it prints as failed, and run it again until it exits 0.
Read
```
look.md
```
, then the sheet, and answer its twelve questions. Fix what fails, then go back to 1.

look.mjs

needs a browser and installs

playwright-core

once, outside this folder. Without one, check with

node validate.mjs hairline-<name>.html

after each build and do the look as

look.md

says under "Without a browser". Without Node, read the list of checks at the top of

validate.mjs

and answer each one from your code.

Do not hand over a page the validator rejects. Do not say the look is done if you did not look.

```
node look.mjs <name>.js --answer x,y,z --edge x,y,z
```
，其中各点按照
```
look.md
```
的说明，使用图形的世界坐标点。它会构建页面、执行验证、将八张图片拼成一张检查图
```
hairline-<name>-look.png
```
，并检查画面、读数和控制台。修复其输出中每一条标记为 failed 的内容，然后重新运行，直到退出码为 0。
阅读
```
look.md
```
，然后查看检查图，并回答其中十二个问题。修复未通过的项目，然后回到第 1 步。

look.mjs

需要浏览器，并会在此文件夹之外安装一次

playwright-core

。如果没有浏览器，则每次构建后运行

node validate.mjs hairline-<name>.html

进行检查，并按照

look.md

中“Without a browser”部分的要求完成 look 检查。如果没有 Node，则读取

validate.mjs

顶部的检查项列表，并根据代码逐项作答。

不要交付被验证器拒绝的页面。如果实际没有执行 look 检查，就不要声称 look 已完成。

4. Hand over

4. 交付

Publish

hairline-<name>.html

as an artifact if you can. If you cannot, leave the file where the person can open it and say where it is. Then say, one line each:

the metaphor: what the object is, and what the pointer does to it;
the rules it leans on;
anything you could not verify (no Node, no browser), plainly.

如果可以，将

hairline-<name>.html

作为 artifact 发布；如果不行，把文件留在用户可以打开的位置，并说明文件所在位置。然后每项各用一行说明：

隐喻：物体是什么，以及指针会对它做什么；
它所依赖的规则；
任何无法验证的内容（无 Node、无浏览器），如实说明。

5. Adjust

5. 调整

When the person asks for a change, edit only

<name>.js

, then run

look.mjs

again and read the new sheet. The tenth version is held to the same bar as the first.

当用户要求修改时，只编辑

<name>.js

，然后再次运行

look.mjs

并查看新的检查图。第十版也必须达到与第一版相同的标准。

What goes wrong

常见错误

If you catch yourself	Do this instead
adding a label, a number or a letter to the drawing	say it with geometry (rule 10); names go to `read.textContent`
reaching for a colour, a fill or a glow	move one stroke from `sil` to `hi` (rule 04)
writing a timer, a `requestAnimationFrame` or a CSS animation	`register(stage, tick)` , with springs or tweens (rules 07 and 08)
testing the pointer against what is drawn right now	test it against the rest or target pose (rule 01)
drawing a box with twelve edges	`prism` of two rounded rings: a silhouette and one crease (rule 09)
drawing a part as a plain rounded block	give it the features that make it what it is, the ones you named in the concept ( `concepts.md` )
leaving rest flat, empty, or symmetric because that was easy	compose it: rest is the thumbnail (rule 05)
editing the kernel or the bench to make something work	the figure is wrong; change the figure
letting in a second idea	cut it: one figure, one idea

如果你发现自己	应当改为
在图中添加标签、数字或字母	用几何表达（规则 10）；名称写入 `read.textContent`
使用颜色、填充或 glow	将一条描边从 `sil` 移到 `hi` （规则 04）
编写 timer、 `requestAnimationFrame` 或 CSS animation	使用 `register(stage, tick)` ，并配合 springs 或 tweens（规则 07 和 08）
根据当前绘制出的内容测试指针	根据静止姿态或目标姿态进行测试（规则 01）
用十二条边绘制 box	使用由两个 rounded rings 构成的 `prism` ：一个 silhouette 和一条 crease（规则 09）
将部件画成普通的 rounded block	赋予它使其成为所命名概念的特征，即你在概念中点明的那些特征（ `concepts.md` ）
因为容易处理，就让静止状态显得平坦、空洞或对称	重新构图：静止状态就是缩略图（规则 05）
修改 `kernel` 或 `bench` 来让功能正常工作	图形有问题；应修改图形
引入第二个想法	删掉它：一幅图，一个想法