# ひかりのエンボス工房

[公開版を開く](https://okemonogatari-hash.github.io/html-share-box/astra-emboss-2026-10-03/)

短文を浮彫り・箔押しのような表現にし、光を動かして仕上げるCanvas 2D作品です。外部パッケージ・画像素材・外部フォント・AI APIは使いません。

公開先: https://okemonogatari-hash.github.io/html-share-box/astra-emboss-2026-10-03/

## ローカルで開く

リポジトリのルートで起動:

```sh
python3 -m http.server 8875
```

http://127.0.0.1:8875/outputs/astra-lab-2026-10-03/emboss/ を開きます。ES Modulesを使うため、ファイルを直接開くよりHTTPサーバー経由を推奨します。8875使用中なら既存サーバーを使用するか別ポートを指定してください。

## 操作

- 文字: 最大42 graphemes。日本語、英数字、複合絵文字を一単位として扱います。改行3段まで。長い行は自動で折り返し、文字サイズを下げて紙面へ収めます。
- 素材: コットン紙、シャンパン箔、宵の黒箔。
- 押し方: 浮き出す／くぼませる。深さ10〜100%。
- 光: 紙上ドラッグ・タッチ、左右上下のスライダ。紙にフォーカスすると矢印キー（Shift併用で大きく移動）、Homeで最初の光。
- PNG: ボタンを押した時点のCanvasを1280×1024で保存。自動ダウンロードに加え、同じ画像のリンクを残します。光のマーカーなどUIは画像に入りません。
- リセット: 素材・文字・深さ・光を初期状態へ戻します。光だけのリセットもあります。

## 構成

| ファイル | 役割 |
| --- | --- |
| index.html / style.css | 工房の画面、レスポンシブ表示 |
| app.mjs | 入力、光操作、描画要求、PNG保存 |
| renderer.mjs | 紙の粒子、文字組版、高さ・法線、照明・反射 |
| model.mjs | 入力上限、改行、禁則の一部、光方向 |
| making.html / making.mjs | 使い方・仕組み・再制作プロンプトとコピー |
| PROCESS.md | 元依頼、道具、素材、再制作と確認の記録 |

## 確認

```sh
node --check app.mjs
node --check renderer.mjs
node --check model.mjs
node --check making.mjs
node --test qa/model.test.mjs
node qa/check-static.mjs
```

テストは文字の境界、改行、複合絵文字、折返し、光の有限値を確認します。実画面の魅力、3素材の見え方、IME、タッチ、キーボード、PNGの実取得、375pxでの表示はブラウザ受入で確認してください。制作担当はブラウザを操作せず、親担当が独立して受け入れます。

## 実装上の範囲

- 字形のぼかしから高さを作る2D表現です。実際の3D形状・印刷仕上がりや光学的な厳密さを保証するものではありません。
- 端末の日本語明朝体を使用するため、字形や改行は環境により少し変わります。
- 描画解像度は固定。画面サイズが0になっても画像のピクセル寸法は0にしません。
- 常時アニメーションを実行せず、操作時のみ再描画。リクエストを1フレームにまとめます。時間差の計算はありません。
- 元画像と同じCanvasからPNGを作り、CORSで汚染される画像を使いません。生成URLは次の保存時に解放し、Canvas画像を保持するリンクは一つまでです。