Hairline：建立一個圖形
你正在製作一個 Hairline 風格的圖形：一種等角線條繪圖，由單一筆畫的圓角實體構成，並且能回應指針。它會打包成一個 HTML 檔案，無需安裝任何東西。@lucasmarkes/hairline 的六個圖形是範例；examples/terrain.js 和 examples/riffle.js 是其中兩個，它們就是你將要撰寫的格式。
你只需要撰寫一個東西：圖形。引擎 (kernel.js) 和頁面 (bench.html) 是固定的。永遠不要編輯它們，也不要貼上修改過的副本，更不要重寫引擎已經提供的功能。
下面每個命名的檔案都在此技能的資料夾中。圖形和頁面會寫入使用者的工作目錄：從該目錄執行 build.mjs、validate.mjs 和 look.mjs，並透過它們在此資料夾中的路徑來呼叫。
0. 來源
僅當請求附帶一個 .svg 檔案時執行此步驟。執行 node read.mjs <file.svg>：它會將 SVG 作為圖片和一份測量結果卡片寫入工作目錄。然後閱讀 source.md 並回答其問題。物件及其部件現在已固定：步驟 1 中的每一個概念都將保留它們。
1. 概念
閱讀 concepts.md。它包含一個空白狀態的章節，以及一個從標記繪製圖形的章節。然後提供兩到三個概念，每個概念一行：
名稱。 物件。指針對它做什麼。讀數顯示什麼。導覽在哪裡停靠。
等待使用者選擇。僅當使用者已經帶著物件和手勢到達時，才跳過此步驟。如果沒有人可以詢問，則選擇最強靜止姿勢的概念，並說明你選擇了哪一個。
如果有來源（步驟 0），每個概念都保留物件及其部件：它們的區別在於手勢，或者，當手勢伴隨請求而來時，則在於形式和讀數。
一個圖形，一個想法。需要標籤才能被理解的概念，還不算一個概念。
2. 建構
- 閱讀
rules.md。這十條規則不是建議：違反其中一條的圖形就不算完成。 - 閱讀
kernel.js頂部的索引：哈希行下方的註解，直到var HL。它列出了你可以呼叫的所有內容。不要閱讀其下的程式碼。 - 閱讀更接近你概念的範例：
examples/terrain.js用於連續場域，examples/riffle.js用於離散項目。 - 在使用者的工作目錄中將圖形寫成
<name>.js，格式與範例相同：從HL中取得你需要的東西，定義mount({ stage, svg, read }, value)並回傳{ set, destroy }，並以hairline({ name, means, rules, range, tour, mount })結束檔案。name：小寫，一個單詞或以連字號連接。means：一句話，最多 140 個字元，說明圖形顯示的內容。它會出現在舞台下方的那一行。rules：此圖形最倚重的規則編號。range：滑桿驅動的唯一數字，在強度為 0、0.5 和 1 時。中間值是預設值，三個值朝同一個方向移動。mount的value參數，以及當滑桿移動時set(value)收到的value，就是這個數字：圖形自己的數值，在range上讀取，而不是 0 到 1。tour：當頁面播放時，看不見的指針會造訪的三到六個 viewBox 點，如果省略則為null；一個陌生人在沒有操作頁面時看到的循環。文字形式的[x, y]數字，至少有一個是點。圖形永遠不會自己播放：頁面的播放按鈕和套件負責播放。
- 組裝它：執行
node build.mjs <name>.js會寫入hairline-<name>.html，並且在步驟 3 中每次執行look.mjs也會如此。如果沒有 Node.js，請複製bench.html，並將kernel.js的內容放到/*KERNEL*/所在的位置，將你的圖形放到/*FIGURE*/所在的位置，透過檔案操作，不改變其他任何東西。
3. 檢查
- 執行
node look.mjs <name>.js --answer x,y,z --edge x,y,z，如果有來源檔案則加上--source <file.svg>，這些點是你的圖形的世界座標，如look.md所述。它會建置頁面、驗證它、在一張紙上拍攝八張圖片hairline-<name>-look.png，並檢查框架、讀數和控制台。修正它印出的每一行失敗訊息，然後再次執行，直到它以狀態碼 0 退出。 - 閱讀
look.md，然後閱讀那張圖片，並回答其問題。修正失敗的部分，然後回到步驟 1。
look.mjs 需要一個瀏覽器，並會在此資料夾外安裝一次 playwright-core。如果沒有瀏覽器，請在每次建置後使用 node validate.mjs hairline-<name>.html 進行檢查，並按照 look.md 中「沒有瀏覽器」章節的說明進行檢查。如果沒有 Node.js，請閱讀 validate.mjs 頂部的檢查清單，並根據你的程式碼回答每一項。
不要交付驗證器拒絕的頁面。如果你沒有實際查看，就不要說檢查通過了。
4. 交付
如果可以，請將 hairline-<name>.html 發布為成品。如果不行，請將檔案留在使用者可以開啟的地方，並說明它在哪裡。然後，逐行說明：
- 隱喻：物件是什麼，以及指針對它做什麼；
- 它倚重的規則；
- 導覽：它依序停靠的位置；
- 任何你無法驗證的事項（沒有 Node.js、沒有瀏覽器），如實說明。
然後請使用者在頁面上按下播放，或使用 ?play=1 開啟頁面，並說明這個循環是否講述了圖形的故事。如果沒有人可以詢問，則說明導覽未經評判。
5. 調整
當使用者要求修改時，只編輯 <name>.js，然後再次執行 look.mjs 並閱讀新的圖片。第十個版本與第一個版本遵循同樣的標準。對循環的更改僅是對 tour 的更改。
出錯時的處理
| 如果你發現自己正在這麼做 | 請改為這樣做 |
|---|---|
| 在繪圖中加入標籤、數字或字母 | 用幾何形狀來表達（規則 10）；名稱應放到 read.textContent |
| 使用顏色、填充或發光效果 | 將一個筆畫從 sil 移動到 hi（規則 04） |
撰寫計時器、requestAnimationFrame 或 CSS 動畫 | 使用 register(stage, tick)，搭配彈簧或補間動畫（規則 07 和 08） |
| 根據當前繪製的內容測試指針 | 根據靜止或目標姿勢來測試它（規則 01） |
| 繪製一個有十二條邊的盒子 | 使用兩個圓角環構成的 prism：一個是輪廓，一個是摺痕（規則 09） |
| 將一個部件繪製成普通的圓角方塊 | 賦予它使其成為自身特徵的元素，也就是你在概念中命名的那些元素（concepts.md） |
| 因為這樣比較容易，就讓靜止狀態變得平坦、空無一物或對稱 | 組合它：靜止狀態就是縮圖（規則 05） |
| 在盒子上蓋個標記來表示它是誰的 | 將標記建構成物件本身，或者省略它（concepts.md，「來自一個標記」） |
| 為了讓某個功能運作而編輯核心或框架 | 圖形是錯的；更改圖形 |
| 讓導覽依序造訪每個部件 | 三個停靠點，每個展示一個不同的答案，然後離開：一個循環是一個句子，而不是一個清單 |
| 引入第二個想法 | 刪除它：一個圖形，一個想法 |
| 從 SVG 追蹤路徑，或複製其座標 | 根據卡片提供的比例，將部件建構成一個實體（source.md） |
| 保留 SVG 中屬於裝飾的部分 | 丟棄它：兩到三個部件就能構成物件 |