紙の森は、こうして。

本を開くと、紙が起き上がる。その途中を、自分の手でじっくり見てみたくて。森の喫茶、ちいさな橋、灯りのついた窓を、一つずつコードで切り出しました。

この森のしかけ

1. 厚みのある左右のページを、背表紙を軸に開閉します。
2. 木や家の紙片は、ページに沿って倒れ、開くにつれて立ち上がります。
3. ドラッグで横や裏から観察できます。「折り目を見る」では、貼り付ける足と屋根の折り線を強調します。
4. 夕暮れに変えると、喫茶店の窓と小径の灯りがともります。
5. 「この景色を保存」は、その瞬間の角度・開き具合・光を一枚のPNGにします。

「ひらく、紙の森」という、触れる飛び出す絵本のブラウザ作品を作ってください。

ページを開閉するだけで物語が進む動画ではなく、紙のしかけを自分の手で観察できる作品にしてください。最初から本を100%開いた美しい景色を見せて、0〜100%のスライダーと開く・閉じるボタンで、途中の形も止めて眺められるように。

本には厚み、背表紙、重なるページ、布張りの緑の表紙、紙の繊維、しおりを付けてください。左右のページに、重なった針葉樹と丸い葉の木、珊瑚色の屋根の「森の喫茶」、もう一軒の小さな家、曲がる小川、木の橋、花、小さなテーブル、狐、灯りを配置してください。温かい生成り、苔色、控えめな珊瑚色で、手で切った紙の模型らしく仕上げて。

閉じると紙の部品がページへ倒れ、表紙の内側に収まるようにしてください。完全に閉じた時だけでなく25%・60%などの途中でも、裏側の木や小川が不透明なページを透けて見えないこと。窓・扉・屋根・木の前後関係も、視点を変えて正しく隠れるようにしてください。

ドラッグと矢印キーで視点を動かし、正面・上から・近くで、の視点ボタンも付けてください。昼／夕暮れ、折り目の表示、初期状態に戻す操作、その瞬間のCanvasをPNG保存する操作を付けて。開閉の途中も本が画面に収まるようにして、375px幅でも操作しやすくしてください。日本語のラベルとキーボード操作に対応し、動きを減らす端末設定では補間をせず直接最終状態へ。操作していない時は描画を止めてください。

外部のコード、画像、フォント、ライブラリ、有料APIを読み込まない独自実装にしてください。HTML・CSS・JavaScriptとブラウザ標準のWebGLで紙の面を描き、深度バッファで面の遮蔽を判定してください。ブラウザで描いた日本語の看板と紙の繊維もローカル生成してください。

作り方ページ、コピー可能なこの依頼文、README、PROCESS.md、実際に渡した制作プロンプトを残してください。保存したPNG、PCと375px幅、全開・閉じ・途中の形、裏側、全操作を実ブラウザで確かめてから完成としてください。

使ったもの

HTML、CSS、JavaScript、ブラウザ標準のWebGL。形も色も、この作品のために生成しています。フォントは端末にある日本語の書体を使用しています。紙の折り方は見た目を楽しむための表現で、実際の型紙の設計や紙の応力を計算するものではありません。