Lissajous Curves
Un point lumineux parcourt une courbe de Lissajous 3 pour 4 et laisse une traînée arc-en-ciel de 500 points qui s'efface en queue, sur un canvas net en Retina.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
À chaque pas, le point est placé en x = sin(A·t), y = sin(B·t + π/2), avec A = 3 et B = 4 : c'est la figure qu'on voit sur un oscilloscope branché en mode XY sur deux sinus de fréquences 3 et 4. Elle se referme tous les 2π, soit 314 pas de 0,02, environ 5,2 s au rythme par défaut de 60 points par seconde. Le rythme est compté en temps écoulé (plafonné à 50 ms par image) : le tracé avance aussi vite sur un écran à 60 Hz qu'à 120 Hz.
Le script garde les 500 dernières positions. À chaque image, il efface 3 % de l'image précédente vers la transparence, puis redessine les 500 points en disques de 2 px : l'opacité monte de 0 pour le plus ancien à presque 1 pour le plus récent, et la teinte avance de 0,5° par point tout en tournant avec le temps. La figure est centrée et occupe 80 % de la plus petite demi-dimension de la zone : sur 800 × 300 px, elle tient dans un carré de 240 px.
La taille vient du canvas affiché (lue sur la zone, multipliée par devicePixelRatio) et un ResizeObserver la suit ; un changement de taille recommence la traînée au centre de la nouvelle zone. Tant que la zone mesure 0 px, rien ne tourne. Un IntersectionObserver arrête la boucle hors écran. Chaque .fx-0612-root de la page a sa propre instance, marquée par data-lsj-ready : coller le script deux fois ne lance pas deux tracés dans la même zone.
Accessibilité
- Libellé :
role="img"etaria-labelsur le canvas. En décor pur (logo animé à côté du nom, fond), passez-le enaria-hidden="true". - Mouvement réduit : sous
prefers-reduced-motion: reduce, la figure complète est dessinée une seule fois, en couleurs pleines, et ne bouge plus. - Pause : pas de bouton intégré. Basculer l'attribut
hiddende la racine arrête le calcul (taille nulle) et le reprend au réaffichage, ce qui suffit pour offrir le contrôle demandé par le critère WCAG 2.2.2. - Couleur : l'arc-en-ciel est décoratif, il ne porte aucune information ; rien n'est à lire dans la courbe.
- Clavier : aucun élément interactif dans l'effet, aucun focus à gérer.
Compatibilité navigateur
Canvas 2D et environ 4 Ko de JavaScript, sans dépendance. ResizeObserver : Chrome 64, Firefox 69, Safari 13.1 ; IntersectionObserver : Chrome 51, Firefox 55, Safari 12.1 (données MDN). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : rendu à densité 2, deux copies indépendantes, démarrage après un affichage différé, figure fixe en mouvement réduit, aucune image calculée hors écran.
Sans ResizeObserver, la figure ne se recentre qu'au redimensionnement de la fenêtre ; sans IntersectionObserver, la boucle continue hors écran. Avant Safari 14, un changement du réglage « réduire les animations » demande un rechargement. Sans JavaScript, la zone reste vide sur le fond de la racine.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0612-root">
<canvas class="lsj-canvas" role="img" aria-label="Courbe de Lissajous tracée par un point lumineux qui laisse une traînée arc-en-ciel"></canvas>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Fréquences (JS — A, B) |
3 et 4 | 1 et 2 donnent une simple parabole parcourue en aller-retour, 5 et 4 une figure plus dense. Deux entiers premiers entre eux referment toujours la courbe. |
Pas de la courbe (JS — STEP) |
0.02 | Plus petit, les points se rapprochent et la courbe paraît continue, mais elle avance moins vite. |
Vitesse (JS — POINTS_PER_S) |
60 points par seconde | Doublez-le avec STEP divisé par deux : même vitesse, traînée deux fois plus dense. |
Longueur de la traînée (JS — LENGTH) |
500 points | 300 laisse un serpent court qui ne couvre pas toute la figure ; 800 la garde presque entière. |
Taille de la figure (JS — SIZE) |
0.8 (80 % de la demi-zone) | 0.95 colle aux bords, 0.5 laisse de l'air autour, par exemple pour un logo. |
Épaisseur (JS — RADIUS) |
2 px | 1 pour un trait fin d'oscilloscope, 3 ou 4 pour un rendu plus graphique. |
Fond (CSS — background de .fx-0612-root) |
#0a0a0f | Les traînées s'effacent vers la transparence : changez seulement cette couleur. Sur fond clair, les teintes à 60 % de luminosité restent lisibles. |
Hauteur (CSS — --lsj-height) |
300px | Toute hauteur fixe ou 100% dans un parent de hauteur connue ; la figure se recentre seule. |
FAQ
STEP est fixé dans l'équation, pas en pixels : plus la figure est grande, plus deux points successifs s'écartent. Dès 40 px de demi-largeur, les disques se séparent là où la courbe va le plus vite. Pour un grand visuel, divisez STEP par deux ou trois et multipliez d'autant POINTS_PER_S et LENGTH : même vitesse, même longueur de traînée, trait plus continu.addPoint() par les échantillons de deux AnalyserNode de la Web Audio API, ce qui sort du périmètre de cet effet.B une valeur un peu décimale (4.01 par exemple) : elle ne se refermera plus exactement.
