バウンススクリーンセーバーが衝突を計算する方法

説得力のある跳ねるスクリーンセーバーは小さな物理的な問題です。オブジェクトは一定の速度で移動し、目に見える境界にきれいに接触し、衝突後に余分な動きを保持し、サイズ変更に適応し、水平の壁と垂直の壁が重なった場合にのみコーナーをカウントする必要があります。動きを「フレームあたりのピクセル数」に結び付けることは、リフレッシュ レートやブラウザのワークロードが変化するとすぐに失敗します。

最低限の状態

長方形オブジェクトの場合、位置を保存します (x, y)、速度 (vx, vy)、オブジェクトの幅と高さ、ビューポートの幅と高さ。左上隅が位置を表す場合、有効な境界は次のとおりです。

0 ≤ x ≤ viewportWidth  - objectWidth
0 ≤ y ≤ viewportHeight - objectHeight

バッジは、単一の中心点ではなく、表示されているボックスで衝突する必要があります。したがって、バッジのサイズを変更すると、x と y の最大値が変わります。

想定されるフレームレートではなく、経過時間を使用する

ブラウザは高解像度のタイムスタンプを requestAnimationFrame コールバック。以前のタイムスタンプを減算して経過ミリ秒を取得し、それを秒に変換します。

dt = min((now - previous) / 1000, maximumStep)
x  = x + vx * dt
y  = y + vy * dt

速度は 1 秒あたりのピクセル数で表されます。 60 Hz ディスプレイと 144 Hz ディスプレイは、同じリアルタイムでほぼ同じ距離をカバーします。クランピング dt デバッグ後に実行が再開された場合、または前景フレームが停止した場合に、大きなジャンプが発生するのを防ぎます。また、ページは、ブラウザーのスロットリングのみに依存するのではなく、非表示になったときに独自のループをキャンセルします。

壁でのオーバーシュートを反射する

単純な実装セット x 境界線と否定 vx。これにより、壁を越えて移動した距離が無視され、動きがわずかに不均一になります。オーバーシュートを反映すると、それが保存されます。

if (x < 0) {
  x = -x
  vx = abs(vx)
}
if (x > maxX) {
  x = maxX - (x - maxX)
  vx = -abs(vx)
}

同等のロジックを垂直方向に適用します。実用的な最大タイム ステップでは、通常、軸ごとに 1 回の反射で十分です。より一般的なエンジンは、非常に大きなオーバーシュートが境界外に残っている間にループする可能性があります。

コーナーヒットとは何ですか?

1 つのシミュレーション ステップ中に、水平衝突と垂直衝突のブール値を個別に記録します。同じステップで両方が true になった場合にのみ、コーナー カウンタをインクリメントします。次のような浮動小数点の等価性をテストしないでください。 x === 0 && y === 0;リフレクション ステップでは、交差が発生したことがすでにわかっています。

コーナーヒットの確率は、開始位置、速度比、および寸法によって異なります。完全に繰り返す離散パスでは、コーナーを無限に見逃してしまう可能性があります。オブジェクトのサイズを変更または変更するとパスが変更されるため、カウンターはリセットするか、そのセマンティクスを明確に保持する必要があります。

実装が洗練されていると感じさせる詳細

• サイズ変更時に、無関係なランダムな点にテレポートせずに、位置を新しい境界にクランプします。
• X/Y 位置から継続的にではなく、実際の壁イベントでのみ衝突カラーを変更します。
• カスタム画像のアスペクト比を維持し、文書化されたタイプとサイズの制限を超えるファイルを拒否します。
• 表示される一時停止とリセットのコントロールを予測可能な状態に保ち、エスケープを全画面のままにします。
• モーションの軽減を尊重し、非表示のタブでのレンダリングを停止します。
• デバイスのピクセル比率を制限する Canvas 高密度の電話機が過剰な表面を割り当てないように機能します。

での動作を試してください。 バウンス DVD スクリーンセーバー。デフォルトのマークは鮮明なままですが、カスタム ローカル イメージはデバイスから離れることはありません。

技術参考資料

• MDN: requestAnimationFrame
• MDN: フルスクリーン API
• MDN: 画面 Wake Lock API

速度ベクトルを選択してください

通常、速度スライダーは大きさを表し、方向は正規化されたベクトルから得られます。角度については θ そしてスピード s:

vx = cos(θ) * s
vy = sin(θ) * s

正確に水平または垂直の方向は表面全体を探索することはありません。そのため、初期角度は 90 度の倍数に近すぎる値を避ける必要があります。 1 つのコンポーネントが小さい場合、x 速度と y 速度を個別にランダム化すると、ほぼ平坦なパスを生成することもできます。許容範囲から角度を生成し、両方の成分を導出します。

