hairline-create

Hairline：図形を作成する

Hairlineスタイルの図形を1つ作成します。等角投影の線画で、丸みのある立体を1本の線で描き、ポインターに応じて動きます。インストール不要のHTMLファイル1つとして出力されます。@lucasmarkes/hairlineにある6つの図形が基準です。examples/terrain.jsとexamples/riffle.jsはそのうちの2つで、作成する図形もこの形式にします。

作成するのは図形だけです。エンジン（kernel.js）とページ（bench.html）は変更しません。編集したり、変更版を貼り付けたり、カーネルにすでにある内容を再度記述したりしないでください。

以下に記載するファイルはすべて、このスキルのフォルダー内にあります。図形とページは作業ディレクトリに作成します。このフォルダー内のパスを指定して、build.mjs、validate.mjs、look.mjsを実行してください。

0. ソース

リクエストに.svgファイルが含まれている場合に限り実行します。node read.mjs <file.svg>を実行すると、SVGを画像にしたものと、計測内容をまとめたカードが作業ディレクトリに出力されます。その後、source.mdを読み、質問に回答します。これでオブジェクトとそのパーツが確定します。ステップ1では、すべてのコンセプトでそれらを維持します。

1. コンセプト

concepts.mdを読みます。空の状態向けのセクションと、マークから図形を描く場合のセクションがあります。次に、コンセプトを2つか3つ、1行ずつ提示します。

名前。 オブジェクト。ポインターがオブジェクトにどう作用するか。読み取り表示の内容。ツアーが止まる場所。

相手が選ぶまで待ちます。オブジェクトとジェスチャーがすでに決まった状態で依頼された場合に限り、このステップを省略します。尋ねる相手がいない場合は、静止したときの姿が最も優れたコンセプトを選び、どれを選んだか伝えます。

ソースがある場合（ステップ0）、すべてのコンセプトでオブジェクトとそのパーツを維持します。違いを出すのはジェスチャーです。ジェスチャーが依頼時に指定されている場合は、形状と読み取り表示で違いを出します。

図形1つにつき、アイデアも1つです。ラベルがないと理解できないコンセプトは、まだコンセプトとは言えません。

2. 作成

1. rules.mdを読みます。10個のルールは助言ではありません。1つでも破る図形は未完成です。
2. kernel.jsの冒頭にあるインデックスを読みます。ハッシュ行の下のコメントからvar HLまでです。ここには呼び出せるものがすべて記載されています。それより下のコードは読まないでください。
3. コンセプトに近い方の例を読みます。連続したフィールドならexamples/terrain.js、個別の項目ならexamples/riffle.jsです。
4. 作業ディレクトリに<name>.jsとして図形を記述します。例と同じ構成にし、必要なものをHLから使います。mount({ stage, svg, read }, value)を定義して{ set, destroy }を返し、ファイルの最後にhairline({ name, means, rules, range, tour, mount })を記述します。
   • name：小文字で、1語またはハイフンでつないだ名前です。
   • means：図形が何を示すかを説明する、140文字以内の1文です。ステージの下に表示されます。
   • rules：この図形で特に重視するルールの番号です。
   • range：強度0、0.5、1でスライダーが動かす値を1つ指定します。中央の値がデフォルトで、3つの値は一方向に動きます。mountのvalueと、スライダー操作時にset(value)が受け取るvalueはこの数値です。つまり、0から1ではなく、図形固有の値をrangeに基づいて読み取ります。
   • tour：ページの再生時に、表示されていないポインターが訪れるviewBox上の座標を3〜6個指定します。再生を行わない場合はnullにします。手がページに触れていない状態で、初めて見る人に示される一周分の動きです。リテラルの[x, y]の数値を指定し、そのうち少なくとも1つは点にします。図形自体は再生しません。再生を行うのはページの再生ボタンとパッケージです。
5. 組み立てます。node build.mjs <name>.jsを実行すると、hairline-<name>.htmlが出力されます。ステップ3でlook.mjsを実行するたびに、同じファイルも出力されます。Nodeが使えない場合は、ファイル操作でbench.htmlをコピーし、/*KERNEL*/の位置にkernel.jsの内容を、/*FIGURE*/の位置に図形を挿入します。それ以外は変更しないでください。

