Canvas : animation d'une courbe quadratique

Le code de la page (extrait)

...
	<canvas width = '300' height ='200' style ="width : 60% ; height : auto ;"></canvas>
...
<script>
	...
	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 = 3 ; 
		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

Pour le script les dimensions du canevas sont toujours 300 par 200 !

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