Canvas : animation d'une courbe quadratique

Votre navigateur est obsolète

Le script de la page (extrait)

Le canvas fait 300 par 200

... var yh = 30; var yb = 170 ; var X = canevas.width ; var Y = canevas.height; var delta =1 ; function cercles() { contexte.beginPath(); // dessiner iris contexte.fillStyle = 'skyblue'; contexte.arc(150, 100, 25, 0, Math.PI*2); contexte.fill(); contexte.beginPath(); //dessiner pupille contexte.fillStyle ='black'; contexte.arc(150, 100, 10, 0, Math.PI*2); contexte.fill(); } // fin fonction cercles setInterval(animate,50); function animate() { contexte.clearRect(0,0, X,Y) ; cercles(); // appel fonction cercles contexte.beginPath() ; // nouveau bridage de l'oeil contexte.moveTo(50,100); contexte.quadraticCurveTo(150, yh, 250,100); contexte.quadraticCurveTo(150, yb, 50,100); contexte.lineWidth = 5 ; contexte.stroke(); // nouvelles valeurs y_haut et y_bas pour la passe suivante if (yh == 10 || yb == 190) { delta = 1 ; } // oeil ouvert il faut alors le fermer if (yh == 50 || yb == 150) { delta = -1 ;} // oeil fermé il faut alors l'ouvrir yh = yh + delta ; yb = yb - delta ; } // fin fonction animate ...

Commentaire du code

Dans la fonction cercles on dessine le centre de l'oeil.
La fonction animate est appelée toutes les 50 millisecondes soit 20 fois par seconde (1000/50 = 20). Vingt images par seconde c'est une bonne fréquence pour une animation.

Dans la fonction animate on efface le dessin précédent, on appelle la fonction cercles puis on dessine deux courbes quadratiques opposées. Mais à chaque fois les ordonnées des points d'inflexion changent (variables yh et yb).
Pour changer les ordonnées des points d'inflexion on utilise une variable delta qui tantôt vaut 1 et tantôt -1 .
Si l'oeil est ouvert delta devient positif et donc on augmente yh et diminue yb donc on commence à refermer l'oeil.
Si l'oeil est fermé (ou presque) delta devient négatif et donc on diminue yh et augmente yb donc on commence à réouvrir l'oeil.

Retour menu