パーティクルフィールド・ビジュアライザー

ランタイムの文脈を添えたパーティクルフィールド

この OpenDesign 公式の例は、Canvas 2D のパーティクルフィールド・ビジュアライザーを、コントラストの高い単一のグラフィックとして見せています。左上に白く大きな見出し「Compute off the main thread.」を置き、中央から右にかけて広い緑のパーティクルが広がります。点の初期化は Web Worker が行い、描画はメインスレッドが担当します。元の作品にユーザーが操作するコントロールはありません。

このパーティクルフィールドは、ありきたりな点の雲ではありません。点は丸みのあるリング状の塊に集まり、中央付近に暗い開口部ができます。この余白が非常に密な面の中に読み取りやすい焦点をつくり、均一なノイズではなく構造を観察できます。黒に近い背景に対するネオングリーンの点は、構成全体のスケールでもコントラストを保ちます。

技術的ビジュアルの用途

技術デモを、デバッグパネルではなく完成したビジュアルとして見せたいときに有効なデザインです。情報層を抑えているため、プレゼンテーション、ランディングページの合間、クリエイティブコーディングの学習など、フィールドが主役で実装用語は目に入るが控えめな場面に向いています。

下部の行には3種類の情報があります。「12,000」はパーティクル数、「postMessage」は転送方式、「121」は取得時のランタイム状態で「RENDER FPS」の上に表示されています。これらを隣り合わせでも別々に置くことで、シーンの規模、通信方式、ローカルの描画観測値を区別して読めます。一方で、ラベルは概念を説明するものの、各値の算出方法までは説明しません。

構成と読む順序

左上の見出しは大きく、2行に折り返されます。「Compute off the」と「main thread.」が最初の安定した読みの起点になります。その上の字間を空けた小さな「WORKER VISUALIZER」ラベルが主題を示します。この文字スケールは編集的で強い入口をつくりますが、見出しがフィールドの隣で縦横にかなりの領域を占めることにもなります。

元のコードは、均等に配分した角度と0.15から1.0までのランダムな半径で12,000個の点を初期化します。この内側の半径が中央の暗い部分の理由で、放射状の分布により多くの点がその周辺に集まります。Canvas 2D は、半透明の暗い塗り直しの上に小さな緑の四角形を描きます。下部の固定ラベルはパネルの外に置かれ、WebGL レンダラーや GPU ベンチマークを示唆することなくポスターのような構成を保ちます。

読み取れる関係

3つの統計は一貫した型を持ち、大きな値または語が、小さな大文字のラベルの上に置かれます。「12,000」と「121」は数値の観測値で、「postMessage」は文字による転送値です。同じ扱いにより一つのグループとして目に入りますが、値の種類が異なるため、意味はラベルで読み解く必要があります。

2つの転送経路と異なる動き

元のコードは2つの Worker 転送経路に対応しています。提供された非分離のプレビューでは、postMessage が初期位置を渡しますが step 関数は開始されないため、キャンバスの繰り返し描画はパーティクルシミュレーションが続いている証拠にはなりません。取得された 121 RENDER FPS の値はローカルの再描画の頻度の推定であり、パーティクルの更新頻度や比較性能ではありません。接続されたサービス、保存データ、本番デプロイ、科学的に検証されたパーティクルの力学は確認されていません。