3. 確認

1. node look.mjs <name>.js --answer x,y,z --edge x,y,z を実行します。図形のワールド座標を指定し、該当する場合は --source <file.svg> も付けてください。詳細は look.md を参照してください。ページを生成して検証し、8枚の画像を1枚にまとめた hairline-<name>-look.png を作成して、フレーム、読み取り値、コンソールを確認します。失敗として表示された行をすべて修正し、終了コードが 0 になるまで再実行してください。
2. look.md を読み、その後シートを確認して、質問に答えてください。失敗した箇所を修正してから、手順1に戻ってください。

look.mjs の実行にはブラウザーが必要です。また、playwright-core をこのフォルダーの外に一度インストールします。ブラウザーがない場合は、ビルドのたびに node validate.mjs hairline-<name>.html で確認し、look.md の「ブラウザーがない場合」に従って外観を確認してください。Node がない場合は、validate.mjs の先頭にあるチェック項目を読み、コードをもとにそれぞれに答えてください。

バリデーターが拒否するページを渡してはいけません。実際に見ていないのに、外観の確認が終わったと言ってはいけません。

4. 引き渡し

可能であれば、hairline-<name>.html を成果物として公開してください。できない場合は、開ける場所にファイルを置き、その場所を伝えてください。その後、次の項目を1行ずつ伝えてください。

• メタファー：オブジェクトが何で、ポインターがオブジェクトに何をするか。
• よりどころとなるルール。
• ツアー：どこに、どの順番で止まるか。
• 確認できなかったこと（Node がない、ブラウザーがないなど）。明確に伝えてください。

次に、ページで再生ボタンを押すか、?play=1 を付けて開くよう相手に頼み、1周のツアーで図形のストーリーが伝わるかどうかを尋ねてください。尋ねる相手がいない場合は、ツアーの評価を受けていないと伝えてください。

5. 調整

相手から変更を依頼されたら、<name>.js だけを編集し、再び look.mjs を実行して新しいシートを確認してください。10回目のバージョンにも、1回目と同じ基準を適用します。1周のツアーを変更する場合は、tour だけを変更してください。

うまくいかないこと

気づいたこと	代わりにすること
図形にラベル、数字、文字を追加しようとしている	ジオメトリで表現します（ルール 10）。名前は read.textContent に入れます
色、塗りつぶし、グローを使おうとしている	1本のストロークを sil から hi に移します（ルール 04）
タイマー、requestAnimationFrame、CSS アニメーションを書こうとしている	スプリングまたはトゥイーンを使って register(stage, tick) を呼び出します（ルール 07、08）
現在描画されているものに対してポインターを判定している	静止時またはターゲットのポーズに対して判定します（ルール 01）
12本の辺がある箱を描いている	2つの丸みのあるリングで構成する prism を使います。シルエットと1本の折り目を作ります（ルール 09）
部品を単なる角丸ブロックとして描いている	コンセプト（concepts.md）で挙げた、その部品を特徴づける要素を加えます
簡単だからという理由で、静止状態を平坦、空、または対称のままにしている	全体を構成します。静止状態はサムネイルです（ルール 05）
箱に印を付けて持ち主を示している	印そのものをオブジェクトとして作るか、省きます（concepts.md の「印から作る」）
動作させるためにカーネルやベンチを編集している	図形に問題があります。図形を変更してください
ツアーで各部品を順番に訪れている	それぞれ異なる答えを示す3つの停止地点を作り、最後に離れます。1周のツアーは目録ではなく、ひとつの文です
2つ目のアイデアを取り入れている	取り除きます。図形はひとつ、アイデアもひとつです
SVG からパスをたどったり、座標をコピーしたりしている	source.md にあるカードの比率に従い、部品を立体として作ります
SVG の装飾部分を残している	取り除きます。オブジェクトを構成する部品は2つか3つです