Bagaimana Screensaver Memantul Menghitung Tabrakan

Screensaver memantul yang meyakinkan adalah masalah fisika kecil. Objek harus bergerak dengan kecepatan yang konsisten, menyentuh batas yang terlihat dengan jelas, mempertahankan gerakan berlebih setelah tumbukan, beradaptasi dengan perubahan ukuran, dan menghitung sudut hanya ketika dinding horizontal dan vertikal tercapai bersamaan. Mengikat gerakan ke “piksel per frame” gagal segera setelah kecepatan refresh atau beban kerja browser berubah.

Keadaan minimal

Untuk benda persegi panjang, simpan posisinya (x, y), kecepatan (vx, vy), lebar dan tinggi objek, serta lebar dan tinggi area pandang. Jika pojok kiri atas mewakili posisi, batas yang valid adalah:

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

Lencana harus bertabrakan dengan kotaknya yang terlihat, bukan pada satu titik tengah. Oleh karena itu, mengubah ukuran lencana akan mengubah nilai x dan y maksimum.

Gunakan waktu yang berlalu, bukan kecepatan bingkai yang diasumsikan

Browser menyediakan stempel waktu resolusi tinggi ke a requestAnimationFrame panggilan balik. Kurangi stempel waktu sebelumnya untuk mendapatkan milidetik yang telah berlalu dan ubah menjadi detik:

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

Kecepatan dinyatakan dalam piksel per detik. Layar 60 Hz dan layar 144 Hz kemudian mencakup jarak yang kira-kira sama dalam waktu nyata yang sama. Menjepit dt mencegah lompatan besar jika eksekusi dilanjutkan setelah proses debug atau bingkai latar depan terhenti. Halaman tersebut juga membatalkan loopnya sendiri ketika disembunyikan daripada hanya mengandalkan pembatasan browser.

Refleksikan overshoot pada dinding

Sebuah set implementasi sederhana x ke batas dan meniadakan vx. Hal ini menghilangkan jarak yang ditempuh melewati dinding dan membuat gerakan sedikit tidak merata. Mencerminkan overshoot akan mempertahankannya:

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

Terapkan logika yang setara secara vertikal. Dengan langkah waktu maksimum yang masuk akal, satu refleksi per sumbu biasanya sudah cukup. Mesin yang lebih umum dapat berputar sementara overshoot yang sangat besar tetap berada di luar batas.

Apa yang dianggap sebagai tendangan sudut?

Selama satu langkah simulasi, catat boolean terpisah untuk tumbukan horizontal dan tumbukan vertikal. Tambahkan penghitung sudut hanya jika keduanya menjadi benar pada langkah yang sama. Jangan menguji kesetaraan floating-point seperti x === 0 && y === 0; langkah refleksi sudah mengetahui terjadi persilangan.

Kemungkinan terjadinya tendangan sudut bergantung pada posisi awal, rasio kecepatan, dan dimensi. Jalur diskrit yang berulang sempurna dapat melewati tikungan tanpa batas. Mengubah ukuran atau mengubah ukuran objek akan mengubah jalurnya, jadi penghitung harus mengatur ulang atau mempertahankan semantiknya dengan jelas.

Detail yang membuat implementasinya terasa halus

• Saat mengubah ukuran, jepit posisi ke dalam batas baru tanpa berteleportasi ke titik acak yang tidak terkait.
• Ubah warna tumbukan hanya pada kejadian dinding sebenarnya, tidak terus menerus dari posisi x/y.
• Pertahankan rasio aspek gambar khusus dan tolak file melebihi batas jenis dan ukuran yang terdokumentasi.
• Jaga agar kontrol Jeda dan Reset tetap terlihat dan dapat diprediksi, dan biarkan Escape keluar dari layar penuh.
• Hormati pengurangan gerakan dan hentikan rendering di tab tersembunyi.
• Batasi rasio piksel perangkat untuk Canvas berfungsi sehingga ponsel dengan kepadatan tinggi tidak mengalokasikan permukaan yang berlebihan.

