クアッドツリーリビール — 動きの伝え方辞典

media

quadtree reveal / adaptive subdivision reveal

クアッドツリーリビール

画像を四分割→さらに四分割と再帰的に刻み、平らな面は大きいまま・情報の多い面だけ細かく割って、大きいブロックから順に組み上げていくリビール。等分割のモザイクと違い「絵の中身が分割の粗密を決める」ので、輪郭のあたりだけ解像度が上がっていくように見える。

01 — Demo video

Play live →

02 — Prompt template

画像の登場に quadtree reveal(クアッドツリー分割リビール)を実装してください。

- 画像を1/8程度に縮小したオフスクリーンcanvasへ描き、getImageData で画素を1回だけ読む(実寸で読むと重い)
- 矩形ノードの平均色を求め、ノード内の各画素と平均色の差(RGBの最大値)が {{threshold}} を超えたら四分割する。再帰は最大 {{depth}} 段で打ち切る
- 分割しきった葉ノードを面積の降順にソートし、平均色で塗った矩形として描く
- 表示用canvasで、葉を先頭から順に {{duration}}s(ease-in-out)かけて出していく。面積の大きい平らな面から現れ、輪郭まわりの細かいブロックが最後に埋まる
- 全部揃ったら {{hold}}s 保持し、続けて同じ順序・同じ {{duration}}s で葉を消していき、下に置いた実画像を出す
- 交差監視(IntersectionObserver)で画面に入ってから開始し、画面外では描画を回さない
- DOM要素を葉の数だけ作らない。描画はcanvasの矩形塗りだけで行う
- prefers-reduced-motion 時は分割アニメーションを一切再生せず、実画像を最初から表示する

画像の登場に quadtree reveal(クアッドツリー分割リビール)を実装してください。

- 画像を1/8程度に縮小したオフスクリーンcanvasへ描き、getImageData で画素を1回だけ読む(実寸で読むと重い)
- 矩形ノードの平均色を求め、ノード内の各画素と平均色の差(RGBの最大値)が {{threshold}} を超えたら四分割する。再帰は最大 {{depth}} 段で打ち切る
- 分割しきった葉ノードを面積の降順にソートし、平均色で塗った矩形として描く
- 表示用canvasで、葉を先頭から順に {{duration}}s(ease-in-out)かけて出していく。面積の大きい平らな面から現れ、輪郭まわりの細かいブロックが最後に埋まる
- 全部揃ったら {{hold}}s 保持し、続けて同じ順序・同じ {{duration}}s で葉を消していき、下に置いた実画像を出す
- 交差監視(IntersectionObserver)で画面に入ってから開始し、画面外では描画を回さない
- DOM要素を葉の数だけ作らない。描画はcanvasの矩形塗りだけで行う
- prefers-reduced-motion 時は分割アニメーションを一切再生せず、実画像を最初から表示する

画像の登場に quadtree reveal(クアッドツリー分割リビール)を実装してください。

- 画像を1/8程度に縮小したオフスクリーンcanvasへ描き、getImageData で画素を1回だけ読む(実寸で読むと重い)
- 矩形ノードの平均色を求め、ノード内の各画素と平均色の差(RGBの最大値)が {{threshold}} を超えたら四分割する。再帰は最大 {{depth}} 段で打ち切る
- 分割しきった葉ノードを面積の降順にソートし、平均色で塗った矩形として描く
- 表示用canvasで、葉を先頭から順に {{duration}}s(ease-in-out)かけて出していく。面積の大きい平らな面から現れ、輪郭まわりの細かいブロックが最後に埋まる
- 全部揃ったら {{hold}}s 保持し、続けて同じ順序・同じ {{duration}}s で葉を消していき、下に置いた実画像を出す
- 交差監視(IntersectionObserver)で画面に入ってから開始し、画面外では描画を回さない
- DOM要素を葉の数だけ作らない。描画はcanvasの矩形塗りだけで行う
- prefers-reduced-motion 時は分割アニメーションを一切再生せず、実画像を最初から表示する

03 — Params

depth(最大分割深度) — 範囲 3〜6 / 初期 5
何回まで四分割を繰り返すか。4〜5が目安。6にすると輪郭が写真並みに戻ってしまい、ブロックで見せる旨味が消える。
threshold(分割するムラの大きさ) — 範囲 10〜120 / 初期 45
ブロック内の色のばらつきがこの値(0〜255)を超えたら割る。小さいほど全面が細かくなる。30〜60が「空はざっくり・輪郭は細かく」の分かれ目。
duration(組み上げ/ほどけ時間 s) — 範囲 0.4〜2.5 / 初期 0.9
ブロックが出そろうまでの時間。0.8〜1.2sが自然。2sを超えると読み込み待ちに見える。
hold(完成形の保持 s) — 範囲 0〜1.5 / 初期 0.35
全ブロックが揃ってから実画像へ切り替えるまでの間。0.3〜0.5sあると「一度像を結んだ」ことが伝わる。0にすると素通りする。

04 — Vocab

quadtree(四分木) — 矩形を再帰的に4つの子矩形へ分割して管理する木構造。画像では「細かく見る必要がある場所だけ深く割る」ために使う。
leaf node(葉ノード) — それ以上分割しなかった末端の矩形。描画されるのはこの葉だけで、葉同士は重ならず画面を隙間なく覆う。
threshold(しきい値) — 分割するかどうかを決める色のばらつきの基準。ここを上げると平らな面が大きいまま残り、下げると全面が細かくなる。
getImageData — canvasから生の画素値を読む処理。重いので縮小したオフスクリーンcanvasに対して1回だけ呼ぶのが鉄則。
面積降順 — 葉を大きい順に並べて出す設計。大→小の順にすることで「粗い像が先に立ち上がり、細部が後から埋まる」読み取りやすい動きになる。

05 — NG → OK examples

言い方: 「「画像がモザイクからパッと現れる感じにして」」

なぜNG: 「モザイク」と言うと等間隔グリッドのタイル演出が返ってくる。クアッドツリーの肝は「絵の情報量で分割の粗密が変わる」ことなので、そこを言わないと別物になる。分割の深さやしきい値も決まらず、全面が均一な四角の集合になりがち。

言い方: 「「画像のリビールを quadtree subdivision で。縮小canvasの画素を読み、平均色との差が45を超えるノードを最大5段まで四分割。葉を面積降順に0.9s ease-in-outで出し、0.35s保持してから同順で消して実画像へ。描画はcanvasの矩形塗りのみ、reduced-motionでは実画像を即表示」」

なぜOK: 分割の判定基準(平均色との差としきい値)・打ち切り段数・出す順序(面積降順)・尺・実画像への戻し方まで指定してある。特に「面積降順」の一言があるかどうかで、平らな面から像が結ばれるのか、ランダムなノイズに見えるのかが分かれる。