GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

文字 物理 演算 9種 — 落ちて積もり揺れる文字をコードで

· Godrich · 9種 · 23分で読める

フィードバック素のJSSCSS自動再生ホバーヒーローLP

見出しの文字を床に落とすと、ふつうはどれも同じように跳ねます。ここでは01番が角から着いた文字を回して積み、03番はぶつかった速さの分だけゼリーのようにつぶれてふくらみ、05番は沈んだ面積の分だけ水に浮かびます。

九組の文字を落とし、吊るし、水に浮かべてみる舞台

角から着くと回りながら積もる文字01 tx-phys-drop-pile-corner-spin 紐に吊るされて揺れる文字02 tx-phys-rope-hung-swing ぶつかった速さの分だけゼリーのようにつぶれてふくらむ文字03 tx-phys-jelly-impact-squash ポインターをよけてばねで元の位置へ戻る文字04 tx-phys-pointer-dodge-spring-home 水に落ちて沈んだ面積の分だけ浮かび上がる文字05 tx-phys-water-buoyancy-wave 強くぶつかると砕けて散る文字06 tx-phys-impact-shatter-shards 傾く箱の中で片側へ寄っていく文字07 tx-phys-tilt-box-slide 風に飛ばされ木の葉のように揺れて舞い降りる文字08 tx-phys-wind-flutter-drift 崩れ落ちてからまた一列に並び直すヒーロー見出し09 tx-phys-hero-collapse-realign

自動再生 · タイルを押すとその項目へ · すべて1つのzip

キャンバスは一枚ずつ横480・縦300の座標を持ち、日本語のページで舞台に上がる文字は「つみかさね」「ぶらさがり」「ぷにぷに」「こんにちは」「なつのみず」「こなごな」「カートに入れる」「あきのかぜ」「もういちど」の九つです。最初は自動で回る実演が3,400msごとに場面を初めの状態へ戻し、キャンバスを押すか、フォーカスを置いてキーを押した最初の入力で実演の表示が外れて、手で扱う状態に切り替わります。マスの下にあるボタン二つは場面を初めに戻すボタンと一時停止のボタンで、キャンバスにフォーカスがあればEnterとSpaceが同じ役目を受け持ちます。

マスごとの触り方

場面 ポインター キーボード
01 積もる 押した場所の文字をはじく ←・→で揺らす、↑で浮かせる
02 紐 ドラッグ中は半径22pxの円が紐を押しのける ←・→で揺らす
03 ゼリー 近くの文字をはじく ↓で叩きつける、↑で浮かせる
04 よける 動かすだけでポインターになる 矢印キーで22pxずつ動くキーボードのポインター、Escで消す
05 水 押した場所の水面を押す ↓で水に沈める、←・→で押す
06 かけら 押した文字を叩きつける ↓でしきい値より速く叩きつける
07 箱 横の位置がそのまま傾きになる ←・→で4°ずつ傾ける、Escで自動に戻す
08 風 押した場所の文字を浮かせる ←・→で突風、↑で全部浮かせる
09 見出し 押すとすぐに崩す ↓で崩す、↑で戻す

文字 アニメーション 作成はキーフレームでもできるのに、なぜここでは速さと力を毎ティック計算するのか？

キーフレームは前もって書いた道筋を時間どおりに再生するしくみなので、文字どうしがぶつかってどの角度で止まるかを書いておく方法がありません。01の文字の山は止まった角度が0・89・89・1・137・323°と一文字ずつ違い（韓国語版の六文字で測った値）、ポインターでひとつはじけば、その先の並びははじいた瞬間の位置と速さで決まります。こうした結果は、今の位置と速さから次の位置を求める計算を繰り返さないと出てきません。そのため九つの場面のスタイルシートに@keyframesはひとつもなく、動きといえるのはボタンの背景色の切り替えひとつだけです。

文字 アニメーション web の多くは決まった道筋をなぞる作りで、その側から組みたいならCSSの文字アニメーション9選がキーフレームの跳ね返りを扱っています。この編はその逆で、道筋は決めずに力だけを決めます。

1フレームで追いつくのは6ステップまでという時計

スクリプトはrequestAnimationFrameが渡す時刻の差をためておき、16msの固定ステップ（FIXED_DT）に切り分けて回します。1フレームでためられる時間は100msまでなので、追いつくステップも最大6回です。ステップの長さが画面のリフレッシュレートに左右されないので、60Hzの画面でも120Hzの画面でも同じ順番で計算が進むと考えられます。

同じシードから同じ文字の山ができる

並びは式かシード固定の乱数（makeRngの4721・4725・4726+i・4727・4729）だけで決め、Math.randomとDate.nowは九つのソースのどこにも出てきません。固定ステップとシードが組になっているので、手を触れずにもう一度落とせば同じ場所に同じ形で積もります。落とし直した直後の200ms（LEAD_MS）はステップが何もしないので、文字は置かれた場所で一瞬止まってから動き出します。

文字 物理 演算 9種 — 積もる・紐に吊るす・ゼリー・よける・浮かぶ・砕ける・傾く箱・風・ヒーロー見出し