Coba perilaku di Screensaver DVD Memantul. Tanda defaultnya tetap tajam sementara gambar lokal khusus tidak pernah keluar dari perangkat.

Referensi teknis

• MDN: permintaanAnimationFrame
• MDN: API Layar Penuh
• MDN: Layar Wake Lock API

Pilih vektor kecepatan

Penggeser kecepatan biasanya mewakili besaran, sedangkan arah berasal dari vektor yang dinormalisasi. Untuk suatu sudut θ dan kecepatan s:

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

Arah yang benar-benar horizontal atau vertikal tidak pernah mencakup seluruh permukaan, sehingga sudut awal harus menghindari nilai yang terlalu dekat dengan kelipatan 90 derajat. Mengacak kecepatan x dan y secara independen juga dapat menghasilkan jalur yang hampir datar jika salah satu komponennya kecil. Hasilkan sudut dari rentang yang diizinkan, lalu turunkan kedua komponen.

Rasio antara kecepatan horizontal dan vertikal mempengaruhi apakah lintasan tersebut berulang. Dalam geometri kontinu ideal, sudut terjadi ketika waktu tempuh ke batas x dan batas y bertepatan. Dimensi terbatas dan langkah floating-point membuat kesetaraan posisi yang tepat tidak dapat diandalkan, itulah sebabnya peristiwa tumbukan, bukan kesetaraan koordinat, mendorong penghitung.

Tangani langkah waktu yang besar dan banyak refleksi

Penjepitan waktu yang berlalu melindungi animasi biasa, namun mesin yang dapat digunakan kembali juga dapat menangani objek yang melintasi lebih dari satu dinding selama langkah besar. Setelah bergerak, berulang kali pantulkan koordinat di luar jangkauan hingga berada dalam batas. Perulangan memerlukan batas iterasi yang ketat jika kondisi format salah menciptakan rentang yang mustahil.

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 }
}

Layar produksi menggunakan langkah waktu maksimum yang konservatif dan berhenti saat disembunyikan, sehingga lompatan multi-dinding merupakan hal yang luar biasa. Penanganan defensif masih membuat pengaturan ulang, jeda debugger, dan penjadwalan browser yang tidak biasa menjadi lebih aman.

Peristiwa tabrakan mempunyai kekuatan lebih dari sekedar arah

Setelah mesin melaporkan pukulan horizontal dan vertikal, perender dapat mengubah warna lencana, menambah total tabrakan, memutar suara opsional yang diaktifkan pengguna, atau memperbarui jumlah sudut. Efek samping ini harus terjadi satu kali per kejadian. Mendapatkan warna secara terus-menerus dari posisi menciptakan efek gerakan pelangi dan tidak lagi mengkomunikasikan tabrakan.

Suara tetap mati secara default dan memerlukan interaksi karena pembatasan putar otomatis browser dan kenyamanan pengguna penting. Tabrakan cepat dengan kecepatan sangat tinggi harus dibatasi lajunya sehingga pengumuman suara dan status tidak berlebihan.

Jalur memerlukan model pembersihan yang disengaja

Bingkai yang tajam membersihkan keseluruhannya Canvas dan menggambar satu lencana. Jejak malah menutupi bingkai sebelumnya dengan latar belakang transparan sebelum menggambar lencana berikutnya. Alfa yang lebih rendah mempertahankan tanda lebih lama. Karena panjang jejak yang dirasakan juga bergantung pada kecepatan dan kecepatan bingkai, tentukan dengan cara yang tetap stabil secara visual dan nonaktifkan dengan pengurangan gerakan jika efeknya mengganggu.

Pada animasi berbasis DOM, jejak mungkin berupa kumpulan elemen fading yang dibatasi. Jangan menambahkan node baru selamanya; yang membocorkan memori dan pada akhirnya merusak kinerja interaksi.

Teks dan gambar khusus mengubah batas tabrakan

