# 風の機関室 — 作り方とプロンプト

一言：青緑の殻をひらき、銀色の羽根と真鍮の軸をほどく。小さな機械の内側で遊ぶ工房。
完成物：https://okemonogatari-hash.github.io/html-share-box/astra-little-engine-2026-10-04/
サムネ：poster.png

2026年10月4日制作。親担当が題材選び、実ブラウザでの受入、公開、棚への反映を担当し、制作担当が独自の形状、描画、操作、検査、制作資料を保存しています。

## 本人の頼み方（原文）

同じ実験室の`ink-board/PROCESS.md`に引き継がれた依頼原文です。

> この水野さんの朝のAI発信のYouTubeスクリプトを見てきて、また内容の把握と、あとなんかChatGPTのお気に入り作品集みたいなものがまた増えてるみたいだから、アストラのね、3D実験室とかアストラ実験室、おけもん実験室の棚をまたどんどん増やしていきましょう。ちょうど5日までに切れるチケットがあるから、もう遠慮せずにフルパワーでどんどん回していきましょう、そこまでは。

発想の入口は、親担当がライブ面で確認した公式作品「分解・切断できるジェットエンジン」。確認記録は`../research/claude-favorites.md`です。今回は入口・中央・出口に分かれた、独自の卓上模型にしています。

## AIに渡したプロンプト原文

- [制作担当への委任全文と修正指示](prompts/build-brief.md)
- [全文を表示し、コピーできる作り方ページ](making.html)
- [同じ再利用プロンプトのテキスト](prompts/reusable-prompt.txt)
- このファイル末尾にも再利用用プロンプトを保存しています。

## 道具とモデルの記録

- モデル要求値: 制作担当への依頼では`gpt-6-astra / ultra`を指定。本人の「10月5日までフルパワー」を引き継いだ要求です。この制作資料だけで、バックエンドの実行モデルや実際の推論量を独立確認したとは主張しません。
- Codex native subagent: 自前WebGL、幾何形状、HTML・CSS・JavaScript、テスト、制作資料を作成。
- `apply_patch`、Python、Node.js: ファイルの作成と修正、構文検査、状態・時刻・幾何・カメラ・コピー文章の検査。
- ブラウザ標準WebGL: 深度テスト、曲面の法線、金属ごとの反射、部品の軸方向移動と回転。
- ブラウザ標準Canvas 2D: PNGを保存する瞬間の独立した画像コピー。
- 親担当の実ブラウザ: PCと375px、各操作、PNG実ファイル、コピー、停止・再開・ページ復帰の受入。制作担当はブラウザを操作していません。親が保存した初稿画像を制作担当でも開いて確認しました。
- 外部CDN、外部フォント、新ライブラリ、画像生成、追加課金APIは使っていません。

## 素材と実装の出どころ

- 外部参考作は発想の入口です。コード、画像、音声は複写していません。
- 形状は全て今回の独自実装です。曲がった羽根の表裏と側面、回転体の軸、外殻、真鍮の輪、六角のボルト、台座、支えを数式から作ります。
- 内部参考として、同じ実験室の`paper-forest/gpu.mjs`にあるWebGLの初期化、深度バッファによる隠面処理、シェーダーの組み立て方を読みました。今回はワールド座標と法線をGPUへ渡し、金属の陰影を計算する新しい描画器です。兄弟作品を読み込む実行時依存はありません。
- 配色、工房の画面、操作文、照明と反射の数式、気流の短いリボン、床の影は今回作成しました。反射や気流は模型の視覚表現で、実際の材質や流体の測定値ではありません。
- 文字は端末の明朝体、ゴシック体、Georgiaなどの標準書体です。
- `poster.png`は親が実ブラウザから保存した作品PNGです。画像生成による完成見本ではありません。最終形への更新と公開結果は親の受入記録を参照してください。

## 形と動きのしくみ

