MAKING OF A LITTLE WIND MACHINE
風の機関室のつくり方
薄い羽根にも、曲がりと厚みを。
丸い殻をひらくと、同じ軸を囲む形が見えてきます。
形をつくる
羽根は半径と角度を少しずつ変えて曲げた立体です。表と裏の間に厚みを作り、縁はくっきり、広い面はなめらかに。輪、軸、六角のボルトも数式から組み立てています。
内側を見せる
断面をひらく操作では、外殻の前上側を実際に欠いています。分解すると、入口・中央・出口が軸に沿って離れます。手前の面の裏にある部品は、深度の情報で隠れます。
金属に光を入れる
青緑の殻、真鍮の縁、銀色の羽根で光の返り方を変えました。窓からの光を思わせる反射と細い筋は、自前のシェーダーで描いています。写真の素材は使っていません。
好きな姿を残す
止めて、回して、ほどいて、また戻す。保存を押した瞬間に画像を別のCanvasへ写すので、その後の操作が保存中の画像へ混ざりません。気に入った断面を標本のように残せます。
そのまま使えるプロンプト
この下の文章を、制作を頼むAIへ。
「風の機関室」という、羽根と軸をほどいて眺める、小さな機械模型のブラウザ作品を作ってください。
【作品の姿】
静かな工房の机に置かれた、青緑の外殻と真鍮の縁を持つ卓上模型です。銀色の羽根は、平たい三角形ではなく、厚みとねじれ、丸く流れる曲がりを持たせてください。入口の大きな羽根、中央の羽根と軸、奥の小さな羽根の3つのまとまりを見分けられるようにします。軸受、輪、六角のボルト、先端、支えと台座も作り込みます。金属の鈍い反射、細いハイライト、接地する影で、触りたくなる姿にしてください。
実機の性能や熱力学を再現するとは説明せず、形と動きを楽しむ模型として作ります。外部作品のコードや画像をコピーせず、独自の形と画面を設計してください。
【手で動かす】
「殻をひらく」は外殻の前上側を実際に欠いて、内部が見える断面を広げます。閉じると一周つながった殻に戻ります。
「軸に沿ってほどく」は、入口、中央、出口のまとまりを共通の軸に沿って分解し、元に戻せます。羽根だけでなく、各まとまりの外殻と縁も一緒に移動します。
羽根の回転速度、一時停止・再開、停止中の手動角度を用意します。速度0でも角度は静止させます。風の通り道は細い青緑の線で表し、表示を切り替えられます。閉じた殻の向こうにある線や部品は隠してください。
工房、真横、入口、上からの視点ボタンと、マウス・タッチのドラッグ、キーボードの矢印キーによる視点変更を付けます。はじめの姿に戻すボタンも付けてください。断面と分解が最大でも、どの視点でも部品を画面に収めます。
【描画と保存】
ブラウザ標準のWebGLで深度を扱い、見える面を正しく描きます。厚みのある形、曲面の法線、素材ごとの反射を自前の幾何とシェーダーで作ってください。外部CDN、新ライブラリ、外部フォント、追加のAPIは使いません。
停止中は操作や画面サイズ変更の時だけ再描画します。タブが背景にある間も不要な描画を止めます。初回、負の時間差、巨大な時間差、ページ復帰で角度が飛ばないようにし、pagehideで予約番号を0へ戻してください。prefers-reduced-motionでは最初から停止し、手で操作できます。
PNG保存はクリックした時点の構図をその場で別のCanvasへ同期的にコピーしてから非同期に画像化します。保存中の回転や操作を混ぜず、画面の状態を保ちます。古いBlob URLを解放し、ページから戻った後も操作と保存が働くようにしてください。
WebGLを使えない時は作品の実PNGと短い案内を表示し、操作は無効にします。
【画面と引き渡し】
クリーム色の展示台、深い緑の文字、真鍮色の小さな番号。大きな模型と余白、読みやすい日本語で、工房の小冊子のように整えてください。375pxでも主要操作とラベルに手が届くようにします。
自己完結したHTML・CSS・JavaScript、制作手順、README、PROCESS、依頼と修正の原文、再利用できるこのプロンプト全文とコピーボタンを保存します。状態、時間進行、形状、画面内フィットを数理検査し、別担当が実ブラウザのPC・スマートフォン幅・タッチ・PNG・コピー・ページ復帰を確認して仕上げてください。発想の入口は、親担当が確認した公式作品「分解・切断できるジェットエンジン」。コード・画像は複写せず、独自の卓上模型として制作しました。実機の性能を計算する作品ではありません。
道具・依頼原文・素材・検査の記録は PROCESS、動かし方は README にまとめています。