Lebar teks bergantung pada font, konten, berat, dan rendering perangkat. Ukur setelah font tersedia, tambahkan padding yang disengaja, dan hitung ulang x/y maksimum. Batasi panjang teks agar tidak lebih lebar dari area pandang. Jika lencana lebih besar dari suatu dimensi, turunkan atau pusatkan lencana tersebut daripada mengizinkan batas negatif.

Citra lokal harus didekodekan sebelum dimensi intrinsiknya dapat dipercaya. ScreenOrbit hanya menerima PNG, JPEG, dan WebP dalam 5 MB dan 4096 piksel per sisi, memeriksa dimensi yang didekodekan, mempertahankan rasio aspek, dan melepaskan URL objek sementara. Ia menolak SVG dan HTML daripada mencoba membersihkan konten lokal yang aktif atau kompleks secara tidak terduga.

Ubah ukuran tanpa kehilangan objek

Saat area pandang berubah, hitung batas baru dan pertahankan lokasi relatif jika memungkinkan:

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)

Ini lebih lancar daripada memilih posisi acak setelah setiap perubahan bilah alamat seluler atau peristiwa orientasi. Pengubahan ukuran bukanlah suatu tabrakan dan tidak boleh menambah penghitung atau mengubah warna.

Canvas piksel dan CSS geometri

CSS dimensi menentukan batas pergerakan. Itu Canvas buffer pendukung bisa lebih besar untuk tampilan dengan kepadatan tinggi: kalikan dengan rasio piksel perangkat yang dibatasi dan skalakan konteks gambar sehingga koordinat tetap ada CSS unit. Tanpa skala, fisika dan rendering menggunakan satuan yang berbeda; tanpa tutup, a 4× telepon dapat mengalokasikan enam belas kali luas piksel.

Untuk gambar atau objek teks yang dapat direpresentasikan sebagai HTML, animasi DOM berbasis transformasi juga dimungkinkan. Canvas memberikan komposisi adegan yang dapat diprediksi dan tetap mengekspor, sementara DOM mungkin menawarkan semantik yang lebih sederhana. Pilihan ini tidak mengubah kebutuhan pergerakan waktu yang telah berlalu dan pembersihan siklus hidup.

Jeda, visibilitas, dan siklus hidup layar penuh

Pertahankan satu pengidentifikasi loop animasi. Memulai saat sudah berjalan tidak boleh menjadwalkan putaran kedua. Jeda membatalkan panggilan balik yang tertunda dan mencatat status; resume menetapkan stempel waktu baru sebelumnya sehingga durasi tersembunyi tidak dianggap sebagai perpindahan. Pengendali visibilitas mengikuti aturan yang sama.

Layar penuh adalah status presentasi, bukan persyaratan animasi. Permintaan layar penuh yang ditolak atau tidak didukung akan membuat pratinjau tersemat tetap berfungsi. Saat keluar, hitung ulang batas setelah area pandang selesai. Wake Lock diminta secara terpisah dan dilepaskan saat halaman disembunyikan; kegagalan tidak pernah menghalangi animasi.

Uji mesinnya, bukan hanya satu putaran yang menarik

• Pukulan langsung ke dinding kiri, kanan, atas, dan bawah
• Tumbukan x/y serentak dan kenaikan satu sudut
• Dampak dekat sudut yang terjadi pada anak tangga yang berdekatan dan tidak dihitung
• Refleksi melampaui batas menjaga jarak dan tanda
• Urutan stempel waktu 60, 120, dan 144 Hz menghasilkan perjalanan yang sama dalam waktu yang sama
• Interval jeda yang lama diikuti dengan melanjutkan tanpa teleportasi
• Ubah ukurannya menjadi lebih kecil dari posisi saat ini dan lebih kecil dari objek yang dipilih
• Penolakan gambar lokal berdasarkan jenis, ukuran byte, dimensi yang didekodekan, dan dekode yang gagal
• Siklus reset/mulai berulang dengan satu panggilan balik aktif dan tidak ada URL objek yang dipertahankan
• Pengurangan gerakan, jeda keyboard, penolakan layar penuh, dan perilaku tab tersembunyi