硬い箱がひとつ落ちて積もる01が土台で、02はその箱を紐に掛け、03は箱のかわりにやわらかい体を与えます。04は落ちずにポインターをよけるほう、05は床のかわりに水、06はぶつかった強さで割れるかどうかが分かれるほうです。07は床そのものが傾き、08は重力より風と抵抗が主役で、09は01の箱の計算で崩した見出しを読む順番どおりに戻します。

項目の節に書いた時刻・速さ・角度は、韓国語版の文字で場面の関数を直接呼び出して測った値です。文字の数や「1文字目」のような順番も、その版の並びを指しています。

2秒のキャプチャ24枚で数えた画面の変化

480×300の大きさで2秒間に撮った24枚を隣どうしで見比べ、そこで数えた23回の変化を分母にしています。

場面 累積面積 動いたフレーム 強度の平均
01 角から回って積もる 24.1% 21/23 101.0
02 紐に吊るした看板 16.6% 23/23 121.3
03 ゼリーのつぶれ 23.0% 23/23 104.3
04 ポインターよけ 52.1% 23/23 67.3
05 水に浮かぶ 27.1% 22/23 88.5
06 砕ける 21.9% 15/23 117.2
07 傾く箱 26.9% 23/23 94.0
08 風に舞う 22.6% 23/23 90.4
09 崩れて並ぶ 26.9% 20/23 105.1

累積面積がいちばん広い04は、仮のポインターが8の字の曲線で舞台を横切り、半径の円と五つの文字をいっしょに引き連れて回るためと考えられます。06が15枚にとどまったのは、しきい値の下で落ちた二文字と散ったかけらが床で止まると画面がほとんど変わらなくなるためと考えられます。累積面積が10%を下回った場面はありません。

こんな画面に置く

新製品を初めて見せるランディングのトップには、01のように見出しがこぼれ落ちて積もるか、09のように崩れてから一列に立ち直るほうが似合い、イベント案内のバナーには02の吊り看板が合います。子ども向けアプリのスタート画面には03、夏のイベントページのタイトルには05、秋のシーズンセールのバナーには08が、季節や雰囲気をそのまま伝えてくれます。

文字 動き web で探すような、ポインターに合わせて反応する演出がほしいポートフォリオのあいさつには04を置きます。ゲーム結果画面のスコアの文字は、06のように強く落ちたものだけ割れるようにすると高得点の演出に使いやすく、07の傾く箱は、カートに商品が入ったことを知らせる小さな絵として短く出すのに向いています。

文字をひとつの箱とみなす当たり判定と、角から着地したときに回転を生む撃力

measureTextで測る文字の箱

九つの場面はどれも、layoutWordが原文をArray.fromで一文字ずつに分け、measureTextで文字ごとの幅を測ります。行全体が決めた幅より長ければ文字の大きさを同じ割合で縮め、箱の幅は測った幅（ごく細い文字は文字の大きさの0.34倍）、高さは文字の大きさの0.9倍、文字の間は大きさの0.1倍で、スペースは箱を持たずに場所だけを取ります。01で測ると、韓国語版の六文字は58pxで箱の幅がすべて58、英語版は55.1pxでIの19.2pxからAの41.3pxまで幅が散らばり、日本語の「つみかさね」は縮まずに74pxのまま、箱の幅も74でした。

文字はfillTextで同じ文字を0.5倍暗い色にして右へ1.4px・下へ2.8pxずらして一度描き、その上に本来の色を重ねて厚みを出します。書体は太さ800のシステムフォントの並びで、ウェブフォントは読み込みません。

面積で決める質量と回転のしにくさ

01と09の文字の箱は、面積を900で割った値を質量に、m×（w²＋h²）÷12を回転の慣性に持ちます。幅の広い文字ほど重くて回りにくく、英字のIの箱は同じ高さのAの箱の0.46倍の幅なので、質量もその分だけ軽くなります。

角の接点が撃力を回転に変える式

接点は、箱の頂点が床や壁の外に出たり、ほかの箱の中に入ったりした場所に生まれ、めり込みの浅い軸が押し返す向き（法線）になります。effMassは質量の逆数に、（接点−重心）と法線の外積の二乗を回転の慣性で割った値を足します。接点が重心の真下ならこの外積が0なので撃力はすべて上へ押すのに使われ、角のように横へずれていれば同じ撃力の一部が角速度に回ります。触れる直前の法線方向の速さが1ティックあたり1.2pxより速く迫っていれば、その0.32倍で跳ね返ることを目標にし、遅ければ目標を0にして、積もった文字を静かに座らせます。

九つの場面が1ティックで何を計算し、何が動きを収めていくのかは次のように分かれます。

