Étape 7: Notions de base - spirale animée
(lien vers la version animée de HTML5)
So far so good, mais n’étaient pas des images GIF animées promis dans l’intro ?
Pour l’animation, il y a trois nouveaux ingrédients :
- t: la valeur de temps. Il faut simplement ajouter t aux arguments de rgb() ou hsb(). Alors bien sûr, t doit être utilisé intelligemment dans la formule.
- TIME_INCREMENT : la fois saut entre chaque image.
- Cadres: le nombre d’images pour le GIF animé. Si vous ne voulez pas exporter en GIF animé, vous pouvez laisser que.
Formule
TIME_INCREMENT = 0.2; // (a) FRAMES = 10; // (b) FRAMES = TWO_PI / TIME_INCREMENT / 3; // (b2) OUT_PAUSE = false; WIDTH = 250; RATIO = 1; X_MIN = -1; X_MAX = 1; Y_MIN = -1; Y_MAX = 1; color rgb(x, y, t) { // (c) float radius = dist(x, y, 0, 0); float angle = -atan2(x, y); angle = angle + t; // (d) float value = angle*3 - log(radius)*12; float stripe = cos(value); float luma = (stripe + 1) * 127; return color(luma); }
La spirale non animées a été expliquée dans le tutoriel précédent. Nous couvrirons ici uniquement les modifications nécessaires pour générer une animation.
- (a) TIME_INCREMENT définit le temps incrémenter, c'est-à-dire comment le temps varie d’une image à la suivante.
- (b) cadres définit le nombre d’images que nous voulons faire emballer dans le fichier d’animation (GIF anim). Le nombre dépend vraiment de votre formule. Il doit être choisie de sorte que la transition entre la dernière image et la première image est lisse. Ici (B2), nous calculons pour prendre la TIME_INCREMENT en compte (le plus petit incrément de la, plus le nombre de trames).
- (c) la fonction rgb() est déclarée ici avec l’argument de t . Cela indique que nous voulons une animation. La fonction rgb() s’appellera avec différentes valeurs de t, à partir de 0 et en incrémentant avec TIME_INCREMENT à chaque nouvelle image.
- (d) dans cette formule, c’est comment nous avons décidé d’utiliser t. Ici, t est ajouté à l’angle, rendant l’ensemble spirale tourner avec le temps.
Exercices
- Mettre la spirale en rotation dans la direction opposée.
- Faire la spirale vrille plus rapide ou la slowlyer.