animation-procedurale:balle:1-conditions

====== Les conditions initiales ====== Les conditions initiales pour avoir une balle qui rebondit sont... suspense : avoir une balle. Alors une balle, qu'est-ce que c'est ? * Un objet rond. * D'une certaine taille. * Là. (A une certaine position) * Avec une certaine vitesse. Sa taille, on peut la définir par une valeur. Qu'elle soit en centimètres, en hectares ou en pixels, il nous suffit d'un nombre, par exemple : ''50''. Facile. Sa position et sa vitesse par contre, pour les représenter, on a besoin... de vecteurs. ===== Un vecteur ? ===== Un vecteur est simplement une liste ordonnée de valeurs. C'est tout. (0, 16) (18, -1, 12.5, 0.001) Ce n'est fondamentalement rien d'autre, et cela ne sert pas à quelque chose en particulier : il s'agit seulement d'un concept, d'une notation, d'un outil intellectuel. On peut s'en servir pour représenter des choses. Quoi ? Et bien tout ce qui peut se décrire avec plusieurs valeurs ! ==== Vecteur de coordonnée ==== On peut par exemple se servir de cet ensemble de valeurs pour décrire une position dans l'espace. On le nomme alors un vecteur de coordonnées ou simplement un... point. <WRAP center tip> Un vecteur de coordonnée est un vecteur //considéré comme une position//. </WRAP> Lorsqu'un point est un vecteur 1D (de dimension 1), cela signifie qu'il suffit d'un seul nombre pour indiquer sa position. Son espace à une seule dimension est une droite, comme une règle graduée, et il faut bien une seule information pour indiquer l'emplacement d'une marque sur cette règle, par exemple à 2cm de l'origine. Le point peut ainsi être défini par ''(2)'' ou plus généralement ''(x)''. {{ vecteur-coordonnees_1D.png?nolink }} Lorsqu'un point est un vecteur 2D (de dimension 2), cela signifie qu'il faut maintenant deux nombres pour indiquer sa position. Son espace à deux dimensions est un plan, comme une feuille de papier, et il faut alors deux informations pour indiquer l'emplacement d'une marque sur cette feuille, par exemple: à 2cm de la gauche et 1cm du bas. Le point peut alors être défini par ''(2, 1)'' ou plus généralement ''(x, y)''. {{ vecteur-coordonnees_2D.png?nolink }} On peut ainsi continuer indéfiniment : lorsqu'un point est un vecteur 3D (de dimension 3), cela signifie qu'il faut trois nombres pour indiquer sa position, par exemple: à 2cm du bas, 7.53cm du bord gauche et 50cm du sol, ou plus généralement ''(x, y, z)''. L'homme est un être de dimension 3, il est très difficile de se représenter les dimensions spatiales supérieures. En procédant de la même manière, on indique pourtant facilement une position dans la quatrième, voire huitième dimension : il suffit de parler du point ''(x, y, z, u, v, w, i, j)'' ! ==== Vecteur directionnel ==== On peut aussi se servir de cet ensemble de valeurs pour décrire un déplacement, on le nomme alors vecteur directionnel. On ne traduit plus le vecteur comme une position particulière, mais comme la description et la quantification d'un changement de position. On choisit simplement de dire qu'un vecteur ''(2)'' par exemple, correspond à l'idée "//avancer de 2//". <WRAP center tip> Un vecteur directionnel est un vecteur //considéré comme une direction//. </WRAP> {{ vecteur-directionnel.png?nolink }} De la même manière que le vecteur de coordonnées, plus il y a de valeurs, et plus on décrit une information dans un espace à de nombreuses dimensions. Ainsi, un vecteur ''(1, 2, -1)'' donne une information dans trois dimensions et, correspondrait à l'idée "//avancer de 1 en x, puis avancer de 2 en y, puis reculer de 1 en z//" Et là où c'est bien pratique, c'est qu'un vecteur directionnel indique du coup à la fois une direction, un sens et une longueur. Représentons le vecteur directionnel ''(2, 0)'' par une flèche. Sa direction, c'est la droite sur laquelle il se situe : elle est horizontale. Son sens, c'est de quel côté il se dirige : ici c'est vers la droite. Et sa longueur c'est la distance qu'il parcourt : ici 2 unités. Un autre vecteur peut avoir la même direction mais pas le même sens, comme le vecteur ''(-2, 0)'', ou uniquement une longueur différente, comme le vecteur ''(5, 0)''. Et il existe aussi une infinité de directions différentes, comme celle verticale du vecteur ''(0, 2)''. {{ vecteurs-directionnels.png?nolink }} ===== Une balle ===== Revenons à notre balle. On choisit de la représenter en deux dimensions, comme un dessin plat. C'est un peu plus simple, et plus clair à dessiner. Sa position dans l'espace et sa vitesse doivent donc être définis chacun par deux valeurs. Un vecteur étant une simple liste de valeurs, il y a beaucoup de manières d'enregistrer ces données dans un programme, selon le langage utilisé. On peut utiliser un tableau, une liste, ou tout élément de langage de base. La plupart des langages intègrent cependant une classe de vecteurs, généralement plus claire à utiliser, plus optimisée. En python il y a par exemple le module [[http://www.numpy.org|NumPy]] et sa classe ''array'', dans le cas de Paper.js la classe de vecteur s'appelle ''Point''. <code javascript> new Point(x, y) </code> L'avantage de définir notre vitesse par un vecteur directionnel et non par un simple nombre, c'est que le vecteur indique à la fois la direction, le sens, et l'intensité de notre vitesse dans l'espace! En plus d'être d'une “intensité” de 1 (la longueur de notre vecteur), notre vitesse est dirigée vers la droite. C'est la représentation mathématique d'une force physique. {{ balle_initiale.png?nolink }} * Le nombre taille représente la taille de notre balle. * Le vecteur position représente sa position dans l'espace. * Le vecteur vitesse représente une force physique dirigée. <code javascript> // la taille de la balle est un nombre var taille = 50 // position et vitesse sont des vecteurs à deux dimensions var position = new Point(100, 100) var vitesse = new Point(7, 0) // on se sert de nos valeurs pour représenter la balle var balle = new Path.Circle(position, taille) balle.strokeColor = '#999fa5' balle.strokeWidth = 5 </code> <WRAP center help> [[http://sketch.paperjs.org/#S/XZDBasMwDIZfRXiHdhDa7FBGCj31BQo77LDu4CYaMXHsICnZYOxdd91bTE7jMnawscyn//+lTxNsj2ZvnjqUujWFqWOT6u0WvAWxznuEBlNxsemNLDAGCLG/EJ7pHCZLmTvArkxf6ajAENmJiwFQYHKCzAgcg6gew4S14EgM31qOH9C4HgMrzVn01n6AgO9wii7I+qEsC9DrPlNZ+C/0WMAVWIKoRrJGStYaXd2tn82HOBIQDvTDGATpNmeWvw69iFtpN0dHtcd1Dlcss892M7xhodjhMfpI2ri6q6rqze5W/4Fn10ibVqZL11XabkjZ2exfXr9+AQ==|Voir l'exemple 1 : une balle]] </WRAP> Bon, ceci dit c'est très bien tous ces concepts, mais à part avoir dessiné un rond, il ne se passe rien. C'est normal : on a encore intégré aucune notion de mouvement. Il est temps d'animer.