Rumah > hujung hadapan web > tutorial js > Visualisasi Starfield dalam JavaScript

Visualisasi Starfield dalam JavaScript

WBOY
Lepaskan: 2024-09-01 21:06:45
asal
596 orang telah melayarinya

Starfield visualization in JavaScript

Ini adalah pelaksanaan visualisasi yang ringkas dan mudah yang mengingatkan pada penyelamat skrin medan bintang Windows 95 klasik.

Ia juga interaktif: anda boleh menyentuh skrin atau menggunakan pecutan untuk mempengaruhi arah pergerakan.

Beginilah ia berfungsi:

  • Buat sekumpulan zarah (100), setiap satu dalam kedudukan rawak.
  • Setiap bingkai, alihkan setiap zarah lebih jauh daripada tengah*. Semakin jauh zarah itu dari pusat, semakin kelihatan ia. Ini memberikan ilusi bahawa zarah bergerak lebih dekat kepada penonton atau penonton pergi lebih jauh ke angkasa lepas.
  • Pusat sebenarnya bukan bahagian tengah skrin, tetapi titik berubah-ubah yang boleh dipengaruhi oleh pengguna dengan menggerakkan kursor mereka atau mencondongkan peranti mereka.
  • Apabila zarah keluar dari pandangan, letakkannya berhampiran tengah sekali lagi, ini memastikan visualisasi berterusan selama-lamanya.

Dalam catatan blog ini, saya ingin berkongsi kod sumber yang banyak diulas untuk menunjukkan betapa mudahnya untuk mencipta animasi yang menarik secara visual dengan beberapa baris kod dan pengetahuan asas matematik.

Sila klik di sini untuk melihat visualisasi dalam tindakan!

Kod tersedia dalam Gist ini:

Atas ialah kandungan terperinci Visualisasi Starfield dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan