# ひらく、紙の森 — 作り方とプロンプト

一言：ページをひらくと森が立ち上がる。角度を変えて紙のしかけを眺める、小さな絵本。
完成物：https://okemonogatari-hash.github.io/html-share-box/astra-paper-forest-2026-10-03/
サムネ：poster.png

2026-10-03制作。上記は親担当が反映する公開先です。公開読戻しは親の受入記録へ保存します。サムネイルは親担当が実ブラウザから保存したPNGで、生成画像ではありません。

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

同プロジェクトの水車作品 `PROCESS.md` に親担当が保存し、エンボス作品の記録にも引き継いだ今回の依頼です。

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

参考の紹介はClaude公式のお気に入り作品でした。親担当が公開投稿と紙のポップアップ作例を確認しています。既存の飛び出す絵本には直線的に再生する動画があり、今回は開き具合・視点・光・折り線を自分で操作して観察する体験として制作しました。

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

[制作担当へ渡した全文](prompts/build-brief.md)に保存しています。初回実物の読戻しで親担当から届いた描画順・画面内調整の修正依頼も、同じファイルに原文で追記しています。[作り方ページ](making.html)には、最終実装に沿った日本語の再利用用プロンプト全文とコピー操作があります。

## 道具とモデル指定

- ユーザーの指定: CodexでAstra ultraを使い、2026-10-05まで実験室の作品を増やす。制作担当へ渡った依頼にもAstra ultraの指定があります。要求値とバックエンドの実行証拠を区別し、この記録単独で実行モデルを独立確認したとは主張しません。
- Codex native subagent: HTML、CSS、JavaScript、数理検査、制作資料の作成。
- ブラウザ標準のWebGL: 紙の面の描画、深度バッファによる隠面処理、照明、紙の繊維、半透明の接地影、局所生成した看板文字。
- ブラウザ標準のCanvas 2D: 看板の文字テクスチャ、表示中のWebGL CanvasからPNG用の瞬間を取り出す処理。
- `apply_patch`、シェル、Python、Node.js: ソース・記録の制作、構文確認、折り畳み・投影・三角形分割の数理検査。
- 親担当: 隔離したChromium 151の実ブラウザでPC・375px表示・キーボード・タッチ・PNG取得・コピー・通常補間・戻る操作を受入。
- 外部パッケージ、Three.js、画像生成、有料API、外部フォント、外部画像は使用していません。

## 素材の出どころ