水平速度と垂直速度の比率は、パスが繰り返されるかどうかに影響します。理想的な連続ジオメトリでは、x 境界と y 境界への移動時間が一致するときにコーナーが発生します。有限次元と浮動小数点ステップにより、正確な位置の等価性が信頼できなくなります。そのため、座標の等価性ではなく衝突イベントがカウンターを駆動します。

大きなタイムステップと複数の反射を処理する

経過時間をクランプすることで通常のアニメーションが保護されますが、再利用可能なエンジンは大きなステップ中に複数の壁を横切るオブジェクトも処理できます。移動後、範囲外の座標が範囲内に収まるまで繰り返し反射します。不正な状態によって不可能な範囲が作成される場合に備えて、ループには厳密な反復制限が必要です。

function reflect(position, velocity, maximum) {
  let hits = 0
  while ((position < 0 || position > maximum) && hits < 8) {
    if (position < 0) {
      position = -position
      velocity = Math.abs(velocity)
    } else {
      position = maximum - (position - maximum)
      velocity = -Math.abs(velocity)
    }
    hits++
  }
  return { position: clamp(position, 0, maximum), velocity, hits }
}

実稼働画面では控えめな最大タイム ステップが使用され、非表示になっているときに一時停止するため、複数の壁のジャンプは例外的です。防御的な処理により、リセット、デバッガの一時停止、および異常なブラウザのスケジューリングがより安全になります。

衝突イベントは方向性よりも大きな力を発揮します

エンジンが水平方向および垂直方向のヒットを報告すると、レンダラーはバッジの色を変更したり、衝突の総数を増やしたり、オプションでユーザーが有効にしたサウンドを再生したり、コーナー数を更新したりできます。これらの副作用はイベントごとに 1 回発生する必要があります。位置から継続的に色を導出すると、虹の動きの効果が作成され、衝突が伝わらなくなります。

ブラウザの自動再生制限とユーザーの快適さが重要であるため、サウンドはデフォルトではオフのままであり、操作が必要です。非常に高速での急速な衝突は、音やステータスのアナウンスが過大にならないようにレート制限する必要があります。

トレイルには意図的なクリアリングモデルが必要です

鮮明なフレームが全体をクリアにします。 Canvas そしてバッジを1つ引きます。代わりに、次のバッジを描画する前に、軌跡が半透明の背景で前のフレームを覆います。アルファが低いほど、マークがより長く保存されます。知覚される軌跡の長さは速度とフレーム レートにも依存するため、視覚的に安定した状態を保つ方法で定義し、効果が気を散らす場合は動きを減らして無効にします。

DOM ベースのアニメーションでは、トレイルはフェーディング要素の境界付きプールである可能性があります。新しいノードを永久に追加しないでください。これによりメモリがリークされ、最終的にはインタラクションのパフォーマンスに悪影響を及ぼします。

カスタムテキストと画像により衝突境界が変更される

テキストの幅は、フォント、コンテンツ、太さ、デバイスのレンダリングによって異なります。フォントが使用可能になった後に測定し、意図的なパディングを追加して、最大 x/y を再計算します。テキストの長さがビューポートよりも広くならないように制限します。バッジが寸法よりも大きい場合は、負の境界を許可するのではなく、縮小するか中央に配置します。

ローカル イメージは、その固有のサイズが信頼される前にデコードする必要があります。 ScreenOrbit だけを受け入れます PNG、 JPEG、そして WebP 5 MB および片面あたり 4096 ピクセル以内で、デコードされた寸法をチェックし、アスペクト比を保持し、一時オブジェクト URL を解放します。拒否します SVG そして HTML アクティブなローカル コンテンツや予想外に複雑なローカル コンテンツをサニタイズしようとするのではなく、

オブジェクトを失わずにサイズを変更する

ビューポートが変更されると、新しい境界を計算し、可能な場合は相対位置を保持します。

ratioX = oldMaxX > 0 ? x / oldMaxX : 0.5
ratioY = oldMaxY > 0 ? y / oldMaxY : 0.5
x = clamp(ratioX * newMaxX, 0, newMaxX)
y = clamp(ratioY * newMaxY, 0, newMaxY)

これは、モバイルのアドレス バーの変更や向きのイベントごとにランダムな位置を選択するよりもスムーズです。サイズ変更は衝突ではないため、カウンターを増やしたり、色を変更したりしないでください。

