使い方
- 1 物理演算パーティクル&重力シミュレータを開き、処理する内容を入力、貼り付け、または選択します。
- 2 目的に合わせてオプションと出力形式を調整します。
- 3 結果を確認し、必要に応じてコピーまたはダウンロードします。
重力、弾力、摩擦、ジャイロ重力、マウス吸引をサポートする2D物理演算パーティクルシミュレータ。マスコットのアルパが物理粒子となって跳ね回ります!
画面内に光るネオン粒子を生成し、2D物理演算の美しさを体感できます。大きなアルパ粒子は重力と衝突物理に対応。マウスでドラッグして投げてみましょう。ぶつかった強さや重力モードに応じて表情や吹き出しがリアルタイムに変化します!
重力、弾力、摩擦、ジャイロ重力、マウス吸引をサポートする2D物理演算パーティクルシミュレータ。マスコットのアルパが物理粒子となって跳ね回ります!日常業務、開発、学習、簡易確認に利用できます。
このツールはブラウザで動作します。機密データを扱う前に、端末とブラウザの安全性を確認してください。
これはブラウザ上で動く 2D の物理サンドボックスで、Canvas を使って光るネオン粒子と大きなアルパのマスコット粒子をリアルタイムにシミュレーションします。重力や反発の強さを調整したり、重力モードを切り替えたり、アルパをつかんで投げ飛ばして、壁で跳ね返りながら周りの粒子をはじき飛ばす様子を眺めたりできます。ちょっとした気分転換にもなりますし、重力加速度や反発係数、簡単な衝突応答を体感で理解できる教材としても使えます。インストールは不要です。
「重力加速度」は 0〜1.5、「反発係数」は 0.1〜1.0 の範囲で調整できます。反発係数が高いほど、壁に当たったあとに残る速度が大きくなります。ただしシミュレーションにはわずかな空気抵抗もあるため、1.0 にしてもやがて動きは止まります。「粒子を発射 (+20)」を押すと画面上部に 20 個の粒子が追加されます。粒子は最大 400 個まで保持され、それを超えると古いものから消えていきます。「すべてクリア」でまとめて消すこともできます。マウスや指でアルパを押さえたままドラッグし、離すと投げられます。
重力モードは 4 種類です。「標準下向き重力」は地球上と同じような重力です。「無重力浮遊」では重力がなくなり、マウスボタンを押している間、ポインターから約 300 ピクセル以内の粒子が引き寄せられます。「アルパブラックホール」ではアルパが画面中央へ引っ張られ、すべての粒子がアルパへ吸い寄せられます。吸引力は重力スライダーの値に比例するため、0 にすると吸引は起きません。「ジャイロセンサー連動」ではスマホを傾けた方向に重力が向き、iPhone では最初に許可を求められます。
スマホでも滑らかに動くよう、小さな粒子はアルパと画面の端にだけぶつかり、粒子同士では衝突しません。物理計算は毎秒 60 ステップの固定間隔で行うため、画面のリフレッシュレートが違っても速さは変わりません。パネルにはリアルタイムのフレームレート、粒子数、アルパの移動速度が表示されます。アルパが壁に強くぶつかると表情が変わり、短い効果音とともに火花がいくつか飛び散ります。粒子の後ろに残る光の尾は Canvas 上に描いた演出です。シミュレーションはすべてローカルで動作し、データを収集することはありません。
数百個の粒子をスマホでも滑らかに動かすため、サンドボックスでは粒子とアルパ、粒子と画面の端との衝突だけを計算しています。すべての粒子同士を判定すると計算量が粒子数の 2 乗で増え、すぐにカクついてしまうため、粒子同士はすり抜けるようにしています。
このモードには向きセンサーを搭載したスマホやタブレットが必要で、一般的なデスクトップやノートパソコンにはありません。iPhone や iPad ではこのモードに切り替えると「モーションと画面の向き」へのアクセス許可を求められるので、許可してください。以前に拒否した場合は、ページを再読み込みしてもう一度試してください。重力スライダーが 0 になっていないかも確認しましょう。
ブラックホールの吸引力は「重力加速度」スライダーの値を掛けて計算されるため、0 のときは吸引がまったく起きません。スライダーを右に動かすとアルパが画面中央に引き寄せられ、粒子もアルパへ吸い寄せられます。値が大きいほど吸引力は強くなります。
跳ね続けません。反発係数 1.0 は壁に当たったときに速度を失わないという意味ですが、サンドボックスにはわずかな空気抵抗があり、ステップごとに少しずつ減速するため、いずれは静止します。長く跳ねる様子を見たいときは、重力を少し弱めてみてください。
500×500 のキャンバスでアンカーを打ち、ベジェのハンドルをドラッグするだけで、SVG パスの d 属性と CSS clip-path: path() コードを即座に生成。ハートや星のテンプレート付き。
ウェブページのスクリーンショットをアップロードするだけで、macOS 風のウィンドウ枠、ドロップシャドウ、グラデーション背景を合成し、高解像度 PNG で書き出せます。
多層text-shadow、ネオン色、輝き半径、呼吸点滅アニメーションを設定し、CSSコードをコピーします。
ローカル画像を読み込み、ピクセル単位の精密拡大ルーペで色を抽出。HEX/RGB/HSLのコピーとWCAGコントラスト比の診断に対応。