Étape 2: Animation 101
L’analogie de Flip-book :
Vous vous souvenez de jadis, quand les gens prendre une pile de papier et d’en tirer une série de chiffres-clé, un sur chaque page, chacun figure étant légèrement différente de celle dernière ? Par la suite, quand vous retourné passé toutes les pages, il crée l’illusion du mouvement.
Eh bien, un peu de traitement fonctionne comme ça. Dans la boucle infinie draw(), chaque itération ou chaque passage dans la boucle peut être considéré comme une seule page dans le flip-book métaphorique. Jusqu'à présent, nous n’avons vu quoi que ce soit en se déplaçant du fait que nous continuions les mêmes formes dans toutes les pages. Alors, comment changer cela ? Nous changeons progressivement certains aspects de l’esquisse à chaque itération :
int x = 20 ;
void setup() {}
Size(400,400) ;
Background(255) ;
Smooth() ;
}
{} void draw()
noStroke() ;
Fill(140) ;
ellipse(x,256,40,40) ;
x = x + 1 ; le changement progressif
}
Voir le résultat ci-dessus (première photo).
Eh bien, au moins quelque chose est en mouvement. Avant de nous comprendre pourquoi le cercle laisse une trace comme il se déplace, concentrons-nous sur ce qui provoque le mouvement. Nous avons déclaré une variable de type entier « x » et passa à ellipse() comme c' est x-position. Puis, à la fin de la boucle de draw(), nous la valeur de x incrémenté d’une unité. Cela signifie, pour chaque page (ou itération), le centre du cercle sera 1 pixel loin de l’axe des abscisses et ainsi, créer l’illusion du mouvement, tout comme jadis !
Maintenant, pour le sentier - Remarquez que nous avons appelé la fonction background() dans setup(), ce qui signifie qu’elle se déroulera en une seule fois. Par conséquent, le background() obtient jamais actualisé, et nous voyons une histoire des emplacements que parcourt le cercle. Déplacer le background() au début de la boucle de draw() résout cela. Essayez-le ! (voir deuxième photo ci-dessus à titre d’illustration).
S’il faut placer background() dans setup() ou dans draw() dépendra du type de croquis que vous tentez de le produire.
Je vais laisser au lecteur de comprendre pourquoi j’ai déclaré la variable x en dehors de deux setup() et draw().
Cercle variante 1 :
Depuis que nous avons les bases d’animation vers le bas, nous allons faire notre cercle un peu plus intéressant - que se passe-t-il si nous voulions que notre cercle s’arrêter au centre de l’écran, et pas s’enfuir ou de sortir de la vue ?
Pour ce faire consiste à utiliser des instructions conditionnelles (if, else instructions) pour limiter le cercle d’aller au-delà du centre. Mais, juste pour le plaisir, nous allons l’essayer comme suit :
int x = 20 ;
void setup() {}
Size(400,400) ;
Smooth() ;
}
{} void draw()
Background(255) ;
noStroke() ;
Fill(140) ;
ellipse(x,256,40,40) ;
x = x + 1 ; le changement progressif
x = constrain(x,0,width/2) ; la fonction de contrainte
}
Docilement, le cercle s’arrête au milieu, à droite ?
L’introduction, la fonction constrain() :
contraindre (variable, seuil, seuil plus élevé) - cette fonction veille à ce que la valeur contenue dans la "variable" n’est pas, en quelque sorte, obtenir plus bas à "seuil", ni supérieure à "seuil plus élevé".
Dans le code ci-dessus, à l’aide de constrain(), nous nous sommes assurés que la position du cercle x ne dépasse pas la gamme fournie (0 à la moitié de la largeur, ergo, Centre). La fonction constrain() est très pratique dans beaucoup d’autres situations, comme limitant la luminosité d’une lumière pour une installation, ou contraindre les valeurs de la sonde dans une certaine plage.
Entourez la Variation 2 (Jiggling cercle) :
Déplacer un cercle sur l’écran est assez doux dans un premier temps. Cependant, puisque nous avons quelques outils astucieux à notre actif maintenant, nous allons essayer quelque chose un peu plus excitant - faisant la trémousser cercle !
Nous pouvons faire le cercle semble comme il est branlement en faisant continuellement déplacer d’un pixel vers la gauche ou la droite ou vers le haut ou vers le bas de façon aléatoire (par exemple, haut, bas, bas, gauche, gauche, droite, droite, droite.. et ainsi de suite). Comment choisir une direction au hasard ? Découvrons :
float x = 200 ;
float y = 200 ;
void setup() {}
Size(400,400) ;
Smooth() ;
}
{} void draw()
Background(255) ;
noStroke() ;
Fill(140) ;
ellipse(x,y,80,80) ;
x = x + random(-1,1) ;
y = y + random(-1,1) ;
}
aléatoire (valeur basse, valeur supérieure) - cette fonction génère un nombre aléatoire dans la plage été fournie.
Remarque, la fonction aléatoire génère des nombres à virgule flottante, pas des nombres entiers. C’est pourquoi nous avons dû changer les types de données de le x et y des variables de "int", "flotter", depuis l’ajout d’un nombre entier à un flotteur donne finalement un flotteur, et nous ne pouvons stocker que dans int.
Par conséquent, en ajoutant un numéro au hasard aux coordonnées x et y du cercle à chaque itération de la boucle de draw(), nous avons réussi dans ce qui en fait se trémousser. Si vous souhaitez que le cercle à vibrer plus vite, agrandir la gamme, comme de -10 à + 10 par exemple.
