ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript でのスターフィールドの視覚化

JavaScript でのスターフィールドの視覚化

WBOY
WBOYオリジナル
2024-09-01 21:06:45570ブラウズ

Starfield visualization in JavaScript

これは、古典的な Windows 95 のスターフィールド スクリーンセーバーを彷彿とさせる視覚化のシンプルで直接的な実装です。

これはインタラクティブでもあります。画面にタッチしたり、加速度計を使用して動きの方向に影響を与えることができます。

これがその仕組みです:

  • それぞれがランダムな位置にパーティクルの束 (100 個) を作成します。
  • フレームごとに、各パーティクルを中心*から遠ざけます。パーティクルが中心から離れるほど、より目立つようになります。これにより、粒子が観察者に近づいている、または観察者が宇宙の奥へ進んでいるような錯覚を与えます。
  • 中心は実際には画面の中心ではなく、ユーザーがカーソルを動かしたりデバイスを傾けたりすることによって影響を受ける可能性のある可変点です。
  • パーティクルがビューの外に出たら、再び中心近くに配置します。これにより、視覚化が永続的に継続されます。

このブログ投稿では、コメントの多いソース コードを共有して、数行のコードと基本的な数学の知識で視覚的に魅力的なアニメーションを作成することがいかに簡単であるかを実証したいと思います。

実際のビジュアライゼーションを確認するには、ここをクリックしてください!

コードは次の Gist で入手できます:

以上がJavaScript でのスターフィールドの視覚化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。