La programmation graphique II : l'animation d'art génératif

1. Bande-annonce: Bonjour. Je suis Joshua Davis. Je suis le directeur des arts médiatiques ici à la belle Sabrosa où j'utilise beaucoup de ce code que vous allez apprendre dans cette classe pour créer des expériences physiques interactives dynamiques. Cette classe est évidemment une excellente extension de la première classe que j'ai enseignée, programmation graphique et l'introduction à l'art génératif, mais, en particulier en utilisant une bibliothèque que j'ai créée appelée Hype Framework. Maintenant, cela nous amène à la deuxième classe qui est programmation graphique animation artistique générative. Donc maintenant, nous allons prendre tous ces trucs que nous avons appris en première classe, toujours en utilisant Hype Framework, toujours en utilisant le traitement, assis sur Java , mais maintenant, nous allons apprendre à animer les choses à l'écran 2 dimensions et 3 dimensions. Je suis sorti. 2. Unité 1, Vidéo 1: Quoi ? C'était à propos de quoi ? On devrait commencer cette fête. Qu' est-ce que tu dis ? Oui. On veut que cette fête commence ? Oui. Commençons cette fête. Oui. 3. Unité 1, Vidéo 2: Bienvenue de retour. Deuxième classe. Incroyable. Je vous remercie tous d'avoir pris la première classe, pour rendre cette deuxième classe possible. Je ne vais même pas hésiter. Je vais lancer un énorme avertissement maintenant. Immense avertissement, et c'est, cette classe est incroyable. Cependant, si vous avez seulement suivi ce cours et que vous n'avez pas suivi mon premier cours, qui est, je vais fournir un lien vers celui-ci, mais c' Programming Graphics et Introduction à l'art génératif. Si vous n'avez pas pris cette classe, cette classe va échouer lamentablement, et c'est parce que dans cette première classe, je vous ai présenté le Hype Framework, qui est une bibliothèque sur laquelle nous travaillons qui rend tout ce que nous apprenons possible. Donc, tu apprends tout ça en première classe, non ? Vous apprenez donc à utiliser Sublime Text 2 en conjonction avec le traitement, et nous utilisons cette bibliothèque qui nous aide à esquisser les choses plus rapidement. Donc, c'est l'énorme avertissement. L' énorme avertissement est que si vous prenez ce cours et que vous n'avez pas suivi ma première classe, la toute première vidéo, quand nous commençons à couvrir HRotate, vous ne saurez pas de quoi nous parlons. Il est donc préférable que vous arrêtiez cette classe et que vous preniez réellement le premier. D' autres termes, vous n'aurez pas été coupé à la vitesse sur toutes les fonctionnalités que le cadre Hype vous permet de faire. D' accord. Donc, voici Programmation Graphics Deux : Generative Art Animation. Maintenant, ne vous méprenez pas. J' ai adoré cette première classe, mais c'est là que, à mon avis, le plaisir se passe. Je pense que le plaisir se passe ici parce que vous allez voir quand nous entrons dans beaucoup de dossiers ultérieurs, des résultats inattendus. Hoscillator, incroyable. Ça fera des choses que tu n'as pas cru. Donc, je passe beaucoup de temps à peaufiner les petits aspects des programmes pour découvrir des choses que je ne savais jamais que je pourrais y arriver. Alors, j'aime la première classe. Cette classe est fantastique parce que nous couvrons essentiellement l'animation. Donc, nous allons examiner beaucoup de choses que nous avons couvertes en première classe en termes d'utilisation des pools et d'attachement des choses à l'écran. Mais maintenant, nous allons entrer dans les comportements de Hype qui traitent juste des choses en mouvement. D' accord. Donc, je vais terminer cette vidéo. Si vous passez à la suivante, nous allons simplement faire une introduction rapide à certaines des choses que vous apprendrez ainsi que regarder où se trouvent beaucoup de ces classes d'animation dans le dossier Hype Framework que que vous avez téléchargé précédemment pour GitHub. On se voit dans la vidéo suivante. 4. Unité 1, Vidéo 3: Donc, je voulais juste prendre un peu de temps juste faire un aperçu du framework battage médiatique que vous avez téléchargé hors de GitHub. Si vous ouvrez réellement le dossier intermédiaire de traitement battage médiatique, encore une fois, juste un rafraîchissement rapide, il y a un dossier appelé pde, et à l'intérieur du dossier pde se trouve toutes les classes qui sont actuellement disponibles dans hype. Vous pouvez voir que j'en ai quelques-uns qui sont mis en évidence que nous allons réellement couvrir. Par exemple, hFollow, HosCillator, HandomTrigger, hRotate, hSwarm, hTimer, hTween. Il s'agit d'animer des choses sur déplacement ou le déplacement des choses autour d'un système comme HSwarm. N' oubliez pas qu'à l'intérieur des exemples il y a toujours des tonnes d'exemples, il y a en fait un dossier HTWeen, il y a en fait un dossier HSwarm. Cependant, les fichiers qui ont fait pour cette classe, j'essaie dévier de ces exemples afin que je puisse obtenir un peu plus en profondeur à certaines des classes et peut-être présenter de nouvelles choses que je n'ai pas vraiment publiées deux exemples encore. Donc, bien qu'il y ait des exemples pour certaines des choses que nous allons apprendre dans le dossier des exemples, que nous allons apprendre dans le dossier des exemples, une grande partie du contenu que nous allons apprendre dans cette classe n'est pas en ligne. Donc, vous n'êtes pas des cinq hauts, nous aimons l'exclusivité. La plupart de ces choses que je vais travailler avec toi dans cette classe sont la plupart des choses qui ont été ce projet que j'ai fait sur Tumblr. Donc, si vous allez réellement sur pre-station.tumblr.com, c'est cette expérience qui est que je me suis donné quelques règles. J' ai dit, « Ok, il suffit d'inclure l'animation, chaque clip dure 30 secondes, pour une raison quelconque, je me suis donné la restriction de celui-ci doit être noir et blanc donc je n'utilise pas vraiment de couleur sur ce projet, et cool. Je suis environ 50 ans donc fichiers dans des animations que j'ai partagé sur Tumblr. » Donc, si je devais juste vous montrer quelques-unes de ces pièces, ne sont que quelques-unes des études abstraites que j'ai bricolé avec l'utilisation du battage médiatique et de nouveau publier sur Tumblr. Donc, nous allons travailler sur certains d'entre eux et parler de la façon dont certains d'entre eux sont fabriqués, puis nous allons entrer dans la façon de produire ceci. Tout comme la première classe, nous pouvons en fait toujours sortir ceci pour imprimer si nous le choisissons réellement, mais nous ne allons pas passer beaucoup de temps à imprimer ceci. On va parler de sortir ça pour l'animation. Donc, je vais vous montrer comment obtenir cela dans un format de film, comment le mettre dans un mp4, un logiciel que j'utilise pour m'aider avec ce processus. Notre dernier projet va être très dynamique comme celui-ci, ça va être amusant, ça va être excitant car on a l'air vraiment génial reflété. Maintenant, la plupart de ces trucs par en fait ont utilisé dans le nouveau clip de musique fantôme Graham, donc mon vidéo de musique co-dirigé pour le fantôme Graham a appelé tomber amoureux de l'équipe vraiment incroyable et talentueuse dirigée par Timothy Cicenty. Je vais vous montrer comment j'ai pris beaucoup de ces programmes, les utiliser pour le clip vidéo, et encore une fois, nous pouvons maintenant mettre ça dans un film, certains d'entre vous voudront peut-être faire des clips plus courts et les sortir sur Gif animé, je sais Tumblr aime Gif animé, mais j'ai fait ces déchirures de 30 secondes, donc MP4 a été le format que je suis allé à. Alors, consultez le site playstation.tumblr.site que je vais vous donner une saveur de toutes ces petites animations différentes que j'ai faites exclusivement avec les trucs que nous allons réellement apprendre dans cette classe. Actualisez-vous avec le traitement médiatique, la mise en scène, regardez le dossier pde ou regardez le dossier des exemples, encore une fois, il y a des choses là-dedans que nous ne allons pas couvrir dans cette classe. Donc, cela termine cette première section qui est juste un aperçu, qui est juste des introductions, vous donnant une idée de certaines des choses que nous allons couvrir dans cette classe. Dans la section suivante, nous allons couvrir chaque rotation. Donc, nous allons recommencer, recommencer très lentement et lentement nous allons construire ces fichiers. C' est une classe intermédiaire qui signifie que tout commence aussi basique possible au tout début, au moment où nous arriverons à Hoscillator et combos, je suis presque sûr que j'aurai arraché votre âme et que vos yeux saigneront. Cela va devenir compliqué, mais je vais vous guider à travers ces étapes de création de ces systèmes complexes avec des étapes très simples. Alors respirez profondément, marchez ça avec moi, je vous promets que ce sera amusant, mais ça va devenir compliqué et pour certains d'entre vous les gens de traitement intermédiaire là-bas. Espérons que c'est la classe que vous cherchez, pour vous les gens qui sont nouveaux dans le traitement, je vous aime, je suis si heureux que vous soyez dans ce voyage avec nous, mais je vais vous tenir la main, marcher lentement. D' accord. Sur la vidéo suivante, HRotate. 5. Introduction à HRotate et Anchor: Nous voici à la première section, HRotate et Anchor. Donc, nous avons couvert l'ancre un peu dans la première classe, qui était cette idée d'avoir un objet et de pouvoir spécifier un point d'ancrage particulier pour cet objet. Dans cette section, cela va fonctionner très bien avec hRotate parce que hRotate va nous permettre de pivoter un objet autour de cette ancre de rotation. Donc, nous allons examiner tous les aspects de HRotate. Nous avons la possibilité de spécifier des constantes pour l'ancrage, non ? Donc, il y a neuf positions possibles, au centre, en haut à gauche, en bas à droite, par exemple, ou nous pouvons travailler avec l'ancre, où nous spécifions une position X et Y, et cette position d'ancrage va fonctionner en conjonction avec hRotate . Maintenant, HRotate veut savoir quelques choses. Il veut savoir qui tourne et à quelle vitesse devrait-il faire pivoter cet objet particulier. La vitesse peut être décomposée en deux événements. Vous pouvez utiliser des degrés ou des radians. Alors, tu peux dire : « D'accord. Je veux que quelque chose tourne positif de deux degrés à chaque fois, ou je veux que quelque chose tourne négatif de deux degrés. » Ainsi, nous pouvons spécifier si quelque chose tourne dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre. 6. Unité 2, Vidéo 1: D' accord. Préparez-vous pour la magie. C' est la première section lorsque nous allons commencer à couvrir le code. Cette section est hRotate et ancre. Attaché à cette vidéo, il devrait y avoir un fichier zip que vous allez télécharger. Ce fichier zip va inclure tous les exemples de hRotate et d'ancrage. Donc, si vous téléchargez le zip et le décompressez, vous remarquerez qu'il y a 10 exemples à l'intérieur de ce dossier. Encore une fois, nous allons commencer très simplement. Ensuite, nous continuerons à ajouter à ces fichiers pour voir quels types de résultats nous obtenons. Donc, si vous allez de l'avant et regardez l'exemple un, EX 1, vous remarquerez qu'il y a un build.pde et qu'il y a Hype.pde. Encore une fois, Hype.pde est une version minifiée de chaque classe qui se trouve à l'intérieur du dossier pde que vous avez téléchargé à partir de GitHub. Donc Hype.pde contient tout l'univers HYPE. Donc, vous ne devriez jamais avoir à ouvrir ce document particulier. Nous allons ouvrir build.pde. Maintenant, si vous l'ouvrez, vous devriez voir ce code ici. Nous allons juste marcher à travers, en tant que recyclage, nous allons marcher à travers ce que cela fait. Ensuite, nous allons l'exécuter et puis nous allons ajouter hRotate. Maintenant, chaque fichier de traitement a deux fonctions. Vous remarquerez que le premier ici est la configuration. C' est encore notre constructeur. Il fonctionne une fois. C' est là que nous avons mis toutes nos informations d'installation. Ensuite, notre fonction de dessin est la boucle. C' est ce qui se passe encore et encore et encore. Maintenant, vous avez peut-être remarqué dans la première classe que nous n'avons peut-être jamais utilisé la fonction de tirage ou ce H.Drawstage, qui si vous vous souvenez des peintures, l'écran était toujours à l'intérieur de la configuration. Nous voulions faire des trucs et ensuite peindre l'écran, mais nous n'avions besoin de peindre l'écran qu'une seule fois. Parce que nous animons, nous allons réellement déplacer le H.DrawStage dans la fonction de tirage afin qu'il fonctionne encore et encore et encore. Alors regardons ce qu'on fait ici. Du point de vue de la configuration, nos films seront d'une largeur et d'une hauteur de 640. Nous allons de l'avant et ajoutons le constructeur de HYPE, H.init (ceci). Tu te souviens de ça de la première classe ? On va établir un contexte. La couleur va être un gris foncé de 20, 20, 20. Je vais aller de l'avant et dire lisse. Je veux maintenant attacher quelque chose à l'écran. Donc, je vais attacher un HRect. Alors apparaissez en haut. J' ai dit HRect r1, pour le rectangle un. En bas sur les lignes 8 à 13, je vais ajouter quelques informations sur ce rectangle particulier. Par exemple, quelle est la taille du rectangle ? Eh bien, je veux que ce soit un carré, c'est un 100 par 100. Mais je voudrais aussi des coins arrondis avec un arrondi de 10. Maintenant, sur la ligne 9, nous disons, « Ok, je veux ajouter ce rectangle à H, H étant HYPE, afin que HYPE sache que ce rectangle existe et qu'il ajoute le rectangle, sorte que lorsque H.Draw scène s'exécute, il a des informations sur r1. Maintenant, où voulons-nous joindre ce rectangle ? Je dis l'emplacement, .loc. Je vais dire largeur divisée par 2, hauteur divisée par 2, ce qui signifie qu'il va mettre ce rectangle au centre de notre écran. Ligne 11, je ne veux pas d'accident vasculaire cérébral. Ligne 12, un remplissage, une belle couleur orange. Maintenant, remarquez que nous ne couvrons pas du tout l'ancre à ce stade. Si vous vous souvenez de la première classe, si vous ne spécifiez pas d'ancrage, alors vous tournez de 0, 0, n'est-ce pas ? Donc, il le met dans le coin supérieur gauche. Maintenant, descendez au tirage au sort. Nous allons faire une boucle H.Drawstage est maintenant en train de dessiner encore et encore et encore et encore. Ensuite, sur les lignes 22 et 23, je viens de mettre du code de traitement pour visualiser où se trouve l'ancre. Donc vous remarquerez, j'ai dit, « Hé, ne faites pas de remplissages pour que ça tue le remplissage d'orange sur la ligne 12. Donnez-moi un poids de course de 2 et donnez-moi une couleur de trait d'un bleu sarcelle, 0095A8. » Puis, encore une fois en utilisant un code de traitement de base, je viens de dire, « Je veux faire une ellipse. La position x et y de l'ellipse est, eh bien, quelle est la position x et y de r1 ? » Donc, vous remarquez que j'ai dit que le x est r1.x ouvert paronzième proche. Donc, il obtient la position x de r1, puis il obtient la position de r1 sur l'axe y et la largeur et la hauteur de cette ellipse est de 4 par 4. Maintenant, vous remarquerez que j'ai ce code ici commenté parce que nous ne sommes pas encore tout à fait prêts pour cela. Mais si je vais de l'avant et tester le croquis, vous devriez voir qu'il nous a effectivement donné un fichier que 640 par 640, la couleur de fond est gris. Il a attaché notre rectangle. Ça l'a fait dans les coins. C' est orange. Nous avons ajouté ce petit point bleu juste au centre pour que nous sachions où se trouve le point d'ancrage. Donc, vous remarquerez que ce point est au centre exact de la largeur divisé par 2, la hauteur divisée par 2, et que l'œuvre est suspendue en bas à droite parce que ce coin supérieur gauche est le point d'ancrage, est l'enregistrement. Croyez-le ou non, c'est une animation. La fonction de tirage sur la ligne 19 tire encore et encore, mais ce qui se passe, c'est qu'aucune position n'a changé. Donc, il ne bouge pas c'est la position x ou y, ou l'échelle ou la rotation, mais il est en fait peindre cette chose rapidement encore et encore et encore. Il arrive juste qu'il soit à l'endroit exact précédemment. Il y a donc une animation qui se passe. C' est très conceptuel. Il n'y a pas de boucle qui se passe, mais rien ne change visuellement à l'écran. C' est juste repeindre tout à l'endroit exact encore et encore et encore. Maintenant, je veux faire tourner ce truc. rotation des trucs et le traitement pour moi a toujours été un peu bizarre parce que les degrés par rapport aux radians, où est le point d'ancrage ? Qu' est-ce que je tourne autour ? Donc honnêtement, j'espère que si vous voulez faire pivoter les choses, vous allez adorer utiliser HYPE pour faire pivoter les choses parce que je pense juste que c'est un peu plus facile que d'avoir à faire une matrice push, une matrice pop et ensuite tourner avec cela et bla bla bla. Alors continuons et décommentons les contours 15 et 16. Ceci est juste un exemple de la façon dont vous pouvez utiliser hRotate. En fait, ce code va devenir un peu plus simple à mesure que nous avançons , mais permet de faire des pas de bébé ici. Donc, à la ligne 15, je dis simplement que je veux faire un hRotate et je vais l'appeler hr1. Donc HRotate1. C' est un nouveau hRotate. Alors la ligne 15 dit : « D'accord. Cool. Hype, vous avez ajouté un comportement de rotation à vous, mais j'ai besoin de savoir des choses. » Ce qu'il a besoin de savoir, c'est qui il tourne et une vitesse. Maintenant, la vitesse devient un peu difficile parce que cela peut être un nombre positif ou négatif. Positif dans le sens des aiguilles d'une montre, un nombre négatif dans le sens inverse des aiguilles d'une montre. Alors regarde la ligne 16. Je dis : « Hey, Hrotate1, ta cible est ce rectangle, r1. Donc c'est le type que tu veux faire tourner. Ta vitesse est 2. » Notez que je n'ai pas besoin de spécifier radians. Je lui donne juste un numéro. Maintenant, comme il se trouve, HYPE par défaut fait des degrés. Donc, si je lance réellement ce fichier, vous remarquerez maintenant que le rectangle tourne deux degrés à la fois. Donc, encore une fois, la vitesse peut être un nombre positif. C'est un char. Donc, si vous vouliez vraiment ralentir cela, vous pourriez dire 0.5 et vous pourriez l'exécuter et vous remarqueriez qu'il ralentit. Vous pourriez changer ceci en deux négatifs et cela irait tout simplement dans le sens inverse des aiguilles d'une montre. On y va, on a animé quelque chose. Nous tournons notre rectangle autour d'un point d'ancrage. Maintenant, je vais aller de l'avant et fermer ce dossier et je vais regarder notre dossier ici à l'exemple 2. Encore une fois, dans l'exemple deux, il y a juste un build.pde et un Hype.pde. Maintenant, si vous ouvrez l'exemple 2, le code est toujours fondamentalement le même. Je veux juste montrer que si vous êtes un amoureux des radians, vous pouvez réellement le faire. Speedrad, au lieu de .speed. Alors. Speed va faire des degrés, .Speedrad va vous donner cette rotation en radians. Donc, dans l'exemple deux, c'est la seule chose qui est différente est de spécifier SpeedRad au lieu de la vitesse. C' est donc la seule différence dans l'exemple 2. Encore une fois, si vous êtes un amateur d'utiliser des radians comme négatif 2 Pi divisé par 90, alors bien sûr vous pouvez le faire de cette façon. Donc, c'est l'exemple 2. Enfin, dans cette vidéo, je veux juste parler de l'exemple 3 avant de passer à la vidéo suivante. Encore une fois, dans l'exemple trois, il n'y a qu'un build.pde et Hype.pde. Dans l'exemple trois, vous pouvez voir ici dans exemple un ou l'exemple deux création d'une rotation, créé deux lignes de code. Vous deviez créer une instance de hRotate, puis lui indiquer la cible et la vitesse. Mais encore une fois, je veux faire les choses rapidement. Je veux être en mesure d'esquisser mes idées rapidement sans avoir à faire du bruit sur l'écriture de beaucoup de code. Donc, c'est en fait un fichier trois qui est mon préféré car il utilise la quantité la plus minimale de code. Dans ce cas, tout ce que vous avez à faire est de dire une ligne de code. Encore une fois, c'est comme ça que j'aime le faire. Ligne 21, vous pouvez juste dire, « Hey Hype, je veux faire un nouveau HRotate. » hRotate peut être passé deux arguments. Le premier étant la cible, le second étant la vitesse. Donc, la ligne 21 est le changement sur le fichier 3 des fichiers un et deux. Il simplifie deux lignes de code jusqu'à une ligne de code. Encore une fois, en exécutant simplement le croquis, vous remarquerez que nous obtenons toujours la rotation. On tourne toujours autour de ce point d'ancrage, mais j'écris moins de code. À la fin de la journée, je veux écrire moins de code. Je veux obtenir des résultats et écrire moins de code. Donc ligne 21, nouveau hRotate, r1, la cible, 0.5, la vitesse. Encore une fois, vous pouvez entrer ici et faire de ce nombre un nombre négatif et il animera ensuite dans le sens inverse des aiguilles d'une montre. Maintenant, ça met fin à cette vidéo. Nous n'avons pas vraiment fait affaire avec l'ancre du tout. Donc, dans la prochaine vidéo, nous allons regarder la prochaine série de fichiers HRotate qui parlent des différentes choses flexibles que nous pouvons faire avec l'ancre. Alors on se voit dans la prochaine vidéo. 7. Unité 2, Vidéo 2: D' accord. Donc, dans cette vidéo, je veux travailler sur les quatre prochains fichiers, qui vont être l'exemple quatre, cinq, six et sept, parce qu'ils sont tous regroupés parce qu'ils vont traiter avec l'ancre, vous verrez ici dans un moment. Alors, regardons l'exemple quatre et passons à travers ce que j'ai mis en place ici. Au lieu de faire tourner un rectangle, je vais en faire tourner trois. Alors, regardons juste certains des ajustements. En haut, nous avons HRect r1, r2, r3, puisque nous allons attacher trois rectangles, et tout ce que j'ai fait c'est de copier et coller un rectangle deux fois de plus, et de faire quelques légers ajustements. Donc, r1, r2, r3 ne fait que copier, et la seule chose qui a été changée, c'est que les couleurs vont faire une gradation d'oranges. Donc, tu as un orange foncé, orange moyen et un orange clair. Alors je change de position. Donc, puisque j'ai trois rectangles et que je veux que le milieu soit au centre de l'écran, si vous regardez d2, emplacement dit largeur divisée par deux hauteur divisée par deux. Donc, nous savons que r2 sera au centre de l'écran. Maintenant, si vous regardez R1, je viens de dire, hé, largeur divisée par deux, hauteur divisée par deux. Mais quand vous faites cette largeur divisée par deux, il suffit de soustraire 160. Ainsi, il commence au centre, puis déplace 160 pixels du centre. Bien sûr, r3 est plus 160. Donc, si vous regardez l'emplacement pour r3, c'est la largeur divisée par deux plus 160. Maintenant, la raison pour laquelle j'ai mis trois rectangles dans cette pièce est pour que nous puissions vraiment commencer à explorer les différentes facettes de l'ancrage. Maintenant, nous avons couvert ça un peu en première classe, mais encore une fois c'est un bon rafraîchissement. Regardons les lignes 29 à 31. Nous avons trois hRotate séparée, et encore une fois vous pouvez appeler plusieurs hRotate. Donc, ce qui se passe, c'est que j'enregistre essentiellement trois comportements de rotation et spécifie des cibles différentes. Ainsi, le premier hRotate va cibler r1, la deuxième instance de hRotate r2, la troisième instance de hRotate r3. Maintenant, si nous regardons à l'intérieur de notre tirage au sort, je viens d'ajouter un peu plus de code de traitement pour spécifier où est le point d'ancrage de rotation. Alors, allons de l'avant et testons ce croquis et voyons ce qui se passe. Donc, nous avons trois rectangles. Nous les avons en mouvement à différentes vitesses de rotation parce que nous avons enregistré trois HRotates différentes. Encore une fois, nous regardons le point d'ancrage ici. Donc, si aucune ancre n'est spécifiée, encore une fois, on a ce 00 et les trois de ces gars bougent. Super. Donc, prenons maintenant cela et économisons-le quelques fois de plus et commençons à explorer travailler avec des ancres. Donc, avec ça, je vais passer à l'exemple 5. Je vais juste jeter ça sur l'écran. D'accord. Donc, si vous ouvrez maintenant l'exemple 5, il s'agit d'un duplicata de l'exemple 4, sauf que nous avons ajouté un système d'ancrage. D' accord. Donc, si vous regardez r1, r2 et r3, vous pouvez voir que nous avons mis ce qu'on appelle une constante. Donc, c'est une constante Hype, et nous allons explorer les constantes ici dans un peu. La constante ici est H.CENTER. Donc, nous disons que le rectangle est 100 par 100, donc, sur les lignes 10, sur les lignes 18 et sur les lignes 26, nous disons génial, trouver le point central en fonction de la largeur et de la hauteur de l'objet. Donc, puisque les rectangles sont 100 par 100, que Anchorat H.CENTER finit par être 50-50, et allons de l'avant et tester ce croquis et vous devriez voir que nous avons toujours la rotation, mais nous avons en fait changé où l'ancre de rotation se produit. Donc, maintenant, encore une fois, nos petits points bleus sont des représentations des ancres n'ont pas changé, vous pouvez voir qu'ils sont toujours dans les mêmes positions exactes. Mais maintenant, nous obtenons cette belle rotation de cette façon parce que nous avons demandé à Anchorat d'être H.CENTER. Maintenant, si vous le vouliez, vous pouvez ouvrir le dossier HYPE Processing, et si vous êtes réellement allé dans pde, vous verrez qu'il y a un Hconstants.pde. Si vous voulez réellement ouvrir cela, vous verrez beaucoup de constantes disponibles qui sont à l'intérieur de Hype. On a des choses comme la gauche, la droite, le centre, les couleurs. Donc, vous pouvez voir ici nous avons le centre, et bien sûr il est rempli avec des nombres par défaut, mais ceux-ci sont remplacés en fonction de la taille de vos actifs. Alors, regarde ça. Nous avons d'autres constantes comme en haut à gauche, haut à droite, en bas à gauche, en bas à droite, ainsi de suite et ainsi de suite. Donc, ce H.constants.pde est agréable parce que vous pouvez regarder à travers cela et voir tous les différents types de constantes que nous avons vidé à l'intérieur de la hauteur. Donc, au centre, super. Nous avons ce point pivot central. Maintenant, allons de l'avant et passons à l'exemple 6 parce qu'il va commencer à explorer certaines de ces autres constantes que nous avons dans le framework Hype. Donc, encore une fois, l'exemple six est le même que quatre et cinq, nous venons de modifier les constantes anchorAt. Alors, regarde R1. Sur celui-ci, sur la ligne 10, nous avons dit bien, ok je veux ancrer, mais cette fois-ci, nous allons faire center-top. Donc, si nous avions une œuvre d'art, elle irait en haut, mais elle serait centrée sur la largeur de cet objet. r2, juste faire H.CENTER à nouveau, r3, en cherchant à voir ce que ferait en bas à droite. Donc maintenant, si nous testons ce croquis, nous commençons à regarder les différents types de points d'ancrage disponibles que nous avons. Maintenant, le seul qui semble vraiment différent est r1 parce que vous avez dit center-top. Il est difficile de voir que ce r3 est en fait en bas à droite parce qu'il semble très similaire à aucun anchorAt tout ce qui est 00. Donc, vous devez être conscient que parfois certains de ces ancres, qui sauraient que c'est en fait en bas à droite parce qu'il ressemble très à une rotation de 00. Donc, ces constantes existent, elles ne représentent pas nécessairement à l'écran, que hé ce n'est pas 00 c'est en fait nous ancrons en bas à droite. Vous le verriez ancré visuellement en bas à droite si nous faisions tourner peut-être une œuvre d'art que nous avons fait un illustrateur, ou une police de caractères et pour que vous puissiez voir que la façon dont elle tournait autour cette ancre n'était pas en haut de la lettre a mais peut-être en bas à droite de la lettre a, si nous faisions quelque chose avec le type. Maintenant, Anchorat est sympa, mais nous commençons à entrer dans des choses beaucoup plus intéressantes quand vous utilisez juste l'ancre. Donc, Anchorat veut toujours être nourri d'une constante, ancre veut connaître les coordonnées. Donc, je vais aller de l'avant et fermer l'exemple 6 et je vais passer à notre dernier exemple pour cette vidéo qui est l'exemple 7. Maintenant, quand vous ouvrez l'exemple 7, comme vous l'avez peut-être deviné, c'est la même chose que quatre, cinq, et six sauf qu'au lieu d'utiliser AnchorAt, nous utilisons l'ancre. Maintenant, j'aime rester dans l'ancre parce que j'aime être capable de jouer avec les chiffres et voir différents types de résultats. Maintenant, ancre vous permet de spécifier n'importe quelle coordonnée x et y. Donc, encore une fois, si nous regardons ici sur la ligne 10, sur la ligne 18 et sur la ligne 26, vous pouvez spécifier n'importe quelle position x et y comme point d'ancrage pour la rotation, et voici où Hype brille vraiment. Pour ce faire dans le traitement régulier, il devient un peu plus difficile de faire tourner un objet autour d'une position d'ancrage spécifiée aussi facilement qu'avec l'utilisation de Hype. Maintenant, regardons r1 et r2 et r3. Nous savons tous que l'œuvre est de 100 par 100. Donc, si nous regardons r1, regardons la première position d'ancrage. Nous avons dit que le x est 50 et que le y est 25. Donc, ce que cela nous dirait, c'est que si c'est notre œuvre, nous savons que l'exposition est le milieu. Parce que 50 est la moitié de 100, sorte que l'on sache que sur l'axe des x c'est la moitié de la distance. Mais le y est maintenant 25, ce qui signifie qu'il vient de descendre 25 pixels du haut. Si nous regardons r2, nous pouvons voir que son x est également 50, mais il est y est négatif 25 ce qui signifie en fait que le point d'ancrage est hors de l'œuvre et légèrement au-dessus de lui 25 pixels. r3, encore une fois un peu inhabituel, la position d'ancrage est zéro pour le x mais 150 pour le y. Donc, il est aussi hors de l'œuvre d'art. Maintenant, continuons et testons ce croquis, et nous commencerons à voir ces différents types de rotations. Donc encore une fois, je préfère vraiment l'ancre, parce que lorsque je commence à bouger les choses ou à animer des choses à l'écran, j'ai tendance à être plus surpris quand j'utilise l'ancre et surtout quand j'utilise l'ancre avec des nombres qui sont hors du œuvre d'art. Donc, l'œuvre d'art balaie autour et tel. Donc, ceci termine cette vidéo où nous avons vraiment couvert ces quatre fichiers qui nous initient à AnchorAt et AnchorAt. La dernière vidéo va couvrir les trois derniers fichiers et la section qui montre juste quelques réglages et possibilités avec l'utilisation de HRotate. Aussi, nous allons probablement présenter des choses que nous ne allons pas couvrir avant quelques sections mais je pense que c'est sympa de montrer des choses qui vont venir. Donc, rappelez-vous que l'ancre n'est pas seulement avec la rotation, c'est avec n'importe quel comportement. C' est avec HTWeen, son HosCillator. Donc, l'ancre devient super important que nous commençons à déplacer les choses à l'écran, car cela dictera vraiment le type d'animation que nous voyons. Est-ce quelque chose qui est fixe et tourbillonnant autour d'un point central ou obtenons-nous ces mouvements de balayage parce que nous avons réellement mis l'ancre de l'œuvre d'art ? Donc, gardez cela à l'esprit que vous commencez à essayer vos propres ajustements lorsque vous animez choses qui ancre peuvent être cette chose que vous pouvez essayer beaucoup de différents nombres et nous allons obtenir beaucoup de différents résultats animés. D' accord. Il reste encore trois dossiers. On se voit dans la prochaine vidéo. 8. Unité 2, Vidéo 3: Ok, donc nous allons couvrir les trois derniers fichiers dans la section de HRotate. Il n'y a que quelques trucs. J' aime juste vraiment certaines de ces fonctionnalités ici. Donc, commençons par l'exemple huit. exemple huit couvre l'idée d'imbrication, et ce qui se passe si un objet est imbriqué à l'intérieur d'un autre objet, mais que cet objet principal a un hRotate lui est assigné. Alors, aimez ça, et c'est un super truc que vous pouvez utiliser ici. Donc, nous allons décomposer l'exemple huit. Je veux dessiner deux rectangles. Donc, j'ai R1 et j'ai R2. R1 est un 100 par 100. Il a une ancre de négatif 50. Donc, nous savons que l'œuvre d'art va être centrée. Mais, pourquoi la position va être négative à 50 pixels de l'illustration au-dessus, ok ? Nous pouvons également voir que r1 a une couleur orange. Voici la partie importante. Regardez ça, juste ici, la ligne 9 est H.add (r). Donc, nous ajoutons à la scène, nous disons battage médiatique que nous ajoutons ce rectangle appelé r1. Maintenant, oublions juste r2 pendant une seconde parce qu'ici sur la ligne 23, vous pouvez voir que je l'ai commenter mais il dit nouveau hRotate (r1), donc nous savons juste à partir de ce bloc de code que la rotation va être appliquée à r1. Maintenant, je vous présente r2. R2 a des paramètres légèrement différents. Tout d'abord, l'œuvre n'est que de 50 sur 50, donc c'est un rectangle plus petit et vous pouvez voir qu'elle a un point d'ancrage différent. Il a une ancre de 25 qui est bien sûr la moitié de 50, sorte que nous savons qu'il va être centré mais il est négatif 25 de son Y. Donc, nous savons qu'il est 25 pixels au-dessus. Vous pouvez voir ici par le remplissage qu'il est aussi une nuance de sarcelle. Maintenant, la ligne 17 est la magie. Ligne 17, ajoute-t-on r2 à H ? Non ! Nous allons en fait mettre le rectangle r2 à l'intérieur du rectangle r1. Donc, vous pouvez voir là sur la ligne 17, nous disons r1.add (r2) et donc si je devais tester ce croquis, ce que vous verrez est deux rectangles. Mais ce que vous ne savez pas visuellement au moins tout de suite est que r2 est en fait à l'intérieur de r1, mais parce qu'il est ajouté plus tard deuxième, il réside au-dessus. Donc, il a une profondeur plus élevée parce que nous l'avons ajoutée deuxième. Mais si vous pouviez penser à r1 comme juste cet objet qui a un espace infini, il finit par que r2 est à l'intérieur de r1 mais flottait au-dessus. Maintenant, la meilleure analogie que je pourrais trouver est comme le regroupement dans Photoshop ou Illustrator. Donc, si vous aviez deux couches, vous pourriez les regrouper dans un dossier ou quelque chose comme ça. Donc, si vous déplacez réellement ce dossier, vous déplaceriez tous les actifs qui étaient dans ce groupe particulier. Maintenant, la raison pour laquelle c'est génial est parce que si je décommente la ligne 23 et dis tourner r1 comme vous l'auriez deviné, il tourne en fait r2. Donc, le simple fait que j'applique un hRotate à un actif, mais qu'ensuite j'investisse un autre actif à l'intérieur de cet actif, oui, ça va tourner avec lui. Donc, j'aime cette idée d'imbriquer car cela rend mon code un peu plus mince parce que je n'ai besoin que de spécifier un hRotate et r2 est juste à l'intérieur de r1 alors n'oubliez pas que vous pouvez faire ce genre d'imbrication. Donc, chaque fois que vous H.add, c'est ajouter cet objet à la scène. Mais une fois qu'un objet a été ajouté, vous pouvez commencer à faire l'imbrication. Comme dans les fichiers précédents, nous avions un r1, r2, r3, vous pourriez ajouter r1 à H et alors r2 pourrait être dans r1, r3 pourrait être dans r1, r3 pourrait être dans r2. Vous pouvez faire n'importe quel type d'imbrication multi-niveaux comme ça. Encore une fois, nous avons seulement besoin d'un hRotate parce que les autres objets sont à l'intérieur de celui-ci donc bien sûr qu'ils sont tournés en groupe. Joli tueur. Quelque chose à penser. Passons à l'exemple neuf. Maintenant, ouvrez l'exemple neuf et je vais vous présenter quelques choses. Encore une fois, j'aime montrer un aperçu de ce qui est arrivé. En bas, vous allez voir qu'on va montrer HosCillator. HosCillator nous ne couvrons pas jusqu'à quelques sections de plus , mais encore une fois c'est juste la puissance de génial. Je vais vous le montrer. Donc, nous allons arranger celui-ci. La première chose est avant d'arriver à HosCillator, regardons juste certains des changements qui se sont produits. abord, je mets un faux auto clair donc c'est quelque chose que je ne pense pas que nous avons vraiment couvert dans la première classe parce que encore une fois nous n'animions rien. Mais si draw fonctionne encore et encore, si c'est une boucle, auto clear true est par défaut, ce qui signifie que si vous ne spécifiez pas auto clear, c'est vrai par défaut, ce qui signifie que je vais effacer l'arrière-plan avant de peindre quelque chose encore une fois. Donc, dans le cas de tous les autres fichiers que nous avons montrés, il ressemble à un seul objet qui se déplace tout seul et il n'a pas laissé de résidu, parce que nous avons réellement effacé l'affichage avant de peindre le affichage. Eh bien, en changeant le constructeur de hypes pour dire auto-clear false nous disons, hey man ne nettoie pas l'écran juste continuer à peindre cette chose pour toujours et jamais et n'essuyez pas l'écran du tout et nous verrons ce que cela fait. D' autres changements. Nous avons ajouté un trait et le trait sur les trois d'entre eux est orange foncé et nous avons ajouté un remplissage. Le remplissage est de la même couleur que l'arrière-plan et il a des positions d'ancrage différentes. Donc, 50,150 pour r1, 50, 200 pour r2, et 50, 250 pour R3. Donc, il y a un couple de paramètres différents de rotation d'âge ici. Donc, positif un, positif deux, et négatif trois. Alors, allons-y et regardons ce que ce faux effacement automatique fait. Si je fais cette esquisse ici, vous verrez que nous n'effacons pas l'écran avant de peindre à nouveau l'écran. Donc, encore une fois, l'effacement automatique est vrai par défaut dans le battage médiatique si vous ne le spécifiez pas. Donc, dans tous les autres fichiers que nous avons vus, il est toujours effacé l'affichage avant qu'il ne soit peint l'affichage. Eh bien, maintenant je dis, ne fais pas ça du tout. Pourquoi ne continues-tu pas à peindre ce truc comme ça ? Donc, maintenant ça commence à devenir intéressant parce que ici j'utilise juste une simple rotation et nous peignons la trace de cette chose comme elle se déplace autour de sa rotation. Alors, amusant. Eh bien, allons-y et fermons ceci et regardons ceci, j'ai ajouté un petit oscillateur H et je ne vais pas entrer dans les détails sur chaque oscillateur avant que plus tard dans la section quand nous couvrirons cette section. Mais, regardez ce qui se passe quand je fais ce croquis avec trois oscillateurs, et tout ce que l'oscillateur fait à ces trois rectangles change d'échelle. Donc, ça va osciller l'échelle de haut en bas. Donc, je vais aller de l'avant et exécuter ce croquis et vous pouvez voir que j'ai la rotation autour de son ancre, et je laisse une trace parce que je dis AutoClear false, mais l'oscillateur oscille l'échelle de haut en bas en fonction de certains paramètres. Donc, vous pouvez voir juste à partir de cette simple quantité de code, nous pouvons commencer à obtenir des modèles assez intéressants et évidemment c' est juste un rectangle si nous mettons un svg ou d'autres actifs, vous pouvez commencer à imaginer comment j'ai un Heyday sur Tumblr avec ce truc, créant ce genre de petites animations sur Tumblr. Juste en utilisant ces propriétés très simples. Notre exemple neuf, un aperçu du génial à venir. On a un dernier dossier ici. Je voulais juste montrer svg rotatif. Donc, dans les autres dossiers, on faisait juste tourner quelques rectangles. Si je devais ouvrir le dossier des exemples 10, vous pourriez voir que j'ai une erreur de données, donc vrai, il y a un build.pde, il y a Hype.pde, mais maintenant il y a un dossier de données et à l'intérieur de ce dossier de données, j'ai deux svgs. J' ai un petit rouage et j'ai un gros rouage. Donc, je viens de les faire dans Illustrator et de les sortir comme des actifs svg. Ce que je veux faire, c'est animer ces rouages. Alors, regarde ça. Je, fondamentalement, c'est l'ajout de l'œuvre et la rotation de l'œuvre. Donc, vous pouvez voir ici. Je dis, je veux importer un svg. Va chercher le petit rouage. Je veux activer le style false. Donc, si vous vous souvenez de la première classe qui tue l'une des couleurs spécifiées à l'intérieur d'Illustrator, je n'ai pas ancré au centre, parce que je veux que ce rouage tourne autour de son point central. Je lui ai donné un emplacement à 223 sur le x, 413 sur le y, et je l'ai obtenu comme un orange foncé et puis regarde ce que j'ai fait ici. J' ai dit, « H rotation, hey, je veux tourner svg1 négatif 0.5. » Puis, ce prochain bloc ici, j'ai dit, « Ok, svg2, va chercher le grand svg. » Encore une fois, activez le stylet false, encore une fois, je veux un centre. Je mets ceci à un x et y de 690 à 60 et le remplissage est un orange moyen, et j'ai dit hRotate svg2 0.3333. Maintenant, quand je fais ce sketch, vous verrez que j'ai une animation de ces deux rouages qui tournent l'un contre l'autre. Tout cela utilise est hRotate. La bonne chose est, si je déplace juste ceci sur le côté ici et je vais juste ouvrir un nouveau navigateur parce que HYPE n'est pas un fichier jar. Je veux juste vous montrer ici que si je vais à movabletype.com, vous pouvez voir que j'ai effectivement publié ceci en JavaScript. Donc, c'est en fait l'animation qui s'exécute ici en arrière-plan du site de type mobile. Je suis capable de créer cette animation en utilisant canevas. Donc, j'ai ouvert cela dans le traitement, j'ai basculé le mode en JavaScript, et en fait sorti cela en utilisant le traitement JS, ce qui fait un canevas et vous visualisez maintenant cette animation dans le canevas. Alors, regardez ces 29 lignes de code. J' ai pu produire cette animation pour ce site en environ, je pense, 11 minutes et c'est ce que HYPE est excellent à faire, m'aide à prototyper et à esquisser des idées très rapidement sans avoir à écrire beaucoup de code. Donc, j'ai pu utiliser HYPE pour tirer dans les formes et utiliser HRotate pour animer ces rouages les uns contre les autres qui seraient assis magnifiquement en arrière-plan, et encore une fois cela fonctionne sur les tablettes et les navigateurs les plus modernes. Impressionnant. Ceci conclut la section HRotate et une section d'ancrage. Nous allons maintenant passer à la prochaine série de vidéos qui traite chaque toile et comment peindre sur autre chose que la scène. Donc, voir dans la section suivante. 9. Introduction à HCanvas: Maintenant, super. Nous avons fait pivoter quelque chose, mais cet objet que nous avons réellement tourné dans la section précédente ainsi que dans la toute première classe, tout a été peint sur la scène. Donc, nous avons besoin d'une sauvegarde pour une seconde et nous allons maintenant couvrir HCanvas. Qu' est-ce que HCanvas ? HCanvas traite les graphiques P. Donc, pensez-y comme vous créez une image et nous allons réellement peindre cette image. Maintenant, pourquoi est-ce mieux que de peindre sur scène ? Eh bien, nous pouvons empiler plusieurs HCanvases l'un sur l'autre. Donc, tout comme Photoshop ou Illustrator, nous pouvons utiliser HCanvas pour faire des superpositions, non ? Donc, nous pouvons faire peindre certaines choses sur un plan inférieur et certaines choses sont peintes sur un plan supérieur. Donc, l'autre avantage d'avoir ce genre de superposition de toile est de penser à si nous peignions sur scène et nous avons une sorte de comportement comme la décoloration ou le flou. Cette décoloration ou floue arriverait à chaque chose qui était peinte sur la scène. Donc, un autre avantage à l'utilisation de HCanvas est que nous pouvons spécifier des types de décoloration ou de flou pour ne se produire que sur une couche par toile. Ainsi, par exemple, une animation peut se produire sur notre couche supérieure qui n'a aucune sorte de décoloration du tout, mais nous pourrions avoir un comportement d'essaim en bas que nous voulions laisser des traces. Donc, dans cette section, vous allez voir que l'utilisation de HCanvas a plus d'avantages que de simplement peindre directement sur la scène. 10. Unité 3, Vidéo 1: D' accord. Nous sommes maintenant dans HCanvas. Encore une fois, joint à la section est un fichier zip pour chaque canevas, et il y a six exemples de fichiers dans ce dossier. Maintenant, en première classe et jusqu'à maintenant, nous avons peint des objets sur scène. Ouais, donc nous avons dit H.Add et ce qui se passe est, c'est que tous les objets que nous peignons, qu'ils soient dessinés comme des ellipses ou des rectangles, ou s'ils sont des images, ou des chemins ou SVG, tout ce contenu a été peint sur la scène. Donc, dans certains scénarios ce ne serait pas favorable. Voyons ce que sont ces scénarios. Alors, regardons le premier exemple. Le premier exemple est comme un exemple Hrotate. On dirait que nous attachons un HRect appelé R1. R1 est un carré qui est de 100 par 100. Il a arrondi de 10. Il a une ancre de 50 et 125. L' emplacement est le milieu de l'écran avec diviser par deux, hauteur divisée par deux. Ce rectangle n'a pas de trait, et c'est une couleur de remplissage orange. Vous pouvez voir que nous avons un Hrotate, et il tourne R1 et il tourne à une vitesse de deux degrés à chaque fois. Maintenant, vous remarquerez sur la ligne 5 que je suis en train de configurer AutoClear false. Donc, je ne veux pas qu'il essuie l'écran, je veux qu'il continue à peindre les sentiers. Maintenant, regarde ce qui se passe quand on fait ce croquis. Vous remarquerez que le rectangle commence, et voilà. Parce que nous faisons AutoClear false, il peint le rectangle autour de la rotation et évidemment une fois qu'il effectue un virage complet à 360 degrés, vous n'avez aucune idée qu'une animation se passe ici. Mais en fait, il y en a un qui boîtes fait lentement une rotation autour de ce chemin. Alors, et si je voulais éteindre ça ? Et si je voulais que cette boîte laisse une piste, mais que cette piste s'estompe lentement en arrière-plan ? Maintenant, je vais vous montrer un truc non-médiatique pour faire ça. Vous verrez probablement cela dans beaucoup d'esquisses de traitement. Donc, l'exemple un est un problème que nous devons résoudre. Passons donc à l'exemple deux. Maintenant, si vous allez dans l'exemple deux, vous remarquerez que c'est cette copie d'un exemple, cependant, j'ai fait quelque chose d'un peu délicat dans le tirage au sort. Encore une fois, vous pouvez voir cela dans d'autres esquisses de traitement, mais il a certaines limites. Maintenant, l'astuce est à l'intérieur du tirage, avant que je ne peigne ce rectangle en rotation, je dis d'accord, je veux créer un remplissage, et ce remplissage est 20, 20, 20, 20, même couleur exacte que l'arrière-plan, mais au lieu de 255 alpha, l'alpha est seulement 10. Donc, nous créons un remplissage, même couleur que l'arrière-plan, mais il a un alpha de 10. Maintenant, regarde la ligne 21. Voici le petit truc amusant que les gens ont utilisé, qui est, que faire si nous avions la scène et que faire si nous faisions un rectangle de la même taille exacte de la scène, mais ce rectangle avait ce remplissage de 20, 20, 20 à un alpha de 10, et a été peint sur le dessus de la scène ? Ensuite, le rectangle serait dessiné, puis la boucle fonctionnerait à nouveau. Donc, il frappe constamment cet énorme rectangle, la même taille que l'arrière-plan, mais avec un remplissage et un alpha de 20. Donc, en faisant cela encore et encore, il semblerait brûler la piste en arrière-plan. Cependant, si vous avez utilisé cette astuce, vous savez ce qui va se passer ensuite, qui est, il a un peu de limitation. Donc, si nous testons le croquis, vous verrez que, oui, il commence en fait à le brûler, mais parce que le remplissage est seulement un alpha de 10, pour une raison quelconque, le traitement ne le construit pas assez pour le brûler réellement retour jusqu'à l'arrière-plan. Donc, vous remarquerez peut-être qu'il a en fait laissé un fantôme vert d'un cercle, il ne le brûle pas complètement à l'arrière-plan. Donc, un peu de limitation là-bas. Donc je veux avoir cet effet, mais je ne veux pas que ce résidu soit laissé en arrière-plan. Donc, dans cette section, je veux garder la vidéo courte donc je vais m'arrêter ici, puis nous passerons à l'exemple 3 qui va utiliser ce concept de toile. Donc je vais arrêter la vidéo ici, on passera à la suivante et je vais entrer dans les écrous et les boulons d'utilisation de chaque toile. On se voit dans la vidéo suivante. 11. Unité 3, Vidéo 2: D' accord. Nous sommes dans l'exemple 3 qui va illustrer cette idée de HCanvas. Maintenant, chaque toile à l'intérieur du traitement est un graphique P, ce qui signifie essentiellement qu'il s'agit d'une image. Ce que je veux faire, c'est peindre à cette image, pas à la scène. D' accord. Donc, une bonne analogie serait comme Photoshop. Lorsque vous démarrez Photoshop et que vous commencez à créer des illustrations, vous avez généralement un calque dans le fichier de votre calque et ce calque est appelé arrière-plan. Et vous dites, je veux un nouveau calque, et cela ajoute un nouveau calque sur le dessus, puis vous commencez à faire des illustrations à l'intérieur de cette chose, et cela n'a rien à voir avec l'arrière-plan. Donc, le même concept exact qui est, nous avons notre scène et nous allons ajouter chaque toile au-dessus de la scène et nous allons peindre à cela. Vous verrez dans certains de ces fichiers plus récents qui présente d'énormes avantages. Alors, jetons un coup d'oeil à ce dossier. En haut, vous voyez HCanva c1, canvas un, et vous verrez ici sur les lignes, et plus important encore, je veux juste souligner sur la ligne 6. Vous remarquerez que j'ai supprimé AutoClear (false), n'est-ce pas ? Si je reviens à l'exemple 1 par exemple, vous verrez que j'ai défini AutoClear (false). Donc, j'ai supprimé AutoClear (false) de la ligne 6 parce que c'est la scène et je ne vais pas peindre sur la scène. Donc, vous pouvez aller de l'avant et dégager la scène parce que la seule chose que je vais y peindre est cette toile. D' accord. Donc, vous remarquerez que j'ai supprimé AutoClear (false) de la ligne 6. Maintenant, les lignes 9 et 10 sont nouvelles. Il est dit, « c1 = nouveau HCanvas » et voici où nous mettons l'AutoClear (false). Je veux l'image à laquelle on peint, je ne veux pas l'effacer avant de peindre à nouveau. Donc, maintenant je laisse les traces sur la toile. Regardez la ligne 10, vous dites, « H.add (c1) ». Donc, vous avez votre scène, puis au-dessus de votre scène, vous ajoutez ce HCanvas. Maintenant, allons de l'avant et regardons la fixation du rectangle. Donc, voici notre rectangle et vous remarquerez que c'est à peu près la même chose de l'exemple 1, exemple 2 sauf pour la ligne 13. ligne 13 dit de ne pas ajouter cela à la scène H, ajoutez-le à ce canevas que nous venons de créer appelé c1. Donc, rappelez-vous cet exemple d'imbrication que nous avons fait dans HRotate ? Même concept exact. Donc, nous avons notre scène, nous avons notre toile et nous sommes en train de peindre le rectangle dans le HCanvas, non ? Donc on est en train de nicher. D' accord. Donc encore une fois, pas de h.add (r1), c'est c1.add (r1). D'accord. Encore une fois, nous faisons une petite rotation sur r1 et dans le tirage au sort, nous peignons juste H.Drawstage. Maintenant, regarde ce qui se passe. Maintenant, vous remarquerez peut-être que mon dossier a une chose manquante, puis le zip et je fais ça pour une raison. Regardez arriver ! Qu' est-ce que Josh ! Film de test. Maintenant, maintenant. D' accord. Exécutez le croquis et regardez, il ressemble exactement au fichier 1 dans le sens où il ne s'estompe pas du tout, non ? Il ne brûle pas. Mais encore une fois, nous avons notre scène, nous avons notre toile, et nous avons notre rectangle qui tourne à l'intérieur de la toile. Maintenant, tout ce que j'ai à faire, encore une fois vous le voyez dans votre dossier, juste ici, je peux mettre fondu et ensuite passer un numéro. Dans ce cas, je veux fondre un quatre. Donc, si je vais de l'avant et que je lance ce croquis maintenant, vous verrez maintenant qu'il fait essentiellement ce exemple 2 a fait, sauf pour sa décoloration parfaite des pixels, qu'il ne laisse pas ce fantôme vert derrière dans ce fichier. Donc, génial. D' accord. Donc j'espère que vous comprenez ce qui se passe ici, c'est que notre scène tient notre HCanvas et notre HCanvas est ce qui tient notre rectangle et en mettant ce fondu quatre, nous brûlons cette chose. Donc, évidemment, le nombre le plus bas que vous pouvez mettre est un fondu d' un et cela serait lentement, à droite. Donc, ça brûlerait lentement ça. En fait, si lent qu'il n'a pas une chance de le brûler avant que la boucle ne recommence. Maintenant, laissez-moi juste remettre ça à quatre pour qu'il imite le vôtre. Donc, j'ai utilisé cette analogie de Photoshop et c'est là HCanvas brille vraiment parce que regardons un autre problème que nous rencontrerions si nous n'utilisions pas HCanvas. D' accord. Donc, je vais passer à l'exemple 4. Maintenant, l'exemple 4 a HCanvas supprimé à nouveau. Je l'ai retiré parce que je veux poser un autre problème si nous avons trois actifs, non ? Donc si nous avons juste écrémé ça très rapidement, vous verrez que c'est un mimique de l'exemple 2 sauf dans l'exemple 2, nous ne peignons qu'une chose et dans l'exemple 4, nous peignons trois choses, non ? Donc, j'ai trois appels pour faire un HRect. J' ai r1, r2 et r3, et encore une fois je les fais tourner. Encore une fois, je vous montre cette astuce de simplement créer un remplissage avec un alpha de 10 puis de peindre un très grand rectangle au-dessus de celui-ci. Maintenant, la raison pour laquelle je le montre à nouveau est parce que si je lance ce fichier, encore une fois, vous remarquerez qu'il ne le brûle pas parfaitement et nous obtenons ce fantôme mais nous obtenons ce fantôme en trois couleurs différentes maintenant parce que encore une fois, il ne peut pas brûler parfaitement à l'écran arrière. Donc, génial. Cela montre maintenant cette idée de, oh mon Dieu, et si je peins trois choses ? Comment la toile est-elle l'amant que j'ai toujours souhaité ? Parce que comme cette analogie Photoshop, je peux avoir 3 HCanvases, et je peux demander à chacun de ces trois rectangles de peindre sur leur propre HCanvas séparé. S' ils peignent sur leur propre HCanvas séparé, nous pouvons faire toutes sortes d'effets différents sur chacune des toiles, comme, « Hey, auto-effacer vrai, ne peignez pas les sentiers. » Ou, « Faites de celui-ci un fondu de quatre et faites-en un fondu de huit. » Donc, je pense littéralement à chaque toile comme des couches et Photoshop, et je peux appliquer différents traitements à ces toiles. Donc, continuons et fermons ce fichier, et voyons le correctif dans l'exemple 5. Donc, dans l'exemple 5, je corrige, je reviens à l'exemple trois, mais avec la structure de l'exemple quatre. Donc, je veux peindre trois choses. Maintenant, regarde ça. En haut, j'ai chaque toile c1, c2, c3, toile un, toile deux, toile trois. Vous remarquerez que j'ai mis en place les toiles sur les lignes 9 à 11 où je dis, « Ok, c1 est un HCanvas, c2 est un HCanvas, et c3 est un HCanvas, mais je vais leur donner des paramètres différents. Le canevas c1 va effacer automatiquement true, donc il ne va pas peindre les traces. Le c2 va faire un fondu de huit, et le c_3 va faire un fondu de deux. Donc, encore une fois, c'est comme mettre en place trois couches au-dessus de la scène et leur donner différentes propriétés de filtre d'animation. Oui. Maintenant, regardez les lignes 13 à 15. C' est l'ordre qu'ils sont empilés. Donc, vous avez la scène, puis c1, puis c2, puis c3. Donc, c'est la couche d'ordre, parce que c'est l'ordre que je les ai mis dans le code. Donc, les étapes d'abord, c1, puis c2, puis c3. Excusez-moi. Maintenant, chacun des r1, r2 et r3, ils vont parler à leurs c1, c2, c3. Donc, à la ligne 18, c1, r1, ligne 25, c2 à r2, ligne 32, c3 à r3. Ainsi, chaque rectangle peint sur sa propre toile séparée. Encore une fois, nous avons nos rotations ici, et dans le tirage au sort, nous lui demandons juste de dessiner une scène. Impressionnant. Laissons-le. Donc, je vais aller de l'avant et exécuter ceci, et vous remarquerez que nous obtenons exactement ce que nous avions prévu, est de créer trois couches, trois toiles peignant nos rectangles à chacune de ces toiles et ayant un regard différent, quelque chose que vous ne pouviez pas réaliser et traiter simplement en faisant cela. Un rectangle burnout astuce à l'intérieur du tirage au sort, car il l'appliquerait à tous les trois. Donc, l'exemple cinq commence vraiment, je pense que l'indice maintenant à toutes ces grandes choses que nous pouvons faire en utilisant HCanvas, qui est, « Oh, mon Dieu, je vais penser à HCanvas comme des couches, et peut-être sur une couche j'ai du type et je ne veux pas que pour quitter les sentiers, mais j'ai cette autre couche qui pourrait avoir une animation qui quitte les sentiers. » Donc, vous commencez à penser à chaque canevas comme des calques comme dans Photoshop et vous appliquez simplement des effets différents à chacune de ces hCanvases. Alors j'ai pensé que je vous donnerais juste un dernier dossier avant de terminer la section qui est l'exemple 6. Exemple six va juste mettre ces trois rectangles l'un sur l'autre. Donc, si vous allez à l'exemple six, vous remarquerez que vraiment la seule chose qui a changé, et celui-ci en particulier, est de jeter un oeil aux fondus que j'ai mis dans un fondu deux, un fondu quatre, et un fondu huit pour chacun des Des toiles. Mais maintenant, regardez ce que j'ai fait sur les lignes 13 à 15, j'ai inversé l'ordre dans lequel ils sont attachés. Alors, j'ai dit, « Hé, je veux la scène, puis je veux la toile 3, puis la toile 2, et ensuite la toile 1. » Donc, j'ai changé l'ordre d'empilement parce que cela concerne le fondu. c3 va brûler beaucoup plus lentement, donc je le veux en fait sur le fond. c2 va brûler un peu plus vite, je le veux au milieu, et c1 va réellement brûler le plus rapide avec un fondu de huit, et je veux en fait cela sur le dessus. Donc, j'ai en fait inversé l'ordre d'empilement des couches. La dernière chose que j'ai faite est à la ligne 19, à la ligne 26 et à la ligne 33, je les ai juste au milieu de la toile. Donc, c'est avec divisé par deux, hauteur divisée par deux. Lorsque vous exécutez réellement ceci, parce qu'ils sont trois couleurs différentes, et parce qu'ils sont sur trois toiles différentes, et parce qu'ils brûlent à trois taux différents, cela crée cela vraiment joli dégradé. Donc, vous pouvez faire ces astuces où nous utilisons HCanvas conceptuellement comme créer des couches, et nous pouvons traiter chacune de ces couches avec des effets différents comme, s'il vous plaît effacer l'arrière-plan, ou ne pas effacer l'arrière-plan, Allez-y et ajoutez un fondu. Impressionnant. Nous allons beaucoup utiliser HCanvas, parce que encore une fois, quand je pense à la création de l'animation, je veux une couche de choses sur des niveaux incertains, et HCanvas nous permet de le faire. Donc, encore une fois, rien ne se passe sur la scène, tout se passe sur ces couches HCanvas. Doux ! Ça termine cette section. Nous allons utiliser HCanvas une tonne dans le reste des sections. Ensuite, nous allons passer à HFollow, qui à ce stade, rotation n'a vraiment pas eu d'entrée. Chaque canevas n'avait aucune entrée. Donc, hFollow est le prochain comportement d'animation qui utilise l'entrée de la souris. Donc, ça va suivre où on fait des mouvements de souris. Donc, enveloppant chaque toile, je te verrai dans un Hfollow. 12. Introduction à HFollow: Donc, dans cette section, nous allons couvrir H-follow, Okay.h-follow va utiliser dans ces exemples la souris comme entrée. Donc, dans certaines des sections ultérieures, nous allons apprendre sur les comportements et les comportements peuvent fonctionner indépendamment, mais dans ce cas particulier H-follow va réellement utiliser la souris comme entrée. Donc, au fur et à mesure que nous commençons à déplacer notre souris sur l'écran ou à exécuter un geste, nous aurons quelque chose qui suit réellement ce mouvement geste. Maintenant, H-follow a un tas de paramètres différents que nous pouvons réellement appliquer à cela. Donc, par exemple, si je peins un objet à l'écran et que je dis que je veux que cet objet soit H-follow, c'est un rapport one-to-one qui signifie partout où je déplace ma souris, cet objet est collé à cette position particulière de la souris. Mais, nous pouvons réellement étendre ce comportement en introduisant quelques arguments supplémentaires. Donc, je peux dire que des choses comme ce H-follow a une facilité ou un ressort à elle, et si je disais que H-follow a l'assouplissement, que je déplace ma souris l'objet ferait une transition lente vers la souris. Alors, comme je me déplaçais, ça traînerait lentement derrière. Donc, vous auriez ce beau mouvement doux dedans. Si je implémente un ressort, vous obtenez de l'élasticité ou des bandes de caoutchouc. Donc, je pourrais commencer à déplacer ma souris autour et l'objet serait en fait bande de caoutchouc autour de ce mouvement particulier de la souris. Donc, avec la fin de cette section particulière, nous allons apprendre à déplacer la souris, exécuter le geste, ce qui est une excellente combinaison avec le coloriste pixel, non ? Donc, ce dernier fichier sur lequel nous allons travailler, nous allons en fait charger dans une photo et nous pouvons réellement déplacer la souris comme un pinceau et en fait prendre la couleur d'une photo. Donc, ce sera une façon intéressante de faire un portrait de quelqu'un parce que vous utiliseriez les informations de portrait de cette photo et en utilisant H-follow pour exécuter comme un pinceau personnalisé. 13. Unité 4, Vidéo 1: Bonjour. Bienvenue sur HFollow. Maintenant, dans les deux premiers exemples, nous avons utilisé une animation qui n'a été pilotée par aucune entrée. Donc, avec HFollow, nous allons couvrir comment utiliser la souris pour réellement conduire l'entrée. Donc, nous allons exécuter le geste et quelque chose suivra notre souris. Maintenant, si vous téléchargez le fichier zip associé à cette vidéo, vous devriez le décompresser, ouvrir et voir qu'il y a six fichiers associés à HFollow. Maintenant, j'ai un exemple ouvert en ce moment et vous remarquerez que, j'ai quelques commentaires ajoutés dans ce fichier afin que vous puissiez voir une partie de la fonctionnalité de HFollow, certains des arguments qu'il supporte ainsi que d'apprendre à enregistrer , annulez l'inscription, ajoutez ou supprimez un comportement. Donc, si vous êtes un programmeur intermédiaire au traitement, je suis juste en train de présenter certains des ensembles de fonctionnalités de HFollow. D' accord. Donc, nous allons décomposer ce premier fichier. Vous pouvez voir ici en haut, je crée une instance de HFollow appelée mf pour suivre la souris. J' ai r1, HRect où auto clear n'est pas présent ici donc nous savons que ça va effacer l'arrière-plan. On a notre rectangle, c'est un 100 par 100 avec un rayon de 40. Nous n'appliquons aucun AVC à r1. Le remplissage va être une légère nuance de gris ECEC. L' emplacement pour commencer est au centre de la toile, avec diviser par deux, hauteur divisée par deux. Le point d'ancrage va être au centre et je vais simplement faire pivoter ce rectangle de 45 degrés. Donc, en tournant à 45 degrés, devrait ressembler à un diamant. Je vais de l'avant et ajoute r1 à la scène, puis ici je spécifie le suivi de la souris. Donc, je dis suivre la souris, vous êtes un nouveau HFollow et la cible est r1. Bien sûr, éviter de dessiner tout simplement comme H.Drawstage. Maintenant, si je fais ce croquis, vous remarquerez que c'est essentiellement un rapport de 1 à 1. Donc, partout où la souris va, le r1 est collé à cette position. Donc, il n'y a pas de latence. Je bouge juste ça et partout où je vais, ça va. Donc, fondamentalement, hFollow est un moyen, comme un raccourci pour faire la position x et y de la souris. Maintenant, vous pourriez regarder ces commentaires et vous rendre compte, oh, ok, il y a d'autres fonctionnalités ici. Donc, j'ai pensé que je soufflerais ces caractéristiques deux exemples distincts. Alors, allons de l'avant et regardons l'exemple 2. Maintenant, la seule chose qui est différente dans l'exemple deux est d'appliquer une certaine « facilité » à ce suivi. Donc, si vous regardez la ligne 21 ici, nous avons une souris suivre est un nouveau HFollow. La cible est toujours r1 mais nous avons ajouté une facilité de 0,1. Donc, ce ne sera pas un rapport de 1 à 1 de l'endroit où se trouve la souris. En fait, ça va se calmer en position. Donc, si je lance ce croquis, vous devriez remarquer que lorsque vous déplacez votre souris, r1 poursuit la souris mais il a une certaine facilité à elle. Donc, ce n'est pas un rapport de 1 à 1 mais s'anime lentement en place. Maintenant, il y a un autre argument en plus de la facilité, donc si nous allons de l'avant et fermons le croquis et regardons l'exemple 3, la seule chose qui est différente dans l'exemple 3 est que nous avons ajouté l'attribut du printemps. Donc, nous voulons obtenir un peu d'élasticité ici. Donc, vous verrez que j'ai encore la facilité à 0.1 mais j'ai appliqué un peu de printemps à ce HFollow et ce printemps fait 0.95. Encore une fois, si nous lançons ce croquis ici, nous verrons qu'il ne s'agit pas d'un rapport de 1 à 1. Il facilite réellement la souris, mais il a aussi cette élasticité. Donc, c'est assez amusant si tu finis par faire les cercles ici. Vous obtenez ces beaux motifs élastiques. Maintenant, avec ça, vous pourriez voir que ça pourrait être un bon système pour faire des pinceaux. Je pourrais utiliser ça comme un pinceau et quelqu'un pourrait exécuter un geste et une sorte de peinture pourrait arriver. Alors, allons de l'avant et fermons ceci et regardons l'exemple 4 et l'exemple 4 dit juste, accord, eh bien, traitons cela comme si c'était un pinceau. Donc, la première chose que je veux que vous remarquiez est à la ligne 7, nous avons dit AutoClear (faux). Donc, comme nous déplacons réellement le geste, il va quitter le chemin parce qu'il ne nettoie pas l' arrière-plan avant qu'il ne peint à nouveau le rectangle. J' ai également ajouté un hColorPool et fourni quelques couleurs. Donc, ici sur la ligne 10, je crée le nouveau hColorPool, puis je spécifie quelques couleurs à l'intérieur de ce pool. Jetons un coup d'oeil à r1 parce que r1 s'est ajusté un peu. Dans les trois premières versions, nous ne faisions vraiment rien avec le coup. Ici vous pouvez voir que je l'ai dit, eh bien, je veux faire le poids du coup aussi et je veux faire le remplissage un gris très foncé ; 111111. Donc, c'est le changement ici et r1 ajoute un poids de course et en fait changer le remplissage de cette EC à la 11. Encore une fois, le suivi de la souris n'a pas changé. On dirait que j'ai ralenti l'assouplissement. Donc, l'assouplissement est de 0,05 et le ressort va toujours être vraiment élastique à ce 0,95. Maintenant, le changement ici est en ligne 30 J'ai dit, ok, comme ça fonctionne, je veux mettre à jour le trait de r1 pour obtenir au hasard une couleur du tableau de couleurs des lignes 10. Donc, contrairement à 30, il va choisir au hasard une de ces couleurs. Maintenant, si je lance le croquis maintenant, vous devriez encore voir qu'il sélectionne au hasard une couleur de trait. Mais comme j'ai commencé à déplacer ma souris, je quitte le chemin de l'endroit où cette souris élastique suivre voyagé. Donc encore une fois, je peux penser à cela comme un pinceau lorsque je déplace la position de ma souris à l'écran. Alors, ajoutons à cela. Donc, j'ai pensé, eh bien, ok, c'est bien que nous choisissions couleur aléatoire, mais si vous regardez l'exemple 5, exemple 5 dit, eh bien, prenons la couleur en fait d'une image. Donc, si vous regardez l'exemple cinq, il y a en fait un dossier de données et à l'intérieur de ce dossier de données, est ce JPEG que j'ai pris à Sintra Portugal. Nous allons utiliser HPixelColorist pour voler la couleur de ce JPEG. Donc, si vous regardez la ligne trois ici, au lieu d'utiliser le pool de couleurs, nous utilisons HPixelColorist, puis sur les lignes 10 à 14, j'ai spécifié l'image que HPixelColorist devrait utiliser qui est, Hey, allez obtenir ce sintra.jpeg et vous pouvez voir que je suis également en train de passer l'argument que je veux seulement appliquer la coloration au remplissage. Pas au trait, pas au remplissage et au trait, mais seulement au remplissage. D' accord. Alors, regardons r1 HRect. Le seul ajustement réel que j'ai fait ici était que j'ai ajouté une couleur de trait de noir et mis dans un alpha de 150. Donc, le coup ne sera pas solide 255 noir, il va être un peu d'Alpha à elle. Mettre à jour le tirage vers le bas sur la ligne 35 ici, vous pouvez voir que nous disons colors.applycolortor_1 et parce que la couleur est spécifiée remplissage uniquement, il ne va en fait que mettre à jour les remplissages. Donc, si je vais de l'avant et exécuter ce croquis, maintenant j'ai un moyen d'utiliser un pinceau mais je suis en fait en train d'échantillonner les informations de couleur à partir du JPEG fourni. Donc, la position X et Y de ma souris vole la position x et y sur le JPEG et regarde la couleur du pixel à cette position spécifique x et y. Donc, c'est un truc que beaucoup d'entre nous ont vu utiliser Eric Netsky, où il a ces systèmes qui peignent et échantillonnent la couleur des photographies qu'il prend. Donc, jusqu'à maintenant, nous avons fait cinq examens, mais vous avez peut-être remarqué que nous n'avons pas présenté notre bon ami HCanvas. Donc, j'ai pensé que j'ajouterais un exemple six et à l'intérieur des exemples six, j'ai huit ajouté HCanvas c1 sur les lignes 11 à 12. Je dis, hé, je veux faire un HCanvas, l'auto clear est faux sur le HCanvas. Donc, je l'ai retiré de la ligne huit déplacé ici afin que je ne suis pas automatique effacer le HCanvas et j'ai mis dans ce beau fondu de quatre puis H.addC1 et puis si vous regardez vers le bas sur la ligne 25, je dis plutôt que H.Add je dis s'il vous plaît ajouter r1 au canevas C1. part ça, tout le reste est toujours le même. Si vous allez de l'avant et exécutez le croquis, il devrait ressembler exactement à la construction 5. Sauf que nous avons ce beau pixel parfait décoloration du geste en utilisant notre bon ami HCanvas. Impressionnant. Donc, nous commençons maintenant à regarder certains de ces comportements. C' est sympa parce que c'est un geste. Nous pouvons commencer à construire des pinceaux et peu importe que nous utilisions un HRect pour le pinceau ou SVG. Donc, voici une occasion parfaite de prendre quelques-unes des illustrations que nous avons dessinées dans la première classe et vous pouvez réellement utiliser votre SVG comme un remplacement de ce HRect afin que vous puissiez commencer à construire maintenant ces pinceaux personnalisés en utilisant HFollow. Maintenant, la section suivante, c'est comme une avancée parfaite. HRotate a juste couru sur son propre et la souris HFollow vous a demandé d'écouter la souris et de déplacer la souris autour. Dans la section suivante, nous allons parler de minuterie alors comment puis-je commencer à faire des choses en fonction d'un tempo. Donc, chaque minuteur me permettrait de peindre des choses ou d'introduire des choses basées sur un tempo. Bien sûr, si j'ai quelque chose qui est un tempo stable, je voudrais probablement aussi présenter HranDomTrigger et HranDomTrigger, comme le dit le minuteur, je veux tirer des trucs, je veux introduire des trucs, mais je ne veux pas le faire sur un rythme très régulier. Je veux randomiser ce tempo. Donc, c'est ce qu'est HandomTrigger. Donc, cela enveloppe un HFollow. Passons aux minuteries. Rendez-vous dans la section suivante. 14. Introduction à HTimer et HRandomTrigger: Donc, avec HTimer, nous avons fondamentalement une impulsion constante d'actions. C' est basé sur un tempo. Donc, si je définis un intervalle pour chaque 1000 millisecondes, cela signifierait que j'ai une action déclenchée chaque seconde. J' ai également la possibilité de définir quelque chose comme des cycles num, qui est combien de fois je veux que ce tempo fonctionne. Donc, quand ce pouls arrive, j'ai essentiellement un rappel. Donc, nous allons travailler sur un fichier qui utilise HTimer pour peindre très régulièrement des choses à l'écran. Donc, alors que HTimer utilise une impulsion constante pour créer quelque chose, un joli compagnon à cela est HRandomTrigger, et HRandomTrigger est basé sur un tempo aléatoire. Donc, il y a un pourcentage de chance variable. Donc, par exemple, si je disais que je voulais un déclencheur aléatoire mais que j'ai écrit quelque chose comme 1/15, cela signifierait que ce déclencheur aléatoire a une chance de 1 sur 15 d'être créé. Donc, vous créez toujours un tempo mais ce n'est pas un tempo stable, c'est un peu décalé en fonction d'un pourcentage aléatoire. Donc, vous pourriez avoir bop, bop bop bop, bop, bop, bop. Donc, nous sommes toujours en train de créer avec tempo, mais ce n'est pas un tempo stable comme précédemment utilisé dans HTimer. 15. Unité 5, Vidéo 1: D' accord. Dans cette section, nous allons couvrir les minuteries. HTimer, qui, comme je l'ai mentionné précédemment, va déclencher quelque chose basé sur une impulsion et chaque déclencheur aléatoire qui va déclencher aléatoirement une impulsion basée sur le hasard, la probabilité. Donc, dans cette vidéo, nous allons en fait attacher à cette vidéo, vous devriez voir qu'il y a en fait un fichier zip. Si vous téléchargez ce fichier zip, il devrait y avoir neuf fichiers dans ce zip. Les sept premiers traitent avec HTimer et puis il y a deux là-dedans qui traitent avec HRandomTrigger. Dans cette vidéo particulière, nous allons couvrir les quatre premiers exemples dans HTimer. Maintenant, allons-y et ouvrons l'exemple un, qui est HTimer un. Dans cet exemple particulier, en fait, rien n'est peint à l'écran. En fait, nous allons juste imprimer une sortie à la fenêtre de sortie ici à l'intérieur de Sublime Text 2 qui va juste dire Hello World et un compteur. Alors, jetons un oeil à minuterie. Il y a des arguments que nous voulons probablement traverser. Le premier est apparaître en haut. Je dis que HTimer est une minuterie. Oubliez le compteur un instant. Rien ne se passe beaucoup en termes de taille, de fond, quoi pas, mais ici sur les lignes 9 à 20, je spécifie en fait la minuterie. Donc, je dis, minuteur est égal à un nouveau HTimer et encore une fois, regardons certains des arguments de minuterie ici. Le premier est NumCycles. Maintenant, si vous n'avez pas cette ligne, alors la minuterie fonctionne indéfiniment. Ça va courir jusqu'à ce que tu fermes le film. Dans ce cas, je vous montre que je veux seulement que la minuterie tire 10 fois. Un, deux, trois, quatre, cinq, six, sept, huit, neuf, dix et puis il s'arrête. Maintenant, si cela doit fonctionner 10 fois, quel est l'intervalle entre chaque fois qu'il est viré ? Donc, vous pouvez voir ici sur la ligne 11, nous avons spécifié un intervalle et il est en fait en millisecondes. Donc, dans ce cas, il va se déclencher toutes les 500 millisecondes ou environ toutes les demi-secondes. Que se passe-t-il quand la minuterie se déclenche ? C' est en fait notre rappel. Donc, vous verrez ici à l'intérieur du rappel, encore une fois, je vais juste imprimer dans la fenêtre de sortie en bas de Sublime Text 2. Je vais juste dire bonjour, monde et puis contre, combien de fois cela a réellement déclenché afin que je puisse tester qu'il s' arrête réellement après que NumCycles ait atteint 10. Donc, pour compter, ici en haut, je dis que le compteur est égal à un, puis sur la ligne 15, je dis, ok, imprimez « bonjour, monde » plus quelle que soit la valeur du compteur. Puis après qu'il a fait avec ça, je dis juste, plus, plus compteur. plus, plus compteur dit ajouter un sur la valeur du compteur. Donc, un plus un devient deux. Deux plus un devient trois. Trois plus un devient quatre, et ainsi de suite. Donc, allons de l'avant et testez ce croquis, et encore une fois, nous ne devrions rien voir sur scène mais vous devriez remarquer à l'intérieur de la fenêtre de sortie qu'il dit vraiment bonjour, monde 10 fois, un à 10 et alors vous remarquerez qu'il s'arrête en fait. Donc, encore une fois, HTimer nous permet d'exécuter quelque chose basé sur une impulsion et en utilisant l'argument de NumCycles, je peux le dire quand je veux réellement qu'il s'éteigne. Vous allez voir un peu plus tard cela serait très utile avec des piscines. Parce que si je dis que je veux dessiner 100 choses, peut-être que je veux que ce minuteur s'éteigne après avoir affiché tous les 100 objets. Super. Donc, je vais aller de l'avant et fermer ce dossier et je vais passer à construire deux. Maintenant, construisez deux, je vais commencer à faire des trucs, visuel à l'écran. Donc, nous allons juste parcourir ce fichier et voir ce que nous avons en train de se passer ici. Donc, en haut, encore une fois, nous avons notre HTimer, nous avons notre HRECT, et encore une fois rien ne se passe beaucoup avec l'arrière-plan. Si nous regardons r1, lignes 9 à 15, on dirait que nous faisons un rectangle, encore une fois, ce rectangle est 100 par 100 avec un rayon de coin de 10. Je l'ajoute à la scène, H.Ajouter l'emplacement. Maintenant, regardons l'emplacement ici. L' emplacement dit : « Hé, je veux que vous choisissiez une place au hasard à l'écran. Donc, je dis, entier aléatoire avec une hauteur aléatoire entière. Cela signifie essentiellement qu'il va choisir un nombre entre zéro et 640, mais parce qu'il a enveloppé un int devant cela signifie que ce sera un nombre entier donc il ne va pas choisir des décimales. Donc, je vais prendre 1, 45, 122, et cetera. Ce HRect n'a pas d'accident vasculaire cérébral. Il a un remplissage d'orange, FF3300 et encore une fois, j'ai tourné 45 degrés. Maintenant, avant d'arriver à la minuterie, nous comprenons juste que nous avons notre scène et qu'elle va juste choisir un endroit au hasard et il va peindre le rectangle. Maintenant, ce que je fais dans le minuteur, c'est que je vais reerandomiser la position de r1. Donc, si vous regardez ici, comme dans le premier fichier, il n'y a pas de NumCycles, qui signifie que je veux que cela fonctionne infiniment. Donc, si vous regardez construire deux ici, il n'y a pas de NumCycles, qui signifie que cette minuterie va juste fonctionner jusqu'à ce que nous fermions le film. L' intervalle est toutes les 250 millisecondes, donc un quart de seconde. Le rappel dit juste, « Hé, r1. Je veux réinitialiser votre emplacement largeur aléatoire, hauteur aléatoire. Donc maintenant, si nous testons le croquis, que vous devriez voir à l'écran ici est que toutes les 250 millisecondes, une impulsion très rapide, il est de reerandomiser l'emplacement de r1. Donc, encore une fois, nous ne traitons pas de pool à ce stade, nous avons juste un atout et basé sur un tempo ici, 250 millisecondes, nous sommes en train de réerandomiser l'emplacement de ce rectangle. Super. Passons à construire trois. Maintenant, construire trois, encore une fois je vais introduire quelques nouvelles choses, mais c'est vraiment juste une copie de deux. Le premier est que je vais ajouter un pool de couleurs. Donc, ici en haut vous remarquez que j'ai mis une couleur hColorPool et je viens d'ajouter quelques couleurs ici sur la ligne 10. Maintenant, la ligne 17 est un peu une modification. Au lieu de passer une couleur, je dis, hey couleurs, donnez-moi une couleur aléatoire de haut en haut. Donc, ligne 17, il va au hasard choisir l'une des couleurs à l'intérieur de notre hColorPool. Maintenant, j'ai ajouté une autre chose ici, c'est que je voulais réellement randomiser la taille. Donc j'ai dit, d'accord, la taille devrait être aléatoire trois plus 25. Donc, si vous regardez ça, par exemple, trois fois 25, ça va choisir un nombre aléatoire zéro, un, deux. Donc, zéro fois 25 est zéro, une fois 25 est 25, et deux fois 25 est 50. Donc, nous savons que cette randomisation va nous donner les chiffres zéro, 25, et 50. Mais regardez, après qu'il ait choisi ce hasard, il en ajoute 25. Donc, le nombre que nous obtenons est une taille de 25, une taille de 50, et une taille de 75. Donc, nous sommes juste en train de randomiser ces trois nombres : 25, 50 et 75. Donc, encore une fois, il n'y a pas de NumCycles, cela va fonctionner infiniment. L' intervalle est maintenant de 50 millisecondes, donc cela va arriver très rapidement. Encore une fois, il ne parle qu'à r1. À la ligne 28, je dis oui, je veux randomiser l'emplacement. Mais puis je dis, hé, je veux aussi re-choisir une nouvelle couleur du hColorPool, et bon, nous allons choisir une nouvelle taille, et encore une fois, cette taille va être soit 25, 50, ou 75. Maintenant, voici la chose que je veux que vous remarquiez est automatique clair est en fait réglé sur faux. Maintenant, faisons semblant un instant que ce n'est pas là, si je découpe ça. Si je teste le croquis ici, encore une fois, remarquez que c'est r1, nous déplaçons juste cet élément, mais nous réerandomiser sa position, nous réerandomiser la couleur de remplissage, et nous sommes en train de réerandomiser la taille. Mais encore une fois, la raison pour laquelle j'ai mis dans cette auto-effacer un faux est parce que je ne veux pas qu'il efface l'arrière-plan. Donc, si cela fonctionne maintenant, vous remarquerez qu'il a l'air de peindre un nombre infini de rectangles mais en réalité, il ne fait que peindre celui et juste changer son emplacement, changer sa couleur de remplissage, et en changeant sa taille. Mais parce que nous disons auto-effacer false, il n'efface pas l'affichage. Donc, cela finira par remplir toute la scène. Super. Donc, vous pouvez probablement comprendre à ce stade ce que je vais faire avec l'exemple 4. Alors, allons de l'avant et fermons ceci et passons sur HTimer quatre et assez sûr, la première chose que vous auriez dû attendre était que nous allions ajouter HCanvas. Rerandomize ce rectangle mais à l'intérieur d'une toile pour que nous puissions réellement le faire disparaître. Alors, regardez les lignes 8. Encore une fois, j'ai pris l'auto-clear true hors de la scène et l'ai ajouté aux objets de canevas. Donc, vous pouvez voir ici c1 est un nouveau HCanvas, effacer automatiquement faux, et il va faire un fondu de deux et nous ajoutons notre c1 HCanvas à H, la scène. Encore une fois, regardez ici sur la ligne 17, au lieu de faire h.add r1, nous faisons c1.add r1. Donc, nous sommes en train de peindre le rectangle à l'intérieur du HCanvas. Autre que cela, tout le code reste inchangé. Allons de l'avant et sauvegardons et testez ce croquis, et vous devriez remarquer qu'il exécute la même animation en trois, mais notre magnifique HCanvas brûle lentement les rectangles. Impressionnant. Donc, je vais terminer cette vidéo ici. On va passer à la prochaine vidéo. La prochaine vidéo, nous allons traiter avec HTimer 5, 6 et 7. Mais au moins à ce stade, vous comprenez que HTimer est un moyen pour nous d'attacher quelque chose mais basé sur un pouls constant. Quand nous passons à HTimer 5, nous allons commencer à parler de piscines comme nous l'avons fait en première classe. Alors, finissons ici et je te verrai dans la prochaine vidéo. 16. Unité 5, Vidéo 2: D' accord. Je suis super excité par ces trois prochains fichiers. La raison pour laquelle j'aime vraiment ces trois prochains fichiers est que j'ai l'impression qu'ils sont si étroitement liés à la structure aux fichiers que nous avons fait en première classe. Donc, il y a quelques choses ici que vous serez en mesure de copier et coller de cette première classe et réellement obtenir des choses animées. Alors, regardons HTimer5. Encore une fois, HTimer5 commence vraiment à utiliser la structure que nous avons fait dans la première classe. En ce sens que finalement, nous disons bonjour à HDrawablePool. Donc, ce fichier très similaire aux premiers avec quelques légères modifications ici. Maintenant, hDrawablePool piscine en haut au sommet. C' est génial, et je vais mettre en évidence tous ces trucs ici qui sont les lignes 9 à 33. Avant même de passer à travers ce code, je veux juste dire ce qui manque. Ce qui manque, c'est ce qui se trouverait à la ligne 34, qui se situerait entre les lignes 32 et 33. Ce serait ça. RequesTall. Alors, dans cette première classe, quand tu as appelé RequesTall, tu disais : « Donne-moi tout dans la piscine. Peignez-le à l'écran parce que nous faisons de l'impression et j'ai besoin de tout pour le moment. » Donc, la première chose que vous devriez remarquer, c'est que ça a disparu. La raison pour laquelle cela a disparu est parce qu'il s'agit d' un cours d'animation et que nous voulons animer notre œuvre. Donc, nous allons toujours utiliser Pool. Nous pouvons même utiliser Pool en conjonction avec une mise en page de grille ou de forme ou tout ce que vous avez fait avec la première classe. Mais si vous supprimez cette RequesTall et coupez dans cette minuterie, vous pouvez réellement animer vos grilles sur. Donc, la première chose que vous devriez remarquer est que l'appel à RequesTall est en fait enlevé. Allons de l'avant et regardons cette piscine qu'on a là. Sur la ligne 9, je dis que la piscine est nouvelle HDrawablePool et, hé, je veux peindre une centaine de choses. Il est écrit Pool.AutoAddToStage pour que nous sachions qu'il va peindre sur la scène. Eh bien, qu'est-ce qu'on peint ? Eh bien, nous peignons notre bon ami, Hrect, et il a un quart de rayon d'arrondi de 10. On a un appel à un coloriste. Je ne suis pas sûr si nous avons couvert cela dans la première classe étant capable de faire le raccourci au lieu de dire un hColorPool, hDrawablePool peut être appelé une méthode coloriste. À l'intérieur de la méthode coloriste, je crée un nouveau hColorPool et je transmets les couleurs, et je spécifie que je veux seulement qu'elles colorient les remplissages. Maintenant, vous vous souvenez peut-être de la première classe, vous avez cette méthode onCreate ici, et cette méthode onCreate est ce qui arrive à chaque HRect individuel à toutes les centaines de nos HRECT qui sont créés à l'écran. Alors, je dis : « Ok, cool. hDrawabled, que dois-je faire avec ce drawable ? » Le Drawable étant le HRECT. Pourquoi, je dirais, « Ok, je veux porter le poids à quatre. Je veux que le coup soit noir et que l'Alpha soit 75 au lieu de 255. Comme les quatre premiers fichiers, l'emplacement est la largeur aléatoire, la hauteur aléatoire. Je tourne la rotation à 45 degrés. Encore une fois, je fais une taille aléatoire ici donc la taille va être 50, 100, et 150 parce que nous faisons au hasard trois fois 50, plus 50, et l'ancre à H.CENTER. Donc, ces lignes ici, 9 à 33, sont la mise en place la piscine et que voulez-vous faire à chacun des éléments individuels à l'intérieur de cette piscine ? Mais encore une fois, RequesTall est parti. Alors, qu'est-ce qu'on fait ici ? Eh bien, nous avons notre minuteur. Si vous regardez notre minuterie ici, je dis, « Eh bien, je veux animer chacun de ces 100 objets plutôt que de les voir tous en même temps. » Alors, regardez la ligne 36, NumCycles. NumCycles est pool.numActive. NumActive va compter combien de choses sont peintes à l'écran à la fois, jusqu'à ce qu'il atteigne une centaine. Donc, Pool.numActive est un moyen pour nous de savoir si nous avons attaché tous nos 100 actifs à l'écran. Si nous avons tous les 100 actifs sur l'écran, alors ce NumCycles va arrêter le minuteur. L' intervalle est toutes les 100 millisecondes et quand cette minuterie se déclenche toutes les 100 millisecondes, que va-t-on faire ? C' est notre rappel. À l'intérieur de notre rappel, nous disons « Hé piscine, je veux demander un de tes gars. » Lorsque vous dites pool.request, il monte à la piscine. Il dit, « Hé cool, vous demandez le premier, je peux vous donner une centaine sur créer, » et il déclenche le onCreate. Donc, cette minuterie continue de faire une pool.request jusqu'à ce que nous obtenions jusqu'à une centaine. Une fois que nous aurons jusqu'à une centaine, le NumCycles va arrêter le minuteur et pool.request ne se déclenchera pas la 101ème fois. Il ne tira qu'une centaine de fois. La fonction de tirage, il a juste un H.DrawStage. Impressionnant. Vous allez de l'avant et exécutez ce croquis, et ce qui va se passer va s'animer. Ce n'est pas le même rectangle, c'est une centaine de rectangles différents. Donc, c'est là que cela varie de la première, eh bien, HTimer4, par exemple. Dans HTimer4, nous étions juste en train de bouger autour d'un élément. Ici, ce que nous voyons à l'écran est 100 éléments distincts. Donc, comme je l'ai dit, vous pouvez prendre une partie de ce code et découper le truc du minuteur, le coller dans les fichiers que nous avons fait en première classe et vous pourriez avoir vos grilles animées parce que vous ne dites plus requesTall, vous utilisez une minuterie pour animer l'œuvre, un peu à la fois. Stellaire. Maintenant, laissez-moi vous dire pourquoi c'est stellaire, c'est parce que regardez ce qui se passe quand on va à HTimer six. Maintenant, il suffit de scruter certaines choses qui ont changé. Donc cinq et six sont des copies l'un de l'autre avec quelques éditions. Htimer six, nous avons notre HCanvas, c'est génial. Donc, nous avons un canevas là-dedans, vous pouvez voir sur les lignes 11 et 12, nous ajoutons le canevas à la scène, comme je m'y attendais, AutoClear est faux et Josh a fait un fondu à cinq. Donc, encore une fois, ça va brûler cette animation. Désolé, je mets juste un montage très rapide parce que j'ai réalisé que j' ai sauté quelque chose et c'est la ligne 17. Ligne 17, encore une fois, est un nouvel ajout, qui est dans le fichier précédent de HTimer quatre, nous avons dit Pool.AutoAddToStage, ce qui signifie que les actifs HRectangle ont été ajoutés à la scène. Mais parce que HTimer six a en fait un HCanvas, regardez l'édition sur la ligne 17, je dis, « Hé, pool.Autoparent dans c1. » Donc, ce code est changé parce que nous ne voulons pas mettre les HRectangles sur la scène, nous voulons réellement les mettre imbriqués à l'intérieur du parent de c1. Ok, montage rapide, retour à ce que je disais ensuite. part cela, il n'y a pas beaucoup de différence, sauf pour la ligne 35. Regarde ça. Ainsi, si OnCreate crée 100 HRectangles uniques, la ligne 35 crée un hRotate unique avec chaque ressource individuelle. Donc, ce que cela signifie, c'est que maintenant il y a 100 rectangles à l'écran, ils sont tous animés séparément, et ils ont leur propre hRotate unique. Regarde ce que j'ai fait ici, j'ai juste mis un peu au hasard. J' ai dit : « Hé, donne-moi une plage, du négatif 2 au positif 2. » Donc, certains vont tourner dans le sens des aiguilles d'une montre et d' autres vont tourner dans le sens inverse des aiguilles d'une montre, mais cette rotation dans le sens des aiguilles d'une montre n'ira pas plus que deux degrés positifs ou deux degrés négatifs. Maintenant, on va avoir des zéros ? Ouais, ce qui veut dire que certains actifs ne tournent pas du tout. C' est tout à fait possible. Alors, testez le croquis et regardez ce qui se passe. HTimer, toutes les 100 millisecondes demande un nouveau HRectangle à partir du hDrawablePool. Il attache le hRectangle, puis attache un hRotate à cet actif. Une chose que j'ai oublié de mentionner est, laissez-moi juste fermer ça ici, en fait, j'ai changé l'ancre. J' ai mis ce négatif 25 pour que vous ayez cette œuvre d'art. Donc, le pivot se passe négatif 25 au-dessus du HRectangle. Alors, regarde ça. Par exemple, si je change l'intervalle à 1 000, ce serait toutes les secondes. Si j'ai testé le croquis ici, vous remarquerez qu'il y en a un, deux, trois, quatre, cinq, six, sept, huit, neuf. Tu vois, ça se passe sur un tempo et ça va le faire jusqu'à ce que les 100 rectangles soient peints hors de la piscine. Mais encore une fois, et cela commence à faire allusion à la section des combos, qui est, oh mon Dieu, le minuteur introduit les éléments à l'écran mais à mesure qu'ils sont introduits, nous créons un hRotate unique avec chaque atout unique. Donc, ceux-ci sont tous animés séparément et ils obtiennent leur propre hRotate unique, ce qui est beau. C' est un beau dossier. Maintenant, bien sûr, je vais faire ce que j'ai fait dans certains de ces autres petits scénarios, qui est regarder HTimer 7. HTimer sept est une copie de HTimer six, mais je ne pouvais m'empêcher de mettre ce code HosCillator et ce code HosCillator à nouveau, va changer l'échelle. Donc encore une fois, ici j'ai changé la piscine. Je ne joins que 50 articles cette fois au lieu de 100. L' arrondi est de 40 sur celui-ci. L'oscillateur va être une échelle oscillante. Donc encore une fois, nous allons couvrir l'oscillateur, je ne vais pas briser cela mais la bonne chose est que ça va osciller - HTimer va attacher un actif unique, donnant à cet actif unique un hRotate, et un HosCillator unique. Donc, je ne perdrai plus votre temps ici. Exécutez ceci et maintenant nous obtenons les HRotates uniques et nous obtenons également les HosCillators uniques sur chacun des 58 rectangles individuels. Croyez-le ou non, vous pouvez ouvrir ce fichier en conjonction avec celui que vous avez fait dans la première classe, et croyez-le ou non ces grilles que vous avez faites en utilisant HGridLayout, vous pouvez jeter dans un HRotate et un HosCillator, et vos grilles commenceront à s'animer. Donc, nous allons finir le truc HTimer, nous allons passer à HRandomTrigger. Mais je dirais à ce stade, essayez d'arrêter ce fichier et de revenir à certains de ce travail que nous avons fait en première classe, et oui, en prenant cette requête tout, en mettant un minuteur pour ajouter chacun de vos actifs un par un. Essayez de copier et coller les hRotate et Hoscillator et regardez vos grilles prendre vie. Ok, cette vidéo est terminée, je te verrai dans la prochaine, qui est HRandom trigger. À plus tard. 17. Unité 5, Vidéo 3: Ok, cette vidéo ne devrait pas être trop longue parce que c'est juste une mise à jour de ce que nous avons déjà couvert dans HTimer. Donc, encore une fois, pour le répéter, chaque minuteur utilise un tempo cohérent pour créer des choses. Donc, un déclencheur aléatoire nous aide juste à compenser ce tempo littéral. Donc, allons de l'avant et regardons HandomTrigger un, et encore une fois, il devrait ressembler à ce que nous venons de créer en utilisant le minuteur. Alors, disons ça. Ici en haut, j'ai HRandomTrigger est un minuteur aléatoire, et le code peut-être structuré un peu différemment dans le sens où, comme si je regarde, laissez-moi tirer construire quatre ici pendant une seconde. Donc, si vous regardez HTimer quatre, nous avions ce bloc de code juste ici qui a créé une instance de la minuterie et ensuite fourni quel était l'intervalle et le rappel. Donc, si nous regardons HRandomTrigger, c'est vraiment juste un rappel, et ce que je veux que nous regardions maintenant est la ligne 14. Donc, la ligne 14 dit, « Ok, je veux créer une instance de ce HandomTrigger, et je vais vous fournir un numéro qui représente le hasard. » Maintenant, avant de parler de hasard, encore une fois, la ligne 14 est comment j'écrirais ceci parce que je veux taper de peur. Cependant, la ligne 15 est en fait la même que ci-dessus. Vous pouvez dire, d'accord, je veux créer un nouveau HranDomTrigger et vous pourriez ensuite enchaîner une chance et présenter le numéro de chance à l'intérieur de là. Donc, j'aime 14 parce que c'est évidemment moins taper. Maintenant, regardons le hasard. Donc, le hasard doit être décrit de cette façon. IF/15, donc essentiellement, je dis qu'il y a une chance sur 15 que le déclencheur aléatoire va se déclencher. Donc, une grande analogie est que si vous découpez un tas de nombres, de zéro à 14, et les coupez en morceaux de papier séparés et mettez tous ces morceaux de papier dans un chapeau, et que vous atteignez ce chapeau et attrapez un nombre, si c'était zéro, alors le rappel se déclencherait. Si ce n'est pas zéro, alors le morceau de papier revient dans le chapeau et vous recommencez et reprenez au hasard. Donc parce qu'il n'y a que 15 morceaux de papier, vous avez une chance sur 15 de tirer un zéro. Si vous retirez un zéro, alors les lignes 25 à 31, ce rappel va revenir vrai et il va se déclencher. Maintenant, si vous regardez la ligne 28 ici, encore une fois, c'est très similaire à ce que nous avons fait dans HTimer, tout ce que je fais est de repositionner l'emplacement de notre rectangle R1h, qui est la largeur aléatoire et la hauteur aléatoire quelque part à l'écran. Donc, parlons encore un peu du hasard parce que vous remarquerez peut-être que nous avons introduit ce F. Pour un déclencheur aléatoire, lorsque vous spécifiez une chance, vous devez passer ce nombre comme un flotteur, donc c'est ce qui est qui se passe là, je mets réellement ce F derrière le nombre pour que je passe le suffixe de F dit au compilateur que le nombre entrant est un flotteur. Encore une fois, j'ai une chance sur 15 de me faire tirer. Maintenant, continuons et testons ce croquis, et encore une fois, nous ne changeons que l'emplacement de r1, mais vous remarquerez peut-être que le mouvement est erratique. J' aime ça parce que, encore une fois, HTimer va toujours nous donner ce tempo cohérent, et je voulais quelque chose qui ne me semblait  : « Oh, il y a un rythme ici, je veux rompre ce rythme. » Donc encore une fois, il a une chance sur 15 de se faire tirer au sort, donc si vous n'aviez pas compris, vous pourriez évidemment passer dans un F divisé par deux et cela aurait 50 pour cent de chances de se faire tirer au sort. Donc, plus vous gagnez ce nombre, plus votre chance aléatoire sera lente de tirer. Donc, un sur 15, j'aime ce modèle non-répétitif et il a une belle sensation à elle. Donc, plutôt que de construire une tonne de fichiers avec ceci, si vous regardez HRandomTrigger deux, c'est vraiment notre fichier HTimer sept. Il a HCanvas, il a notre ColorPool, il a un DrawablePool, mais au lieu d'utiliser HTimer, nous avons HRandomTrigger. Encore une fois, vous pouvez voir que j'ai mis dans un minuteur aléatoire ici, un dans la 30e chance d'être créé, et encore une fois, c'est le rappel pour tirer réellement à partir du DrawablePool. Donc encore une fois, vous remarquerez que le « Demander tout » n'est pas là, et juste ici sur les lignes 45 à 51 est mon minuteur aléatoire, donc il a une chance dans la 30e de faire une requête de retour de pool. Maintenant, je devrais probablement mentionner que cela n'a évidemment pas comme HTimer sept a, si j'ouvre ce fichier, vous remarquerez qu'il y a un nombre de cycles ici, donc nous savons que ce minuteur va réellement s'arrêter après qu'il atteindra, dans cette affaire, 50 objets. Donc, le déclencheur aléatoire n'a pas cet argument, donc ce qui se passe est que ce pool.request, finit par atteindre 50, puis le déclencheur aléatoire continue en fait, mais il dit, « Hey Pool, puis-je en avoir un ? » Pool ne cesse de le nier parce que tous les 50 éléments ont été créés à l'écran. Donc, si je l'exécute à nouveau, c'est juste un moyen d'échelonner aléatoirement le tempo de cette animation. Si vous avez réellement couru HTimer sept à côté de HRandomTrigger deux, vous remarqueriez que le rythme de l'animation est en fait décalé, que dans HTimer sept vous remarqueriez qu'il y a un rythme cohérent à ces choses oscillant à l'écran car ils ont été créés sur un tempo. Attendu que, HRandomTrigger deux, parce qu'il appelle aléatoirement des choses à l'écran, vous remarquerez que l' esthétique globale de l'animation semble plus chaotique que HTimer Seven. Donc, cela enveloppe cette section sur les minuteurs, et bien sûr, c'est un segway parfait pour couvrir chaque interpolation et plonger plus loin dans le rappel parce que nous voulons maintenant utiliser ces deux choses pour commencer à déplacer les choses à l'écran et les avoir se déplacer dans certaines positions et ainsi de suite et ainsi de suite. Donc, cela enveloppe cette section, vous voir dans chaque interpolation et chaque rappel. À plus tard. 18. Introduction à HTween et HCallback: Donc, après avoir couvert les minuteurs, il est probablement beaucoup de sens de passer dans cette section suivante qui est HTween et hCallback. HTWeen est fondamentalement déplacer un objet d'un emplacement à un autre, donc du point A au point B. Certains arguments que HTWeen utilise est cible, qui avons-nous déménagé ? Propriété, quel genre de propriété est-ce que nous interpolons ? Non seulement nous pouvons interpoler d'un endroit à autre, mais nous pourrions interférer de zéro Alpha à Alpha complet. On pourrait interférer 0 rotation à 360 degrés. Nous pouvons intercaler de petite échelle à plus grande échelle. Donc, HtWeen veut savoir quelle propriété sommes-nous en fait interpolation avec. Nous avons des choses comme le début et la fin ; quelle est la position de départ quelle est la position de fin. Y a-t-il de l'assouplissement et du printemps ? Comme nous en avons parlé dans HFollow. Est-ce un mouvement régulier ou a-t-il une sorte de rebond ou d'élasticité ? Maintenant, vous verrez dans ces premiers exemples, HTWeen, nous allons déplacer quelque chose du point A au point B. Mais nous pourrions vouloir parler de hCallback, maintenant hCallback est quelque chose que nous avons réellement écrit dans la première classe mais nous n'avons pas eu beaucoup de discussions à ce sujet. HCallback est un moyen pour nous de savoir si nous sommes arrivés à notre destination. Donc, par exemple, si j'utilise HTWeen pour passer du point A au point B, peut-être que je veux savoir quand il est arrivé au point B, donc nous allons utiliser hCallback en conjonction avec HTWeens afin que l'objet se déplace d'un emplacement à un nouveau emplacement, et une fois qu'il est arrivé à cet endroit, HCallback dira, « Hé, vous êtes arrivé à votre destination. » Pourquoi est-ce important ? Parce que dans un fichier de mutation que nous allons créer, nous allons utiliser HTWeen et hCallback pour créer fondamentalement une boucle. Donc, nous allons animer du point A au point B, quand il arrivera au point B, HCallback nous fera savoir qu'il est arrivé à sa destination et ensuite nous le ferons revenir à A. Donc, nous allons juste passer de A à B, B à A, A à B et continuelle. Donc HTWeen, très excitant parce que maintenant nous commençons à déplacer les choses autour à l'écran. Mais encore une fois, rappelez-vous que l'interpolation n'est pas seulement nécessairement position. Nous allons intercaler toutes sortes de choses comme Alpha, échelle et rotation. 19. Unité 6, Vidéo 1: Wow ! Ok, c'est là que ça va devenir lourd étoile noire. Il va y avoir beaucoup plus d'exemples qui se passent maintenant, et je vais probablement diviser beaucoup de ces fichiers en beaucoup de vidéos séparées. Donc, ces dernières sections, Htween, HsWarm, Hoscillator combos, c'est là que ça devient lourd. J' espère que vous apprécierez ce processus parce que c'est là qu'il commence à produire de très beaux résultats. Nous sommes à HTween. Maintenant, HTWeen se déplace simplement d'un état à un autre état. Je devrais probablement préfacer que attaché à cette vidéo quelque part est le fichier zip. À l'intérieur de ce fichier zip, vous verrez qu'il y a 13 exemples, et ce qui est bien, c'est que si vous regardez les exemples 5, 12 et 13, j'ai attaché une 3D à elle parce que nous allons réellement commencer à parler de déplacer des choses dans trois dimensions. Donc, vous verrez que j'ai commencé à marquer certains des fichiers où j'introduit certains aspects clés. Dans cette vidéo, je veux couvrir l'exemple un et l'exemple deux, nous allons juste garder ces vidéos aussi douces que possible et essayer de ne pas les faire 13 minutes comme toutes les autres vidéos. HTween, il se déplace d'un état à un autre état, et j'utilise ce langage très spécifiquement parce que cela ne signifie pas nécessairement emplacement, se déplacer d'une position à une autre position. Dans le cas de ces premiers fichiers, nous allons passer d'une position à une autre, mais l'interpolation peut être une rotation, il peut être à l'échelle, il peut être Alpha, et cetera. Donc, nous allons juste décomposer lentement ces deux premiers fichiers ici. Donc, en haut, j'ai, comme prévu, notre r1, notre HRectangle. Maintenant, je vais sauter quelques trucs. Passons aux lignes 12 à 18. Encore une fois, nous sommes en train de passer en revue ici. Nous avons un rectangle qui est un 100 sur 100, arrondi de 10, nous l'ajoutons à la scène, l'ancre est au centre, l' emplacement a une variable de StartX. On en parlera dans une seconde. L' art n'a aucun trait, et il a un remplissage de ce ff3300 orange foncé. Maintenant, revenons au sommet. Parce que j'ai ajouté quelques trucs ici, je veux essentiellement animer le rectangle de la position A à la position B. Donc, nous allons le faire en utilisant HTWeen. Donc, en haut, vous voyez que j'ai Httween t1, interpolation un. Sur les lignes 4 et 5, j'ai la position StartX, qui va être un axe x de 160, et j'ai la position EndX. Je veux qu'il anime à 480 pixels sur l'écran, donc la position de départ, la position de fin. Donc, maintenant la ligne 15 a probablement un peu de sens parce que vous dites, « Heym je veux définir la position initiale de ce rectangle », qui est un axe x de 160, StartX, et un axe y de, juste me mettre au milieu de l'écran, hauteur divisée par deux. Avant de parler de l'interpolation, descendons ici à la fonction de dessin et tout comme dans les exemples de rotation, j'ai mis un peu de code de traitement pour que je puisse voir les deux points. Donc, vous pouvez voir ici, j'ai dit, pas de remplissage, poids de course est deux, le trait est une couleur sarcelle et j'ai créé deux ellipses, et les ellipses sont, StartX, hauteur divisée par deux, endX, hauteur divisée par deux. Donc, j'ai deux petits points qui me montrent visuellement où est la position de départ et où est la position de fin. Maintenant, parlons de l'interpolation. Donc, je dis, « Ok, t1, entre un, vous devez savoir des choses », et les deux premiers sont évidemment les plus importants. Ils sont, qui est la cible et quelle est la propriété ? Donc, la cible est r1 qui est notre HRect. Nous disons que HRect est l'atout que nous voulons déplacer et qu'il dit : « Ok, quelle est la propriété ? » Encore une fois, si vous regardez le code ici, je pourrais avoir cela sur sa propre ligne séparée, vous pourriez le briser de cette façon. Habituellement, je mets ces deux-là juste après l'autre pour que je puisse voir qui obtient l'action et quelle est la propriété de l'action. Dans ce cas, H.emplacement, donc Josh déplace des choses d'une position à une autre position, mais cette propriété pourrait être H.alpha, H.scale, H.Rotate, constantes, ainsi de suite. On va le déplacer de : « Ouais, tu ne sais pas maintenant est-ce qu'on le déplace ? » Sacrée merdique ! Parfois, ma bouche bouge plus vite que mon cerveau, et je travaille à résoudre ce problème. Salut, l'emplacement des propriétés, je vais le déplacer d'une position à une autre position. Je peux avoir une alléluia. D'accord. Regardons la prochaine propriété ici, .start. Maintenant, je pense que si vous regardez le Htween.pde, début et fin va toujours être une position x, y, ou z. Donc, dans ce cas, le .start est StartX. Donc, cet axe x de 160, et cette position finale sera divisée en hauteur par deux. Notre position finale sera EndX et la hauteur divisée par deux, et encore une fois, vous remarquerez ici sur la ligne 26, je n'ai spécifié que la facilité qui est 0.05. Maintenant, quand je teste ce croquis, regardons ce qui se passe. Encore une fois, cela va se déclencher immédiatement. Donc, je vais aller de l'avant et courir cela et très vite, vous devriez voir boom, il est passé du point A au point B puis s'est arrêté. Je n'ai pas spécifié pour qu'il fasse quelque chose de différent, donc l'action a immédiatement lieu. Donc, encore une fois, vous devriez remarquer qu'il est passé de cette première position à cette deuxième position et qu'il s'est assoupli à cette position. Donc, construire deux, la seule chose que j'ai fait dans la construction deux est juste montré que dans l'exemple deux, c'est que vous pouvez ajouter de l'élasticité comme nous l'avons fait dans certains des fichiers précédents. Donc, dans ce cas, j'ai dit que la facilité est de 0,05 et que le ressort est élastique, donc c'est de 0,95. Donc, si vous testez ce croquis particulier, vous devriez remarquer qu'il bandes de caoutchouc en position. Donc, quand vous testez cela, il va immédiatement commencer à aller et il bandes de caoutchouc dans cette position finale. Essayons de garder ces courts, je vais essayer de faire travailler ma bouche en synchronisation avec mon cerveau, et je te verrai dans la prochaine vidéo. 20. Unité 6, Vidéo 2: D' accord. Dans cette vidéo, nous allons couvrir les exemples trois et quatre. Pour cet exemple trois, je veux vraiment travailler à travers toute la structure ici parce que maintenant je vais utiliser HTWeen conjointement avec des rappels pour déplacer notre actif de position A à la position B, puis quand il est arrivé à la position B, je veux le déplacer à nouveau à la position A, puis démarrer cette boucle. Il passera donc de A à B, B à A, A à B ainsi de suite. Ok, donc prenons un peu de temps pour parcourir ce code et tout décomposer. Donc, en haut, nous avons notre r1 et nous avons notre t1, non ? Donc, nous avons notre rectangle et nous avons notre interpolation initiale et l'interpolation va déplacer ce rectangle autour de l'écran. Maintenant, j'ai, sur la ligne 3 ici, HCallback et voici où je veux vraiment m' assurer que tout le monde comprend ce qui se passe ici. Maintenant, n'oublions pas que lorsque vous testez ce film, l'interpolation démarre et donc il va passer de A à B. Ce que je veux arriver est un rappel pour démarrer notre boucle. Donc nous savons qu'à la seconde où le film commence, il va déjà commencer de A à B. Alors regardez mes rappels ici. J' ai TweenDone1 et TweenDone2. Maintenant, juste conceptuellement, démarrez le film, passe de A à B. Donc, ce que je veux que TweenDone1 fasse est de me savoir qu'il est arrivé à B et que je veux le déplacer à A. Donc TweenDone1 va être l'animation de B à A. Alors évidemment, si ça passe de B à A, je veux que TweenDone2 me dise, hey vous êtes revenu à A, revenons maintenant à B. Donc TweenDone2 va de A à B. Ok. Passons à la prochaine chose ici. Josh adore les PVectors. J' adore les PVectors. PVectors sont un moyen pour nous d'empaqueter une position dans l'espace. Ainsi, un PVector peut être bidimensionnel ou il peut être tridimensionnel. Dans ce cas, c'est un point bidimensionnel. Deux dimensions étant juste un point X et un point Y. Mais les PVectors peuvent aussi être un xy et un z. Alors, quelle meilleure façon de mettre en place est notre point A et notre point B que d'utiliser un PVector. C' est donc un changement par rapport aux exemples un et deux. Donc, j'ai dit, d'accord, laissez-moi juste, avant de penser à ça, je dois me rappeler que ma taille est 640 par 640. Donc, parce que je ne bouge que le x, je dois me rappeler que l'axe y était la hauteur divisée par 2 mais la hauteur divisée par 2, 640 divisé par 2, est 320. Donc, si vous regardez ici, pour mon PVector j'ai dit, hey votre premier point est 160 sur l'axe des x et 320 sur l'axe des y, et la bonne position est 480 sur l'axe des x et 320 sur l'axe des y. Encore une fois, j'adore les PVectors. Ils sont juste un excellent moyen d'empaqueter des points dans l'espace. Alors vérifiez, notre r1, notre HRect. Encore une fois, c'est 100 par 100. Il a un arrondi de 10. H.ajouter que nous l'ajoutons à la scène. Notre Anchorat est la position centrale, mais regardez la mise à jour à 16. Donc, sur 16, je peux dire, hey votre emplacement initial, cette première position, est d'aller à ce PVector et de me donner le x, donc pt1.x qui renvoie évidemment 160. Le pt1.y renvoie le 320. Donc, j'utilise, sur la ligne 16, le PVector pour saisir l'axe des x et l'axe des y. Encore une fois, il a NoStroke et c'est un remplissage d'orange foncé. D' accord. Maintenant, je vais faire défiler un peu vers le bas. Je vais sauter tout le chemin vers le bas et juste montrer que le tirage au sort est exactement comme dans l'exemple un et deux où il fait la scène de dessin et nous créons et traitons ces deux petits points d'ellipse afin que nous puissions voir le point A et point B. D'accord. Respirez profondément, travaillez avec moi ici. D' accord. Regardez les lignes 21 à 29. C' est l'interpolation et rappelez-vous encore, l'interpolation commence instantanément. Il va passer du point A au point B. Donc, si nous regardons ici, nous disons, t1 est un nouveau HTween, encore une fois la cible est notre hRect r1, la propriété est l'emplacement. Regarde les arguments de début et de fin. Le début commence à pt1.x, commence à pt.1.y, se termine à pt2.x et se termine à pt2.y. Encore une fois, notre facilité est de 0,5 Et avoir un peu de printemps mais j'ai réduit l'élasticité un peu, donc au lieu de 0,95 comme dans un et deux, je le ramène à un 0,7. D' accord. Quand le film commence ces incendies, regarde. Allez, commencez à interpoler de gauche à droite. Donc, si je n'avais pas d'autre code écrit ici, ça se déplacerait de la position A B. ça se déplacerait de la position A B. Maintenant, j'ai besoin d'un rappel pour savoir que je suis arrivé à la position B. Si vous vous souvenez que c'est TweenDone1, il est donc arrivé à la bonne position. Retournons à gauche. Alors, vérifiez. Je dis que TweenDone1 est un nouveau rappel, et ce que je dis ici est hey interpolation un, je comprends que vous êtes arrivé à la position B, la deuxième position tout le chemin vers la droite. Si vous êtes arrivé à la position B, je veux que vous tiriez quelque chose de différent. C' est toujours la même interpolation, mais je vais vous donner quelques nouvelles informations et les nouvelles informations sont un nouveau .start dans un nouveau .end. Donc maintenant, ça dit, eh bien, ton départ. Si j'ai raison, est la bonne position que vous êtes ici sur la droite maintenant. D' accord. Donc, le début est pt2.x et pt2.y et la position de fin est de retour au début. Retour à pt1.x et pt1.y. Maintenant, regardez ce prochain bloc de code ici. C' est là que vous créez le lien, et le lien est que je veux enregistrer cette interpolation et je veux un nouveau rappel quand je reviendrai à la nouvelle position. Donc, cela commence à ce pvector pt2, il va se terminer au pvector pt1 et quand il arrivera à pt1, tout d'un coup nous avons ajouté quelques informations ici. Oh mon Dieu, la programmation veut savoir quand je suis revenue à cet endroit d'origine. Quel nouveau rappel au feu. Donc, quand il revient à la position initiale, il va déclencher le rappel TweenDone2. D' accord. Voici donc le lien. Donc maintenant, si nous regardons le code 43 à 53, nous allons juste configurer l'animation de A à B à nouveau. Droit. Donc, si vous le regardez une fois qu'il est arrivé à la position gauche, je veux revenir à droite maintenant, sorte que je crée une boucle qui va et vient comme un globe oculaire de Cylon. Tu dois être un super nerd pour vraiment apprécier ça. Je viens de jeter un commentaire Cylon dans cette discussion. C' est l'amour, c'est l'amour que nous partageons. D' accord. Donc, TweenDone2, vérifiez. J' ai juste inversé le début et la fin à nouveau. Je dis, oh merdique, on est de retour à gauche, non ? Donc, le début est notre pt1.x et y, et oui nous voulons revenir à la position B qui est un pt2.x et y. alors voici la boucle infinie. Je dis, devinez quoi, si je l'enregistre et une fois que vous arrivez à cette nouvelle position de fin allez-y et tirez TweenDone1. Donc, maintenant, à ce stade, vous devriez réaliser que ces deux-là ne font que s'appeler d'avant en arrière. Donc, quand l'un est fait, il appelle deux, quand deux est fait, il en appelle juste un à nouveau. Alors maintenant, ces choses fonctionnent en tandem. Maintenant, vous comprenez que l'un est en train de tirer deux, et deux en tirent un, mais regardez la ligne 55. Si je ne l'avais pas, si je le commente, que va-t-il se passer ? Eh bien, regarde ça. Je vais faire mon croquis et le film commence et boum il passe de la position A à la position B, parce que rappelez-vous, je vais juste fermer ça ici une seconde, rappelez-vous que quand vous testez votre film t1 va tourner. Il commence, il fonctionne, il passe de la position A à la position B. Donc maintenant, j'espère, vous comprenez que TweEnDone1 et TweenDone2 sont configurés mais nous ne faisons jamais tourner les choses, n'est-ce pas ? Alors, regardez la ligne 55. À la ligne 55 ici et au fond, je dis juste, hey après avoir mis en place ces deux scénarios, je veux juste dire à tween 1 qu'il devrait s'inscrire et rappeler, un rappel de temps TweenDone1 et puis cela commence la boucle.Ok. Si je n'avais pas ça, ça vient de passer de A à B parce qu'on ne lui a jamais demandé de nous dire quand il est arrivé à B. ligne 55, c'est que, dites-moi quand tu seras arrivé à B parce que je veux te dire de faire quelque chose. D'accord. Ainsi est la ligne 55 qu'il démarre, il se déplace de A, il va à B. Dès qu'il arrive à B, nous lui disons d'aller de l'avant et de démarrer le TweenDone1, qui déclenche ensuite deux, qui déclenche ensuite un, qui déclenche ensuite deux, qui puis tire 1 ainsi de suite et ainsi de suite. Alors. Maintenant, à ce stade, vous pouvez exécuter ce croquis et nous avons maintenant une animation infinie où il va de A à B. Dès qu'il arrive à B, remonte à A, et ainsi de suite et ainsi de suite. D' accord. Donc maintenant, espérons que vous avez vraiment digéré comment nous utilisons le rappel pour créer ce déclencheur sans fin, mais le déclencheur ne va se déclencher, le rappel ne va se déclencher que lorsqu'il s'est installé dans sa destination, et dans ce cas la destination est une position x, un emplacement. D' accord. Fermons ça. Passons à l'exemple 4. La raison pour laquelle je veux passer à l'exemple 4 est parce que je voulais faire un léger ajustement et que cet ajustement est dans l'exemple 3, la seule chose que nous avons vraiment changé était où je commence et où je finis. Ce qui s'est passé était dans l'exemple 3, je vais juste y revenir ici une seconde, est nous avons spécifié ces facilité et le ressort qui est 0.05 et 0.7. Mais vous remarquerez que dans TweenDone1 et TweenDone2, nous ne spécifions pas la facilité ou le ressort, donc parce que nous ne parlons pas, il continue juste de recycler ce qui était initialement défini. D' accord. Donc, je voulais juste montrer la possibilité en quatre que c'est ce qui est initialement défini, mais alors vous pouvez réellement le modifier. Donc, regardons TweenDone1 qui passe de B à A. Ce que j'ai fait, c'est que j'ai changé la facilité et le printemps. J' ai dit, gardez ça 0,05, mais pouvez-vous me donner cette élasticité de 0,95. Donc, quand il passe de B à A, il va être très élastique, mais une fois que TweenDone2 se déclenche, vérifiez-le. J' ai changé la facilité et le ressort à 0,05 pour la facilité, mais ne fais pas de ressorts. Donc ça va juste être une animation lente en arrière, puis ça va rebondir, puis une animation lente en arrière, et puis ça va rebondir. Alors, allons de l'avant et exécutons le croquis, et encore une fois, vous devriez remarquer qu'il rebondit de B à A, puis c'est un mouvement lent en arrière, puis il redescend à A. Donc, vous pouvez modifier l'interpolation entre vos différents rappels. Donc, c'est stellaire. C' est génial. D'accord. Je vais envelopper cette vidéo particulière et dans la prochaine, nous allons juste digérer l'exemple 5 qui introduit en utilisant des coordonnées 3D plutôt que des coordonnées bidimensionnelles. On se voit dans la vidéo suivante. 21. Unité 6, Vidéo 3: D' accord. Ceci est la vidéo par exemple cinq 3D. C' est très similaire à l'exemple quatre, mais je voulais juste faire une très légère introduction au travail avec des coordonnées 3D. Encore une fois, cette vidéo va juste être cet exemple. Donc, encore une fois, gardons ça gentil. Vérifie ça. Voici ce qui est différent est, encore une fois, comme je l'ai expliqué plus tôt, un PVector peut être un point 2D ou il peut être un point tridimensionnel. Donc, dans le cas ici, j'ai ajouté une coordonnée z à notre PVector. Donc, plutôt que de passer d'une position à une autre, de gauche à droite, je veux déplacer quelque chose d'avant en arrière. Alors, regardons le PVector. Les deux pt1 et pt2 ont les mêmes coordonnées x et y. Donc, ce sera le milieu de l'écran, 320 pour le x, 320 pour le y, 320 pour le y, qui est 640 divisé par deux, ou la largeur divisée par deux, et la hauteur divisée par deux. Donc, nous savons que la place va être au centre de l'écran. Ce qui est différent ici est la coordonnée z, qui, encore une fois, zéro est pour le plan z, pour la position arrière, je dis, négatif 400, et pour le front est positif 100. Donc, le changement ici pour le PVector fait x et y les deux 320, et change la coordonnée z. Donc, négatif 400 pour la première position et positif 100 pour la position avant. Regardons la ligne 16. Son emplacement de départ est x, y et z. Donc, vous parlez à ce PVector et obtenez le x, obtenir le y, et obtenir le z. Allons-y et défilons ici et regardons l'interpolation. Encore une fois, j'ai mis à jour la position de début et de fin pour inclure les coordonnées x, y et z. maintenant, une autre chose que j'ai totalement oublié, j'ai obtenu une sauvegarde, parce que c'est muy important, qui est que vous devez dire au traitement que vous utilisez 3D et je dois dire à Hype que j'utilise des coordonnées 3D. Alors, regardez la ligne 9 ici. Sur la ligne 9, j'ai dit que la largeur et la hauteur du film sont 640 par 640, et que je veux utiliser P3D. Donc, je veux utiliser le système de coordonnées 3D de traitement. Si je ne l'ai pas mis, p-vector va avoir un problème avec vous essayant de spécifier la coordonnée z, car vous n'avez pas spécifié que le moteur de rendu pour le traitement doit être un système de coordonnées 3D du tout. Donc, ça va jeter quelques erreurs. Maintenant, tout le code initial dans Hype par défaut pense que vous faites des coordonnées bidimensionnelles. Donc, je dois dire à Hype de savoir que nous passons également à un système de coordonnées 3D. Donc, si vous regardez ici sur la ligne 10, je dois mettre cet argument disant utiliser 3D true. Donc, je dis à Hype que, « Hé, quand vous commencez à courir dans vos classes, passez aux méthodes qui incluent l'axe z, d'autres mots, il retournera également des erreurs. Hype dira : « Hey, mec, qu'est-ce que cette entreprise de z dont tu parles ? » Donc, je dois dire à Processing que j'utilise un système de coordonnées 3D et je dois dire à Hype que j'utilise un système de coordonnées 3D. Très important. n'arrive pas à croire que j'ai failli oublier de parler de ça. D'accord. Donc, à part cela, votre TweenDone1 et votre TweenDone2, la seule mise à jour réelle ici est que vous commencez les extrémités utilisent cette coordonnée z du PVector. Encore une fois, j'ai quelques réglages pour la facilité au printemps. Maintenant, dans mon dossier, j'ai commenté la ligne 62 pendant une seconde. Parce que je voulais juste vous montrer que si vous testez ce croquis ici, il déplace réellement l'axe z de ce rectangle dans l'espace et vers l'avant dans l'espace. Cependant, quand j'ai écrit cet exemple pour la première fois, j'ai pensé, comment savez-vous que c'est une animation z ? Comment est-ce que quelqu'un regarde ça ? Comment est-ce que cela pourrait être à l'échelle ? Je n'ai aucune idée que c'est en fait z, cela pourrait simplement changer l'échelle du rectangle d'une plus petite échelle à une plus grande échelle. Donc, j'ai ajouté cette ligne 62, et, permettez-moi juste de le décommenter ici. La ligne 62 traite juste de la fonction de caméra de Processing, que j'ai ajouté le MouSex, sorte que vous puissiez réellement déplacer votre souris et juste obtenir une représentation que cette chose est en train de bouger dans l'espace tridimensionnel. Donc, je ne vais pas mentir travailler avec la caméra est fou. Il m'a fallu du temps pour comprendre tous les différents arguments que la caméra prend en charge. Si vous venez de lancer votre esquisse maintenant, vous devriez remarquer que, oui, il est en fait en train de déplacer cela dans l'espace tridimensionnel. Donc, si je déplace réellement la position de ma souris ici, je peux réellement changer l'angle de la caméra, et en fait voir que notre rectangle se déplace en fait dans l'espace tridimensionnel. Donc, génial. Je pense que je vais finir l'exemple 5 maintenant. Nous allons passer à la vidéo suivante qui va digérer l'exemple 6 et l'exemple 7, puis finalement nous allons revenir à jouer avec la 3D parce que c'est assez amusant. Mais, c'est juste une introduction très rapide à l'utilisation des coordonnées 3D avec PVector, mais encore une fois, regardez vraiment les lignes 9 et 10. Vous devez dire à Processing que vous utilisez un système de coordonnées 3D, vous devez dire à Hype que vous utilisez le système de coordonnées 3D, d'autres mots cela ne fonctionne pas. On se voit dans la vidéo suivante. 22. Unité 6, Vidéo 4: Comment tout le monde tient ? Je ne vais pas te faire sentir confiant, parce que ça va empirer. Ça va empirer, mais d'une façon géniale. Ça va être douloureux d'une manière très agréable. Nous en sommes maintenant à l'exemple 6 et à l'exemple 7. Dans cette vidéo, je vais parcourir ces deux choses. Maintenant, dans l'exemple 6, ce que je voulais vous montrer, c'est l'empilement du comportement. Je peux en fait appeler deux interpolations qui vont interpoler à des propriétés individuelles. Tant que les propriétés sont séparées, elles ne se battront pas. Alors, montons au sommet ici et regardons ce qui a été changé. Donc, c'est ce dont je parle, c'est que nous commençons par une simple animation et nous allons juste la muter, rendre un peu plus complexe. Maintenant, cela n'utilise pas la 3D. En fait, nous revenons à l'exemple 4 et nous ajoutons à l'exemple 4. Maintenant, l'exemple quatre est que A à B, B à A boucle. Il a juste bougé la position X, d'avant en arrière. Je veux qu'il tourne maintenant aussi. Donc, il va passer de la position A à B, mais il va aussi exécuter une rotation. Alors, montons au sommet ici et voyons quelques ajustements. Donc, la première chose est, nous déplaçons toujours un HRect, nous avons toujours notre r1, mais j'ai maintenant un interpolation un et un interpolation deux. Donc, un t1 et un t2. Nous savons que t1 est l'interpolation d'emplacement, et t2 sera l'interpolation de rotation. Donc, j'ai maintenant besoin d'un nouvel ensemble de rappels. Donc, vous remarquerez sur la ligne trois, nous allons garder notre TweenDone1 et notre TweenDone2, mais j'ai maintenant ajouté le rappel pour, RotateDone1 et RotateDone2. Donc, nous savons que lorsque cela commence, il va lancer une rotation de A à B, faire pivoter la date, faire pivoter, faire pivoter la date, faire pivoter vos dates, faire pivoter toutes vos dates. Ne vous mariez jamais, faites pivoter vos dates. Tu l'as entendu ici, de Josh Davis. Je vais aller bien. Essayons encore ça. Faire pivoter. Puis-je juste vous dire que dans le passé, quand j'enseignais à l'École des arts visuels, c'était comme 2003 quand j'ai commencé à enseigner. Les gens apportaient leurs fichiers sur des disques Zip. Disques Zip. Tu dois être très prudent avec celle-là. J' ai eu plus que quelques dérapages. Je vais juste te laisser travailler celui-là. Chaque rappel, RotateDone1 et RotateDone2. Donc, RotateDone1 tourne de B à A, tout comme TweenDone1, et RotateDone2 est A nouveau à B. Maintenant, j'ai mis le vecteur P là. Donc, vous remarquerez que pt1 et pt2 est 160,320, 480 320, qui n'a pas été modifié. Allons de l'avant et regardons ce que nous avons ici. Voici notre r1. Parce que le code devient un peu plus long, je profite de la méthode chaînage et HYPE. Donc, je peux juste chaîne tout cela en une seule ligne. Donc, à mesure que je commence à écrire plus de code, et que mes programmes commencent à devenir un peu plus robustes, je profite du chaînage de la méthode, et j'ai juste tout sur une ligne plutôt que de le diviser en plusieurs lignes comme je l'ai fait dans les fichiers précédents. Je fais la même chose avec notre t1. Maintenant, allons de l'avant et regardons ce bloc de code ici, qui est de 17 à 31. Cela est resté inchangé. C' est la configuration d'interpolation un, passant de A à B, B à A, les rappels, tout. C' est exactement comme dans l'exemple 4. Ce qui est nouveau maintenant, ce sont les interpolations qui tournent. Donc, ce que j'ai fait ici est, je l'ai dit, t2 est un nouveau HTween. Il va également cibler r1, mais la propriété est la rotation. Donc, t1 traite de l'emplacement, t2 traite de la rotation. Regarde le début. Commencez à zéro, terminez à 180 degrés. Alors, tournez à 180 degrés. J' ai une facilité et j'ai un ressort pour cette rotation. Encore une fois, j'ai aussi quelques rappels ici. Donc, quand tourner un est fait, il va passer de 180 à zéro. Quand son dos à zéro, on appelle deux. Deux disent alors : « Oh, créons cette boucle. Revenons de zéro à 180. » Quand il est à 180, on en tire deux. Donc, pas différent de la configuration rt1. C' est une copie. Regarde la ligne 50. J'enregistre t2, et je dis, « Hé, je comprends que vous allez tirer de zéro à 180, une fois que vous arrivez à 180, allez-y et tirez ce RotateDone1 pour que vous puissiez aller un, deux et deux contre un et commencer cette boucle. » Donc, quand je teste le croquis, vous devriez remarquer que j'ai deux prévenus travaillant en tandem. Ils font des propriétés différentes. Vous pouvez avoir comme Htweens que vous voulez tant qu'ils n'essaient pas de tirer la même propriété. Donc, t1 fait l'emplacement et t2 fait la rotation. Encore une fois, je peux empiler plusieurs Htweens tant qu'ils abordent différentes propriétés. Fermons ceci et passons à l'exemple sept. Maintenant, l'exemple sept est une copie de l'exemple six. Mais, tu te souviens à Hrotate, j'ai montré que tu pouvais imbriquer un carré dans un autre carré, et tant que ça arriva, tout allait bien avec l'univers. Je vais juste te le montrer encore une fois. Alors, regardez en haut, ici. La seule chose différente dans l'exemple sept, c'est que j'ai maintenant trois rectangles. J' ai un r1, un r2 et un r3. Allons de l'avant et regardons les lignes 14 à 21. Je dis : « R1, tu es 100 par 100, et tu es un orange foncé. » Puis, je dis, « Hé, r2, tu as 50 sur 50, tu as un arrondi de cinq, et je veux t'ajouter, r2, à l'intérieur de r1. » Donc, nous avons maintenant commencé l'imbrication. Vous remarquerez que je ne spécifie pas non plus d'emplacement. Si je ne spécifie pas l'emplacement, il se fixe juste à zéro, zéro. Allez-y et regardez r3. R3 est de 25 pixels par 25 pixels. C' est un carré parfait. Il n'a pas d'arrondi du tout, et r1 est l'endroit où je place r3. Donc, r3 est placé à l'intérieur de r1. part ça, rien d'autre n'a changé. Donc, si vous exécutez réellement ce fichier, vous remarquerez que l'animation passe toujours de A à B, et B à A et qu'elle exécute toujours cette deuxième interpolation d'utilisation de la rotation. Mais, comme vous pouvez le voir, il le fait aux trois objets parce que tout est appliqué à r1, il arrive juste que r2 et r3 soient imbriqués à l'intérieur de r1. Donc, puisque ces deux formes sont imbriquées à l'intérieur de r1, elles aussi obtiendront les mêmes animations. Alors, maintenant tu devrais penser, « Oh mon Dieu, je peux travailler dans Illustrator. Je peux commencer à dessiner un tas d'atouts, d'actifs visuels. Je peux les regrouper. Je peux commencer à faire beaucoup de choses différentes, et tant qu'elles sont imbriquées dans un élément auquel les interpellés sont associés, cette œuvre d'art va venir avec moi. » Alors, cool. Juste vous montrer quelques-unes des possibilités de ces astuces que j'utilise dans HYPE. Ceci termine les exemples six et sept. Allons de l'avant et fermons ceci, et la vidéo suivante va juste traiter de l'exemple huit. Rendez-vous dans le fichier suivant. 23. Unité 6, Vidéo 5: Amusant. Nous sommes maintenant dans un exemple huit, et encore une fois, je veux juste continuer à prendre ces idées, continuer à prendre ces concepts et les rendre un peu plus robustes. Donc, génial. Exemple huit va montrer une animation à quatre positions différentes. Donc, c'est une assez bonne extension de certains des autres fichiers que nous avons fait là où il vient de A-B. Et si on va de A à B à C à D et puis de nouveau à A ? Donc encore une fois, cela va animer notre rectangle à quatre positions différentes à l'écran, et il va mettre en place une boucle. Donc, super, je fais quatre points maintenant. Donc en haut sur l'exemple 8, nous avons Pvector un, deux, trois et quatre. Vous remarquerez que je mets quelques commentaires ici que je définis d'abord le haut à gauche, puis le haut à droite, puis le bas à droite, puis le bas à gauche. Donc, si vous pensez à cela en termes d'animation, un va aller à deux, deux va aller à trois, trois va aller à quatre, quatre va revenir à un. Donc, cela signifierait que j'ai besoin de quatre rappels cb1, cb2, cb3 et cb4. Encore une fois, rappelez-vous ici que cb1 est un rappel de passer de la position un à la position deux, cb2 passe de deux à trois, cb3 va de trois à quatre et cb4 va quatre à un, et puis encore nous allons créer une boucle ici. Donc, le hRectangle n'a vraiment pas beaucoup changé, il est attaché à cette première coordonnée pt1.x et pt1.y pt1. Maintenant, la ligne 19 va tirer, et il va tirer de la position de départ du PVector un à la position PVector 2. Donc, quand cela démarre initialement, il va passer de la position un à la position deux, donc vous savez qu'après cela commence, il traîne en fait dans la position deux. Maintenant, je vais faire défiler vers le bas ici, regardez, j'ai mis à jour le tirage pour inclure avant différentes positions pour notre PVector afin que nous puissions voir où ils sont à l'écran. Encore une fois, regardons la ligne 45. ligne 45 suppose que l'interpolation a déjà été déplacée de haut à gauche vers le haut à droite. Donc, nous sommes maintenant dans la deuxième position, donc vous remarquerez que je rappelle cb2. Donc, en fait, je rappelle les lignes 27-31. Je ne rappelle pas cb1 parce que cb1 est de un à deux, et cela est déjà arrivé lorsque l'interpolation a initialement commencé. Donc, je lui dis de rappeler cb2. Encore une fois, cb1, cb2, cb3, cb4, ce ne sont que toutes les copies les unes des autres, la seule chose qui a changé est le PVector pour le début et la fin, et le rappel au rappel approprié. Donc, il démarre, il passe de la position un à la position deux, ici sur la ligne 45, il dit, « Oh, cool, vous avez déjà déplacé votre position assise en position deux, allons-y et tirez le rappel de la position deux. » Donc cb2 tire, il passe de deux positions à trois positions dès qu'il arrive que trois positions il déclenche cb3. Cb3 dit, « Oh super, je passe de trois à quatre, faisons appel à quatre. » Callback quatre dit, « Oh super, je vais revenir quatre à un », et tire cb1. Cb1 dit alors, « Oh, droite je vais d'une position à deux positions, allons-y et tirez cb2", boom, la boucle a créé. Alors, allez-y et testez le croquis. Encore une fois, vous devriez voir que nous avons une animation infinie de passer à quatre positions différentes à l'écran. Encore une fois, tant que vous créez votre interpolation, vous pouvez créer tous ces scénarios pour rappels et lorsque ces rappels se déclenchent, vous passez simplement à un nouveau début et à une fin. Donc, je vais garder cette vidéo courte, nous allons passer à l'exemple neuf. Exemple neuf à nouveau est une très grande extension de ceci est qui est, « Hey Josh, et si je ne veux pas une boucle ? Et si je ne veux pas continuer à animer deux ou quatre sections différentes ? Et si je veux que ça passe à un à deux, deux à trois, trois à quatre, quatre à un, un au centre, puis se lève et s'arrête ? » Donc, l'exemple neuf va illustrer cette fonctionnalité. Alors, on se voit dans la prochaine vidéo. 24. Unité 6, Vidéo 6: Ok, nous sommes dans l'exemple 9 et encore une fois l'exemple 9 n'est pas très différent de l'exemple 8 sauf pour cela, ce n'est pas une boucle. Il va exécuter quelques interpolations et dès que nous serons arrivés à la dernière interpolation, ce programme va s'arrêter, non ? Donc, l'exemple 8, juste continué à boucler dans les quatre coordonnées. Exemple 9, je veux passer de un à deux, deux à trois, trois à quatre, quatre à un. Un, je voulais ensuite aller au centre et après qu'il arrive au centre, je veux qu'il évolue vers vous. Après avoir fait l'échelle vers vous, il peut simplement arrêter de faire d'autres interpolations. Donc, c'est un peu sympa car il peut s'agir d'une intro-animation, mais il n'a pas à boucler. Je voulais juste exécuter une séquence dès que cette séquence est terminée, elle peut s'arrêter. Jetons donc un coup d'oeil à ce qui est un peu différent dans l'exemple 9. Le premier est la deuxième ligne, nous avons deux HTweens, nous avons t1 et t2. T1 est l'interpolation qui va traiter du déplacement de nos emplacements d'actifs. Donc, nous savons que t1 utilise la propriété des emplacements, donc nous allons l'utiliser pour se déplacer à l'écran. C' est ce HTween de t2 que nous allons mettre à l'échelle l'actif vers vous. Donc, ça va s'occuper de la propriété de H.Scale, ok ? Maintenant, allons de l'avant et regardons les lignes quatre à huit, j'ai ajouté un cinquième PVector et c' est la possibilité de se déplacer au centre de l'écran de sorte que vous remarquerez que PVector pt5 est 320 par 320, donc il va animer au centre de l'écran. Maintenant, regardons la ligne 10, c'est là que nous avons nos rappels. Encore une fois, l'exemple 8 avait cb1, cb2, cb3 et cb4, mais j'ai maintenant besoin d'un rappel pour passer au centre de l'écran, qui est CBCenter, centre de rappel et j'ai besoin d'un rappel pour ensuite animer vers vous ce qui est CBScale, d'accord ? Donc, nous avons six rappels sur la ligne 10. D'accord. Se déplacer à droite le long sont r1, HRect qui n'a pas changé, c'est exactement la même chose que dans l'exemple 8. Regardez la ligne 20, la ligne 20 n'a pas changé. C' est la même chose que dans l'exemple 8, et c'est l'initiation de l'interpolation passant de la position un à la position deux afin que nous sachions que lorsque nous démarrons notre film, c'est cette ligne 20 qui va commencer du point un à point deux. Donc, il va maintenant être accroché dans la coordonnée en haut à droite, d'accord ? Maintenant, je vais faire défiler ici et regarder tout en bas, juste savoir que j'ai ajouté une cinquième ellipse de traitement pour montrer où se trouve ce point central. Maintenant, nous avons une représentation visuelle des cinq points, le cinquième étant maintenant le centre de l'écran. Ok, regardons les rappels. Vous remarquerez peut-être que cb1 a été commenté et c'est pour une bonne raison. Cb1 est ce qui a créé cette boucle, non ? Donc le programme commence, il passe de un à deux, puis cb2 est passé de deux à trois, puis il est passé de trois à quatre, puis il est passé de quatre à un, et puis dès qu'il est revenu à un, CB1 a encore tiré à la position deux, non ? Donc, il a initié cette boucle. Donc, j'ai effectivement commenté cb1 parce que devinez quoi, nous ne l'utilisons pas en fait, parce que cb1 est ce qui a créé cette boucle et nous ne voulons pas une boucle. Donc, en fait, cb1 n'est pas utilisé dans ce croquis particulier. Bon, alors disons ça. On teste le film, quand on le teste, la ligne 20 feux et il passe de la position un à la position deux, d'accord ? Laissez-nous regarder la ligne 59, ligne 59 dit, « Lorsque vous tirez réellement et que vous vous déplacez à la position deux, pouvez-vous me faire savoir quand vous êtes arrivé à la destination de la position deux et quand vous l'avez fait, s'il vous plaît tirer le rappel cb2 . » Alors, cb2 s'allume. Cb2 dit, « Ok cool, je commence à deux, je vais maintenant à trois. » Quand il arrive à trois, il tire cb3, cb3 puis dit, « Cool, je suis dans la position inférieure droite, je vais passer à la position inférieure gauche », donc il se déplace vers la position inférieure gauche, il déclenche ensuite cb4, cb4 dit alors, « Impressionnant, je suis en bas à gauche, je veux animer à nouveau jusqu'à la première position. » Donc ça passe du PVector 4 au PVector 1, ok ? Maintenant, voici le changement, dans huit, cb4 aurait tiré cb1 nouveau ce qui aurait ensuite passé un à deux et puis boom vous avez obtenu la boucle. Voici où se trouve cette pause, cb4 dit maintenant, « Quand vous passez de la position 4 à la position 1, je veux que vous rappeliez CBCenter », d'accord ? Tout d'un coup, il est revenu à la position 1 et CBCenter tire. Donc, nous regardons le rappel pour CBCenter et il dit, « Hé, je dois passer de la position un à PVector 5 qui est le centre de l'écran. » Maintenant, ce sont les lignes 46 à 50 qui vont de la position 1 à la position 5, ça glisse au centre de la scène, ok ? Maintenant, dès qu'il a déplacé son emplacement du haut à gauche au centre, il dit, « Hé, je veux vous dire que je suis arrivé à l'emplacement du centre et dès que vous arrivez à l'emplacement du centre, Je veux que tu vires CbScale, » n'est-ce pas ? Nous sommes prêts à lancer l'échelle vers vous. Maintenant, regardons CBScale. CBScale dit, « Hey Tween 1, l'interpolation qui a eu affaire à tous les endroits, je n'ai plus besoin de vous, je ne bouge plus aucune position et donc puisque je ne bouge plus aucune position, vous pouvez dire Interpolation 1 pour annuler l'inscription. » Donc, vous remarquerez sur la ligne 54, Tween 1 meurt une vie heureuse et contente. Il a animé tous les endroits où nous devions aller. On n'en a plus besoin. Donc, la ligne 54 du rappel CBScale indique simplement à Tween 1 que nous en avons fini avec. Nous ne déplaçons plus de positions. Il est maintenant en ligne 55 que nous avons mis en place notre nouvelle interpolation et notre nouvelle interpolation se déplace vers vous dans l'espace, donc vous remarquerez qu'il dit, « Hey Tween 2, vous êtes une interpolation de nouvel âge. La cible est que notre seule personne que nous avons été en déplacement, mais la propriété cette fois est à l'échelle. Je veux que vous commenciez à 100 pour cent et je veux que vous y mettiez fin à 300 pour cent. » Donc, il va devenir 300 pour cent plus grand ou vers vous et la facilité est de 0,09 et le ressort est de 0,9. Alors, allez-y et testez ce croquis et regardez ce qui se passe. Il va de un à deux, deux à trois, trois à quatre, quatre à un, un au centre, puis se met à l'échelle vers vous et vous remarquerez qu'il s'est effectivement arrêté. Donc, il a exécuté nos interpolations pour l'emplacement, une fois qu'il est arrivé au centre, une fois qu'il est arrivé au centre, il a initié l'interpolation pour la mise à l'échelle, puis une fois qu'il est arrivé à sa position de fin, vous remarquerez qu'il n'y a pas de rappel. Je ne lui ai jamais demandé de me le dire quand il est arrivé, c'est une échelle de 300 pour cent. Donc l'animation s'arrête. Allez-y et continuons encore une fois. Encore une fois, vous remarquerez qu'il exécute tous les préadolescents pour l'emplacement, arrive au centre, ressort vers vous, et nous avons terminé. Ok, ça termine la vidéo de l'exemple 9. La vidéo suivante va regarder l'exemple 10 et l'exemple 11 et faire des choses amusantes avec pixel colorist et vous allez adorer. On se voit dans la vidéo suivante. 25. Unité 6, Vidéo 7: D' accord. Dans cette vidéo, nous allons travailler sur l'exemple 10 et l'exemple 11. Maintenant, les exemples 10 et 11 sont en fait des copies de l'exemple huit. Je veux revenir à cette boucle en cours d'exécution encore et encore et encore. L' exemple neuf était génial. Il vous montre juste comment exécuter un tas d'animations, puis arrêter, mais pour 10 et 11 je veux continuer cette boucle. Ainsi, les exemples 10 et 11 sont des copies de l'exemple 8. Maintenant, regardons ce qui a changé dans l'exemple 10. La première chose est la première ligne, nous avons notre bon ami HPixelColorist, et si je vais de l'avant et navigue vers le dossier exemple 10, vous remarquerez qu'il y a un dossier de données et à l'intérieur de ce dossier de données est ce jpg. Donc, je veux que le HtWeen déplace notre rectangle autour, mais je veux qu'il échantillonne la couleur de ce jpg en utilisant HPixelColorist. Alors, regardons la ligne 15, ligne 15, Effacer automatiquement (faux), n'est-ce pas ? Donc, je ne vais pas effacer l'écran avant de recommencer à peindre le rectangle, donc ça va laisser une trace derrière lui. Ligne 18, crée une instance de notre HPixelColorist, et donc il dit, « Hé, allez dans ce dossier de données, allez-y et regardez color.jpg. » Nous allons traiter le remplissage, nous allons changer le remplissage de r1 à n'importe quelle couleur se passe sur color.jpg. Si vous regardez r1, la seule chose qui a changé ici est que j'ai ajouté une rotation de 45 degrés. Donc, plutôt que d'être un carré, il tourne de 45 degrés, donc c'est une sorte de diamant. Maintenant, rien n'a changé avec notre Tween, ça va s'animer aux quatre endroits différents. Donc, le Tween va passer de un à deux, deux à trois, trois à quatre, quatre à un, dès qu'il revient à un, il se déclenche à nouveau à la position deux et donc la boucle a commencé. Donc, cela n'a pas changé par rapport à l'exemple huit. Maintenant, allons de l'avant et regardons notre fonction de tirage et la seule chose que j'ai ajoutée ici tant que mise à jour est la couleur .ApplyColor à r1. Donc, si nous exécutons cette esquisse, vous remarquerez qu'elle exécute les quatre coins, mais comme elle exécute les quatre coins et que la position x et y du rectangle est mise à jour, elle échantillonne la couleur du fichier color.jpg à l'intérieur de le dossier de données, n'est-ce pas ? Donc, il utilise ses x et y comme un regard vers les x et y du jpg et il échantillonne la couleur à partir de là. Donc, le tueur, j'adore vraiment ça. Maintenant, allons de l'avant et fermons ceci et passons à l'exemple 11. Tu sais que j'adore te donner ces petits coups d'œil d'ajouter des trucs. Vérifie ça, on ajoute quelques oscillateurs et j'ajoute deux oscillateurs ici. Encore une fois, je suis merveilleusement vague propos de l'oscillateur parce que nous ne sommes pas encore à cette section, mais encore une fois, je mouille votre appétit à quel point chaque oscillateur est génial. J' ajoute un oscillateur pour la rotation, donc il va osciller du négatif 180 au positif 180. Il va aussi osciller son échelle de 0,2 à 1. Ainsi, de 20 pour cent sa taille à 100 pour cent sa taille. Vous remarquerez également que j'ai fait une petite mise à jour ici pour le rectangle, je me suis éloigné de l'utilisation de l'ancre à H.centre à une ancre de 50, négatif 50. Donc, encore une fois, voici votre illustration, elle est centrée sur l'axe des x, mais l'axe des y est de 50 pixels de l'art, donc le pivot va avoir ce genre de mouvement vers elle. Autre que cela, encore une fois rien n'a changé dans le tirage au sort, je viens de supprimer la visualisation des quatre points. Donc, dans le tirage au sort, nous mettons juste à jour la couleur et nous peignons juste l'écran. Donc, à ce stade, si je teste ce croquis, je montre juste à quel point l'oscillateur est génial. Croyez-le ou non, il bouge, l'interpolation se déplace de haut à gauche en haut à droite en bas à droite en bas à gauche en haut à gauche. Il se déplace toujours à ces endroits en utilisant HTWeen, mais l'oscillateur change sa rotation et change son échelle, sorte que nous commençons à obtenir quelque chose d'un peu plus intéressant visuellement. Parce que sur la ligne 15, nous faisons cette AutoClear (false), nous laissons simplement un chemin. Encore une fois, parce que nous utilisons HPixelColorist, nous échantillonnons la couleur de notre jpg caché à l'intérieur de notre dossier de données. D' accord. Je vais fermer cette vidéo et nous allons terminer cette section en faisant une dernière vidéo qui est l'exemple 12 et l'exemple 3d. Je suis désolé. Exemple 12 et exemple 13 qui utilisait la 3D. Donc, le même système exact mais en utilisant en fait quelques aspects 3D à l'esquisse. Alors, merci de rester avec moi. Passons à la dernière vidéo et continuons à botter le cul et à prendre des noms. On se voit dans la vidéo suivante. 26. Unité 6, Vidéo 8: D' accord. Voici la dernière vidéo de cette section. J' aime certaines des capacités 3D de Hype. J' aime vraiment passer dans les systèmes 3D. J' ai passé de nombreuses années dans les systèmes 2D et je suis juste soufflé en entrant dans les primitives 3D et les coordonnées 3D. J' apprécie vraiment, vraiment. Si vous regardez mon Tumblr très rapidement, j'ai commencé à faire des formes 3D. C' est le moins des bananes. Alors, regardons l'exemple 12. Exemple 12, encore une fois, est quelques trucs 3D. Alors regardons voir ce qui a changé. L' exemple 12 et l'exemple 13 ne sont que des continuations de 10 et 11. Plus précisément, c'est une extension de 11. Donc, 12 vraiment comme une copie de 11 dans le sens où j'ai toujours gardé ces oscillateurs là dedans. Maintenant, jusqu'à présent, même si nous avons introduit la 3D dans l'exemple cinq, il utilisait toujours Interact. Interact est un dessin bidimensionnel, non ? Ce n'est pas un dessin en trois dimensions. Alors, allons de l'avant et regardons ce qui est différent dans l'exemple 12. Eh bien, nous devons d'abord aborder les lignes 14 et 15 qui est dès que vous passez dans un environnement 3D, vous devez informer le traitement en changeant de moteur de rendu. Donc, vous remarquerez sur la ligne 14, j'ai dit que le moteur de rendu devrait être P3D de sorte que vous dites au traitement que vous avez affaire à un système 3D. Cela signifie également que sur la ligne 15, je dois dire à Hype que je passe aussi en 3D. Vous remarquerez sur la ligne 15, je dis utiliser 3D est vrai. Effacer automatiquement toujours faux pour ne pas effacer l'écran, il va garder les traces de peinture. J' ai gardé l'oscillateur là-dedans. En fait, rien n'est vraiment changé par code, sauf que j'ai changé, eh bien, revenons à la ligne 3, en fait. Vous remarquerez que r1, en fait, n'est plus un HRack. C' est en fait devenu une HBox. HBox me permet de définir un dessin 3D. On travaille toujours sur HBox. Il y a des choses qui doivent se produire, mais vous avez accès à HBox ainsi qu'à HSphere. Donc ligne 3, au lieu de HRack, c'est en fait une HBox. Allons de l'avant et regardons les lignes 20 à 27. Donc, je dis que r1 est en fait une nouvelle HBox, pas un HRack plus. Parlons de ça une seconde. C' est cette ligne 22 où je dis que la taille est 100. Cela signifie qu'il fait une boîte d'une largeur de 100, d'une hauteur de 100 et d'une profondeur de 100. Donc, ça fait un cube parfait 100 par 100 par 100. Autre que cela n'est pas très différent. Ce n'est pas tout à fait vrai. Je crois que j'ai changé l'oscillateur ici. Si vous regardez, je fais un oscillateur pour la rotation et je fais un oscillateur pour l'axe Z. Donc, maintenant je vais prendre ce cube et je vais le déplacer vers toi et loin de toi. Les trucs de Tween, toujours les mêmes. Donc, quand j'ai réellement couru ce croquis, vous remarquerez maintenant qu'il est toujours en cours d'exécution. Donc, il exécute toujours les quatre coordonnées, mais le drawable est en fait un cube tridimensionnel maintenant. Ce n'est pas un appartement. Ce n'est pas un rectangle plat. C' est en fait un dessin 3D. Vous remarquerez également que c'est un cube parfait. Donc, je l'ai encore fait, c'est 100 par 100 par 100. Vous devriez remarquer qu'il fait en fait un peu d'ombrage. La raison pour laquelle il fait un peu d'ombrage est, eh bien, peut-être avant de parler d'ombrage, remarquez qu'il échantillonne toujours la couleur de color.jpegs. Donc, il utilise toujours HPixel Colorist pour échantillonner la couleur, mais vous remarquerez peut-être que les couleurs ont changé un peu. C' est parce qu'une fois que vous travaillez réellement avec la 3D, vous pouvez commencer à configurer des lumières. Donc, je vais juste fermer ça une seconde. Je vais aller jusqu'au bas. Remarquez que j'ai mis en place des lumières ponctuelles. J' ai installé trois lumières. J' ai mis en place une lumière orange, une lumière sarcelle, et une lumière blanche. Les lumières veulent connaître essentiellement la couleur. Donc, vous remarquerez quand vous regardez une lumière, c'est rouge, c'est vert, c'est bleu. Ainsi, vous spécifiez une valeur RGV. Ensuite, vous spécifiez où cette lumière se trouve dans l'espace. Donc, selon ce point, comme je l'ai dit que l'axe X de la lumière est à zéro, l'axe Y est la hauteur divisée par deux, et la position Z est négative 100. Donc, cette lumière est en fait sur le côté gauche centrée mais de retour à négatif 100. J' ai ensuite mis en place une lumière sarcelle. J' ai ensuite mis en place une lumière blanche. La lumière bleu sarcelle est en fait de largeur. Donc, c'est tout le chemin sur le côté droit et la hauteur divisée par deux, donc c'est au centre, mais c'est seulement à un négatif 50 sur l'axe Z. La lumière blanche que j'ai la largeur divisée par deux, donc c'est au centre. Mais sa position Y n'est que de 100 pixels du haut et sa position Z est de 150. Donc, la lumière blanche est en fait au-dessus de tout de sorte qu'elle projette une lumière blanche sur les faces avant du cube. Donc, une fois que nous commençons à utiliser la 3D, nous pouvons commencer à faire ces coordonnées d'éclairage, ce qui est vraiment amusant. Vous pouvez modifier les valeurs RGV et lancer différentes lumières sur votre cube. Vous pouvez commencer à manipuler la couleur là-bas. Donc, non seulement il obtient la couleur de HPixel Colorist du JPEG, mais nous avons aussi ces lumières qui jettent leurs propres lumières individuelles sur les cubes, qui est juste, ce qui est beau. Je suis hypnotisé par ces trucs. Je peux commencer à peaufiner ce fichier. Vraiment, la mutation et les recherches à ce sujet sont infinies pour moi. Je peux toujours penser à différentes façons d'ajuster certaines des choses dans ce fichier. Fermons celui-ci et passons à l'exemple 13. exemple 13 a juste vraiment un changement mineur à elle. J' ai changé les lumières ponctuelles pour utiliser essentiellement le gris et le blanc. Je n'utilise pas d'orange et de sarcelle comme je l'ai fait dans les deux premières lumières. Donc, vous verrez ici que je fais juste un gris clair 204, 204, 204. J' utilise toujours ce blanc de 255, 255, 255. Donc encore une fois, j'ai changé l'éclairage un peu pour être un peu plus lumineux et ne pas réellement lancer une couleur sur le coloriste HPixel. La deuxième chose que j'ai changée est, si vous regardez la HBox, dans l'exemple 12, c'était un cube parfait donc il avait une largeur de 100, une hauteur de 100 et une profondeur de 100. C' était donc un carré parfait. C' était un cube parfait. Regardez ce que j'ai changé dans l'exemple 13. Je crée toujours une HBox, mais regardez ce que je fais sur la ligne 26. Je dis : « Hey, je veux juste te dire que tu n'es pas vraiment un cube parfait. Votre profondeur est en fait de 500 pixels. Votre largeur n'est que de 50 pixels, et votre hauteur n'est que de 100 pixels. Donc, maintenant je fais un rectangle allongé plutôt qu'un cube parfait. Alors maintenant, quand je lance ce fichier, vous remarquerez que cette esquisse utilise ce rectangle allongé au lieu d'utiliser un cube parfait. Donc encore une fois, je peux faire un HBox, mais je n'ai pas besoin de le faire en fait un cube parfait. Je peux commencer à ajuster la profondeur, la largeur et la hauteur, et essentiellement faire n'importe quel type de forme que je veux. Vous devriez également remarquer que, encore une fois, la lumière ponctuelle utilise simplement des gris et du blanc. Donc, je ne compense pas la couleur qui est dépouillée de HPixel Colorist. C' est génial. Cela commence vraiment à envelopper HTWeen. Nous allons passer à HSwarm qui est un système de comportement, mais je voudrais, disons, faire une pause et commencer à penser, encore une fois, à certaines des œuvres d'art que nous avons créées en première classe. On pourrait animer SVG. Peut-être que vous voulez vraiment jouer avec ces 3- fichiers et voir que c'est comme spin art. C' est comme si je faisais trébucher l'art de spin acide. Josh Davis, je flippe. Tu peux. C'est peut-être le bon moment pour flipper, non ? Alors, faites une pause et expérimentez certains de ces trucs. Encore une fois, nous utilisons HTWeen juste pour animer ces quatre coordonnées. oscillateur s'occupe de tout ça. Super. Ceci termine cette section. Nous allons passer à HSwarm qui traite d'un comportement en tant que système dans lequel nous allons entrer et je pense que vous allez vraiment apprécier. Rendez-vous dans la section suivante. 27. Introduction à HSwarm: Donc, maintenant, nous commençons à entrer dans les aspects plus robustes de l'utilisation des comportements HYPE. Lorsque nous utilisions HFollow, nous utilisions l'entrée de la souris, nous utilisions le geste pour déplacer les choses à l'écran. Quand on a déménagé dans HTimer, on animait des trucs basés sur le tempo. Mais j'ai emballé quelques comportements qui font des choses bien plus robustes. Donc, par exemple, dans HTWeen, vous deviez spécifier ce que l'action d'animation était, le point A au point B, mais nous avons beaucoup d'autres comportements qui existent dans HYPE qui exécutent des animations beaucoup plus sauvages. Le premier que nous allons couvrir est HSwarm. Donc, la meilleure façon de penser à HSwarm est un comportement d'insecte. Imaginez des lucioles qui volent dans votre jardin en été. HSwarm va vous donner ce genre de sentiment, ce genre de mouvement. Maintenant, HSwarm utilise quelques arguments intéressants. La première est que nous allons spécifier quelle est ma destination. Donc, dans ce premier fichier que nous allons probablement créer, la destination va être le centre de l'écran. Donc, déjà l'essaim a reçu des instructions de l'endroit où il veut essayer d'arriver, dans ce cas, au centre de l'écran. Cependant, nous utilisons quelques comportements supplémentaires comme la rotation, la vitesse, virage est, alors combien de degrés cet insecte tourne-t-il qu'il essaie d'atteindre cette destination ? Et vous verrez dans d'autres mutations que nous allons utiliser des secousses, et le secousse est ce qui frappe cet insecte hors de cap. Donc, dans ces premiers fichiers, si nous définissons la destination au centre de l'écran, et après avoir mis en place tous les paramètres de rotation et de vitesse et autres choses, vous devriez remarquer que l'objet tourne autour de parce qu'il ne peut pas tout à fait y arriver, n'est-ce pas ? Il essaie d'essouffler jusqu'à cette destination, mais en fait, il n'atteint jamais cette destination cause de ces variables que nous avons mises en place. Maintenant, ce comportement va être très uniforme. Ce n'est pas avant que nous introduisions, dans un autre fichier, twitch où nous commençons réellement à mettre ces choses hors cours. Au fur et à mesure que nous les éliminons, chacune de ces petites œuvres d'art qui étaient en train de créer à l'écran donnera la perception qu'elles ont un comportement indépendant, un esprit indépendant, parce qu'elles serpentent à travers l'écran, mais tous essaient encore de se rendre à cette destination fixée au centre. 28. Unité 7, Vidéo 1: D' accord. Bienvenue à HSwarm. Dans cette section, nous allons couvrir un comportement qui est un système. Donc, fondamentalement, vous allez configurer un système, enregistrer un tas d'objets dans ce système, et ce système de comportement contrôle ensuite tous les actifs qui sont créés. Donc, vous devriez voir dans HSwarm nous avons sept fichiers et nous allons parcourir les trois premiers, exemple un, exemple deux et exemple trois. Allons de l'avant et commençons notre ventilation de l'exemple un. Donc, exemple un à nouveau est très similaire à certaines choses que nous avons couvertes dans HTimer dans le sens que nous utilisons une minuterie en conjonction avec un pool. D' accord. Donc, nous allons simplement digérer ces aspects de ce dossier. J' ai un pool HDrawable, j'ai un HTimer, nous pouvons voir ici que nous avons un pool HDrawable qui va dessiner 40 actifs, ils vont être ajoutés à cette étape, nous allons peindre un rectangle qui a un arrondi de quatre, et la taille est seulement une largeur de 18 et une hauteur de six. Nous avons un coloriste avec un pool hColor et quelques couleurs aléatoires ici, et nous savons que cela ne va être appliqué qu'à remplissonly. D' accord. En faisant défiler vers le bas, nous avons une minuterie parce que nous voulons décaler quand ces choses sont présentées à l'écran. Donc, au lieu de faire une requête tout, nous utilisons une minuterie pour générer nos rectangles. ligne 44 a un NumCycles, donc nous savons que cette minuterie particulière ne fonctionnera que 40 fois, puis s'arrêtera. Nous savons qu'il va déclencher le rappel toutes les 250 millisecondes, et quand ce rappel se déclenche, il va simplement demander au pool de demander un élément. Donc, nous avons pool.request. Maintenant, c'est un essaim. Donc, si vous regardez juste ici en bas avec le tirage au sort, j'ai H.Drawstage, et puis je fais une autre syntaxe de traitement pour la représentation. Donc, je veux juste te montrer que je fais deux ellipses. La première ellipse, je vais mettre vers le haut et dire la couleur qu'une sarcelle, puis je vais mettre une au centre de l'écran, et je vais colorer cette couleur orange foncé. La raison pour laquelle j'ai choisi deux couleurs est parce qu' un point va représenter la naissance des objets, et l'autre point va représenter le point que l'essaim essaie d'essouffler autour. D' accord. Donc, j'ai deux ellipses à deux couleurs différentes. Maintenant, quand nous regardons OnCreate ici, et nous allons de l'avant et regardons notre HRectangle qui est notre Drawable, nous n'appliquons aucun trait. Nous ajoutons un emplacement et cet emplacement est le premier point. Donc, regardez, largeur divisée par deux, donc ça va être le centre de l'écran, mais alors ça va être à 100 pixels du haut. Si vous regardez ici sur la ligne 60, c'est le même point exact, largeur divisée par deux, 100 pixels du haut. Donc, cela représenterait la position à laquelle les actifs naissent, et l'ancrage est H.CENTER. Donc, nous avons couvert tout ce qui n'est pas HSwarm, donc nous pouvons voir ce qui se passe ici. Maintenant, couvrirons l'essaim. Swarm est un comportement, mais plus important encore, c'est un système, non ? C' est un système qui va contrôler toutes les choses à l'écran. Donc, au moins avant même d'exécuter ce fichier, nous avons une compréhension que toutes les 250 millisecondes, il va créer un rectangle dans la position que nous définissons souhaitable. D' accord. Alors, regardons l'essaim ici. Mais sur la première ligne, vous voyez que j'ai dit HSwarm, nous allons l'appeler essaim, et puis sur les lignes 10-15, je crée une instance de ce HSwarm. Donc, j'ai dit, essaim est un nouveau HSwarm. Laisse-moi te dire des choses que tu dois savoir. Le premier est, je veux ajouter un but, et le but est, largeur divisée par deux, hauteur divisée par deux. Donc, le but que vous essayez d'atteindre est le centre de l'écran. Donc, essaim va essouffler avec toujours ce désir d'essayer d'arriver au centre de l'écran. Maintenant, nous devons donner une vitesse à essaim. Donc, dans ce cas, j'ai dit d'accord, l'essaim de l'objet devrait avoir une vitesse de quatre. Maintenant, vous verrez que nous avons Turnease. Alors, combien de degrés de rotation fait-il pour essayer d'arriver au centre de l'écran ? Donc, dans ce cas, j'ai dit 0.025f. Donc, c'est un flotteur. D' accord. J'ai aussi des arguments ici pour twitch, et vous remarquerez que twitch est réglé à zéro. Donc, avec ce fichier particulier, il n'applique pas du tout de twitch, ce que nous allons couvrir dans l'exemple 3. Donc, en ce moment, pas de twitch du tout. Donc, les lignes 10-15 configurent ce comportement d'essaim, et le comportement d'essaim est un système. Maintenant, ce que je dois faire est d'enregistrer les objets dans le système. Donc, vous allez remarquer ici sur la ligne 37, comme je crée des actifs, comme le minuteur tire toutes les 250 millisecondes et comme il tire OnCreate pour chacun de ces actifs individuels, ligne 37 dit, « Hé essaim, Je veux vous donner un autre joueur dans le système. Donc, je dis juste, swarm.addTarget (d), d étant notre HRECT drawable. Donc, maintenant l'essaim y enregistre des actifs, et dans ce cas, il va enregistrer 40 d'entre eux. Maintenant, si je vais de l'avant et teste ce croquis, on commence à voir le comportement de l'essaim. Donc, toutes les 250 millisecondes, un actif est créé, ils naissent à cette largeur divisée par deux, y100, et cela les place dans le mouvement. D' accord. Maintenant, c'est pour les mettre en mouvement, mais ici, laissez-moi juste fermer ceci et passer au sommet ici et relancer ceci, de cette façon nous pouvons regarder l'essaim pendant qu'il est en cours d'exécution. Le but est cette largeur ici divisée par deux, hauteur divisée par deux. Donc, ces gars essaient de se rendre au centre. Les autres choses qu'on doit regarder, c'est, ok, cool. Il y a une vitesse associée à ces objets. Donc, en ce moment, on voit une vitesse de quatre, et ensuite on a Turnease. Donc, que Turnease est degrés qu'il tourne pour essayer d'obtenir à la largeur divisée par deux, hauteur divisée par deux, cet objectif. Mais, parce qu'il y a une vitesse et parce qu'il y a une rotation, vous pouvez voir qu'ils tombent en quelque sorte dans un cercle parfait. Parce que sur la base de la vitesse et basé sur la Turnease, ils ne parviennent jamais à l'objectif. Encore une fois, c'est comme, pensez à conduire votre voiture, vous ne pouvez tourner le volant tellement, et si vous étiez dans un parking et vous mettez une canette de soda au milieu du parking, et vous avez eu votre pied sur quatre miles par heure pour la vitesse, et vous avez tourné la roue, vous n'arriverez jamais à la boîte. Tu vas juste faire des cercles autour de ça. Donc, regarder encore une fois ces deux variables dicte comment ce système va se comporter. Maintenant, je vais l'exécuter une fois de plus parce que cela va préparer comment nous passons à l'exemple 2, qui est, regarder l'animation du bain. Donc, remarquez qu'ils tirent toujours sur le côté droit, et ils tombent tous dans ce modèle parfait. Donc, je voulais décaler un peu ça. Alors, allons de l'avant et fermons ceci et passons à l'exemple deux. Maintenant, dans l'exemple 2, je fais juste un petit ajustement qui est, je veux randomiser comment ces choses sont jetées hors de leur position de baignade. Donc, si vous regardez l'exemple deux, tout ce que je veux que vous fassiez est de faire défiler vers le bas et de regarder la méthode onCreate. Vous remarquerez ici que j'ai mis quelques choses en plus. L' un est, je viens de dire que la rotation flottante est égale au hasard (TWO_PI). Donc, j'ai mis dans cette variable de rotation, et puis j'ai fait un petit ajustement à notre Hdrawable d. Sur la ligne 35, j'ai dit, ok, eh bien, le rayon de rotation devrait être quelle que soit la rotation déclenchée sur la ligne 30. Je veux aussi juste faire un mouvement rapide de hDrawable d pour être la rotation du cosinus fois dix pour le x, et les temps de rotation sinusoïdale dix pour le y. maintenant, juste avec ce petit ajout dans cet exemple particulier, regardons ce qui se passe. Vous remarquerez que quand les actifs commenceront à se créer, ils tirent comme des feux d'artifice. Au lieu d'être constamment jetés à droite, je distribue au hasard comment ces choses sont jetées dehors. Le problème avec ce fichier en ce moment, c'est qu'il n'y a pas de secousses, et parce qu'il n'y a pas de secousses , encore une fois, peu importe comment je jette ces choses, elles vont tomber dans cette rotation circulaire. Ce qui est bien dans celui-ci en particulier, c'est que vous en avez certains qui vont aiguilles d'une montre et vous en avez d'autres qui vont dans le sens inverse des aiguilles d'une montre, alors que dans l'exemple un, ils vont toujours dans le sens des aiguilles d'une montre. Donc, au moins avec l'ajout de ce code dans l'exemple deux, nous avons quelques actifs qui vont dans le sens des aiguilles d'une montre et d'autres dans le sens antihoraire. D' accord. Allons-y et fermons ceci et je vais aller de l' avant et passer à l'exemple 3. Le seul changement à l'intérieur de l'exemple trois est, et je dirais que l'exemple trois est en fait une copie de l'exemple un, je me suis débarrassé de ce genre de feu d'artifice de jeter comportement dans l'exemple trois juste parce que je veux garder les choses simplifiées. Dans l'exemple trois, tout ce que j'ai fait était d'ajouter ce twitch. En fait, j'ai changé la vitesse pour être cinq, la Turnease est maintenant 0.05, mais regardez cette secousse, twitch est 20. C' est là que c'est juste cette petite variable qui frappe vraiment l'excitation dans ce comportement particulier, qui est, ce que le twitch va faire est de le frapper hors cours. Donc, s'il implémente une certaine vitesse et qu'il implémente une certaine TurneAse, tout ce que twitch fait est fondamentalement le renverse hors cours. Donc, encore une fois, imaginez essayer de conduire votre voiture pour se rendre à une boîte de soda assis au milieu de la route, mais il arrive juste qu'il ya d'autres voitures qui sont en fait claquer en vous, vous frapper hors cours. Donc, c'est ce qu'est le twitch. Twitch s'écarte du chemin, les assommant un peu bien sûr. Maintenant, et encore, c'est le seul changement ici dans l'exemple 3. Regardez ce qui se passe lorsque nous lançons ce croquis. Nous commençons à obtenir ce très beau comportement organique parce que maintenant il semble que chacun d'entre eux a un esprit propre. Donc, vous avez peut-être vu dans la vidéo d'introduction que j'ai citée, c'est comme un comportement d'insecte et ça prend vraiment ce genre d'esthétique parce que, comme essaim est en cours d'exécution et comme ils utilisent tous une vitesse de cinq, et oui, ils utilisent tous TurnePlus de 0,05, ils reçoivent chacun un coup de secousse au hasard. Donc, dès que cela est implémenté, tout ce système semble prendre en charge toutes ces choses semblent agir indépendamment, mais ils sont vraiment obsédés par l'arrivée au centre de l'écran. Donc, cela termine les exemples un deux et trois. Dans la vidéo suivante, nous allons couvrir les ajouts dans des exemples de quatre à sept. On se voit dans la vidéo suivante. 29. Unité 7, Vidéo 2: Ok, c'est la dernière vidéo de cette section. On va travailler sur les exemples quatre, cinq, six et sept. Ce sont des mutations, juste pour montrer quelques améliorations qui peuvent être appliquées à ces fichiers. Alors, allons de l'avant et regardons l'exemple quatre et certains des exemples, certains des ajustements que j'ai faits sont de regarder la ligne sept. J' ai dit « auto clear false ». Donc, en ce moment, ça va commencer à laisser des traces à l'écran. L' autre rajustement que j'ai fait est de regarder la ligne 11. Dans les fichiers précédents objectif publicitaire était la largeur divisée par deux, hauteur divisée par deux. Ici, je dis juste H.souris. Donc, h.mouse va retourner la position x et y de la souris que je mets à jour, donc c'est un autre conseil à ce que nous avons fait dans H.Suivre, qui utilise le geste. Donc, maintenant le but est où la souris se trouve. Autre que cela, le code est exactement le même avec un autre petit ajustement mineur ici qui est sur la ligne 31 pour la taille, je viens de randomiser la taille des H.RECS qui sont créés. Donc, pour la largeur fait aléatoire 10, 20 et pour la hauteur fait au hasard deux, six. Maintenant, si je fais ce sketch, vous devriez remarquer que si je remets ma souris ici au centre, il y a 40 actifs dans ce drawable, la minuterie toutes les 250 millisecondes tire, et ils sont tout ce qu'ils sont juste en essayant d'atteindre ma souris. Donc, si je déplace ma souris ici dans le coin supérieur droit, le but de l'essaim a changé, donc maintenant je peux commencer à exécuter le geste et l'essaim essaie constamment de chasser l'emplacement de ma souris. Donc, rappelez-vous juste que l'objectif n'est pas toujours un point fixe. Dans ce cas, il peut en fait être un point qui se déplace, dans le cas de celui-ci est H.souris. Très bien, alors faisons d'autres améliorations. Cela utilise évidemment colorist et un hColorPool donc, j'ai pensé que peut-être je voudrais essayer d'autres choses qui, si vous regardez l'exemple cinq, nous l'avons couvert en première classe, mais jusqu'à présent, je n'en ai pas vraiment parlé jusqu'à présent qui est HColorField. Si vous vous en souvenez, hColorField vous permet de créer des points de dégradé de couleur. Donc, ici vous pouvez voir que j'ajoute un point de bleu et ajoute un point de rose. Donc, j'utilise hColorField pour définir des pools de couleurs et aussi si vous vous souvenez, si ces pools de couleurs se chevauchent, ils mélangent réellement de nouvelles couleurs où le chevauchement se produit réellement. Donc, le seul changement sur celui-ci est l'ajout de se débarrasser de, vous remarquerez qu'il a disparu maintenant, le .colorist HColorPool est absent de cette section particulière. J' utilise maintenant sur la ligne un ici hColorField, et encore sur les lignes 11 à 17, je spécifie deux couleurs, un bleu et un rose et je dis qu'ils ne devraient être appliqués qu'à un remplissage. Maintenant, il y a quelques choses si vous vous souvenez avec des couleurs de pixel que nous devons faire, c'est que vous devez définir un remplissage avec un champ de couleur et vous pouvez penser que le champ de couleur est comme être une teinte. Encore une fois, je ne sais pas si vous vous souvenez de la conversation que nous avons eue en première classe. Mais je veux pleine couleur saturée donc je vais en fait régler le remplissage sur noir,000000. Maintenant, parce que j'utilise H.mouse, et parce que je déplace la souris et que l'essaim suit le geste, je dois constamment mettre à jour les actifs qui sont à l'intérieur de l'essaim. Donc, regardons ici la fonction de tirage, et vous remarquerez que j'ai un peu pour boucle. Maintenant, une boucle pour est encore quelque chose, qui fonctionne un certain nombre de fois. Donc, ce que je veux faire est de faire une boucle sur les 40 actifs qui sont à l'écran, et mettre à jour chacun de ces 40 actifs mettre à jour leurs couleurs. Donc, je dis pour hDrawable d à l'intérieur de la piscine. Donc maintenant je sais que cette boucle pour va courir 40 fois. Quand je fais ça, je dis juste que je veux parler au champ de couleur. Donc, je dis colors.applyColor et je l'applique à d.fill et encore une fois, le d.fill est un bloc. Maintenant, si je lance ce croquis à nouveau, vous remarquerez qu'un essaim se déclenche, vous devriez être capable de déplacer votre souris, ils vont courir à votre souris et que vous vous déplacez, vous êtes en train de mettre à jour la couleur de remplissage avec ceci avec ce champ de couleur . Donc, si je me suis déplacé à cette bonne position, je reçois la pleine saturation du bleu et encore une fois, vous remarquerez que je commence à passer au milieu, je reçois ce violet parce que c'est là que les deux champs de couleur se mélangent réellement. Si je bouge ici à l'extrême gauche, alors bien sûr, je vais obtenir le plus brillant du rose. Comme il s'agit d'un dégradé, encore une fois lorsque vous commencez à vous éloigner, vous pourrez commencer à voir le dégradé au fur et à mesure qu'il se déplace. Donc, si j'arrive dans cette position, je me rapprocherai probablement de ce noir le plus possible. Donc, encore une fois, cela utilise hColorField. Donc, dans l'exemple quatre, nous utilisions hColorPool et l'exemple cinq, nous utilisions hColorField, donc bien sûr si vous passez à l'exemple six, je veux faire PixelColorist. Donc, si vous regardez HPixelColorist, nous avons notre couleur jpg. Alors, allons-y et regardons la première ligne. Je dis que les couleurs HPixelColorist sur les lignes 11 à 15, je dis hey allez dans le dossier de données et trouvez ce color.jpg. part cela, le code est toujours absolument le même sauf ici en bas à l'intérieur du tirage au sort, j'ai fait un peu d'ajustement que j'ai dit, « Cool, je dois boucler tous les actifs dans la piscine et j'ai besoin de mettre à jour leur couleur, couleurs.ApplyColor » mais remarquez que je dis d.alpha 50 donc je suis en train de changer la transparence alpha des hRectangles à l'intérieur du système essaim. Donc, si je lance réellement ce croquis, vous remarquerez qu'il échantillonne la couleur mais encore une fois, j'ai cet alpha de 50 donc je peux commencer à les faire créer de nouvelles couleurs comme ils courent les uns sur les autres. Si je restais dans une section, évidemment l'essaim s'accumulerait assez que cette zone particulière deviendrait assez saturée avec la couleur qui est échantillonnée à partir du jpg. Maintenant, passer au dernier fichier qui est l'exemple sept, vous saviez que celui-ci venait, ajoute HCanvas donc en haut j'ai dit HCanvas c1, encore une fois c'est juste une répétition, tant de répétition dans la programmation. Lignes 12 à 13 créant un HCanvas effacer automatiquement false. Encore une fois, notez que le faux AutoClear a été supprimé de la ligne 9, il a été ajouté à HCanvas avec un beau fondu de deux et notre canevas C1 est ajouté à la scène. Donc, parce que je l'ai fait, remarquez que je devais faire un rajustement à la ligne 25. Donc, au lieu de l'ajouter à la scène, je dis pool.Autoparent, puis passe le canevas. Donc, maintenant chacun de ces 40 HRECT se dessine sur la toile plutôt que sur la scène. Maintenant, encore une fois le reste du code n'a pas été modifié. Le for-loop vers le bas, j'ai pris l'alpha et puis juste dit d.fill in et collé dans cette couleur de noir. Donc, maintenant, quand je fais ce croquis, cela représente pour moi la beauté de tous les éléments qui travaillent en tandem. Donc, j'ai un essaim vraiment sympa qui se passe, j'ai à ramasser la couleur de HPixelColorist à partir de ce jpg assis dans le fichier de données, mais nous utilisons la puissance de HCanvas pour brûler lentement la trace de la afin qu'il ne remplisse pas entièrement l'écran, il me permet d'explorer les zones de l'esquisse puis de faire disparaître les sentiers en arrière-plan. Ok, donc ça se termine en explorant HSwarm et encore, Dieu je déteste continuer à dire les mêmes choses encore et encore, mais encore, c'est juste en utilisant un HRect. Cela peut utiliser n'importe quel SVG que vous avez créé. C' est là que l'expérimentation intervient. J' essaie de garder le code aussi générique que possible pour que vous puissiez commencer à, « Eh bien, et si je mets une image à la place de ça ? » ou, « Et si j'utilise SVG avec ça ? » Vous pouvez commencer à mélanger et faire correspondre certaines de ces choses que nous avons apprises en faisant ce genre de mutations dont je parle. Encore une fois, c'est des choses que je fais sur une base quotidienne, est venu avec ces idées, essayer d'écrire le code est générique que possible afin que je puisse commencer à explorer toutes ces différentes mutations. À quoi cela ressemble lorsque vous mettez certains de vos actifs SVG dedans ? Je suppose que vous allez poster des vidéos à l'intérieur de la section finale du projet qui nous montrera exactement à quoi ça ressemble. Donc, je suis excité de voir ce que vous faites avec le système en particulier. Ok, on passe aux deux dernières grosses sections de code, et on va passer à HosCillator ensuite. Voici la partie où quand vous cliquez sur HosCillator vous avez un peu paniqué parce que oui, il y a 23 exemples dans la section HosCillator. Je sors avec l'oscillateur d'âge, je suis amoureuse d'HosCillator et vous verrez évidemment pourquoi alors que nous avançons dans cette progression. Donc, HSwarm, ça a été fantastique. Je vous verrai dans la prochaine section HosCillator. 30. Introduction à HOscillator: En ce moment, vous avez atteint la section, c'est mon préféré absolu et c'est HosCillator. Parce que HosCillator est si simple, si beau, et si surprenant. Il y a tellement de mutations qu'on va faire avec Hoscillator. Ça, tu ne vas pas dormir, tu ne vas pas dormir avant un mois. Parce que vous allez penser à toutes ces façons différentes, de combiner HosCillator pour créer ces animations inattendues. Maintenant, HosCillator n'est qu'un motif d'onde, et nous avons en fait quatre vagues différentes avec lesquelles vous pouvez travailler. Il y a une onde sinusoïdale, qui est cette belle courbe. C' est probablement celui qu'on utilisera le plus. Nous avons une vague carrée, nous avons une vague de scie et nous avons une vague triangulaire. Maintenant, nous allons examiner certains des paramètres de l'HosCillator. Encore une fois, comme Swarm, il veut connaître une cible, à qui on applique cette vague. Il veut également connaître la propriété, tout comme HtWeen l'a fait, dans cette section précédente. Quelles sont les choses que nous pouvons réellement osciller ? On pourrait osciller à nouveau, Alpha, on pourrait osciller l'échelle, on pourrait osciller la rotation, on peut osciller la position. Il veut savoir des choses comme la portée. Alors, comme quelle est la plage d'oscillation ? Pourrait être, si nous l'appliquions à la rotation, pourrait être, positif 180 degrés à négatif 180 degrés. Donc on aurait ce truc, comme un pendule, qui va et vient. oscillateur a une fréquence, alors quelle est l'amplitude de l'onde ? Est à une vague ondulante lente ? Ou est-ce très erratique ? Nous avons également une propriété de l'étape actuelle, et l'étape actuelle, est ce qui nous permet de compenser cette vague, à travers différentes choses que nous peignons à l'écran. Donc, dans la première classe, nous avons appris des choses comme GridLayout. Eh bien, GridLayout et HosCillator fonctionnent bien ensemble ? Parce que, nous pouvons mettre en page les choses à l'écran, puis avoir des oscillations se produisent sur tous ces éléments de la grille. Maintenant, nous allons appliquer HosCillator à l'animation bidimensionnelle. Où il obtient vraiment des bananes, c'est quand nous appliquons réellement HosCillator à une animation en trois dimensions. Nous pouvons osciller des choses comme, l'espace Z, ainsi que, nous allons faire un échantillon où nous utilisons réellement HBox, ce qui nous permet de faire un cube tridimensionnel, et nous pouvons en fait osciller comment cette boîte tourne en trois- espace dimensionnel. Alors HosCillator, si ce n'est pas ton favori, on ne sort plus ensemble. C' est aussi simple que ça. Si tu n'aimes pas cette section, je rompt avec toi. 31. Unité 8, Vidéo 1: Chaque oscillateur. Tu es ma meilleure amie. Chaque oscillateur rend tout beau. Je ne peux même pas exprimer à quel point j'aime Hoscillator. C' est probablement la chose la plus surprenante que j'ai jamais expérimentée, en ce sens que, vous mélangez comme quelques choses et c'est comme « Quoi ? » Je suis genre, « Ouais ». C'est comme « quoi ? » C' est fou. J'adore ça. Vingt-trois exemples, mec. Je suis devenu fou. J' adore ce cours. Donc, attaché à cette vidéo est évidemment un fichier zip. Ouvrez ça, vous allez voir 23 exemples. Dans cette première vidéo, nous allons parcourir les six premières. Alors encore une fois, allez-y et téléchargez ce zip, décompressez-le, vous devriez le regarder et le voici. Maintenant, allons de l'avant et regardons l'exemple un. Exemple 1 ne contient pas d'HosCillator. En fait, ce qu'il contient est du code que nous avons fait dans la première classe en utilisant notre bel ami, HgridLayout. Donc, passons juste à travers cette grille que nous allons créer et ensuite, dans l'exemple deux, commencera à explorer l'oscillation. Maintenant, avant d'entrer dans le code battage médiatique, je veux juste sauter tout le chemin vers le bas et encore une fois, juste montrer du code de traitement. Donc, si vous regardez ici, je crée un trait d'un gris clair, CCCCCC, puis je crée une ligne, et je crée une ligne à partir du premier point est zéro, hauteur divisée par deux. Il est donc centré sur l'axe y et l'autre point est largeur par hauteur divisé par deux. Donc, on fait une ligne horizontale. Encore une fois, je veux voir cette ligne d'horizon parce qu'une fois que nous entrons en oscillation, je voulais voir comment l'oscillation affecte cette ligne de base. Alors, allons de l'avant et révisons cela. En haut, nous avons un HDrawablePool. Le pool va joindre 90 actifs. Il semble que nous attachons un rectangle à nouveau, mais vérifiez la taille, le côté est seulement de six pixels par six pixels. L' arrondi des bords est de deux, il est ancré au centre et il n'y a pas de trait. Il y a un coloriste avec un hColorPool avec quelques couleurs aléatoires s'appliquant à remplir uniquement. Tu remarqueras, encore une fois, je vais juste sauter quelques trucs. Regardez en bas, oui, le retour de RequesTall. Notez que nous n'utilisons pas de minuterie pour construire cette grille, je veux tous les 90 actifs à la fois. Regardons la mise en page ici. Donc, nous avons un HGridLayout. Il va commencer par un axe x de neuf et une hauteur divisée par deux. Donc, il va s'attacher à cette ligne d'horizon centrale. Parce que notre HRect est de six pixels par six pixels, notez que l'espacement est de sept pixels. Laisse-moi revenir à ça parce que tu pourrais remarquer qu' il n'y a pas de zéro pour le Y. Laisse-moi revenir à ça parce que tu pourrais remarquer qu' Parce qu'il y a 90 actifs dans les colonnes ce qui signifie, nous utilisons la disposition de la grille pour construire une rangée d'actifs et ces actifs sont de six pixels sur six pixels, mais comme l'espacement est de sept, il y a une gouttière d'un pixel entre chacune des HRectangles. Puisque nous construisons juste une rangée, il n'y a vraiment aucune raison de mettre un numéro pour l'espacement y. Alors, allons de l'avant et testez cette esquisse et encore une fois, vous devriez voir que nous avons 90 rectangles tous construits en une seule rangée, et qu'il est parfaitement centré sur la ligne d'horizon que nous avons définie dans le tirage au sort. Tellement génial, donc maintenant, j'ai cette rangée d'actifs à laquelle je veux appliquer une certaine oscillation. Donc, au moins avec ce fichier, vous pouvez voir comment nous attachons ce truc à l'écran avant d'appliquer l'oscillation. Je vais aller de l'avant et clore ça et je vais aller de l'avant et passer au deuxième dossier. Maintenant, à l'intérieur du dossier 2, je vais ajouter un oscillateur à chacun de ces rectangles. Donc, si je fais défiler vers le bas ici, vous remarquerez qu'il y a un RequesTall. RequesTall va se déclencher sur create pour tous les 90 actifs à la fois et ce qui se passe est qu'il crée rDrawable d. Il applique la disposition au d. Mais alors, il crée un oscillateur pour chacun de nos hRectangles. Donc, jetons un coup d'oeil à certaines des propriétés qui vont dans HosCillator et encore une fois, c'est la première fois que nous le couvrons parce que nous l'avons écrémé dans certains des exemples précédents ci-dessus. Tueur. La première chose qu'il veut savoir, c'est qui je suis en train d'osciller. Donc, nous créons une nouvelle instance d'un HosCillator et nous lui transmettons notre hDrawable de d. La deuxième chose qu'il veut savoir est la propriété qu'il oscille. Nous commençons à voir un modèle très similaire à HTwin. HTwin voulait savoir qui suis-je jumelage et quelle est la propriété. Donc, comme vous l'avez vu dans certains de ces exemples précédents, oui, vous pouvez empiler les HosCillators, et tant qu'ils ne combattent pas la même propriété, ils fonctionneront tous indépendamment. Maintenant, ce qui est important de remarquer ici, c'est qu'à la ligne 33, j'ai dit que ce que je voudrais osciller est la propriété y. Donc, ça doit signifier que je vais déplacer des choses de haut en bas sur l'axe Y. Maintenant, après avoir spécifié la propriété, il veut savoir, « Eh bien, qu'est-ce que j'oscille ? Quelle est la plage d'oscillation ? » Ainsi, par exemple, si la propriété h.alpha, la plage peut être quelque chose de 0 à 255. Donc, il oscille de non visible, zéro, jusqu'à plein visible, 255, et continuerait cette oscillation de zéro à 255. Alors regardez ce qui se passe sur ce fichier, j'ai dit que je veux qu'il oscille d'une plage de 10 à 50. Maintenant, il a besoin de connaître d'autres choses, il a besoin de savoir, eh bien, à quelle vitesse ça devrait aller. Donc, comme essaim, il y a une variable de vitesse, et l'autre chose qu'il veut savoir est la fréquence. Donc, nous allons explorer un peu la fréquence. Fréquence, est à une onde lente ou est-ce une vague très erratique ? Donc, dans celui-ci, j'ai dit que la fréquence l'a aussi. Maintenant, ce fichier est en fait un échec et la raison pour laquelle c'est un échec est parce que j'illustre pour la première fois ce qui se passe lorsque vous lui passez une propriété de y avec une plage de 10 à 50. Regardez ce qui se passe quand je teste le film. Quand je teste le croquis, il commence à osciller, mais vous remarquerez que toute l'œuvre vient de sauter au sommet de la scène. Eh bien, pourquoi c'est ça ? La raison pour laquelle j'ai fait ça, c'est parce que c'est ce que tu lui as dit de faire. Vous avez dit que vous vouliez déplacer cette rangée d'illustrations d'une plage de 10 sur l'y à 50 sur l'y. Donc, même si la disposition de la grille faisait un emplacement de départ de la hauteur divisé par deux, donc dans le cas de l'exemple un où il l'a créé le long de cette ligne d'horizon, il l'a fait pendant une fraction de milliseconde jusqu'à ce que l'oscillateur s'installe. Dès que l'oscillateur est entré, il a dit : « Oh oui, cool. Tu veux que je passe d'un axe y de 10 à un axe y de 50 ? » Donc, tout d'un coup, toute la rangée a sauté jusqu'au sommet et a commencé osciller entre un y de 10 et un y de 50. Donc, vous pourriez imaginer que vous pouvez jouer avec ceci si vous avez dit que la plage était zéro et que la plage maximale était 640, alors tout d'un coup vous verrez que l'oscillation va du haut de l'écran jusqu'au en bas de l'écran, car vous spécifiez des positions absolues d'oscillation qui est de zéro à 640. Donc, dans le cas du fichier précédent, le fichier zip que vous avez, il fait une plage de 10 à 50. Donc, ça pose un problème où tu dis : « Eh bien, oui. Je ne voulais vraiment pas cela, je voulais qu'il oscille hors de cette ligne d'horizon. » Au lieu d'essayer de comprendre ça, si tu le faisais dur, tu dirais « Ok. Eh bien, la plage est la hauteur divisée par deux moins 100, puis la plage maximale est quelque chose comme la hauteur divisée par deux plus 100. » Alors si tu faisais ce croquis, tu remarquerais : « Oh, ok. Cool, c'est ce que je voulais utiliser, commencez par cette ligne d'horizon, puis oscillez hors de cette ligne d'horizon. » Cependant, c'est un long chemin de le faire et encore une fois, j'aime rendre les choses plus faciles. Donc, je vais l'enlever, en revenant à la portée de 10 et à une portée de 50. Maintenant, cela ne s'applique vraiment qu'à lorsque vous définissez une propriété comme x ou y, que vous pouvez faire l'ensemble suivant de l'astuce, qui est d'aller de l'avant et d'aller à l'exemple trois, et vous remarquerez que nous avons déjà considéré que vous veulent probablement osciller hors d'une position déjà définie. Donc, vous remarquerez qu'à la ligne 34, il y a une valeur relative et ensuite vous la passez, c'est une valeur relative. Alors, réfléchissons juste à cela ici une seconde, mise en page dit : « Je vais attacher l'œuvre, hauteur divisée par deux. » Donc, il l'attache à cette ligne d'horizon centrale. Une fois qu'il arrive à l'oscillateur, vous dites, « Hey, je veux osciller ces drawables, je veux osciller l'axe y, mais faites-moi une faveur dans l'esprit où cette œuvre a été initialement créée. » Dans ce cas, la valeur relative est d.y, qui est la hauteur divisée par deux, c'est cette ligne d'horizon initiale au centre de l'écran. Ainsi, la plage devient une plage hors de la valeur relative. Donc, ici, je viens de dire « Man, où que tu sois attaché à ça, qui est d.y, fais moins 100 sur d.y, et fais 100 sur d.y positif. Donc, encore une fois, tu n'as pas à t'inquiéter comme, « Oh, qu'est-ce que je fais ? afin de trouver cette ligne d'horizon ? Vous pouvez simplement dire valeur relative, et encore une fois, c'est spécifiquement si vous travaillez avec l'axe des x, l'axe des y, l'axe des z, valeur relative est probablement quelque chose que vous allez utiliser. Donc, il utilise la plage basée sur cette valeur de base. Donc, maintenant, encore une fois quand je lance ce croquis ici, vous remarquerez qu'il s'occupe maintenant de la ligne d'horizon initiale, disposition utilisée, qui est à nouveau l'emplacement de départ, hauteur divisée par deux ici sur la ligne 21. Donc, la valeur relative tient compte du fait qu'elle attache l'illustration à la hauteur divisée par deux. Ensuite, la portée oscille simplement hors de ce numéro de base. as eu ? Bien. Donc, la prochaine chose que vous pourriez remarquer est, « Josh, ce n'est pas ce que je m'attendais, je pensais que c'était une vague. » Techniquement, c'est une vague, mais elle applique une vague à tous les actifs en même temps. Donc, ce que nous voulons probablement faire est de créer un peu de décalage afin qu'ils utilisent toujours l'onde mais juste décaler chacun des HRectangles juste jamais si légèrement pour que nous obtenions réellement ce modèle d'onde. Alors, allons de l'avant et regardons l'exemple quatre. L' exemple quatre est d'introduire cette idée de l'étape actuelle, alors pensez à cela comme un décalage. Ce que je fais est, c'est de dire, « Très bien, étape actuelle est la piscine.Currentindex. » Ainsi, le premier bloc passe un à l'étape actuelle, le second bloc passe à l'étape actuelle. Donc, puisque l'étape actuelle est d'obtenir son propre numéro unique, nous utilisons ce nombre unique comme un décalage sur la vague, donc c'est vraiment cette ligne 38 dans l'exemple quatre, qui devient juste la magie. Regardez ce qui se passe lorsque nous testons le croquis. C' est probablement ce que vous attendiez, c'est-à-dire nous utilisons cette onde, nous utilisons cette oscillation, mais ce n'est que lorsque nous avons réellement mis un décalage des actifs à l'écran, que nous commençons à obtenir une vague modèle ici. Donc, ligne 38, étape actuelle, pool.Currentindex. Maintenant, super. Commençons à faire quelques ajustements. Donc, je vais aller de l'avant et terminer le croquis 4, et je vais passer au croquis numéro 5. La seule chose que j'ai changée dans le croquis numéro 5 est que j'ai changé la fréquence, donc vous pourriez remarquer ici, la vitesse est un et la fréquence est cinq. Alors que dans la précédente, la fréquence était de deux. Donc, puisque la fréquence était plus faible, c'était une belle vague ondulée douce. Maintenant, si je change la fréquence à cinq, cela signifierait que cette onde va être beaucoup plus perturbatrice, et en fait plus vous faites ce nombre, plus la vague deviendra perturbatrice. Mais remarquez qu'avec cette fréquence, il semble que cela a effectivement accéléré le mouvement de cette vague. Donc, je veux vous montrer un petit truc qui est, si j'ai une vitesse d'une et que j'ai une fréquence spécifique, ça me fait commencer à penser à cette ligne 38, cette étape actuelle. Cette étape actuelle me fait penser, eh bien, ça passe par un à chaque fois, donc un est un, deux, deux, trois, trois, trois, quatre, quatre, et ainsi de suite. Mais si je peux juste incrémenter les étapes comme un plus grand nombre, comment cela affecterait-il réellement cette vague ? Donc, je vais aller de l'avant et fermer ça. Je vais aller de l'avant et regarder l'exemple 6, et l'exemple 6 a modifié les lignes 37 et 38. La fréquence que j'ai en fait ramené à deux parce que j'ai vraiment aimé le mouvement de cette vague. Je voulais juste plus de vagues dans le mouvement, mais pas nécessairement changer la vitesse de la vague définie. Alors, vérifiez. Sur la ligne 38, je viens de dire, au lieu de faire un est un, deux est deux, trois est trois, pourquoi ne pas l'étape actuelle est pool.CurrentIndex fois six. Donc, je multiplie en fait un nombre sur l'index actuel. Ainsi, les étapes entre chacun des actifs n'est pas un seul saut à chaque fois. Alors maintenant, quand je lance ce croquis, vous remarquerez que la vitesse et la fréquence sont en fait ce que j'ai aimé, mais j'ai changé les étapes l'étape actuelle afin qu'il présente en fait plus d'ondes dans le schéma d'oscillation. Ouais, cool. D' accord. Je vais fermer cette vidéo maintenant parce que pour une raison quelconque, j'échoue lamentablement. J' essaie de les garder courts. Donc, nous allons envelopper celui-ci et passons aux quatre prochains fichiers qui vont être l'exemple sept sinus, l' exemple huit carré, l'exemple neuf triangle et l'exemple dix scie. 32. Unité 8, Vidéo 2: D' accord. Cette vidéo va probablement être beaucoup plus courte parce que je veux juste vraiment mettre valeur les quatre différents types d'ondes que nous avons réellement à l'intérieur du battage médiatique. Donc, si je devais exécuter rapidement build sept, vous remarquerez que par défaut, chaque oscillateur utilise toujours une onde sinusoïdale ok. Donc vous voyez que vous obtenez juste ces très belles courbes, avec une onde sinusoïdale. Maintenant, il y a quelques ajustements que j'ai faits sur ce dossier que nous allons faire sur ces quatre et c'est que je change la propriété. Donc, si vous regardez ici, je change H.Height. Donc, si vous vous souvenez quand nous attachons l'illustration sur cette grille, chacun des rectangles H est de 6 pixels x 6 pixels et ce que j' oscille dans ces fichiers, c'est que je n'étire que la hauteur de la propriété, ok. Donc, si vous regardez la ligne 33, je dis propriété H.Height, et puis si vous regardez la plage, ici je n'ai pas besoin d'utiliser la valeur relative parce que je vais juste lui dire quels nombres je veux aller. Donc, dans ce cas, je dis, « Hey je veux que la plage soit 6, qui est ce que vous êtes initialement créé à droite, juste ici sur la ligne 11, » HRect 6 pixels x 6 pixels, pour le rectangle H. Ici, je dis, ok je veux que la portée soit de 6-200 pixels. Notez que la vitesse est de 1 la fréquence est de 3, et encore une fois, je décalé l'étape actuelle un peu en disant pool.Currentindex fois 3. Donc, lorsque vous exécutez l'exemple sept, vous voyez cette belle onde sinusoïdale appliquée à étirer la hauteur de ce rectangle H. D' accord. Maintenant encore, il y a quatre oscillateurs disponibles à l'intérieur d'un battage médiatique, par défaut, onde sinusoïdale. Si vous allez de l'avant et sautez à huit, vous pouvez réellement changer la forme d'onde en carré. Donc, ici, j'ai vague forme un H.carré et celui-ci est bizarre. C' est en fait une vague, mais la vague est soit vers le bas, soit vers le haut, à droite. Ce n'est pas une onde sinusoïdale, il n'y a pas de pente ou de courbe à cette vague. C' est toujours une vague, mais vraiment vous obtenez juste la gamme basse et la gamme supérieure en utilisant carré. Donc, vous remarquerez ici que vous pouvez dire forme d'onde et ensuite H.Square. Si nous sautons à l'exemple neuf, vous remarquerez que nous avons une forme d'onde de H.Triangle. D' accord. Donc, encore une fois ce n'est pas une onde sinusoïdale, ce ne sont pas des courbes, mais nous utilisons en fait un triangle vers le haut et un triangle vers le bas. Donc, encore une fois c'est un autre type de forme d'onde que vous pouvez utiliser à l'intérieur de l'oscillateur H, étant H.triangle. Le dernier que nous avons est à l'intérieur de l'exemple 10, qui est une onde de scie. Donc, si vous regardez ici sur la ligne 37, nous avons la forme d'onde de H.scie, et si vous allez de l'avant et exécutez ce croquis, l'onde de scie s'accumule essentiellement jusqu'à ce qu'elle atteigne sa portée maximale, puis descend jusqu'à son portée minimale. Donc c'est une vague de scie. Alors que j'ai ces échantillons pour vous montrer les différents types de formes d'onde qui peuvent être utilisés à l'intérieur de l'oscillateur H, onde sinusoïdale est la plus sexy. Donc, en fait, à partir du reste de ces fichiers, je vais juste utiliser l'onde sinusoïdale par défaut parce que, à mon avis, c'est la plus belle. D' accord. Ça met fin à cette vidéo. Dans la vidéo suivante, nous allons couvrir les exemples 11 à 15. On se voit dans la vidéo suivante. 33. Unité 8, Vidéo 3: D' accord. Dans cette vidéo, nous allons couvrir des exemples, 11 à 15. C' est là que l'oscillation commence vraiment à présenter certaines des surprises visuellement. Les choses les moins que je ne m'attendais pas au départ, et donc, ont commencé notre histoire d'amour à vie. Allons de l'avant et regardons l'exemple 11 et nous allons simplement digérer une partie du contenu qui se passe ici. Tout d'abord, c'est un peu un départ. Je me suis débarrassé du pool d'objets, et hDrawablePool, et de la disposition de la grille. Je veux juste utiliser une boucle pour parce que je vais juste attacher tout dans la même position exacte. Donc, commençons juste à décomposer ce code ici. Tout d'abord, j'ai une boucle pour, et cette boucle pour va fonctionner 40 fois, et chacune des 40 fois je vais attacher notre HRect de r1. Si nous regardons R1, je dis, « Hé, vous êtes un HRectangle, votre arrondi est de 20, votre taille est l'échelle de départ. » On y reviendra dans une seconde. Ça ne va pas avoir d'accident vasculaire cérébral. Le remplissage va obtenir une couleur aléatoire de r hColorPool apparaître en haut. L' emplacement sera la largeur divisée par deux, la hauteur divisée par deux. Donc, je sais que chacun de ces 48 HRectangles va attacher directement au centre de l'écran. L' ajout d'ancre est H.CENTER. Encore une fois, super important parce que dans ce premier fichier, nous allons commencer à travailler avec la rotation pour le pivot, et vous remarquerez également que je spécifie une rotation de 45 degrés. Donc, au lieu d'être un carré, il va tourner 45 degrés et être une forme de diamant, et H.add (r1) pour notre rectangle. Revenons en arrière et regardons cette entreprise de démarrage que nous avons en cours. En haut, vous remarquerez sur les lignes 4 et 5, j'ai une échelle de départ de 450 et un décalage d'échelle de 10. Ce n'est que lorsque vous descendez à la ligne 37 que vous voyez qu'après qu'il s'exécute pour la première fois et attache le premier HRectangle à 450 pour la taille, StartScale commence à diminuer en taille de 10. Donc, si vous regardez ici, il est écrit, « StartScale -= scaleOffset. » Donc, sur la ligne 37, ça va de 450 à 440, puis à 430, puis à 420, puis à 410. Ainsi, le StartScale diminue lentement en taille. Maintenant, vous remarquerez que j'ai HosCillator commenté, et c'est parce que si nous exécutons réellement ce croquis, vous verrez que oui, en fait, que pour boucle attaché 40 choses, il a saisi au hasard une couleur dans le pool de couleurs. Il a attaché ce premier à 450 pixels pour la largeur et la hauteur. Ensuite, la suivante est à 440, la suivante était à 430, et ainsi de suite. Chaque rectangle a commencé à diminuer de dix pixels à chaque fois. Donc maintenant, nous avons ce très beau truc de tronc d'arbre coupé en spirale. Super. Maintenant, allons de l'avant et mettons notre HosCillator. Alors, allons-y et regardons notre HosCillator. J' ai dit que la cible est évidemment r1. La propriété va être H.rotation, et la valeur relative va être de 45 degrés, ce qui est la rotation initiale que nous avons définie à la ligne 23. Regarde le champ de tir. La plage est négative 20 positive 20. Donc, nous avions ce carré, il a tourné 45 degrés et maintenant il tourne négatif 20, positif 20 de la valeur relative initiale de 45 degrés. Vous devriez également remarquer que notre vitesse est de 0,4, notre fréquence est de huit. Donc, c'est un plus grand nombre que les fichiers précédents, et l'étape actuelle est i. Donc, je suis juste un pas à pas à chaque fois. Vous remarquez que je suis notre entier ici dans la boucle for-. Donc, CurrentStep est zéro, puis un, puis deux, puis trois, puis quatre, et ainsi de suite. Alors, allons de l'avant et lançons le croquis. Vous verrez maintenant que l'oscillation tourne, elle oscille la rotation de ces HRectangles entre 20 négatif et 20 positif. Mais encore une fois, parce que l'étape actuelle est i, ils sont un peu décalés. Maintenant, vous pourriez demander, « Whoa, pourquoi n'as-tu pas fait comme je fois un nombre comme dans le précédent ? » Eh bien, si je fais ça, si je dis que je fois trois, par exemple, mon opinion est que la rotation de celui-ci est trop perturbante et vous perdez vraiment, à mon avis, la lenteur et la beauté de quand vous utilisez juste i. si je dis que je fois trois, par exemple, mon opinion est que la rotation de celui-ci est trop perturbante et vous perdez vraiment, à mon avis, la lenteur et la beauté de quand vous utilisez juste i. faux. C'est fantaisie, mais je préfère, pour ce fichier particulier, juste pour le faire i. Ralentissez votre bébé rouleau, ralentissez votre rouleau. C' est exactement ce qu'on va faire. Ramenez cela à i. Chaque chose est juste un pas et encore, le mouvement de l'oscillation est tout aussi élégant. D' accord. Allons sur cette idée. C' est là que ça devient vraiment bizarre, c'est quand vous commencez à empiler des oscillateurs. Encore une fois, tant qu'ils ne combattent pas la même propriété, la magie s'ensuit. Donc, allons de l'avant et regardons l'exemple 12, et sur l'exemple 12, je viens de copier 11 à 12, et c'est la seule modification que j'ai faite, c' est-à-dire que j'ai ajouté un nouvel HosCillator ciblant également r1. Mais cette fois, la propriété est à l'échelle. Je l'ai mis à l'échelle entre 50 pour cent sa taille d'origine à 150 pour cent sa taille d'origine. N' oubliez pas que l'échelle est basée sur la taille d'origine de l'œuvre. Si vous vous en souvenez, la taille d'origine commence à 450 et commence à décliner de dix à chaque fois. Par conséquent, nous nous occupons toujours de la taille de l'œuvre à laquelle elle a été créée, mais nous mettons à l'échelle un pourcentage basé sur la taille d'origine de l'œuvre par le haut. Super. Ainsi, de 50 pour cent à 150 pour cent, notez que la vitesse est toujours de 0,4, la fréquence est de huit, CurrentStep est toujours élevé. Maintenant, regardez ce qui se passe quand vous testez ce croquis. Maintenant, nous empilons deux oscillateurs qui fonctionnent évidemment ensemble. Il commence vraiment à simuler ce genre de sentiment 3D, mais ce n'est pas le cas. Je veux dire, vraiment, ce n'est que des œuvres d'art en deux dimensions. Il y a encore 40 d'entre eux juste empilés l'un sur l'autre mais l'oscillation, dans ce cas particulier, commence vraiment à me tromper les yeux parce qu'il commence à sentir 3D alors qu'en fait il ne l'est pas. D' accord. Passons à une autre mutation. Je veux continuer à muter ce jeu de base. Donc, je passe à l'exemple 13 et la seule chose qui est dans l'exemple 13 est un nouvel HosCillator de H.Y. Donc, je vais déplacer la position Y de notre HRectangle avec une plage d'oscillation hors de l'axe Y. Alors, vérifiez. Vous avez une propriété, H.Y, la valeur relative est, je ne sais pas, où avez-vous été créé à l'origine ? Eh bien, où il a été créé à l'origine était la hauteur divisée par deux. Donc, vous pouvez simplement dire r1.y, et cela va chercher le nombre qui a été mis en place ici à l'emplacement de la hauteur diviser par deux. Maintenant, il utilise cela comme une plage relative. Donc, ça va osciller négatif 50 de ce milieu, et positif 50 de ce milieu. Encore une fois, la vitesse est de 0,4, la fréquence est de huit, et encore une fois l'étape actuelle est encore i. Allez-y et testez cette esquisse et maintenant nous avons l'échelle de rotation et Y, encore une fois, tous oscillant en tandem, et Vous pouvez voir juste en commençant à faire ces mutations, mec, le ciel est la limite. Je commence à bien penser, combien de façons différentes puis-je changer cela pour obtenir des résultats différents ? Pour moi, cela fait partie du voyage est d'essayer de comprendre ce réglage fin pour comprendre quel genre de comportements d'animation ils commencent à créer esthétiquement. Remarquez que la vitesse et la fréquence sont de 0,4 et huit pour tout ça et je l'ai fait exprès. Passons à la construction 14. Build 14, encore une fois, introduire un nouvel HosCillator mais cette fois, pour l'axe X. Donc, je viens de copier l'oscillateur Y et l'ai renommé en propriété H.X. Bien sûr, la valeur relative va être r1.x, qui évidemment de haut en haut, récupère la largeur divisée par deux. Encore une fois, le centre de l'écran. Encore une fois, la plage tout comme Y est négative 50 et positive 50 pour l'oscillation. La vitesse est toujours de 0,4, la fréquence est encore huit, et l'étape actuelle est toujours i. Donc maintenant, quand je teste ce croquis, encore une fois, j'ai quatre oscillateurs qui travaillent tous en tandem. Maintenant, ici, vous remarquerez que parce que ces quatre oscillateurs utilisent la même vitesse, la même fréquence qu'il crée vraiment un motif. Notez qu'il va du haut à gauche au bas à droite. Il fait cette animation. C' est parce que l'oscillateur pour X et l'oscillateur pour Y ont la même vitesse et la même fréquence. Donc, bien sûr, ils vont tomber dans le rythme parce qu'ils utilisent les mêmes chiffres. Donc, c'est à ce stade que je veux parler de l'exemple 15, parce que l'exemple 15 va être de perturber ce rythme. Donc, si nous fermons ceci et passons à l'exemple 15, la seule chose que vous devez regarder est comment j'ai changé certains des paramètres. Alors, regardez la rotation. La rotation va plus grand maintenant. Il va de 45 à 45. La vitesse est de 0,4, la fréquence est de 10, mais l'étape est toujours i. L' échelle fait deux à huit. Donc, c'est différent de ce que la rotation a fait, et j'ai ajouté ceci i fois deux afin que l'échelle se passe plus erratique sur l'oscillation qu'auparavant. Regardez l'oscillation Y, j'ai dit, « 75 à 75 alors que le X est de 50 à 50 ». Mais regardez comment la vitesse est de 0,5 pour le X, vitesse est de 0,5 pour le Y. Mais sous ce Y, il a dit que la fréquence est de cinq, mais sous le X, j'ai dit que la fréquence est de huit et que l'étape actuelle était i fois deux. Donc, en perturbant tous les chiffres, quand vous exécutez réellement ce croquis, il ne tombe pas dans le rythme. Vous allez obtenir un certain statique , mais il ne tombe pas en haut à gauche, en haut à droite. En fait, ça serpente comme ça, et ça peut tomber. Donc, cela va se produire en perturbant les nombres sur chacun de l'oscillateur. Donc, maintenant, chaque oscillateur agit vraiment indépendant. Encore une fois, il est étonnant de voir combien cela simule quelque chose qui semble tridimensionnel quand ce n'est pas le cas. C' est deux dimensions et j'utilise juste l' échelle pour piéger vos yeux en pensant qu'il s'agit d'une forme 3D. Ok, explorons la prochaine série d'exemples. Donc, je vais fermer cette vidéo et nous allons passer aux exemples 16 et 17. 34. Unité 8, Vidéo 4: D' accord. Pour cette vidéo, nous allons regarder les exemples 16 et 17, et 16 et 17 c'est quand cela commence à faire allusion au genre de choses avec lesquelles je suis constamment en train de bricoler pour trouver des résultats différents. Donc, 16 est une continuation des fichiers que nous venons de faire en 11 et 15. Mais j'ai passé du temps à peaufiner certaines des variables. La première est que nous attachons 100 choses à l'écran. D' accord. Donc, la longueur ou la quantité de choses que vous créez va évidemment avoir un effet direct sur l'oscillation. Donc, ajoutez de plus en plus de choses sur ce qui est attaché à l'écran. Cela va évidemment changer ce qui se passe avec l'oscillation. Donc, dans ce cas, j'ajoute 100 choses à l'écran ici. L' autre chose qui est également important de se rappeler est que l'ancre va jouer un rôle énorme dans l'oscillation, surtout quand il s'agit de la rotation, parce que regardons la ligne 19. J' ai dit, eh bien, l'ancre est 50. Mais, encore une fois, c'est ce négatif 50, sorte que c'est hors des œuvres d'art. Donc, l'oscillation se produit maintenant hors de ce point de pivot. Donc, la rotation passe maintenant de 180 négatif à 180 positif. J' ai une vitesse de 1, une fréquence de 4. J' ai une oscillation pour l'échelle qui va de 25 pour cent sa taille d'origine à 100 pour cent sa taille d'origine avec la vitesse de 1 et une fréquence de 4, et l'étape actuelle étant I fois 3. Il y aura donc plus d'impulsions dans cette oscillation particulière. J' ai un oscillateur pour Y qui va beaucoup plus grand qu'avant. Il va négatif 150 à positif, et pour le X, je fais aussi 150 négatif et 150 positif. Même s'ils ont tous deux utilisé une vitesse de 0,5, vous remarquerez que le Y utilise une fréquence de 2 et le X utilise une fréquence de 1. Donc juste en changeant les fréquences sur ces deux-là, signifie, encore, qu'ils vont tomber de la répétition. Alors, allons de l'avant et exécutons ce croquis et regardons comment les résultats ont changé. Donc, j'ai rendu l'échelle un peu plus serrée en ne passant que de 25 % à 100 %. Mais parce que j'ai fait de l'oscillation Y et de l'oscillation X un nombre beaucoup plus grand, comme négatif 150 et positif 150, l'amplitude de mouvement est beaucoup plus grande. Encore une fois, parce que nous avons changé le point d'ancrage pour être que négatif 50, cela affecte directement notre oscillation pour rotation qui va négatif 180 positif 180. C' est ce type d'expérimentation ou de mutation de fichier qui, que puis-je changer à côté de produire quoi ensuite ? Donc, je finis par enregistrer ces fichiers comme tant d'itérations juste en essayant de découvrir ce genre de mouvements fantastiques. Encore une fois, j'aime juste comment ça ressemble à la 3D même si c'est juste un tour de l'œil. D'accord. Regardons Build 17 parce que, comme vous l'imaginez, j'ai toujours une boucle autour de ce que nous avons fait précédemment. Donc, bien sûr, je vais vous présenter chaque toile. Donc, vous remarquerez qu'il y a une toile H, il y a notre C1, il y a l'ajout de notre toile. L' effacement automatique a été déplacé vers le canevas. Il utilise un fondu de 2, et nous ajoutons le canevas à la scène, ligne 25. Encore une fois, l'œuvre est attachée à notre toile C1. Donc, un autre petit changement que j'ai fait ici est que j'ai fait un peu de remplissage, et je l'ai fait obtenir de la couleur. Donc, il obtient la couleur aléatoire de ce pool de couleurs H. Mais je fais une graine ici. Donc je l'ai fait fois 250 et ça crée juste une sorte de baguage intéressant. Donc, à part ça, eh bien, on dirait que j'ai fait sauter la portée beaucoup plus. Vérifions ici. La rotation est toujours de 180 à 180. L' échelle est toujours de 25 à 100. Mais pourtant, j'ai fait la large gamme 300,300. J' ai fait la gamme X 300, 300 aussi. Alors, allez-y et exécutez ce fichier, et encore une fois, vous devriez remarquer qu'il commence à faire cette belle bande de couleur en faisant une graine à l'intérieur de cet appel de couleur get. Il fait ce genre de groupes intéressants. Parce que j'utilise de la toile H et un fondu, cette chose brûle lentement. Donc, encore une fois, je me retrouve constamment à faire des mutations pour voir quels différents types de modèles et d'animations je reçois. Le jeu qui peut être attaché à ce genre de choses est infini. Je me retrouve constamment à essayer de découvrir quels types d' esthétique je peux sortir de quelque chose d'aussi simple que d'empiler des oscillateurs. D' accord. Je vais fermer cette vidéo. La prochaine, nous allons juste regarder l'exemple 18. 35. Unité 8, Vidéo 5: D' accord. C'est l'exemple 18, et je pensais à l'exemple 18 à nouveau, je voudrais juste essayer de garder vraiment court et doux. Il y a d'autres mutations inattendues. Donc, jusqu'à ce point, nous avions utilisé HRECT dans cette oscillation. Je voulais juste montrer ce qui se passerait quand tu commenceras à faire des écarts. Alors, jetons un coup d'oeil à ce que j'ai fait avec l'exemple 18. La première chose que vous remarquerez est que HCanvas est toujours là, qui est reporté d'auparavant. Vous remarquerez que le canevas fait un AutoClear (false), mais vous remarquez aussi que je ne veux pas faire de décoloration, je veux qu'il laisse des traces derrière elle et les garde indéfiniment. Maintenant, allons de l'avant et regardons notre création d'un d dessinable, sur les lignes 16 à 25. Donc, dans ce cas, je vais faire un HPath. HPath nous permet de faire toutes sortes de choses différentes comme ; triangles, polygones, et étoiles, et dans ce cas, je vais utiliser HPath pour définir une forme d'étoile. Donc, si vous regardez ici sur la ligne 16, nous avons HPath d, d étant un raccourci pour drawable. Encore une fois, nous spécifions une étoile, c'est une étoile à cinq pointes avec quelques arguments de 0,4 et une rotation négative de 90. Encore une fois, la taille des étoiles est de 200. Dans le fichier précédent, nous obtenions au hasard des couleurs, mais pour le remplissage, cette fois je vais obtenir des couleurs aléatoirement, mais pour les traits. Donc, ici, je suis en train de régler la couleur du trait à nouveau en utilisant cette graine aléatoire, i fois 250, juste pour obtenir des motifs intéressants. Le remplissage, je vais en fait faire noir et j'ai également mis le fond en noir dans ce croquis aussi bien. Le Anchorat est H.CENTER et encore une fois son emplacement initial est la largeur divisée par deux, la hauteur divisée par deux. Ajout du drawable à notre ami HCanvas ici, et voici les oscillations. Donc, encore une fois, j'empile des oscillateurs comme le fichier précédent. Donc, voyons ce que nous avons ici, nous avons une oscillation pour la rotation, allant de 180 négatif à 180 positif, avec une vitesse d'un et une fréquence de 0,5. Donc, il semble que cette rotation ait ralenti un peu avec une fréquence de 0,5. Nous avons notre oscillation d'échelle, et il semble qu'il va faire une vitesse de deux et une fréquence de quatre pour 25% sa taille d'origine et 100% sa taille d'origine. Nous avons aussi quelques oscillateurs X et Y ici et il semble que les deux passent de 500 négatif à 500 positif, mais le Y a une vitesse de 1 et une fréquence de 0,7, alors que le X a une vitesse de deux et une fréquence de 0,5. Alors, allons de l'avant et exécutons ce croquis pour voir ce qui se passe. Donc, c'est vraiment intéressant la texture du tissu que cela finit par créer, parce que j'utilise une étoile comme forme initiale, et parce que cette étoile a un certain motif à elle. Évidemment, comme il oscille et que je laisse le résidu de celui-ci courir à travers l'écran, il commence vraiment à créer ces beaux motifs de tissu intéressants. Donc, encore une fois, nous pouvons faire correspondre cela avec des formes SVG telles que le dessin Illustrator ou dans ce cas en utilisant H.path. Donc, encore une fois, je peux garder cette vidéo simple. Encore une fois, je peux regarder ça pendant des jours parce que je suis juste ce genre de mec. Donc, je vais fermer cet exemple 18, et je vais passer à une vidéo qui fonctionne juste avec l'exemple 19. 36. Unité 8, Vidéo 6: D' accord. Ici, nous en sommes dans l'exemple 19. Exemple 19, en se rapprochant sérieusement de ce que nous avons fait dans la première classe que nous utilisons le pool H-drawable, nous utilisons une disposition de grille. Super. Alors, montrez-moi comment osciller des choses en fonction d'une mise en page de grille. Donc, nous allons simplement décomposer la mise en page ici. On a un HDrawablePool. On dirait que sur la ligne 8, j'attache 49 choses. Il semble que j'ai un coloriste ici qui va choisir des couleurs aléatoires, et puis bien sûr, j'ai une mise en page de grille. Cette disposition de grille obtient un début x, un début y, un espacement, et quelques colonnes, et les colonnes sont sept parce que je vais faire une grille sept par sept d'actifs, d' où 49 objets dans le hDrawablePool. Allons de l'avant et regardons le fond ici, qui est les tirages au sort, juste faire le H.Drawstage. Oui, nous faisons tout demander, donnez-moi la mise en page de la grille s'il vous plaît, instantanément tout à la fois. Ensuite, si vous faites défiler jusqu'au sommet ici, vous pouvez voir que j'utilise le chemin H pour randomiser un tas d'étoiles. J' ai fait des choses comme, à la ligne 27, je veux randomiser certains aspects des étoiles. Donc, sur la ligne 27, j'ai dit, eh bien, nous allons randomiser les bords, donnez-moi un nombre entre cinq et 10, et pour une profondeur aléatoire, donnez-moi un nombre entre 0,25 et 0,75. Donc, alors je crée ce chemin H et vous verrez ici, j'ai mis l'étoile et je l'ai fourni avec les bords aléatoires et la profondeur aléatoire. Chacune de ces étoiles aura une taille de 64, il n'y aura pas de course, il est ancré au centre, et il va aussi obtenir une rotation aléatoire. Donc, vous remarquerez que la rotation est aléatoire de 360 degrés. Maintenant, vous pourriez remarquer dans mon dossier, j'ai commenté les oscillateurs et c'est parce que, je veux juste exécuter ce croquis pour que nous puissions voir visuellement ce qui est dessiné à l'écran. Super. Une grille de sept par sept étoiles aléatoires, et encore une fois dans ce cas, les étoiles, il était beaucoup plus facile pour moi de les créer comme des chemins H, mais il n'y a aucune raison pour que ces éléments ne puissent pas être des actifs SVG que vous avez créés dans Illustrator, si vous vouliez faire un une bande d'étoiles comme ça. Mais parce que je voulais randomiser les étoiles, il était beaucoup plus facile pour moi de le faire avec du code que de le faire dans Illustrator. Alors, grat. Voilà notre grille. Maintenant, je veux osciller cette grille, mais je veux osciller cette fantaisie de grille. Alors, regardons un peu d'ajustement ici. J' ai réellement ajouté 3D à ce fichier. Donc, croyez-le ou non, exemple 19 va utiliser quelques oscillations 3D. Donc, notez à la ligne quatre, je dois spécifier le traitement que je veux utiliser le rendu P3D. Avis sur la ligne cinq, j'ai ajouté l'utilisation 3D true. Encore une fois, parce que je veux faire quelques oscillations tridimensionnelles. Maintenant, ces étoiles sont plates. vrai, et ils traînent comme ça, directement sur nous. D' accord. Si vous faites défiler jusqu'à ce que j'ai fait pour l'oscillation ici, encore une fois dans mon fichier, il est commenté, parce que je veux vous montrer ceux-ci chacun à la fois. Ces trois oscillations traitent des transformations 3D. Donc, faisons juste le bas qui a probablement le plus de sens, qui oscille l'axe z. Donc, encore une fois l'axe z va venir vers nous et loin de nous, et vous remarquerez que c'est une très petite portée. C' est seulement négatif 50 et positif 50. La vitesse est de deux, la fréquence est un, mais j'échelonne l'étape actuelle en faisant l'index actuel fois huit. Maintenant, avec cette oscillation, je vais faire ce croquis ici, et vous devriez voir que nous oscillons les coordonnées z des étoiles. Donc, c'est ce dont je parlais plus tôt où je simulais la 3D en utilisant l'échelle. Ici, je n'utilise pas du tout l'échelle, je suis en train de déplacer cela dans l'espace tridimensionnel. Mais vous ne le sauriez jamais, parce que z ressemble très à l'échelle. droite. Ça vient juste vers toi et loin de toi. Alors, regardons quelques-unes de ces autres oscillations que j'ai ici. Afin de les regarder indépendamment, je vais juste le commenter à nouveau. Décommentons cet oscillateur qui est la rotation y, et vous remarquerez qu'il est 45 sur le négatif, 45 sur le positif et la vitesse, fréquence, les courants et ainsi de suite. Ça va nous donner ce mouvement. Donc, je vais tourner les objets plats comme ça. Alors, regardez ce qui se passe quand je teste ce croquis. J' applique maintenant une oscillation à ce pivot. droite. Donc, même si c'est toujours un objet bidimensionnel plat, je peux réellement pivoter cet objet bidimensionnel dans des coordonnées tridimensionnelles comme celle-ci. D' accord. Donc, j'ai un beau mouvement comme ça. Encore une fois, vous pouvez vraiment gâcher avec cela si vous faites négatif 180 à 180 positif. C' est assez hilarant. droite. Parce que ça va faire tourner l'étoile complètement autour. Donc, vous obtenez ces beaux modèles scintillants, assez amusant. D' accord. Revenons cela aux chiffres qu'il était, qui sont négatifs 45 et positifs 45. Je veux commenter cet oscillateur, et je vais décommenter cet oscillateur qui utilise la rotation z. droite. Donc, le premier était la rotation y, celui-ci est la rotation z, et moi aussi je l'ai dit à négatif 45 positif, mais une vitesse différente, mais une fréquence similaire à la rotation. Alors, allons de l'avant et regardons cette oscillation, et remarquez que cela me donne ce pivot, très similaire aux rotations ordinaires. Donc, vous avez y qui est de cette façon, vous avez x qui est de cette façon, et z me donne ce pivot de cette façon. Maintenant, la magie se produit quand vous allumez tout ça. Lorsque vous les allumez, vous allez obtenir de la magie sombre, rotation y, de la rotation z et de l'oscillation sur l'axe z. D' accord. Maintenant, j'ai ma grille, mais maintenant j'empile ces trois oscillations pour me donner ce mouvement. Donc, voici un joli petit ajustement, en utilisant l'oscillation dans un espace 3D qui est juste super bananes. D' accord. Fermons ce dossier, et nous allons passer au prochain. Nous allons juste nous concentrer sur l'exemple 20, en faisant de bons progrès. 37. Unité 8, Vidéo 7: Cette vidéo traite de l'exemple 20. Et tu dis : « Josh Davis, pourquoi tu continues à parler de SVG ? Montrez-nous un exemple qui utilise SVG. » Donc, l'exemple 20 fait exactement cela - en fait, j'ai effectivement tiré ce fichier d'une classe que nous avons faite dans la première classe précédente - dans le sens où j'ai une disposition de grille et je randomise certains actifs SVG. Alors, regardons la construction 20. Le grand changement ici, évidemment, est que j'ajoute un tas de formes SVG. J' ai commenté un et six juste pour le diable. Celui-ci utilise uniquement SVG2, SVG3, SVG4 et SVG5. Donc, si vous regardez le HDrawablePool, nous allons attacher 144 SVG. Nous avons une mise en page ici et à l'intérieur de OnCreate, il attache notre SVG, c'est EnableStyle false, il tue le coup sur le SVG, il applique une rotation aléatoire de 90 degrés et je lui demande aussi d'attraper un peu aléatoire couleurs de notre hColorPool énumérés ci-dessus. Maintenant, regarde ça. Ici, j'ai deux HosCillators empilés, et si je les commente et juste exécuter ce fichier, voyons juste ce que nous obtenons ici. Vous vous êtes peut-être souvenu de cela de la première classe où je crée juste un modèle en randomisant ces SVG. moment, vous remarquerez que sur la ligne 36, j'ai la taille commenté parce que si je mets la taille là où je randomise 50, 100, 150, 200 pour la taille, si je fais ça, ça va pour nous donner ce genre de, oui, c'est génial, ça a l'air génial. Cool. Maintenant, je veux osciller ça d'une certaine façon. Mais, juste pour le diable, je vais commenter cette position de taille pour que nous soyons juste de retour à cette grille ici et voyons juste ce qui se passe quand nous oscillons cette grille. Alors, allons de l'avant et faisons cette première oscillation. Bien sûr, il cible notre drawable, il applique la rotation, il passe de 180 négatif à 180 positif. Regardez la vitesse, 0,05, c'est vraiment sympa et lente, et la fréquence est de cinq, et remarquez que l'indice de pas actuel ne fait que marcher par incréments d'un. Donc, regardez ce qui se passe quand je teste le croquis ici, vous remarquerez que, encore une fois, nous faisons lentement l'oscillation de 180 à 180 sur la grille. Donc, encore une fois, il présente ici un motif entièrement nouveau juste en appliquant cette oscillation. Donc, c'est amusant. Maintenant, laissez-moi décommenter cette oscillation pour l'échelle. Alors, regardez ce que j'ai fait pour l'échelle ici. J' ai dit : « Ok, je veux que tu oscilles l'échelle, mais je veux que la plage passe de 100 à 500 pour cent. » Donc, ça va devenir assez gros. Encore une fois, la vitesse est de 0,05, c'est gentil et lent. Mais la fréquence est un peu plus abrupte dans le sens où nous utilisons une fréquence de sept et l'étape actuelle utilise l'indice actuel fois trois. Allons de l'avant et exécutons ce fichier. Encore une fois, nous obtenons une oscillation d'échelle en conjonction avec une oscillation de rotation. Ce n'est que des triangles, c'est littéralement en utilisant des triangles, SVG que j'ai fait à l'intérieur d'Illustrator mais, encore une fois, ce genre de mélange commence à produire ces résultats vraiment élégants. Comme l'échelle est basée sur la taille originale des œuvres d'art, vous remarquerez que, encore une fois, l'œuvre ici est de 50 par 50, donc l'échelle ne s'applique qu'à chacun des éléments qui sont de 50 par 50. C' est lorsque vous décommentez le paramètre de taille que les choses vont devenir un peu plus aléatoires car maintenant vous randomisez la taille des actifs dans cette grille. C' est amusant parce que vous obtiendrez ces moments de formes plus petites, mais ensuite vous obtenez ces belles grandes formes balayantes parce que c'est l'élément du hasard absolu dans cette pièce, c'est la seule chose dans le système qui est vraiment stupéfiant dans le sens que si je ferme ceci et le relance, je vais obtenir quelque chose de différent. Si vous avez la ligne 36 commenté, vous allez commencer à voir une sorte d'esthétique où comme en implémentant cette randomisation de la taille, je vais obtenir quelque chose de différent à chaque fois. Ainsi, l'exemple 20 montre simplement ce qui se passe lorsque nous commençons à osciller certains de nos fichiers SVG. Je vais fermer celui-là. Dans la vidéo suivante, nous allons travailler avec l'exemple 21 et l'exemple 22. On se voit dans la prochaine vidéo. 38. Unité 8, Vidéo 8: Voici les exemples 21 et 22. J' espère que vous allez profiter de ces deux prochaines parce que j'aime vraiment maintenant l'ajout d'expérimenter avec des objets 3D. Donc, bien sûr, les exemples 21 et 22 vont utiliser notre ami HBox. Donc, avant que nous ayons expérimenté avec beaucoup de choses différentes comme HRect, et HShape et SVG et HPath. Donc, j'ai pensé que je prendrais le temps de montrer en utilisant des drawables 3D. Alors, allons de l'avant et disséquer, construire 21 ici. Donc, en haut, j'ai dit que la taille de la boîte est de 150 et vous verrez ci-dessous quand nous appelons cette variable, cette taille de boîte va être utilisée pour la largeur, pour la hauteur et la profondeur. Donc, la taille de la boîte est de 150. Bien sûr, je dois faire des ajustements aux lignes cinq et six pour utiliser P3D et utiliser 3D true. On va dessiner 100 articles. Nous allons utiliser HBox comme drawable. Nous avons une mise en page, c'est une mise en page de grille, ça va commencer à 125 négatif sur le x, 125 négatif sur le Y, l'espacement va être de 100 pixels entre chaque boîte, et les colonnes sont de 10. Et donc, il fait la grille 10 par 10. Si vous allez de l'avant et regardez le OnCreate, voici que nous créons notre HBox et vous remarquerez que je viens de faire un petit raccourci, j' ai dit que la profondeur est la taille de la boîte, la largeur est la taille de la boîte, et la hauteur est la taille de la boîte. Je l'ai dit de cette façon parce que si vous ne vouliez pas utiliser la taille de la boîte variable ci-dessus, vous pourriez mettre trois nombres distincts ici pour changer réellement la taille du rectangle, si vous ne vouliez pas utiliser un cube parfait. Il n'y aura pas de coup sur ces boîtes. Vérifiez, j'ai réglé la profondeur Z initiale des boîtes à 500 négatifs. Donc, je construis cette grande grille, mais je la laisse tomber dans l'espace, 500 pixels négatifs. Maintenant, je vais sauter sur les oscillateurs, je vais descendre en bas et remarquer que je crée des lumières ponctuelles. Donc, j'installe quelques lumières dans la scène et vous pouvez voir que j'ai trois couleurs ici ; j'ai une orange, une sarcelle et un jaune. Encore une fois comme un rafraîchissement, un voyant ponctuel, les trois premiers arguments veulent connaître le rouge, le vert, bleu, puis les trois dernières positions sont l'axe X, l'axe Y et l'axe Z. Donc, c'est là que je mets cette lumière dans l'espace. Maintenant, si je monte aux oscillateurs et que je les commente et si je fais ce croquis, vous devriez voir que je suis en train de construire une grille de boîtes. Non seulement c'est une grille de boîtes, mais aussi vous obtenez une représentation des lumières ponctuelles. Vous pouvez voir que voici notre point lumineux orange à 300 négatif, voici notre point bleu bleu bleu sarcelle, à 300 négatif, et puis il y a un jaune assis sur le dessus au négatif, eh bien en fait c'est en dessous, ce n'est pas sur le dessus, à négatif 400, c'est jaune. Maintenant, dans ce cas, regardez les oscillateurs ici, pour l'oscillation tout ce que je fais est d'osciller la rotation x, rotation y et la rotation z. C'est la seule chose que je tourne ici. Donc, si vous pensez à cette boîte, il devrait commencer à faire ce mouvement parce que j' oscille la boîte sur trois axes différents. Allez-y et testez ce croquis et c'est tout simplement magnifique. Donc, je construis cette grille de boîtes et j'utilise l'oscillation de rotation X, Y et Z pour créer ce très beau motif avec ces cubes 3D. Encore une fois, vous pouvez aller sur les lignes 29, 30 et 31 et changer réellement la profondeur, la largeur, la hauteur, à n'importe quel nombre que vous voulez, et vous obtiendrez des résultats assez surprenants. Laissez-moi juste essayer un test ici, si je disais que la profondeur des boîtes, la taille de la boîte fois trois, voyons ce que cela fait. Qui sait ? D'accord. Espérons que vous pouvez voir la profondeur de la boîte à ce moment-là, ouais. Donc, vous pouvez commencer à ajuster ces nombres et encore une fois vous allez voir quelque chose de différent ici dans cette animation. Super. Donc, c'est l'exemple 21, passons à l'exemple 22 et celui-ci était juste que j'avais cette intuition que ça allait se comporter d'une certaine manière, mais je n'étais pas tout à fait sûr. Je pensais au film original Tron et le personnage Tron avait que je pense qu'il a été appelé bit ou octet ou RAM. Je ne me souviens pas, ça fait si longtemps que j'ai vu le Tron original, mais il avait cette forme qui disait seulement oui ou non. Je me suis dit, wow je me demande si je pouvais prendre ce même système et obtenir cet effet ? En fait, tu peux. Donc, si vous avancez sur la construction 22, voici vraiment le seul ajustement qui est, j'ai dit que la mise en page devrait commencer à la largeur divisée par deux, hauteur divisée par deux, mais l'espacement était zéro et zéro. Donc, si vous regardez HDrawablePool, je fais en fait 50 boîtes toutes au même endroit, qui est le centre de l'écran. Donc, je suis en train d'attacher 50 boîtes toutes à la largeur divisée par deux, hauteur divisée par deux et encore, il semble que la taille de la boîte ici est de 500. J' ai une rotation X, une rotation Y, une rotation Z, puis j'ai ajouté un quatrième oscillateur pour l'échelle. Donc, je vais être avec les 50 boîtes, non seulement je vais les faire tourner toutes les unes sur les autres, je vais aussi les rétrécir et les agrandir. Encore une fois si vous testez ce croquis, c'était comme une intuition que ça allait être cool, mais je n' avais aucune idée jusqu'à ce que je l'ai essayé. Encore une fois, une autre mutation où je prends juste un tas de boîtes et les empiler toutes sur l'autre sur largeur divisée par deux, hauteur divisée par deux, et encore une fois, vous voyez que j'ai ces très beaux motifs dans ce système. Cette vidéo ferme les exemples 21 et 22. Nous allons passer à la dernière dans cette section qui est l'exemple 23, qui utilise une forme que j'ai faite en illustrateur et juste un petit tour derrière cela. Alors, on se voit dans la prochaine vidéo. 39. Unité 8, Vidéo 9: On l'a fait. Nous sommes arrivés au dernier fichier sur HosCillator, mais en aucun cas je ne continuerai à dater régulièrement chaque oscillateur parce que, encore une fois, cela pourrait me surprendre continuellement. C' est l'exemple 23. Exemple 23 vient de me faire penser à ce que j'avais fait en 3D pour chaque boîte était certaines choses que je pouvais faire, que je pouvais essayer. Donc, cela allait utiliser un SVG, et si vous allez réellement dans le dossier Data et regardez le SVG, c'est tout. C'est une bague. Donc, j'ai fait cette oeuvre dans Illustrator, j'ai fait cette bague, mais ce qui m'intéressait vraiment c'est d'assommer le centre. Donc, c'est littéralement comme une bague et la partie centrale est en fait transparente, elle est assommée. J' ai juste pensé, je me demande, sur la base de ce dernier dossier, que faire si je mettais un tas d'anneaux l'un sur l'autre et si je commençais à osciller ces anneaux, pourrais-je voir à travers cet espace central et être capable de voir certains des autres anneaux sous eux ? La réponse est que c'est incroyable. Alors, regardons Build 23. La première chose que je tiens à souligner est que j'ai fait ce tour comme nous l'avons fait plus tôt où nous avons pris chaque rectangle et nous avons eu une taille de départ et ensuite nous avons eu une série d'étapes qui sont descendues, j'ai fait la même chose ici avec la bague. Donc, vous remarquerez ici en haut, j'ai deux variables, j'ai une flûte d'une échelle d'anneau 600 et un entier de pas 5. Ok, bien sûr, j'ai P3D comme moteur de rendu et j'utilise la 3D dans ma configuration de battage médiatique. Je vais attacher 153 anneaux, et encore une fois, ici j'utilise HShape et je vais obtenir ce ring.svg, et tout comme le dernier fichier, la mise en page est divisée par deux, hauteur divisée par deux, pas d'espacement. Donc, il empile les 150 anneaux l'un sur l'autre. Mais comme je l'ai fait avec ce fichier précédent, vérifiez-le avec la taille. J' ai dit que la taille est RingScale. Donc, nous savons que le premier anneau qui est créé va être 600 par 600 et encore une fois, c'est ici sur la ligne 42 que je fais l'échelle de la bague égale à l'échelle bague moins les étapes de la bague et donc l'échelle de la bague commence à diminuer en taille. Maintenant, je vais aller de l'avant et commenter les oscillateurs et regardons ce qui se passe ici. J' ai dit que HShape dessinable ici, d. Je vais activer le style, il n'y aura pas de coup, et je suis au hasard saisir un remplissage de notre hColorPool, et encore une fois, je fais que je fois 250, qui est une graine aléatoire. Donc, ça va créer ce baguage intéressant. La taille est le RingScale, l'ancre est le centre. Donc, c'est un peu important, et l'axe z pour celui-ci est juste zéro. Donc, je vais aller de l'avant et tester le croquis ici et je devrais voir un tas de bagues décliner à mesure qu'elles descendent. Mais encore une fois, ce qui est intéressant, c'est que ce ne sont pas un tas de cercles, c'est un tas d'anneaux avec le milieu assommé. Donc, si je commence à osciller ça, quel genre de résultats vais-je obtenir ? Alors, allons de l'avant et regardons certains de ces oscillateurs. Bien sûr, je vais décommenter le bas d'abord parce que je fais une oscillation entre 50 pour cent et 100 pour cent la vitesse est de 0,3, la fréquence est de cinq. Allons de l'avant et voyons ce qu'il fait, et vous pouvez voir que c'est juste une belle oscillation lente de l'échelle. Maintenant, je dois juste faire ces trois choses parce que pourquoi ne pas te frapper avec une tonne de briques. Encore une fois, rotation x, rotation y, rotation z, et la plage est négative 360 à 360 positive pour ceux-ci. Si je vais de l'avant et teste ceci, encore une fois, ce qui est fascinant à ce sujet est en utilisant SVG et en faisant une bague en ayant le milieu assommé, je peux voir à travers ce knock-out de l'anneau et il commence à créer ces modèles intéressants. Donc, vous pouvez imaginer que je suis vraiment impatient de prendre cet exemple particulier ici et de lui fournir beaucoup de SVG différents pour voir quel type de différents modèles visuels et résultats j'obtiens parce que c'est vraiment amusant. Ok, ça ferme la section de HosCillator. Nous allons maintenant passer à Combos. Combos va vraiment vous guider dans un processus. Ça va vous guider avec une idée que j'avais, l'exécution de cette idée et la façon dont je l'ai mutée lentement. Vous verrez aussi ça, c'est 20 exemples, donc ça va être aussi robuste que cette section. Donc, je te vois dans la prochaine section de Combos. 40. Introduction à la combinaison de comportements: Maintenant, avant d' entrer dans la sortie réelle, je voulais prendre une section où je parle de Combiner les Comportements. Maintenant, c'est là que vous commencez à créer des super animations. Tant qu'un comportement d'animation ne se bat pas pour la même propriété, deux comportements peuvent travailler ensemble pour créer un comportement entièrement nouveau. Donc, par exemple, je peux utiliser l'interpolation H pour déplacer quelque chose à l'écran, je peux utiliser l'oscillateur H pour réellement animer l'échelle de cet objet de haut en bas. Donc, tant que l'interpolation H traite de l'emplacement et que l'oscillateur H traite de l'échelle, ces deux comportements peuvent réellement s'accrocher ensemble pour créer un nouveau super comportement. J' ai donc pensé que je prendrais la section pour élaborer certains de mes combos préférés de mélanger les comportements ensemble à nouveau tant qu'ils n'essaient pas de se battre pour la même propriété. Nous pouvons utiliser beaucoup de ces comportements que nous avons appris en classe pour créer ces nouvelles super animations folles. 41. Unité 9, Vidéo 1: Ok, donc nous sommes dans cette dernière section avant de commencer à entrer en sortie. Celui-ci est hardcore. Il y aura beaucoup de vidéos ici et nous allons travailler à travers toutes ces 20 étapes, mais il y a des moments où je vais donner des conférences à des conférences de design, j'essaie vraiment de présenter le processus. C' est l'ultime, c'est vraiment commencer par une idée et laisser cette idée se dérouler elle-même. Donc, plutôt que d'être des fichiers séparés, l' exemple 1 jusqu'à l'exemple 20, c'est une continuation d'une seule idée. Alors encore une fois, faites-vous une tasse de café, mettez des pantoufles confortables parce que nous allons vraiment digérer ça. Maintenant, allons de l'avant et commençons par l'exemple 1 et tout va commencer par un cube. Les choses que nous allons couvrir à l'intérieur de cet exemple particulier, finalement je vais me plier dans Hype, spécifiquement dans HBox. Mais en ce moment, je voulais explorer certaines choses que je n'avais jamais vraiment explorées et qui utilisait la forme de début et le sommet. Ce que je veux faire, c'est vraiment disséquer les deux premiers exemples en ce moment. Regardons la première ligne. Je vais faire une boîte et cette boîte sera d'une largeur de 100, d' une hauteur de 100, et d'une profondeur de 100. Et j'ai trois fonctions ici dans mon croquis. J' ai notre configuration, j'ai notre tirage au sort, et j'ai une fonction appelée build cube. Maintenant, regardons simplement la configuration d'abord. Le premier est très minime. Je dis juste que la taille est 640 par 640. Il va aller de l'avant et utiliser le rendu P3D et ensuite je vais lancer le constructeur hypes. L' arrière-plan va être 20-20-20 et bien sûr, nous voulons réveiller toutes les possibilités 3D de battage médiatique donc nous devons dire utiliser 3D true. Maintenant, allons de l'avant et regardons le tirage au sort. Au tirage au sort, je vais dire : « Ok, allons de l'avant et faisons H.Drawstage et je veux construire ce cube. » Maintenant, vous remarquerez sur les lignes 12 et 15, j'utilise la matrice push et la matrice pop, qui encore une fois avec la matrice push et matrice pop tout ce qu'il y a entre ces deux matrices appels. Il va faire des choses et ensuite revenir à ses paramètres d'origine. Alors, regardons ce que nous faisons et c'est vraiment simple. Le premier est que je veux traduire au centre de la scène donc vous remarquerez que je dis traduire largeur divisée par deux, hauteur divisée par deux et le Z que je vais garder à zéro. Donc, qui a maintenant déplacé la matrice au centre de l'écran. Vous verrez alors que je vais déclencher la fonction de cube de construction et quand je déclenche le cube de construction, remarquez qu'il n'a pas passé d'arguments. Voici la fonction de cube de construction et si je fais défiler ici est la fonction entière ici. Vous remarquerez que je fais une forme de début sur la ligne 19 à la toute fin de faire une forme de fin. Maintenant, ce que je fais est de construire un cube manuellement en mettant tous les différents sommets pour définir chacune des faces. Donc vous remarquerez peut-être que si vous regardez... J'ai la face avant donc l'avant du cube, j'ai l'arrière du cube, j'ai le fond du cube, j'ai le haut du cube, j'ai le côté droit du cube, et le côté gauche du cube. Donc, chacun de ces quatre appels de sommets est pour chacune des faces qui composent ce cube particulier que nous créons. Maintenant, vous pourriez vous dire vous-même, « Eh bien, Josh, pourquoi n'utilisez-vous pas juste HBox ? Pourquoi fais-tu ça de cette façon ? » Eh bien, je le fais de cette façon parce que HBox ne prend pas encore en charge la possibilité de mapper des textures à ce cube. Et c'est vraiment l'idée qui a déclenché tout cela, c'est que je voulais pouvoir expérimenter l'idée de mapper des textures sur une boîte et je n'avais même pas vraiment défini ce qu'était une texture. Et vous verrez que nous progressons ici qui va prendre une réponse fascinante. Alors regardons chaque sommet ici. Vous remarquerez que j'appelle la taille de la boîte pour les trois premiers attributs parce que si vous recherchez réellement une référence de traitement pour le sommet, si vous passez réellement à cinq arguments, vous faites la coordonnée x, la coordonnée y, la coordonnée z, puis les deux derniers nombres ici sont des supports pour la- le premier est U et le second est V et ceux-ci représentent un flotteur. La coordonnée horizontale pour le mappage de texture est ce quatrième argument et le cinquième argument est la coordonnée verticale flottante pour le mappage de texture. Donc, ces deux ici traitent des coordonnées horizontales et verticales pour le mappage de texture et, comme il existe actuellement, HBox ne prend pas en charge le mappage de texture. Il le fera à l'avenir, mais maintenant encore une fois je pense à une idée et je veux l'explorer. Alors, que se passe-t-il quand on fait ce croquis ? n'y a vraiment pas d'animation qui se passe du tout donc cela devrait être intéressant. Je vais de l'avant et je lance le croquis ici et c'est 640 par 640 et il dessine un cube mais vous ne sauriez jamais que c'est un cube parce que ce cube est parfaitement au centre et encore une fois la largeur, la hauteur et la profondeur sont tous 100 par 100 donc vous pouvez voir en fait la tridimensionnalité dans ce cube particulier. Donc, j'allais bien, je dois m'occuper de ça. Je vais prendre l'exemple 1, et génial, je vais le sauvegarder comme exemple 2. Maintenant, passons à l'exemple 2 et ce que je voulais faire un exemple 2 était utiliser HosCillator. Toute cette section est sur les combos. Nous allons commencer à composer toutes ces choses différentes pour obtenir un résultat final. Donc, je pensais bien que je vais ajouter un oscillateur à ce cube mais j'ai décidé que j'allais le faire d' une manière qui serait unique, c' est-à-dire que l'oscillateur n'est pas à l'intérieur d'une boucle à quatre, il n'est pas à l'intérieur d'une piscine à tirer. Alors, comment puis-je créer des instances d'oscillateur, puis les attacher plus tard à ce cube que j'ai créé à l'écran ? Alors, regardons l'exemple deux. J' ai maintenant en haut ajouté un oscillateur pour RX, RY, et RZ qui serait la rotation X, rotation Y et la rotation Z. Et donc mon objectif est de prendre ce cube et de le faire tourner comme ça en utilisant HosCillator. Maintenant, allons de l'avant et regardons les lignes 10 à 26. Donc, à l'intérieur de ma configuration, j'ai dit, hé je veux installer ces oscillateurs alors je dis, « RX est un nouvel HosCillator. » Il va passer du négatif 360 à 360 positif, 0,1 pour la vitesse, 5 pour la fréquence. Maintenant, je viens de copier ça deux fois de plus pour pouvoir configurer mon oscillateur de rotation Y, et mon oscillateur de rotation Z. Maintenant, une chose que vous pourriez remarquer est wow je n'ai pas spécifié de propriété et je n'ai pas spécifié de cible donc c'est un oscillateur super générique qui est juste assis dans la configuration. Et quand h.drawstage se déclenche, chaque oscillateur va juste cracher des nombres d'oscillation complètement absents de qui ils vont être appliqués ou de la propriété sur laquelle ils vont être réglés. Ce ne sont donc que des oscillateurs totalement génériques. Ils n'ont aucune idée de qui et ils n'ont aucune idée de quelle propriété ils vont se faire installer. Alors, regardons maintenant notre cube de construction. Notre cube de construction n'a pas changé donc je veux juste vous dire que tout ce code en bas, cette boîte, rien n'a été modifié dans ce code. Donc le seul changement est ici à l'intérieur du tirage au sort. Ce que je veux faire, c'est que je veux obtenir les prochaines valeurs brutes de ce RX, ce RY et RZ. Donc, à l'intérieur de tirage, je dis, hey RX HosCillator me donner votre prochaine valeur brute parce que je comprends que vous oscillez des nombres complètement absents de qui ou à quelle propriété mais ça va juste me donner ces bruts chiffres. Donc, je peux dire rx.nextdraw, ry.nextdraw et rz.nextdraw. Maintenant, allons de l'avant et regardons notre matrice push et notre matrice pop ici. La traduction est toujours absolument la même. Eh bien, je traduis au centre de la largeur de la toile divisée par deux, hauteur divisée par deux. Vous pouvez voir ici sur la ligne 43 J'utilise toujours le cube construit mais maintenant j'utilise tourner X du traitement, tourner Y, et faire pivoter Z et parce que la rotation et le traitement veulent connaître les radians, j'appelle la fonction radians et à l'intérieur de la fonction radians je dis hey allez obtenir la valeur actuelle de RX, aller obtenir la valeur actuelle de RY, et aller obtenir la valeur actuelle de RZ. Maintenant quelque chose d'excitant se passe. Je vais aller de l'avant et tester mon croquis et vous devriez voir que ce cube est au centre de l'écran. Je n'ai pas spécifié d'accident vasculaire cérébral. Je n'ai pas spécifié de remplissage. Donc, il fait juste un trait noir par défaut et un remplissage blanc par défaut. Mais maintenant j'ai trois oscillateurs qui oscillent des valeurs sans être attachés à une cible ou à une propriété. Donc, je reçois juste les nombres bruts de ces oscillations et je les applique juste pour faire pivoter X, tourner Y, et faire pivoter Z. Super. Maintenant, je deviens quelque part intéressant. Maintenant, la raison pour laquelle j'ai fait cet exercice est de passer à l' exemple 3 et d'obtenir une texture mappée à ce cube. Donc, je vais aller de l'avant et fermer cette vidéo. Dans la vidéo suivante, nous allons reprendre en regardant l'exemple 3. 42. Unité 9, Vidéo 2: Exemple trois. Cette vidéo va juste mettre en valeur cet exemple. C' est le début de quelque chose de beau. Allons de l'avant et regardons l'exemple trois, et vous remarquerez qu'à l'intérieur du dossier de données, il y a quelques JPEG. Donc, j'avais élaboré des œuvres d'art à l'intérieur d'Illustrator. ne s'agit que de 200 pixels par 200 pixels. Je les ai sortis d'Illustrator vers JPEG. Donc, si vous regardez à l'intérieur du dossier Data, vous remarquerez qu'il y a cinq JPEG qui ont juste des lignes de 45 degrés sur eux et texture 5 a un damier, ok ? Donc, je veux regarder à mapper une texture à ce cube. Alors, allons de l'avant et regardons ce qui est ajouté ici dans l'exemple trois. Regardons la ligne 4. Maintenant, je lis la documentation du traitement, et la documentation dit que vous pouvez utiliser un PImage comme texture. Alors, j'ai pensé, « Ok, laisse-moi vérifier ça. » Donc, en haut, nous tapons pImage, et puis j'ai juste fait « tex » pour la texture. Sur la ligne 11, j'ai dit, « Ok, T-E-X, tex équivaut à l'image de charge et ensuite aller chercher « tex1.jpg ». L' autre chose que vous remarquerez à propos de l'utilisation textures sur des objets 3D est que vous devez définir un mode de texture. Dans ce cas, j'ai utilisé le mode de texture normal. Donc, sur la ligne 12, j'ajoute le mode de texture normal. Maintenant, nos oscillateurs sont toujours les mêmes. Notre tirage au sort est toujours le même. Donc, rien n'a changé à l'intérieur de notre tirage ici. Nous appliquons toujours l'oscillation pour faire pivoter X, faire pivoter Y et faire pivoter Z. Le dernier ajout ici est de régler quelques choses sur le cube. Donc, la première chose est que, je voulais définir un poids de course dans un accident vasculaire cérébral. Donc, vous remarquerez ici sur le cube, sur chacun des sommets qui sont créés, je dis que le poids du trait est de quatre et que la couleur est noire, zéro, zéro, zéro, zéro, zéro, zéro, zéro. Puis, à l'intérieur de la forme de début et de fin, j'ajoute de la texture, puis je pointe vers tex que nous avons mis en place ci-dessus. Maintenant, c'est à ce stade que si vous enregistrez et exécutez réellement cette esquisse, vous remarquerez qu'il utilise tex1.jpg comme texture sur chacune des surfaces du sommet et je suis devenu fou. J' ai juste pensé, « Wow, ça a ouvert toute une idée de possibilités et je veux essayer de muter ce fichier et voir, que puis-je faire avec ce système ? Donc, par exemple, si je montais ici et que je changeais ça en tex5, ce serait le modèle en damier. Encore une fois, si je lance ce croquis, vous verrez qu'il attache le damier JPEG, et il le mappe parfaitement à la surface. C' est incroyable. Maintenant, ici à l'intérieur de BuildCube, non ? Je pourrais essayer des choses. Je pourrais commenter cela et je pourrais juste dire, « NoStroke », et si je dis « NoStroke », alors vous n'allez pas obtenir cette ligne noire, vous obtenez juste la texture mais contre la texture qui est bien. Si je ramène ce coup et disons que je voulais cet orange foncé, je pourrais dire FF3300, je pourrais sauver et exécuter ce croquis. Encore une fois, je serais juste en train de créer un poids de course autour de cette boîte particulière, non ? Donc, j'essaie ces tests pour voir les différents types de choses que je peux trouver. Maintenant, je vais juste remettre ça au noir. Retour au noir. Quelqu' un de l'ACDC ? Retour au noir. D'accord. Donc, le voici avec ce joli coup épais de quatre noirs. Je pensais juste ajouter une belle sorte d'ombrage à ça. D' accord. Alors, bien sûr, je veux penser, « Eh bien, d'accord. Qu' est-ce que je fais ensuite avec ça ? Donc, ce que je veux faire ensuite, c'est fermer cette vidéo et ensuite la prochaine, nous allons couvrir les exemples quatre et cinq parce que je veux juste voir comment ce fichier va continuer à évoluer. Alors, continuons et fermons ceci et passons à l'exemple 4 et à l'exemple 5. 43. Unité 9, Vidéo 3: D' accord. Donc, dans cette vidéo, vous remarquerez que nous sommes dans l'exemple quatre et l'exemple cinq. Vous pouvez également remarquer que le dossier a les lettres MOV à la fin de celui-ci. Parce que la curiosité devait voir si c'était possible. J' ai commencé à penser à bien, qu'est-ce qu'une texture ? Une texture est-elle un JPEG ? Une texture peut-elle être un film rapide ? Une texture peut-elle être quelque chose d'autre que je fais généralement à l'intérieur du traitement comme essaim, comme puis-je utiliser un comportement essaim comme texture ? J' ai commencé à avoir des questions sur, ce qui était possible d'utiliser comme texture ? Donc, vous remarquerez que l'exemple quatre et l'exemple cinq traitent, comment puis-je définir un film comme une texture ? Maintenant, regardons l'exemple quatre et je vais aller à l'intérieur du dossier de construction et je vais aller à l'intérieur du dossier de données, et j'ai un MP4 là-dedans. Si je devais exécuter ce MP4, vous verrez que c'est une autre petite expérience que j'avais posté sur Tumblr. C' est une vidéo de 30 secondes d'une petite rafale de confettis. Encore une fois, c'était quelque chose qui a été scénarisé en utilisant le traitement et Hype et je l'avais rendu comme un film. Je me demandais, pourrais-je l'utiliser comme une texture ? Alors, pourrais-je prendre ce cube et jouer un film sur la surface de mon cube. Bien sûr, après quelques creuser, j'ai compris que oui la réponse était en fait oui que vous pouviez réellement cartographier un film comme une texture. Alors, regardons l'exemple quatre et voyons ce qui a changé. Donc, vous remarquerez peut-être que sur la ligne trois, j'importe le traitement .video, et la raison pour laquelle j'importe traitement .video est parce que je veux pouvoir charger dans un film, je veux être capable de boucler un film, je veux être capable de jouer un film. Pour ce faire, je dois importer processing.video. Maintenant, sur la ligne 4, vous verrez qu'au lieu d'utiliser une image P, j'utilise un film. D' accord ? Donc, je ne vais pas cartographier un JPEG. Je vais cartographier un film. Donc, bien sûr, tex doit mettre à jour la ligne quatre Movie tex. Maintenant, allons de l'avant et regardons les lignes 12 à 14 et vous verrez que tex ne charge pas l'image. Charger l'image, travailler vous-même ici Josh, charger des images, oui correct. Donc, dans l'exemple quatre, je dis que tex est en fait un nouveau film. Ensuite, en spécifiant ce que MP4 vous pouvez utiliser film, évidemment j'utilise MP4 parce qu'ils sont compressés et minuscules ce qui est bon. Donc, le film que je charge est ce burst.mp4 à l'intérieur de mon dossier de données. Maintenant, vous verrez sur la ligne 13 que mon film ne dure que 30 secondes, donc je veux juste qu'il bouclera continuellement. Donc, vous verrez sur la ligne 13, je dis tex.loop. Ligne 14 TextureMode est en fait toujours Normal. Maintenant, vous commencez à faire défiler ici et croyez-le ou non ce code n'a pas changé. Vous pouvez toujours dire sur la ligne 57 que la texture est tex, mais vous devez ajouter une dernière chose et c'est le traitement de la queue pour commencer à lire ce film. Donc, si vous faites défiler tout le chemin vers le bas, vous remarquerez qu'il y a une nouvelle fonction ici qui dit vide MovieEvent Movie m, m.read. Donc, en ce moment, ça va commencer à jouer notre film. Maintenant, allons-y et textez ce croquis ici et vous devriez remarquer que notre cube est en train de jouer ce MP4 sur la surface de chacun des sommets est ici. Donc, vraiment fasciné par cette idée de droit de récursivité. En utilisant du code pour générer un film, puis ce film, je finis mapper comme une texture à l'intérieur de ce code. Donc, encore une fois, cela ouvre tellement de possibilités différentes de pouvoir créer des objets en trois dimensions à l'intérieur du traitement, puis commencer à cartographier différentes choses en tant que textures. Donc, grand et exemple trois, nous savons que nous pouvons charger n'importe quel type d'image dans cette boîte. Avec l'exemple 4, nous pouvons voir que nous pouvons réellement lire un film à travers cette boîte. Maintenant, allons-y et fermons ceci et regardons simplement l'exemple cinq parce que je viens de faire un peu d'ajustement à l'exemple cinq. Dans l'exemple cinq, si vous regardez le cube de construction ici, vous remarquerez peut-être que je me suis débarrassé de la face arrière, du bas, du haut, de la droite et de la face gauche. C' est parce que je voulais juste montrer que ce n'est pas nécessairement un objet tridimensionnel, il peut être juste un plan dans lequel il joue. Donc, vous remarquerez que j'ai juste gardé le sommet de la face avant et ensuite j'ai juste mis quelques nombres aléatoires juste pour faire une forme bizarre droite. Donc, au lieu de faire la taille de la boîte, vous pouvez voir ici que j'ai fait fois 1,5 fois trois fois cinq ou deux fois ou diviser par deux. J' ai juste mis des chiffres faux. Donc, que je pourrais tester, eh bien, et si le film n'est pas un carré ? Que faire si c'est une forme étrange ? Bien sûr, avec le mode de texture normal, vous pouvez voir qu'il fait toujours un excellent travail de mappage de ce film comme une texture à ceux-ci à ce sommet même si les sommets qui sont créés ne sont pas un parfait carré ou un rectangle parfait. C' est en fait une forme bizarre donc. D' accord. Donc, je vais fermer cette vidéo maintenant qui est de nouveau l'exemple de quatre et cinq. Nous allons passer à l'exemple 6 parce que encore une fois je veux continuer à explorer comme bien ce que je fais ensuite ? Quelle est la prochaine chose que je veux essayer avec ce code ? Alors, on se voit dans la prochaine vidéo. 44. Unité 9, Vidéo 4: Nous sommes dans l'exemple 6, et je dois m'en remettre un peu. J' ai juste pensé, ok, dans l'exemple trois, j'ai chargé une seule image, et j'ai chargé cette image dans la configuration. Donc, je viens de dire tex et j'ai chargé dans cette image. Puis, dans le tirage au sort, j'ai juste dit, « Hé, utilisez cette seule image sur toutes les surfaces du cube. » Alors, je me suis dit : « Eh bien, et si je randomise ça. » Le Cube a six surfaces. Donc, il a quatre côtés et il y a un haut et un bas. Donc, il y a six surfaces possibles que je pourrais cartographier les choses. Dans l'exemple 3, je prenais juste une chose et je la mappais sur les six surfaces. Alors, j'ai pensé, « Eh bien, qu'arriverait-il si je randomise les images qui sont cartographiées à chacune des surfaces ? » Maintenant, le plus amusant à propos du traitement, c'est que vous avez une mise en place et que vous avez un tirage au sort. Ce tirage va courir encore et encore et encore et encore et encore et encore et encore. Je ne pouvais pas, dans le tirage au sort, juste dire, « Hé, va chercher une texture », parce que chaque fois que ce truc fonctionnait, il choisirait au hasard une nouvelle texture pour cette surface. Ce n'est pas ce que je voulais faire. Ce que je voulais faire était juste de choisir six images aléatoires, de les rappeler, puis de les mapper sur les six côtés différents, et quand cette chose bouge, elle aurait la texture présélectionnée. Donc, c'est le peu étrange sur le traitement est que si vous voulez faire cette randomisation, ce que vous devrez faire est à l'intérieur de la configuration, vous devez préchoisir des choses. Stockez ce que vous préchoisissez, sorte que lorsque le tirage se déroule, il traverse les choses qui ont été présélectionnées . Tu es avec moi ? D' accord. Donc, j'ai cinq textures que je peux saisir. Donc, la première chose que je veux faire est de regarder charger dans toutes ces textures. Maintenant d'abord, regardons la ligne numéro cinq. La ligne numéro cinq sera une liste de toutes les textures disponibles parmi lesquelles choisir. Il se termine qu'il y en a cinq : un, deux, trois, quatre, cinq. Donc, sur la ligne 5, je dis, « Array a list. Cela va être une liste de texte qui est notre liste de textures. » Maintenant, je vais passer aux lignes 13 à 24. Maintenant, regardons ça. Sur les lignes 13 à 17, je charge nos cinq images. Donc je dis, « PImage t1, t2, t3, t4, t5. Hé, mec, va chercher le texte1. Va chercher le texte2. Va chercher le texte3. Va chercher le texte4. Va chercher le texte5. Chargez ces ventouses. » Maintenant que j'ai chargé le traitement de ces cinq images, je veux les pousser dans le tableau. Alors, regardons les lignes 19 à 24. Sur la ligne 19, je dis, TexList sur la ligne 5. Je veux juste vous faire savoir que vous êtes une nouvelle liste de tableaux, et je vais maintenant vous pousser des trucs. Alors je dis : « TexLixt. Ajouter t1. » Donc, tout d'un coup, si je regarde la première entrée dans la liste de texte, ça va égaler t1. T1 est tex1.jpeg. J' ajoute ensuite t2 et j'ajoute t3, ajoute t4, ainsi de suite et ainsi de suite. Donc, si j'écris ça, si j'allais comme ça, texList ressemblerait à quelque chose comme ça où ce serait tex1.jpg. Ce serait tex2.jpg. Donc, ce serait la liste des cinq images. Donc, TextList est maintenant les cinq images disponibles que nous venons de charger. C'est une liste d'entre eux. Super. Alors, qu'est-ce que je veux faire maintenant ? Ce que je veux faire maintenant est de préchoisir quelques images aléatoires. Maintenant, avant que je puisse faire ça, regardons la ligne 6. ligne six est un nouveau tableau de PImages. Ce seront les images que j'ai préchoisies à l'avance. Alors, regardons notre cube. Notre cube est six surfaces, quatre sur les côtés, un haut et un fond. Donc, ce que je veux faire, c'est choisir au hasard six images. Je suis désolé. Oui, choisissez au hasard six images et mappez-les à chacune de nos six surfaces. Donc, ce que je dois faire maintenant est de préchoisir au hasard parmi nos cinq JPEG disponibles. Alors, regardons cela pour boucle. Cette boucle pour doit exécuter un certain nombre de fois. Ce qu'il a besoin pour exécuter est PickedTex.Length. Combien d'articles choisissons-nous ? Quelle est la longueur. La longueur est que si nous regardons PickedTex qui est juste ici sur la ligne 6, nous avons dit ici que c'est six éléments, donc si je devais vraiment tracer ça ici, il en retournera six. Donc, cette boucle pour va fonctionner six fois. C' est génial parce qu'il y a six surfaces. D'accord. Donc maintenant, c'est cette ligne juste ici qui nous permet d'obtenir au hasard une image et de l'ajouter à ce nouveau tableau. Donc, ça dit : « Ok, c'est la sixième fois. Je veux aller de l'avant et préchoisir la première image que vous allez utiliser. » Donc, PickedTex, il va choisir le sous-élément zéro. Ça dit : « Ok, laisse-moi aller à ma liste de textos et laisse-moi prendre un numéro. » Quel numéro voulez-vous ? Maintenant, la meilleure façon de le regarder est que ce serait de choisir le numéro un. Ce serait le numéro deux. Ce serait le numéro trois. Ce serait le numéro quatre. Ce serait le numéro cinq. Alors, imaginez un instant que nous avons un chapeau. Nous prenons cinq morceaux de papier. On écrit un, deux, trois, quatre, cinq sur eux, et on prend les morceaux de papier et on les met dans le chapeau. Ensuite, je vous donne le chapeau et je dis : « Écoutez, il y a six surfaces à ce cube. S' il vous plaît, choisissez un numéro. » Vous tendez dans le chapeau et vous prenez un morceau de papier, et vous le retirez et vous allez T3. T3 est tex3.jpg. Donc, pour la toute première surface qui serait en fait la face avant, je vais choisir tex3. Maintenant, remettez le morceau de papier dans le chapeau. Je secoue le chapeau et je dis, « OK, continue. » Tu prends un numéro du chapeau six fois. Donc, c'est ce que fait ce bloc de code ici. Il est dit que je veux choisir au hasard une de ces cinq images pour les six surfaces. Essayons quelque chose ici. Cette vidéo va être longue. Je dis juste. Josh, pourquoi tu nous as fait du mal ? Vérifie ça. Je vais en imprimer un et nous allons de l'avant et imprimer PickedTex. Donc, je vais imprimer le tableau PickedTex. Maintenant, je vais aller de l'avant et exécuter ça. Bien sûr, vous allez voir l'animation se dérouler ici. Je vais passer sur le côté. Je veux juste regarder ça ici. Regarde ça. Il a choisi un PImage ici. On dirait que l'objet a été assigné 2f2a5869. Il a choisi 5126db0. C'est un autre. Il en a donc choisi un autre pour ce service. Il a encore choisi 512. On dirait qu'il a choisi 2f2. Celui-ci a ramassé 7cb. J' aimerais qu'il crache les chiffres, mais ce n'est pas le cas. Le fait est que nous avons sélectionné au hasard les morceaux de papier hors du chapeau. Donc, la bonne chose est que cette quatre boucle présélectionne laquelle des cinq images que nous allons mapper à chacune des six surfaces différentes. Maintenant, TextureMode (normal) qui n'a pas changé. Notre HosCillator qui n'a pas changé. Notre matrice pop PushMatrix qui n'a pas changé. Mais maintenant, regardez comment BuildCube a changé. Maintenant, si vous regardez l'exemple trois, par exemple, nous avions une BeginShape et une EndShape. Entre ce BeginShape et cette EndShape, nous avons appelé tous ces différents sommets pour toutes les différentes faces. Mais lorsque vous faites cela et que vous appelez texture, il va utiliser la texture qu'une image pour les six surfaces. Donc, il ne s'agit que de mapper une image sur les six surfaces. Je ne voulais pas que ça arrive. Ce que je voulais arriver ici, c'était cartographier une texture différente à chaque surface. Donc, ce que je dois faire est en fait de faire un BeginShape et EndShape pour chacun des visages individuels de notre cube. Si je crée un BeginShape et EndShape pour chaque face individuelle de notre cube, je suis autorisé à appeler une texture indépendante pour ce visage. Merde, mec. C'est comme dessiner un exemple six et déjà mon cerveau me fait mal. Crois-moi, ça fait mal pour moi aussi. Donc, on est ensemble. Mais encore une fois, remarquez que la mise à jour est que maintenant je fais un BeginShape, EndShape, une texture indépendante pour chacun des visages. Donc, si PickedTex est un tableau de chacune des six images différentes que nous avons choisies du chapeau, je pourrais dire, « Hé, je veux aller dans ce tableau. Pouvez-vous me dire quelle image vous avez choisi dans la sélection zéro ? » Ça me donne une image. Je pourrais dire, « Hey, pour le dos, pouvez-vous aller au tableau et me dire quelle image il a choisi pour un, qu'est-ce qu'il a choisi pour deux, ce qu'il a choisi pour trois, ce qu'il a choisi pour quatre, et ce que est-ce qu'il a choisi pour cinq. » Parce que rappelez-vous, la programmation commence la plupart du temps à zéro. Donc, c'est six textures différentes, zéro, un, deux, trois, quatre, cinq, six. Je suis désolé. Zéro, un, deux, trois, quatre, cinq, ce qui serait six éléments dans le tableau. Ne me fais pas de mal. Allons de l'avant et exécutons ce croquis. Encore une fois, maintenant quand je regarde ça, je dis : « Wow, ok, c'est cool parce que maintenant je construis ce cube, mais maintenant chaque surface sort aléatoirement sa propre image du dossier de données. » Donc, je suis cool, je peux voir mon damier. On dirait qu'il a choisi cette ligne très épaisse de 45 degrés en fait un tas de fois. Maintenant, si je ferme ceci et relance ce croquis, j'obtiendrais quelque chose de différent. Des lignes épaisses, des lignes moyennes, des lignes minces et sur celle-ci je n'ai pas eu de damier du tout. Donc encore une fois, parce que je présélectionne aléatoirement les images à l'intérieur de la configuration, je peux exécuter cela encore et encore et encore et encore et je vais obtenir un mappage unique différent à chaque fois. J' ai juste pensé, « Wow, ça a l'air vraiment amusant. » Maintenant, je sais que ce fichier fait mal, mais ça commence à devenir excitant parce que ce qui se passe maintenant quand on commence à ajouter un tas de ces cubes, et c'était ma prochaine idée, c'est que je ne veux pas un cube, Je veux en dessiner un tas. Alors, allons de l'avant et fermons ce fichier vidéo et nous allons passer au prochain qui va couvrir les exemples sept et huit où j'explore cette idée de dessiner plusieurs cubes. 45. Unité 9, Vidéo 5: Salut. Nous sommes dans l'exemple sept et je suis heureux que vous n'ayez pas ramené un Baseball à votre écran parce que le dernier fichier a vraiment donné à certains d'entre vous un mal de tête. Alors, merci de me joindre à la prochaine vidéo. Donc, je veux dessiner un tas de cubes, d'accord ? Regardons le problème que nous devons résoudre, qui est, j'ai cette toile et dans les fichiers précédents, le cube était dessiné au centre exact. Je voulais dessiner un tas de cubes, mais comment allais-je randomiser leurs positions ? Non seulement je voulais randomiser leurs positions, mais je voulais les randomiser hors de ce point central. Donc, ce serait génial si je pouvais dire, « Hey, je veux faire 10 boîtes et je veux randomiser la position de ces 10 boîtes, mais je veux les randomiser hors de ce point central. » Donc, il y a un problème, est que je veux dessiner 10 boîtes, mais je dois choisir au hasard une place pour eux. D' accord. Alors, regardons les lignes 8 et 9. Maintenant, chaque fois que vous faites une randomisation ou des scénarios présélectionnés, vous devez les enregistrer à l'avance. Vous devez les configurer, vous devez choisir au hasard les choses et la configuration parce que draw va accéder à ces attributs présélectionnés et continuer à les utiliser encore et encore. Vous ne pouvez pas randomiser dans le tirage au sort. Si vous faites du tirage au sort, tout d'un coup vos cubes vont bouger partout sur l'écran et je ne veux pas qu'ils le déplacent partout sur l'écran. Oh, tu choisis Sqween ! Quelle heure est-il ? Je suis sûr qu'il est comme 4 h du matin. Bien, je suis bien merci. Vous ne pouvez pas choisir au hasard dans le tirage au sort parce que tout d'un coup toutes ces choses se déplaceraient partout. Je dois choisir au hasard leurs positions dans la configuration une fois et ensuite les faire rester là. Donc, cela a toujours été la grande énigme pour moi avec le traitement, c'est que le tirage au sort est juste exécuté en frais à chaque fois et donc vous ne pouvez pas choisir au hasard des choses dans le tirage parce que les choses peuvent bouger. Donc, je dois préchoisir ma randomisation. Alors, regardez la ligne 8. Je sais que je veux peindre 10 cubes maintenant, pas seulement un, je veux peindre 10. Dans ces dix, je veux choisir au hasard un endroit. Donc, vous remarquerez que la ligne 9 est un bel ami p-vecteur, non ? Un vecteur p-est un beau système de coordonnées et parce que c'est 3D, je vais choisir un x, y et z pour mon vecteur p-. Maintenant, ligne 9, je dis « Ok, je dois choisir au hasard un emplacement d'abord et ensuite le sauver. » Combien y a-t-il d'entrées dans ce tableau ? Num cubes, 10. Donc, vous allez dessiner dix cubes, j'ai besoin que vous choisissiez au hasard dix endroits. Donc, vous remarquerez que l'emplacement choisi est égal nouveau vecteur p, puis le nombre de fois que j'ai besoin de choisir quelque chose, qui dans ce cas est 10. Impressionnant. Donc, les lignes 29-32, c'est là que je préchoisis mes textures. C' est maintenant les lignes 34 à 41 où je suis en train de randomiser mes positions. Maintenant, jetons un coup d'oeil à ça. Cette boucle pour va s'exécuter combien de fois ? Dix, parce que nous voulons peindre 10 cubes. D' accord. Sur la ligne 36, j'ai mis en place un vecteur p-temporaire. Donc, je dis, PT pour Point est un nouveau vecteur p et je dis, « Hey PT-X devrait être égal à la largeur divisée par deux. » Alors, allez au centre de l'écran, plus choisir un nombre aléatoire, négatif 200 à positif 200. Donc, il va au milieu de l'écran et il va au hasard aller négatif 200 à positif 200 de lui au hasard quelque part dans cette plage, et c'est juste pour la largeur. P t.y va faire la même chose exacte sauf qu'il va la hauteur divisée par deux plus aléatoire négatif 200 à positif 200, donc maintenant il sélectionne une plage hors de la hauteur divisée par deux. Maintenant, je veux aussi le faire sur le z. Donc, je dis que le nombre de points z devrait être négatif 100 à positif 100, non ? Donc, je choisis un intervalle entre ici. Puis je dis, « Hey, tableau, allez-y et prenez ce vecteur p que je viens d'installer au hasard. » Ok, donc maintenant j'ai un tableau de 10 vecteurs p et si je devais regarder chaque vecteur p individuel, il aurait un x, y et z unique , mais ce x, y et z est basé sur cette randomisation de largeur divisée par deux, hauteur divisée par deux. Super. Donc, maintenant j'ai préchoisi un tas de 10 endroits aléatoires hors du centre de l'écran. Maintenant, allons de l'avant et regardons notre fonction de dessin parce que notre fonction de dessin mise à jour plutôt que d'avoir juste une matrice push, cube de construction de matrice pop, juste un. Regarde, c'est imbriqué à l'intérieur d'une boucle pour. Donc, maintenant, cette boucle pour va fonctionner combien de fois ? Dix fois. Donc, maintenant je sais que je tire le cube de construction. Dix fois, d'accord ? Maintenant, je vais dire, super, traduisons à cet emplacement X aléatoire, cet emplacement Y aléatoire, et cet emplacement Z aléatoire pour un des cubes. Donc, il se déplace à l'endroit où se trouve cet emplacement aléatoire et vous remarquerez également qu'il met dans la rotation X, la rotation Y, l'oscillation Z de rotation et il construit le cube. Maintenant, la boucle for s'exécute ensuite une deuxième fois et attache le deuxième cube dans un emplacement aléatoire ainsi de suite et ainsi de suite. La fonction buildcube n'a pas changé, c'est exactement la même qu'avant. Donc, si nous lançons maintenant ce croquis, il devrait construire 10 cubes pour nous. Vous remarquerez qu'il s'agit essentiellement de 10 copies du même cube. Parce que vous remarquerez qu'ils ont tous les mêmes surfaces. Je ne vais pas randomiser chacun des cubes individuels. Évidemment, je pourrais mais la raison pour laquelle je ne l'ai pas c'est parce que j'aime que les choses soient familières. Si je fais un peu de randomisation ou si j'ai des choses aléatoires qui se passent dans mon fichier, je veux des choses qui sont cohérentes. Donc, tout d'un coup, vous pouvez regarder ça et dire, « Oh, c'est fondamentalement un cube et les motifs qui ont été mappés ont été copiés 10 fois. » Donc, il y a une familiarité à cela parce qu'il recycle les mêmes motifs sur les 10 de ces surfaces. Maintenant, bien sûr, si je fermais ce document et le relance, nous aurions encore 10 postes uniques. Donc, j'étais genre, accord, c'est marrant. Le problème cependant, je dirais que je veux modifier sur cela est de défaire qui traduisent sur l'axe Z de négatif 100 à un positif 100, mais toujours les blocs sont grands. Je voudrais peut-être faire une variance sur les boîtes. Donc, cela va nous laisser passer à l'exemple suivant, qui est l'exemple huit. Vous remarquerez dans l'exemple 8 que j'ai dit, oh, mec, je dois choisir au hasard une balance maintenant. Alors, laissez-moi mettre en place les instructions pour choisir au hasard une balance. Donc, regardez les lignes trois à quatre vont au hasard choisir une texture, la ligne six choisit aléatoirement un emplacement. Je dois maintenant commencer à ajouter des informations pour choisir au hasard une taille d'échelle. Donc, j'ai dit d'accord, laissez-moi choisir une échelle minimale et une échelle maximale. Donc, vous pouvez voir que j'ai créé deux flotteurs ici. L' échelle minimale étant une boîte, 40 par 40 et l'échelle maximale étant une boîte 100 par 100. Alors j'ai dit : « Ok, laissez-moi créer un tableau d'échelles choisies au hasard. » Donc, j'ai dit, « Ok ça va être un flotteur, va être une taille de boîte et ça aussi, va être comme endroit où je choisis au hasard 10 tailles. » Donc, la taille de la boîte est égale à nouveau flotteur et je lui passe le nombre associé à des cubes engourdis qui, bien sûr, est de 10. Donc, à l'intérieur de cette boucle complète maintenant, est l'édition. qui est oh, c'est là que je choisis au hasard l'emplacement, je veux probablement choisir au hasard une échelle maintenant. Donc, je dis, « Bon format de boîte, je suis prêt à commencer à choisir une balance pour toi. » Donc, vous remarquerez que j'ai aléatoire ici et aléatoire est arrangé pour l'échelle min à l'échelle max. Donc, maintenant je sais que chaque taille de boîte va être une certaine taille entre 40, mais pas inférieure à 40, et un 100 mais pas plus grand que 100. Donc, je choisis au hasard 10 tailles aléatoires à utiliser sur ma boîte. Les oscillateurs restent inchangés. Ma boucle complète s'ajuste toujours aussi légèrement. Parce que, maintenant ce que je dois faire, c'est quand je construis réellement un cube, j'ai besoin d'être capable d'accéder à la taille aléatoire qui a réellement été choisie. Alors, vérifions ça. Vous pouvez le voir en ligne 82, je dis, « Hé, construit cube. Je vais vous donner la variable I. » Donc, j'égale zéro, puis un, puis deux, puis trois, puis quatre, cinq, puis six, sept, puis huit, et puis neuf. Donc, je sais que je passe zéro à neuf à la fonction buildcube. Maintenant, si vous descendez à la ligne 87, vous verrez que j'accepte dans BuildCube. Donc, BuildCube fonctionne et BuildCube dit, « Hey, je comprends que vous me donnez un numéro, dites-moi ce que c'est. » Ce nombre est juste affecté à l'entier I, juste recyclé le même nom de variable exact. Maintenant, la raison pour laquelle je fais cela est parce que je dis bien, lorsque vous construisez ce cube, vous devez aller à liste des tableaux BoxSize et accéder au premier zéro de taille. Faisons semblant qu'il ait choisi 62. Donc, maintenant la boîte dit, « Ok, mot cool 62 pour chacun des visages. » Ensuite, cette boucle quatre s'exécute une deuxième fois, elle passe ensuite BuildCube et le sous-élément un. On est passé à BuildCube, il va au tableau BoxSize et dit, « Hé, qu'est-ce qu'il a choisi maintenant pour le BoxSize. » Donc, maintenant je randomise la taille des boîtes. Donc, si je vais de l'avant et enregistrer et tester ce croquis, vous remarquerez maintenant que je suis maintenant capable de jeter dans beaucoup de boxTailles uniques. Donc, je suis toujours randomiser le Z, mais je suis maintenant en train de randomiser les tailles dans ce Z. Donc, maintenant je peux obtenir des boîtes plus petites et je peux obtenir des boîtes plus grandes et j'étais assez heureux avec ça. On va aller quelque part. Encore une fois, nous sommes en train de muter lentement cette idée et voyons où nous décidons d'évoluer cette prochaine fois. Alors, allons-y et terminons cette vidéo. Dans la section suivante, nous allons couvrir les exemples 9 à 11. 46. Unité 9, Vidéo 6: Donc, dans cette vidéo, nous allons couvrir les exemples 9, 10 et 11. Encore une fois, cela faisait partie de mon, je me demande visage. Donc je dois penser à l'exemple neuf, je me suis dit : « Ok, j'ai mappé des JPEG, j'ai mappé des fichiers vidéo. » Vous remarquerez que dans le dossier zip, exemples 9, 10 et 11, ont un PNG attaché à celui-ci. Je me suis juste dit : « Je me demande si je peux utiliser un PNG parce qu'un PNG prend en charge la transparence et je me demande si cela affecte le mappage à cet ensemble de cubes. » Donc, si vous allez dans l'exemple, 9.PNG et que vous regardez le dossier de données, il y a quatre PNG que j'ai sortis ici. Partout où il était blanc, j'ai fait transparent. Donc, quand j'ai sorti ceci d'Illustrator, la seule chose qui a réellement une coloration est le noir, le blanc est en fait transparent. Alors j'ai pensé, « Ok, dans l'exemple neuf, que se passe-t-il quand je fais cette modification ici sur les lignes 18 à 21 et que j'ai réellement changé l'actif d'un JPEG à un PNG ? » Je me suis dit : « Que se passerait-il si j'avais un cube et que j'ai de la transparence, serais-je capable de voir à travers la transparence des formes sur les autres faces du cube ? » Donc, avec cela dit, allons de l'avant et testons ce croquis ici et voyons ce qui se passe. Donc nous sommes en train de construire, je pense que j'ai fait un petit ajustement ici sur la ligne 6. J' ai dit que le nombre de cubes était en fait 20 au lieu de 10. Si vous regardez, oui, vous pouvez réellement voir à travers la transparence du PNG et voir certaines des textures qui sont à travers la transparence. Maintenant, ce n'est pas parfait à 100%, si vous regardez réellement, vous verrez des problèmes où certains PNG disparaissent réellement. Mais dans l'ensemble, j'ai dit : « Oh, wow. Ça marche bien. » Donc à partir de là, j'ai pensé : « Bon, regardons essayer quelque chose. » Je vais faire défiler vers le bas ici et voici cette fonction BuildCube. Je me suis dit : « Eh bien, d'accord, je construis ces six surfaces différentes pour faire ce cube. » Puis je me suis dit : « Qu'arriverait-il si, pendant que je construisais le cube, je créais deux visages pour chacun des six côtés . Donc il y aurait deux visages pour l'avant, deux visages pour l'arrière, deux visages pour le haut, deux visages pour le bas, et ainsi de suite. Maintenant, allons de l'avant et regardons l'exemple 10 parce que je pensais que peut-être je peux utiliser cette transparence PNG à mon avantage, qui est que si vous regardez l'exemple 10, ce que j'ai fait est que j'ai introduit un hColorPool. Ligne deux couleurs hColorPool, comme tout le reste, tout comme j'ai choisi un emplacement, et tout comme une taille de boîte, je vais préchoisir six couleurs pour la surface du cube. Sur la ligne 21, vous pouvez voir ici j'ai le hColorPool et quelques couleurs aléatoires dedans. Maintenant, voici la boucle quatre où je choisis au hasard les textures des PNG. En plus de choisir un PNG pour un visage, je me suis dit  : « Si j'utilise deux faces pour une surface, ce que je vais faire, c'est choisir une couleur pour l'une des surfaces, puis je choisirai un PNG qui sera assis au-dessus de cette couleur. » Donc ligne 36, je choisis une texture et sur la ligne 39, je présélectionne une couleur aléatoire. Maintenant, parce que le code devient long, si vous regardez en fait ici dans le BuildCube, j'ai tout raccourci à une ligne juste pour que ce n'était pas une énorme quantité de code. Maintenant, voici où je sélectionne deux surfaces pour chaque face. Donc, comme 98, je dis, faisons comme si nous faisions juste le front maintenant, ce que nous sommes. Sur la ligne 98, je dis : « Hé, sélectionnons la couleur que nous avons pré-choisie et faisons semblant qu'elle soit orange. » Donc, il choisit l'orange et il l'attache à cette forme de début, cette forme de fin, et à ces sommets. C' est tout sur la ligne 99. Puis sur la ligne 100, je dis : « Ok, cool. Tuez le remplissage », et sur la ligne 101 je dis, « Cool, faisons de la surface suivante la même information exacte, mais elle est maintenant assise au-dessus de celle qui a la couleur. » Donc j'ai pensé, « Ce sera génial », parce que c'est comme conceptuellement, c'est un cube dans un cube, mais le cube intérieur choisit aléatoirement des couleurs, le cube extérieur dépouille la surface avec ces PNG transparents et parce que ces PNG transparents sont transparents, vous serez en mesure de voir à travers le cube externe au cube interne qui a réellement la sélection de couleurs aléatoires parce que je suis juste en train de déjouer. Maintenant, si vous exécutez cette esquisse, c'est exactement ce qui se passe est que vous avez un cube dans un cube parce que chaque face est deux commencent dans des formes. Le premier, nous choisissons au hasard une couleur, le second c'est que nous mettons le PNG dessus. Donc, vous êtes en fait regarder à travers la transparence à la couleur sur la boîte intérieure. On dirait qu'il vient de cueillir un tas de gris et une orange. Si je fais à nouveau ce croquis, voyons si je peux obtenir un meilleur mélange. Donc maintenant, on dirait que j'ai des gris, j'ai un bleu sarcelle, et on dirait que j'ai aussi une surface orange. Donc je pensais que c'était comme si la prochaine évolution logique était « Wow, peut-être que je peux utiliser les PNG pour utiliser la transparence en ma faveur pour regarder un autre cube à l'intérieur qui obtient un remplissage solide. » Maintenant, si tu penses comme mon cerveau fou, tu pourrais comprendre ce qu'on va faire sur la construction 11. Sur l'exemple 11, j'ai pensé, « Oui, je dois utiliser HPixelColorist. » Donc, vous remarquerez à l'intérieur du dossier de données il y a ce color.JPeg et si nous regardons le code de l'exemple 11, j'ai sorti HColorPool et j'ai ajouté HPixelColorist. Encore une fois, sur la ligne 14, cela reste inchangé sur l'exemple 11, nous choisissons toujours une couleur. Sur la ligne 21, nous avons mis à jour de l'utilisation de hColorPool à hPixelColorist. Alors voyons ce que nous avons à faire ici qui est juste ici sur la boucle quatre car il est pré-choisir l'emplacement, pré-cueillir la balance, je dis aussi, « Hey, pouvez-vous me faire une faveur et pré-choisir la couleur, mais que je veux que vous obteniez est d'accéder au HPixelColorist , obtenir la couleur, et je vais vous donner cette coordonnée X et cette coordonnée Y qui est pt.x et pt.y. » Maintenant, si vous vous souvenez que pt.x et pt.y est notre sélection de localisation aléatoire. Donc je dis, « Choisissez un endroit aléatoire quel que soit l'endroit qui est. Regardez également les coordonnées X et Y sur le JPEG, trouvez le pixel à cette position particulière, et tirez cela dans le cube. » Donc, si vous revenez à la fonction BuildCube, le code n'a pas changé. C' est toujours la même chose de l'exemple 10, mais maintenant quand je teste cette esquisse, encore une fois, nous faisons toujours ce cube dans un concept de cube, sauf qu'il vole la couleur de notre color.JPG. Alors encore une fois, quelle excellente façon d'utiliser PNG à notre avantage. Laisse-moi courir ça une fois de plus et voir si on peut avoir des échelles aléatoires différentes. Ça allait devenir un peu plus petit autour des boîtes là-bas. Mais encore une fois, il échantillonne la couleur de HPixelColorist. Ok, on va mettre fin à cette vidéo. Ensuite, nous allons juste passer du temps sur l'exemple 12. 47. Unité 9, Vidéo 7: Super. Nous en sommes maintenant à l'exemple 12 et ce que nous allons faire par exemple 12. Donc, je me suis dit, je ne sais pas si j'aime nécessairement l'oscillation de chaque cube individuel. Je pensais me demander ce qui se passerait si je prenais l'oscillation et l'utilisais sur tout le groupe de cubes. Donc, au lieu de chaque cube individuel me donnant oscillation RotaTex, Rotatey et Rotatez. Et si j'utilise cette oscillation pour déplacer tout le groupe de cubes. Donc, allons de l'avant et regardons la ligne 6 nos NumCubes est 20 donc nous allons générer au hasard 20 cubes dans ce cluster. Vous voudrez peut-être vérifier que sur les lignes 39 à 41, ma randomisation est plus grande. Il est maintenant négatif 300 au centre et positif 300 au centre pour l'axe des x. Négatif 300, positif 300 pour l'axe y, et aussi négatif 300, positif 300 pour l'axe z. D' accord. Maintenant, nos oscillateurs restent inchangés. Ils sont toujours les mêmes ici. Ok, mais ce que j'ai fait est édité le push et PopMatrix. Voyons ce qui a changé ici. En fait, je vais revenir à la construction 11 afin que vous puissiez regarder comment nous avions initialement la configuration PushMatrix, PopMatrix. Ça allait se traduire à l'endroit aléatoire. Il allait alors faire pivoter x, faire pivoter y, pivoter z pour chaque cube individuel, construire le cube, puis réafficher les paramètres. D' accord. Donc, 12 prend un peu un rôle différent dans le sens où, en fait, j'ai besoin de vous montrer une autre chose qui, est que si vous regardez pt.x, pt.y et pt.z dans build 11, rappelez-vous que cet emplacement aléatoire devait trouver le centre de l' écran d'abord, puis randomisé hors de ce centre de l'écran. Donc, notez que le pt.x était la largeur divisée par deux plus une plage aléatoire, hauteur divisée par deux plus une plage aléatoire, et encore une fois le z était seulement négatif 100, positif 100. Dans 12, j'espère, vous avez remarqué que la largeur divisée par deux a disparu et la hauteur divisée par deux a disparu. D' accord. Maintenant, la raison en est l'endroit choisi. Je voulais juste choisir un nombre aléatoire basé sur un min et un max, et encore une fois le min et le max ici est juste négatif 300, positif 300. Alors, ok, regardons cette PushMatrix et PopMatrix. D' accord. La ligne 75 dit, « Hey, passons à la position centrale », donc ça se traduit par une largeur divisée par deux hauteur divisée par deux. Donc, déplacez-vous au centre et puis il dit ok, « Faisons RotaTex, Rotatey et Rotatez pas dans la boucle for », il le fait dehors de la boucle for et parce qu'il le fait en dehors de la boucle for, il va effectuer que la traduction de RotaTex, RotaTey, RotaTez à l'ensemble de l'environnement. D' accord. Donc, il traduit RotaTex, Rotatey, Rotatez puis il arrive à la boucle for qui s'exécute, dans ce cas, 20 fois. La boucle for fonctionne 20 fois, elle attache les cubes et dit, « Oui, mais ces cubes doivent se déplacer aléatoirement sur le x, aléatoirement sur le y et aléatoirement sur le z. » D' accord. Donc, nous avons un nouveau push imbriqué et Pomatrix qui traite du cube individuel et ce cube individuel dit, « Ok. Je peux aller négatif 300, positif 300, négatif 300, positif 300, négatif 300, positif 300, positif, ainsi de suite, et ainsi de suite. D' accord. Ensuite, il construit le cube. Ainsi, en déplaçant le RotaTex, Y et Z hors de la boucle for et en le plaçant dans une première poussée initiale et PopMatrix, puis à l'intérieur en exécutant la boucle for et en faisant son autre push individuel et PopMatrix pour chaque cube individuel, Cela signifie maintenant que nous utilisons les oscillations H pour déplacer tous les 20 cubes à la fois. D' accord. Donc, tout le reste en dessous reste inchangé. Vous remarquerez peut-être que seuls les builds 10 et 11 utilisent les PNG transparents sont retournés aux JPEG dans ce fichier. Donc, je n'utilise pas les PNG transparents, et je ne fais pas la boîte dans un truc de boîte. n'était que sur les dossiers 10 et 11. Donc, j'ai pris ça ici dans la construction 12. Dans la construction 12, je construis juste ma boîte et attache des textures aléatoires à chacune des surfaces. D'accord. Alors, allons de l'avant et exécutons ce croquis particulier et ce que vous devriez voir c'est que j'utilise l'oscillation maintenant, je ne fais pas tourner chaque cube individuel, je fais tourner la masse entière maintenant. J' ai juste pensé, « Wow, ok, c'est assez incroyable. » J' ai vraiment apprécié ça. Donc, je vais aller de l'avant et je vais garder cette vidéo courte. Dans la vidéo suivante, je vais passer aux exemples 13 et 14 parce qu' une autre idée me frappe qui pourrait faire avancer la façon dont cela semble esthétiquement. Donc, la chose que je veux que vous remarquiez maintenant est que nous tournons toute la sélection de 20 cubes, mais remarquez que tous les cubes ne sont pas tournés. Donc, ils sont tous fondamentalement dans la même direction. Donc, j'ai pensé que je devais randomiser ça. Alors, fermons cette vidéo et passons aux exemples 13 et 14. 48. Unité 9, Vidéo 8: Nous en sommes dans les exemples 13 et 14 maintenant. Donc, en ce moment, je suis dans l'exemple 13 et encore une fois, juste pensé que je dois aborder ce problème de rotation, le fait que tous les 20 cubes partageaient la même non-rotation. Donc, comme vous l'imaginez, si je veux faire pivoter les cubes au hasard, au moins fixe, puis faire pivoter l'ensemble du cluster, j'ai un pré-sélection rotations aléatoires. Alors, allons-y et regardons ici sur la ligne 13. Je préchoisis au hasard une texture. Je préchoisis au hasard un emplacement. Je préchoisis au hasard une taille basée sur un min et un max. Si vous allez faire pivoter quelque chose de manière aléatoire, vous devez préchoisir une rotation aléatoire choisie. Donc, je crée un PVector ici appelé PickeDrotation, et c'est aussi NumCubes, ce qui signifie qu'il va avoir 20 rotations pré-sélectionnées. D' accord. Alors, regardons les lignes 49 à 51. Ce que je veux présélectionner est une rotation X, Y et Z pour chaque cube. Donc, je ne fais pas qu'une rotation. Je fais la rotation des trois plans : une rotation X, une rotation Y, et une rotation Z. Alors, sur la ligne 50, je dis : « D'accord. Eh bien, je veux un PVector. Je vais appeler ce Pvector pr pour la rotation choisie », et je vais dire, « Ok. Pour le X, faites un entier aléatoire 360", qui va me donner un nombre entre zéro et 360, « et pour le Y, donnez-moi un 360 aléatoire, et pour le Z, donnez-moi un 360 aléatoire. » Une fois que vous avez choisi au hasard ces trois rotations, prenez ce PVector et enregistrez-le dans notre liste de tableaux de rotations sélectionnées. Donc, maintenant sur les lignes 49 à 51, nous avons choisi au hasard une rotation pour le cube. Maintenant, vous allez dans le tirage au sort ici, et voici notre poussée et notre matrice pop. Maintenant, encore une fois, les lignes 81 à 84, qui traitent de l'ensemble du cluster, et vous verrez alors que c'est l'ajout des lignes 90 à 92, où je dis : « Ok, vous choisissez maintenant des cubes individuels, traduisez X aléatoire, Y aléatoire, Z aléatoire. Aussi, tournez vers votre rotation aléatoire X, tournez Y, et faites pivoter Z. » Donc, maintenant chaque cube est en train de choisir son, j'attribue tout ce que j'ai pré-choisi pour la rotation pour la rotation X, tourner Y, et faire pivoter Z. Stellar, rien d'autre n'est différent. Le cube de construction est toujours le même. Maintenant, regardez comment mettre en œuvre cette rotation aléatoire pré-sélectionnée, regardez comment cela change le cluster. Donc, je vais aller de l'avant et faire ce sketch. Vous remarquerez maintenant que l'arrangement des blocs est beaucoup plus intéressant parce que maintenant, ils ne sont pas tous la même non-rotation. Maintenant, ils sont tous des rotations différentes, mais ensuite je les déplace tous comme un cluster et juste esthétiquement, j'ai pensé, « Wow ! C' est visuellement beaucoup plus intéressant. Laissez-moi simplement lancer le croquis à nouveau pour voir quel genre de configuration aléatoire je reçois. » Encore une fois, maintenant je crée ce très beau groupe de cubes, mais le fait qu'ils tournent au hasard signifie que certains vont frapper dans certains des autres, et je me suis juste dit, « Wow ! Ça a l'air plutôt bien. » Encore une fois, j'utilise l'oscillation pour déplacer le cluster dans son ensemble. Donc, je suis assis avec ce gars pendant un petit moment, et j'ai ensuite réfléchi à ce qui se passerait si j'ajoutais la rotation aux cubes individuels. Donc, ça m'a juste fait penser, « Eh bien, ok. Je pourrais avoir un oscillateur oscillant tout le groupe. Mais alors, que se passe-t-il si les cubes individuels se tournaient sur eux-mêmes pendant que l'oscillateur bougeait le cluster dans son ensemble ? Mais je n'étais pas sûr de vouloir passer par là et créer un tout nouvel ensemble d'oscillateurs. Alors, j'ai pensé, « Laisse-moi garder ça dans une Build 14 et essayer quelque chose. » Alors, allons de l'avant et passons à Build 14. Build 14 est presque identique à Build 13, mais j'ai implémenté un petit truc à l'intérieur de ce croquis, et cette astuce est à l'intérieur de la fonction de dessin. C' est tout ce que j'ai fait, c'était cette petite édition juste ici. Je viens de dire, « Que se passerait-il si juste à l'intérieur de la rotation X et de la rotation Y, si je soustrais le FrameMount du film ? » Maintenant, FrameCount compte toujours un, deux, trois, quatre, cinq, six. Dès que vous démarrez votre film, FrameCount est toujours en cours d'exécution. Je me suis dit : « Eh bien, et si je fais pivoter X moins le FrameCount, et que faire si je fais pivoter Y plus le FrameCount ? » Donc, je ne crée pas un tout nouveau jeu d'oscillations. Je suis juste en train d'ajuster cette rotation X et Y moins ou plus quel que soit le FrameCount du film est. Encore une fois, je n'étais pas tout à fait sûr de ce que cela allait faire jusqu'à ce que je fasse le sketch. Dès que j'ai fait le croquis, j'étais plutôt heureuse. Maintenant, vous pourriez créer tout un nouvel ensemble d'oscillateurs si vous le voulez. Nous pourrions appliquer un jeu secondaire d'oscillation pour chaque cube individuel, puis l'oscillation principale faisant le cluster principal. Mais je pensais, visuellement, ce moins FrameCount et plus FrameCount ont résolu le problème sans écrire tout un tas de nouveau code. Alors, je me suis dit : « Wow ! C'est vraiment beau. » Encore une fois, je peux courir ça encore et encore et encore, et nous devions différents. On y va. Donc, maintenant j'ai choisi quelques petits cubes. Donc, vous avez l'oscillation principale qui tourne lentement cette chose autour, et le FrameCount rotation chacune des boîtes individuelles. Maintenant, une chose à laquelle tu devrais penser en ce moment, c'est : « Oh mon Dieu ! Peut-être que je suis nouveau dans le traitement, et beaucoup de ce code maintenant est devenu trop, trop rapide. » qu'il en soit, je peux aller au sommet, et je me rends compte que je mappe des JPEG à cet environnement. Donc, je peux sauter dans Photoshop ou Illustrator, créer de nouveaux actifs, et je peux en fait les mapper à cet environnement et voir quel type de modèles je reçois. Donc, vous pouvez échanger mon illustration contre quelque chose de différent. Donc, je regarde ça, et je pense juste que c'est génial. J' ai eu une très bonne expérience avec ce système. Ça produit quelque chose d'intéressant. Mais dans mon esprit, je me demandais encore ce qui définit une texture, et cette section est appelée combos. J' ai pensé comment je pourrais prendre cette chose incroyable ici et la combiner avec quelque chose d'autre que nous avons déjà couvert dans ce cours. Donc, la première chose qui m'est venue à l'esprit était, que se passerait-il si je faisais un comportement d'essaim et que je mappais le comportement d'essaim à la surface de chaque cube ? Serait-ce possible ? Donc, ce que nous allons faire maintenant, c'est que j'ai écrit une petite note ici, qui est de prendre une pause. Donc, on va faire une pause. Nous sommes à l'exemple 14, mais je veux arrêter ce code que nous avons fait, et je veux faire un petit fichier secondaire et illustrer ce que nous faisons dans ce fichier secondaire, puis prendre ce fichier secondaire et le fusionner dans ce que nous voyons en ce moment. Alors, comment puis-je travailler sur un essaim que je vais éventuellement mapper à la surface de cette animation de cube ? Des trucs passionnants. Finissons cette vidéo, et je te verrai dans la prochaine. Une petite pause. Passer à l'exemple 50. 49. Unité 9, Vidéo 9: D' accord. On fait une pause. Ce fichier est une pause, un peu de pause, parce que je me demande dans mon esprit, puis-je utiliser HCanvas pour une texture ? HCanvas pourrait-il être mappé à la surface du cube ? J' ai le mappage de JPEG, mappage de PNG, le mappage QuickTime Movies. Pourquoi ne puis-je pas mapper un HCanvas à ce cube ? Je pense qu'on peut le faire. Donc, j'ai pensé, eh bien, ok, prenons une pause ici, regardons le dossier 15. Fichier 15, exemple 15, vous remarquerez qu'il est écrit essaim et c'est parce que je veux faire un comportement d'essaim. Maintenant, si je regarde l'exemple 15 et que je regarde le dossier de données, j'ai notre bon ami color.jpg ici. Donc, je pensais bien, je vais utiliser cette information de couleur pour mon essaim. Vérifions ça. J' ai un HCanvas, HPixelColorist, j'ai HSwarm, j'ai HDrawablePool et j'ai un HTimer. Donc, nous allons combiner toutes ces choses ensemble sur un HCanvas parce que dans mon esprit, je pense que je vais utiliser un HCanvas sur la surface du cube. Remarquez la taille de mon film, c'est 1280 par 640. Maintenant, je l'ai fait exprès de sorte que lorsque nous exécutons ce fichier, cela me permet de montrer ce qui se passe visuellement. Maintenant, 1280, c'est 640 fois deux. Sur la ligne 12, je crée une instance de HPixelColorist et je dis aller chercher notre color.jpg. Je veux juste vous faire savoir que nous allons l'appliquer au FillOnly. Maintenant, regardez les lignes 14 à 16, je crée un HCanvas mais remarquez le changement. Le changement ici est, que si vous ne spécifiez aucun argument à l'intérieur de HCanvas alors il adopte juste la largeur et la hauteur. Je veux faire un HCanvas qui ne fait que 640 par 640, donc sur la ligne 14, je dis que c1 est un nouveau HCanvas, 640 pixels à 640 pixels, AutoClear est faux et le fondu est un, donc nous allons obtenir cette brûlure lente. Alors ignorez la ligne 15, semblant que vous ne le voyez même pas. Ligne 16, H.ajouter (c1). j'ajoute l'image de color.jpg, À la ligne 18, j'ajoute l'image de color.jpg, et je mets son emplacement sur un axe x de 640 et en ce moment je parle à travers le code mais quand nous l'exécutons, vous serez comme : « Oh, ok, j'ai ce qu'il fait. » Je crée un HDrawablePool et nous allons en dessiner 20. Nous allons mettre ce truc dans notre canevas c1, donc nous peignons nos HRectangles en c1. Nous avons un OnCreate, remarquez qu'il n'y a pas de RequesTall et il n'y a pas de RequesTall car nous utilisons une minuterie pour joindre chacun des éléments à notre Swarm toutes les 250 millisecondes. Maintenant, dans notre OnCreate, j'ai mis dans ce que nous avions fait sur un fichier précédent de Swarm que c'était comme des feux d'artifice, ils ont tiré à différentes positions. Je veux utiliser ça dans celui-là. Donc, je fais la rotation flottante = aléatoire (TWO_PI), la taille du Drawable ici est de 100 pixels par deux pixels, il n'y a pas de trait. L' emplacement est 320 sur le X et 320 sur le Y. Donc encore une fois, si notre film entier est 1280 par 64 alors je ne fais que le point Swarm sur le côté gauche de l'écran, 320 par 320. Je vais de l'avant et mettre dans ce truc que j'ai mis dans l'essaim précédent où je fais les radians de rotation à la rotation et le mouvement, cosinus temps de rotation 10 et sinusoRat fois 10 et l'Anchorat est en H.centre. Je fais aussi les colors.applyColor d'un hPixelColorist qui saisit la couleur de color.jpg. Méchant. Maintenant, je crée un HSwarm et ajoute D à ce HSwarm et je dis, « Hey, voici les propriétés que je veux que tu aies. » L' objectif que vous essayez d'atteindre est 320 par 320, ce qui se trouve également être le point de naissance, votre vitesse est 15, votre Turnease est 0,02, et votre secousse est de cinq. Maintenant, ici en bas, j'ai une petite boucle quatre et je dis que nous allons parcourir tous les actifs dans la piscine et mettre à jour leur couleur à partir des couleurs HPixel. Donc, comme l'essaim commence à se déplacer, il met à jour la couleur au fur et à mesure qu'il se déplace dans ce color.jpeg. Donc, testons ce croquis et voyons ce que j'essaie d'illustrer ici. Cool. Donc, la raison pour laquelle j'ai fait ce fichier de cette façon est que sur le côté droit, vous pouvez voir juste le color.jpg et je dis, « Regardez, je charge dans ce color.jpg et j'utilise ses informations de couleur pour mettre à jour l'essaim que vous voyez sur la gauche. Maintenant, l'essaim que vous voyez sur la gauche, vous remarquerez que c'est en fait un HCanvas. Donc, il y a un HCanvas qui est 640 pixels par 640 pixels juste là sur ce côté gauche. L' essaim est en cours d'exécution et il met à jour la couleur , mais ce que nous affichons sur la gauche est un HCanvas. Alors maintenant, je veux savoir après cette merveilleuse petite pause que nous avons prise, puis-je utiliser ce HCanvas que nous voyons ici sur le côté gauche, puis-je utiliser ce HCanvas pour les six surfaces du cube ? Je vais paniquer si ça marche. Donc, fermons cet exemple, passons à la vidéo suivante où nous allons parler de l'exemple 16 et de l'exemple 17. 50. Unité 9, Vidéo 10: Il est sur le point de descendre en ce moment, exemple 16 et exemple 17. Voici où je prends l'exemple 15 et voir si je peux le fusionner avec l'exemple 14. Ainsi, l'exemple 16 est une fusion de ces deux fichiers. Il va y avoir beaucoup de code ici, mais j'espère que vous avez regardé ce départ facile et progressivement devenir plus complexe. Espérons que, même si c'est beaucoup de code, vous avez compris les étapes qui nous ont menés à ce stade. Alors, regardons l'exemple 16. J' ai fait des trucs à ce dossier, il y a des indices visuels et ça aura du sens quand on l'exécutera. En haut, je viens de copier et coller tout ce que nous venons de faire dans l'exemple précédent 15. Le Canvas, le PixelColorist, l'Essaim, le Pool Drawable et le Minuteur. Si vous regardez la configuration, j'ai copié et collé tous les éléments de l'exemple 15, qui ajoute le HPixelColorist, en ajoutant le Canvas-One. Vous voyez ici, ça dit juste nouveau HCanvas. Prenez un avis, ligne 19, ce dossier est de retour à 640 par 640. Donc, nous sommes de retour dans notre plus petite taille de toile, nous n'en sommes plus à 1280. On est de retour à 640 par 640. Ligne 25, j'ai gardé la même chose. Je viens de dire, faisons un HCanvas et cette toile est 640 par 640. L' effacement automatique est faux, le fondu est un. Ignorez la ligne 26, vous ne le voyez pas. J' ajoute de la toile à battage médiatique. Le mode Texture est normal. J' ai ensuite ajouté tout le code pour le pool dans le minuteur. Donc, la piscine est toujours la même que dans l'exemple 15. On dessine 20 actifs, ça utilise un HRectangle, ça fait ce truc de rotation des feux d'artifice. Nous ajoutons un HSwarm comme nous l'avons fait dans l'exemple 15 et le Timer va toujours tirer ces choses sur 250 millisecondes. Maintenant, le reste du code est tous nos trucs de pré-sélection. Donc, si vous regardez cette boucle quatre, c'est d'avant, c'est de l'exemple 14. Où je présélectionne un emplacement aléatoire, présélectionne une échelle aléatoire, présélectionne une rotation aléatoire pour x, y et z. Nos oscillateurs sont restés inchangés par rapport à l'exemple 2. Maintenant, regardons le tirage au sort. Le tirage au sort, j'ai ajouté cette petite boucle quatre pour parcourir la piscine et reget la couleur de chaque PixelColorist dans ce color.jpeg. Cette matrice push et pop est toujours la même. Cela reste inchangé par rapport à l'exemple 14. Ce qui est différent, c'est la fonction BuildCube et regardez ce que j'ai fait ici. J' ai dit pour la texture, au lieu de tex, T-E-X, au lieu d'aller à un tableau d'images, je viens de dire, « Allez sur la toile et attrapez les graphismes. » J' ai fait ça pour tous les visages. Ainsi, vous remarquerez que la texture est c1.graphics pour les six surfaces du cube. Je vais maintenant tourner le film et vous allez remarquer une certaine merveille mais c'est là pour une raison et je vais l'expliquer. Quand je l'exécute, j'ai laissé le HCanvas de C1 en arrière-plan. Donc, vous pouvez le voir en cours d'exécution, mais vous pouvez également voir qu'il est en effet cartographier ce comportement d'essaim sur les six surfaces du cube. Donc, j'ai le comportement de l'essaim assis en arrière-plan, vous pourriez le voir bouger et vous pouvez voir qu'il est en train de se mettre à jour sur les surfaces. Donc, c'est juste un repère visuel. Un moment sacré, ce foutu truc a marché. Donc, je vais aller de l'avant et fermer ceci et je vais le réparer dans l'exemple 17. Donc, si vous passez à l'exemple 17, la seule chose qui est différente est cette ligne 26 ici, où je crée le HCanvas 640 par 640. J' ajoute le HCanvas sur la ligne 27 mais sur la ligne 26 je dis, « Pouvez-vous déplacer le canevas en tant qu'axe X comme négatif 10.000. Comme en gros, éloignez-le de moi. Je ne veux pas le voir. J' en ai besoin, c'est là, je peins dessus, je vais l'utiliser comme une texture, mais je l'ai bougé hors de l'écran pour que je ne la voie pas. » Donc, il y a notre ligne 26, qui est de déplacer l'exposition C1 Canvas négatif 10.000 pixels. Donc, maintenant, lorsque vous exécutez votre esquisse ici, tout ce que vous voyez, c'est les cubes et le comportement de l'essaim qui sont mappés aux six surfaces de ce cube. Je peux avoir une alléluia. Je peux avoir un amen. Alors maintenant, je me dis : « Oh mon Dieu ! Le ciel est la limite maintenant. » Maintenant, si vous pensez à cela, tout ce que nous avons appris dans cette classe, interpolation, rotation, le comportement de l'essaim, tant que nous le peignons sur un HCanvas, nous pouvons réellement cartographier ce HCanvas comme une texture sur ce surface. Maintenant, vous avez peut-être remarqué que la seule chose que nous regardons maintenant est ces cubes transparents et si vous le vouliez, vous pourriez venir ici à la fonction BuildCube alors vous remarquerez, regardez la ligne 146. J' ai commenté cette ligne 146 mais regardons ça. Si je commente la ligne 147 qui n'est pas de trait, pas de remplissage et que je remets la ligne 146, qui est un poids de trait d'un et une couleur de trait de gris, vous pouvez réellement exécuter ce croquis maintenant. En fait, ici, rendons ça un peu plus grand. Faisons de ça un poids de quatre coups. Je ne sais pas si le trait de cette couleur grise va être un n, ça marche bien. Donc, vous pouvez voir que les boîtes, vous pouvez voir leur rotation et vous obtenez ce motif vraiment intéressant de l'essaim courant à travers la surface de ce cube qui est beau. Maintenant, je vais remettre ça à la façon dont nous l'avions. Donc, je vais commenter la ligne 146. Je vais remettre 147. Encore une fois, c'est incroyable. J' utilise en fait cet environnement entier pour cacher réellement le cluster de cubes. Je ne suis pas vraiment intéressé par peut-être voir les cubes, mais je suis plus intéressé par l'abstraction du comportement de l'essaim qui est mappé aux cubes et il y a là où est la magie. Maintenant, je vais mettre fin à ce dossier et littéralement il nous reste trois vidéos. Il y en aura un par exemple 18, un par exemple 19 et un par exemple 20. Le but de ces prochains dossiers était de nouveau moi juste de me dire, « Je me demande. » Ce que je me demande c'est, je vais vous donner un petit indice, c'est de venir ici et de regarder la ligne 20. ligne 20 est la scène et vous remarquerez que le fond est juste 20-20-20. Ce n'est que lorsque j'ai essayé ceci : « Que se passerait-il si je ne quittais pas automatiquement la scène ? » Si je ne quittais pas automatiquement la scène, ça laisserait des sentiers, n'est-ce pas ? Donc, j'ai sauvé ce fichier, j'ai fait ce sketch, et j'ai eu ça. Donc, j'ai pensé qu'on devait faire de nouveaux fichiers. Allons de l'avant et terminons cette vidéo et nous allons passer à l'exemple18. 51. Unité 9, Vidéo 11: Exemple 18. Nous passons aux dernières vidéos ici, et garçon fait ce processus, cette expérimentation de ce que si, et je me demande ce qui se passerait si je fais x, y et z. ça prend un tour bizarre, et comme je l'ai mentionné dans la dernière vidéo, tout ce que j'avais à faire, c'était d'ajouter l'AutoClear (faux) à la scène principale, qui est, « Hé, vous avez ces cubes qui bougent. Pourquoi ne pas les peindre et voir ce qui se passe ? » D' accord. Donc, j'ai ajouté que AutoClear (false). L' autre chose que j'ai changé est, c' est que j'ai changé hDrawablePool pour être un seul atout. Donc, maintenant, il n'y a qu'un seul comportement d'essaim qui est mappé à chacun des six visages parce que je pensais que 20 étaient trop nombreux. D' autant plus que vous auriez ces rotations à l'extérieur, cela créerait cette bague, et encore une fois cela rendait les cubes trop visibles. J' aime cette idée d'utiliser ce cluster 3D totalement fou, mais le cacher d'une manière que si les gens voyaient les fichiers, ils ne reconnaîtraient peut-être même pas que j' utilisais des cubes 3D pour le faire en premier lieu. Donc, pour composer cela, je change hDrawablePool pour en être un. Dans ce fichier 18, ce sont les seules modifications, car j'ajoute cette suppression automatique (false) et je dépose le pool à un. Alors, allons de l'avant et exécutons ce croquis et maintenant en laissant tomber l'essaim à un actif, l'amas de cubes a presque disparu. Droit. Vous voyez, vous avez cette peinture système, mais c'est difficile d'identifier comment c'est peindre. Droit. N'est-ce pas incroyable ? Auriez-vous jamais pensé que lorsque nous avons commencé cela, retour dans l'exemple un en utilisant ces cubes tridimensionnels, nous arriverions à un exemple 18 où je cache le système qui génère réellement ces modèles ? saurais-tu ? Saviez-vous que cela a été généré par un tas de cubes en trois dimensions ? Maintenant, oh mec c'était vraiment joli. Donc, je pense à cela et je pense que cela a besoin de quelques ajustements. D' une part, j'ai senti qu'il devrait y avoir des moments de calme. Peut-être que l'essaim court trop vite. Peut-être que j'ai besoin de changer la vitesse ou la rotation est, que nous obtenions ces moments, et peut-être que ça ne peut pas résoudre assez rapidement, et donc il y a une pause, et puis il revient, et puis vous le voyez glisser. L' autre chose qui est intéressant dans ce dossier particulier, c'est que nous n'utilisons pas de lumières. On n'utilise pas de lumières ponctuelles. Donc, nous obtenons la couleur à 100 % de saturation, et en ajoutant une lumière ponctuelle signifierait que si j'avais cette boîte qui avait six surfaces, et qu'elle est légèrement tournée de cette façon, et si j'avais une lumière ponctuelle ici, cette signifierait que le comportement de l'essaim obtiendrait la lumière sur cette surface, mais qu'il commencerait à s'assombrir sur cette surface. Donc, j'ai pensé qu'en utilisant des lumières ponctuelles dans cet environnement, je pourrais vraiment commencer à contrôler l'ombrage de cet environnement. Parce que maintenant c'est très plat, très psychédélique, mais je veux ajouter un peu plus de portée tonale, et je pense que c'est magnifique, je pense, je le jure devant Dieu, c'est ce que je fais. J' ai trouvé des idées dingues, dingues, et je code ces choses et je suis assis ici comme, c'est incroyable. C' est ce que je fais. C'est ce que je fais. Je m'assois à essayer de m'étonner. Hilarant. D'accord. Fermons ça, ça a l'air génial aussi, mais ça a disparu. Fermons ce fichier et passons à l'exemple 19 dans la vidéo suivante. 52. Unité 9, Vidéo 12: Nous sommes dans l'exemple 19, et je vais mettre en œuvre certaines de ces suggestions que j'ai mentionnées dans la vidéo précédente. Donc, si je retourne à l'exemple 18, regardons quelques trucs ici. Le nombre de cubes est de 20, l'échelle min et l'échelle maximale est de 40 et 120. Si nous regardons l'essaim, la vitesse est de 15, la facilité de virage est de 0,02 et la contraction est de cinq. Faisons quelques ajustements. Si vous passez à l'exemple 19, je déplace num cubes vers le bas à 13. Je pensais que 20, c'était trop. J' ai besoin de ces moments d'espace. Donc, je déplace le nombre de cubes vers le bas à 13. J' augmente également l'échelle maximale, donc vous remarquerez que l'échelle min est maintenant 50 et l'échelle max est maintenant 150. J' ai également changé la taille de la toile, 900 par 900. Je voulais une plus grande zone d'observation pour peindre au lieu de 640 par 640. Cependant, cela n'affecte pas le canevas H. La toile H peut rester au 640 par 640. Donc, peu importe ce que nous modifions la largeur et la hauteur de la toile principale car, tant que l'essaim et la toile H restent fidèles à ce 640, tout va bien se passer. D' accord. En bas dans l'essaim, facilité de virage a été numérotée. Donc, au lieu de 0.02, c'est maintenant 0.01, donc c'est juste un peu plus lent, ok ? Puis j'ai pensé, eh bien, l'autre chose que je veux probablement mettre à jour est le X aléatoire et le Y aléatoire. Dans l'exemple 18, c'est négatif 300, positif 300 pour X et Y. En 19, je le fais 400 sur le négatif et 400 sur le positif. Alors, maintenant chacun des cubes peut sortir un peu plus, non ? sens parce que notre toile est maintenant 900 sur 900, donc en les ouvrant, cela signifie juste que le cluster va être un peu plus espacé. Chaque piscine est toujours une, donc nous en avons encore une à l'intérieur de notre essaim. La prochaine mise à jour est une lumière ponctuelle. Donc, notez qu'en ajoutant une lumière ponctuelle, vous obtenez maintenant un ombrage sur les objets tridimensionnels. D' accord ? Donc, regardez encore une fois cette lumière ponctuelle, c'est une lumière blanche 255, 255, 255. La position de la lumière est au centre exact, largeur divisée par deux, hauteur divisée par deux, et je l'ai tiré un peu vers l'axe Z de 100. Maintenant, si un cube était comme ça, cela signifierait que la lumière brille parfaitement sur cette surface. Ainsi, vous verrez la couleur qui est échantillonnée à partir de chaque coloriste pixel dans toute sa gloire arc-en-ciel. Cependant, si le cube était à cette position, la lumière frapperait cette surface et il y aurait un peu d'ombrage sur chacun des côtés de ces surfaces. Donc, vous ne seriez pas obtenir la couleur de chaque coloriste pixel dans sa saturation lumineuse à 100 pour cent. Il commencerait à s'assombrir. Maintenant, imaginez que ça bouge tout le cluster, donc ça va même empirer, n'est-ce pas ? Donc, au fur et à mesure que l'ensemble de la grappe commence à tourner, certaines choses vont venir à l'avant et certaines choses vont être jusqu'à l'arrière, et elles vont probablement aller jusqu'au noir. D' accord ? Ça va vraiment marcher en notre faveur parce que ça va ressembler à une course, n'est-ce pas ? Donc, quelque chose va se déplacer à l'avant, il va peindre une grande couche de couleur, et puis comme la chose tourne autour et certaines de ces ombres plus sombres sur les cubes vont en fait être noires sur l'essaim, il serait en fait va commencer à effacer. On dirait qu'il est effacé. Allons de l'avant et faisons le croquis et voyons exactement de quoi je parle. Donc, maintenant nous commençons à obtenir une portée tonale, et regardez ceci, vous voyez maintenant que l'essaim est en fait présente un peu de noir, parce que cette lumière ponctuelle ne frappe pas cette surface juste de l'avant. Parce que nous avons changé la facilité de virage à 0.01, regardez ça, nous avons comme un moment de calme et nous attendons juste. Nous attendons que l'essaim se résorbe en position de peindre quelque chose. Cela pourrait arriver rapidement, et cela pourrait prendre un certain temps. Parce qu'on a un secousse de cinq, techniquement, ça fait tomber, bien sûr, donc on ne voit rien. Maintenant, il est en vue. Donc, il fait ce joli balayage et puis il disparaît, non ? Donc, l'essaim tombe sur elle et s'éloigne ensuite. Encore une fois, nous obtenons cette plage tonale parce que nous utilisons la lumière ponctuelle. J' espère que vous paniquez en ce moment. Tu n'as pas vu ça venir. Whoa, magnifique. Vous n'avez pas... la plupart des gens... Chut, c'est notre secret. C' est notre secret, ne dites à personne la magie derrière ce magicien d'Oz. D' accord ? Parce que j'ai changé cet essaim de cette façon, je reçois ces moments de calme et je suis vraiment capable de regarder cela et attendre la prochaine balayage et de voir quelles formes cela va créer. Mais voici la chose intéressante, parce que vous cartographiez le même essaim sur les six surfaces, il y a la familiarité. Droit ? Donc, même si vous avez 13 cubes et que ces 13 cubes bougent, ils correspondent tous au même comportement qu'une texture. Donc, quand il glisse en vert, il glisse en vert sur les 13 de ces cubes. S' il glisse le rose, il glisse le rose sur les 13 d'entre eux. Donc, tout d'un coup, vous commencez à remarquer, oh, attendez une minute, ça fait quelque chose à différents endroits sur l'écran, mais ils éclatent tous de la même couleur en même temps. Il y a quelque chose dans l'animation qui semble familier sur tous, non ? Donc, je pense que pour moi, c'est ce que j'essaie constamment de faire quand je fais ces choses, qui est, comment puis-je programmer surprise, non ? Je veux être surpris. Je veux diriger quelque chose. Ça prend beaucoup trop de temps, non ? J' ai renoncé à celle-là. Je vais le fermer et je veux l'exécuter à nouveau, parce que je veux être surpris à nouveau. Je veux utiliser le hasard pour générer la surprise, mais je veux qu'il y ait certaine familiarité pour que ça ne se sente pas totalement aléatoire, comme, savoir qu'il y a certainement quelque chose en jeu ici. Encore une fois, vous pouvez exécuter ceci un nombre infini de fois et vous obtiendrez un nombre infini de compositions. Maintenant, il se peut que l'essaim soit juste que ça prend trop de temps. D' accord ? Donc, bien sûr, ces pauses sont trop longues. Donc, si je ferme ça, je pourrais venir en essaim ici et disons que je remets la facilité de virage à 0,02. Cela signifierait qu'il ferait mieux de revenir à la vue, non ? Alors, regarde ça, on a de jolis tourbillons, oh, tu vois qu'il est déjà trop occupé. Tu vois, c'est un bon accord, ok, cool. Il y a, non, ça marche à nouveau. vois, je veux vivre quelques instants avec ça avant qu'il ne peigne à nouveau, ce qui veut dire, je vais devoir trouver le nombre d'or pour cette facilité de virage, sorte que ça me donne ce mouvement, mais ça me donne assez de temps pour l'apprécier avant qu'il ne peigne à nouveau. Je ne sais pas quel est ce chiffre d'or. Ça pourrait être 0.015, d'accord ? Donc, essayons de faire plus qu'un seul, peut-être 0,015. Encore une fois, j'aime ce noir qui vient à travers et commence à effacer un peu. Mais j'espère que vous êtes étonné que nous utilisons des cubes pour faire cela. Ok, c'est un bon. Je vais le garder à ça. Fermons cette vidéo et passons à la dernière, qui est l'exemple 20. 53. Unité 9, Vidéo 13: D' accord. Voici le dernier fichier de cette section. Certaines choses à penser, si vous regardez l'exemple 20 et que vous regardez dans le dossier de données, j'ai changé color.jpeg. C' est une photo prise par mes amis Cosy et Dan qui font beaucoup de plongée sous-marine, et c'est d'un coup sous l'eau et c'est de varech. Ce que j'ai fait c'est que j'ai ouvert cette image de varech à l'intérieur de Photoshop, j'ai appliqué un flou gaussien de sorte que je ne voulais pas estomper un peu l'image. Donc, j'ai flouté avec un flou gaussien de 10 ou quelque chose comme ça. J' ai ensuite appliqué un peu de bruit dessus, vous pouvez voir qu'il est en fait peut-être un peu pixelisé. Puis j'ai utilisé l'outil aiguiser, pour aiguiser ce bruit. Donc, vous obtenez ce genre de photon granuleux floue, et je pensais que le grain ramènerait peut-être vraiment sympa et h pixel coloriste. Donc, notez que sur ce projet de loi 20 il y a une nouvelle image à partir de laquelle nous échantillonnons la couleur. D' accord. Qu'est-ce qui a changé dans ce fichier autre qu'un nouveau jpeg ? Eh bien, j'ai modifié un peu Turnease, donc je fais 0.017 à nouveau essayer de trouver ce genre de chiffre d'or. Autre que cela, je pense à peu près tout est resté le même, sauf que j'ai changé les lumières de pointe. Ainsi, dans l'exemple 19, la lumière ponctuelle était directement au centre. J' ai ajouté deux lumières, ces deux lumières sont blanches, mais elles brillent sur les côtés. Donc, si vous regardez les lignes 112 et 113, 255, 255, 255, 255, donc les lumières sont blanches. Mais le premier est zéro sur la hauteur de l'axe X divisée par deux à l'axe Z de 100 de sorte que la lumière brille sur le côté gauche. Puis la ligne 113 son exposition est largeur hauteur divisée par deux. Donc, j'ai deux lumières blanches qui brillent maintenant de chaque côté de la scène. Tu te rappelles comment j'ai dit tout à l'heure que j'avais besoin de ralentir un peu les choses ? Eh bien, il y a un petit truc. Ce que j'ai fait ici sur la ligne 22, c'est que j'ai ralenti la fréquence de traitement. Je crois que par défaut la fréquence d'images est de 60. Donc, ici, je réduit la fréquence d'images de traitement à une fréquence d'images de 30. Donc, j'ai réduit le tempo de tout bouger en deux. D' accord ? A part cela, je pense que tout le reste reste le même. Allons de l'avant et testons le croquis et voyons ce que nous obtenons. Donc, vous pouvez voir que ça a un peu ralenti. Il faut un peu plus de temps pour dessiner ces courbes et encore une fois c'est l'échantillonnage de la nouvelle jpeg donc nous obtenons de belles couleurs de chocolat et de menthe, eu un peu de pause ici et puis boom il vient avec le miel doré. Mint pépites de chocolat et miel, c'est le nom de cette pièce. Donc je peux regarder ça pendant des jours, et tu auras quelque chose de différent, non ? Parce qu'il y a tellement d'événements aléatoires qui se produisent que ça va se dérouler pour toi dynamiquement comme ça se déroule pour moi en ce moment. Donc, cela finit vraiment cette section qui essaie de trouver une idée et d' explorer vraiment le processus de cette idée, mais vraiment il s'agit de combos, il s'agit de combinaisons, il s'agit de prendre toutes ces choses que nous avons apprises et essayer de les faire travailler ensemble pour créer cette super surprise. Je n'avais aucune idée à la fin de cela, je ne savais pas pourquoi nous nous sommes embarqués dans ce voyage que j'allais arriver à ce genre de petite structure de peinture. Je ne savais pas que j'allais travailler sur tout cet environnement 3D pour essayer de te le cacher. Je ne sais pas si j'aurais découvert cela, si je n'étais pas prêt à marcher sur le chemin et c'est de quoi il s'agit, est-ce que marcher sur le chemin essayer des choses que se passe-t-il si vous changez ce nombre ? Que se passe-t-il si vous changez ce numéro ? Et si tu essayais de mapper cette chose à ça ? Que faire si nous essayons de passer à un SVG au lieu de chaque rectangle ? Et s'il bouge un triangle maintenant ? Je ne l'ai pas encore fait, peut-être que c'est ce que vous faites, peut-être que vous prenez un de vos dessins que vous avez fait en première classe et que vous mappez cela au comportement Swarm plutôt que sur la ligne 33 en utilisant chaque rectangle. C' est toujours en se demandant si, et si, et si, que je suis arrivé sur ces heureux accidents parce que c'est ce qu'ils sont, sont des accidents exploratoires heureux. D' accord. Regardons tout ce qu'on a à faire pour nous. Nous avons couvert HRotate, nous avons couvert HCanvas, nous avons couvert HFollow, nous avons couvert HTimers, HtWeen, HsWarm, HosCillator, puis avons exécuté un processus de combinaison. On a une dernière section, et c'est comme ça que je peux sortir ça, alors comment je prends ce truc que je fais. Oh, regarde ça, oh voilà la menthe, voilà la menthe sur le dessus de mon chocolat et de mon miel. C' est une menthe fraîche. Comment on peut sortir ça ? Je veux poster ça sur Vimeo sacré. Ou je veux faire un gif animé. Donc, la section suivante, va traiter de la sortie. Comment rendre cela à une séquence d'images ? Nous avons appris beaucoup de façons vraiment fantastiques de, oh mon Dieu, c'est joli, c'est bon aussi. Je suis désolé que cette vidéo puisse durer six heures, je pourrais littéralement regarder ça pendant six heures. Donc, passons à la section suivante qui est sortie, mais non seulement je veux que vous essayiez des choses avec certaines des choses que nous avons faites dans la classe précédente, mais je veux constamment que vous vous demandiez toujours si, parce que si cela signifie que vous allez prendre certains de ces fichiers et faire vos propres mutations, et c'est ce qui va se passer dans la section projet de cette classe. Est-ce que c'est quoi si ? Et voici ce que j'ai fait et que si et voici ce que j'ai fait, et j'ai mis dans cette image avec ce genre d'informations de couleur et regarde comment cela a changé. Il y a toujours cette expérimentation qui va révéler l'inattendu. D' accord. Passage à la sortie. Rendez-vous dans la section suivante. 54. Introduction à la sortie: Et vous êtes maintenant dans la dernière section de la sortie, et pour moi, cela résume tout ce que nous avons appris dans cette classe et le livre dans quelque chose que nous pouvons utiliser dans le monde. Donc, ce qui va se passer, c'est que nous allons réellement rendre ces animations en séquence d'images.. Droit. Donc, nous allons apprendre comment écrire le code pour créer un dossier et réellement commencer à produire chaque image de cette animation, que nous faisons généreusement à une séquence d'images, et cette section me permet également de présenter quelques outils externes que j'utilise réellement dans le seul but de créer une sortie. Donc, nous allons utiliser un petit programme de script Apple pour pointer vers cette séquence d'images et en fait construire un film à temps rapide. Super ! Une fois que nous l'avons dans le film Quicktime quelles autres applications dois-je utiliser pour le déplacer dans MP4 ? Parce que notre fichier vidéo va être un peu grand. Donc, je veux réellement déplacer mes fichiers d'un format vidéo vers MP4, et je vais utiliser un programme totalement séparé pour le créer. Comment puis-je utiliser d'autres outils pour réellement refléter ou créer un kaléidoscope de l'animation que nous venons de créer ? Une autre chose dont je suis super folle, c'est la réflexion. Comment pouvons-nous obtenir cette sortie dans gif, dans le format gif animé ? Donc, la sortie va essentiellement regarder tous ces comportements que nous avons passé tout ce beau temps à créer ensemble et à l'obtenir dans un format que nous pouvons publier en ligne et encore pour moi c'est Tumblr. J' ai créé ces 30 secondes d'animation qui avaient été sortis sur tumblr. Alors, comment prendre ces animations génératives et les mettre dans un format que nous pouvons publier sur tumblr ou utiliser dans un clip vidéo ? Comme je l'ai fait pour Fantôme Gram. Donc, je vais vous montrer comment j'ai créé certaines de ces animations de gramme fantôme qui ont été utilisées dans le clip vidéo. Donc, sortie amère douce mais bienvenue à la fin. 55. Unité 10, Vidéo 1: Désolé. C'est ça. Où diable sommes-nous ? Nous sommes en sortie, et c'est tout. C' est la magie que vous attendiez. Si vous téléchargez le zip qui est associé à ce fichier, ce que j'ai fait, c' est que je suis allé dans des combos et j'ai pris l'exemple 14 que je pensais juste être un beau croquis pour nous à rendre. On a de l'animation, je veux la sortir. Donc, en ce moment, j'ai l'exemple 14 ouvert, et ce que je veux faire, c'est chaque fois que la fonction de dessin s'exécute, je veux essentiellement peindre l'écran, puis capturer cette image. D' accord. Donc, si vous regardez l'exemple 14 à l'intérieur des combos, vous allez voir que sur la ligne 99 est la ligne qui m'intéresse. Maintenant, laissez-moi juste commenter ceci, et laissez-moi l'exécuter pour que vous puissiez voir à quoi ressemble l'exemple 14. C' est ce type qui est, c'est juste joli. D' accord. Donc, je veux sortir cela dans une séquence d'images. Maintenant, dans le cas de mon projet Tumblr, une des restrictions est que ce sera une animation de 30 secondes. Donc, si je compile une animation de 30 secondes à 30 images par seconde, alors je saurais que je veux 900 images, et donc regardons cette ligne. C' est en fait deux actions ici, et voici la première, qui est que je veux enregistrer le cadre, et donc, à l'intérieur du cadre enregistré, j'ai fait quelque chose d'unique qui est, je dis aller dans un répertoire, créer un dossier appelé frames, et maintenant commencer à enregistrer une séquence de tiffs, et ces signes de livre vont être remplacés par le nombre d'images. Donc, tout d'un coup, le premier fichier sera 000000001, puis deux, puis trois. Donc ça va sauver une séquence de tiffs. Maintenant, pendant que cela se passe, j'ai un peu conditionnel ici qui dit, si le nombre d'images a atteint 900, alors je sais que j'ai 900 tiffs que je peux compiler dans un film à 30 images par seconde serait de 30 secondes de l'animation. S' il atteint un nombre de trames de 900, il va en fait sortir du programme. Donc, le croquis entier va s'effondrer. D'accord. Donc, laissez-moi juste faire ça ici, c'est-à-dire que je vais apporter ce petit dossier. Laisse-moi juste positionner ça sur la gauche, et laisse-moi le positionner ici. Donc, voici cet exemple 14, et à l'intérieur de là est mon build.pde. D' accord. Donc, maintenant j'ai ce code ici non commenté. Alors, allons de l'avant et lançons ceci et le croquis. Regarde. Il vient de créer un dossier frames, et si vous deviez réellement ouvrir ce dossier frames, vous regarderiez cette croissance en ce moment 253 éléments, 300 éléments. Donc, comme cette animation est en cours d'exécution, elle capture l'animation vers un tiff, et finalement, cela va construire jusqu'à 900 images. Le nombre d'images va atteindre 900, et il va arrêter cette animation, comme ça. Donc, il a effectivement quitté ce croquis, et vous pouvez voir maintenant j'ai 900 images à l'intérieur de ce dossier appelé frames. Donc, si je devais mettre en évidence le premier tiff, il est là. Je peux en fait cliquer sur la flèche vers le bas, et vous voyez que je suis en train de passer à travers la séquence des images, et cela a en fait rendu chacun de ces tiffs hors. Maintenant, vous pouvez rendre n'importe quel type d'image ; jpeg, png. J' aime les tiffs, parce que les tiffs sont décompressés. Ce sont des fichiers croustillants et croustillants. droite. Donc, je n'ai pas à m'inquiéter. Si je vais à un jpeg, je m'inquiète d'avoir peut-être une compression jpeg. Donc, j'ai tendance à afficher mes images sous forme de tiffs, sorte que lorsque je construis un film, la clarté des éléments qui sont capturés est la meilleure possible. Donc, tiff est ce que j'utilise. Ici, vous pouvez voir à l'intérieur du finder que chacun de ces tiffs est de 1,2 megs. Donc, en fonction de la longueur de la vidéo, vous allez commencer à manger l'espace disque dur en fait assez rapidement. D' accord. Donc, maintenant, nous avons ajouté le dernier morceau de code pour la sortie. Dans la vidéo suivante, je vais juste vous montrer un petit truc que j' utilise pour compiler ceci dans un film QuickTime, puis pour le publier sur un mp4. D' accord. On se voit dans la vidéo suivante. 56. Unité 10, Vidéo 2: J' ai pensé que je prendrais cette dernière vidéo ici juste pour partager quelques trucs que j'utilise pour préparer quelques séquences. Dans la dernière vidéo, nous avons rendu 900 conseils. Voici tous ces conseils et encore une fois, c'est une animation maintenant. Utilisateurs de PC, je suis désolé, je ne vais probablement pas être beaucoup d'aide sur un PC parce que évidemment j'utilise un Mac dans les deux recommandations. C' est un logiciel Mac. Je ne suis pas sûr s'il y a des versions PC ou non. Le premier est que vous allez chercher ce mot sur Google ici, Sequimago. Bien sûr. Encore une fois, vous allez à Google rechercher ceci. C' est pour Macintosh et c'est juste un super petit programme que j'aime utiliser pour prendre ces conseils et les compiler dans des films QuickTime. Donc, j'ai déjà téléchargé. C' est un script Apple. J' ai déjà téléchargé ce script Apple et il est en fait assis dans mon dossier d'applications et il se trouve que je l'ai glissé sur ma barre des tâches, sur ma barre de Finder ici. Parce que je construis toujours des films afin que vous puissiez voir ici Applications Sequimago. Regarde comment ça marche. Donc, ce que je fais c'est que je vais dans un dossier, dans ce cas, j'ai 900 images et je vais juste faire tout sélectionner. Alors, tout ce que je vais faire, c'est, quand j'aurai toutes ces 900 images sélectionnées, je vais en fait les glisser jusqu'à ce petit script Apple. Une fois que je lâche prise, il va ouvrir cette boîte de dialogue et il est dit, ok s'il vous plaît nommer ce film que vous voulez créer. Alors, appelons ça rendu. Ensuite, je vais aller de l'avant et cliquez sur Enregistrer et puis vous obtenez une nouvelle fenêtre qui dit, écouter vous devez sélectionner le timing pour cette séquence d'image. Vous pouvez faire des images par seconde ou par seconde par image. Maintenant, je sais que je veux faire 30 images par seconde parce que c'est pour ça que j'ai rendu 900 images. Donc, je clique sur ce bouton du milieu ici, images par seconde. Il est dit, s'il vous plaît entrer une image désirée par seconde. Je vais aller de l'avant et entrer 30 ans. Je vais aller de l'avant et cliquer sur Entrée , puis les créateurs de ce script Apple ont voulu savoir  : « Hé, vouliez-vous que nous trions les images par nom de fichier avant de les traiter ? » Je vais aller de l'avant et dire non parce que c'est déjà une séquence d'images. J' ai fait ça pour toi, donc je n'ai pas besoin que tu fasses ça pour moi. Donc, je vais aller de l'avant et cliquer sur Non. Lorsque vous cliquez sur Non, vous remarquerez que votre curseur est devenu cette petite icône ici. Voici le fichier rendered.MOV qui est en cours d'écriture et vous remarquerez ici à l'intérieur de mon dock, le script Apple est en fait en cours d'exécution. Maintenant, ce processus de rendu va vraiment être déterminé par la quantité de RAM que vous avez et autres. J' ai remarqué que lorsque je fais une séquence d'image de 900 images comme celle-ci, cela prend quelques secondes. Cela prendra peut-être 30 à 40 secondes pour rendre ce film, mais c'est parce que cette machine particulière, c'est fait. Donc, ça a pris environ 30 secondes. Cette machine particulière a 32 gigs de RAM. Mon ordinateur portable n'a qu'environ 8 gigs de RAM et parfois un film rendu peut prendre 15 à 30 minutes. J' en ai vu des choses prendre jusqu'à deux heures, trois heures. Donc, cela varie vraiment selon le temps qu'il faut pour construire ces films QuickTime. Je vais fermer ça. Donc, c'est ce que fait ce script Apple est en fait tourner, et je ne savais pas combien de temps cela prenait donc j'ai fait un pré-rendu Betty Crocker mais clairement nous n'en avons pas besoin. Encore une fois, je peux aller de l'avant et cliquer sur ce fichier MOV et assez sûr que c'est le lecteur QuickTime. Tu peux aller de l'avant et jouer. Il fait 30 images par seconde. Il ressemble exactement à notre croquis, sauf pour cela est rendu vidéo. Ce ne sera évidemment pas aléatoire. C' est juste une lecture d'un moment aléatoire. Maintenant, c'est un fichier MOV et si je sélectionne réellement ce fichier MOV et que je clique sur les informations dessus, vous pouvez voir que ce film est assez grand. Même si la durée est de 30 ici, vous pouvez voir que ce n'est que 30 images par seconde, ce film rendu est de 98,7 megs. Ça me semble un peu grand. Donc, je veux réellement rendre cela dans un MP4. Donc, c'est le deuxième logiciel que j'aime vraiment utiliser qui m'aide juste à déchirer des films à d'autres formats et c'est ce gars ici, iSkysoft Video Converter que j'ai ici. Si je vais de l'avant et que je lance cela, il est dit que je peux faire glisser n'importe quel film dans cette zone et le sortir dans n'importe quel autre format. Encore une fois, vous pouvez explorer tous ces différents formats que cela peut également rendre. Si je prends ce film QuickTime, je peux le déposer juste là. J' ai déjà MP4 sélectionné et regardez cela. Il dit que le matériau source est 640 par 640, 30 images par seconde. C' est 98,7 megs. Je veux juste te faire savoir que ça va toujours être 640 d'ici 640. Ça va encore prendre 30 secondes, mais ça va être de 7,6 méga. Donc, je vais de l'avant et cliquez sur convertir. Ça prend deux secondes. C' est fini. Il vous dit : « Félicitations ! Vous avez rendu un MP4. » Allez-y et cliquez sur OK. Je peux faire des informations sur ce MP4 et assez sûr, ce n'est pas 7.6 megs. C' est 25.2. Tu mens, logiciel. Vous mentez. Mais ce n'est pas 98 et je suis plutôt content de ça. Donc maintenant, si je mets ça de côté ici, vous remarquerez que voici les deux fichiers côte à côte. MP4 à nouveau, semble très similaire au QuickTime donc Josh est heureux et finit par le MP4 que je finis partager sur Tumblr quand je suis prêt à publier ceci ou à Vimeo ou à n'importe quel service vidéo que vous utilisez. Il y a une autre chose que j'aime vraiment dans ce convertisseur vidéo iSkysoft. Il y a une autre raison pour laquelle je l'aime et c'est parce qu'il a cette fonction de mise en miroir. J' aime vraiment la réflexion. Vous pouvez faire un peu de mise en miroir kaléidoscopique et je suis sûr que l'application de montage vidéo de votre choix, ce soit ses Aftereffects ou Premiere ou tout ce que les autres utilisent, mais encore une fois c'est juste agréable et facile. Si vous regardez ici, si je prends cette vidéo que j'ai glissée, vous remarquerez qu'ici, sur la droite, il y a un crayon et si je clique sur ce crayon, ça me donne des options d'édition comme je peux couper, ajuster, ajouter des effets, filigrane, sous-titre, ainsi de suite et ainsi de suite. Donc, en fait, je veux aller à l'effet et si je clique sur l'effet, vous remarquerez ici est miroir et tout ce qu'il fait est juste de prendre votre fichier vidéo et le miroir. C' est bien, mais je ne sais pas si c'est exactement comme ça que je l'aurais fait. Cool. Vous pouvez réellement cliquer sur Ajuster. Si vous cliquez sur Ajuster, vous remarquerez que vous avez la possibilité de faire pivoter 90 degrés. Donc, je pourrais réellement changer la rotation pour obtenir quelque chose que j'aime peut-être ou j'ai la possibilité d' échanger verticalement et d'échanger horizontalement afin que je puisse réellement cliquer sur ces outils ici pour voir si je reçois une réflexion que je pense que c'est le plus optimal. Une fois que tu auras fini, laisse-moi voir si je peux retourner ça. C' est plutôt bien. Je vais aller cliquer dessus. Je vais aller de l'avant et cliquer sur convertir. Vous remarquerez que cela prend quelques secondes pour que cette chose soit rendue mais il rend en fait un nouveau MP4 donc le premier était un MP4, le second est deux MP4 et donc maintenant je peux quitter cette application sur cette chose ici sur le côté. J' ai un MP4 qui est le rendu original de ma pièce et le second montre le reflet. J' aime juste utiliser cet outil car il me permet essayer très rapidement d'utiliser les possibilités de réflexion. Si vous regardez certaines des pièces qui sont sur Tumblr, je l'ai utilisé et abusé de cela. Je l'ai utilisé plus qu'une fois. Ce sont deux programmes que j'utilise pour aider à construire mes films QuickTime et les rendre MP4, puis essayer quelques possibilités comme la réflexion. D' accord. Nous sommes arrivés au dernier film et cela a été fantastique. J' espère que ce n'est que le début de votre voyage. Comme toujours, comme le premier, je vais constamment regarder les projets que vous soumettez. Espérons que vous allez essayer d'ajouter des choses que vous avez faites de la classe précédente. Espérons que certains de ces fichiers vous ont inspiré à essayer nouvelles mutations et s'il vous plaît poster autant que vous pouvez dans la section projet parce que cela m'inspire autant que cela inspire certains des autres élèves qui suivent ce cours. Tout comme le premier, vous ne savez jamais, je pourrais être complètement déraillé par quelque chose que vous postez et je pourrais faire une nouvelle section comme je l'ai fait sur la première et offrir nouvelles mutations et vous guider à travers celles-ci. Mais ça n'arrivera que quand tu m'inspireras la merde. Alors, s'il vous plaît, faites que ça arrive. Je suis heureux de dire qu'il va y avoir une troisième classe. Les merveilleux peeps sur SkillShare sont extrêmement intéressés par une troisième classe qui va être matériel. Dans le matériel, je vais commencer à couvrir certaines choses comme l'utilisation de Leap Motion pour que vous puissiez réellement peindre avec vos doigts. Nous allons probablement entrer dans les étapes de l'utilisation d'un Microsoft Connect. Nous allons également faire des choses avec Webcam, en utilisant la différenciation de cadres pour faire quelques visualisations merveilleuses avec Webcam. Nous allons probablement commencer à faire des trucs avec l'audio aussi. Si vous m'avez suivi sur Twitter, j'ai fait des trucs vraiment amusants avec un minimum de détection. Donc, j'espère que cette troisième classe va simplement encapsuler des choses qui utilisent des choses externes comme entrée, ce soit son, microphone, Webcam, Connect, Leap Motion. Donc, il y aura une troisième classe quand je trouverai un autre ensemble de moments pour compiler une classe en utilisant du matériel. Donc, Twitter, je suis sur le coup. E-mail, j'adore ça. S' il vous plaît envoyez-moi quelques commentaires et j'espère vraiment que vous avez apprécié ce cours et nous allons faire la fête bientôt. Prends soin de toi. 57. Processing 3 + Bibliothèque / mise à jour HYPE: Pour enregistrer une petite vidéo d'une mise à jour. Quand j'ai fait ces cours il y a quatre ans, Processing 2 était la chose. En conjonction avec l'utilisation de Processing 2, HYPE et comment j'ai décrit HYPE dans toutes ces classes était également un fichier .pde. Donc, dans ces trois classes, vous aviez un Hype.PDE. Hype.pde contenait toute la bibliothèque HYPE, ce qui signifiait également que vous pouviez utiliser des choses comme Processing.js à l'époque. Mais maintenant beaucoup de choses ont changé, c'est quatre ans plus tard, Processing.js n'est vraiment plus une chose, mais p5.Js est le nouveau. Bien sûr, nous avons le traitement 3. Eh bien, puisque je faisais plus sur une base d'application et que je n'utilisais plus vraiment le navigateur. Nous avons réellement mis à jour HYPE vers une bibliothèque de traitement appropriée. Donc, ce que j'ai fait est, c'est que j'ai parcouru toutes ces classes que j'avais faites quatre ans en utilisant Hype.pde et Processing 2 et les ai mises à jour afin qu'ils utilisaient Processing 3 et HYPE le bon Bibliothèque de traitement. Donc, je voulais juste vous montrer très rapidement si vous allez sur GitHub.com/Hype, vous verrez qu'il y a HYPE Processing juste ici. C' est le repo maître. Cependant, je veux juste vous montrer que si vous cliquez sur Branches, et à l'intérieur de Branches, il y a un staging lib. mise en scène de Lib est toujours la plus récente, c'est là que nous poussons le plus de choses, le plus de changements, faire des ajustements. C' est toujours le travail en cours avant qu'il ne soit réellement poussé à maîtriser. Donc, parce que nous voulons le nouveau, le nouveau secret nouveau, allons-y, je vais à la mise en scène de lib et vous allez juste cliquer sur ce bouton vert qui dit « Clone or Download » et ensuite vous allez dire « Download zip ». Maintenant, ce que cela fait est de télécharger toute la bibliothèque HYPE, y compris le code source et tout. Mais nous voulons l'utiliser à l'intérieur de Processing. Donc, vous remarquerez que si vous accédez à votre fichier Documents, Traitement, il y a un dossier appelé Bibliothèques. Dans le cas de cet exemple particulier, mon dossier est vide. Donc, je vais décompresser le zip que je viens de télécharger et je devrais obtenir ce guide. Ce que cela a, c'est qu'il a des références, des exemples et des ressources. Vraiment la seule chose que vous devez regarder est le dossier Distribution. La distribution signifie, c'est la construction actuelle que vous pouvez pousser à l'intérieur de votre dossier de bibliothèques de traitement de documents. Donc, allez dans Distribution et vous remarquerez qu'il y a HYPE.jar et HYPE.zip. Allons de l'avant et zip HYPE.zip, et il va créer ce dossier appelé HYPE et vous allez juste faire glisser ce dossier dans votre dossier Processing Libraries. Donc, à l'intérieur de ce HYPE, vous devriez avoir l'exemple, bibliothèque, la référence et la source. Si vous regardez des exemples comme  : « Oh mon Dieu, il y a une tonne d'exemples ici. » Maintenant, si nous devions lancer le traitement de l'IDE, vous remarqueriez que si vous venez, il va probablement me dire de mettre à jour. Non, oui, non. Allons à la bibliothèque d'importation d'esquisse. Ecoute, tu ne devrais pas voir HYPE là. Donc maintenant, HYPE est une bibliothèque de traitement appropriée. Donc, la question est, est-ce que cela signifie que je peux l'utiliser dans un navigateur ? Non. Vous ne pouvez pas l'utiliser dans un navigateur. Si vous voulez qu'il affiche vos trucs en JavaScript, je ne suggère pas d'utiliser cet environnement ou allez de l'avant et regardez le projet p5.Js qui se passe, qui est le traitement pour le navigateur en JavaScript. Mais, si vous voulez mettre à jour tous ces fichiers de classe que j'ai fait au cours des deux dernières années, je suis passé au système maintenant où vous allez utiliser Processing 3, puis vous utilisez HYPE la bibliothèque Processing. Alors, cool. Donc, nous avons ceci à l'intérieur de Processing et juste pour le diable, si je devais déplacer cela de côté et voici quelques-unes des classes Skillshare et Gumroad sur lesquelles j'ai travaillé. Vous remarquerez, si je vais à Programming Graphics 001, j'ai maintenant inclus dans ce zip toutes les mises à jour de ce code pour utiliser Processing 3 et utiliser HYPE la bibliothèque. Donc, si vous allez à, disons simplement, Drawing Visual Assets et que vous deviez aller regarder à l'intérieur du dossier, vous remarquerez que Hype.pde est maintenant complètement supprimé de tous les projets. Si vous cliquez sur build.pde, vous remarquerez en haut que nous avons une nouvelle structure, qui est maintenant qu'elle a une bibliothèque de traitement appropriée, vous devez importer HYPE en tant que bibliothèque externe. Donc, en haut, vous pouvez voir que je l'ai dit importation Hype.Astérix ce qui signifie chargé dans. Si vous voulez utiliser d'autres choses, donc si vous importez simplement HYPE, vous obtenez les os nus nécessaires pour utiliser HYPE avec Processing 3. Si vous voulez des trucs supplémentaires comme, « Hé, j'utilise un pool de couleurs ou j'utilise une grille. » Ensuite, vous devez également importer manuellement la classe qui gère tout ce que vous essayez d'utiliser. La meilleure chose à faire est d'aller dans un exemple et de dire, « Hé, je veux utiliser un oscillateur. » Donc, si vous regardez des oscillateurs, vous remarquerez, « Oh, je dois importer des oscillateurs. » Cela signifie que cela garde la bibliothèque HYPE très mince, alors qu'avant avec Hype.PDE, vous importerez tout même si vous l'utilisiez tout. Donc, c'est maigre, c'est méchant, c'est beaucoup plus efficace en tant que bibliothèque de traitement appropriée, vous importez les classes auxquelles vous voulez parler. Donc, encore une fois, regardez le dossier des exemples, il vous montrera comment structurer les choses. En plus de cela, si vous regardez ce fichier zip, vous verrez que tous les fichiers sont là comme avant, mais ils ont tous été mis à jour pour soutenir cette nouvelle structure. Je vais le faire pour toutes les classes et je vais évidemment utiliser cette structure pour toutes les nouvelles classes à l'avenir. J' espère que ça aide. Chat bientôt. 58. Plus de cours de créativité sur Skillshare: