Comment un économiseur d’écran rebondissant calcule les collisions

Un économiseur d’écrans convainquant est un petit problème de physique.
L’objet doit voyager à une vitesse constante, toucher les limites visibles
proprement, préserver le mouvement excédentaire après une collision, s’adapter
au redimensionnement, et compter un coin seulement lorsque les murs
horizontaux et verticaux sont atteints ensemble.

État minimal

Pour un objet rectangulaire, entreposer (x, y), vitesse
(vx, vy), largeur et hauteur de l’objet, largeur et hauteur du
port de vue. Si le coin supérieur gauche représente la position, les limites
valides sont:

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

Le badge doit entrer en collision par sa boîte visible, pas par un seul point
central. Changer la taille du badge modifie donc les valeurs maximum x et y.

Utiliser le temps écoulé, et non un taux d’image supposé

Le navigateur fournit un horodatage haute résolution à un
requestAnimationFrame
callback. Soustrayez l’horodatage précédent pour obtenir les millisecondes
écoulées et convertissez-le en secondes:

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

La vélocité est exprimée en pixels par seconde. Un écran de 60 Hz et un écran
de 144 Hz couvrent à peu près la même distance sur le même temps réel.
dt empêche un saut énorme si l’exécution reprend après le
débogage ou un cadre de premier plan bloqué. La page annule également sa
propre boucle quand caché plutôt que de se fier uniquement sur le throttling
du navigateur.

Refléter le dépassement à un mur

Un ensemble de mise en œuvre simple x à la frontière et aux
négations vx. Qui rejette la distance parcourue au-delà du mur et
rend le mouvement légèrement inégal. Reflétant le dépassement le préserve:

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

Appliquer la logique équivalente verticalement. Avec un pas de temps maximum
raisonnable, une réflexion par axe est normalement suffisante. Un moteur plus
général peut tourner alors qu’un très grand dépassement reste en dehors des
limites.

Qu’est-ce qui compte pour un coup de coin?

Lors d’une étape de simulation, enregistrer des booléens séparés pour une
collision horizontale et une collision verticale. Incrémenter le compteur
d’angle seulement lorsque les deux deviennent vrai dans cette même étape.
x === 0 && y === 0; l’étape de réflexion sait déjà qu’un
croisement s’est produit.

La probabilité d’un coup de coin dépend de la position de départ, du rapport
de vitesse et des dimensions. Un chemin discret répétant parfaitement peut
manquer les coins indéfiniment. Redimensionner ou changer la taille de l’objet
modifie le chemin, de sorte qu’un compteur devrait réinitialiser ou clairement
préserver sa sémantique.

Détails qui rendent la mise en œuvre polie

• Sur redimensionnement, serrer la position dans les nouvelles limites sans
  téléporter à un point aléatoire non lié.
• Changer la couleur de collision uniquement sur un événement mural réel, pas
  en continu de la position x/y.
• Gardez le rapport d’aspect sur mesure et rejetez les fichiers au-delà des
  limites de type et de taille documentées.
• Gardez les commandes de Pause et de Reset visibles prévisibles, et laissez
  Escape laisser plein écran.
• Respectez le mouvement réduit et arrêtez de rendre dans un onglet caché.
• Rapport de pixel du dispositif de fermeture pour Canvas travailler ainsi un
  téléphone haute densité n’alloue pas une surface excessive.

Essayez le comportement dans le
Économiseur d’écrans DVD en mouvement. Sa marque par défaut reste nette alors que les images locales
personnalisées ne quittent jamais l’appareil.

Références techniques

• MDN: requestAnimationFrame
• MDN: API plein écran
• MDN: Écran Wake Lock API

Choisir un vecteur de vitesse

Un curseur de vitesse représente normalement la magnitude, tandis que la
direction vient d’un vecteur normalisé. θ et vitesse
s:

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

Une direction exactement horizontale ou verticale n’explore jamais la surface
entière, de sorte que l’angle initial devrait éviter des valeurs trop proches
de plusieurs de 90 degrés. La randomisation de la vitesse x et y
indépendamment peut également produire un chemin presque plat si un composant
est minuscule. Générer un angle à partir d’une plage autorisée, puis dériver
les deux composants.