1. 羽根の半径、角度、軸方向の曲がりを連続関数で作り、表裏に厚みを付けます。広い金属面の法線は解析的な微分で求め、なめらかに補間します。側面の角は独立した法線にして厚みを残します。
2. 外殻は厚みを持つ円筒です。「殻をひらく」で前上側の角度範囲を欠き、切り口と内壁が実際に現れます。縁の輪とボルトも同じ断面に追従します。
3. 入口と出口のまとまりは共通軸の両方向へ移動します。中央の軸と台座は残り、3つのまとまりのつながりを観察できます。
4. 深度バッファで手前の面を選び、奥にある羽根、軸、気流を隠します。照明の方向、曲面の法線、視線から素材ごとのハイライトを計算します。
5. 部品と台座を含む、回転に依存しない外形から視点ごとの投影範囲を求めます。閉じた姿から全分解、上下限を含む視点まで、画面幅に合わせて収めます。
6. 回転中のみ連続描画します。停止中は操作・サイズ変更・ページ復帰時に一度描き、背景では予約を解除します。負や非有限の時間差を進めず、復帰時の時間差は初期化し、大きな差は50msで打ち切ります。
7. PNGはクリック時点で描き、直ちに別のCanvasへ同期コピーします。コピー側を非同期でPNG化するので、回転やその後の操作が混ざりません。連続保存は最後の要求を採用し、古いBlob URLを解放します。
8. WebGLを使えない場合は見本画像と案内を表示し、操作を無効にします。描画コンテキストを失った場合も同じ案内に移ります。

模型の形と動きを楽しむ作品です。燃焼、熱、推力、流体の工学シミュレーションは含みません。

## 再制作と修正

1. [README](README.md)のHTTPサーバーでフォルダを開きます。
2. 羽根や外殻は`geometry.mjs`、断面・分解・時間進行・カメラは`model.mjs`を変更します。
3. 素材と光は`renderer.mjs`、操作とPNG・ページ復帰は`app.mjs`を変更します。
4. UIの変更は`index.html`の日本語とaria属性、`style.css`、状態との対応を揃えます。
5. `node --test qa/model.test.mjs`と4つの`.mjs`に対する`node --check`を実行します。
6. 実ブラウザでPCと375px、断面0/50/100×分解0/50/100、全視点、実マウス・タッチと矢印キーを検証します。
7. 停止、速度0、手動角、再開、背景復帰、戻る操作を確認します。回転中・停止中・連続保存のPNGを実ファイルで開き、クリック時点の構図と対応するか照合します。
8. `making.html`のコピーが表示全文と一致するか確認します。親が最終PNGを配置し、公開先と棚を読み戻します。

## 制作担当の検査と修正

9件の検査が合格しています。初期状態と動きを減らす設定、不正入力、負・非有限・大きな時間差、停止と速度0、回転角の折り返し、軸方向の分解、断面の欠き、有限な頂点と単位法線、曲がりを持つ羽根、全形状の画面内フィット、作り方ページとプロンプトの全文一致、外部のネットワーク依存がないことを確認しました。結果は`qa/implementation-report.json`と`qa/test-results.txt`です。ソース検査で外部URL読込やfetchがないことは確認できますが、実ブラウザのネットワーク結果は親の証拠が根拠です。

画面内フィット検査は断面0/50/100、分解0/50/100、4つのプリセットと回転の上下限を含む8視点、縦横比0.62/1.60に対して、実際の部品頂点を投影して検証しています。画面の読みやすさや材質感は数理検査だけで合格にはしていません。

親の初稿検査ではPC/375px/全分解で部品の見分け、端切れ、操作余白を確認し、初期描画の例外0と報告されています。親と独立レビューから、羽根の金属面が格子状に見える指摘を受けました。三角形ごとの面法線を、曲面から求めた頂点法線へ置き換え、厚みの側面は明確な角として残しました。

再ダウンロードリンクの文言も、実際のdownload動作に合わせて変更しています。外殻が閉じた時のボルト角度を一周分へ正規化し、0度付近のボルトも揃うよう調整しました。これらの変更は保存後に再検査しています。

親の実ブラウザ、独立レビュー、最終PNG、公開先の証拠は`../runs/2026-10-04-0414/`へ保存されます。ここでは制作担当の検査と、親から受け取った初稿の報告を区別しています。実機Safari・実機端末の検証は含みません。

### 親から受け取った修正後の受入報告

親から、18の描画状態、断面と分解の9組合せ、4視点、17の動作ステップ、375pxでのタッチ、同じ状態のPNGのhash一致、回転中の保存、戻る操作、プロンプト全文コピー、WebGL不可時の案内、hover時の読みやすさを検証し、例外0で合格したと報告を受けました。親の実見で曲面の法線補間による改善も確認し、最終PNGを`poster.png`へ置き換えています。これは親からの報告であり、制作担当がブラウザ操作を行ったという記録ではありません。