Tes otomatis mencakup transisi aritmatika dan keadaan; Penulis naskah mencakup siklus hidup browser dan geometri responsif. Stabilitas manual selama tiga puluh menit memeriksa hal itu Canvas ukuran, memori, dan jumlah loop tetap stabil.

Aksesibilitas melampaui pengurangan pergerakan

Jeda, Reset, dan Layar Penuh memerlukan fokus keyboard dan label teks yang terlihat dalam tampilan halaman normal. Jumlah tabrakan tidak boleh diumumkan pada setiap hit ke pembaca layar; itu akan menciptakan obrolan yang tidak dapat digunakan. Pengumuman status dicadangkan untuk perubahan kontrol yang berarti. Target sentuh tetap berukuran setidaknya 44 kali 44 CSS piksel, dan pratinjau yang tertanam tidak mencuri pengoperasian keyboard dari kontrol di sekitarnya.

Mengapa tendangan sudut bisa memakan waktu lama

Dalam persegi panjang deterministik sempurna, posisi dan kecepatan dapat menghasilkan orbit yang berulang. Bergantung pada rasio lebar perjalanan efektif terhadap tinggi dan komponen kecepatan, orbit tersebut mungkin akan berbelok dengan cepat, hanya setelah banyak memantul, atau tidak sama sekali dalam waktu praktis. Pembulatan piksel, pengubahan ukuran, perubahan ukuran lencana, dan penyesuaian kecepatan mengubah jalur.

Kelangkaan adalah bagian dari daya tariknya. Penghitung adalah catatan kejadian yang jujur, bukan pengatur waktu yang dirancang untuk menghasilkan tendangan sudut. Reset membuat keadaan awal diketahui; itu tidak menjanjikan kesuksesan.

Gunakan halaman ini untuk satu tugas yang jelas

Jelaskan pengaturan waktu bingkai, tabrakan dinding, pengubahan ukuran, dan aturan pukulan sudut di balik adegan yang memantul. Pengembang web, pelajar, streamer, dan pengguna yang penasaran menggunakan panduan ini untuk memverifikasi perilaku animasi yang terlihat. Tuliskan hasil yang Anda perlukan sebelum Anda mengikuti tautan atau mengubah pengaturan. Sasaran yang sempit menghemat waktu dan membuat keputusan akhir tetap terikat pada bukti.

Baca satu halaman penuh satu kali sebelum bertindak ketika tugas tersebut melibatkan pengujian tampilan, langkah pembersihan, simulasi, hak file, permintaan privasi, atau laporan dukungan. Kemudian kembali ke bagian yang diperlukan untuk pekerjaan itu. Jaga agar batasan yang disebutkan tetap terlihat saat Anda memutuskan langkah berikutnya. Rute ini berfokus pada: Menjelaskan pengaturan waktu bingkai, tabrakan dinding, pengubahan ukuran, dan aturan pukulan sudut di balik adegan yang memantul.

Siapkan titik awal yang stabil

Pilih area pandang tetap, ukuran badge, kecepatan, dan titik awal sebelum membandingkan proses. Catat status awal sebelum Anda mengubah kontrol, memindahkan perangkat, mengirimkan formulir, atau mengandalkan pernyataan kebijakan. Gunakan materi sumber terkini dan versi halaman terkini untuk tinjauan formal apa pun.

Simpan satu terbitan per sesi atau pesan. Pisahkan gejala visual dari klaim perangkat keras. Pisahkan simulasi browser dari kejadian sistem. Pisahkan file yang dihasilkan dari materi pihak ketiga yang ditempatkan di dalam file. Batasan ini membuat bukti lebih mudah untuk dinilai. Risiko rute utama adalah: Gerakan jumlah bingkai berjalan pada kecepatan berbeda pada tampilan 60 Hz dan 120 Hz.

Ikuti proses praktis yang terdiri dari empat bagian