Le rapport entre la vitesse horizontale et verticale influence si le chemin se
répète. En géométrie continue idéale, un coin se produit lorsque les temps de
déplacement à une limite x et une limite y coïncident. Les dimensions Finite
et les étapes flottantes rendent l’égalité de position exacte peu fiable, ce
qui explique pourquoi les événements de collision, non pas coordonner
l’égalité, conduisent le compteur.

Gérer les grandes étapes du temps et les réflexions multiples

Le temps écoulé protège l’animation ordinaire, mais un moteur réutilisable
peut également gérer un objet traversant plus d’un mur pendant une grande
étape. Après avoir déplacé, il réfléchit à plusieurs reprises toute
coordination hors portée jusqu’à ce qu’elle se trouve dans les limites. La
boucle a besoin d’une limite d’itération stricte au cas où l’état mal formé
crée une plage impossible.

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

L’écran de production utilise un temps maximum prudent et pauses quand caché,
de sorte que les sauts multi-murs sont exceptionnels. Manipulation défensive
rend toujours la réinitialisation, les pauses de débogueur, et la
planification inhabituelle du navigateur plus sûr.

Les événements de collision peuvent être plus que orientés

Une fois que le moteur signale des coups horizontaux et verticaux, le rendeur
peut changer la couleur du badge, incrémenter des collisions totales, jouer un
son optionnel activé par l’utilisateur, ou mettre à jour le nombre de coins.
Ces effets secondaires doivent se produire une fois par événement.

Le son reste éteint par défaut et nécessite une interaction car les
restrictions de jeu automatique du navigateur et le confort de l’utilisateur
comptent. Les collisions rapides à très haute vitesse devraient être limitées
par le taux de sorte que les annonces de son et d’état ne deviennent pas
écrasantes.

Les pistes nécessitent un modèle de compensation volontaire

Un cadre croustillant efface tout le Canvas Un sentier recouvre le cadre
précédent avec un fond translucide avant de dessiner le prochain badge.
L’alpha inférieur conserve les marques plus longtemps. Parce que la longueur
perçue du sentier dépend également de la vitesse et de la vitesse du cadre, le
définir d’une manière qui reste visuellement stable et le désactiver sous un
mouvement réduit si l’effet est distrayant.

Sur l’animation DOM, un trail pourrait être un pool délimité d’éléments de
décoloration. Ne pas ajouter un nouveau noeud pour toujours; qui fuit la
mémoire et finit par nuire aux performances d’interaction.

Texte personnalisé et images modifier les limites de collision

La largeur du texte dépend de la police, du contenu, du poids et du rendu du
périphérique. Mesurez après la police disponible, ajoutez un rembourrage
intentionnel et recalculez le maximum de x/a. Limitez la longueur du texte
pour qu’il ne devienne pas plus large que le port de vue. Si le badge est plus
grand qu’une dimension, abaisser ou centrer le texte plutôt que de permettre
des limites négatives.

Une image locale doit être décodée avant que ses dimensions intrinsèques ne
soient fiables. ScreenOrbit accepte seulement PNG, JPEGet WebP dans les 5 Mo
et 4096 pixels par côté, vérifie les dimensions décodées, préserve le rapport
d’aspect et libère l’URL de l’objet temporaire. SVG et HTML plutôt que de
tenter de désinfecter le contenu local actif ou inattendu.

Redimensionner sans perdre l’objet

Lorsque le viewport change, calculez de nouvelles limites et conservez
l’emplacement relatif lorsque c’est possible:

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)

Ceci est plus lisse que de sélectionner une position aléatoire après chaque
changement de barre d’adresse mobile ou événement d’orientation. Une
redimensionnement n’est pas une collision et ne devrait pas incrémenter des
compteurs ou changer de couleur.

Canvas pixels et CSS géométrie

CSS les dimensions définissent les limites de mouvement. Canvas le tampon de
support peut être plus grand pour un affichage haute densité: multiplier par
un rapport de pixel de périphérique cappé et d’écheller le contexte de dessin
ainsi les coordonnées restent dans CSS sans l’échelle, la physique et le rendu
utilisent différentes unités ; sans le capuchon, un téléphone 4× peut
attribuer seize fois la zone du pixel.