場面 1ティックの計算 動きを収めるもの
01 重力の積分を1ティックに2回、頂点の接点、撃力6回 跳ね返り0.32、摩擦0.55
02 前の位置との差でつなぐ積分、節の長さの合わせ直し8回 空気の減衰0.012
03 形を合わせる回転角、形のばね0.45、圧力0.8 点の減衰0.02、床で縦×−0.1
04 元の位置へのばね0.05、距離の逆数の反発 速さ×0.88
05 柱のばねと隣への受け渡し2回、標本20点の沈んだ割合 波の減衰0.02、水中の抵抗
06 重力0.5、最初の衝突の速さとしきい値9の比較 かけらは床で×−0.3、横×0.7
07 箱の角度で回した重力、押し出し4回 ティックごとに一度×0.96
08 値ノイズの風、速さの二乗の抵抗、傾きによる滑空 抵抗0.02、角速度の減衰0.06
09 01の箱の計算のあと0.9秒からの戻りばね 減衰2√0.03

01角から着くと回りながら積もる文字

韓国語版の六文字は真ん中に寄せられたまま上下に62pxあまりの間隔で重なって落ち、角から着いた文字は回って倒れ、平らに着いた文字はそのまま座って、止まった角度が0・89・89・1・137・323°に散らばります。接点ごとに6回繰り返すsolveContactは、たまった撃力が0を下回らないように切って箱どうしが引き合わないようにし、滑る向きの撃力は押す撃力の0.55倍の内側に収めます。最初に床へ着いたのは768ms、いちばん速い回転は1ティックあたり16.7°、六文字が最後まで止まったのは2,688msで、山の高さは文字の高さ52.2pxの1.48倍にあたる77.1pxでした。

角から着くと回りながら積もる文字
新しいタブで開く

01 · 角から着くと回りながら積もる文字 — 計測 累積面積 24.095% · 動いたフレーム 21/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

GRAVITYRESTITUTIONFRICTION
    function effMass(c, dx, dy) {
        const ra = (c.px - c.a.x) * dy - (c.py - c.a.y) * dx;
        let k = c.a.im + ra * ra * c.a.ii;
        if (c.b) {
            const rb = (c.px - c.b.x) * dy - (c.py - c.b.y) * dx;
            k += c.b.im + rb * rb * c.b.ii;
        }
        return k;
    }

    function solveContact(c, fric) {
        const rel = relVel(c);
        const vn = rel[0] * c.nx + rel[1] * c.ny;
        const jn0 = c.jn;
        c.jn = Math.max(jn0 + (c.target - vn) / effMass(c, c.nx, c.ny), 0);
        const dj = c.jn - jn0;
        pushPair(c, c.nx * dj, c.ny * dj);
        // 摩擦 — 滑る向きの撃力は押す撃力 x fric を超えられない
        const tx = -c.ny;
        const ty = c.nx;
        const rel2 = relVel(c);
        const vt = rel2[0] * tx + rel2[1] * ty;
        const lim = fric * c.jn;
        const jt0 = c.jt;
        c.jt = clamp(jt0 - vt / effMass(c, tx, ty), -lim, lim);
        const djt = c.jt - jt0;
        pushPair(c, tx * djt, ty * djt);
    }

02紐に吊るされて揺れる文字

五文字が46pxから10pxずつ長くなる五本の紐の先に掛かり、右へ30°持ち上げた姿勢から放されると、紐ごとに違う周期で波のようにずれながら揺れます。節の点は今の位置と前の位置の差に0.988を掛けて速さとして受け継ぎ、fixSegmentを8回回して二点を質量の逆数の比（掛け具0・紐1・先端0.3）で分け、節の長さを戻します。紐の伸びは最大2.57%、最後の文字の傾きは最大33.6°で、揺れが1ティックあたり0.05pxを下回ったまま落ち着くまで7,984msかかりました。

紐に吊るされて揺れる文字
新しいタブで開く

02 · 紐に吊るされて揺れる文字 — 計測 累積面積 16.641% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

ROPE_SEGMENTSCONSTRAINT_ITERATIONSAIR_DAMPING
    function fixSegment(r, k) {
        const dx = r.px[k + 1] - r.px[k];
        const dy = r.py[k + 1] - r.py[k];
        const d = Math.max(Math.hypot(dx, dy), 0.0001);
        const wa = invMass(k);
        const wb = invMass(k + 1);
        const diff = (d - r.rest) / d / (wa + wb);
        r.px[k] += dx * diff * wa;
        r.py[k] += dy * diff * wa;
        r.px[k + 1] -= dx * diff * wb;
        r.py[k + 1] -= dy * diff * wb;
    }

03ぶつかった速さの分だけゼリーのようにつぶれてふくらむ文字

四文字は画素のまわりを28方向の光線でなぞって拾った輪郭の点28個が体になり、床に速くぶつかるほど平たくつぶれてからふくらみます。poseが元の形を今の点にいちばんよく重ねる回転角を求めると、点ごとにその角の0.85倍だけ回した元の形のほうへ0.45だけ引いてまっすぐ立とうとする力を作り、減った面積の割合×0.8×2だけ外へ押します。最初の衝突が1ティックあたり7.42・9.35・11.41・13.09pxのとき、いちばん低くなった高さは元の0.706・0.623・0.599・0.594倍で、0.58倍より下は床の側を基準に伸ばして合わせます。

ぶつかった速さの分だけゼリーのようにつぶれてふくらむ文字
新しいタブで開く

