Géométrie animée

Carré animé avec et sans conservation des traces

Si cette page s'affiche mal, consultez cette page de remplacement. Requiert un navigateur récent: Internet Explorer 10, Chrome, Firefox, Safari.

J'ai programmé le déplacement des sommets du carré sur les bords du canvas (rouge).
De ce fait le carré change d'orientation et de dimensions.
Le carré est le plus grand quand les sommets sont dans les coins du canvas
et le plus petit quand les sommets sont au milieu des côtés du canvas.
Dans le canvas de gauche, on garde les traces de l'évolution du carré.
Le gif animé qui m'a servi de modèle fait 400 Ko.
Grâce au javascript, j'obtiens un meilleur résultat avec 4 Ko.