Canvas ピクセルと CSS 幾何学

CSS 寸法は移動範囲を定義します。の Canvas 高密度ディスプレイではバッキング バッファーを大きくすることができます。上限のあるデバイス ピクセル比を乗算し、座標が維持されるように描画コンテキストをスケールします。 CSS 単位。スケールがないと、物理演算とレンダリングでは異なる単位が使用されます。キャップなしの場合は 4× 携帯電話は 16 倍のピクセル領域を割り当てることができます。

次のように表現できる画像またはテキスト オブジェクトの場合 HTML、変換ベースの DOM アニメーションも可能です。 Canvas DOM はより単純なセマンティクスを提供する可能性がありますが、予測可能なシーン構成を提供してエクスポートすることもできます。この選択によって、経過時間の移動とライフサイクルのクリーンアップの必要性が変わることはありません。

一時停止、可視性、全画面表示のライフサイクル

1 つのアニメーション ループ識別子を維持します。すでに実行中の開始では、2 番目のループをスケジュールしてはなりません。一時停止は保留中のコールバックをキャンセルし、状態を記録します。再開では、新しい以前のタイムスタンプが確立されるため、非表示の継続時間は移動として扱われません。可視性ハンドラーも同じルールに従います。

フルスクリーンはプレゼンテーション状態であり、アニメーションの要件ではありません。拒否された、またはサポートされていない全画面リクエストでも、埋め込みプレビューは機能したままになります。終了時に、ビューポートが安定した後に境界を再計算します。 Wake Lock 個別にリクエストされ、ページが非表示になったときに解放されます。失敗してもアニメーションがブロックされることはありません。

魅力的な 1 回の実行だけでなく、エンジンをテストする

• 左右上下の壁への直撃
• X/Y 衝突と 1 つのコーナーの増分を同時に実行
• 隣接するステップで発生しカウントされないコーナー付近のインパクト
• 距離と符号を維持するオーバーシュート反射
• 60、120、および 144 Hz のタイムスタンプ シーケンスにより、等しい時間にわたって等しい移動量が生成されます。
• 長い一時停止の後にテレポートなしで再開する
• 現在の位置よりも小さく、選択したオブジェクトよりも小さくサイズを変更します
• タイプ、バイト サイズ、デコードされたサイズ、デコードの失敗によるローカル イメージの拒否
• 1 つのアクティブなコールバックを使用してリセット/開始サイクルを繰り返し、オブジェクト URL を保持しない
• モーションの縮小、キーボードの一時停止、全画面表示の拒否、および非表示のタブの動作

自動テストは、算術および状態遷移をカバーします。 Playwright は、ブラウザーのライフサイクルと応答性の高いジオメトリをカバーします。 30 分間の手動スタビリティ ランで次のことを確認します。 Canvas サイズ、メモリ、ループ数は安定しています。

動作の軽減を超えたアクセシビリティ

一時停止、リセット、および全画面表示には、通常のページ ビューで表示されるキーボード フォーカスとテキスト ラベルが必要です。衝突カウントは、スクリーン リーダーへのヒットごとに通知されるべきではありません。使用できないチャタリングが発生します。ステータスのアナウンスは、意味のある制御変更のために予約されています。タッチ ターゲットは少なくとも 44 x 44 のままです CSS 埋め込みプレビューは周囲のコントロールからキーボード操作を奪いません。

なぜコーナーにこれほど時間がかかるのか

完全に決定論的な長方形では、位置と速度によって繰り返しの軌道が生成されます。有効移動幅と高さの比率と速度成分に応じて、その軌道はすぐにコーナーに遭遇するか、何度もバウンドした後でのみコーナーに遭遇するか、実際の時間内にまったくコーナーに遭遇しない可能性があります。ピクセルの丸め、サイズ変更、バッジ サイズの変更、速度調整によりパスが変更されます。

希少性も魅力の一部です。カウンターは正直なイベント記録であり、コーナーを作るために設計されたタイマーではありません。リセットにより開始状態がわかります。ヒットを約束するものではありません。

このページは 1 つの明確なタスクに使用します

バウンスシーンの背後にあるフレームのタイミング、壁の衝突、サイズ変更、コーナーヒットのルールについて説明します。 Web 開発者、学生、ストリーマー、好奇心旺盛なユーザーは、このガイドを使用して、目に見えるアニメーションの動作を確認します。リンクをたどったり、設定を変更したりする前に、必要な結果を書き留めてください。目標が狭いと時間を節約でき、最終決定を証拠に結びつけることができます。

