Objectifs
Voici les connaissances abordées dans ce cours.
- Comprendre le fonctionnement d’une animation
- Utiliser les mathématiques dans un cas concret
- Retranscrire visuellement une idée abstraite
Mots-clefs
Brief
Vous créerez dans le cadre de ce sujet une composition animée exprimant une émotion ou une expression au choix — par exemple : « il tombe des cordes ». Votre animation finale durera trois secondes.
Documentation
Effacer une zone rectangulaire
context.clearRect(x, y, largeur, hauteur)
| Paramètre | Description |
|---|---|
| x | Position sur l’axe x du coin supérieur gauche de la zone rectangulaire à effacer |
| y | Position sur l’axe y du coin supérieur gauche de la zone rectangulaire à effacer |
| largeur | Largeur de la zone rectangulaire à effacer |
| hauteur | Hauteur de la zone rectangulaire à effacer |
Sauvegarder et restaurer le contexte
Les opérations de translation / rotation s’appliquent à tout le <canvas>. Sauvegarder le contexte permet de les effectuer sans affecter la totalité du <canvas>.
context.save()
// Ici des opérations de translation et / ou rotation
context.restore()Translation
context.translate(x, y)
| Paramètre | Description |
|---|---|
| x | Valeur sur l’axe x de la translation du contexte |
| y | Valeur sur l’axe y de la translation du contexte |
Rotation
context.rotate(rotation)
| Paramètre | Description |
|---|---|
| rotation | Angle de la rotation du contexte exprimé en radians |
Interpolation linéaire
let valeur = lerp(a, b, progressionAnimation)
| Paramètre | Description |
|---|---|
| a | Première valeur |
| b | Dernière valeur |
| progressionAnimation | Progression de l’animation (valeur entre 0 et 1) |
Notation
| /20 | |
|---|---|
| /8 | Compréhension des mécanismes de base de l’animation et ingéniosité du dispositif (capacité à exploiter les outils fournis) |
| /5 | Adéquation du visuel et de l’animation avec l’émotion ou expression choisie |
| /4 | Qualité graphique de la proposition |
| /3 | Lisibilité du code (bonne indentation) |