03 · ぶつかった速さの分だけゼリーのようにつぶれてふくらむ文字 — 計測 累積面積 22.985% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

SPRING_STIFFNESSPRESSURESQUASH_LIMIT
    function pose(j) {
        let cx = 0;
        let cy = 0;
        for (let k = 0; k < HULL_POINTS; k += 1) {
            cx += j.px[k];
            cy += j.py[k];
        }
        cx /= HULL_POINTS;
        cy /= HULL_POINTS;
        let num = 0;
        let den = 0;
        for (let k = 0; k < HULL_POINTS; k += 1) {
            const dx = j.px[k] - cx;
            const dy = j.py[k] - cy;
            num += j.qx[k] * dy - j.qy[k] * dx;
            den += j.qx[k] * dx + j.qy[k] * dy;
        }
        j.cx = cx;
        j.cy = cy;
        j.theta = Math.atan2(num, den);

    function stepJelly(j) {
        pose(j);
        // 元の形は今の傾きより少しだけ傾きの浅い姿勢に置く — その差が文字をまっすぐ立たせる力になる
        const c = Math.cos(j.theta * (1 - UPRIGHT_PULL));
        const s = Math.sin(j.theta * (1 - UPRIGHT_PULL));
        const area = polyArea(j.px, j.py);
        const deficit = (j.area0 - area) / j.area0;
        for (let k = 0; k < HULL_POINTS; k += 1) {
            // 形のばね — 今の姿勢へ移した元の形のほうへ
            const gx = j.cx + j.qx[k] * c - j.qy[k] * s;
            const gy = j.cy + j.qx[k] * s + j.qy[k] * c;
            j.vx[k] += (gx - j.px[k]) * SPRING_STIFFNESS;
            j.vy[k] += (gy - j.py[k]) * SPRING_STIFFNESS + JELLY_GRAVITY;

        // つぶれの上限 — 高さが下限を下回ったら床の側(maxY)を基準に上へ伸ばして下限に合わせる
        const minH = (1 - SQUASH_LIMIT) * j.ext[1];
        const hgt = maxY - minY;
        if (hgt < minH && hgt > 0.0001) {
            const k2 = minH / hgt;
            for (let k = 0; k < HULL_POINTS; k += 1) {
                j.py[k] = maxY - (maxY - j.py[k]) * k2;
                if (j.vy[k] > 0) {
                    j.vy[k] *= 0.5;
                }
            }
        }

04ポインターをよけてばねで元の位置へ戻る文字

五文字がポインターの半径90pxの中で押しのけられ、0.05の強さのばねで元の位置へ戻り、元の位置から離れるほど影が離れて文字が最大1.12倍まで大きくなります。押す力は44×（1÷距離−1÷90）なので半径の端で0になり、12pxより近い距離は見ないため、ポインターが文字の真ん中を通っても力が限りなく大きくはなりません。8の字に回る仮のポインターで真ん中の文字は63.1px、両端の文字は8.9px押され、ポインターを消すと624msで0.5px以内に戻ってそのまま留まりました。

ポインターをよけてばねで元の位置へ戻る文字
新しいタブで開く

04 · ポインターをよけてばねで元の位置へ戻る文字 — 計測 累積面積 52.056% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

REPEL_RADIUSRETURN_SPRINGDAMPING
    function step() {
        for (let i = 0; i < movers.length; i += 1) {
            const m = movers[i];
            let ax = -(m.x - m.g.hx) * RETURN_SPRING;
            let ay = -(m.y - m.g.hy) * RETURN_SPRING;
            if (pointer.on) {
                const dx = m.x - pointer.x;
                const dy = m.y - pointer.y;
                const d = Math.max(Math.hypot(dx, dy), MIN_DIST);
                if (d < REPEL_RADIUS) {
                    const f = REPEL_FORCE * (1 / d - 1 / REPEL_RADIUS);
                    ax += (dx / d) * f;
                    ay += (dy / d) * f;
                }
            }
            m.vx = (m.vx + ax) * (1 - DAMPING);
            m.vy = (m.vy + ay) * (1 - DAMPING);
            m.x += m.vx;
            m.y += m.vy;
            // 傾き — 横へ動く速さにつれて傾き、止まるとまっすぐ立つ
            m.a = lerp(m.a, clamp(m.vx * 0.07, -0.5, 0.5), 0.2);
        }
    }

05水に落ちて沈んだ面積の分だけ浮かび上がる文字

五文字が8px間隔の柱61本に分けた水面に落ちて波を立て、文字の箱の中の標本20点のうち水面より下に入った点の割合だけ浮力を受けて浮かび上がります。柱は高さに比例して戻る力を受け、隣との高さの差に0.24を掛けて両隣へ渡す処理を1ティックに二回行うので、一本の揺れが1ティックで二本先まで広がります。文字は736〜928msのあいだに1ティックあたり13.16〜17.34pxで水に入り、水面はいちばん深いところで23.9px押し下げられ、ひところは水しぶきが78個浮いていました。

水に落ちて沈んだ面積の分だけ浮かび上がる文字
新しいタブで開く

05 · 水に落ちて沈んだ面積の分だけ浮かび上がる文字 — 計測 累積面積 27.119% · 動いたフレーム 22/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

WATER_DENSITYWAVE_SPREADSPLASH_FORCE
    function stepWater() {
        for (let k = 0; k < COLS; k += 1) {
            colV[k] += -WAVE_K * colH[k] - WAVE_DAMP * colV[k];
            colH[k] += colV[k];
        }
        // 隣への広がり — 二回回して、波が1ティックで二本先の柱まで広がる
        for (let pass = 0; pass < 2; pass += 1) {
            const lD = [];
            const rD = [];
            for (let k = 0; k < COLS; k += 1) {
                lD.push(k > 0 ? WAVE_SPREAD * (colH[k] - colH[k - 1]) : 0);
                rD.push(k < COLS - 1 ? WAVE_SPREAD * (colH[k] - colH[k + 1]) : 0);
            }
            for (let k = 0; k < COLS; k += 1) {
                if (k > 0) {
                    colV[k - 1] += lD[k];
                    colH[k - 1] += lD[k];
                }
                if (k < COLS - 1) {
                    colV[k + 1] += rD[k];
                    colH[k + 1] += rD[k];
                }
            }
        }
    }

06強くぶつかると砕けて散る文字

四文字を高い場所と床の60px上から交互に落とすので、最初の衝突が1ティックあたり18.5・19.5pxの1文字目と3文字目は砕け、8.0pxの残り二つはしきい値9を下回って跳ねるだけです。かけらは初期化のときに文字を画面外のキャンバスに描き、画素ごとにいちばん近い種の点（12個）の番号を付けて分けた面で、割れるときにはかけらの中心が文字の中心からずれた向きへ衝突の速さに比例して飛びます。種は12個ですが、初期化のときに分けておいたかけらは1文字目が10個、4文字目が11個で、いちばん速いかけらの回転は上限0.32の内側の1ティックあたり0.299radでした。

強くぶつかると砕けて散る文字
新しいタブで開く

06 · 強くぶつかると砕けて散る文字 — 計測 累積面積 21.919% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

SHARD_COUNTIMPACT_SPEEDSHARD_SPIN
        const src = octx.getImageData(0, 0, side, side);
        const rng = makeRng(seed);
        const seeds = [];
        for (let k = 0; k < SHARD_COUNT; k += 1) {
            seeds.push([side / 2 + (rng() - 0.5) * g.w * SHARD_SCALE, side / 2 + (rng() - 0.5) * g.h * SHARD_SCALE]);
        }
        const label = new Int16Array(side * side).fill(-1);
        const box = [];
        for (let k = 0; k < SHARD_COUNT; k += 1) {
            box.push([side, side, -1, -1]);
        }

        for (let y = 0; y < side; y += 1) {
            for (let x = 0; x < side; x += 1) {
                const p = y * side + x;
                if (src.data[p * 4 + 3] < 8) {
                    continue;
                }
                let best = 0;
                let bd = 1e12;
                for (let k = 0; k < SHARD_COUNT; k += 1) {
                    const dx = x - seeds[k][0];
                    const dy = y - seeds[k][1];
                    const d = dx * dx + dy * dy;
                    if (d < bd) {
                        bd = d;
                        best = k;
                    }
                }
                label[p] = best;

07傾く箱の中で片側へ寄っていく文字

韓国語版では六つのマスが最大28°で左右に揺れる箱の中を低いほうへ滑って寄り、反対に傾くとまた向こう側へ渡ります。箱を回すかわりに箱の中から見た重力を横0.42 sin θ・縦0.42 cos θに回し、重なった二つのマスはめり込みの浅い軸で深さの0.5倍を半分ずつ分けて4回繰り返し押し出し、摩擦は繰り返しが全部終わってからティックごとに一回だけ掛けます。マスの横の平均は傾き25.9°で69.4px、−25.9°で−56.7pxまで動き、最初に壁に着いたのは960ms、最後に残った重なりは最大0.28pxでした。

傾く箱の中で片側へ寄っていく文字
新しいタブで開く

07 · 傾く箱の中で片側へ寄っていく文字 — 計測 累積面積 26.91% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

TILT_ANGLE_MAXCOLLISION_PUSHSLIDE_FRICTION
    function step() {
        tilt = tiltNow();
        const th = tilt * DEG;
        // 箱の中から見た重力 — 世界の下向きを箱の角度の分だけ逆に回す
        const gx = TILE_GRAVITY * Math.sin(th);
        const gy = TILE_GRAVITY * Math.cos(th);
        for (let i = 0; i < tiles.length; i += 1) {
            const t = tiles[i];
            t.floor = false;
            t.wall = false;
            t.vx += gx;
            t.vy += gy;
            t.x += t.vx;
            t.y += t.vy;
        }
        for (let it = 0; it < PUSH_ITERATIONS; it += 1) {
            for (let i = 0; i < tiles.length; i += 1) {
                for (let j = i + 1; j < tiles.length; j += 1) {
                    pushApart(tiles[i], tiles[j]);
                }
            }
            for (let i = 0; i < tiles.length; i += 1) {
                keepInBox(tiles[i]);
            }
        }

        // 摩擦 — 押し出しを何回繰り返してもティックごとに一回だけ。床・下のマスに乗っていれば横の速さを、壁・横のマスに接していれば縦の速さを減らす
        for (let i = 0; i < tiles.length; i += 1) {
            const t = tiles[i];
            if (t.floor) {
                t.vx *= 1 - SLIDE_FRICTION;
            }
            if (t.wall) {
                t.vy *= 1 - SLIDE_FRICTION;
            }
        }
    }

08風に飛ばされ木の葉のように揺れて舞い降りる文字

韓国語版の四文字が高さごとに強さの違う風に押され、木の葉のように左右へ傾いては滑るのを繰り返しながら床に舞い降ります。風は高さ×0.011と時間×0.0006を値ノイズに入れて求め、抵抗は速さ×速度×0.02なので速いほど強くなり、傾きは横の速さの0.5倍を目標の角として遅れて追うので行き過ぎては戻ります。いちばん速い落下の1ティックあたり3.16pxは風がないときの終端速度√（0.2÷0.02）と一致し、傾きは最大69.2°、1文字目の横向きは10回入れ替わりました。

風に飛ばされ木の葉のように揺れて舞い降りる文字
新しいタブで開く

08 · 風に飛ばされ木の葉のように揺れて舞い降りる文字 — 計測 累積面積 22.611% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

WIND_STRENGTHDRAG_COEFFFLUTTER_RATE
    // 値ノイズ — 隣り合う二つの格子の値をなめらかな曲線でつなぐ
    function valueNoise(u) {
        const i = Math.floor(u);
        return lerp(latticeValue(i), latticeValue(i + 1), smooth(u - i));
    }
    function windAt(y, t) {
        return (valueNoise(y * WIND_SCALE_Y + t * WIND_SPEED) * 2 - 1 + WIND_BIAS) * WIND_STRENGTH;
    }

        const speed = Math.hypot(l.vx, l.vy);
        const ax = windAt(l.y, age) - DRAG_COEFF * speed * l.vx - Math.sin(l.a) * GLIDE * LEAF_GRAVITY;
        const ay = LEAF_GRAVITY - DRAG_COEFF * speed * l.vy;
        l.vx += ax;
        l.vy += ay;
        // 傾き — 横の速さに比例した目標の角度を遅れて追う(角速度に慣性があるので行き過ぎて戻る)
        l.w += (l.vx * FLUTTER_RATE - l.a) * TILT_FOLLOW - l.w * TILT_DAMPING;
        l.a += l.w;
        l.x += l.vx;
        l.y += l.vy;

09崩れ落ちてからまた一列に並び直すヒーロー見出し

見出しが208msで崩れて01と同じ箱の計算で床に散らばり、0.9秒後から文字の番号×45msずつ遅れて、読む順番どおりに元の位置へ戻ります。戻りは減衰を2√kに合わせたばね（kは0.03）なので元の位置より上へ行き過ぎることがなく、角度はいちばん近い一回転の位置に合わせるので、何回転もした文字もその分を巻き戻しません。崩れたときの行のずれは最大110.6px、1文字目の戻りは1,120msに始まり、五文字の平均のずれが0.5px以内に入って留まったのは1,984msでした。

崩れ落ちてからまた一列に並び直すヒーロー見出し
新しいタブで開く

09 · 崩れ落ちてからまた一列に並び直すヒーロー見出し — 計測 累積面積 26.865% · 動いたフレーム 20/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

ASSEMBLE_DELAYSETTLE_SPRINGLOOP_SECONDS
    function collapse() {
        const rng = makeRng(4729);
        fallAt = age;
        for (let i = 0; i < bodies.length; i += 1) {
            const b = bodies[i];
            b.free = true;
            b.vx = (rng() - 0.5) * 3;
            b.vy = -2 - rng() * 3;
            b.w = (rng() - 0.5) * 0.24;
        }
    }
    // 臨界減衰ばねの一歩 — 加速度 = -強さ x ずれた距離 - 2 x 平方根(強さ) x 速さ
    function springTo(v, x, target) {
        return v - SETTLE_SPRING * (x - target) - 2 * Math.sqrt(SETTLE_SPRING) * v;
    }

文字どうしがめり込む・タブを長く離れて戻る・字幅がばらばら — 積もった文字が壊れて崩れる場合

下の数字はヘッドレスのブラウザでソースの関数を直接呼び出して得た値で、どれも韓国語版の文字で測っています。実際に回していないものには「〜と考えられます」と書きました。

頂点だけを見る判定と、十字に交差した二つの箱

01の接点探しは、箱の頂点がほかの箱の中に入ったかどうかだけを見ます。二つの箱が十字の形に重なり、互いの頂点がひとつも相手の中に入らなければ、接点が見つかりません。並びは文字の横の位置を真ん中へ0.28倍に寄せ、傾きを±0.4radの内側に置いて、文字が頂点から互いの上に乗るように落としています。

1ティックを二回に分ける理由

重力を1.1に上げると、落ちる文字の縦の速さが1ティックで20pxを超えます。この速さで一度に動かすと箱の高さの半分近くを1ティックでめり込み、押し返す向きが反対になって文字がはじき飛ばされると考えられます。SUBSTEPSの2が1ティックを二つに分け、一度にめり込む深さを小さくしています。

重力を上げると長引く小さな震え

重力0.45で2,688msに止まっていた文字の山は、1.1では9,328msまで止まりませんでした。床に着く時刻は768msから576msに早まりましたが、上に乗った文字が大きな重さで下の文字を押し、小さな跳ね返りを長くやり取りした結果と考えられます。山の高さは77.1pxから73.7pxへ少し低くなりました。

タブを長く離れて戻ったとき

ほかのタブを見てから戻ると、そのあいだにたまった時間が何十秒あっても、1フレームで追いつくのは100ms、つまり6ステップだけです。そのため文字が一瞬で床まで飛び移らず、離れる前の姿勢から続けて落ちていきます。

幅がばらばらな英字の箱

韓国語と日本語の舞台は箱の幅がすべてそろっていますが、英語版はIの19.2pxとAの41.3pxが混ざります。細い箱は軽くて底の面が短いので山の上で倒れやすいと考えられ、大きさの0.34倍を最小の幅にしてあるのは、それより細い文字が棒のように薄くならないための工夫と考えられます。

節だけ増やした紐はゴムになる

02の節を6から14に増やし、合わせ直しを8回のままにすると、紐は2.57%ではなく15.77%まで伸びます。合わせ直し一回は隣り合う二点しか直さないので、節が多くなると、いちばん上の掛け具の固定が先端まで伝わる前にティックが終わるためと考えられます。空気の減衰を0にすると、この積分はエネルギーを失わず、揺れが収まらなくなると考えられます。

輪郭の点の平均を原点に置かなかったゼリー

03は、輪郭の点28個の平均を原点へ移してから元の形として使います。平均が0でないと形のばねが体全体をいつも一方へ引く力になり、作っている途中では、落ちていたゼリーの落ちる速さがそれ以上つかず、横へ流れていきました。UPRIGHT_PULLを0にすると、床に着く面が左右非対称な文字が転がって横にほぼ寝てしまうことも、描画で確かめています。

ばねがやわらかいと速さの差が消える

形のばねを0.45から0.16に下げると、1ティックあたり6.04pxでぶつかっても高さは0.603倍、13.2pxでも0.584倍で、どちらも下限の0.58に張りついてしまいます。つぶれ方で速さを伝えるには、下限に届く前にばねが踏ん張る必要があります。

画素のない場所に落ちた種

06の種12個は文字の箱の中にばらまくので、線が通らない空いた場所に落ちた種は画素をひとつも受け取れず、かけらになりません。かけらどうしはぶつからずに重なって積もり、分割は初期化のときの一回だけなので、文字の大きさを変えたらかけらを作り直す必要があります。

繰り返しの中に入れた摩擦

07を作ったとき、最初は摩擦を押し出しの繰り返しの中に置いたため1ティックで4回掛かってしまい、箱を大きく傾けてもマスがほとんど滑りませんでした。摩擦を繰り返しの外へ移し、床や壁に触れているあいだはティックごとに一回だけ×0.96を掛ける（1ティックで4%減速する）ようにすると、マスが傾きに合わせて渡り始めました。箱が速く回ってもマスには遠心力がなく重力の向きだけが変わるという点も、この近似の限界です。

角速度の減衰を下げると裏返る落ち葉

08の角速度の減衰を0.06から0.03に下げると、文字が逆さまに裏返るほど回り、今のソースで測った傾きは最大146.3°でした。抵抗が速さの二乗なので、DRAG_COEFFを半分にすると終端速度は√2倍に速くなると考えられます。

標本20点が作る0.05の階段

05の水の密度1.7なら、浮いている文字の理屈の上での沈み具合は1÷1.7＝0.588です。けれども沈み具合を標本20点で数えるため割合は0.05刻みでしか変わらず、長く置いたあとの五文字は0.50・0.75・0.75・0.55・0.50を示し、階段のあいだで細かく上下していると考えられます。900ティック（14,400ms）のうちで五文字がすべて水に入り、縦の速さが0.15を下回った瞬間は最後のティックで初めて現れたほど、波といっしょに長く揺れ続けます。

重なって通り抜ける戻りの文字

09で戻り始めた文字は衝突の計算から外れるので、まだ床にある文字を突き抜けて通ります。角度をいちばん近い一回転に合わせる行がなければ、崩れながら何回転もした文字がその分だけ巻き戻され、減衰を2√kより小さくすると元の位置を行き過ぎて揺れると考えられます。

見出しの文字を自分の言葉に替えて回せるように、九つの場面のバニラのファイルと、同じ計算を移したReact版をひとつの圧縮ファイルにまとめました。開くときのパスワードはf3yv8pu7です。

重力・跳ね返り・ばねの強さを変えると文字の山はどう変わるか

名前 値 感じ
重力を強める 01 GRAVITY 0.45 → 1.1 最初の文字が768msではなく576msで床に着いて強くぶつかり、いちばん速い回転も1ティックあたり16.7°から21.6°に増えます。積もった文字の小さな震えが長引き、山が止まるまで2,688msではなく9,328msかかります
紐の節を増やす 02 ROPE_SEGMENTS 6 → 14 合わせ直しが8回のままなので紐の伸びが2.57%から15.77%に増え、紐がたるみます。最後の文字のいちばん大きな傾きも33.6°から39.1°になります
よける半径を広げる 04 REPEL_RADIUS 90 → 160 両端の文字も8.9pxではなく12.5pxよけ、真ん中の文字の40px上にポインターを止めると、隣の文字のずれが0.7pxから4.6pxに広がります。ポインターを消したあと一度外へ出てまた入り、最後まで元の位置に留まる時刻は624msから736msに遅れます

跳ね返りのほうは、01のRESTITUTION0.32が触れる直前の速さに掛ける割合なので、上げると山が積もる前に長く弾み続けると考えられます。ただし1ティックあたり1.2pxより遅い接触は跳ね返りの目標を0にするので、積もったあとのゆっくりした接触には跳ね返りが付きません。ばねの強さは03と09で意味が違います。03の0.45は形を保つ強さなので下げるほどつぶれが下限に張りつき、09の0.03は元の位置へ引く強さで、ソースが減衰を2 * Math.sqrt(SETTLE_SPRING)でいっしょに計算するため、上げれば減衰も大きくなって行の並び直しが速くなると考えられます。

落ちる文字も読めなければならない — スクリーンリーダー用の原文と動きを減らすアクセシビリティ

原文はマスごとに<p class="pc__sr" data-role="word">の一行にだけあります。この段落はclip-path: inset(50%)で1pxだけ残して画面から隠し、スクリーンリーダーだけが読みます。スクリプトが同じ文字を読んでキャンバスに一文字ずつ描くので、散らばった文字はアクセシビリティツリーに入りません。キャンバスのaria-labelは場面と操作だけを説明して原文を繰り返さないので、「つみかさね」が二度読まれることはありません。

キャンバスはtabindex="0"なのでキーボードでフォーカスが入り、フォーカスの枠はキャンバスにもボタンにもfocus-visibleで表示されます。状態の行はaria-live="off"で始まって実演の文言を読み上げず、最初の入力でpoliteに切り替わり、文言が変わったときだけ文字を書き換えます。スマートフォンではtouch-action: pan-yなので、キャンバスの上でも縦のスクロールが止まりません。

prefers-reduced-motionでreduceを選んだ画面ではrequestAnimationFrameのループを回さず、settle()が360ステップ（5,760ms分）を描かずに一度に計算して、落ち着いた結果だけを描きます。キャンバスを押したりキーを押したりしたあともafter()が同じ計算をやり直してその入力が生んだ最後の並びをすぐに見せ、タイマー（setTimeout）は九つのソースのどこにもありません。九つの場面はすべてmatchMediaにchangeのリスナーを付けているので、ページを開いたまま設定を変えても、次の瞬間からその方式で描きます。

時間に結びついた演出は別に止めます。04の仮のポインターは実演のときだけ回るのでreduceでは現れず、07の自動の傾きは16.8°で止まったまま残り、09が3.4秒ごとに自分でまた崩れる繰り返しもreduceでは回りません。02・03・05・07の状態の行は、このとき動きが落ち着いた結果を知らせる文言を出します。

物理で動く文字を見出しに載せるときによくある質問

舞台の文字を自分の言葉に替えるには、どこを直せばよいですか？

マスごとに隠してある<p data-role="word">の文字を替えるだけです。スクリプトは始まるときにこの文字を読んでlayoutWordで測り直すので、言葉が長ければ文字の大きさが同じ割合で縮み、舞台の幅に収まります。スクリーンリーダーも替えた言葉をそのまま読みます。

文字 アニメーション 作成に物理エンジンのライブラリは要りますか？

この編の九つの場面はライブラリ・物理エンジン・WebGL・CDNをひとつも使わず、ひとつのフォルダのindex.htmlひとつに計算が全部入っています。そのかわり、01は頂点の接点だけを見て、03は文字どうしがぶつからず、07はマスが回らない近似です。何十もの文字が互いにかみ合って転がる場面なら、そのときにエンジンを選ぶほうがよく、図形中心の物理の場面は物理シミュレーションの作り方9選で続けて見られます。

スマートフォンで重くなりませんか？

キャンバスの画素は端末のピクセル比を2倍までしか追わず、1ティックの計算は文字が数個、接点・輪郭の点・標本が数十個という程度です。計算が多いのは、06が始まるときに文字の画素ごとに種12個との距離を測る一度きりの分割と、03の輪郭を光線でなぞる処理で、どちらも初期化のときに一回だけです。端末ごとのフレームの処理時間は測っていないので、古いスマートフォンが対象なら実際に表示して確かめてください。文字を画素の粒にばらして散らすほうが気になるなら、文字をキャンバスのピクセルから作り直す9選もあわせて見てみてください。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。