Pour une image ou un objet texte qui peut être représenté comme HTML,
l’animation DOM basée sur la transformation est également possible. Canvas
donne une composition prévisible de la scène et encore exporter, tandis que
DOM peut offrir une sémantique plus simple. Le choix ne change pas le besoin
de mouvement à temps écoulé et de nettoyage du cycle de vie.

Pause, visibilité et cycle de vie en plein écran

Maintenez un identifiant de boucle d’animation. Le démarrage en cours ne doit
pas planifier une seconde boucle. Pause annule le callback en attente et
enregistre l’état ; recap établit un nouveau horodatage précédent afin que la
durée cachée ne soit pas traitée comme un mouvement. Le gestionnaire de
visibilité suit la même règle.

Fullscreen est un état de présentation, pas une exigence d’animation. Une
requête Fullscreen rejetée ou non prise en charge devrait laisser le travail
d’aperçu intégré. À la sortie, recalculer les limites après que le port de vue
se règle. Wake Lock est demandé séparément et publié lorsque la page est
cachée; échec ne bloque jamais l’animation.

Testez le moteur, pas seulement un essai attrayant

• Coups directs sur les murs de gauche, droite, haut et bas
• collision simultanée x/y et incrément d’un angle
• Impacts du près du cône qui se produisent dans les étapes adjacentes et ne
  comptent pas
• Dépasser la réflexion en préservant la distance et le signe
• Les séquences d’horodatage 60, 120 et 144 Hz produisent des déplacements
  égaux sur un temps égal
• Un long intervalle interrompu suivi d’un CV sans téléportation
• Redimensionner en plus petite position et en plus petite taille que l’objet
  choisi
• Rejet d’image locale par type, taille d’octet, dimensions décodées et
  décodage échoué
• Cycles de réinitialisation/démarrage répétés avec un callback actif et
  aucune URL d’objet conservée
• Réduit la motion, pause clavier, déni en plein écran, et comportement de tab
  caché

Les tests automatisés couvrent les transitions arithmétiques et d’état;
Playwright couvre le cycle de vie du navigateur et la géométrie réactive.
Canvas taille, mémoire et nombre de boucles restent stables.

Accessibilité au-delà de la réduction des mouvements

Les comptes de collision ne doivent pas être annoncés sur chaque clic sur un
lecteur d’écran; cela créerait un bavardage inutilisable. Les annonces d’état
sont réservées pour des changements de contrôle significatifs. Les cibles
tactiles restent au moins 44 par 44 CSS pixels, et l’aperçu intégré ne vole
pas l’opération clavier des commandes environnantes.

Pourquoi un coin peut prendre si longtemps

Dans un rectangle parfaitement déterministe, la position et la vitesse peuvent
produire une orbite répétée. Selon le rapport de la largeur de déplacement
efficace aux composantes de la hauteur et de la vitesse, cette orbite peut
rencontrer un coin rapidement, seulement après de nombreux rebonds, ou pas du
tout dans le temps pratique.

La rareté fait partie de l’appel. Le compteur est un enregistrement
d’événement honnête, pas un chronomètre conçu pour fabriquer un coin. La
réinitialisation fait connaître l’état de départ; il ne promet pas un succès.

Utilisez cette page pour une tâche claire

Expliquez le moment du cadre, la collision murale, le redimensionnement et
les règles de coin derrière la scène de rebondissement. Les développeurs
Web, les étudiants, les streamers et les utilisateurs curieux utilisent ce
guide pour vérifier le comportement d’animation visible. Écrivez le résultat
dont vous avez besoin avant de suivre un lien ou de changer un réglage.

Lisez la page complète une fois avant d’agir lorsque la tâche implique un
test d’affichage, un nettoyage, une simulation, un droit de fichier, une
demande de confidentialité ou un rapport de support. Puis retournez à la
section exacte nécessaire pour le travail. Gardez les limites indiquées
visibles pendant que vous décidez de l’étape suivante.

Préparer un point de départ stable

