Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Le canevas 'responsive' fait 300 par 200.
Dans la fonction cercles on dessine le centre de l'oeil.
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).
Le canevas 'responsive' fait 900 par 450.
Les coordonnées des points d'inflexion ainsi que les abscisses des points de départ et d'arrivée ne changent pas !
Dans les deux scripts j'utilise les mêmes noms de variables : canevas, contexte, X, Y et pourtant ça ne pose pas de problème
car ces variables sont définies au sein de fonctions ; elles sont donc locales !
Ci-dessous un document HTML intégré dans cette page via la balie Iframe.
L'ellipse est de plus en plus grande et de plus en plus opaque.
Canvas : animation de courbes de Bézier et d'ellipses
Animation d'un courbe quadratique
Exemple
Le code correspondant
Le script (extrait):
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.
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. Courbe de Bézier animée
Exemple
Le code correspondant
Extrait du script :
Ce qui change ce sont les ordonnées du point de départ et du point d'arrivée qui sont désignées par la variable y.
La valeur de y est égal à la valeur absolue de (Y - i). Donc y est toujours positif !
La variable i est tantôt incrémentée et tantôt décrémentée via la variable sens qui tantôt vaut 1 et tantôt -1.Remarque
Animation d'une ellipse
Dans ce document une ellipse est animée.
Attention l'animation se termine au bout de quelques secondes ; actualisez alors la page pour la relancer.
Affichez la console pour observez les variations des variables rx,ry et opacite.
Le code de ce document HTML
La structure :