タスクに表示テスト、クリーニング手順、シミュレーション、ファイルの権利、プライバシー要求、またはサポート レポートが含まれる場合は、行動する前にページ全体を一度読んでください。その後、作業に必要な正確なセクションに戻ります。次のステップを決定する間、指定された制限を表示しておいてください。このルートでは、バウンス シーンの背後にあるフレーム タイミング、壁衝突、サイズ変更、コーナーヒット ルールの説明に焦点を当てます。

安定したスタート地点を準備する

実行を比較する前に、固定ビューポート、バッジ サイズ、速度、開始点を選択します。コントロールの変更、デバイスの移動、フォームの送信、またはポリシー ステートメントに依存する前に、開始状態を記録します。正式なレビューには、現在のソース資料と現在のページのバージョンを使用してください。

セッションまたはメッセージごとに 1 つの問題を保持します。視覚的な症状をハードウェアの主張から分離します。ブラウザーのシミュレーションをシステム イベントから分離します。生成されたファイルを、ファイル内に配置されたサードパーティのマテリアルから分離します。これらの境界により、証拠の評価が容易になります。主なルート リスクは次のとおりです。 フレームカウント モーションが 60 Hz と 120 Hz のディスプレイで異なる速度で実行されます。

実践的な 4 部構成のプロセスに従ってください

1. 目標を定義します。 バウンスシーンの背後にあるフレームのタイミング、壁の衝突、サイズ変更、コーナーヒットのルールについて説明します。タスクが別の問題に変化した場合は停止します。
2. ベースラインをキャプチャします。 ビューポート サイズ、デバイスのピクセル比、経過時間、位置、速度、衝突数、サイズ変更イベントを記録します。存在する場合は正確な値と名前を使用してください。
3. 主なリスクを確認してください。 フレームカウント モーションは、60 Hz と 120 Hz のディスプレイで異なる速度で実行されます。手順を繰り返す前に設定を修正してください。
4. 次のアクションを選択します。 DVD スクリーンセーバーを開き、コントロールを 1 つ変更し、ライブ カウンターをガイドの公式と比較します。比較のために元の記録を保管してください。

他の人が理解できる証拠を構築する

ビューポート サイズ、デバイスのピクセル比、経過時間、位置、速度、衝突数、サイズ変更イベントを記録します。日付とページの URL を追加します。スクリーンショットやレポートを共有する前に、パスワード、アドレス、シリアル番号、支払いデータ、プライベート メッセージ、機密ログを削除してください。短い文章のシーケンスは、多くの場合、1 枚の近くの写真よりも価値があります。

比較するには、同じ順序を繰り返し、無関係なすべての変数を安定させます。ポリシーや権利に関する質問については、正確なファイルまたは条項を自分の言葉で引用し、出典をリンクしてください。バグの場合は、予想される動作、観察された動作、および信頼できる最小の再現パスを含めます。このルートでは、ビューポート サイズ、デバイスのピクセル比、経過時間、位置、速度、衝突数、サイズ変更イベントを記録するように求められます。

弱い証拠や不明確な主張を避ける

• フレームカウント モーションは、60 Hz と 120 Hz のディスプレイで異なる速度で実行されます。
• ブラウザのアニメーションでジオメトリとタイミングを示します。このページでは物理的な摩擦や衝撃はモデル化されていません。
• ベースラインと結果の間で複数回の設定変更を避けてください。このルートの準備: 実行を比較する前に、固定ビューポート、バッジ サイズ、速度、開始点を選択します。
• 現在の一次情報源のないプライベートまたはモデル固有の主張は避けてください。ページ制限は次のとおりです。 ブラウザーのアニメーションは、ジオメトリとタイミングを示します。このページでは物理的な摩擦や衝撃はモデル化されていません。
• 公開されているスクリーンショット、リンク、例、サポート メッセージには個人データを含めないでください。有用な証拠は、ビューポート サイズ、デバイスのピクセル比、経過時間、位置、速度、衝突回数、およびサイズ変更イベントを記録することです。
• 検索結果、カメラ画像、フォーラムのコメントを最終証拠として扱うことは避けてください。主なリスクは次のとおりです。フレームカウント モーションは、60 Hz と 120 Hz のディスプレイで異なる速度で実行されます。

次の便利なアクションに移動します

DVD スクリーンセーバーを開き、コントロールを 1 つ変更し、ライブ カウンターをガイドの公式と比較します。結果の横にベースラインとページ制限を残しておきます。関連するメーカー、販売者、プラットフォーム、専門家、権利所有者、または ScreenOrbit 決定がページの範囲外にある場合は編集者。