Choisissez un viewport fixe, la taille du badge, la vitesse et le point de
départ avant de comparer les lancers. Enregistrer l’état de départ avant de
changer de contrôle, déplacer un appareil, soumettre un formulaire ou se
fier à un énoncé de politique. Utilisez le matériel source actuel et la
version de page actuelle pour tout examen officiel.

Séparer un symptôme visuel d’une revendication matérielle. Séparer une
simulation de navigateur d’un événement système. Séparer un fichier généré
du matériel tiers placé dans le fichier. Ces limites facilitent l’évaluation
des preuves. Le risque principal de la route est : Le mouvement du compte de
trame tourne à différentes vitesses sur les écrans 60 Hz et 120 Hz.

Suivre un processus pratique en quatre parties

1. Définissez l’objectif. Expliquez le moment du cadre, la
   collision au mur, le redimensionnement et les règles de coin-hit derrière
   la scène de rebondissement. Arrêtez si la tâche se transforme en un
   problème différent.
2. Capturez la base. Enregistrez la taille du port de vue,
   le rapport de pixel du périphérique, le temps écoulé, la position, la
   vitesse, le nombre de collisions et l’événement redimensionné. Utilisez
   les valeurs exactes et les noms là où elles existent.
3. Vérifiez le risque principal. Le mouvement du nombre de
   trames tourne à différentes vitesses sur les écrans 60 Hz et 120 Hz.
   Corriger la configuration avant de répéter l’étape.
4. Choisissez la prochaine action. Ouvrez le DVD
   Screensaver, changez un contrôle et comparez le compteur en direct avec
   les formules du guide. Gardez l’enregistrement original pour comparaison.

Construisez des preuves qu’une autre personne comprend

Enregistrez la taille du port de vue, le rapport de pixel de l’appareil, le
temps écoulé, la position, la vitesse, le nombre de collisions et
l’événement redimensionné. Ajoutez la date et l’URL de la page. Enlevez les
mots de passe, les adresses, les numéros de série, les données de paiement,
les messages privés et les journaux confidentiels avant de partager une
capture d’écran ou un rapport.

Pour une comparaison, répétez le même ordre et maintenez chaque variable non
liée stable. Pour une question de politique ou de droits, cisez le fichier
ou la clause exact dans vos propres mots et liez la source. Pour un bug,
incluez le comportement attendu, le comportement observé et le plus petit
chemin de reproduction fiable. Cette route vous demande d’enregistrer :
Taille de l’enregistrement de l’affichage, rapport de pixel de périphérique,
temps écoulé, position, vitesse, nombre de collisions et événement
redimensionné.

Éviter les éléments de preuve faibles et les allégations peu claires

• Le mouvement du nombre de trames tourne à différentes vitesses sur les
  écrans 60 Hz et 120 Hz.
• Une animation de navigateur démontre la géométrie et le timing. La page ne
  modélise pas la friction physique ou l’impact.
• Évitez plusieurs changements de réglage entre la base et le résultat.
  Préparation de cette route : Choisissez un viewport fixe, la taille du
  badge, la vitesse et le point de départ avant de comparer les parcours.
• Évitez une revendication privée ou spécifique au modèle sans source
  primaire actuelle. La limite de page est : Une animation de navigateur
  démontre la géométrie et le timing. La page ne modélise pas la friction
  physique ou l’impact.
• Évitez les données privées dans les captures d’écran publiques, les liens,
  les exemples et les messages de soutien. La preuve utile est: Taille de
  l’enregistrement de la vue, rapport de pixel de périphérique, temps
  écoulé, position, vitesse, nombre de collisions, et événement
  redimensionné.
• Évitez de traiter un résultat de recherche, une image de caméra ou un
  commentaire de forum comme une preuve finale. Le risque principal est : Le
  mouvement de la trame-compte tourne à différentes vitesses sur les écrans
  60 Hz et 120 Hz.

Passer à la prochaine action utile

Ouvrez le logiciel DVD Screensaver, changez un contrôle et comparez le
compteur en direct avec les formules du guide. Gardez la base de référence
et la limite de page à côté du résultat. ScreenOrbit éditeur lorsque la
décision n’est pas dans la portée de la page.