1. Tentukan tujuannya. Jelaskan pengaturan waktu bingkai, tabrakan dinding, pengubahan ukuran, dan aturan pukulan sudut di balik adegan yang memantul. Hentikan jika tugas berubah menjadi masalah lain.
2. Tangkap garis dasarnya. Rekam ukuran area pandang, rasio piksel perangkat, waktu yang berlalu, posisi, kecepatan, jumlah tabrakan, dan peristiwa pengubahan ukuran. Gunakan nilai dan nama yang tepat jika ada.
3. Periksa risiko utama. Gerakan penghitungan bingkai berjalan pada kecepatan berbeda pada tampilan 60 Hz dan 120 Hz. Perbaiki pengaturan sebelum mengulangi langkah tersebut.
4. Pilih tindakan selanjutnya. Buka DVD Screensaver, ubah satu kontrol, dan bandingkan penghitung langsung dengan rumus di panduan. Simpan catatan asli untuk perbandingan.

Bangun bukti yang dipahami orang lain

Rekam ukuran area pandang, rasio piksel perangkat, waktu yang berlalu, posisi, kecepatan, jumlah tabrakan, dan peristiwa pengubahan ukuran. Tambahkan tanggal dan URL halaman. Hapus kata sandi, alamat, nomor seri, data pembayaran, pesan pribadi, dan log rahasia sebelum membagikan tangkapan layar atau laporan. Urutan tulisan pendek sering kali membawa nilai lebih dari satu foto jarak dekat.

Sebagai perbandingan, ulangi urutan yang sama dan jaga agar setiap variabel yang tidak terkait tetap stabil. Untuk pertanyaan tentang kebijakan atau hak, kutip file atau klausul yang sebenarnya dengan kata-kata Anda sendiri dan tautkan sumbernya. Untuk bug, sertakan perilaku yang diharapkan, perilaku yang diamati, dan jalur reproduksi terkecil yang dapat diandalkan. Rute ini meminta Anda untuk mencatat: Merekam ukuran area pandang, rasio piksel perangkat, waktu yang berlalu, posisi, kecepatan, jumlah tabrakan, dan peristiwa pengubahan ukuran.

Hindari bukti yang lemah dan klaim yang tidak jelas

• Gerakan penghitungan bingkai berjalan pada kecepatan berbeda pada tampilan 60 Hz dan 120 Hz.
• Animasi browser menunjukkan geometri dan pengaturan waktu. Halaman ini tidak memodelkan gesekan atau benturan fisik.
• Hindari beberapa perubahan pengaturan antara garis dasar dan hasilnya. Persiapan untuk rute ini: Pilih area pandang tetap, ukuran lencana, kecepatan, dan titik awal sebelum membandingkan lintasan.
• Hindari klaim pribadi atau klaim khusus model tanpa sumber utama terkini. Batas halamannya adalah: Animasi browser menunjukkan geometri dan pengaturan waktu. Halaman ini tidak memodelkan gesekan atau benturan fisik.
• Hindari data pribadi di tangkapan layar publik, tautan, contoh, dan pesan dukungan. Bukti yang berguna adalah: Catat ukuran area pandang, rasio piksel perangkat, waktu yang berlalu, posisi, kecepatan, jumlah tabrakan, dan peristiwa pengubahan ukuran.
• Hindari menganggap hasil penelusuran, gambar kamera, atau komentar forum sebagai bukti akhir. Risiko utamanya adalah: Gerakan jumlah bingkai berjalan pada kecepatan berbeda pada tampilan 60 Hz dan 120 Hz.

Pindah ke tindakan bermanfaat berikutnya

Buka DVD Screensaver, ubah satu kontrol, dan bandingkan penghitung langsung dengan rumus di panduan. Pertahankan garis dasar dan batas halaman di samping hasil. Hubungi pembuat, penjual, platform, spesialis, pemegang hak, atau yang relevan ScreenOrbit editor ketika keputusan berada di luar cakupan halaman.