- 発想の入口: [Claude公式のお気に入り作品紹介](https://x.com/claudeai/status/2106125468365918268)にある紙のポップアップ作例。内容の確認は親担当の研究記録にあります。
- 取り入れた発想: 本のページから紙の街が立ち上がる体験。
- 独自に制作: 森の喫茶、もう一軒の家、針葉樹・広葉樹、小川、橋、狐、テーブル、花、灯り、布張りの表紙、しおり、色、画面、開閉・観察の操作、描画コード。
- 紙の繊維: 画素座標からシェーダー内で計算する粒子と細い筋。画像素材は使っていません。
- 文字: 端末にある日本語明朝体・ゴシック体と標準欧文。端末により字形は変わります。
- サムネイル: 親担当が作品そのものから取得したPNG。
- 参考作のソース、画像、音声は使用していません。画面の処理は端末内で行います。

## 紙の森のしくみ

1. 左のページを基準とし、右ページを背表紙の軸で180度まで回転させます。
2. 木や建物はページ上の足を固定し、開き具合に応じて上向きの量とページへ倒れる量を変えます。閉じた時は薄いページ間の余白に収まります。
3. 木は平面の切り抜きを交差させ、表と裏で色を少し変えます。家には別々の屋根、窓、扉、庇、看板、煙突を置きます。
4. 複数の凹多角形を三角形へ分割し、WebGLの深度テストで、近い面だけを表示します。表紙の裏側にある川や木も、途中の開き具合から正しく隠れます。
5. 紙の法線に応じて色を変え、微かな粒子と繊維を加えます。接地影は半透明の形状を重ねています。
6. 各フレームの実際の頂点から画面内の範囲を求め、標準倍率では左右5%・上12%・下11%の余白内へ収めます。明示的に拡大した時は大きさを優先します。
7. PNG保存時には補間を止め、その瞬間のCanvasを独立したCanvasへコピーしてから`toBlob`に渡します。名前も同じ瞬間の開き具合と光から決めます。

紙の応力・接着剤・実際の型紙を解く物理シミュレーションではありません。紙らしい形と機構の観察を楽しむための幾何表現です。接地影も正確な影の物理計算ではありません。

## 再制作・修正

1. [README](README.md)のHTTPサーバーから作品を開く。
2. `renderer.mjs`で木・家・地形・色、`model.mjs`で折り畳み・投影、`gpu.mjs`で紙質・照明・隠面処理を変える。
3. 操作を変える時は`app.mjs`と`index.html`の日本語ラベル・aria属性を合わせる。
4. `node --test qa/model.test.mjs`と各`.mjs`の`node --check`を実行する。
5. 実ブラウザで100 / 60 / 25 / 0%、横・裏・真上寄りの角度、昼・夕暮れ、折り目、リセットを確認する。
6. PCと375pxのタッチで操作し、画像を実取得して表示と一致するか見る。「動きを減らす」と通常補間の両方、補間途中の保存、作り方から戻る操作も確認する。
7. プロンプトをコピーし、クリップボードの全文が画面と一致するか照合する。
8. 親担当が最終サムネイルを取得し、公開・棚への追加・公開URLからの再読込を記録する。

## 検証と修正の記録

### 制作担当の数理検査

`qa/model.test.mjs`は6件すべて合格しました。入力の有限化、0〜100%の単調な立ち上がり、0%時に紙片が両ページの間に収まること、全開時の高さ、複数の開き具合・方位・上下角におけるPC/375px相当の有限な頂点と画面内への収まり、凹多角形を三角形へ分けても紙面の面積が失われないことを確認しています。構文確認も合格。数理検査だけでブラウザ表示や保存を確認したとは扱いません。

### 親と独立レビュアーの実物受入

- 初期Canvas 2Dの平均深度順描画では、0%と25%で木や川が表紙の上へ透け、全開時も奥の木や窓の一部が紙面に隠れました。親の実スクリーンショットを制作担当も読み、全ての面に深度テストを使うWebGLへ切り替えました。
- 独立検査で閉時のページ間隔が紙片の厚みより小さい指摘を受け、閉じた時に確保するページ間隔を増やしました。
- 60%でページ上端が切れる問題、真上に近い横向き視点で下端が切れる問題は、各フレームの実頂点から画面内へ収める方式で解消しました。
- モバイルで作品内の署名と操作が重なったため、署名を削除し、主要な操作の文字を12pxへ上げました。
- 戻る操作に備え、`pagehide`で予約フレームを解除した後にフレーム番号も0へ戻し、解放した画像URLのリンクも隠します。
- 最終画像を確認した親から、全開・0%・25%裏側・60%・375px・最大上下角を含む左右の視点で、透過と見切れが解消したと報告を受けています。
- 親の実操作では全操作、PNG3種、375pxタッチ、通常の約1.2秒の開閉、矢印キー、作り方のコピー901文字の完全一致、戻る後の操作、80%の途中保存が合格。ブラウザのエラーは0件。
- WebGLを無効にした別ブラウザ試験では、Canvasを隠してサムネイルと短い案内を表示し、保存を無効にする状態を親が確認しました。
- 独立レビュアーも修正後画像の遮蔽と見切れを確認しています。制作担当はブラウザを操作していません。親とレビューの証拠は`../runs/2026-10-03-1912/`のQA JSONと実画像を参照してください。

公開済みの状態は、親担当がURLから実際に読み戻した記録を根拠とします。

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

道具：Codex（Astra ultra指定）／ブラウザ標準のWebGLとCanvas 2D

```text
「ひらく、紙の森」という、触れる飛び出す絵本のブラウザ作品を作って。厚みのある本を0〜100%で開閉し、木や家の紙がページへ倒れて収まる様子を、途中で止めて眺められるように。生成りの紙、苔色の木、珊瑚色の屋根の「森の喫茶」、小川と橋、狐、花、灯りを手切りの紙の模型として描いて。ドラッグと矢印キーの視点操作、正面・上から・近く、昼・夕暮れ、折り目表示、リセット、その瞬間のPNG保存を付けて。閉じた表紙や中間のページから裏の物が透けないように、全ての面をWebGLの深度バッファで描いて。標準倍率はどの角度でも本が画面に収まり、375pxで操作できるように。動きを減らす設定を尊重し、静止中の描画は止めて。外部コード・画像・フォント・ライブラリ・有料APIを使わず独自に制作し、作り方ページ、コピーできるプロンプト、PROCESS.md、検査と実物の証拠を残して。
```

詳細な全文は[作り方ページ](making.html)でコピーできます。

## 親の最終受入

2026-10-03、最終版のPC・375px・タッチ・PNG実取得を再確認。独立レビュアーが378状態・2,448,846投影頂点を検査し、標準倍率での境界逸脱0、最終画像9枚で透過・見切れ・文字重複の解消を受け入れました。親も数理テスト6件を実行して合格。サムネイルは最終版から保存した1290×792 PNGです。公開の受入正本は森の `outputs/astra-lab-2026-10-03/runs/2026-10-03-1912/outcome_contract.json` です。