閉じた外殻のボルト角度の正規化は、この受入報告が届く前に保存しています。親へ変更箇所と時期を通知し、ブラウザの読込タイミングに応じた確認を引き継いでいます。該当条件を制作担当の幾何テストにも加え、閉じた輪の両側に各14本が揃うことを確認しています。

## 親担当の最終受入

2026-10-04、ボルト角度の正規化後のソースで18描画を再確認し、閉じた殻と完成PNGを実見しました。PCと375px、断面と分解の9組合せ、4視点、停止・再開・手動角、マウスとタッチ、PNG、ページから戻る操作、1351文字の全文コピーを確認しています。ブラウザ例外0、数理検査9件合格。最終PNGを`poster.png`へ配置しました。根拠と確認範囲は[qa/artifact-readback.json](qa/artifact-readback.json)、公開結果は森の`runs/2026-10-04-0414/`へ保存します。

制作していない`engine_inventory`担当が、修正後の実画像・PNG・コード・親の検証記録を照合し、ローカル成果物を受け入れました。独立レビューの全文は森の`runs/2026-10-04-0414/review.md`です。

## そのまま貼れるプロンプト

```text
「風の機関室」という、羽根と軸をほどいて眺める、小さな機械模型のブラウザ作品を作ってください。

【作品の姿】
静かな工房の机に置かれた、青緑の外殻と真鍮の縁を持つ卓上模型です。銀色の羽根は、平たい三角形ではなく、厚みとねじれ、丸く流れる曲がりを持たせてください。入口の大きな羽根、中央の羽根と軸、奥の小さな羽根の3つのまとまりを見分けられるようにします。軸受、輪、六角のボルト、先端、支えと台座も作り込みます。金属の鈍い反射、細いハイライト、接地する影で、触りたくなる姿にしてください。
実機の性能や熱力学を再現するとは説明せず、形と動きを楽しむ模型として作ります。外部作品のコードや画像をコピーせず、独自の形と画面を設計してください。

【手で動かす】
「殻をひらく」は外殻の前上側を実際に欠いて、内部が見える断面を広げます。閉じると一周つながった殻に戻ります。
「軸に沿ってほどく」は、入口、中央、出口のまとまりを共通の軸に沿って分解し、元に戻せます。羽根だけでなく、各まとまりの外殻と縁も一緒に移動します。
羽根の回転速度、一時停止・再開、停止中の手動角度を用意します。速度0でも角度は静止させます。風の通り道は細い青緑の線で表し、表示を切り替えられます。閉じた殻の向こうにある線や部品は隠してください。
工房、真横、入口、上からの視点ボタンと、マウス・タッチのドラッグ、キーボードの矢印キーによる視点変更を付けます。はじめの姿に戻すボタンも付けてください。断面と分解が最大でも、どの視点でも部品を画面に収めます。

【描画と保存】
ブラウザ標準のWebGLで深度を扱い、見える面を正しく描きます。厚みのある形、曲面の法線、素材ごとの反射を自前の幾何とシェーダーで作ってください。外部CDN、新ライブラリ、外部フォント、追加のAPIは使いません。
停止中は操作や画面サイズ変更の時だけ再描画します。タブが背景にある間も不要な描画を止めます。初回、負の時間差、巨大な時間差、ページ復帰で角度が飛ばないようにし、pagehideで予約番号を0へ戻してください。prefers-reduced-motionでは最初から停止し、手で操作できます。
PNG保存はクリックした時点の構図をその場で別のCanvasへ同期的にコピーしてから非同期に画像化します。保存中の回転や操作を混ぜず、画面の状態を保ちます。古いBlob URLを解放し、ページから戻った後も操作と保存が働くようにしてください。
WebGLを使えない時は作品の実PNGと短い案内を表示し、操作は無効にします。

【画面と引き渡し】
クリーム色の展示台、深い緑の文字、真鍮色の小さな番号。大きな模型と余白、読みやすい日本語で、工房の小冊子のように整えてください。375pxでも主要操作とラベルに手が届くようにします。
自己完結したHTML・CSS・JavaScript、制作手順、README、PROCESS、依頼と修正の原文、再利用できるこのプロンプト全文とコピーボタンを保存します。状態、時間進行、形状、画面内フィットを数理検査し、別担当が実ブラウザのPC・スマートフォン幅・タッチ・PNG・コピー・ページ復帰を確認して仕上げてください。
```