Programmer des graphiques I : Introduction à l'art génératif

1. Bande-annonce: m'appelle Joshua Davis, et je suis designer, je suis programmeur, je suis technologue, amant de l'open-source, amant du chaos aléatoire et nous allons suivre un cours sur l'apprentissage de la programmation de compositions algorithmiques génératives. Qu' est-ce que l'art génératif ? C' est faire de l'art qui est principalement piloté par un programme informatique. J' aime cette idée de pouvoir regarder l'écran et demander à la composition de prendre des décisions qui sont totalement hors du geste. Cela me prendra peut-être un certain temps pour vous apprendre à mettre en place ce processus, mais une fois que vous avez terminé avec ce processus, vous avez un système pour générer un nombre infini de compétitions. Je pense que là où je suis plus excité, c'est de voir ce que font les autres. Quel genre de dessins font d'autres personnes ? Quel genre de couleurs les autres utilisent-ils ? Encore une fois, cette œuvre qui est générée à la fin, sera unique à cette personne parce qu'elle a pris toutes les décisions en fonction des paramètres. Je vous donne juste les outils pour définir ces paramètres. 2. Introduction : Configuration de l'environnement: Donc, pour l'instant, nous allons nous concentrer sur la mise en place de l'environnement. Je relie ça à la planche à roulettes. Je me souviens avoir regardé les pros que j'admirais et la façon dont ils ont fait du skateboard, et quand j'ai découvert comment ils ont mis en place leurs planches, peut-être quel genre de roulements ils ont utilisé pour essayer de reproduire cette configuration, m' a aidé à mieux comprendre comment cette personne l'a fait, façon dont elle a patiné aussi bien qu'elle l'a fait. Donc, je relie ça à la technologie que nous faisons. Nous allons travailler dans l'environnement de traitement, mais je n'écris pas de code à l'intérieur de l'environnement de création de traitement ou de l'IDE. J' écris du code dans un programme appelé Sublime Text 2. Donc, nous allons prendre un peu de temps pour télécharger Sublime Text 2. Je vais vous montrer comment installer le bundle de traitement pour obtenir traitement à construire dans Sublime Text 2, et je vais également vous montrer comment configurer des extraits. Par exemple, nous allons en configurer un pour la configuration. Donc, je vais commencer à taper S-E-T-U-P, et il va en fait auto-compléter un très grand morceau de code qui est généralement le code que je réécris encore et encore. Alors, pourquoi ne pas configurer un extrait pour exécuter ce gros bloc de code. Donc, travailler dans Sublime Text 2 va être super utile en termes d' optimisation de la façon dont nous créons réellement dans cet environnement. 3. Télécharger Processing: Hey, voici Joshua Davis et bienvenue à Programming Graphics, une introduction à l'art génératif. On va s'amuser. On va s'amuser, et on a une tonne de contenu à couvrir. Je vais les diviser en un tas de vidéos indépendantes pour que vous puissiez les digérer à votre guise, et cette première section que nous allons couvrir est en fait la configuration de l'environnement. Pour moi, c'est le plus crucial. C' est une fenêtre sur la façon dont les gens installent leurs environnements, et je vais vous montrer comment j'ai mis en place mon environnement et je trouve fascinant et utile. Quel genre de raccourcis les gens prennent-ils pour faire le travail qu'ils font. Donc, dans cette classe, nous allons couvrir le traitement. Nous allons couvrir une petite bibliothèque sur laquelle je travaille, appelée Hype, et nous allons travailler avec SVG, Scalable Vector Graphics, ce qui signifie que nous allons dessiner des actifs dans un illustrateur et ensuite cartographier ces dans des programmes que nous écrivons en utilisant le traitement, ok. Donc, la première chose que je veux faire est de passer au téléchargement et à l'installation du traitement. Donc, si vous ouvrez un navigateur et allez sur processing.org, vous remarquerez en haut de la page qu'il y a un traitement de téléchargement. Si vous cliquez sur le traitement de téléchargement, vous pouvez faire un don. Si vous le souhaitez, vous pouvez cliquer sur aucun don et toujours télécharger le traitement gratuitement. Vous pouvez voir qu'il existe des programmes d'installation Windows, Linux et OS X. Évidemment, je vais utiliser OS X. Lorsque vous allez de l'avant et cliquez sur télécharger, vous devriez obtenir un fichier zip, et quand vous décompressez ce fichier zip, vous obtenez réellement le traitement de l'application. Maintenant, si je devais exécuter le traitement de l'application, cela ressemblerait à ceci. La première chose dont vous devriez être conscient est qu' il y a ce traitement qui est un éditeur de texte. C' est un environnement qui vous permet d'écrire du code, exécuter ce code et d'afficher les résultats visuels. Donc, disons que je voulais peindre quelque chose à l'écran. Ce que je pourrais faire, c'est, je pourrais juste taper directement dans l'IDE de traitement, et je vais dire configuration void. Je vais aller de l'avant et dire que la couleur de remplissage est orange, puis je vais aller de l'avant et dessiner un rectangle. Disons que ce rectangle est de 20 pixels sur l'axe des x, 20 pixels sur l'axe des y, d'une largeur de 50 et d'une hauteur de 50. Maintenant, je viens d'écrire un peu de code ici à l'intérieur de l'éditeur de traitement, et si je devais aller de l'avant et enregistrer ce fichier, je vais continuer et enregistrer ceci comme IDE de traitement et je vais le mettre sur mon bureau. Si je devais cliquer sur exécuter ici sur l'IDE de traitement, il va réellement compiler le code que j'ai écrit, et encore une fois je peux réellement voir les résultats ici à l'écran. Donc, en fait, il a dessiné un rectangle orange à 20 sur l'axe x, 20 sur l'axe y, une largeur de 50, et une hauteur de 50. Maintenant, pour la prochaine vidéo, je vais vraiment vous montrer comment travailler avec Sublime Text 2. Donc, bien que j'aime la création dans le traitement, ce n'est en fait pas mon éditeur de choix. En fait, j'aime écrire mon code dans Sublime Text 2. La raison en est qu'il a une tonne de raccourcis pour, à mon avis, écrire du code, plus rapide, plus facile et un peu plus efficace. Donc, pendant que j'aime le traitement. Je n'aime pas la création dans son éditeur. Donc, la prochaine vidéo fonctionnant avec Sublime Text 2. 4. Travailler avec Sublime Text 2: D' accord. Dans cette vidéo, nous allons couvrir le travail avec Sublime Text 2. Donc, si vous revenez à votre navigateur et allez-y et tapez Sublime Text 2 dans un moteur de recherche devrait être le meilleur résultat. Si vous allez de l'avant et cliquez, vous remarquerez que l'URL Sublime Text 2 sublimetext.com/2. En haut, vous avez la possibilité de télécharger et a encore une fois aussi Windows, Linux, et OSX saveurs. Je vais aller de l'avant et cliquer pour télécharger l'installateur, ce que j'ai déjà fait. J' ai déjà installé. Encore une fois, si je devais exécuter Sublime Text 2, vous remarquerez que c'est un éditeur de texte, tout comme l'IDE de traitement a mais il a quelques avantages intéressants. Si je commence à écrire une partie du même code comme je l'avais fait auparavant dans la vidéo précédente, vous remarquerez que si je vais de l'avant et tapez void et si je vais de l'avant et tapez setup et que j'ouvre paren, vous remarquerez qu'il génère automatiquement le paren proche, et si je vais de l'avant et tapez le support ouvert, vous remarquerez qu'il le complète en faisant le support de fermeture. Si je devais faire un retour dur, il met ce crochet de fermeture sur la troisième ligne et onglet automatiquement ma deuxième ligne. Donc, il a des moyens de rendre l'écriture de code beaucoup plus efficace à mon avis. Maintenant, et encore, c'est juste un éditeur de texte et je peux faire des choses comme agrandir le type pour le cas de ces vidéos afin que vous puissiez réellement voir le code que j'écris. Donc, il y a ces améliorations que je pense juste être un peu plus efficaces. Maintenant, si vous allez dans le coin inférieur droit, vous remarquerez que ce sont tous les différents paquets de langue qui viennent avec Sublime Text 2. Vous remarquerez peut-être que le traitement ne fait pas partie de cette installation de base. C' est quelque chose que nous devons ajouter. Donc, si vous revenez au traitement Ps devrait l'être, son PHP à Python mais il n'y a pas de traitement correct. Maintenant, il se trouve qu'il y a un paquet de traitement donc nous devons laisser Sublime Text 2 savoir que le traitement existe. Je vais aller de l'avant et revenir à mon navigateur et je vais aller de l'avant et taper dans Sublime Text 2 bundle de traitement. Lorsque vous faites cela, vous êtes intéressé par les deux meilleurs liens. C' est le dépôt GitHub qui héberge le paquet et il y ce grand second lien qui a en fait une vidéo sur Vimeo pour vous permettre de digérer le contenu. Du thé glacé. Donc, je vais aller de l'avant et ouvrir cette vidéo Sublime Text 2 Vimeo. Ça dure environ une minute. Encore une fois, c'est super utile pour vous montrer comment vous pouvez lier Sublime Text 2 au traitement. Maintenant, je vais aller de l'avant et cliquer sur ce lien supérieur parce que évidemment j'ai déjà regardé la vidéo et voici où vous pouvez obtenir toutes les informations dont vous avez besoin pour ajouter le traitement à Sublime Text 2. Maintenant, je vais le faire en utilisant Package Control. Maintenant, afin d'utiliser Package Control, vous verrez ici que nous voulons regarder sous installation et que le premier utilise Sublime Package Control. Maintenant, si vous allez de l'avant et cliquez sur ce lien. Si vous utilisez Sublime Package Control, vous pouvez facilement installer le bundle de traitement via, puis il vous montre les étapes. Malheureusement, Package Control n'est pas installé par défaut. Donc, si vous venez sous les préférences, Package Control est en fait n'est pas ici. Donc, je vais cliquer sur ce lien, si vous utilisez Sublime Package Control. Le Sublime Text Package Manager qui le rend extrêmement simple à installer maintenant. Ainsi, lorsque vous cliquez sur Installer maintenant, vous remarquerez qu'il y a du code que vous devez copier et coller dans la console de Sublime Text 2. Maintenant, Sublime Text 3 est en Bêta, donc vous verrez quelques informations ici. Je vais aller de l'avant et cliquer sur ce lien pour Sublime Text 2. Maintenant, vous allez copier cette longue chaîne d'instructions. Donc, je vais aller de l'avant et copier ça et je vais revenir à Sublime Text et je veux ouvrir la console. Donc, si vous allez de l'avant et cliquez sur vue, vous verrez ici il est dit show console. Maintenant, quand vous dites show console, il va charger cette section inférieure de Sublime Text 2 et juste ici, il y a une entrée, le curseur clignote, tout ce que je vais faire est en fait coller ce que nous venons de copier à partir du navigateur. Donc, je vais de l'avant et coller cela et je vais de l'avant et cliquez sur retour, et vous remarquerez qu'un tas de choses s'est passé et puis il a juste dit, s'il vous plaît lire début Sublime Text pour terminer l'installation. Donc, les instructions pour ajouter Package Control ont maintenant été ajoutées à Sublime Text 2. Donc, c'est à ce stade que je peux fermer les instructions d'installation de Package Control. J' ai besoin de quitter Sublime Text 2 et de le redémarrer. Donc, quand je redémarre Sublime Text 2, il semblera que rien n'est différent mais en fait, si vous entrez dans le menu principal ici, Sublime Text 2, si vous entrez dans les préférences, vous remarquerez maintenant en bas est un Package Control, où Package Control n'était pas là auparavant. Maintenant, si je clique sur Contrôle des paquets, ça va me donner ce petit sous-menu en haut avec les choses que je veux faire avec les paquets. Est-ce que je veux ajouter des paquets, supprimer des paquets ainsi de suite et ainsi de suite ? Donc, ce que nous voulons faire est en fait installer un paquet. Nous voulons installer le paquet de traitement. Donc, je vais aller de l'avant et cliquer sur installer le paquet et vous remarquerez qu'une liste de paquets est apparue. Tout ce que j'ai à faire est de commencer à taper dans le traitement et vous remarquerez que c'est le meilleur résultat. Donc, dit-il, le traitement d'un paquet Sublime Text 2 pour le traitement du langage de programmation. Donc, je vais aller de l'avant et cliquer dessus et remarquer ici tout, tout en bas, il dit que le traitement des paquets a été installé avec succès. Maintenant, ce que cela signifie, c'est que non seulement le paquet de traitement est installé, mais je peux maintenant cliquer le menu en bas à droite et vous remarquerez que le traitement est maintenant apparu comme une langue dans la liste de sélection de la langue. Donc, je vais aller de l'avant et cliquer sur le traitement et je vais commencer à obtenir des choses comme le codage couleur et tout ça. Donc c'est super amusant, mais ça fait même d'autres trucs. Vous remarquerez peut-être que lorsque j'ai écrit ce code pour la première fois, j'ai tapé vide. J' ai dactylographié, rasé quelques minutes de ma vie, mec. Je veux faire les choses plus vite. Donc, ce que fait le bundle est empaqueter beaucoup de fonctionnalités de traitement dans des raccourcis. Donc, par exemple, je peux réellement supprimer tout ce code, et disons que je veux faire l'installation. Tout ce que vous avez à faire est de taper S-E-T, et vous remarquerez maintenant qu'il nous donne une liste d'actions que nous pouvons appeler. Donc, je veux aller de l'avant et faire la mise en place, je vais de l'avant et appuie sur Entrée, et vous remarquerez qu'il crache ma fonction de configuration vide, ma fonction de tirage vide. Donc, je n'ai plus à retaper ce code. Je peux utiliser ce raccourci pour faire des trucs. Donc, encore une fois, disons que je voulais faire une For Loop. Tu peux aller de l'avant et dire pour. Encore une fois, vous remarquerez qu'il tire vers le haut le sous-menu, je peux aller de l'avant et cliquer sur Entrée, il crache automatiquement la structure pour For Loop, et il fait la mise en surbrillance des onglets. Donc, vous remarquerez qu'il est dit, entier i est égal à zéro, c'est bon. Si je vais de l'avant et que je clique sur l'onglet, vous remarquerez qu'il passe à zéro. Si j'appuie à nouveau sur Tab, je pourrais taper 100. Si vous appuyez à nouveau sur Tab, cela vous place au milieu de la boucle For. Donc, cette idée d'exécuter non seulement des raccourcis mais d'être capable de parcourir ces raccourcis est super utile. Donc, je veux faire un rectangle, et vous allez et cliquez sur Entrée. Où le veux-tu sur l'axe des x ? D' avant, 20 sur le x, Tab ; 20 sur le y, Tab ; 50 pour la largeur, Tab ; 50 pour la hauteur. Donc, Sublime Text 2 rend super facile d'écrire du code juste plus rapide, plus facile, c'est joli, c'est un changement de jeu. D' accord. Donc, nous avons le traitement installé, nous avons Sublime Text 2 installé. Il n'y a que quelques autres choses que je dirais que nous devons faire. Une des dernières choses est que nous allons réellement écrire du code dans Sublime Text 2, mais quand nous cliquons sur Construire, nous devons créer ce pont entre le traitement de l'application et Sublime Text 2. Donc, la dernière chose que je dois faire est de relancer le traitement, et vous remarquerez sous Outils, il y a Install Processing Java. Vous devez le faire, d'autres mots, vous pouvez écrire tout le code que vous voulez toute la journée dans Sublime Text 2 et rien ne va se passer parce que vous n'avez pas encore installé Processing Java. Donc, je vais aller de l'avant et cliquez sur Installer le traitement Java. Il va dire, « Voulez-vous l'installer pour tous les utilisateurs ? » Blah-blah-bla. « Vous avez peut-être besoin d'un mot de passe. » Je vais aller de l'avant et cliquer sur Oui, je vais aller de l'avant et mettre mon mot de passe, je vais aller de l'avant et cliquez sur OK, et qui a maintenant installé avec succès Processing Java dans mon environnement. Donc, à ce stade, je peux arrêter de traiter à nouveau, ok ? Parce que maintenant j'ai installé Processing Java. Donc, si je ferme cette fenêtre, et si je ferme cette fenêtre, et si je ferme cette fenêtre, et continuons et sauvegardons ce fichier. Une autre chose que je dirais qui est un peu agréable à propos du traitement de l'IDE est que lorsque vous cliquez réellement sur Enregistrer le fichier, il créerait un dossier, puis mettrait votre fichier à l'intérieur de ce dossier. En fait, c'est ainsi que le traitement fonctionne. Le traitement doit avoir une esquisse enregistrée dans un dossier portant le même nom exact. Donc, si votre croquis s'appelle Joshuadavis.pde, alors votre dossier doit être appelé Joshua Davis sinon vous obtiendrez des compilateurs. Sublime Text 2 ne sait pas encore comment le faire, il sait qu'il peut enregistrer ce fichier, mais il ne sait pas pour créer le dossier pour. Donc, c'est celui que je dirais légère gêne avec le travail avec Sublime Text 2. Alors, continuons et créons un nouveau dossier sur mon bureau. Je vais aller de l'avant et appeler ce dossier, disons qu'il s'appelle Test One, non ? Maintenant, c'est généralement ce que je fais, c'est que je vais ouvrir Test One et que je vais créer un nouveau dossier appelé Build, ok ? Je vais alors prendre ce code que j'ai écrit, dans ce cas, je ne veux pas de ce For Loop, ce rectangle est bien. On ne va pas couvrir le tirage au sort tout de suite. Dans notre dossier original, nous l'avions avec un remplissage d'orange. Je vais aller de l'avant et sauver ça maintenant. Je vais aller de l'avant et enregistrer ça sur mon bureau. Je vais enregistrer cela dans le dossier Test One, puis je vais l'enregistrer dans le dossier Build, et je vais juste appeler ce Build.pde. D' accord. Donc, laissez-moi juste déplacer ceci sur le côté et laissez-moi juste vous montrer ma structure de dossier ici. Donc, nous avons Test 1, nous avons Build, nous avons Build.PDE. Donc maintenant, à ce stade, vous pouvez réellement venir aux outils et vous pouvez cliquer sur Construire. Si je clique sur Build, ce qu'il fera est en fait d'exécuter Processing Java, et vous remarquerez que je regarde les résultats visuels comme je l'ai fait dans l'IDE de traitement. D' accord. Maintenant, il y a quelques choses que vous devriez être au courant. Je vais aller de l'avant et arrêter ça. L' un est Josh. Pourquoi faites-vous cela comme Test One, Build, Build.PDE ? Parce que si je veux faire un tas de mutations de Test One, tout ce que j'ai à faire est de faire glisser et copier, glisser et copier, glisser et copier, glisser et copier, n'est-ce pas ? Donc maintenant j'ai cinq tests de peut-être ce croquis initial que j'avais développé. Mais au lieu de, comment je mets ça ? Parce que le nom de l'esquisse doit être la même chose que le nom du dossier, si j'ai fait ce genre de copie et de duplication, je devrais aller renommer le fichier pde, test1.pde, test2.pde. Encore une fois, rasé minutes de ma vie homme. Je préférerais beaucoup avoir ce genre d'imbrication, donc de cette façon j'ai Test One. À l'intérieur de Test One est Build, et à l'intérieur de Build.pde est Build. Donc, je n'ai jamais à renommer Build.PDE. Donc, je peux dupliquer ce croquis initial et ne pas m'inquiéter d'avoir à renommer mon pde chaque fois que je fais une nouvelle mutation. C' est juste moi et je suis fou. Maintenant, ce cours va être amusant, amusant cours. Une autre chose que vous devriez remarquer est que quelque chose qui se passe dans Sublime Text 2 qui ne se produit pas dans le traitement de l'IDE, et c'est ce répertoire build-temp. Donc, chaque fois que je construis un fichier, il va construire ce répertoire Build.temp, ok ? Dans un peu ici, je vais vous montrer quelques raccourcis pour savoir comment simplement supprimer ces fichiers afin que vous n'accumulez pas tous ces fichiers build.temp. Malheureusement, Sublime Text 2 va toujours générer ce fichier build.temp, et il n'y a aucun moyen de le désactiver à l'intérieur de Sublime Text 2. Encore une fois, le traitement de l'IDE ne fait pas cela. traitement de l'IDE n'a aucune raison créer ce fichier temporaire de construction où Sublime Text 2 fait, ok ? Donc, nous avons maintenant le traitement téléchargé, nous avons Sublime Text 2 téléchargé, nous avons le Bundle installé. Nous apprenons des raccourcis à l'intérieur de Sublime Text 2. Nous avons ouvert le traitement et avons installé Processing Java. Dans la prochaine vidéo, je vais vous montrer quelques étapes supplémentaires à l'intérieur de Sublime Text 2 ainsi quelques applications essentielles que j'utilise uniquement sur OSX, et nous vous expliquerons pourquoi et comment elles sont utiles. On se voit dans la troisième vidéo. 5. Conseils sur la configuration de l'environnement final: D' accord. Dans la vidéo trois, je veux décrire quelques autres choses que je fais dans le cadre de la configuration de mon environnement. Maintenant, nous avons ce fichier que je viens de fouetter très rapidement, nous appelons ce test un, build, build.pde. Vous pouvez voir ici à partir du code que nous définissons un remplissage d'orange et nous dessinons un rectangle. Maintenant, j'ai ce même fichier exact ouvert à la fois dans Sublime Text 2 et Processing.La raison pour laquelle j'ai fait cela est parce qu'il y a une différence entre ces deux programmes lorsque vous construisez réellement le code. A l'intérieur de Processing, si vous cliquez sur cette icône, il exécute run mais si vous mettez en surbrillance Sketch, vous verrez que l'exécution est en fait Commande+R. Donc, je peux réellement frapper un tas de code, je peux appuyer sur Commande+R et c'est va compiler mon code et il va s'exécuter et nous pouvons voir les résultats visuels. Donc, si je viens à Processing et appuyez sur Commande+Exécuter, voilà. Malheureusement, dans Sublime Text 2, si vous venez sous Outils, c'est en fait Commande+B pour build. Donc, je trouve cela un peu confus parce que dans le traitement c'est Commande+R et Sublime Text 2 sa Commande+B. J'avais passé comme un an à travailler dans l'IDE de traitement avant d'utiliser Sublime Text 2 et donc mon cerveau est câblé d'une certaine manière . J' écrirais du code dans Sublime Text 2 et j' appuierais sur Commande+R et cela ferait quelque chose de complètement différent. Donc, je veux réellement changer les préférences dans Sublime Text 2 afin que la construction soit Commande+R comme dans le traitement. Donc, de cette façon, je peux travailler entre ces deux environnements et je n'ai pas à me soucier de me souvenir, Commande+B dans l'un et Commande+R dans l'autre. Donc, ce que je vais faire, c'est, je vais venir à Sublime Text 2 et sous les préférences, vous verrez Key Bindings. Maintenant, vous verrez les liaisons de clé pour les liaisons par défaut et les liaisons de clé pour l'utilisateur. Maintenant, je vais d'abord ouvrir Key Bindings for Default et vous remarquerez que cet énorme document s'ouvre. Vous verrez ici que vous pouvez déplacer cela et il y a beaucoup de liaisons de touches différentes associées à Sublime Text 2. Maintenant, je suis un utilisateur individuel. Donc, je veux ouvrir Sublime Text 2, Préférences, Liaisons de touches, Utilisateur. Lorsque vous faites cela, vous remarquerez que ce document est vide. Vous n'avez spécifié aucune liaison de clé spécifique liée à l'utilisateur. Donc, ce que je veux faire est, je veux aller à Default et je veux trouver la liaison pour la construction. Donc, je vais juste faire Commande+F pour trouver et en bas, vous remarquerez que je tape build et je clique sur trouver. Lorsque vous cliquez sur trouver, vous remarquerez que ces gars mettent en évidence ici. Bien sûr, c'est celui que je cherche sur la ligne 232, clés, super plus b ou Commande+B est la commande de build. Donc, je vais réellement sélectionner cette ligne juste ici, pas la virgule à la fin, la virgule est seulement s'il y avait plusieurs liaisons de clé que je veux définir, mais je suis toujours en train de définir une. Donc, je n'ai pas besoin de la virgule à la fin. Je vais aller de l'avant et appuyer sur copie. Ensuite, je vais passer à la liaison de clé spécifique à l'utilisateur et je vais juste me donner un tour un peu plus difficile et je vais coller. Donc maintenant, j'ai collé build dans la préférence spécifique à l'utilisateur. Ensuite, je vais juste changer cela en super plus R.so, cette façon je ne gâche pas les charges par défaut, mais alors il va charger cet utilisateur spécifique, puis remplacer la valeur par défaut. Donc maintenant, si je clique réellement sur Enregistrer et que je viens ensuite à Outils, vous remarquerez que build est maintenant défini sur Commande+R, la même chose qu'il est à l'intérieur de Processing. Donc, je peux fermer ceci, je peux revenir à mon code et juste appuyer sur Commande+R et il s'exécute comme dans Processing. Donc, c'est juste une autre chose que j'aime mettre en place pour que ces deux soient similaires et que je n'ai pas à me souvenir de construire c'est une chose et une dans une autre chose, je ne veux pas faire ça. Donc maintenant, c'est Commande+R dans les deux environnements, ce dont je suis super heureux. Maintenant, des applications spécifiques à Macintosh. Pour vos utilisateurs Windows, vous comprendrez ici en une seconde pourquoi cette conversation ne s'applique pas à vous. J' écris du code et j'aime que les choses soient organisées d'une manière spécifique. Donc, les utilisateurs de Mac ont vraiment besoin de cette application appelée SizeUp. Donc, si vous ouvrez réellement un navigateur et tapé dans « taille up », vous remarquerez que c'est le lien supérieur, « Logiciel irradié, SizeUp, » et c'est le gestionnaire de fenêtres manquant pour OS X. PC personnes, vous avez cela intégré. Vous prenez une fenêtre, vous la faites glisser d'un côté et elle s'accroche et vous pouvez organiser les choses de cette façon. Sur OS X, nous n'avons pas ça. Donc, SizeUp est un super efficace pour organiser votre espace de travail pour écrire du code à mon avis. Donc, une fois que vous avez SizeUp installé sur OS X, vous verrez ce que tous les raccourcis sont ici, mais c'est super utile que je peux dire que je veux cela à gauche, je veux cela à droite, je le veux en haut, je le veux en bas, Je le veux pour chacun des coins ou vous pouvez appuyer sur pour qu'il soit centré. Donc, ce sont juste quelques bons raccourcis clavier pour le Mac pour aider à organiser les choses. Donc, vous remarquerez que tout comme j'ai ici, ai cette petite fenêtre de traitement en haut à droite, j'ai mon détecteur en bas à droite et j'ai Sublime Text 2 dans la gauche. Si je devais recommencer un nouveau document, je pourrais ne pas aimer cette idée d'avoir à basculer d'avant en arrière et des onglets, je peux en fait tirer cela de côté, puis le positionner sur le côté droit de l'écran et ensuite travailler sur deux documents côte à côte. Donc, je trouve l'utilisation de SizeUp pour être super utile dans l' organisation de l'espace dans lequel j'écris code.Second application que j'aime vraiment est la caféine. Caféine que vous pouvez obtenir à partir de l'App Store et il met une petite tasse de café dans votre plateau de tâches. C' est de ne pas mettre votre ordinateur en veille. Parce que tout est sauté sur la caféine. Donc, si je remplis la tasse de café avec de la caféine, cela signifie juste que je peux partir ou que je peux regarder quelque chose et que je n'ai pas à m' inquiéter que mon ordinateur va dormir et que mes écrans deviennent noirs. C' est la même chose que de lancer vos préférences système, puis d'aller dans Économiseur d'énergie, puis à l'intérieur de l'Économiseur d'énergie, vous allez Jamais et il s'en va, n'est-ce pas ? Tu cliques bien. Tu dis Jamais et tu dis : « Ok, ne mets pas les disques durs. » Donc, plutôt que d'avoir à le faire à chaque fois, caféine remplace simplement cela et fondamentalement le définit toujours Jamais définit toujours ne pas mettre les choses en sommeil. Donc, j'aime avoir la caféine installée juste pour que je puisse écrire du code, faire des pauses quand j'en ai besoin, reculer quand j'ai besoin de partir quand j'en ai besoin et puis ne pas avoir à m'inquiéter fait que tout est allé dormir pendant que j'étais brièvement absents. Donc, deux applications que j'aime vraiment SizeUp et la caféine et encore une fois la caféine, vous obtenez juste de l'App Store. Donc, il vous suffit de taper Caféine et il va installer. Donc, nous avons parlé de cette troisième vidéo, Caféine, nous avons parlé de SizeUp. Nous avons parlé du système de construction. Maintenant, la dernière chose que je veux parler d'un Snippets. Snippets pénètre dans un niveau plus expert en écriture de code mais je veux vous donner au moins un extrait et vous montrer comment l'utiliser. Vous pouvez voir pourquoi c'est super utile, et à mesure que vous vous sentirez plus à l'aise avec le code et en particulier avec Hype et avec Sublime Text 2, vous allez découvrir que les snippets sont tout simplement génial. Laisse-moi juste démissionner et faire des trucs ici. Maintenant, qu'est-ce qu'un extrait, disons que vous configurez toujours votre environnement d'une certaine manière. Pour moi, je me retrouve toujours à faire la même chose qui est, je dirai, configuration vide et je dirai que je veux que la taille soit 640 pixels par 640 pixels et peut-être que je veux que l'arrière-plan soit toujours noir et peut-être que je veux toujours lisser. Peut-être que je veux toujours une fonction de tirage. Je me retrouve dans le traitement en écrivant toujours les mêmes choses encore et encore. Ce que les snippets vous permettent de faire, c'est empaqueter des choses que vous en tant que créateur de contenu individuel type sur une base quotidienne, empaqueter tous ces trucs dans un extrait. Laisse-moi te montrer à quoi ressemble un extrait. C' est mon extrait initial et il est orienté vers l'utilisation du battage médiatique et n'était pas évidemment à la hauteur des vidéos où nous couvrons battage médiatique tout de suite, mais ce qui est bien, c'est que je veux que vous installiez les extraits sorte que plus tard quand nous commençons couvrant ce contenu, nous pouvons exécuter ce raccourci. Donc, rappelez-vous quand nous avons tapé une boucle for et il crache automatiquement la boucle for et il a même eu tous les onglets et vous a permis de sauter à tous les différents onglets. ? C' est un extrait. Donc, c'est juste un extrait de configuration que j'utilise toujours avec battage médiatique. Encore une fois, ce qui est bien, c'est que vous pouvez ouvrir l'extrait à l'intérieur du texte sublime deux et vous pouvez voir comment les choses sont structurées. Vous pouvez voir comment exécuter le code de tabulation, ainsi de suite et ainsi de suite. Maintenant, pour installer cet extrait, nous devons le mettre dans le dossier des extraits de traitement et il est un peu enterré. Donc, ce que je veux que vous fassiez est en fait aller dans le dossier et ensuite je vais taper ~/Library. Je vais aller de l'avant et cliquer sur OK, et vous remarquerez maintenant que vous consultez le dossier de la bibliothèque. Par défaut sous OS X, ce dossier de bibliothèque est masqué. Donc, si vous ouvrez simplement votre disque dur et essayez de trouver le dossier de bibliothèque, vous ne pouvez pas parce que c'est un dossier caché. Donc, en allant, connectez-vous au dossier ~/Bibliothèque avec un L majuscule, nous pouvons maintenant voir le dossier de la bibliothèque. Maintenant, à l'intérieur de ce dossier de bibliothèque, vous verrez Application Support. Sous Prise en charge des applications, vous verrez Sublime Text 2. Sous Sublime Text Two, vous verrez Packages et vous verrez que ce sont tous les paquets de toutes les différentes langues, celui que nous venons d'installer, juste ici le traitement. Donc, si je clique sur Traitement, vous verrez maintenant qu'il y a un dossier appelé Snippets et à l'intérieur de Snippets sont tous ces extraits que vous pouvez utiliser dans Sublime Text deux comme, configuration, que quatre boucle, rectangle. Maintenant, quelque part je vais vous donner ce fichier d'extrait et tout ce que vous avez à faire est de le copier dans le dossier Snippets. Donc, il est maintenant copié là-dedans. Ceci est appelé hype_set up donc, si vous deviez réellement aller au Hs, vous verrez qu'il est juste là, hype_setup. Maintenant, ce que cela signifie, c' est que je peux revenir à Sublime Text 2 et je peux juste aller de l'avant et commencer à taper ce raccourci. Donc, en bas. Je dois m'assurer que vous avez le traitement sélectionné, car il s'agit d'un extrait de traitement. HY et regarde, hype_setup arrive. C' est l'extrait que nous venons de l'ajouter et si je vais de l'avant et que je clique sur Entrée, vous remarquerez qu'il construit ma configuration, il construit mon tirage, il construit ma taille comme je l'aime toujours. Est-ce que je veux que ce soit 640 par 640 ? Je ne sais pas. Regardez, je peux cliquer sur Tab, je peux cliquer sur Tab. Voulez-vous que ce soit en 3D ? Non, pas encore, donc, je peux aller de l'avant et cliquer sur Supprimer. Donc, maintenant cette esquisse de traitement ne va pas utiliser les coordonnées 3D. Ligne trois, nous n'avons totalement pas encore couvert, mais encore une fois, je peux cliquer sur Tab si je voulais changer la couleur de fond. Souhaitons-nous utiliser la 3D ? Non, on a désactivé ça. Donc, je peux cliquer sur Supprimer. Auto-efface, tu veux ça ? Oui ou non ? Si vous le voulez, voulez-vous qu'il soit vrai ou faux ? Je clique à nouveau sur Tab. Au tirage au sort, nous tirons au sort. Est-ce que j'enregistre ça ? Nous parlerons de la sortie vers les formats d'image. Dans ce cas, cela rendrait 900 tiffs, qui équivaudrait à 30 secondes de film. Alors, tu veux dire « cadre » ? Peut-être que oui, peut-être non. Je vais dire Supprimer. Donc, c'est un moyen pour, si vous vous sentez aise avec la programmation et que vous vous retrouvez à faire des choses encore et encore, plutôt que d'avoir à les taper encore et encore, vous pourriez être intéressé par la création de vos propres extraits personnalisés. De cette façon, vous pouvez simplement commencer à taper partiellement quelque chose et aller oui, je veux faire une installation hype et cliquer sur hyp_setup et vous savez qu'il va toujours générer automatiquement des choses que vous réutilisez constamment. Cela termine cette section, il s'agit configuration de l'environnement. Donc, encore une fois, nous avons installé Processing, nous avons installé Sublime Text deux, nous avons installé le paquet Processing, nous avons appris quelques applications que j'aime utiliser, nous avons eu notre configuration d'environnement. Donc, que maintenant, quand nous passons à la section deux qui est juste une introduction au traitement et au battage médiatique et ce que sont ces deux choses et pourquoi ils fonctionnent ensemble et comment ils sont légèrement différents de l'écriture de code et de traitement et ainsi de suite ainsi de suite. Ce sera la section suivante, mais au moins maintenant, nous avons configuré notre environnement exactement comment je travaille. Donc, comme nous commençons à écrire du code, nous avons quelques raccourcis, nous avons certains de ces processus pour rendre l'écriture de code juste un peu plus facile, un peu plus efficace et amusant. Alors, rendez-vous à la section suivante Intro to Processing and the Hype Framework. 6. Introduction : Processing et HYPE: Pour la prochaine étape, nous allons parler de traitement et nous allons parler de l'écriture de code et de traitement. Tout ce que Sublime texte est, c'est un environnement de création. C' est un éditeur de texte. C'est là que nous allons réellement écrire tout le code qui fait ce que nous voulons faire. Lorsque nous écrivons réellement le code et l'exécutons, ce qui se passe est, c' est que le code est ensuite compilé par traitement et quelque chose se passe à l'écran. Donc, si je dis que je veux mettre en place une toile, je veux que l'arrière-plan soit rouge et que je veux dessiner un carré vert, c'est des choses qui vont réellement taper à l'intérieur de l'éditeur Sublime Text-to. Lorsque nous cliquons réellement sur Construire, le traitement va le construire, il va lire ces instructions et réellement afficher quelque chose à l'écran. Qu' est-ce que le battage médiatique ? Hype est la troisième chose qui est, disons que nous voulons ce carré vert encore et encore et encore parce que nous aimons vraiment les carrés verts. Donc, nous pourrions créer quelque chose appelé la classe de carré vert. Donc, au lieu d'avoir à écrire tout le code pour faire ce rectangle, rendez-le vert, mettez-le ici, nous allons réellement écrire une ligne de code qui dit « carré vert ici ». Donc, c'est un raccourci. Hype est une série de raccourcis permettant d'effectuer des actions plus importantes et plus robustes à l'intérieur du traitement. 7. Télécharger HYPE: Bienvenue à la section 2. Très émotionnel. Section deux. Nous allons parler du framework HYPE. Donc, nous travaillons dans le traitement, mais je travaille aussi sur cette bibliothèque externe appelée le framework HYPE, qui est une collection de choses qui font des choses. D' accord ? Maintenant, si vous allez sur hypeframework.org, vous pouvez voir le site du projet ici. Vous pouvez voir tous les différents exemples que j'ai publiés, mais ce n'est que le site pour le projet. Le code source réel existe sur Github. Donc, vous verrez ici dans le coin supérieur gauche, il y a github.com/hype. D' accord ? Ainsi, vous pouvez voir URL ici github.com/hype/hype_processing. Maintenant, dans les étapes du projet ici sur Skillshare, j'ai en fait mis une URL différente. J' ai mis la mise en scène de l'arbre github.com/hype/hype_processing. C' est parce que la version principale du code ne contient pas toutes les modifications sur lesquelles nous travaillons actuellement. Donc, si vous voyez ici, ça dit des branches. Il y a une branche appelée staging ici et si vous cliquez sur staging, c'est en fait la collection la plus à jour du code. Encore une fois, l'URL est ci-dessous dans les étapes du projet. Maintenant, si vous êtes nouveau dans le codage complet, vous pouvez en quelque sorte ignorer beaucoup de choses. On va en parler un peu ici. La seule chose qui vous intéresse vraiment, c'est ici. Il est dit téléchargement zip. Donc, si je vais de l'avant et cliquez sur Télécharger zip, vous devriez remarquer qu'il télécharge le fichier zip sur votre bureau. Maintenant, ce fichier zip va contenir tout ce qui existe, que vous voyez ici sur le site. Donc, par exemple, il a un dossier pour documentation sur lequel nous travaillons où nous documentons certains des bits du code source. Il contient un fichier d'exemples. Les exemples sont où je prends certaines choses que nous avons écrites et je fais juste quelques exemples pour vous aider dans le processus. Java, notre code source. PDE, notre code source. Website, ce site Web réel que vous voyez ici, c'est en fait quand il est mis à jour, il vit en fait dans le dossier du site Web, et il y a évidemment un tas d'autres choses. D' accord ? Une fois ce fichier zip téléchargé, la seule chose qui vous intéressera à 100% afin de faire tous les exemples que nous allons faire est ce fichier appelé Hype.pde. Donc, Hype.pde contient toutes les classes qui se trouvent dans la bibliothèque. Il contient tout ce que nous allons utiliser pour tous les projets que nous allons réaliser. Donc, après avoir téléchargé ce fichier zip, il suffit de regarder ce Hype.pde parce que c'est le fichier que nous allons utiliser dans chaque projet que nous faisons. D' accord. Je vais mettre fin à cette vidéo. Je vais en créer un nouveau où nous parlons autres choses qui sont à l'intérieur de ce fichier zip. On se voit dans la deuxième vidéo. 8. Étapes 2, 3, 4 du projet: Ok, deuxième vidéo. Donc, nous avons le fichier zip téléchargé. On l'a décompressé. Ici, je peux vous montrer le contenu du dossier, et encore une fois, vous voyez qu'il réplique exactement ce que vous voyez ici sur GitHub. Il y a le dossier de documentation, voici le dossier d'exemples, ainsi de suite, et ainsi de suite. Encore une fois, voici ce qui nous intéresse totalement, c'est Hype.pde. Donc, maintenant, en ce qui concerne les étapes du projet que vous voyez ici sur le site Web Skillshare, nous allons couvrir à ce stade, deux, trois et quatre. Maintenant, dans la deuxième section des étapes du projet, il dit simplement, hey, creuser autour de ce dossier de mise en scène HYPE et se familiariser avec certains des trucs qui se trouvent ici. Deux choses qui sont d'un grand intérêt : évidemment, le Hype.pde, je vous ai dit que nous allons l'utiliser dans tous nos projets, mais ensuite, ce dossier d'exemples. Ce dossier d'exemples a plus d'exemples que j'ai réellement sur le site Web pour quelques raisons. Le site Web publie les esquisses dans Processing.js, sorte qu'il s'exécute dans l'objet Canvas HTML5. Tout ici n'est pas pris en charge par Processing.js. Donc, il y a quelques exemples que je ne peux jamais mettre sur le site Web parce qu'ils ne fonctionneront tout simplement pas dans le navigateur. Maintenant, d'autres choses que vous devriez prendre en considération lorsque vous regardez ce dossier d'exemples, et j'en ai parlé un peu dans l'étape du projet. Par exemple, si je vais à Swarm, vous remarquerez que je vous donne, en fait, changeons ça. Disons, HosCillator, parce que je sais que HosCillator a beaucoup d'exemples dedans. HosCillator, vous verrez qu'il y a 14 exemples. Habituellement, les plus hauts, exemple un, est l'exemple le plus nu des os. Cela signifie que je n'ai pas introduit beaucoup d'autres choses, je viens de mettre en place un exemple qui illustre simplement ce que fait HosCillator. Cependant, toutes ces classes peuvent réellement fonctionner ensemble. Ainsi, par exemple, dans cette classe, nous allons couvrir une disposition de grille, où vous pouvez mélanger une disposition de grille avec ColorPool, avec un Oscillator, avec HPath. Ainsi, vous pouvez combiner des aspects de HYPE dans un seul dossier. Donc, le premier exemple ici, exemple un, si je devais réellement publier ceci, encore une fois, il est juste de vous montrer ce qu'est l'oscillation. C' est une vague, c'est une façon de décrire une vague. À mesure que vous naviguez vers le bas dans les projets d'exemple, ils vont devenir plus robustes. Ainsi, par exemple, celui-ci n'est que 50 lignes de code. Si je devais passer au numéro 14, par exemple, vous verrez que le numéro 14 est 76 lignes de code. Cependant, si je lance réellement ce film, dans le cas de celui-ci, j'utilise en fait la 3D. Donc, j'oscille ces boîtes 3D. Donc, prenez simplement en considération que le dossier exemples, généralement l'exemple un ou les exemples vers le haut, sont l'expression la plus simple de cette classe particulière que vous regardez. En descendant, je vous donne quelques idées de suggestions pour mélanger et faire correspondre les classes possibles ensemble. Donc, par tous les moyens, consultez le dossier des exemples, car il y a une tonne de choses là-dedans qui, encore une fois, n' est pas représenté sur le site Web. Maintenant, une chose que vous voudrez peut-être commencer est ce dossier particulier ici appelé H_BASICS. H_BASICS tente de documenter les éléments essentiels pour travailler avec HYPE. Alors, qu'est-ce que le chaînage de méthode ? Comment dessiner des formes ? Comment définir où se trouve une position d'ancrage ? Comment faire pivoter autour d'une ancre ? Comment joindre des images ? Comment puis-je joindre SVG ? Donc, H_BASICS est vraiment le dossier de démarrage, où je vous donne certaines des choses qui, hé, pour vraiment se balancer, sont les choses que vous devriez vraiment digérer d'abord. Donc, en dehors du dossier d'exemples, Hype.pde est vraiment le fichier que nous allons utiliser sur toutes nos esquisses. Maintenant, vous verrez dans le projet, les étapes numéro trois parlent de la façon dont nous allons créer notre structure de dossiers. Donc, par exemple, je pourrais créer un nouveau document, puis, disons juste que ce document est appelé projet 1, et en cela, je vais créer un nouveau dossier appelé build. À l'intérieur de ce dossier de construction, je vais copier Hype.pde. Si je devais ouvrir Sublime Text 2 et passer à Processing et cliquer sur enregistrer, j'irais sur mon bureau, j'irais au projet 1, j'irais construire, et j'appellerais ce build.pde. Maintenant, je ne vais pas écrire de code, mais je vous montre la structure qui à l'intérieur de ce dossier de construction est votre build.pde et Hype.pde. Maintenant, qu'est-ce que Hype.pde ? Je vais parler un peu de l'étape 4 du projet ici dans une seconde. Qu' est-ce que Hype.pde, en fait, si vous essayez d'ouvrir cela dans Sublime Text 2, vous remarquerez que nous allons attendre un peu. Hype.pde contient chaque ligne de code à l'intérieur de l'univers HYPE. Alors, qu'est-ce que l'univers HYPE ? Par exemple, si vous regardez le dossier pde, sont toutes les différentes classes que nous avons. Maintenant, regarde ça. Tu vois ? Tout est sur une seule ligne, et en fait, si vous étiez juste [inaudible], vous seriez là pour toujours. Donc, Hype.pde est en fait chacun de ces 53 fichiers pde, mais avec tous les retours durs dépouillés et minifiés en une seule ligne. Donc, c'est l'univers HYPE. Donc, par exemple, disons, nous avons parlé d'Hoscillation. Si vous ouvrez Hoscillator.pde, c'est en fait le code qui contient toutes les instructions qui traitent de tout type d' oscillation que vous voudriez utiliser dans l'un de vos projets. Donc, il se trouve que ce fichier ici, qui est 244 lignes de code, est, tous les onglets sont supprimés, tous les retours durs sont supprimés, et il est enterré quelque part dans Hype.pde. Donc, encore une fois, juste répéter, Hype.pde est chacun de ces pdes individuels placés dans un seul fichier. Donc, lorsque nous ajoutons de nouvelles classes, nous ajoutons à Hype.pde. Vous voudrez peut-être continuer à consulter le site GitHub, vous voudrez peut-être écouter sur Twitter pour voir si j'annonce de nouvelles classes que nous avons écrites, car si oui, Hype.pde sera mis à jour. Maintenant, étape 4 dans la classe Skillshare, JAR contre pde. Qu' est-ce que ça veut dire ? Il y a beaucoup de bibliothèques externes que vous pouvez utiliser avec Processing. Le problème est que vous ne pouvez pas utiliser une bibliothèque externe et sortie en JavaScript en utilisant Processing.js. Vous ne pouvez pas utiliser une bibliothèque externe qui est empaquetée en tant que fichier JAR, et vous ne pouvez pas sortir vers Processing.js, ce qui signifie, toutes ces fonctionnalités de pouvoir sortir en HTML5, être capable de le voir sur mon iPhone, être capable de le voir sur un iPad, tout cela est jeté hors de la fenêtre lorsque vous construisez réellement la bibliothèque en tant que fichier JAR. Donc, c'est pourquoi nous avons décidé de faire de HYPE un tas de fichiers pde. les faisant des fichiers pde signifie que nous pouvons publier en HTML5, nous pouvons publier sur Processing.js. Maintenant, vous vous demandez peut-être, eh bien, comment puis-je publier sur Processing.js ? Donc, si vous lancez réellement Processing 2 ici, vous remarquerez que dans le coin supérieur droit, il est écrit Java, et c'est le seul mode qui soit là. Mais vous pouvez cliquer sur Ajouter le mode, et vous obtiendrez ce petit gestionnaire de mode, et vous remarquerez ici, le mode JavaScript. Si vous cliquez sur Installer, il va télécharger le mode JavaScript dans Processing 2. Donc, maintenant, si je ferme réellement ceci, je peux écrire un tas de code, je peux publier sur Java quand je clique sur Exécuter. Tu sais quoi ? Je devrais peut-être redémarrer. Traitement 2, et maintenant, nous avons JavaScript. Si vous cliquez sur JavaScript, maintenant, vous pouvez réellement ouvrir vos esquisses et cliquer sur Construire. Il va effectivement empaqueter tous les fichiers pour une utilisation dans un navigateur Web. Il va générer le HTML, il va cracher le JavaScript, et maintenant, beaucoup de ces croquis que nous faisons, nous pouvons réellement charger et afficher dans un navigateur. Donc, les étapes 2, 3 et 4 du projet, nous avons parlé de regarder le fichier zip, digérer tout le contenu là-bas, beaucoup de bonnes choses, beaucoup de bons exemples. Troisième étape du projet, localisez Hype.pde. Rappelez-vous la structure de dossiers que nous allons utiliser car nous allons utiliser cette structure de dossiers dans chacun de nos projets. JAR contre pde. Je ne veux pas utiliser un fichier JAR, veux utiliser pde afin que vous puissiez réellement publier sur le web. Maintenant, dans la prochaine vidéo, nous allons parler de HYPE, et plus précisément, nous allons parler de ce qu'est Fluid Interface et de ce qu'est le chaînage des méthodes, parce que ce sont des concepts qui font réellement partie de la fondation de HYPE. Donc, dans la prochaine vidéo, nous allons parler de ce qui s'est passé dans la version AS3 de HYPE, et de ce qui s'est passé dans la version Processing dans HYPE. On se voit dans la vidéo suivante. 9. Java ou Javascript: J' ai changé d'avis. Avant de passer à la section suivante, je veux juste montrer très rapidement le scénario Java versus JavaScript. Nous regardions HosCillator et si vous ouvrez réellement l'exemple un, dans Sublime Text 2 par exemple, voici le code. Et si je clique sur « Construire », je suis en train de visualiser ce contenu en Java. Ok, donc c'est Java qui fonctionne ici, ok. Maintenant, si je devais prendre le même fichier exact, l' exemple un et l'ouvrir en traitement deux, ok. Vous pouvez voir les deux rédacteurs ici, non ? Ceux-ci sont tous les deux identiques, et encore une fois j'ai Java sélectionné dans le coin supérieur droit. Si j'étais réellement frappé « Cliquez » et exécutez ceci, ok, sur le traitement de deux. Encore une fois, ces deux sont identiques, vous les exécutez en mode Java. D' accord. Cependant, si je ferme maintenant ceci, et que je cours ici pour mode et passer en JavaScript, ok. Je veux que tu regardes ce dossier ici. Le fait que je passe en JavaScript, a ajouté un fichier sketch.properties, et quand je clique réellement sur « Exécuter », ce que vous remarquerez est, est qu'il le publie réellement sur le web. Vous remarquerez qu'il a créé un nouveau fichier appelé web-export. Il contient le index.html, il contient le fichier PDE qui effectue cette animation, et le traitement JS qui interprète votre fichier PDE pour s'exécuter dans le canevas en HTML5. Alors écoutez, ces deux-là sont absolument identiques. Celui qui s'exécute en Java et celui qui s'exécute dans le navigateur, les performances sont les mêmes. Encore une fois, c'est juste une raison pour laquelle nous avons décidé de ne pas créer Hype en utilisant le format JAR. Nous avons décidé d'utiliser le format PDE afin que nous puissions profiter de la possibilité de publier notre contenu en JavaScript. Ok, on se voit dans la prochaine vidéo. 10. HYPE AS3 / Étape 5 du projet: Ce que je veux faire maintenant est de regarder comment l'ancienne version de Hype était réellement structurée lorsque vous écrivez du code. Maintenant, l'ancienne version de battage médiatique a été développée pour Flash et ActionScript 3. C' était un projet conjoint fantastique entre un bon ami de Brandon Hall et moi-même. Il a effectué le même service qui est, je veux faire des choses et ces choses peuvent être emballées dans des classes séparées pour rendre la vie plus facile. Donc, il va être utile de regarder comment l'ancienne version de Hype a été construite parce que cela vous donnera un aperçu des départs que nous avons pris lorsque nous sommes allés faire le port de traitement. Alors, imaginez un instant que nous voulons dessiner une grille à l'écran. Dans la version Hype AS3, je pourrais faire quelque chose comme ça où je dirais que var numAssets est un entier égal à 25. Donc, c'est une variable représentant le nombre de choses que je veux toucher à l'écran. Maintenant, nous avions un GridLayout dans la version AS3 et la chose agréable à propos de GridLayout est que vous pouvez appeler GridLayout, lui passer quelques arguments et que ces arguments seraient des informations sur la façon de construire visuellement la grille à l'écran. Donc, pour ce faire, je pourrais écrire quelque chose comme celui-ci où je dirais, var layout est un GridLayout égal à nouveau GridLayout. Ensuite, vous pourriez voir dans certains de mes exemples, certains nombres étant passés à GridLayout. Donc, ça pourrait être quelque chose comme 50,50,100,100,5. Maintenant, probablement la plus grande plainte avec ce code est que vous n'auriez aucune idée de ce que ces chiffres représentaient. Aucune idée de ce que 50, 50, 100, 100, 5, est. Vous devriez réellement ouvrir la classe GridLayout, regarder la fonction, puis regarder ce que sont ces arguments et ce qu'ils définissent. Donc, cela signifiait que dans tous les exemples, je devrais mettre un commentaire indiquant aux gens quels étaient ces cinq arguments. Donc, il finit par que les arguments ou xStart, yStart, xSpacing, ySpacing et les colonnes. Maintenant, puisque nous construisons une grille à l'écran, les deux premiers arguments étaient, où voulez-vous que cette grille dans son intégralité existe à l'écran ? Donc, je dirais, « Ok, eh bien, je veux que ce soit 50 pixels, commence à 50 pixels sur l'axe des x, commence à 50 pixels sur l'axe des y. Les deux arguments suivants, XSpacing et YSpacing définiraient l'espacement entre chacune des cellules de la grille. Donc, il commencerait à attacher le premier élément, puis 100 pixels plus tard, il attacherait le deuxième élément. Maintenant, le dernier argument est les colonnes. Donc, dans ce cas, nous construisons une grille qui contient 25 actifs, et donc si vous prenez 25 divisé par cinq, vous obtenez cinq. Donc, il sait qu'il va faire une grille de cinq par cinq en prenant 25 divisé par colonnes. Donc, ce cinquième argument décrirait le nombre de colonnes qui sont à l'intérieur de ce groupe. Donc, je pense que regarder cela vous donne aperçu de la façon dont nous avons pris un départ quand nous avons décidé de faire le port Hype Processing. Donc, dans la prochaine vidéo, nous prendrons la même structure exacte, mais nous montrerons à quel point elle est différente dans le processus important. 11. Traitement HYPE / Étape 6 du projet: Ok, donc maintenant, nous abordons l'étape 6 du guide de projet, et cela traite vraiment de ce qui a changé dans le port de traitement de HYPE. Maintenant, la version HYPE AS3, excellent projet entre Brandon Hall et moi-même. Cependant, quand j'ai décidé de quitter Flash comme outil de développement, et que j'ai vraiment voulu passer au traitement, et avoir ce désir de porter la version HYPE AS3 dans l'environnement de traitement, c'était une opportunité pour moi d'aborder vraiment certaines des choses de la façon dont le code a été structuré juste pour rendre les choses plus faciles pour moi et pour les autres. Donc, le port de traitement est un projet entre moi et un merveilleux gentleman à Manille, aux Philippines, James Cruz. Encore une fois, nous avons commencé à examiner les réussites la communauté de la programmation et y a-t-il quelque chose qui était bénéfique dans la communauté de la programmation qui pourrait rendre le port de traitement de HYPE meilleur qu'auparavant. dit, cette idée de Fluent Interface, et cette utilisation de la méthode chaînage redéfinirait comment le port de traitement de HYPE est fondamentalement différent. D' accord ? Vraiment, c'était une occasion pour nous de regarder la communauté jQuery et de dire, « Oui, c'est la façon de faire. » Maintenant, ces liens ont été fournis dans les étapes du projet afin que vous puissiez lire sur l'interface fluide, vous pouvez lire sur le chaînage de méthode. Mais, regardons simplement ce que nous avons fait dans les jours HYPE AS3 et comment ce code a changé dans le port de traitement. Donc, disons que j'ouvre un nouveau document ici, je vais évidemment définir le traitement comme ma langue et ensuite je vais juste coller le code initial des jours AS3. Var NumAssets 25, var GridLayout, puis nous avons parlé de cette ligne deux, qui ont besoin de mettre dans le commentaire afin que vous puissiez donner une instruction à ce que ces arguments sont. Maintenant, ce que l'interface et le chaînage de méthode couramment nous permettent de faire est écrire ce code un peu plus élégamment. Donc, disons juste que c'est un traitement HYPE. D' accord. Si je devais écrire ce même code mais dans le port de traitement HYPE, je ferais probablement quelque chose comme ça, entier numAssets est égal à 25, ok ? Donc, c'est écrit un peu différemment mais fait toujours la même chose. Je crée une variable qui va représenter le nombre de choses que je veux dessiner à l'écran. Maintenant, si vous vous souvenez, nous devons appeler la classe de mise en page de grille. Donc, je vais aller de l'avant et dire, HGridLayout, mise en page est égal à nouveau HGridLayout, comme ça. Maintenant, parlons juste de ça. Chaque fois que vous utilisez des appels spécifiques à HYPE, la plupart des méthodes vont être précédées d'un H. Donc, hColorPool, hGridLayout, HosCillator, donc c'est juste un moyen pour nous d'identifier ce qui est du code de traitement régulier et ce que du code de traitement HYPE spécifique. Donc, ici, je crée une variable appelée Layout, je la lance comme HGridLayout et je dis que c'est un nouveau HGridLayout. Maintenant, à ce stade, vous pensez peut-être, « Oh, oui, Josh va mettre un tas de chiffres là-dedans. » Non, je ne le suis pas. Je vais en fait définir les variables un peu différemment. Donc, ce que je vais faire, c' est, sur la ligne suivante, je vais dire, « Hey, Layout, je veux juste vous dire que vous avez cette variable appelée start X et ça va être égal à 50. » D' accord ? Si je devais copier et coller ceci et ensuite changer ceci pour démarrer Y 50, je pourrais dire l'espacement des points de mise en page, d'accord ? En haut, c'était l'espacement des X et l'espacement des Y. Dans la version de traitement HYPE, je vais juste dire l'espacement des points de mise en page, puis je vais dire 100 sur le X, 100 sur le Y, et dans le dernier argument, je vais aller de l'avant et dire, « Hey mise en page les colonnes sont cinq. » D' accord ? Donc, ce code maintenant conceptuellement est un duplicata de ce que la version AS3 va faire en termes d'appel d'une classe et de lui transmettre quelques arguments. Maintenant, tu te dis peut-être à toi-même. « Wow, ok, c'est beaucoup plus de code que celui ci-dessus. » Celui ci-dessus vous l'avez seulement en trois lignes, mais nous pouvons en fait rendre cela plus court en vous montrant quelle méthode est chaînage. Mais, avant de faire la version de chaînage de la méthode, parlons juste de certaines choses. La première est, vous n'avez plus besoin de mettre un commentaire parce que vous appelez réellement ce que vous définissez. Donc, vous dites, « Hey, point de mise en page début X numéro. » Donc, évidemment, la ligne 12 définit la position de départ X. Donc, structurer le code de cette façon signifie que vous mettez identifiants à ce que les nombres sont réellement. qui, je pense, rend cela beaucoup plus utile pour les débutants. Non seulement cela, mais vous pourriez dire que vous vouliez définir start X ici, il ne doit pas être cet ordre rigide ci-dessus. Rappelez-vous, je vous ai dit que le premier argument était toujours X start, le second argument était toujours Ystart. Donc, il devait être dans cet ordre. En développant le code de cette façon, vous pouvez spécifier dans n'importe quel ordre que vous voulez réellement, et il se termine que chaque classe a réellement quelques paramètres par défaut. Donc, si vous avez réellement décidé de ne pas écrire X start, Y start, et que vous avez réellement exécuté le code, cela fonctionnerait parce que la classe elle-même a quelques nombres initiaux pour démarrer X et démarrer Y. Donc, à mon avis, c' est un excellent nouvel ajout à HYPE. Cette idée d'aider le débutant comprendre ce que les chiffres sont associés à chaque classe. Maintenant, revenons à, « Josh, au-dessus, ce n'est que deux lignes de code et évidemment, c'est beaucoup plus. » La chose intéressante est, est que nous pouvons faire cette méthode chaînage. Donc, si vous voulez, vous pouvez écrire le code de cette façon. Cependant, vous pouvez également écrire le code de cette façon qui est, vous pourriez dire, entier numAssets est égal à 25, et alors vous pourriez dire, hGridLayout est égal à nouveau GridLayout et après avoir fait le paren ouvert de fermeture, vous pourriez dire point start X, vous pouvez alors dire point start Y, vous pouvez alors dire l'espacement des points, puis vous pouvez le terminer avec des colonnes de points. Donc, c'est le chaînage de méthode où vous appelez une méthode , puis enchaîner chacun des arguments que vous voulez passer cette méthode après. Donc, maintenant on revient à utiliser deux lignes de code, d'accord ? Donc, vous dites, « Hé, je veux faire une mise en page, et pointez ça, pointez ça, pointez ça, pointez ça, » et vous pourriez juste continuer. Donc, cette idée d'utiliser le chaînage de méthode, encore une fois, vous pouvez mettre ceci dans n'importe quel ordre ou vous pourriez faire l'espacement d'abord, puis démarrer X et démarrer Y, vous pouvez réorganiser comment vous les écrivez. Ce n'est pas aussi rigide que celui en haut. Maintenant, dans beaucoup de mes exemples, vous pourriez voir quelque chose comme ça, où je commence réellement avec le code de cette façon, mais je fais en fait ceci qui est, je vais mettre le point-virgule de fermeture sur sa propre ligne à la fin, et puis je pourrais faire un retour dur, onglet, onglet, je mets juste des retours et des onglets durs juste pour nettoyer le code, sorte que l'argument est juste un peu plus facile à lire. Cependant, tous les trois fonctionneront, et tous les trois font exactement la même chose. Donc, encore une fois, vous pouvez le faire de cette façon, où vous appelez la mise en page, puis dites argument point de mise en page, argument point de mise en page, argument point de mise en page, ou vous pourriez faire la méthode de chaînage de l'écriture, où vous appelez mise en page, puis enchaîner les arguments après. Ceci évidemment, est la même chose exacte sauf que j'ai mis dans des retours durs et des onglets afin que je puisse juste regarder visuellement le code un peu plus facile. Vous allez voir comme avec certaines classes comme HosCillator, vous pouvez réellement spécifier beaucoup d'arguments dans HosCillator, et si elle a beaucoup d'arguments, cette ligne 20 pourrait en fait être vraiment longue. Si longtemps que je ne vois pas ce qu'il y a à la fin. Donc, faire la ligne 24 à 30 que vous trouverez est ce que je fais souvent, juste parce que cela rend un peu plus facile de regarder visuellement tous les arguments que je passe dans le HGridLayout. D' accord. À ce stade, nous avons fait la première section qui est la configuration de l'environnement. Nous terminons maintenant la deuxième section, qui est juste une introduction à ce qui est HYPE pour le traitement et ce qui, encore une fois, est toute une bibliothèque de choses qui font des choses. Donc, si vous voulez travailler avec la couleur, nous avons un pool de couleurs. Si vous voulez travailler avec des grilles, nous avons une disposition de grille. Donc, c'est une série de classes qui vous aident à faire les choses plus rapidement et plus efficacement afin que vous n'ayez pas à écrire ce code à nouveau. Maintenant, nous allons passer à la section 3. La troisième section est, dessiner des éléments visuels. En fait, nous ne commencerons pas à écrire code réel pour notre projet avant l'étape 4, où nous peignons réellement à l'écran. Donc, l'étape 3, c'est que nous allons dessiner nos atouts visuels. Donc, nous allons basculer vers le dessin de quelques illustrations. Comment préparons-nous cette œuvre d'art ? Ensuite, nous allons enregistrer cette œuvre sur le côté parce que lorsque nous allons passer à la section 4 peinture à l'écran, nous avons quelques banques d'œuvres d'art avec lesquelles nous pouvons commencer à peindre. Donc, la deuxième section, juste une vue générale universelle de ce qu'est HYPE, comment il va être facile à utiliser, et ensuite, passons à dessiner quelques éléments visuels. Rendez-vous dans la section suivante. 12. Introduction : Dessiner des éléments visuels: Donc le dessin. Vraiment, ce n'est pas compliqué. C' est juste comment préparer l'œuvre que nous allons faire. Le type de programmation que je fais, le type de programmation que nous allons créer ensemble est complètement agnostique de l'art. Donc, c'est la partie qui devient vraiment excitante parce que le programme va générer au hasard une composition basée sur le type d'illustration que vous créez. J' ai eu ceci quand j'étais en Malaisie, et comme penser à ceux-ci, pas à toute la composition, mais pensez à ceux-ci comme des atouts individuels qui pourraient être les dessins que nous faisons qui se peuplent dans la programmation que nous écrivons . Regardez ces trucs, ces deux-là viennent d'Istanbul, en Turquie, et regardez les modèles de ces guerriers. Je peux faire tout ce dessin, mais je peux diviser ça en six atouts différents. Parfois, je n'ai qu'à me laisser inspirer par un dessin, mais je vais diviser ce dessin en six atouts abstraits différents. Plus précisément, je vais les sortir d'Illustrator vers SVG, qui est des graphiques vectoriels évolutifs, parce que nous pouvons tirer ces SVG dans le traitement assez magnifiquement et nous allons utiliser ces dessins pour générer aléatoirement compositions. Tu veux faire quelque chose avec des chatons et des tronçonneuses ? Chatons et tronçonneuses. 13. Dessiner des éléments visuels: Ok, bienvenue à la section 3, Dessiner des actifs visuels. Dans cette section, nous allons parler de la cartographie graphique à la programmation que nous écrivons. Donc, c'est mon genre de pensée depuis des années, des années et des années. Il y a des gens qui n'utilisent que du code pour dessiner les actifs visuels. Donc, par exemple, il y a un énorme groupe de personnes qui dessinent simplement avec des rectangles, des lignes et des ellipses et c'est très bien. Mais le traitement, évidemment, prend en charge le travail avec des images, il prend également en charge le travail avec SVG, Scalable Vector Graphics. Donc, ce que je veux faire est en fait dessiner actifs de base vectorielle que je vais mapper dans ces programmes que nous allons écrire. Ainsi, par exemple, la mise en page de la grille. Pourquoi ne pas faire une grille, mais cette grille est en fait visuellement dessinée à la main ? Donc, en ce moment, tu vois des trucs à l'écran que je vais passer du temps à dessiner. Je suis un monstre total quand il s'agit de traquer l'esthétique et le contenu culturels. On pourrait passer toute cette classe à regarder choses que j'ai rassemblées dans le monde entier. Donc, par exemple, nous allons vérifier cela. Voici un livre gramme 4000 Fleurs et Motifs Plants. Encore une fois, cela est juste rempli de différents motifs végétaux. Pour moi, cela pourrait être un début de départ, un début d'inspiration, ou peut-être qu'il y a des choses ici qui fonctionneront parfaitement comme il est. Donc, je collectionne beaucoup de livres que je suis constamment la chasse d'inspiration. Mais parfois, je m'assois avec un carnet de croquis et j'élabore des idées sur papier. Donc, il y a un motif floral que je viens de dessiner sur du papier. Peut-être que je m'assois et dessine les plantes d'intérieur qui sont dans ma maison. Et encore une fois, je cherche la forme, je cherche la forme, je cherche la texture. Peut-être que je m'assois et que je travaille juste sur des crânes de sucre, et donc, ce sont des crânes. Au début, j'ai été tatoué mais le type initial de planification était juste de dessiner sur papier. Parfois, je pense juste aux formes géométriques. Parfois, je m'assois juste et je pense à des formes géométriques. Ou vous pourriez même aller dehors, et ça vient de l'architecture, donc, il y a un taux d'auvent de fenêtre ici, le numéro de bâtiment était 314. Ce sont des cadres d'une fenêtre, et celui-ci avait un signe. Parfois, je reçois juste des formes d'une vue abstraite de la vie juste autour de moi, dans le cas de cette architecture d'être. J' ai passé un super voyage à Istanbul, en Turquie. Donc le dernier projet que j'ai fait était basé sur ces guerriers que j'ai fini par acheter à Istanbul, et juste une sorte de ré-imaginer certaines de ces formes de ces guerriers. Encore une fois, je pense à eux de façon abstraite. Donc, je peux dessiner une composition entière, seulement pour la déchirer en parties abstraites individuelles. Donc, maintenant, vous devriez voir des trucs à l'écran. C' est en fait d'un livre que quelqu'un m'a envoyé en sachant que j'allais paniquer , Ornement National Mongolian. Donc, le scan que vous voyez à l'écran provient en fait de ce livre, et évidemment, je l'ai perdu. Celui-ci n'est que des bananes. Certains des trucs qui sont ici, encore une fois, n' est qu'un début intéressant pour une conversation. Mais c'est un mystère, c'est un mystère. Je dois vous prévenir, je n'ai aucune idée si ça va marcher. Je pense que ça va marcher. Je l'ai fait assez longtemps pour savoir que je pense que ça va marcher. Mais souvent, je m'assois et je dessine des trucs avec la seule intention que je vais le mapper à un programme, et visuellement ça ne marche pas. Donc, il y a ce genre d'essai et d'erreur. Cette page pour moi est assez sûre. C' est ce que vous voyez à l'écran en ce moment. Je pense que cela va très bien marcher. Donc, je l'ai scanné à 150 DPI, et maintenant je vais passer par le processus de dessin. Je veux le vectoriser, et bien sûr, il y a beaucoup d'outils pour créer des vecteurs. Croyez-le ou non, je vais en fait dessiner ceci en utilisant flash, et il y a un tas de raisons pour lesquelles. En fait, j'aime dessiner en Flash, parce que c'est aussi près de main levée que je peux obtenir. Et au début, j'étais un utilisateur à main levée. J' aime cette idée de pouvoir dessiner des lignes vectorielles et des trucs puis couper. Donc, chaque fois qu'une ligne croise réellement, je peux réellement sculpter ou couper ces sections, juste en sélectionnant et en supprimant. Donc, quelque chose qu'Illustrator n'a pas supporté pendant longtemps. Maintenant, il le supporte avec de la peinture vivante, vous pouvez réellement convertir quelque chose en peinture vivante et ensuite vous pouvez passer par le processus de sculpture. Cependant, Illustrator est aussi, pour moi, comme un outil vectoriel incroyable, presque trop incroyable. Flash, à bien des égards, n'est pas incroyable. J' aime ça. J'aime la distorsion que Flash me donne. Donc, vous allez voir dans cette prochaine vidéo, je vais probablement faire un truc de laps de temps, ou vous allez me voir dessiner très rapidement pour que vous puissiez voir comment je vectorise une de ces pièces. Mais ce que j'aime dans Flash, c'est que, je vais utiliser l'outil crayon et je vais utiliser une tablette Wacom, et les lignes ne sont pas parfaites. Vous pouvez voir comme si je vais tracer une ligne et ils seront beaucoup de distorsion dans la ligne, et en fait j'aime ça. J' aime que ce n'est pas parfait, parce qu'il lui donne plus de ce sentiment de dessin de la main à elle. J' ai beaucoup parlé de disques. J' ai toujours un disque dans le studio, j'ai des disques qui traînent ici. Et il y a en fait une chaleur analogique aux enregistrements, que l'audio numérique n'aura jamais. Je veux dire, on peut avoir cette dispute, mais c'est la vérité. J' aime que j'ai ce processus vraiment technique pour générer la composition avec la programmation, mais c'est en utilisant des actifs qui ne sont pas parfaits. Ils utilisent des actifs dessinés à la main. Si je veux faire un cercle, parfois je dessine ce cercle à la main, sorte que ce cercle n'est pas un cercle parfait. Je n'aime pas utiliser l'outil stylo pour faire des courbes bezier parfaites, c'est trop propre pour moi. J' aime la distorsion, j'aime que ma main secoue, j'aime ce genre de, c'est symétrique mais c'est dessiné à la main, puis prendre ces actifs dessinés à la main et les mettre dans une situation très immaculée et ordonnée, comme programmation. Alors, prochaine vidéo, je vais passer à la tablette Wacom. Je ne vais probablement pas avoir d'audio allumé. Donc, l'écran que vous voyez en ce moment est un antique de Wacom, et je vais l'utiliser pour dessiner. Aussi, je ramasse ce qui est génial, et c'est un gant qui est fait spécifiquement pour travailler sur cette antiquité, parce que cette antiquité est un moniteur et il chauffe. Ce qui se passera, c'est que ma main aura tendance à coller. Donc, ce qui est bien, c'est que cela me permet de faire courbes sans avoir à m'inquiéter de ma main coller à l'écran. Donc, si vous êtes un utilisateur de Wacom, je recommande fortement le gant, le gant de puissance, parce que vous pouvez obtenir ces belles courbes fluides sans que votre main ne colle réellement à la surface. Que ce soit cet antique ou même si c'est juste une tablette Wacom régulière, la capacité de ne pas coller à la surface et faire ce genre de courbes agréables, est super utile. Donc, je recommande le gant. Donc, la prochaine vidéo, pas d'audio, temps écoulé, et nous allons créer un de ces atouts. Je veux que vous regardiez comment j'utilise Flash pour recouper et sculpter ces dessins que je vais faire. Maintenant, je vais terminer cette vidéo avec, vous devriez penser à quels actifs visuels voulez-vous utiliser pour mapper à cet environnement ? Encore une fois, il peut être floral, il peut être organique, il peut être géométrique. Je vais évidemment mettre quelques éléments à votre disposition, afin que vous puissiez voir certains des dessins que je fais. Ils seront attachés aux étapes du projet en tant que téléchargement de fichiers zip. Mais vous devriez penser, « Josh va nous enseigner cette programmation, et cette programmation veut attacher des choses à l'écran, quelles sont les choses qui sont attachées ? » Ce sera des dessins que vous faites. Et c'est là que l'individualité va vraiment se manifester avec tous les trucs soumis par la classe, parce que la programmation va utiliser vos actifs, programmation va utiliser mes actifs, ainsi de suite et ainsi de suite. Donc, chaque pièce doit être unique, car chacun de vous va mapper différents actifs dans cet environnement. Alors, regardez-moi dessiner, et réfléchissez ce que vous allez faire pour cartographier dans cet environnement. D' accord ? On se voit dans la prochaine vidéo. 14. Dessiner des abstractions: Je voulais juste prendre une minute pour montrer cette image à l'écran. Voici un exemple parfait d'un point de départ d'inspiration qui est abstrait. Donc, par exemple, c'est ce voyage à Istanbul. Donc, je finis par redessiner ce gars, mais peut-être que ça devient un de mes atouts visuels qui font partie de son bras. Remarquez que je n'utilise pas les visages. Je ne veux pas utiliser un type d'imagerie qui devienne reconnaissable, où vous allez « Oh, c'est un visage ». Je peux changer, mais j'essaie de garder mes affaires abstraites pour que tu ne saches pas d'abord ce que tu regardes. Regardez cette forme indépendante juste ici qui se trouve être une sélection de ce torse. Donc, parfois, vous pouvez prendre un dessin et casser ce dessin en six actifs différents, ou cinq actifs différents, ou n'importe quoi. Donc, gardez cela à l'esprit, que quand je dis chercher des images pour se transformer en actifs, ça pourrait être une seule image. Ensuite, cette image, vous pourriez se séparer en fichiers SVG indépendants séparés. Donc, encore une fois, ceci n'est qu'un exemple rapide de la façon dont un dessin ou deux dessins deviennent mon contenu. D'accord. 15. Dessiner un time-lapse: - Bien. - D'accord. 16. Préparation des ressources finales: D' accord. Donc vous venez de regarder la vidéo précédente qui était un time-lapse de dessin. Vous devriez voir à l'écran maintenant l'œuvre que nous avons dessinée. Maintenant, vous avez peut-être remarqué dans le time-lapse, j'ai commencé à bloquer une certaine couleur dans le dessin que j'ai fait. Je le fais parce que cela m'aide à organiser comment je veux que les choses soient bloquées en termes de couleur. D' accord. Donc, par exemple, comme peut-être ces formes particulières ici, je veux tous être de la même couleur. Donc, j'ai déjà fait un blocage initial en niveaux de gris. Maintenant, j'ai besoin de sortir ceci de Flash et de le mettre dans Illustrator afin que je puisse le sortir dans un fichier SVG. Maintenant, si vous ne dessinez pas du tout dans Flash, si vous dessinez simplement dans Illustrator, vous pouvez évidemment ignorer toute cette série d'étapes suivantes. Mais ce que je vais faire est en fait mettre en évidence le dessin que je viens de faire dans Flash et ensuite je vais aller de l'avant et dire Fichier, Exporter, Exporter la sélection, et quand je dis Exporter la sélection, il va vouloir l'enregistrer en tant que fichier FXG. Ok, et je vais y aller et mettre ça sur mon bureau. Maintenant, après avoir fait cela, je peux aller de l'avant et minimiser Flash ou je peux le fermer, et vous verrez ici sur mon bureau, j'ai obtenu FMLA et j'ai ce fichier FXG. Maintenant, il se trouve que vous pouvez ouvrir ce FXG à l'intérieur d'Illustrator, et quand je le fais, je peux voir qu'il a sorti toutes les informations vectorielles. Alors, laissez-moi juste nettoyer ce document, laissez-moi aller aux tableaux d'art et je vais en faire une largeur de 300 et une hauteur de 300, et je vais simplement centrer, essayer encore une fois, Josh. Essayez encore, une fois. Laisse-moi juste centrer ça comme ça. D' accord. Encore une fois si, je devais cliquer sur Afficher le plan, vous verrez qu'il s'agit de toutes les informations vectorielles. D' accord. Maintenant, la chose sur laquelle je veux que vous vous concentriez à ce stade, c'est en fait la palette des couches, parce que c'est super important. Vous remarquerez peut-être qu'il y a sept couches à l'intérieur d'Illustrator et que les couches sont en fait des chemins composés. Si vous deviez masquer chaque calque et les regarder chacun indépendamment, vous verrez que le regroupement, il est passé et il est regroupé toutes les couleurs individuelles que j'ai définies dans Flash. Donc, c'est important, comme vous pouvez le voir ici toutes les formes que j'ai faites ce gris foncé particulier ont toutes été regroupées en un seul chemin composé. D' accord. Maintenant, une autre chose que vous devez prendre note est que la couche supérieure est généralement toujours les données de course. Donc, les remplissages ou en fait les six derniers, le haut est cette information de course. Maintenant, à ce stade, je peux aller de l'avant et cliquer sur « Enregistrer sous » et je peux enregistrer ceci en tant que document SVG. Donc, à partir du format, vous sélectionnez simplement le SVG et je vais aller de l'avant et mettre cela sur mon bureau et cliquez sur « Enregistrer ». Vous obtiendrez cette palette d'options qui s'ouvre, vous pouvez réellement ignorer toutes ces choses et simplement cliquer sur « OK ». Maintenant, je vais fermer ce document et maintenant j'ai un document SVG sur mon bureau. Alors, qu'est-ce que SVG ? Eh bien, vous pouvez faire glisser ceci vers Sublime Text 2, et vous verrez très rapidement qu'un document SVG est en fait un fichier texte. Il s'agit d'un fichier texte qui contient toutes les données ponctuelles qui composent l'illustration particulière que vous avez vue à l'écran. Donc, encore une fois, super important de noter qu'un SVG est un document texte. D' accord. Donc, ce que j'ai fait, c'est dans cette section, nous parlons juste de dessiner des actifs visuels. Dans la section suivante, nous allons parler de la peinture à l'écran, comment peindre des choses à l'écran, et dans la cinquième section, nous allons parler de travailler avec la couleur. Donc, c'est vraiment une section connue que je commence vraiment à parler de code, mais j'ai besoin de partager du code avec vous en ce moment et je vais en fait joindre un fichier à cette vidéo particulière parce que nous n'avons pas fini de préparer le parce que vous allez remarquer que si nous venons de passer ces étapes, tirer dans Illustrator, nous allons remarquer des événements étranges. Alors, regarde ce que j'ai fait ici. J' ai créé un dossier sur mon bureau appelé Mongo 1, j'ai créé un dossier appelé Build. À l'intérieur de Build, comme mon PDE de et mon hype PDE, puis j'ai créé un autre dossier appelé données, et c'est en fait dans le dossier de données que vous mettez vos actifs externes. Donc, dans ce cas, voici Mongo.SVG. Maintenant, si je devais ouvrir ce fichier PDE, j'ai écrit des trucs. D' accord. J'ai écrit que je veux que la scène soit 900 par 900, j'ai spécifié l'arrière-plan, est un gris clair, j'ai en fait spécifié une sélection de couleurs que je veux que ce fichier utilise. Voici le blanc, il y a trois gris, il y a deux bleus et il y a deux oranges. Ce bloc de code particulier ici gère le chargement et l'attachement du fichier SVG externe. J' ai dit que je veux que le poids du coup soit 0,5, j'ai dit que je veux que la couleur du trait soit noire. Je ne veux pas de Phil, je veux que le point d'ancrage de l'œuvre soit au centre. J' ai spécifié son emplacement pour être attaché au centre, donc largeur divisée par deux, hauteur divisée par deux. Maintenant, l'œuvre est petite, donc je l'ai mise à l'échelle trois pour qu'elle soit juste un peu plus grande. L' échelle 1 est évidemment de 100%, l'échelle trois étant de 300%. Maintenant, la ligne 19 est l'endroit où nous parcourons l'œuvre et définissons un peu de couleur sur seulement les phils. Maintenant, je vais juste commenter cela parce que je veux réellement exécuter ce fichier et je veux regarder ce qui se passe. Maintenant, quand vous exécutez ce fichier, super, regardez il a fait exactement ce que je pensais qu'il allait faire, c'est-à-dire, il a chargé dans le fichier SVG, il l'a attaché au centre de l'écran, il a l'air identique comme il le fait à l'intérieur de le fichier Illustrator. Maintenant, ce n'est pas avant que nous commencions à appliquer des couleurs aléatoires que nous commençons à remarquer que nous devons faire plus de préparation à l'intérieur d'Illustrator. Donc, je vais aller de l'avant et remettre ce commentaire sur lequel est appliquer la couleur aléatoire à juste les remplissages. D' accord. Maintenant, regardez ce qui se passe quand je lance ce fichier particulier. Quand je lance ce fichier, il flippe. Je ne comprends pas ce qui se passe, comme si ça faisait un blocage bizarre ici, quelque chose de vraiment funky s'est passé dans cette section. Quelque chose ne va pas. D' accord. Donc, je vais fermer ce dossier et retourner à l'Illustrator. Donc, si je vais dans Mongo, allez dans Build, allez dans mon dossier de données, il y a Mongo.SVG et je vais aller de l'avant et ouvrir cette sauvegarde dans Illustrator. D'accord. Voilà mon intrigue. Ouvrons la Palette des calques, et laissez-moi essayer d'expliquer cela. Lorsqu' il est exporté vers SVG, ce document SVG contient toutes les informations vectorielles de toutes les illustrations affichées à l'écran. Donc, si, et peu importe, cette information vectorielle n'a pas d'importance que vous ayez défini un remplissage ou défini un trait. Définissez un poids de trait, définissez une couleur de trait, définissez une couleur de remplissage. Oublie tout ça. Tout ce qu'il contient est les points pour dessiner cette œuvre. Maintenant, la partie qui flippe en ce moment est en fait la couche supérieure du coup. La raison pour laquelle les traits flippent est parce que cette couche supérieure est juste des traits et quand vous chargez ceci dans le traitement et dites, « Hé, je veux faire un remplissage aléatoire », il pense, « Oh vous voulez faire des remplissages sur tout le vecteur informations. » Donc, ce qu'il fait, c'est qu'il essaie d'appliquer la couleur de remplissage à cette sortie de trait. Donc, ce que je vais faire, c'est dépouiller cette couche. Donc, tout ce qu'il me reste sur mes couches, c'est ce qui semble être juste des remplissages. Maintenant, si je vais de l'avant et cliquez sur Enregistrer et laissez-moi simplement déplacer ceci le côté et revenons réellement à notre code et maintenant nous allons l'exécuter, voyons ce qui se passe. Boum ! Cela fonctionne totalement comme prévu parce que ce qu'il fait est, il applique de la couleur au hasard aux remplissages. Mais vous pourriez dire : « Attendez une seconde Josh. Pourquoi les coups sont-ils revenus ? » Eh bien, les coups sont revenus parce que nous avons spécifié les coups juste ici sur les lignes 11 et 12. Sur la ligne 11 et sur la ligne 12, vous avez dit : « Hé, ces remplissages que vous avez, ces remplissages que vous avez qui n'ont pas d'accident vasculaire cérébral. Oui, je veux des coups sur eux. » Donne-moi un poids de 0,5 coup, donne-moi une couleur de trait de noir. Donc, même si l'illustration dans Illustrator est juste remplie. En fait, j'applique un coup sur ces remplissages, à l'intérieur du traitement. Donc, c'était cette couche supérieure qui avait les informations de tracé qui a commencé à paniquer parce qu'elle essayait réellement d'appliquer des remplissages aléatoires à ce chemin composé. Donc, en le supprimant, je reviens là où je voulais être. Maintenant, vous remarquerez peut-être qu'elle est également appliquée symétriquement à l'ensemble de l'illustration. D'accord. Donc, par exemple, c'est bleu clair, c'est bleu clair, c'est bleu clair, et ce même bleu clair est exactement sur celui-ci, sur celui-ci, et sur celui-ci, d'accord. Laisse-moi aller de l'avant et clore ça et laisse-moi revenir à Illustrator. Maintenant, laissez-moi regarder cet ensemble particulier de couleurs et c'est en fait ce chemin composé juste ici. Donc, si je devais faire ça, nous regardons maintenant toutes les illustrations qui ont la même couleur exacte. En fait, parce que c'est juste un chemin composé, il s'applique simplement, il pense juste que c'est une œuvre d'art. Donc, il a effectivement appliqué une couleur à ce qu'il pense être juste une œuvre d'art. Donc, regardez ce qui se passe quand je viens à Object et dis Path composé et dis Release. Relâchez-le d'être une forme, quand je l'ai libérée d'être une forme, regardez ce qui arrive à la palette de calques. Il s'est détaché du chemin composé et traite maintenant chacun de ces éléments comme des œuvres d'art indépendantes. Donc, maintenant si je devais allumer tous mes autres remplissages ici. Enregistrez mon document SVG, basculez sur mon code et cliquez sur Exécuter, regardez ce qui se passe. Ce qu'il fait maintenant, c'est qu'il dit : « Oh, mec. C' est un tas de formes indépendantes donc je vais les colorer chacune indépendamment. Maintenant, pour les couleurs, j'ai 1, 2, 3, 4, 5, 6, 7, 8. J' ai huit couleurs, donc je n'ai pas beaucoup de couleurs. Donc, si vous regardez ici, il semble qu'il ait choisi la même couleur, mais je peux vous dire maintenant que c'est FFFF et c'est F7F7F7, c'est légèrement différent. Regardez, il a fait ces deux couleurs différentes, il a fait ces deux couleurs différentes parce que ce regroupement comme un chemin composé traitait cette œuvre comme une seule œuvre d'art et donc, qu'une œuvre d'art vient d'obtenir un morceau de coloriage. Donc, si je fermais ceci et que je revenais à Illustrator, vous pouvez imaginer que si j'ai sélectionné tous ces chemins composés, puis que je suis allé à Object, Compound Path et Release, tout d'un coup vos calques palette va paniquer. Parce que maintenant, chaque forme est une œuvre d'art indépendante. Maintenant, si je clique sur Enregistrer, bascule vers ce document et que je l'exécute à nouveau, vous n'auriez aucune symétrie de couleur du tout. Parce qu'il pense que toutes ces formes sont indépendantes et parce que toutes ces formes sont indépendantes, elles vont toutes être colorées différemment. D' accord. Donc, vraiment super important de garder en considération pendant que vous préparez ces actifs visuels parce que si le groupe est juste chemin composé, vous allez obtenir cette coloration universelle. Si vous les divisez tous en éléments distincts, vous obtenez une situation de couleur non harmonieuse car elle pense que chacune de ces formes est différente. Maintenant, vous pourriez dire, « Eh bien Josh, comment puis-je casser toutes ces choses et ensuite comment puis-je appliquer, colorer deux objets spécifiques ? » Donc, revenons à l'illustrateur et regardons quelque chose. Regarde cette forme, cette forme, cette forme, cette forme, cette- woah là, whoa. Essayons encore ça. Essayons encore ça dubby. Oh, j'ai brisé mes chemins composés. Essaie encore Josh. Je viens de sortir le chemin composé parce que tu as annulé. D'accord. Donc, ce que je fais, c'est sélectionner, comme ça. Donc maintenant, en fait ici, je peux juste le faire comme ça ? Oui, nous y allons, beaucoup mieux, c'est beaucoup plus facile. D'accord. Oups. On y va. Il y a en fait deux formes distinctes ici que je n'obtenais pas. D'accord. Donc, ce que j'ai fait, c'est que j'utilise l'outil de sélection juste pour sélectionner toutes les illustrations qui m'intéressent. Donc, si nous regardons ici dans la Palette des calques, un tas de choses sont mises en surbrillance. Maintenant, tout ce que je vais faire, c'est les regrouper. Si je fais la commande G et que je regroupe tout cela comme une œuvre d'art. Allez-y et cliquez sur Enregistrer, basculez sur mon code et exécutez-le. Vous remarquerez maintenant qu'une couleur a été appliquée à ces huit formes. Droit ? Donc, orange, orange, orange, orange, orange, orange, orange, orange, orange, orange. Donc, super important à prendre en considération pendant que vous préparez vos éléments visuels, c'est que si toutes les formes sont indépendantes, elles seront colorées indépendamment. Si vous commencez à regrouper les choses, par exemple, si vous faisiez un visage et les parties intérieures des yeux étaient des atouts distincts, vous auriez David Bowie. Tu deviendrais bleu, tu deviendrais vert, tu aurais David Bowie. Ça pourrait être bon. Peut-être que tu veux David Bowie. Si vous les regroupez, vous obtiendrez la même couleur dans les deux yeux. D'accord. Donc, rappelez-vous ceci, quand vous préparez vos actifs visuels, qui gardent les choses séparées, toute la couleur va être séparée. Mais parce que j'aime une certaine harmonie pour rester cohérente à travers ma randomisation, je fais en fait ce regroupement de formes. Donc, de cette façon, je sais que lorsque le code s'exécute et que la couleur est appliquée, tous vont obtenir la même couleur exacte sur tous. Cette section est terminée, nous allons réellement commencer à écrire du code maintenant. Douleur mais vrai. Donc, nous allons passer à la peinture à l'écran et nous allons commencer à parler de la façon de commencer à écrire du code simple. Nous ne commencerons pas à attacher SVG dès le début. Nous allons commencer avec des ellipses et des rectangles, puis finalement, nous allons passer à attacher SVG. On se voit dans la prochaine vidéo. 17. Introduction : Peindre à l'écran: Dans la dernière section, nous avons parlé de faire des dessins et de les préparer. Dans cette section particulière, je veux parler de la peinture à l'écran et comment peindre des objets à l'écran. Je viens de Flash. J' ai passé 10 ans à travailler dans Flash, et c'est assez différent que nous devrions passer une section à en parler. Comment dessiner des choses à l'écran parce que c'est très différent façon dont nous avions l'habitude de dessiner des choses à l'écran dans l'environnement Flash ? Non seulement cela, mais le traitement a certaines limites quant à la façon dont nous dessinons les choses à l'écran. Donc, encore une fois, un excellent moment pour présenter comment nous peignons réellement des choses à filtrer en utilisant HYPE Framework. Faire des choses comme HRectangle, Hellipse, HShape, HImage. Faire des trucs 3D comme HBox et HSphere. Donc, nous allons vraiment plonger dans la façon de faire ces choses et ensuite comment les peindre à écran et ce qui se passe réellement lorsque vous peignez à l'écran. 18. Bases / Lignes et rectangles: Êtes-vous prêt à faire du rock ? Oui, je suis prêt à faire du rock. Nous sommes dans la section quatre, peinture à l'écran. C' est là que nous allons juste élaborer quelques bases, nous allons écrire un peu de code, et nous allons comprendre comment fonctionne le traitement, pourquoi nous sommes frustrés par certains aspects de celui-ci, et introduire la hauteur. Donc, nous allons juste écrire un peu de code de base pour les débutants, pour vous aider à commencer. Maintenant, je vais créer un nouveau dossier. Appelons ce dossier Basics. À l'intérieur de Basics, je vais créer un nouveau dossier appelé Étape 1. À l'intérieur de l'étape 1, je vais faire un dossier appelé Build, et puis j' ouvrirai Sublime Text Deux, je vais changer ceci pour être, disons, Enregistrer, Bureau, Basics, Étape 1, Construire, et appelons ceci build.pde. Lorsque je fais cela, le côté inférieur droit devrait passer à Traitement. Maintenant, pour commencer, je vais nous demander d'écrire cinq fichiers différents. Donc, vous remarquerez ici que, prenons juste ce gars, et remarquez que, nous allons faire Basics, Étape 1, Construire, Build.pde. Build.pde est l'endroit où nous allons écrire tout notre code. On va travailler sur cinq dossiers en ce moment. Alors, regarde ce que je vais faire. Je vais juste maintenir la touche Option, ou la touche Alt, et je vais juste cliquer et faire glisser, il y a l'étape deux, l' étape trois, l'étape quatre, l'étape cinq. On va travailler sur cinq dossiers différents. La bonne chose est que dans chacun d'entre eux est Build, et build.pde. Donc, nous avons cette structure de base qui se passe, ce qui est sympa. D' accord. Laisse-moi juste jeter ça dans le coin inférieur droit. Allons de l'avant et écrivons notre tout premier fichier de traitement. Maintenant, c'est comme l'exercice Hello World pour chaque document de traitement. Ce que tu vas faire, c'est que tu vas taper « Vide Setup », ouvrir « Paren », fermer « Paren », et nous allons simplement faire une ligne. Donc, disons, ligne, nous allons commencer à 25 sur l'axe X, 25 sur l'axe Y. Donc, c'est le premier point de la ligne, et maintenant nous voulons dessiner le deuxième point de la ligne, et le deuxième point de la ligne sera 75 sur l'axe des x, et 75 sur l'axe des y. Un point-virgule et on a fini. Donc, si j'enregistre réellement ce document, puis appuyez sur Commande R pour construire, ce que vous devriez remarquer est que Java démarre, et bien sûr, il y a notre toute première esquisse. Donc, nous avons spécifié les deux premiers points, x et y, 25, 25, et le deuxième point 75, 75, et parce que nous avons spécifié la ligne, il a juste tracé une ligne entre ces deux points, qui ont été spécifiés. D' accord. Alors, bien. Nous avons fait notre premier croquis. Donc, je vais aller de l'avant et fermer ce document, et je vais passer à l'étape 2. Passez à l'étape deux, en allant ouvrir build.pde. Trouvons quelques façons de rendre l'écriture de ce code un peu plus rapide. Ainsi, à l'intérieur de Sublime Text Two, vous pouvez taper S E T, et vous remarquerez que la configuration est mise en surbrillance. Donc, si je vais juste de l'avant et appuie sur Entrée, il crache automatiquement tout le code que nous venons de taper dans notre fichier précédent. Maintenant, lorsque vous tapez setup, il vous donnera deux fonctions, setup et draw. L'installation s'exécute une fois. C' est là que vous configurez toutes vos informations, comme les actifs num sont égaux à 100. C' est là que vous spécifiez toutes vos choses préparatoires comme les variables, et ainsi de suite et ainsi de suite. Dessiner est votre boucle, c'est ce qui se passe, et encore, et encore. Donc, si vous vouliez de l'animation, la fonction de dessin est l'endroit où vous spécifiez réellement comment les choses devraient animer à l'écran. Mais encore une fois, nous ne faisons pas d'animation pour l'instant. Donc, nous allons aller de l'avant et supprimer la fonction de dessin. Maintenant, je veux aller de l'avant et faire un rectangle dans cet exercice. Alors, allez-y et tapez rect. Encore une fois, vous remarquerez qu'il démarre automatiquement. Donc, je vais aller de l'avant et appuyer sur Retour. Notez que la première variable est mise en surbrillance, elle veut connaître x, y, largeur et hauteur. Donc, je vais aller de l'avant et dire, commencer à 25 sur l'axe des x, onglet, 25 sur l'axe des y, onglet, la largeur devrait être 50, onglet, et la hauteur devrait vous 50. » Maintenant, en utilisant cette fonctionnalité de raccourci extraits à l'intérieur du traitement, signifie juste que nous pouvons écrire du code beaucoup plus facilement au lieu d'avoir à écrire des choses encore, et encore, et encore. Cliquez sur Enregistrer, commande R pour construire, et vous devriez remarquer que vous obtenez un rectangle au centre de votre écran. Il a quelques valeurs par défaut. Il a un trait noir, il a un remplissage blanc, ainsi de suite et ainsi de suite. D' accord. Prenons le temps maintenant de passer à la prochaine vidéo où nous commençons à ajouter quelques améliorations souhaitées, et quelques frustrations que nous rencontrerons lors de l'ajout de ces améliorations, et peut-être avoir une plus grande idée de ce qui est réellement qui se passe lorsque vous peignez à l'écran. On se voit dans la vidéo suivante. 19. Bases / Rotation: D' accord. Dans cette vidéo, ajoutons quelques améliorations à nos esquisses de base que nous réalisons pour mieux comprendre comment le traitement peint réellement à l'écran. Donc, dans les bases, étape trois, construire, je vais aller de l'avant et ouvrir build.pde. Maintenant, je vais aller de l'avant et taper la configuration. Je vais supprimer la fonction de dessin. Je vais ajouter quelque chose de nouveau. Je vais changer la largeur et la hauteur de mon croquis. Donc, je vais aller de l'avant et dire, « Taille 600 pixels par 600 pixels. » Donc, maintenant ma scène serait 600 par 600. Maintenant, je vais aller de l'avant et spécifier mon rectangle, mais cette fois je vais dire, « 100 sur l'axe des x, 100 sur l'axe des y, avec une largeur de 50 et une hauteur de 50. » Maintenant, si j'appuie sur la commande R et construit mon fichier, encore une fois, je devrais voir mon croquis de 600 par 600 avec le rectangle à la position désirée, et la largeur désirée, et la hauteur désirée. Maintenant, c'est à ce moment que j'ai décidé, « Eh bien, j'aimerais faire pivoter ce rectangle. J' aimerais faire pivoter ce rectangle de 45 degrés. » Donc, je n'étais pas sûr de savoir comment faire ça. Je n'étais pas tout à fait sûr de savoir comment parler au rectangle et le faire pivoter. En fait, vous ne le faites pas. Tu ne parles pas du tout au rectangle. Le rectangle n'est même pas un objet auquel vous pouvez parler. Alors, comment puis-je effectuer une rotation ? Eh bien, ça finit par faire tourner toute l'étape du croquis. Donc, si je devais entrer ici et écrire tourner, et spécifier 45 degrés, et si vous deviez enregistrer et exécuter ceci, vous remarqueriez que votre rectangle est maintenant manquant. Donc, alors j'ai dû faire un peu plus de lecture pour comprendre que pour utiliser la rotation et si vous vouliez faire pivoter 45 degrés, vous deviez spécifier ce nombre en radians. Donc si je devais revenir en arrière et dire, « Rotate », alors tu devrais appeler radians, et en radians tu pourrais passer le numéro 45. Maintenant, si je garde et construit mon film, je peux maintenant voir que ma place est à gauche. Pourquoi ça se passe ? Encore une fois, j'avais du mal comprendre comment peindre des choses spécifiques. Donc, j'avais besoin d'essayer quelques tests. Laissez-moi vous montrer les tests que j'ai fini par mener pour avoir une meilleure idée de la façon dont le traitement peint réellement à l'écran. Passons donc à l'étape 4. Étape quatre, build, build.pde, encore une fois, je vais aller de l'avant et tapez configuration. Je vais supprimer la fonction de dessin, et à l'intérieur de la configuration, je vais spécifier la taille 600 par 600, et je vais aller de l'avant et dire, « Rotation radians, disons 10. » Donc, maintenant je ne tourne que 10 degrés. Maintenant, ce que je veux faire, c'est dire un rectangle, mais cette fois, je vais changer l'axe X. Je vais dire 400, 100 avec une largeur de 50 et une hauteur de 50. Maintenant, l'expérience que je voulais mener était, que se passe-t-il si j'en avais cinq à l'écran ? Donc, puisque j'en ai un, je vais y aller et juste copier ces deux lignes, et je vais coller jusqu'à ce que j'en ai cinq. Donc, maintenant j'ai cinq instances de cette rotation et rectangle, et j'étais juste curieux de voir ce qui allait se passer. Alors j'ai sauvé mon film, je le construit, et je comprends ça. Donc, j'ai commencé à mieux comprendre que ce qui se passait dans ce dossier était, si je prends une feuille de papier, c'est qu'il prenait la scène, voici zéro, zéro, pour vous les gars, et ça tournait 10 degrés puis dessinait le carré . Puis il tournait à nouveau 10 degrés et dessinait le carré suivant. Il faisait ça cinq fois. Donc, j'ai commencé à mieux comprendre que je faisais tourner le monde, attacher la place, tourner le monde, attacher la place, et j'ai commencé à obtenir ce genre de forme. Alors, passons à un autre test. Encore une fois, je veux une meilleure idée de ce qui se passe ici. Juste pour le diable, ouais, on écrira à nouveau le code. Je vais aller de l'avant et fermer ceci, je vais passer à l'étape cinq, construire, build.pde. Encore une fois, je vais aller de l'avant et faire la configuration, je vais supprimer la fonction de dessin. Je vais venir ici, et je vais configurer ma taille. Maintenant, je vais faire quelque chose d'un peu différent. Ce que je veux faire différemment, c'est que je veux une représentation visuelle de la scène. Alors, que se passerait-il si j'ai tapé rectangle et que je disais que l'axe des x était zéro, l'axe des y était zéro, puis la largeur était 600 et la hauteur était 600 ? Ainsi, la largeur et la hauteur étaient de la même taille exacte que la taille de la scène. Je veux juste tester le film et voir ce qui se passe. Donc, je le teste et visuellement, il semble que c'est le coup sur mes rectangles. Donc oui, je pense que ça marche. Je pense que j'ai un rectangle qui est fondamentalement la taille de ma scène. Et si je prenais ça et le copiais cinq fois ? Deux, trois, quatre, cinq. Maintenant, la prochaine chose que je veux faire, c' est que je veux dire qu'il n'y a pas de remplissage. Je veux juste regarder le rectangle sans remplissage, juste un trait. Donc, je vais aller de l'avant et dire, « Pas de remplissage ». Je vais ensuite copier ça, deux, trois, quatre, cinq. Alors ce que je veux faire, c'est que je veux regarder cette rotation. Donc, je vais aller de l'avant et dire, « Rotation radians ». Mais cette fois, je vais dire, « 10 ». Ensuite, je vais copier pour que je l'aie devant les cinq rectangles. Maintenant, si je continue de sauvegarder et de construire le film, vous commencez à obtenir une représentation visuelle de ce qui se passe, c'est-à-dire je tourne toute la scène de 10 degrés parce que, encore une fois, zéro, zéro est toujours le même endroit exact, mon rectangle est 600 par 600, et je peux voir que ce que je fais est, c'est tourner le monde entier, attacher ce rectangle, tourner 10 degrés, ainsi de suite et ainsi de suite. Donc, en fait, si je devais ajouter ce petit dos carré, je pourrais dire quelque chose comme ça, je pourrais dire, « Le remplissage est blanc », et ce rectangle que nous avions initialement était à un axe x de 400, un axe y de 100 avec une largeur de 50 et une hauteur de 50. Maintenant, si j'ai copié ce remplissage, et encore une fois, collé quatre fois, puis enregistré et construit mon film, vous pouvez maintenant voir ce rectangle initial, c'est la taille de la largeur et de la hauteur qui tournent, mais Maintenant, j'ai une compréhension de tout. Donc, c'est comme ça que ça crée cette courbe. Passons à la vidéo suivante et commençons à corriger certains de ces ennuis en apprenant push matrix et pop matrix et comprenant comment réinitialiser la scène après avoir attaché quelque chose pour que nous puissions vraiment revenir à peut-être construire un rangée de rectangles, et ces rectangles sont tournés de 45 degrés. Donc, je veux réparer ça. Je veux prendre ces cinq, et en fait les mettre dans une rangée, et les faire tourner à 45 degrés. Alors, on se voit dans la prochaine vidéo. 20. Bases / pushMatrix et popMatrix: Donc, corrigeons certains de ces ennuis dans les étapes de base avec l'apprentissage PushMatrix et PopMatrix. Donc, je vais aller de l'avant et créer un nouveau dossier appelé matrice, et à l'intérieur de matrice, je vais aller de l'avant et faire un fichier appelé étape 1. Maintenant, sur cette affaire, nous allons aussi faire cinq fichiers, mais je veux muter ce fichier au fur et à mesure que je progresse. Donc, maintenant, nous allons juste travailler à l'étape 1, puis nous copierons et apporterons des modifications au fur et à mesure. Maintenant, à l'intérieur d'une étape 1, je vais faire un dossier appelé build. Je vais aller de l'avant et commencer un document vide dans Sublime Text 2, et je vais enregistrer cela sur ma matrice de bureau étape une construction et nous allons juste appeler ce build.pde. Allons de l'avant et commençons à écrire le même code que nous l'avons fait auparavant, mais faisons quelques changements. Donc, je vais de l'avant et tapez configuration, je vais de l'avant et retirer le tirage au sort. Je vais aller de l'avant et spécifier les tailles 600 par 600. Et qu'est-ce que PushMatrix, PopMatrix ? Donc, si vous vous souvenez dans le précédent, si vous attachez cinq carrés, il tournait le monde attachant le carré, tournant le monde à nouveau attachant le carré. Ce que PushMatrix et PopMatrix font, c'est qu'il dit, regardez ce qui se passe à l'écran, faites des trucs, et quand vous avez fini de faire ça, remettez-le comme ça n'avait jamais été fait auparavant. Réinitialiser. D' accord ? Donc, c'est ce que font PushMatrix et PopMatrix. Alors, regarde ce qui va se passer ici. Je vais aller de l'avant et dire PushMatrix. Donne-moi quelques retours durs et tapez PopMatrix, ok ? Maintenant, parce que PushMatrix et PopMatrix se souviennent de ce qui se passe, libérez ce qui se passe comme il était. J' aime en fait mettre un autre onglet dans le PushMatrix et PopMatrix afin que je puisse voir que quoi que ce soit entre ces deux se passe à ce moment et puis il est en cours de réinitialisation. Alors, allons de l'avant et mettons notre rotation, allons de l'avant et mettons nos radians de 45 degrés, et allons de l'avant et dessinons notre rectangle. Mettons celui-ci sur un axe X de 100, un axe Y de 100, et une largeur de 50 et une hauteur de 50, d'accord ? Maintenant, si j'appuie sur la commande R et que je construis ce fichier, je devrais revenir à ce scénario bizarre où mon rectangle est tout le chemin vers la gauche. Maintenant, si je devais copier ces quatre lignes de code et les coller quatre fois de plus. Deux, trois, quatre, cinq. J' ai maintenant cinq instances de PushMatrix PopMatrix rotation et rectangle, mais changeons l'axe des X pour chacun d'entre eux. Donc, allons de l'avant et disons que ce rectangle particulier sera dans un axe X de 200, le suivant sera 300, le suivant sera 400, et le dernier sera 500. Maintenant, si je teste ce film, vous remarquerez qu'il le fait maintenant dans la rangée. D' accord. Donc, PushMatrix et PopMatrix réinitialisent la rotation à zéro, zéro. Désolé, remettre la rotation à zéro. Donc, nous faisons pivoter 45 degrés, nous attachons le rectangle, PopMatrix le réinitialise à nouveau à zéro, puis le processus recommence partout où il tourne 45 degrés, dessine le nouveau rectangle, mais ce temps à un X de 200. Ensuite, PopMatrix remet la rotation à zéro recommence le processus. Donc, encore une fois, j'étais confus quant à pourquoi il faisait ce genre de modèle. Alors, à ce stade, apprenons quelque chose de nouveau. Allons de l'avant et sauvegardons et fermons ceci, et je vais faire cette étape une, maintenez la touche Alt enfoncée, faites glisser pour créer l'étape deux et rouvrir ce fichier à nouveau, n'est-ce pas ? Donc, maintenant nous allons apporter une amélioration à ce fichier. Il se termine que, si vous dites simplement que le rectangle est à un X de zéro et un Y de zéro et en fait faire cela pour tous, parce que ce que nous voulons faire est d'ajouter quelque chose de nouveau appelé traduire. Ce que traduit fait est, si la rotation fait pivoter le canevas, traduire déplace le canevas. Il déplace le canevas de scène sur un axe X et un axe Y. Donc, si je devais venir à cette PushMatrix, je pourrais dire traduire et je vais juste mettre des coordonnées 2D. Je vais dire traduire à 100, 100. Ainsi, traduisez en un axe X de 100 pixels sur 100 pixels vers le bas, faites pivoter la scène, puis dessinez le carré. réinitialisations de PopMatrix se traduisent à zéro, zéro, les jeux tournent vers zéro et relance l'ensemble du processus. Alors, allons de l'avant et copions notre traduction dans chacune des matrices push et pop, mais en ce moment je vais dire traduire en 200, traduire en 300, traduire en 400 et traduire en 500. Publisher film et oh, mon Dieu, on arrive quelque part. Donc, ce qui s'est passé, c'est qu'il a dit que c'est zéro, zéro, ok. Déplacez 100 pixels 100 pixels, mais c'est toujours zéro, zéro, ok. Faites pivoter 45 degrés, attachez le carré. PopMatrix, remettez-le là où il a commencé. Mais le nouveau dit aller plus de 200, en bas de 100, tourner ainsi de suite et ainsi de suite. Donc, maintenant nous commençons à obtenir ce que je voulais visuellement pour commencer, qui était une rangée de rectangles tournées de 45 degrés. Ok, c'est cool, mais je veux que ces petites formes de diamant apparaissent au centre de la scène, donc l'axe Y devrait être au centre. Donc je vais aller de l'avant et fermer ça, et encore une fois je vais maintenir la touche d'option enfoncée. Je vais aller de l'avant et faire glisser ceci pour créer une étape trois et allons de l'avant et rouvrir ce build.pde. D' accord. D'accord. Tellement cool. Je veux que la traduction soit à la hauteur du film divisé par deux. Ça a l'air génial. Donc, continuons, copions-le, et collez-le pour chacune des traductions. Allez-y et lancez votre film. Cela ne ressemble totalement pas à son centre de l'écran. On dirait que c'est horrible. Eh bien, confirmons que c'est horrible. Allons de l'avant, et disons que nous voulons faire une ligne. D' accord. Allons-y, et disons que le premier de la ligne devrait être à zéro sur le X, et il devrait être à la hauteur divisée par deux, donc cela va le mettre sur le côté gauche milieu de la scène. Allons de l'avant et disons que la largeur de la ligne doit être la largeur, et sa position suivante devrait être la hauteur divisée par deux. D' accord. Donc, que je devrais dessiner une ligne dans le centre complet de l'écran. Donc, je vais aller de l'avant et tester mon film, et je me rends compte, oh, oui bien sûr. Lorsque vous dessinez le rectangle, le rectangle est zéro, zéro. Donc, quand il tourne comme ça. droite. Il est suspendu à ce zéro point de rotation zéro. En fait, si je devais ajouter des ellipses ici, laissez-moi juste dire ellipse. Oh, tu peux taper Josh. Essaie ça. Disons que l'ellipse sera la même que les traducteurs. Donc, pour la première ellipse disons 100 hauteur divisée par deux, et je veux que la taille de l'ellipse soit cinq par cinq. D' accord. Donc maintenant, si je devais copier 2,3,4,5, la prochaine traduction est à 200, 300, 400, 500. Testez le film, testez le croquis. Je viens de Flash Man. Testez le film, testez le croquis. Donc, je dessine ce petit cercle pour représenter où zéro, zéro est sur mon rectangle. D' accord ? Alors maintenant, je suis un peu dans un dilemme. En fait, si je devais faire ça, non ? Si je disais, « Hé, je tourne à 45 degrés divisé par cinq rectangles, tu verrais que 45 divisé par cinq, c'est neuf. Donc, si je change le rayon pour être neuf fois une, neuf fois deux, neuf fois trois, neuf fois quatre et neuf fois cinq. Si j'ai couru mon film, je peux le voir tourner à 45 degrés. Je pouvais voir ce pivot. J' ai une représentation de la façon dont il pivote hors de zéro, zéro du rectangle, non ? Alors, d'accord. Oh mon Dieu ! Je dois essayer de comprendre ça. Alors, allons de l'avant, sauvegardons et fermons ce film. Je vais faire glisser l'étape 3 à l'étape 4. Je vais rouvrir le build.pde à nouveau. Donc, je devais aimer penser comme, ok, comment puis-je centrer le rectangle ? Encore une fois, c'est moi qui ne sais rien sur le traitement. Je n'avais pas fouillé toute la documentation. Je ne connaissais pas tous les trucs. J' essayais de comprendre ça tout seul, d'accord ? Alors, cool. Remettons les radians à 45 dans cet exemple. D' accord. Ce que j'avais besoin de comprendre, c'est que si je fais pivoter un rectangle de 50 sur 50, ce n'est pas la taille du rectangle. En fait, si vous prenez un rectangle et faites pivoter 45 degrés, ce rectangle est maintenant 70.711 pour une largeur et 70.711 pour une hauteur. Ce n'est plus 50 sur 50. Donc, j'étais genre, ok, je vais prendre la hauteur divisée par deux, et ensuite je dois soustraire, non ? Puis, je mettais ça entre parenthèses. J' allais dire : « Oh, 70.711 divisé par deux. Ce serait le milieu de la largeur et le milieu de la hauteur. » Donc, si je copie réellement ça. C'est douloureux. C' est douloureux que vous écriviez ce code avec moi, parce que c'est ridicule. Donc, si je devais alors enregistrer et tester ce croquis. J' étais genre, oui. Je fais ce que j'ai besoin de faire, c' est que je voulais prendre ces rectangles, les tourner à 45 degrés, pour qu'ils deviennent des diamants. Mais ensuite je voulais les centrer, et c'est comme ça que tu le fais. Je dois vous dire, je commençais à penser que le traitement était fou, que j'allais passer un moment vraiment difficile en tant qu'artiste visuel, pensant à la façon dont j'allais faire des choses à l'écran. Maintenant, enregistrez et fermez ce film. Sauvez-le comme une étape cinq. C' est la dernière que nous allons faire, parce que j'ai ensuite creusé une partie de la documentation, et réalisé que c'était juste fou. Je n'avais pas à faire ça du tout. Si je me débarrasse de tout cela, tout ce que j'avais à faire était d'écrire une ligne de code pour spécifier le RectMode. Donc, si je viens au sommet ici, et que je dis, RectMode, vous pourriez alors passer CENTER dans toutes les majuscules. Donc, ce que cela signifiait, c'est que quel que soit le rectangle que vous faites, le point d'ancrage est en fait au centre de la largeur et de la hauteur spécifiées. Donc, si vous deviez enregistrer et tester ce croquis, vous remarqueriez que vous obtenez la même chose exacte. D' accord. Dans la prochaine série, je veux parler de comment faire pivoter ce truc ? Alors, cool. J' ai cette œuvre d'art attachée au centre de l'écran, où je veux qu'elle aille. Mais que se passe-t-il si je voulais appliquer une animation ? Maintenant, la raison pour laquelle je montre l'animation comme exemple, c'est parce que finalement, nous allons nous présenter à Hype. Nous allons nous faire découvrir comment tous ces types d'ennuis pour moi pourraient être simplifiés en utilisant le Hype Framework. D' accord. On se voit dans la vidéo suivante. 21. Bases / Rotation et couleur: Donc, la façon dont je le vois est avant de passer à parler de battage médiatique, il y a deux fichiers supplémentaires que nous devons faire pour que vous puissiez voir quels scénarios se produisent dans un scénario non hyperfié. Donc, le premier est d'appliquer la rotation. Donc, je vais aller de l'avant et faire un nouveau dossier et je vais appeler ce dossier « Rotation », et à l'intérieur de ce dossier, rotation, je vais juste copier l'étape cinq de la matrice. Donc, je vais passer l'étape 5 et juste la copier vers rotation de la matrice et vers la rotation. Maintenant, laissez-moi juste changer ceci à l'étape 1 et je peux aller de l'avant et fermer le dossier de matrice et je peux aller de l'avant et ouvrir ce build.pde. Maintenant, si je fais ce croquis ici, ce que je veux faire est une rotation de ces carrés afin que, encore une fois, vous puissiez voir comment le traitement gère certains aspects de la peinture à l'écran. Donc, allons-y et disons quelque chose d'un peu différent dont j'ai parlé plus tôt qu'une installation fonctionne fonctionnellement une fois. C' est une fonction de tirage qui s'exécute plusieurs fois, et donc je veux réellement déplacer certaines de ces choses dans une fonction de tirage. Donc, si je viens ici et tapez void draw, open paren, close paren, et ce que je vais copier est tout de l'ellipse, la ligne, et la PushMatrix et PopMatrix. Donc, je vais aller de l'avant et couper cela, et maintenant vous verrez que la seule chose qui est dans configuration est de définir la taille et le RectMode. Maintenant, à l'intérieur du dessin qui est une boucle, il fonctionne encore et encore, je vais en fait coller cette PushMatrix, PopMatrix, la création de la ligne, et la création de ces ellipses. Maintenant, si je devais construire le croquis, vous remarquez que ça n'a peut-être pas l'air très différent parce que, encore une fois, il n'y a pas d'animation qui se passe ici. D' accord. Donc, j'ai cinq actifs. Donc, je vais en fait créer cinq variables. Je vais dire entier r1 pour la rotation un est égal à zéro, et je vais aller de l'avant et copier ces deux, trois, quatre, cinq et changer ceci en deux, trois, quatre et cinq. Maintenant, ce que je vais faire est, au lieu de faire pivoter radians 45, je vais réellement changer cela à la variable que j'ai configurée ci-dessus. Donc, je vais dire radians plus r1. Cela signifie donc en ajouter un à la valeur de r1. Donc zéro devient un, un devient deux, deux devient trois, trois devient quatre, et fondamentalement, c'est un compteur, cette chose compte toujours maintenant. Donc, si je devais copier ceci et faire ceci plus plus r2, plus r3, plus plus r4, et plus plus r5. Maintenant, la rotation, tous les cinq d'entre eux ont cinq nombres différents qui comptent 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Donc, si je teste le croquis, vous devriez remarquer qu'il tourne, mais ce qui se passe, c'est que vous n'effacez pas l'écran. Donc, en fait, je ne fais que peindre la rotation et donc au fur et à mesure que le carré se déplace, il laisse un résidu de l'œuvre dans sa position précédente. Donc, pour effacer l'écran dans la fonction de dessin, je vais juste dire que l'arrière-plan est CCCCCC. Donc, ce qui se passe là est, chaque fois que la fonction de dessin s'exécute, elle efface l'arrière-plan puis dessine le carré, efface l'arrière-plan, dessine les carrés, efface l'arrière-plan, dessine les carrés. Alors maintenant, quand je teste réellement ce croquis, vous devriez remarquer qu'il semblerait que chacun des carrés tourne de leur propre chef. Donc, nous avons déplacé le contenu de la configuration, nous l'avons mis à l'intérieur du dessin. Nous nous rendons compte que si vous n'appelez pas l'arrière-plan à la ligne 13, cela laissera un résidu de l'illustration parce que vous n'effacez pas réellement l'arrière-plan. Encore une fois, ce sont des choses à penser au fur et à mesure que nous allons de l'avant. Il y a un dernier double-whammy ici. Je vais aller de l'avant et enregistrer ceci, et je vais copier tout ce fichier de rotation en couleur. Donc, je le copie et je vais le renommer en couleur et je vais aller de l'avant et ouvrir le PDE de construction. Maintenant, c'est le même fichier exact que la rotation, mais je veux définir une couleur aléatoire. Donc, j'ai ces carrés et je voulais juste avoir une couleur de remplissage aléatoire. Donc, à l'intérieur de la PushMatrix et de la PopMatrix de chacun des cinq, je vais réellement coller ceci, et cela définit la couleur de remplissage. Maintenant, le remplissage est RVB ; rouge, vert, bleu. Donc, je dis choisir un nombre aléatoire 255 pour le rouge, un nombre aléatoire 255 pour le vert, et un nombre aléatoire 255 pour le bleu, donc cela devrait me donner des valeurs RGB aléatoires, c'est RGB est un nombre de 0-255. Maintenant, si je devais copier ceci dans chacune des PushMatrix et PopMatrices, vous verrez la dernière et dernière paille pour moi personnellement, quand je teste ce croquis. Au lieu de penser que cela mettrait juste une couleur, ce qui se passe est, c'est parce que la fonction de dessin fonctionne encore et encore, il suppose que vous voulez choisir un remplissage aléatoire à chaque fois. Donc wow, c'était juste une énorme différence pour moi venant de l'environnement flash parce que vous pouviez faire ce genre de chose dans l'environnement flash et en fait la couleur de remplissage ne serait définie qu'une fois. Encore une fois, je comprends que ce sont des langues complètement différentes, mais pour moi c'était la paille finale. J' avais vraiment besoin de réfléchir à la façon dont je pourrais construire une bibliothèque pour aider à faire certaines de ces choses qui, je pense, sont compliquées. Ainsi, par exemple, vous pouvez choisir une couleur aléatoire à l'intérieur de la configuration, puis le tirage au sort accédera simplement à cette couleur aléatoire que vous avez déjà présélectionnée. Passons donc à la vidéo suivante où nous commençons à regarder un code médiatique et à comprendre comment nous pouvons prendre les mêmes idées exactes, la mêmeanimation exacte, animation exacte, mais nous verrons comment c'est beaucoup plus simple en utilisant le battage médiatique. On se voit dans la vidéo suivante. 22. HYPE / Bases: D' accord. Commençons donc par un fichier HYPE. Donc, tout ce que nous venons de couvrir, dégagé de votre esprit. Cool. Allons de l'avant et commençons un nouveau document, un nouveau dossier, et je vais appeler cela Hype_Basics. À l'intérieur de Hype_Basics, je vais créer un dossier appelé étape 1, je vais créer un dossier appelé build. Maintenant, vous pouvez ouvrir ce dossier de traitement HYPE que nous avons téléchargé à partir de Staging, car voici Hype.pDE, qui contient à nouveau toute la bibliothèque HYPE. Donc, je vais opter pour faire glisser et copier cela dans Build. Donc, maintenant je peux fermer ça. Donc, j'ai Hype_basics, étape 1, build et HYPE pde. Donc, je vais aller de l'avant et créer un nouveau fichier appelé build.pde sur le bureau, dans Hype_Basics, étape 1, build, juste là avec mon fichier HYPE pde. D' accord. Donc, comprenons quelques choses qui sont un peu différentes que dans le traitement. Alors, allons de l'avant et construisons nos rectangles visuels comme nous l'avons fait dans le dernier fichier. Maintenant, je vais aller de l'avant et dire void setup (). Je ne vais pas faire de raccourci pour l'instant parce que je vais vous montrer quelques différences. La première chose que je vais spécifier est la taille, 600 par 600, et je vais passer à la ligne suivante. Maintenant, pour utiliser une bibliothèque externe, j'ai besoin d'initialiser la bibliothèque HYPE. Donc, je dois dire à Processing que HYPE existe. Je vais le faire en disant H.init (ceci). Maintenant, si vous avez téléchargé d'autres bibliothèques dans le passé, vous êtes probablement très familier avec le déclenchement du constructeur d'une bibliothèque. Donc, en ce moment, sur cette ligne 4, je dis à Processing d'être conscient que la bibliothèque HYPE existe réellement. Donc H.init (ce). Maintenant, plutôt que de demander à Processing de faire le dessin, je vais demander à HYPE de faire le dessin. Donc, quoi que je tape à partir de là, je vais dire, HYPE. Donc, à la toute fin, je dois dire à HYPE de peindre réellement l'écran. Donc, je vais le faire, me donner quelques retours durs en disant H.Drawstage. C' est cette ligne juste là qui va vraiment prendre toutes les choses que nous avons poussées dans HYPE et être en mesure de les peindre sur l'écran. Donc H.Drawstage va toujours être l'une des dernières choses que je fais. Maintenant, allons de l'avant et faisons notre premier rectangle. Donc, en haut ici, je vais créer une instance de HRect, et c'est un R majuscule, HRect, je vais dire d1, d est pour drawable. Donc, il y a beaucoup de drawables à l'intérieur de HYPE. Il y a HRectangle, il y a HelliPse, il y a HBox, il y a HSphere. Ce sont tous des drawables de HYPE. Donc, je vais dire HRect d1, le d est pour drawable. Maintenant, à l'intérieur de la configuration, je vais dire que d1 est égal à un nouveau HRect. Donc, plutôt que d'appeler Rect, nous appelons HRect. Maintenant, je peux commencer à faire un chaînage de méthode. Je peux dire, hé, d1, je veux que ta taille soit 50. Je veux que votre rotation soit 45. Je veux que votre position d'ancrage soit au centre, sorte que quand il tourne, il tourne, c'est le mode Rect, de sorte qu'il tourne autour du point central. Je le fais en disant Anchorat. AnchoRat a un tas de choses que nous pouvons passer. Je vais dire H.CENTER, tout comme c'était le centre du mode Rect, je dis ancre chez H.CENTER. Où est-ce que je veux mettre ce premier carré ? C' est l'emplacement et sous l'emplacement, je vais dire 100 sur l'axe des x et la hauteur divisée par deux. D'accord. Maintenant, si à ce stade je devais sauver et tester ça, vous remarqueriez que nous ne voyons rien. Alors, où est mon rectangle ? Donc, il vous manque une dernière ligne, qui ajoute ce drawable à HYPE. Donc, je vais dire H.Ajouter ce gars d1. Donc, vous ajoutez maintenant ce drawable à HYPE. Donc, quand nous arrivons à la ligne 12 et qu'il dit H.Drawstage, ce drawable a été ajouté et il peut réellement le peindre à l'écran. Donc, en ajoutant cette ligne, si je teste maintenant l'esquisse, vous devriez remarquer que le rectangle est juste là au centre. Maintenant, ajoutons quelques trucs ici. Après H.DrawStage, je vais en fait copier et coller les informations de ligne et d'ellipse des fichiers précédents sur lesquels nous travaillions. Donc, tracer la ligne à travers le milieu, puis mettre ces cinq ellipses. Maintenant, si je devais exécuter ce fichier, vous remarqueriez qu'il est en fait juste au centre de l'écran. Donc, taille, mettez-le à 50 par 50. Rotation, je n'avais pas à dire éclat, je pourrais juste dire que je veux faire pivoter à 45 degrés. Anchor, je spécifie où se trouve le point d'enregistrement. Dans ce cas, je dis ancre à H.CENTER. Emplacement, Je viens de dire 100 pixels sur le x et la hauteur divisée par deux. Maintenant, si je devais prendre ça et juste copier ça cinq fois de plus, deux, trois, quatre, cinq, maintenant, évidemment, je devrais changer ça en d2, d3, d4, d5. Donc, en haut, je vais dire Hrect d1. Il y aura aussi un d2, un d3, un d4 et un d5. Donc, je peux les énumérer tous sur une seule ligne. Maintenant, je peux commencer à faire les modifications ici. Je peux dire d2, d2, ajouter d2, d3, d3, ajouter d3, d4, d4, ajouter d4, et d5, d5 et ajouter d5. La seule autre chose que j'ai dû changer, c'est l'emplacement. Celui-ci était à 200, celui-ci était à 300, celui-ci était à 400 et celui-ci était à 500. D' accord. Je vais exécuter mon croquis et vous devriez remarquer que c'est exactement comme le précédent. Alors, cool. Nous commençons à apprendre un peu sur HYPE. Nous initialisons le framework HYPE. Nous utilisons les drawables de HYPE, dans ce cas HRect. Nous ajoutons ces drawables dans l'univers HYPE. Ensuite, sur la ligne 27, nous demandons à l'univers HYPE de prendre tout ce qu'il sait, que nous y avons poussé, que nous y avons ajouté, et de le peindre sur scène. Donc, si je devais enregistrer ceci et le fermer, puis faire une deuxième étape et ouvrir le code ici, regardez ce que je vais faire ici. J' ai une classe appelée HRotate. Donc, rappelez-vous, avant, nous devions créer un tirage nul et nous devions copier tout le code dans le tirage au sort. Eh bien, je vais prendre un petit raccourci ici, et je vais dire, hRotate, encore une fois, c'est un R. majuscule Appelons ce r1 pour faire pivoter un, équivaut à nouveau hRotate, et qui est-ce que je veux faire pivoter ? Qui est la cible ? Eh bien, dans ce cas, la cible est d1, c'est notre HRect, d1. Quel genre de vitesse voulez-vous avoir ? Allez-y et faites juste une vitesse d'un. Maintenant, à ce stade, si je devais tester le croquis, vous remarquerez que rien n'est tourné. La raison pour laquelle rien ne tourne est parce que, encore une fois, tout est dans la configuration. Donc, si je devais venir ici et dire nul tirage, ouvrir paren, fermer paren, et juste copié les ellipses, la ligne et le H.Drawstage, c'est tout ce que j'ai à copier, et en fait coller ceci dans le tirage au sort. Donc, ce qui se passe est, c'est qu'à l'intérieur de dessiner la boucle, il tire H.Drawstage encore et encore. Donc, ça dessine vraiment l'univers du battage médiatique encore et encore. Donc, à ce stade, si je teste réellement le croquis, vous devriez remarquer que le premier carré tourne en fait, et qu'il tourne une vitesse d'un. Maintenant, si je l'ai ensuite copié , collé, collé, collé et collé, et passons ceci à r2, r3, r4 et r5, et changeons qui sont les cibles, d2, d3, d4 et d5. Maintenant, si je teste le croquis, vous devriez remarquer que nous sommes de retour là où nous avons commencé. Maintenant, remarquez quelques trucs. À l'intérieur du tirage au sort, vous n'aviez pas besoin de vous rappeler l'arrière-plan. En fait, il le fait automatiquement construit par défaut. Nous apprendrons un peu plus tard comment ajouter le code afin qu'il n'efface pas l'arrière-plan. Donc, il suffit de dessiner scène efface automatiquement l'arrière-plan, sauf si vous spécifiez le contraire. Maintenant, si je disais que la vitesse était négative, cela irait évidemment dans l'autre sens. Alors maintenant, le premier va dans le sens antihoraire et les quatre suivants vont dans le sens des aiguilles d'une montre. Je n'ai pas eu à créer de variables pour la vitesse, je n'ai pas eu à dire plus, plus la variable pour compter chaque rotation, va juste gérer la rotation pour nous. Eh bien, génial. Cela signifie que celui-ci, je pourrais dire qu'il a une vitesse de 1,5. Celui-ci, je pourrais dire qu'il a une vitesse de deux. Celui-ci, je pourrais dire, a une vitesse de 2,5, et celui-ci a une vitesse de trois. Encore une fois, si je devais tester le croquis, vous remarqueriez que toutes les rotations de vitesse sont différentes. continuant, je vais sauver ça. Je vais le fermer. Je vais ensuite copier à l'étape 3 et rouvrir ce PDE construit. Maintenant, c'est super important. Je ne peux pas te dire à quel point j'aime ça. A l'intérieur d'un flash, vous pourriez créer une œuvre d'art et vous aviez ce point d'enregistrement, et où vous avez déplacé le point d'enregistrement était super important parce que si le point d'enregistrement était là, et que vous l'avez fait en rotation, il tournerait de cette façon, et si vous l'aviez au centre, alors il tournerait de cette façon. Donc, vous avez peut-être remarqué qu'à l'intérieur du traitement par défaut, vous faites soit 00, soit vous faites le mode rect du centre. Vous ne pouvez pas faire des rotations asymétriques, ou peut-être que le point est là-haut, et ceci comme des balançoires. Vous ne pouvez pas le faire rapidement, vous devez en fait écrire un tas de code afin de soutenir la façon de faire ce genre de rotations. Donc, à ce stade, je veux parler de l'ancre. Donc ici l'ancre à toujours a une constante, comme H.centre, H.up, H.gauche. Si je le change pour juste ancrer, alors je peux réellement spécifier n'importe quel X et Y que je veux. Donc, je vais juste me débarrasser de mes H.centres ici, et voyons juste quel genre de plaisir on peut avoir avec l'ancre. Disons que la première ancre est de cinq sur l'axe X, cinq sur l'axe Y. Disons que le suivant est 10 sur l'axe X, 10 sur l'axe Y. Disons que la prochaine est 15 sur le X, 15 sur le Y. Quatre, je vais en faire 25, 25, et la raison pour laquelle je vais en faire 25, 25, c' est parce que la taille est 50. Donc, l'ancre 25, 25 est le même que l'ancre à H.centre. En prenant la largeur diviser par deux, la hauteur diviser par deux, 50 diviser par deux, 50 diviser par deux, 25, 25. Le dernier petit dessinable, je veux faire quelque chose d'inhabituel ou je veux dire, ok, cool, voici l'œuvre d'art. Je veux, sur l'axe X venir au milieu, donc le milieu serait 25, et sur l'axe Y, je veux qu'il soit négatif 25. Donc, ça met vraiment le point là-haut. Donc, je vais dire négatif 25. Allez-y et sauvegardez et testez ce croquis, et vous devriez remarquer que maintenant, nous avons toutes sortes de rotations fantastiques. Juste auto-magiquement sans avoir à écrire de code supplémentaire, vous pouvez utiliser l'ancre pour spécifier exactement comme les vieux jours flash où le point d'enregistrement est et où ce point d'enregistrement va affecter la position X et Y de l'endroit où les choses s'attachent et évidemment la rotation. Maintenant, dernière chose que je veux faire, allez-y et fermez ça, et je vais sauver ça comme une étape quatre. C' est le dernier que nous allons faire dans cette série particulière, et c'est que je veux ajouter de la couleur. Donc si vous vous souvenez, je pourrais dire, encore une fois, je pourrais le changer. Mais cela commence à devenir long. Donc, disons juste d1.fill, et ensuite quelque chose. Alors, qu'est-ce que je veux faire de ce remplissage ? Eh bien, si vous vous souvenez dans le dossier précédent, je voulais choisir au hasard un rouge vert bleu. Donc, si je devais juste copier du code que j'ai déjà pré-cuit ici, où je dis d1 remplir aléatoire r, g, et b, nombre de 0-255. Si je devais coller cela dans chacun d'entre eux, alors laissez-moi simplement copier et coller et coller et coller, alors bien sûr, je dois le changer en d2. Celui-ci, je dois changer en d3. Celui-ci, je dois changer en d4, et celui-ci en d5. Parce que toute cette création d'actifs se produit dans la configuration, vous pouvez réellement exécuter le fichier et il ne va peindre qu'une seule couleur. Alors que, dans la précédente, il était de choisir la couleur encore et encore et encore. Donc, énorme avantage. Un énorme avantage à pouvoir utiliser battage médiatique, et juste dans la fonction de tirage, juste mettre ce H.DrawStage, et tout ce que nous faisons dans la configuration, qui est juste exécuté une fois, et c'est ce H.DrawStage qui est en regardant tous les paramètres que vous définissez dans la configuration et en faisant le calcul. Donc, dans ce cas, c'est la rotation. Maintenant, je pourrais faire d'autres trucs ici sur le H.init ça. Je pourrais dire .background et je pourrais spécifier 666666, un gris foncé comme ça, donc je pourrais définir la couleur d'arrière-plan, et je peux ensuite faire AutoClear. valeur d'une effacement automatique est bleue. Donc, si vous dites AutoClear true et que vous exécutez réellement ce fichier, ce que fait AutoClear true est d'effacer l'arrière-plan. Donc, si je changeais l'effacement automatique à false, et que j'exécute mon film, vous auriez cet effet de peinture. Donc, nous allons passer à regarder certains des objets battants dessinables. Donc, nous allons juste faire un tour rapide de tous les différents types d' objets dessinables que vous pouvez utiliser en utilisant le framework battage. Aller à l'avant. 23. HYPE / Dessinables: D' accord. Donc, maintenant, nous allons passer à un dossier appelé objets de soulignement HYPE, et vous devriez remarquer qu'il a été zippé et qu'il a été attaché à ce contenu vidéo. Si je ne remporte pas une sorte de récompense pour le nombre de contenus vidéo Skillshare dans une classe, je vais être vraiment déçu. Il y a une suggestion lorsque j'ajoute ces vidéos qui dit, « Faites chaque vidéo entre trois et sept minutes ». Désolé, j'ai échoué dans ce département. Il y a beaucoup de drawables dans HYPE, et en fait je ne les ai pas tous ajoutés. Il y en a quelques-uns qui manquent. Cette vidéo durerait trois heures si nous avons réellement écrit tout le code pour parler de tous les différents drawables. Donc, ce que je vais faire, c'est nous allons juste regarder certains des drawables ici, et nous allons regarder le code, et vous pouvez travailler côte à côte, et nous pouvons passer à travers cela. Maintenant, la même structure va être dans chacun de ces dossiers. J' ai essayé de le réduire à ses bases absolues. Regardons ce qui se passe ici. Il y a une configuration vide. n'y a pas de nul nul. Je dis H.init (ceci), je vais de l'avant et je mets dans un fond d'un gris foncé. Ligne six, j'ai dit lisse, ce qui rend parfois les pixels un peu plus agréable. Ligne 22 H.Drawstage, donc quoi que nous ajoutons à l'univers HYPE, peignez à l'écran. Maintenant, sur la ligne 8-20, je fais une boucle pour. Une boucle for-est quelque chose qui exécute un certain nombre de fois. Donc, dans ce cas, j'ai dit que je voulais que ce for-loop fonctionne 100 fois. Si vous n'êtes pas familier avec la programmation, une boucle pour est trois étapes de base, où commencer jusqu'à quand comment compter. Donc, entier i est égal à zéro, commencez à zéro, exécutez alors que i est inférieur à 100, un i++. Donc, si vous vous souvenez d'avant, ajoutez un sur i. Donc, zéro devient un, un devient deux et cela continue à compter jusqu'à ce qu'il atteigne 100. Puis, quand il atteint 100, cette boucle pour s'arrête. Maintenant, à l'intérieur de cette boucle pour, nous créons un rectangle, un HRect. Donc, cela signifierait que nous allons attacher 100 HRECT à l'écran. Donc, regardons certains des paramètres que nous avons passés. J' ai dit que je veux que le StrokeWeight soit un. J' ai dit que je veux que la couleur du trait soit FF3300, belle orange foncé. Je veux que le remplissage soit 111111, beau gris foncé. Je veux que la taille soit un nombre aléatoire. Donc, notez que nous ne passons qu'un seul numéro pour la taille, donc ça veut dire que ce sera une boîte parfaite. La largeur et la hauteur obtiennent le même nombre exact. Mais, j'ai dit aléatoire 25 virgule 125. C' est une plage, ce qui signifie qu'il va choisir un nombre entre 25 et 125, et quel que soit le nombre qu'il choisit, il donne cela à la largeur et à la hauteur. Tournez, je lui demande de choisir un 360 degrés aléatoires. Pour l'emplacement, random.width random.height. Maintenant, nous n'avons pas encore couvert cela, largeur est égale à 600 et la hauteur est égale à 600. Donc, vous pouvez simplement spécifier avec les tailles ici, et cette taille peut alors être appelée comme largeur et hauteur dans tout le reste de votre document. Anchorat (H.center) donc, nous définissons ce point d'enregistrement au centre. Une fois que nous avons terminé, nous disons h.add (d), d étant drawable. C' est un raccourci pour drawable. Donc, si je devais tester ce croquis, vous devriez remarquer qu'il y a 100 HRECT ajoutés à la scène. Ils ont tous une portée comprise entre 25 et 125. Ils ont une rotation aléatoire. Donc, maintenant, peut-être que vous commencez à voir certaines de ces pensées et de la conversation que j'ai eue sur le hasard. Je ne sais pas si c'est nécessairement beau ou pas. En fait, c'est juste aléatoire mais, c'est aléatoire avec une plage. Il n'est pas devenu trop petit parce qu'il ne va pas plus petit que 25 sur 25, et il n'est pas devenu trop grand parce qu'il ne va pas plus grand que 125 sur 125. Donc, si je peux ajouter du hasard mais avoir des limites dessus, généralement, meilleurs sont les résultats. Alors, cool. Nous aimons celle-là. Regardons le prochain HRect et voyons ce qui se passe dans ce fichier particulier. Celui-ci, j'ai changé la couleur de remplissage pour avoir un alpha de 200. Donc, alpha est un nombre compris entre zéro et 255. Donc, j'ai dit que je veux que le remplissage soit cette virgule gris foncé, puis alpha. Vous remarquerez que l'alpha est ici, vous pouvez voir certains des traits des rectangles qui sont en fait derrière. HRect prend également en charge l'arrondi des bords. Donc, vous pourriez remarquer sur la ligne 9 que j'ai dit, .arrondi et ensuite j'ai mis dans un rayon de 10, donc mes rectangles ont en fait un rayon de 10. Très gentil. Passer à la suivante. Si nous devions regarder celui-ci, j'ai changé de taille ici parce que, si la taille dépasse un nombre, alors elle l'applique à la largeur et à la hauteur. Ici, je randomise la largeur et je randomise la hauteur. Donc, dans ce cas, HRect devient une série de rectangles plutôt que des carrés parfaits. Donc vous remarquerez que nous avons un tas de rectangles à l'écran plutôt qu' un tas de carrés parfaits comme à l'étape 1 et à l'étape 2. Hellipse, pas très différent de HRectangle. Encore une fois, vous spécifiez une taille. Cette taille est le rayon du cercle. Donc, très similaire à HRECT sauf que nous faisons des cercles plutôt que des rectangles. À l'étape deux, je crois que plutôt que de faire des cercles parfaits, j'ai changé la taille pour être la largeur, un ensemble aléatoire de nombres, et la hauteur pour être un ensemble aléatoire de nombres. Donc, encore une fois, si vous testez ça, nous devrions avoir des ovales. Dans l'étape un, rotation, 360 aléatoire je n'ai pas fait parce que vous ne pouvez pas voir un cercle tourné au hasard. Mais, à l'étape deux, parce que ce sont des ovales, je peux faire cette rotation aléatoire à 360, et je peux faire pivoter des ovales autour. Maintenant, il y a aussi H.Path. H.path est l'endroit où vous pouvez faire des choses comme des polygones. Dans H.path, nous pouvons faire des étoiles, nous pouvons faire des triangles. Donc, on ne va pas regarder tout ça. Je veux que vous les regardiez tous mais, si vous deviez exécuter un polygone, par exemple, vous remarquerez que je peux obtenir des choses comme des octogones et des hexagones, et ainsi de suite en spécifiant que c'est un polygone, puis combien de côtés ce polygone a. Donc, dans le cas de celui-ci, j'ai dit, « Hey, H.Path est un polygone et ce polygone a cinq côtés », et donc j'ai un polygone à cinq côtés. Bien sûr, dans le polygone deux, je le randomise. Je dis : « Hey, les polygones randomisent entre trois et neuf. » Donc, quand vous exécutez ce fichier, vous obtiendrez tout, des triangles aux octogones, aux hexagones, etc. Alors, tirant dessus. L'étoile. Crois-le ou non, c'est une star. L' étoile a deux arguments, la profondeur et les bords. Donc, si vous deviez diriger ça, je pense que celle-ci finit par être comme une étoile traditionnelle à cinq côtés parfaite. Ainsi, chaque chemin peut aussi faire des étoiles. Bien sûr, il y a un tas de triangles différents que nous pouvons avoir. Il y a des isocèles, des angles droits, ainsi de suite et ainsi de suite. Donc, je dis que je veux un triangle, je veux que ce triangle soit isocèle, et je veux qu'il pointe vers le haut. Alors, regardez à travers H.Path et regardez tous les différents types de formes que nous pouvons réellement faire là-dedans. Maintenant, passons à HBox et HSphere. HBox nous travaillons toujours sur, mais la bonne chose est que HBox est une forme en trois dimensions, donc vous pourriez remarquer un peu de différence est que dans la taille ici, je devais lui dire d'utiliser P3D. Par défaut, il utilise des matrices bidimensionnelles et des vecteurs P2D . Donc, sur la ligne quatre, je dois spécifier que je veux utiliser des coordonnées tridimensionnelles. Je dois aussi dire à HYPE que j'utilise des coordonnées tridimensionnelles, donc vous pourriez remarquer que je dis à la ligne cinq, h.init et ensuite j'utilise 3DTrue, sorte qu'il bascule HYPE pour utiliser des coordonnées 3D plutôt que des coordonnées 2D. Ligne 11, 12 et 13, puisque c'est une boîte, je dois spécifier sa profondeur, je dois spécifier sa largeur, je dois spécifier sa hauteur. Et encore une fois, j'ai mis un tas de nombres aléatoires ici. Donc, si vous exécutez réellement ce croquis, vous remarquerez que nous recevons un tas de boîtes en trois dimensions dans l'espace. Ok, très cool. J' ai fait une étape 2 pour HBox. Qu' est-ce que j'ai fait pour ça ? J' ai fait la rotation X, la rotation Y et la rotation Z, ce que je trouvais plutôt cool. Donc, vous pouvez réellement créer une boîte, puis commencer à changer l'axe sur lequel il est tourné, X, Y, et Z, et donc j'ai pensé que la composition a commencé à devenir assez intéressant. J' ai également mis cet alpha dans le remplissage afin que vous puissiez voir certaines des autres formes qui se produisent derrière la boîte. Ok, Sphere, je ne suis pas encore vendu sur Sphere. C' est vraiment lent quand on fait de l'animation. J' ai allumé le coup de cette Sphère et tu devrais avoir quelque chose qui ressemble à ça. Je travaille toujours avec Sphere. J' essaie toujours de faire quelque chose de amusant ici. Cette étape 2, j'ai probablement fait la rotation X, la rotation Y et la rotation Z, donc si vous allez de l'avant et exécutez ceci, il va juste faire tourner l'axe de ces sphères. Donc, sur certains d'entre eux, vous pourriez voir les fonds ou les sommets de la Sphère, encore une fois compositionnellement, c'est intéressant. Maintenant, les deux derniers que nous voulons regarder est H.image, et H.image, étape 1, il y a un dossier de construction et il y a aussi un dossier de données, et à l'intérieur du dossier de données, je viens de mettre un peu de JPEG que j'ai fait pour mon pote Joel ici. Maintenant, si vous regardez le build.pde, vous remarquerez peut-être que je dis, « Ok, cool, j'utilise l'image H,  » et puis je spécifie en fait l'image quelle image aller obtenir. Vous n'avez pas besoin de spécifier le dossier de données, il sait juste automatiquement pour l'obtenir. Vous pourriez remarquer sur les lignes un à sept, si je voulais publier cela dans le traitement de JS, vous devez avoir cette ligne de code afin qu'elle précharge les images pour une utilisation dans le navigateur et JavaScript. Et si je lance ceci, cela devrait juste attacher une centaine de ces images à l'écran. Donc, il y en a un tas là-bas. Encore une fois, à l'étape 2, j'ai ajouté un peu de rotation, j'ai ajouté un peu d'alpha aux images. Beaucoup de fois, je pense qu'en Java, il devient un peu pixélisé. Vous pouvez voir que l'image devient un peu moelleuse. Fait intéressant, cela ne se produit pas dans la version JavaScript, mais dans la version Java, vous obtenez un peu l'escalier marchant sur les images. Maintenant, le dernier que je veux que vous digérez le plus parce qu'il se rapporte à cette classe, est HShape. HShape va avoir un dossier de données, mais à l'intérieur de ce dossier de données va être SVG. Nous allons donc prendre nos actifs que nous avons dessinés et les utiliser dans ces séries de croquis. Alors, regarde ça. HShape D, drawable, ligne neuf, D égale nouvelle HShape, « Hé, charger dans ce fichier SVG. Et vous remarquerez peut-être qu'il y a certaines choses que j'ai passées ici, comme activer le style false qui est de ne pas utiliser le style que j'ai utilisé dans Illustrator, en fait le tuer, parce que je vais spécifier le style ici dans le traitement. Donc, activer le style faux tue le style et me permet de le définir ici. Poids de course 1, une belle orange pour le trait, un gris foncé pour le remplissage, ainsi de suite et ainsi de suite. Maintenant, quand je fais ce croquis, vous devriez remarquer que je suis en train de peindre avec le fichier SVG que j'ai fait dans Illustrator. Donc, voici où ça commence à devenir vraiment excitant, où nous allons prendre certains de ces dessins que nous faisons et les cartographier dans ces environnements. Maintenant, cet exemple de croquis est comme un bon car vous pouvez voir comment les choses vont se mélanger à l'écran. Au cas par point, regardez l'étape 2, où si vous regardez les données, SVG, c'est énorme. C' est un très grand fichier SVG, et c'est très complexe dans les formes qu'il utilise. Donc, lorsque vous ouvrez réellement build.pde et que vous exécutez réellement ce croquis, il n'a pas l'air si bon. Je dois vous rappeler que si nous générons une composition complexe, si l'œuvre est complexe, alors c'est double complexe, et le double complexe n'a pas l'air si bon tout le temps. En fait, plus mes formulaires sont simples, plus ces résultats se révéleront, alors faites attention à rendre votre œuvre trop détaillée. Dans ce cas, cela ne marche pas si chaud. Examinons l'étape 3. Étape 3 est quelques-uns de ces dessins que j'ai faits sur la tablette Wacom. En fait, j'en ai fait un tas, donc je vais vous donner un tas de ces exemples de fichiers SVG pour que vous puissiez jouer avec. Donc, un joli petit SVG ici. Maintenant, à l'intérieur de ce build.pde, vous remarquerez peut-être, ne tuez pas le style, gardez-le comme si c'était à l'intérieur d'Illustrator. Faites une rotation aléatoire, faites une taille aléatoire, allez-y et jetez-les sur l'écran et voyons ce qui se passe. Donc, je vais lancer ce croquis et j'ai dû baisser la boucle for à 20 parce que l'illustration était si détaillée, vous allez obtenir cette erreur comme je viens d'avoir, qui est que j'essaie de dessiner 20 de ces fichiers SVG et parce que j'essaie de faire 20 d'entre eux, je manque essentiellement de mémoire. Ça dit : « Whoah, mec, tu essayes de créer 20 choses qui ont beaucoup trop d'informations vectorielles. » Donc, il vous donne quelques instructions sur la façon d'augmenter réellement la mémoire à l'intérieur des préférences. Maintenant, laissez-moi juste les quitter et plutôt que d'entrer et de changer les préférences de mémoire, je vais juste changer ma boucle de quatre à cinq, donc il ne va attacher que cinq pièces d'art. Mon espoir est que cela se déroulera. Ok, donc vous pouvez voir qu'il a attaché ces fichiers SVG sur le bureau, et encore une fois, c'est juste les prendre - les attacher au bureau, oh mon Dieu, je parle si vite et mon cerveau va si vite que je pourrais dire que je te voulais pour raser une girafe. S' il vous plaît, allez au Serengeti et raser une girafe. Où était-on ? Allons juste passer à autre chose. Ok, étape 4. Étape 4, j'ai mis dans cette habilitation de style. Laisse-moi abattre ça à la boucle quatre étant 10. Espérons que je ne manquerai pas de mémoire et que vous pouvez voir ici en activant le style, je pourrais entrer et mettre un remplissage, mettre des informations sur les coups, et je commence à obtenir cette composition, mais vous remarquerez peut-être que quand je fais cela dans la configuration et que je spécifie un remplissage, juste un remplissage universel qui est rempli sur l'ensemble des illustrations, mais c'est en fait un tas de choses individuelles. Donc, ce que j'ai fait, c' est que même si je saute à l'avance, la section suivante va être sur le travail avec la couleur, si vous passez réellement à l'étape 5, je viens de vous montrer un exemple de ce qui se passe quand vous avez spécifié certaines couleurs, puis demandez l'illustration de commencer à choisir au hasard les couleurs pour les remplissages. Maintenant, quand vous faites ça, vous commencez à obtenir quelque chose qui va visuellement paraître beaucoup plus intéressant, donc plutôt que d'appliquer une couleur, il traverse ici et il colore tous ces regroupements individuellement, comme nous l'avons vu dans l'autre section. Ok, cool. Encore une fois, sautant plus loin en avant, avançant dans le temps, étape 6. En fait, je voulais juste montrer comment avez-vous importé le traitement PDF, comment dites-vous que vous voulez capturer et enregistrer ce qui est rendu à l'écran, et si j'appuie sur la touche S de mon clavier, capturer tout ce qui a été dessiné. Donc, si je devais lancer ce film, appuyez sur la touche S, il générerait un PDF, et ce fichier PDF que vous pouvez ouvrir dans Illustrator. Donc, j'ai maintenant un environnement pour écrire du code, attacher des illustrations, puis renvoyer cette composition aléatoire à Illustrator, et évidemment dans les prochaines sections, nous allons comprendre comment faire toutes sortes de stylings et tout ce qui n'est pas. D' accord. Wow, beaucoup à couvrir dans cette section, sur la façon de peindre à l'écran, comment HYPE vous aide à peindre à l'écran beaucoup plus facile que je ne pense le traitement. Dans la section suivante, nous allons revenir un peu en arrière et parler de la couleur. Conceptuellement, nous allons parler de la couleur et ensuite nous allons parler de l' application de la couleur à certains nouveaux croquis que nous créons. Alors, la couleur. Rendez-vous dans la section suivante. 24. Introduction : Travailler avec des couleurs: Couleur. Très important. On doit parler de couleur. Tu sais pourquoi on doit parler de couleur ? Parce que tu crains la couleur. Je ne connais pas de meilleure façon de le dire. Les gens sont terribles en couleur, et mon but est de faire en sorte que les gens ne soient pas mauvais en couleur. La couleur est super, super importante pour moi. Non seulement ça, mais j'ai des secrets pour travailler avec la couleur. Encore une fois, la métaphore que j'utilise souvent est une boîte de crayons. Nous allons écrire un code qui dit, « Hé, nous avons passé tout ce temps à dessiner cette œuvre. Hey, on a passé tout ce temps à exécuter ce programme, et maintenant on vient de définir cette boîte de crayons. » Cette boîte de crayons a toutes les couleurs avec lesquelles nous sommes autorisés à colorier. Donc, ce qui va se passer est que, quand nous exécutons réellement notre fichier, il va choisir au hasard dans la banque d'actifs que nous avons dessinés, il générera aléatoirement des choses à l'écran, puis il accédera à cette boîte de crayons et dire, « Hey, mon travail est de colorer au hasard les choses à l'écran, mais je ne peux utiliser que les couleurs qui ont été spécifiées dans cette boîte de crayons. » Maintenant, cette idée peut sembler simple. Dans le premier exercice que nous faisons, ce sera très simple. Vous allez littéralement mettre en place cette boîte de crayons, et il va choisir au hasard parmi les crayons, et il va colorer les choses à l'écran. Mais alors nous pouvons commencer à entrer dans des choses comme la couleur en attente. Comment attendre plus de couleurs que d'autres ? Nous pouvons le faire avec une seule couleur et nous pouvons réellement le faire avec plusieurs couleurs. Ce qui signifie que, quand des choses sont générées à l'écran, nous pouvons forcer une esthétique de couleur spécifique et la composition. Donc, ça fonctionne avec quelque chose appelé pool de couleurs. Mais ensuite, nous avons un autre truc appelé pixel colorist. Pixel colorist, nous permet de prendre des photos et de dépouiller la couleur d'une photo. Je dois nommer Eric Nowitzki, parce qu'il est l'un des premiers gars à avoir vu le faire. Où il sortait et prenait des photos, les brouillait, puis utilisait les informations de couleur de cette photo pour remplir la couleur que nous allons peindre à l'écran. La troisième étape, est une classe appelée chaque champ de couleur. Ce que chaque champ de couleur nous permet de faire, c'est en fait configurer des points de couleur dans l'espace. Donc, comme nous générons au hasard une composition, si je voulais qu'elle soit verte en haut, puis jaune au milieu, puis bleue en bas, nous pourrions utiliser chaque champ de couleur pour créer cette transition de couleur. Donc, nous allons passer beaucoup de temps sur la couleur, parce que je pense que c'est une chose super génial d'être obsédé par. Je pense que ça va résonner dans le travail que vous créez et enfin, vous pouvez dire à tous vos amis que vous ne craignez pas la couleur. 25. The Color Thief's: On est dans la section 5 qui travaille avec la couleur. J' ai le t-shirt de mon prof de Skillshare John Conteno. Vous sentez le pouvoir ? Par où commencer ? Couleur. Super, super important, je suis obsédé par ça. J' aime la couleur au point où je suis toujours à la recherche et à la recherche d'inspiration de forme, je suis toujours à la recherche de couleur. Maintenant, dans le passé, c'était tout. Nous étions des concepteurs d'impression et vous aviez votre livre Pantone et vous pouviez passer et vous trouverez, mais vous êtes toujours à la recherche d'une couleur à la fois, mais c'est là que nous avons commencé à obtenir la couleur. Il y a beaucoup d'endroits pour l'inspiration des couleurs, par exemple, Kuler, vous pouvez aller à Kuler. Kuler est gentil. Je vais vous montrer quelques astuces pour pirater Kuler. Mon problème avec Kuler est que ce ne sont que cinq couleurs, et dans certains cas, c'est génial de commencer avec ces cinq couleurs, mais je suis toujours à la recherche d'une gamme de couleurs, une gamme beaucoup plus large, surtout quand il s'agit d'ajouter ces couleurs par programme, ce que vous allez trouver est que, si je générais au hasard un tas d'illustrations à l'écran et que je n'utilisais que cinq couleurs, ça finirait par paraître très plat. Donc, ce que je veux faire, c'est que je veux obtenir une plus grande gamme de couleurs. Donc, la question est, où vient la couleur ? Où puis-je rechercher l'inspiration des couleurs ? Eh bien, ça finit que la plupart du temps c'est à partir de photos. Si je devais ouvrir un navigateur, par exemple, et disons que je suis allé à Google et tapé dans Beach and Ocean, peut-être, et que j'ai cliqué sur « Images », je pourrais courir à travers cette sélection d'images pour chasser la couleur. Par exemple, comme celui-ci, si j'aime ça, si je cherchais ce genre de bleus avec ce genre de couleur de sable et peut-être ce punch de jaune, alors ce pourrait être un endroit idéal pour voler la couleur. Eh bien, comme il arrive, c'est que je passe beaucoup de temps sur Flickr à regarder ce que font les amis. Voici quelques amis à moi, Kozyndan, et ce sont des plongeurs passionnés et ils publient toujours ces photos incroyables de sous-marine. J' ai fini par voir celui-là et j'ai paniqué. J' ai dit : « Wow, il y a des blues vraiment incroyables. Il a ce superbe or et il se transforme en cette couleur chocolat riche et incroyable. » Alors, comment puis-je utiliser cela comme un point pour voler la couleur ? Allons-y et retirons cette image de Flickr et ouvrez-la ici dans Photoshop. Maintenant, encore une fois, voici l'image. Beaucoup de choses vraiment bonnes qui se passent et c'est un JPEG, et parce que c'est un JPEG, il prend en charge des millions de couleurs, donc les informations de couleur ici sont massives. Cette idée de prendre l'outil Pipette et de sélectionner une couleur puis, « Oh, est-ce que j'aime ça ou est-ce que je veux aller plus en sourdine ? » Cela me prendrait une éternité pour parcourir cette photo et trouver de la couleur. Eh bien, j'ai quelques tours. Ce que je vais faire, c'est que je vais venir dire « Enregistrer pour le Web ». Quand vous dites Enregistrer pour le Web, vous obtenez cette belle petite fenêtre ouverte ici, et le fait est que si vous étiez en JPEG, vous remarqueriez que la table de couleurs est vide, et encore une fois, c'est parce que le JPEG et le PNG peuvent prendre en charge des millions de couleurs. Mais vous avez peut-être vu que si vous enregistrez réellement ceci en tant que GIF, vous réduisez cette image à une table de couleurs et cette table de couleurs peut contenir jusqu'à 256 couleurs. Maintenant, si j'ai sélectionné « GIF32 Dithered », ce que vous remarquerez, c'est que la table de couleurs à nouveau, réduite au top 32 couleurs moyennes dans toute la pièce. Cependant, j'ai un peu de problème avec le dithering, et ce que dithering est, c'est qu'il va disperser les pixels autour de sorte que votre œil les mélange un peu mieux à l'écran. Cependant, si je suis venu ici et dit « GIF 32 No Dithered », alors je vais obtenir juste beaucoup plus grandes piscines de couleurs. Ce qui est sympa, c'est que pendant que je suis dans ce Save for Web, et pendant que je regarde cette table de couleurs, je peux dire, « Hé, tu sais quoi ? Je ne veux vraiment pas cette couleur foncée, laisse-moi aller de l'avant et la gâcher. » Donc, je peux réellement commencer à supprimer peut-être certaines des couleurs qui ne m'intéressent pas. Donc, encore une fois, c'est plutôt bon. En fait, j'en vois un ici. Ce n'est pas un très bon vert brunâtre sablonneux, donc je peux utiliser l'outil compte-gouttes pour le sélectionner. Il met en évidence dans ma table de couleurs et je peux aller de l'avant et la trash. Peut-être que je ne suis pas si fou de cette couleur et je peux choisir celle-ci et je peux aller de l'avant et la déchirer. Donc, je peux aller de l'avant et commencer à passer par et faire quelques modifications initiales en supprimant certaines des couleurs peut-être que je ne suis pas vraiment intéressé par. Ok, donc ce que je vais faire c'est que je vais juste cliquer sur « Enregistrer » et je vais en fait mettre ceci sur mon bureau et je vais juste appeler ce Color1.gif. Le fait est que ce que vous avez pu voir, c'est que cette photo a des divisions très claires, surtout, cette section ici, il y a une division claire entre le varech et le bleu, non ? Donc, une chose que je vais généralement faire, j'ai sauvé ce GIF, mais je vais venir filtrer et je dirai « Flou », et je dirai « flou gaussien », et je vais aller de l'avant et lancer un flou gaussien comme 10. Maintenant, ce qui est fait, c'est juste mélangé. Toutes les couleurs. Donc maintenant, il n'y a pas ce bord dur entre une couleur et une autre couleur. En fait, toutes les couleurs sont mélangées ensemble. Ce que vous trouverez, c'est que si je fais réellement enregistrer pour le Web à nouveau, et parfois il gardera les données de la table de couleurs de l'image précédente. Donc, je fais toujours un point de cliquer sur jpeg, montrez-moi tous les millions de couleurs, puis rechoisissez GIF 32 No Dither. Quand je fais ça, regardez ce beau grand bassin de couleurs, il a rechoisi la table des couleurs ici. Encore une fois, je pourrais prendre l'outil pipette et me débarrasser de cette couleur particulière. Encore une fois, je pourrais entrer et éditer peut-être certaines de ces couleurs que je sais que je ne ressens pas vraiment. Donc, j'en sauve une qui est la photo exactement comme il était prévu, et je fais la seconde où je fais ce flou gaussien. Donc, je vais enregistrer ceci sous color2.gif. À ce stade, vous pouvez aller de l'avant et fermer l'image que vous avez, et vous pouvez aller de l'avant et fermer Photoshop. Maintenant, ce que je faisais c'est que j'avais l'habitude d'avoir une application Web, où vous alliez à une URL et ça disait, « Hé, pourquoi ne me donnez-vous pas un GIF et je vais regarder toutes les informations de couleur qui sont là et les cracher dans le code. » J' ai utilisé ça pendant des années et des années et j'ai fini par enseigner une classe à Aspen, Colorado, au Anderson Ranch Art Complex et l'un de mes élèves était ce super gars Michael Swenson. Michael a dit : « Hé, ça vous dérange si je prends ce concept et que emballe en tant qu'application autonome ? » Cette application devrait être jointe à cette vidéo. Ce que c'est, c'est l'outil de sélection des couleurs. Donc, lorsque vous lancez ceci, vous pouvez voir que vous pouvez dire charger l'image et vous avez d'autres valeurs ici. Tout ce que je vais faire, c'est que je vais cliquer sur charger l'image et allons de l'avant et juste charger dans le premier color1.gif et cliquez sur Ouvrir. Vous remarquerez peut-être que ce qu'il a fait est, en fait, il a extrait les couleurs de ce GIF. Maintenant, vous pouvez trier. Tu peux dire : « D'accord, montre-le moi dans HSL. Montre-le moi en HSV. Montre-le moi au labo. » J' aime un peu le labo parce qu'il le trie de, Je vais mettre à jour plus tard merci beaucoup. Donc, j'aime le labo pour le tri. Maintenant, il y a des couleurs ici que je ne veux pas, et peut-être maintenant que je peux les voir un peu mieux au lieu de cette petite puce d'échantillon dans Photoshop. Ce que je vais faire, c'est, je vais maintenir la touche Ctrl enfoncée et je peux commencer à éditer certaines des couleurs que je sais que je ne veux pas. Quand je les édite, en fait, cela commence à s'organiser. Maintenant, disons que je voulais juste voir le blues, vous pouvez en fait déplacer les échantillons et je pourrais commencer à regarder les bleus tous d'affilée pour avoir une idée de la façon dont ces couleurs se mélangent. Est-ce que je veux enlever certains d'entre eux alors ici, je déménage juste ces chiots. Quand je fais ça, maintenant j'ai une meilleure idée de, oh, ok. Je ne veux vraiment pas cette couleur, je ne veux pas cette couleur. Ces deux-là ont un peu trop de vert en eux donc ils ne sont pas vraiment gélifiés avec les autres. Donc, je pourrais supprimer ça et supprimer ça. Alors maintenant, je commence à avoir un peu plus d'harmonie avec ces blues. Disons que je veux jeter un sable. Donc, je pourrais choisir ces deux couleurs de sable, et disons que je veux cette série d'oranges. Donc encore une fois, je pourrais supprimer certains de ces bruns que je ne pense pas vraiment fonctionnent, et comme je modifie en fait, les nuanciers deviennent plus gros. Donc, ils m'aident à mieux organiser ce qui se passe. Alors, cool, on a fini. Grande palette. J' ai un, deux, trois, quatre, cinq, six, sept, huit, neuf, 10, 11, 12, 13, 14, 15 couleurs, c'est génial. Donc, au lieu d'utiliser le refroidisseur et d'avoir cinq, j'ai en fait 10 couleurs supplémentaires ici, ce qui est génial. Maintenant, si je faisais de l'animation, vous pourriez réellement cliquer sur utiliser la vue essaim, donc je pourrais réellement regarder et voir ce que ce serait si ces couleurs se déplaçaient à l'écran et avaient un fondu à eux. Vous pouvez cliquer sur Utiliser GridView pour revenir à la regarder dans une grille. En fait, ces couleurs se mélangent assez bien. Donc, ce que je veux faire est de cliquer sur Afficher la liste des couleurs, et vous obtiendrez cette petite sortie ici. Disons que je vais de l'avant et commence un nouveau document dans Sublime Text deux et que je peux réellement cliquer sur Afficher pour le traitement. Si je clique sur Afficher pour le traitement, il crache toutes les couleurs en hexadécimal. Vous pouvez l'enregistrer en tant que fichier ASE que vous pouvez ensuite importer à nouveau dans Photoshop ou Illustrator, ou je peux copier des données dans le presse-papiers. Donc, je vais aller de l'avant et copier les données dans le presse-papiers, allez-y et cliquez sur Coller et maintenant j'ai toutes ces couleurs extraites de cette photo et prêtes à être utilisées dans le code. Donc, je peux enregistrer cela sur mon bureau en tant que colors.text. On va juste mettre ça sur le bureau. Donc, maintenant, je commence à enregistrer certaines des couleurs. Maintenant, si je ferme ceci et que je ferme effectivement l'outil de sélection de couleurs et que je le relance réellement. Si je devais importer dans cette deuxième photo, il faut mettre à jour. Vous devez mettre à jour. Vous insistez pour que vous mettiez immédiatement à jour. Donc, je vais vous laisser mettre à jour parce que vous devez mettre à jour. Il ne fait aucun doute que vous mettez à jour. Il est mis à jour. Outil d'écrêtage. Charger l'image. Poinçons vers le second. Parfois, avec le second, avec ce flou gaussien, les couleurs sont en fait dans beaucoup de cas, peuvent être un peu plus harmonieuses parce que encore une fois, vous n'avez pas ces divisions dures entre les couleurs, vous avez une belle gradation subtile entre les couleurs. Donc, parfois si je veux que les couleurs passent un peu mieux, encore une fois ce flou gaussien, comme vous pourriez le voir, fait parfois un meilleur travail. Alors, wow. Excellent outil pour extraire la couleur des images. Alors, commençons une nouvelle vidéo et je vais vous montrer un petit truc sur la façon de continuer à utiliser cette technique, mais en conjonction avec refroidisseur. Rendez-vous à la prochaine vidéo 26. Étendre Kuler: D' accord. Alors, comment pouvons-nous utiliser Kuler peut-être comme un endroit pour prendre cinq couleurs et l'étendre en quelque chose de plus grand ? Donc, par exemple, regardons la mise en place juste ici en haut. En fait, ce n'est pas mal. C' est deux bons bleus, deux bons verts, ainsi de suite et ainsi de suite. Donc, ce que je vais faire, c'est que je vais faire une capture d'écran. Je vais en fait juste de prendre une petite capture d'écran de ces couleurs et puis je peux aller de l'avant et fermer le navigateur et j'ai les nuances juste ici sur mon bureau. Maintenant, laissez-moi aller de l'avant et ouvrir cela dans Photoshop et encore une fois, je peux voir les couleurs sont. Maintenant, ce que je vais faire, c'est que je veux prendre cet ensemble limité de couleurs et l'étendre en quelque chose d'un peu plus grand. Donc, disons que je vais faire un nouveau document et je vais dire que ce document est 600 par 200. 600 pixels de large, 200 pixels de haut et boom ! On peut y aller comme ça. Maintenant, ce que je vais faire, c'est que je vais choisir ce bleu, puis je vais maintenir la touche Option enfoncée et sélectionner ce bleu foncé. Donc, maintenant, j'ai les deux couleurs qui se passent dans mon affaire de nuance de couleur thingamajig. Ensuite, ce que je vais faire, c'est basculer vers cette nouvelle image que j'ai créée et je vais en fait aller de l'avant et faire un dégradé, et quand je fais un dégradé, je peux voir haut que je passe d'une couleur plus claire à la couleur plus foncée. Donc, je vais juste maintenir la touche Maj enfoncée et je vais juste faire glisser d'une extrémité à l'autre, et donc maintenant j'ai créé un dégradé. Et bien sûr, je peux dire, « Économisez pour le Web », et je peux aller de l'avant et dire, « J'aimerais un gif s'il vous plaît. » Et combien de couleurs aimeriez-vous passer de la lumière à l'obscurité ? Donc, disons que je voulais six bleus. Tu pourrais venir ici à Colors et dire : « Hé ! Donne-moi six », et regarde ça. Vous commencez à obtenir le mouvement de la couleur plus claire à la couleur foncée en six étapes. Alors. Je vais aller de l'avant et cliquer sur Enregistrer. On va aller de l'avant et appeler ça Blue et on va l'enregistrer sur mon bureau. Super. Revenons à l'image et faisons la même chose avec les verts. Donc, je vais cliquer sur le vert plus clair, maintenir Option enfoncée et cliquer sur le vert plus foncé, basculer vers mon image ici, aller de l'avant et faire l'outil dégradé à nouveau, et juste aller de l'avant et dessiner ce vert. Encore une fois, je vais faire Enregistrer pour le Web. Peut-être que je n'en veux pas six cette fois. Peut-être que je veux juste quatre, donc quatre pas de la lumière à l'obscurité. Je peux aller de l'avant et enregistrer cela à l'écran comme green.gif. Ok, et je vais aller de l'avant et revenir à notre image ici et je pourrais essayer d'autres choses, comme à quoi ça ressemble quand on passe de ce vert clair à ce vert foncé ? Quel genre de couleur est-ce que ça va produire ? Et si je vais de l'avant et créer le dégradé et aller de l'avant et faire Enregistrer pour le Web, encore une fois, je pourrais peut-être changer cela en huit couleurs et je peux commencer à voir cette transition de la couleur plus claire à la couleur plus foncée. Donc, laissez-moi juste garder ça comme Trans pour la transition, qui sait. D' accord. Donc, maintenant que nous avons fait ça, je peux aller de l'avant et fermer toutes les images que j'ai. Maintenant, je pense que c'est juste blanc. C' est vrai ? Non, ce n'est pas seulement blanc. Voyez ce qu'ils font. Alors, faisons ça. Allons de l'avant et prenons ces nouvelles images que je viens de créer et les rouvrir dans Photoshop, d'accord ? Oh ! Je ne voulais pas faire ça. Continuez à placer des fichiers supplémentaires ? Non, merci. Désolé pour ça. Vous pouvez cliquer sur Ouvrir, puis me laisser cliquer sur le Bleu, le Vert et le Trans et cliquer sur OK. D'accord. Donc, maintenant encore une fois ce document ici est 600 par 200. Donc, ce que je voudrais faire est de créer un nouveau document qui est 600 par 800. D' accord ? Et laisse-moi aller chercher ce bleu et le coller ici, en haut. Laisse-moi aller chercher ce vert et le coller en haut et allons de l'avant et attrapons les trans. Peut-être que nous voulons utiliser ça et juste aller de l'avant et coller ça là. Cool. Laissez-moi aller à la couleur d'arrière-plan parce que ce n'est pas blanc et laissez-moi remplir l'arrière-plan avec cette couleur. Maintenant, ici, j'ai cinq en haut, quatre au milieu et huit en bas, puis ma couleur blanchâtre ici. Donc, maintenant que j'ai tous ces compilés en une seule sorte de puce maître, je pourrais en fait aller de l'avant et dire 32 No Dither et il va juste trouver toutes les couleurs qui sont dans ce. Il n'y en a pas 32, c'est toutes les couleurs qu'il pourrait trouver. C' est vrai ? Donc, alors je peux aller de l'avant et cliquer sur master.gif. D'accord ? Donc, maintenant j'ai un gif qui contient toutes ces couleurs que j'ai extraites de Kuler. D' accord ? Donc, laissez-moi aller de l'avant et fermer le reste de ces dogies, et maintenant, je peux aller de l'avant et lancer l'outil Colorpicking. Je peux aller de l'avant et dire Load Image. Je peux aller de l'avant et pointer vers master.gif. Encore une fois, il voulait faire 32 couleurs mais ce ne sont pas 32 couleurs donc il génère un tas de ces noirs. Je peux aller de l'avant et maintenir la touche Option enfoncée et encore une fois, je suis désolé la touche Contrôle, et supprimer ces couleurs supplémentaires que nous n'avons pas pu trouver. D' accord ? Wow ! Oui. Ces deux-là à la fin ou pas travailler pour moi. Je vais aller de l'avant et enlever ça. Donc, il y a quelques modifications supplémentaires. Ces deux couleurs sont assez correctes, mais ce sont les transitions entre ce vert et le bleu. Qui sait ? Peut-être que je le sens, peut-être que je ne le suis pas. Mais le fait est que tu peux aller à Kuler. Vous pouvez commencer avec cinq couleurs initiales, puis commencer à faire quelques dégradés sur eux pour réellement prendre ces cinq couleurs de base et les étendre dans une liste beaucoup plus grande. Encore une fois, vous pouvez venir ici et dire Afficher la liste des couleurs. Vous pouvez dire Afficher Pour le traitement, Copier dans le Presse-papiers. Je pourrais venir à mon fichier texte ici et payer de nouvelles couleurs dans ce document. Donc, je commence littéralement à construire ces tableaux de couleurs à partir d'images. Je peux prendre une image que je trouve et juste continuer à affiner les palettes, affiner les palettes. J' aurai des fichiers texte qui ont peut-être 10 ou 20 regroupements de couleurs différents que je finis par échanger dans et hors de programmes qui sont corrects. Impressionnant. Superbe tour. Internet High-5. Mettez votre main sur le moniteur. Alors, qu'est-ce qu'on fait de ça ? On a volé ces couleurs sur des photos. Nous avons trouvé ces très bonnes façons de compiler des tables de couleurs. Maintenant, nous allons passer à prendre ces couleurs et les mettre dans notre programmation. Donc, maintenant, lorsque ces actifs génèrent aléatoirement à l'écran, nous leur demandons de choisir une couleur dans cette table de couleurs. On se voit dans la vidéo suivante. 27. HColorPool: D' accord. Donc, dans Hype, nous avons trois façons différentes de traiter la couleur. Dans cette vidéo, nous allons commencer avec HColorPool. Maintenant, ce que j'ai fait est, vous pouvez voir ici à l'écran que j'utilise l'exemple dans les drawables H le Hype_objects.zip, l' un des drawables est HRect. Ici vous pouvez voir l'étape 1, build, build.pde. Maintenant, dans ce fichier particulier, nous exécutons notre configuration. Nous lançons une boucle pour exécuter un certain nombre de fois et nous les ajoutons simplement à la scène. Nous faisons un peu de randomisation pour la taille, la rotation et la localisation. Donc, si vous testez ce film, vous devriez remarquer qu'il jette juste au hasard un tas de trucs à l'écran. Donc, ce que je veux faire à ce stade est d'utiliser ceci comme point de départ. Donc, je vais créer un nouveau dossier ici appelé hColorPool. Je vais ouvrir ce dossier et dans hColorPool, je vais juste saisir cette étape une de HRect et le faire glisser vers ColorPool. Alors, laisse-moi juste mettre ça là. Donc encore une fois, dossier appelé hColorPool à l'intérieur, étape un, build, build.pde. Encore une fois, quand je lance le croquis, vous devriez remarquer qu'il génère juste au hasard un tas de carrés à l'écran. Donc, nous allons le faire pour que les remplissages obtiennent une sorte de couleur aléatoire. Maintenant, pour ce faire, en haut ici, je vais juste écrire HColorPool et je vais l'appeler couleurs. Encore une fois, c'est une classe à l'intérieur de Hype pour travailler avec la couleur. Alors, allons de l'avant et ajoutons quelques couleurs à ce pool de couleurs. Donc ici, je dirais, « Colors est égal à nouveau hColorPool () ; » pour terminer la ligne. Maintenant, à l'intérieur, c'est là que je vais mettre des couleurs. Donc, maintenant, juste pour le diable, je vais mettre en quatre gris et j'aime définir les couleurs comme hexadécimales comme vous les avez vues sortir de l'outil de sélection de couleurs. Alors, faisons un blanc. Donc, je vais dire FFFFFF, faisons une lumière, même comme un gris blanc clair F7F7F7 et faisons un autre gris clair, ECECEC, puis faisons un gris foncé 333333. Donc, les trois premiers sont très légers ; blanc à un gris très clair et ensuite ce quatrième est en fait un gris foncé. Maintenant, je vais mettre deux bleus. Donc, je vais dire 009a58 et je vais aussi mettre un autre bleu, 00616f. Pour finir, je vais mettre en deux couleurs orange FF3300 et FF6600. Donc, génial. Nous avons huit couleurs dans notre piscine de coloriage et encore une fois, traitez-le comme une boîte de crayons. Il va aller là-bas, choisir au hasard une de ces couleurs et on va les peindre au fond. Alors, faisons quelques changements. moment, notre coup est en fait cette couleur orange, donc je vais changer le trait en noir. Donc, je vais dire 000000 et maintenant pour remplir plutôt que de mettre une couleur, regardez ce que je vais faire, je vais créer un peu d'espace ici. Alors je vais dire : « Hey, les couleurs. Je veux .getColor () ». Maintenant, ce que cela va faire, c'est que la ligne quand elle va régler le remplissage, elle va en fait aller jusqu'à la ligne 9, elle va choisir au hasard une de ces couleurs et l'ajouter à la couleur de remplissage. Maintenant, si je vais de l'avant et teste ce croquis, vous devriez remarquer que tout devrait fonctionner comme prévu, il a fait un trait noir et choisit aléatoirement des couleurs dans le pool de couleurs. Maintenant, le peu intéressant est que chaque de ces couleurs a une probabilité égale de se faire choisir. Donc, chaque couleur a une chance sur huit de se faire cueillir. Donc, ce que je veux faire est d'ajouter cette idée de la couleur en attente. Comment ajouter du poids à des couleurs spécifiques plus que d'autres ? Alors, laissez-moi vous montrer comment faire ça. Je vais aller de l'avant et fermer ce fichier, enregistrer et fermer ce document. Dans hColorPool pour l'étape 1, je vais aller de l'avant et dupliquer cela à une étape deux. Maintenant, allons-y et ouvrons à nouveau ce fichier et à la place, ce que je vais faire, c'est que je vais enlever les couleurs en dehors du pool de couleurs. Je vais aller de l'avant et mettre le point-virgule fin de la ligne, compte tenu de quelques retours difficiles vers le bas. Ce que je peux faire, c'est que je peux dire, « Ok, créer un pool de couleurs et je vais ajouter les couleurs manuellement et vous dire combien d'entre elles je veux stocker. » Alors, laissez-moi vous donner un exemple. Je peux dire .add et à l'intérieur de .add je pourrais dire FFFFFF et je pourrais continuer faire cela, choisissons de nouvelles couleurs. Faisons EC, C3 ou blues et nos oranges. Alors, changeons ceci pour ECECEC. Changeons celui-ci à CCCCCC, changeons celui-ci à 333333, changeons ceci à ce bleu 0095a8, changeons celui-ci à 00616f. Ensuite, bien sûr, il y a deux oranges ; FF3300 et FF6600. Maintenant, c'est tapé un peu différemment, mais j' aime vraiment faire la couleur de cette façon parce que je peux spécifier l'importance de certaines couleurs par rapport à d'autres. Encore une fois, si je devais tester le croquis, il devrait sembler absolument identique en ce sens qu'il a choisi au hasard des couleurs hors du pool de couleurs. Dans le passé, je faisais des choses assez drôles où je disais, ajouter du blanc, du blanc, du blanc, du blanc, blanc, du blanc, du blanc, du blanc. Je ferais cela pour qu'il y ait plus d'instances de la couleur blanche que ces autres couleurs. Donc, quand il allait au hasard choisir, adapter choisi celui-ci, il deviendrait blanc et s'il a choisi au hasard et que je l'ai obtenu, il deviendrait blanc, et s'il a choisi au hasard celui-ci , il serait gris foncé. Donc, j'ajoutais juste plus d'instances d'une couleur afin de dire que je voulais qu'elle choisisse plus de ceux-ci qu'une autre. Maintenant, dans le pool de couleurs, il y a en fait un raccourci pour faire ça. Donc, si vous spécifiez le pool de couleurs de cette façon, si vous dites .add, vous pouvez dire FFFFFF, puis vous pouvez faire des virgules, puis spécifier combien d'entre eux vous voulez. Donc, dans le cas de ça, j'ai dit que je veux 20 de blanc. Donc, si c'était pour choisir au hasard, s'il a choisi les numéros 0 à 19, je saurais en fait qu'il devient couleur, cette couleur de blanc. Donc maintenant, si je teste mon croquis, blanc devrait être la couleur prédominante tout au long de cette pièce qui en fait est. Donc, je peux commencer à spécifier les couleurs que je veux afficher plus que d'autres. Donc, par exemple, si je me débarrassais de ça et alors je dirais juste, ok, cool. Je veux 15 orange foncé et cinq orange clair, et je teste le croquis, encore une fois vous devriez voir que l'orange domine principalement ce croquis. Donc, en spécifiant le pool de couleurs de cette façon, je pourrais réellement étiqueter quelles couleurs devraient se produire plus que d'autres. Donc, je dirais dans ce dernier croquis, j'ai fait quelque chose comme ça où je dirais, il y en avait neuf, il y en avait neuf, et il y en avait neuf. Pour les trois, j'en ai fait trois et pour le blues, j'en ai mis deux. Donc, vous pouvez voir que j'ai spécifié beaucoup plus de ces couleurs de gris plus clair , puis juste quelques gris foncé et puis deux des bleus sur l'orange. Donc, si je teste le croquis, vous devriez le voir à nouveau, vous obtenez beaucoup de ce gris clair qui se passe, un peu de bleu, puis l'orange. Parce que je ne l'ai pas spécifié, un nombre est évidemment la plus rare des couleurs. Donc, vraiment super astuce pour utiliser le pool de couleurs pour prendre ces couleurs que nous avons sorti l'outil de sélection de couleurs et de les pondérer, pour spécifier quelles couleurs se passent plus que d'autres. Maintenant, dans la prochaine vidéo, nous allons passer au deuxième type de classe de couleurs qui est Pixel Colorist. Donc, à ce stade, je vous invite à saisir des images, à voler des couleurs, à les faire passer à travers l'outil de sélection de couleurs, et à utiliser un pool de couleurs pour que votre œuvre soit colorée au hasard par les couleurs que vous avez extraites sur ces photographies. Ok, la prochaine vidéo est Pixel Colorist. On se voit là-bas. 28. HPixelColorist: Dans cette vidéo, nous allons couvrir le travail avec HPixelColorist et j'adore vraiment cette classe. C' est un truc que j'ai appris d'Eric Nowitski. Il utilise une photographie et la disposition des couleurs, et le flux, et le positionnement de la couleur sur une photo comme une carte pour voler la couleur et tirer dans l'illustration. Je vais aller de l'avant et créer un nouveau dossier appelé, HPixelColorist et je vais littéralement recommencer comme je l'ai fait avec hColorPool. Je vais aller de l'avant et ouvrir des objets HYPE, je vais à Hrec et copier l'étape une à nouveau. Laissons la piscine de couleurs tranquille. C' est fait alors commençons à nouveau. Encore une fois, si j'ouvre l'étape 1, ouvrez build, ouvrez build_pde, testez l'esquisse. Vous devriez voir juste un arrangement de scores. Maintenant, ce que je veux faire avec PixelColorist est d'utiliser un actif externe donc chaque fois que nous devons utiliser un actif externe à l'intérieur du dossier de construction, je vais créer un nouveau dossier appelé données et à l'intérieur de ce dossier est où encore, vous allez mettre n'importe quel type d'actif externe. Un jpeg, une police de caractères, un SVG ainsi de suite et ainsi de suite. Si je passe à Photoshop, vous pouvez voir ici que j'ai cette photo de varech, j'ai un flou gaussien de 10 dessus, donc les couleurs sont un peu écrasées et je vais aller de l'avant et dire, « Économisez pour le web, jpeg, maximum », et je vais juste l'enregistrer directement sur mon bureau. Je peux minimiser Photoshop, j'ai l'image ici sur mon bureau et je vais aller de l'avant et la faire glisser dans le dossier de données. Pour ce premier exemple, je veux charger la photo en arrière-plan afin que nous puissions avoir une idée de ce qui se passe. Pour ce faire, je vais juste faire un petit raccourci ici. Je vais dire, « h.add », et dans h.add, je vais dire, « New hImage », et à l'intérieur de hImage, je vais dire « kelp.jpg ». Si je teste l'esquisse, il devrait aller dans ce dossier de données, il devrait aller au jpeg et charger réellement ce jpeg dans l'arrière-plan donc maintenant je peux le voir ramasser à travers les rectangles. Les rectangles sont un peu gros. Rendons-les un peu plus petits en changeant la taille au hasard, 25 à 75. Maintenant, la place va être un peu plus petite. Maintenant, je vais aller au sommet et je vais dire, « HPixelColorist », et nous allons l'appeler couleurs, comme nous l'avons fait dans HColorPool. Ensuite, je vais écrire une ligne ici qui dit, « Couleurs d'accord, vous êtes égal à un nouveau HPixelColorist et vous devriez aller chercher kelp.jpg pour les informations de couleur. » Une autre chose que je peux aussi faire est de spécifier ce que je veux qu'il colore. Donc, dans ce cas, je vais dire, « FillOnly ». Donc ça va seulement colorer les remplissages et pas les coups. Si je descendais à mes quatre boucles ici, contrairement à ColorPool, nous n'allons pas utiliser getColor dans notre premier exemple. En fait, je vais aller de l'avant et garder le trait d'un, je vais changer la couleur du trait en noir 000000 et parce qu'il dit, « Remplissez seulement », je peux effectivement supprimer cette ligne ou réellement spécifier la couleur de remplissage. C' est parce qu'en bas sur la ligne 23, je vais dire, « Hé les couleurs, je veux que vous appliquiez la couleur à D », de sorte que la ligne 23 va passer par tous les D qui ont été créés ici, ça va aller jusqu'à ligne 11 et regardez le jpeg et tirez la couleur dans le fillOnly. » Maintenant, nous avons une meilleure représentation de ce qui se passe réellement ici et tout est lié à l'ancre. Si c'est l'illustration et que la tige d'ancrage est au centre, quand elle est positionnée au hasard à l'écran, cette ancre a un axe X et un axe Y spécifiques, donc 100,100. Ce qui se passe est sur la ligne 23 quand ApplyColor se déclenche, il monte à HPixelColorist, va au jpeg appelé kelp, va à la position X d'une position 100, Y de 100, regarde ce pixel unique qui est résidant entre 100 et 100 et dit, « Oh, c'est ce que la couleur est », puis tire cette couleur dans le remplissage. Il le fait à chaque fois qu'une de ces choses est randomisée sur notre écran. Il regarde les mêmes coordonnées exactes sur l'image et tire la couleur dans le remplissage. Allons de l'avant et fermons ceci et nous allons travailler quelques builds supplémentaires ici. Donc, je vais faire glisser l'étape un à l'étape deux et je vais aller avant et ouvrir build_pde et dans cet exemple, je vais juste supprimer la ligne neuf. Dans le premier, je vous montre l'image en arrière-plan, mais honnêtement, nous n'avons vraiment pas besoin de la voir. Je vais changer ma taille à 1,5 et je vais faire mon croquis. Donc, j'utilise l'image pour les informations de couleur, mais je n'ai pas besoin de voir l'image. Je ne l'ai fait que dans le premier exemple pour que nous puissions avoir une sorte de représentation de la façon dont sa position saisit la même couleur dans cette position. Mais honnêtement, nous n'avons pas besoin de voir la photo en arrière-plan. Allons de l'avant et faisons une troisième étape, et si nous faisons une troisième étape, allons de l'avant et ouvrons build_pde et dans le cas de celui-ci, je veux changer ceci de fillOnly à StrokeOnly. Changons le strokeWeight pour être trois et je n'ai pas besoin de spécifier la couleur du trait, mais je vais spécifier une couleur de remplissage et je vais changer la couleur de remplissage en un gris foncé, 111111. Maintenant, si je teste le croquis, cette ligne 9 devrait seulement appliquer la coloration aux traits. Je vais aller de l'avant et fermer ce fichier et je vais passer l'étape 3 et le copier à une étape 4 et je vais ouvrir build_pde et dans le cas de celui-ci, je vais dire FillandStroke. Nous allons garder le StrokeWeight à trois, mais je peux aller de l'avant et supprimer cet appel pour FillColor. Maintenant, si je fais ce croquis, tu ne peux pas vraiment dire qu'en fait un remplissage et un trait sont colorés en même temps. Si je mets en fait une petite ligne de code ici si je disais, « Alpha (100)," et puis j'ai couru le croquis, vous verrez qu'en fait un remplissage devient coloré et un trait devient coloré et seulement en mettant ce alpha (100) avons-nous le sentiment qu'il y a deux choses distinctes qui deviennent colorées. Cela dit, je devrais peut-être faire un autre exemple, comme une étape cinq, et ce sera le dernier que je ferai ici. Alors allons de l'avant et copions cette étape quatre à une étape cinq. Je vais aller de l'avant et ouvrir le build_pde ici et dans le cas de celui-ci, je vais changer un peu le code. Au lieu d'appeler FillandStroke, je vais juste passer le jpeg pour la coloration, et au lieu de la ligne 21 appelant l'ApplyColor, je vais aller de l'avant et supprimer cela. Je vais aller de l'avant et garder le StrokeWeight de trois mais débarrassons de l'alpha et disons, « Hey, je veux faire quelque chose avec le coup et hé, je veux faire quelque chose avec le remplissage. » Maintenant, dans le cas de ce fichier, je veux qu'il saisisse la couleur et la mette dans le trait et je voulais saisir la couleur et la mettre dans le remplissage mais avec le remplissage, je veux appliquer alpha. Donc, je ne veux pas appliquer alpha aux deux, je veux seulement appliquer alpha au remplissage. Maintenant, tout comme un hColorPool, je peux dire, « colors.getColor », et je vais copier ceci et le coller dans le remplissage. Maintenant, GetColor dans l'exemple hColorPool, allait jusqu'au tableau de couleurs en sélectionnant aléatoirement une et en le tirant vers le bas. Ce que nous devons faire ici est getColor dans le cas de HPixelColorist car il a besoin de connaître une coordonnée X et une coordonnée Y afin qu'il puisse regarder cela sur le jpeg. Je vais le faire en disant, « getColor », mais ensuite obtenir l'axe d.x et obtenir l'axe d.y. Donc, je mets ce d.x et ce d.y et j'ai oublié de mettre une virgule. Donc d.x, d.y. Je vais faire la même chose pour le remplissage. Je vais dire d.x, d.y sauf sur le remplissage, je vais dire, « Je veux que l'alpha soit 100. » Donc je dis, « colors.get color ()  », et à l'intérieur de cela je dis, « Obtenez d.x, obtenez d.y », puis en dehors de cet appel de fonction, je dis, « 100 pour l'alpha ». Regardez ce qui se passe quand je fais ce croquis. Quand je lance ça, tout d'un coup, toutes les couleurs sont les mêmes. La raison pour laquelle toutes les couleurs sont les mêmes est que d.x et d.y n'ont pas encore d'emplacement. L' emplacement n'est pas défini avant la ligne 19. Donc en ce moment, il revient juste 00 qui se trouve être de la même couleur. Donc, si je devais prendre cette ligne 19 ici où je suis en fait en train de définir l'emplacement aléatoire, les axes x et y aléatoires, et en fait déplacer cela pour être la première chose afin qu'il définit l'emplacement aléatoire en premier. Quand d.x et d.y sont tirés sur les lignes 16 et 17 maintenant, ils sont maintenant uniques x et y unique. Donc maintenant, quand je lance ce croquis, vous devriez remarquer que toutes les couleurs sont maintenant uniques, mais seulement le remplissage devient alpha et l'AVC ne l'est pas. HPixelColorist encore une fois un outil vraiment génial pour échantillonner les couleurs d'une image, et encore une fois cette image n'a pas besoin d'être une photographie. Vous pouvez ouvrir Photoshop dès maintenant, commencer à faire des dégradés, commencer à faire des pools de couleurs. « Je veux du rose ici, je veux du vert ici », puis quand nous générons au hasard notre composition, il y a en fait une structure à ce qui se passe couleur sage à l'écran parce que nous avons défini le vol de la couleur de ce particulier photographie. ColorPool, vraiment génial. Spécifier la boîte de crayons, saisir pour ces boîtes crayons. HPixelColorist voler une image. Donc, maintenant, je veux que nous passions à la prochaine vidéo qui va utiliser une nouvelle classe appelée ColorField et ColorField nous permettra de définir des dégradés radiaux de couleur dans l'espace. De bonnes choses. Voir la vidéo suivante. 29. HColorField: Donc, la classe de couleur finale avec laquelle nous allons travailler est hColorField. Maintenant, le champ hColor est probablement mieux décrit comme ce que vous voyez à l'écran en ce moment. C' est un moyen pour nous de spécifier un point, puis d'attacher un gradient radial à ce point. Ce qui va se passer, c'est que si j'attache au hasard œuvres d'art si quelque chose arrive ici sur ces coins extérieurs, alors ça va devenir noir. Au fur et à mesure qu'il commence à pénétrer à l'intérieur, il va passer du rouge foncé au rouge moyen au rouge vif au milieu. Maintenant, le truc amusant à propos de cette classe particulière est, si je devais mettre ça ici et puis si je devais créer une copie et mettre la copie ici, vous remarqueriez qu'il n'y a pas d'interaction entre ces deux points. Donc, si je devais changer cela en bleu par exemple, encore une fois l'œuvre d'art serait colorée en bleu ici. Il passait lentement à un bleu foncé. Finalement, il reviendrait noir ici au centre et ensuite ferait son chemin dans le rouge. Donc, la bonne chose est que, si je devais changer la taille de ce gradient radial, alors passons ça à 600 par 600 et laissez-moi changer celui-ci à 600 par 600. Remarquez ce qui se passe maintenant. Dès que les deux couleurs commencent à se chevaucher, elles se mélangent violet au milieu. Donc, chaque champ de couleur va faire la même chose exacte. Vous pouvez spécifier des points dans l'espace, spécifier la couleur qui existe dans le centre absolu, spécifier le rayon de ce dégradé radial et si les dégradés radiaux se chevauchent, alors ce qui va se passer est qu'il va réellement commencer à mélanger les couleurs à l'écran. Encore une fois, nous devions jaunir à ce stade. Il commencerait à passer à une orange, finirait par trouver son chemin vers un rouge, ainsi de suite et ainsi de suite. Cool. Alors, allons de l'avant et faisons un nouveau dossier à l' écran appelé chaque champ de couleur. Vous l'avez deviné, nous allons revenir directement dans les objets battants et nous allons aller directement à HRect et copier l'étape 1 à nouveau. L' amour commence à partir de zéro. Maintenant, allons de l'avant et ouvrons le champ hColor, étape 1, build, build.pde, et juste pour répéter, générant aléatoirement un tas de boîtes à l'écran. Alors, allons de l'avant et allons au sommet ici et dire que HColorField est couleurs est ce qu'on appellera ça et voyons ce que je vais faire ici. Disons, nous allons nous débarrasser du StrokeWeight et disons qu'il y a NoStroke. Donc, nous allons juste être des champs de coloration. Maintenant, la couleur de remplissage que je veux mettre en noir, 000000 et vous allez voir pourquoi ici très bientôt. Maintenant, allons de l'avant et ajoutons notre couleur. Donc, je vais aller de l'avant et dire, « colors = new hColorField () ; » fin de ligne. Maintenant, ce que je vais faire ici, c'est, avec hColorField, vous devez spécifier quelle est la largeur et la hauteur du champ. Maintenant, dans ce cas, je veux que la largeur et la hauteur soient de la même taille que le croquis. Donc, je pourrais taper 600, 600 ou je peux juste faire la largeur, la hauteur. D'accord ? Je vais en fait enchaîner sur une couleur ici. Donc, parce que je ne veux pas que ce soit une longue ligne, le demi-côlon je vais juste me donner un retour difficile pour le déposer quelques lignes et utiliser l'onglet pour revenir. Alors, allons de l'avant et ajoutons une orange. Donc, je vais aller de l'avant et dire, AddPoint. Dans le point, je veux, donc j'ai ma toile et je veux pointer pour être au centre exact de l'écran. Donc, pour arriver au centre, je vais aller de l'avant et dire, « largeur divisée par 2, hauteur divisée par 2. » Ainsi, les premiers arguments sont la position du point. Vous pouvez mettre en 100, 150, vous pouvez mettre en largeur diviser par 2, hauteur divisée par 2. Maintenant, le troisième argument est la couleur que vous voulez utiliser. Donc je vais aller de l'avant et utiliser l'orange. Donc, je vais dire FF3300 et puis, le quatrième argument est le rayon du gradient. Donc, je vais dire 0,3. Maintenant, tout comme Pixel Colorist, vous pouvez spécifier ce qui devient coloré. Donc, je vais aller de l'avant et dire, fillOnly (), comme ça. Maintenant encore une fois, aussi comme Pixel Colorist, je vais aller de l'avant et ajouter colors.ApplyColor à d. OK. Donc, puis encore une fois, cela devrait courir à travers tous les ds générés aléatoirement qui sont HRECT et devrait mapper à ColorField. Encore une fois, c'est très similaire à un coloriste Pixel car il s'agit de la couleur étant à un certain endroit dans l'espace. Ainsi, l'ultime FF3300 est situé sur un axe x et y de largeur divisé par 2, hauteur divisée par 2. Ensuite, il serait gradué lentement dehors. Maintenant, testons le croquis et voyons ce que nous obtenons. D' accord. Donc, nous obtenons cette orange juste au centre et puis elle se gradue lentement mais se dégrade vers le noir. Il est gradué en noir parce que nous avons dit sur la ligne 18 que la couleur de remplissage était 000000. Donc, si par exemple je devais changer cela en blanc ; FFFFFF, voyons ce qui se passe. Au centre de l'écran, nous obtiendrions l'orange, puis il passait lentement au blanc. Donc, c'est la bonne chose à propos de ColorField, c'est que vous spécifiez un champ de couleur mais s'il tombe en dehors de ce champ de couleur, alors il passe à ce que vous avez dit que la couleur de remplissage de base était, dans ce cas sur la ligne 18, J' ai dit que la couleur était FFFFFF. Donc encore une fois, il commence à l'orange, puis se déplace lentement vers le blanc. Maintenant, je vais revenir au noir ici. Encore une fois, vous pouvez le faire avec n'importe quelle couleur. Je pourrais dire un bleu, je pourrais dire 0000FF. Encore une fois, si je teste mon movei, j'obtiendrais cette orange au milieu, puis il passerait lentement au bleu. Je peux avoir une alléluia ? C' est de bonnes choses, c'est bon. Ça a l'air bien. Vous êtes heureux ? Plutôt heureux. Génial. Revenons au noir, 000000. Retour au noir, c'est certainement une référence ACD. Cool, l'enregistrement, la fermeture, permet de faire une étape deux option glisser. Étape deux et réouverture de build PDE. Maintenant, à l'étape deux, ajoutons deux points de couleur, mais mettons un à gauche et un à droite. Donc, pour celui à gauche, je vais juste dire que l'axe des x est zéro. Donc, le x, x va être zéro mais la hauteur est toujours, hauteur divisée par deux, donc ça va être au centre. Ensuite, je vais copier cette ligne et je vais la coller. Sur celui-ci, je vais juste dire que sa position est la largeur. Donc, maintenant c'est la largeur de la toile. Changons ça en bleu, 0095a8. Mais regarde ce que je vais faire, je vais garder le rayon au point 3. Je vais aller de l'avant et tester ici. Encore une fois, tout comme cet exemple dans Illustrator, j'ai l'orange qui se passe à gauche, j'ai ce bleu sarcelle qui se passe à droite, mais parce que les couleurs n'interagissent pas les unes avec les autres, ce centre est toujours ramasser le noir. Donc, je vais aller de l'avant et sauver et fermer ça. Je vais enregistrer l'étape deux à une étape trois et je vais aller de l'avant et ouvrir la construction PDE. Donc, sur cet exemple, tout ce que je vais faire est de changer le rayon. Donc, disons que je dis 0,5 et 0,5. Maintenant, ça devrait être assez grand là où les deux couleurs interagissent réellement les unes avec les autres. Donc, si je teste ce croquis, vous devriez remarquer que vous obtenez l'orange sur la gauche, le bleu sarcelle sur la droite, et puis à nouveau comme ces couleurs commencent à interagir les unes avec les autres, nous obtenons une zone grise ici au centre . Maintenant, faisons une dernière construction ici. Donc, je vais enregistrer et fermer ça. Laissez-moi sauver, c'est une build quatre et ouvrez build PDE. Alors, laisse-moi juste faire ça. Donc, nous savons que c'est orange. Oh, mon Dieu. Josh, tu es incroyable. C' est l'orthographe, orange. C' est une sarcelle, et allons de l'avant et ajouter deux couleurs supplémentaires. Donc j'en ai un à gauche, un à droite, faisons un en haut et un en bas. Faisons cette couleur jaune sur le dessus et nous allons rendre cette couleur verte sur le fond. Maintenant, je veux dire avec divisé par deux, et la hauteur est zéro, et la couleur est FFFF00. Donc, c'est la largeur divisée par deux. Donc, c'est au centre de la largeur, mais zéro sur le Y. Alors obtenez celui sur le fond, je vais dire, largeur divisée par deux et hauteur. Disons que cette couleur est 00FF00. Maintenant, regarde ça. J' ai 0,5, 0,5, 0,5, 0,5, 0,5, ces rayons sont grands. Donc, si je teste le croquis ici, vous devriez remarquer que tout se mélange. Donc, peut-être que j'ai trop de jaune qui se passe, trop de vert, et je veux juste les refuser. Donc, je peux changer le rayon. Je peux dire que c'est 0.3 pour le jaune, 0.3 pour le vert. Donc vraiment, mon orange et sarcelle sont les plus grands rayons et mon jaune et vert sont plus petits rayons. Maintenant encore, si je teste ce croquis ici. Donc, maintenant j'ai une idée de ça. Je vois un rayon plus petit pour le vert, un rayon plus petit pour le jaune. Cool. Je veux changer cela un peu plus, je veux dire, remplir et caresser. Je veux copier le remplissage et le coller. Au lieu de dire pas de coup, je vais dire que la couleur du trait est noire. Ajoutons également un poids de trait de deux, et faisons le remplissage avec un Alpha de 100. Alors maintenant, quand je sauvegarde et teste ce croquis, j'ai spécifié ces points de couleur. Je colore à la fois le trait et le remplissage, mais seul le remplissage est en fait obtenir cet Alpha. Donc, technique vraiment cool pour mettre de la couleur dans l'espace. J' adore l'utiliser avec la connexion dans le mouvement Leap. Vous pouvez littéralement mettre des points de couleur dans l'espace. Donc, si j'utilise le mouvement de saut par exemple, et que je peins à la main, je peux mapper les couleurs à certains quadrants. Donc, vous avez peut-être vu des vidéos que j'ai posté où je viens à droite et il peint en bleu, je viens à gauche il peint orange, je viens en haut, jaune, bas, vert. Donc, j'aime vraiment utiliser le champ de couleur pour mapper les couleurs dans l'espace. Donc, nous avons trois super classes de couleurs. On a chaque pool de couleurs, on fait juste un petit résumé ici. Nous avons chaque pool de couleurs où nous disons, « Hey, boîte de crayons. Ce sont les crayons. Choisissez ces crayons. Ce sont les seuls crayons que vous pouvez utiliser. » Nous avons un coloriste de pixel qui échantillonne les informations de couleur d'une photo, mais nous avons aussi un champ de couleur spécifiant les gradients radiaux dans l'espace, et encore une fois, nous obtenons ce beau mélange qui se passe. Donc maintenant, nous en avons fini avec la section 5, travailler avec la couleur. Nous allons maintenant passer aux sections 6 et 7, qui sont les mises en page. Donc, nous sommes si proches en termes d'avoir tout ce processus et cette structure en place. Nous dessinons des actifs visuels et les mettons à SVG. Nous travaillons avec la couleur, donc nous allons mettre la couleur sur le côté. Ensuite, nous allons passer à chaque disposition de grille et de forme, où nous sommes réellement attachés. Tu vois, c'est juste aléatoire. Nous attachons simplement des illustrations au hasard à l'écran, mais pourquoi ne pas avoir cette illustration en fonction d'un motif ou d'une mise en page spécifique, et ces deux mises en page nous aideront à le faire. Donc, nous avons presque toutes les pièces du puzzle en place. Nous allons dessiner des éléments visuels, travailler avec une banque de couleurs que nous arrachons, puis travailler avec des mises en page pour générer un motif à l'écran. Donc, je suis excité parce que nous nous rapprochons de la magie noire. Se rapprocher de la magie noire. Rendez-vous dans la section suivante. 30. Introduction : HGridLayout: Permettez-moi de vous donner un exemple. Je suis à Linz, en Autriche, et je dîne avec des amis. L' un des gars avec qui je dîne, son travail à la photo était en fait de programmer les cheveux Sulley dans Monster's Incorporated et on parlait de hasard. Le hasard seul n'est pas particulièrement joli. En fait, si vous deviez réellement randomiser les cheveux de Sulley dans Monster's Incorporated, les cheveux iraient dans toutes les directions et il n'y aurait aucune sorte de motif ou d'élégance à cela. À l'intérieur du framework battage médiatique, nous avons plusieurs classes pour générer réellement la mise en page, générant une mise en page aléatoire. D' accord ? Donc, pour cette section particulière, nous allons couvrir chaque mise en page de grille. Donc, son seul but est d'aligner les choses dans une grille. Donc, vous pensez peut-être en vous-même, « Pourquoi utiliserions-nous une mise en page de grille pour nous aider avec le hasard, une mise en page de grille semble très structurée ? ». Oui, c'est le cas. Mais où nous allons commencer à muter est, comment les objets ont-ils tourné au hasard dans la cellule de la grille ? Comment s'échelonnent-elles au hasard dans les limites de la grille ? Je pense que ce que vous trouverez beaucoup dans cette conversation que j'ai eue avec le monsieur qui a programmé les cheveux de Sulley dans Monster's Incorporated, nous commençons par une structure de base et nous sommes en train de sortir de cette structure de base. Vous découvrirez que beaucoup de choses vont être plus esthétiques, parce que je pense qu'en tant qu'humains, nous n'aimons pas le hasard, nous n'aimons pas le chaos, nous aimons les choses à commander, nous aimons les listes nous aimons les aimants sur notre réfrigérateur et chaque ligne a un article que nous devons acheter à l'épicerie. Nous aimons la structure. Nous aimons que les choses soient organisées. Alors, comment pouvons-nous randomiser cette organisation ? 31. HDrawablePool + HRect: D' accord. Bienvenue à la section 6, qui est la mise en page H-Grid. Avant de commencer à plonger dans les mises en page, il y a une dernière chose que je veux partager avec vous, et c'est ce code que vous voyez à l'écran. En ce moment, ce code à l'écran utilise une boucle quatre. Quatre boucles exécute un certain nombre de fois et il attache cette ressource. Maintenant, le problème avec ce code est que vous n'attachez qu'une chose. Sur la ligne 9, il est dit, D est égal à nouveau HRECT et c'est le seul atout avec lequel nous peignons réellement. Mais que se passe-t-il si je veux faire cette idée où j'ai plusieurs actifs ? Je suppose que nous allons dessiner beaucoup de différentes œuvres d' art et cartographier beaucoup de différentes œuvres d'art dans cette composition. instant, ce code ne prend en charge qu'une chose, HRect. Donc, afin de corriger cela avant d'entrer dans les mises en page, nous allons couvrir quelque chose appelé hDrawablePool et ce que fait hDrawablePool est très similaire à une boucle quatre. Il nous permet d'exécuter quelque chose un certain nombre de fois, mais il nous permet également de spécifier les actifs artistiques qui sont utilisés. Donc, au lieu d'une seule chose, nous pourrions en fait pointer vers cinq SVG différents ou un HRECT et une boucle H. Donc, nous pouvons pointer vers beaucoup d'actifs différents dans hDrawablePool. Maintenant, hDrawablePool a beaucoup d'autres fonctionnalités comme si nous faisions l'animation, vous pouvez faire des choses comme le recyclage des actifs qui est vraiment génial pour la mémoire, vous pouvez attacher quelque chose à l'écran, libérer quelque chose de l'écran. Donc hDrawablePool a beaucoup de fonctionnalités, mais nous allons juste l'utiliser très fondamentalement et nous allons juste travailler à travers un petit fichier d'étape ici et nous allons en avoir une idée. Donc, gardons cela à l'écran juste pour que nous puissions voir les différences subtiles ici. Donc, je vais créer un nouveau dossier appelé hDrawablePool, et je vais aller de l'avant et ouvrir ce dossier et évidemment à l'intérieur de hDrawablePool je veux créer un dossier appelé Étape 1, et à l'intérieur de là je vais créer un dossier appelé Build, et à l'intérieur de Build j' ai un PDE de construction et une copie de PDE battage médiatique. Maintenant, cette construction PDE je suis littéralement juste copier celui-ci que vous voyez à l'écran en ce moment. Donc, je vais aller de l'avant et ouvrir ça et je vais juste supprimer quelques bits ici. Donc, à gauche, nous avons utilisé une boucle quatre, droite, nous allons utiliser hDrawablePool. Maintenant, vous verrez que je ne vide configuration, Je mets la taille h.init ce, Je mets une couleur de fond comme un lisse sur la ligne dix oui je sais que je veux faire h.Drawstage. Alors, allons de l'avant et commençons à écrire du code de pool. Donc hDrawablePool et nous allons juste appeler ce pool, et puis ce que je vais faire est que je vais dire pool est égal à nouveau hDrawablePool et voici où vous spécifiez combien d'actifs vous voulez peindre avec. Donc ici dans la boucle quatre, nous avons dit 100 donc sur la ligne huit je vais dire hDrawablePool. Vous allez tirer 100 actifs. Maintenant, une partie de cela va obtenir un peu abstrait, mais laissez-moi juste écrire le code et nous allons arranger ça. Donc, continuons et ajoutons le bit qui spécifie réellement l'illustration utilisée création de cette illustration et la demande de la peinture. Donc, je vais aller de l'avant et dire pool.auto ajouter deux étapes. Maintenant, je mettrais un point-virgule, et puis bien sûr, je peux enchaîner beaucoup d'événements sur. Mais nous allons tellement enchaîner que je vais aller de l'avant et faire ce que j'ai fait dans tous les fichiers, ce qui est amener ce point-virgule sur quelques lignes et nous allons juste commencer à ajouter un tas de choses que nous allons généralement enchaîner juste tous dans la chaîne. Mais cela va prendre autant de temps. Donc, la première chose que je veux faire est juste de dire .add et. add est l'endroit où je spécifie ce que je vais peindre avec. Donc, disons juste dans ce cas nouveau HRect. C' est le capital R comme ça. C' est donc l'une des choses avec lesquelles je voudrais peindre, c'est un HRECT. Maintenant, je vais rincer à d'autres bits de code ici. Je vais dire, « On Create », puis je vais dire, « demander tout ». D'accord. Maintenant, c'est le on create que je vais vider beaucoup de code ici, alors restez avec moi, mais ce sont les trois choses fondamentales avec lesquelles nous travaillons quand nous disons l'ajout automatique à la scène. Un, avec qui on peint ? Alors j'ai dit, « .add HRect. » Demander tout dit fondamentalement me donner tous 100 d'entre eux. Donc, c'est cette requête tout ce qui va fondamentalement déclencher toutes les 100 choses à la fois tout comme cette quatre boucle le fait. Quatre boucles exécute toutes les 100 choses à la fois. Plus tard, si nous faisions de l'animation, vous n'utiliseriez pas la requête tout ce que vous pourriez faire une minuterie et alors vous pourriez réellement accélérer la création des actifs avec une sorte de minuterie. Mais en ce moment, nous voulons juste jeter tout sur l'écran. Donc, je vais dire demander tout. Maintenant, quand demander tous les feux et qu'il va se déclencher, vous savez 100 fois c'est sur créer. C' est ce qui arrive à chaque chose individuelle qui se dessine à l'écran. Alors pensez que sur créer va courir un 100 fois. Donc, c'est dans le on create que je veux spécifier fondamentalement ce code ici de la ligne 17 à la ligne 11 comme le type de choses que les propriétés qui sont définies sur un HRect. Maintenant, je vais dire que cela sur create a un peu de structure de code à elle et laissez-moi juste vider cela. Donc, le on create ici ceci je vais pousser ce paren de proximité vers le bas quelques espaces, et laissez-moi juste travailler sur un peu du code que je dois taper ici. Donc, le on create va en fait être un nouveau HCallback et ensuite le rappel va avoir quelques informations à l'intérieur, et je vais dire quelque chose comme le vide public run et OBJ objet. Et le support ouvert ferme le support. Maintenant, dans ce vide public, je vais dire quelque chose comme HDrawable. D est égal à HDrawable- si proche Josh, si proche OBJ. Donc, c'est cette ligne14 maintenant donc ce qui se passe est qu'un 100 fois cela sur create se déclenche et à l'intérieur de ceci sur create, nous avons ce rappel. Ce rappel crée une instance de notre drawable appelé D, et nous disons, « Hé, D est égal à cet objet drawable que vous avez spécifié ici sur la ligne 10 qui se trouve être un nouveau HRect. » Maintenant que nous avons cette distribution en D nous pouvons commencer à utiliser le même code exact que nous avons fait ici. Donc, je peux réellement prendre ceci un peu de code ici et encore me donner un peu de retours durs et en fait coller et je dirais d et puis vous définissez le poids de course ainsi de suite point-virgule pour terminer la ligne. Maintenant, c'est un peu plus de code que d'utiliser une boucle à quatre, mais il y a beaucoup d'autres améliorations que nous pouvons faire si nous structurons tout de cette façon. Maintenant, faisons juste ce croquis et voyons ce qui se passe. Donc, je vais aller de l'avant et sauver ça. Je vais aller de l'avant et exécuter le croquis et il devrait sembler absolument identique à l'exemple de quatre boucles. Donc, vous pourriez dire comme bien Josh que je veux vraiment utiliser un pool que vous je ne suis pas tout à fait sûr, la réponse est oui, et la raison pour laquelle est parce que vous pouvez commencer à faire des choses comme ça où this.add est où vous êtes spécifiant avec quoi il peint. Alors, pourquoi ne pas simplement copier ce coller un autre pour un autre HRect, mais sur ce HRect je fais quelque chose comme arrondi et je dis que l'arrondi est de 10. Donc, en ce moment, ce pool dessine un 100 éléments, mais il va au hasard choisir l'un de ces deux HRect soit un HRect sans arrondi, soit un HRect avec arrondi. Donc, si je devais tester ce croquis, si vous regardez à l'écran ici, vous verrez que dans le cas de cela, il a utilisé le HRECT sans les coins arrondis et celui-ci avec les coins arrondis. Maintenant, l'autre raison pour laquelle j'aime vraiment utiliser hDrawablePool est juste comme pool de couleurs. Nous pouvons en fait attendre ces actifs qui vont être utilisés. Donc, par exemple, si je voulais avoir plus de HRECT sans arrondir. Je pourrais venir ici et dire la virgule 20 et cela signifierait qu'il y a 20 instances du HRECT qui n'ont pas d'arrondi. Donc, si je devais tester ce croquis ici, vous devriez remarquer que les coins carrés devraient être la majorité, mais bas et voici, ici, nous en avons un qui a le coin arrondi. Donc, je préfère l'utiliser parce que nous pouvons utiliser le même type exact d'attente d'actifs dans cet environnement. Maintenant, dans la vidéo suivante, je vais aller plus loin et en fait pointer ceci vers SVG. Alors allons-y et fermons cette vidéo, passons à la prochaine et je prendrai la même fonctionnalité HDrawablePool, mais nous allons la lier à nos actifs SVG, ok ? 32. HDrawablePool + HShape 1: Il est vraiment en train de se réunir à ce stade. Nous allons travailler avec HDrawablePool et y attacher des actifs SVG. Donc, voici six actifs SVG utilisant quelques triangles sympas. Voici le numéro 2, voici le numéro 3, le numéro 4, le numéro 5, et le numéro 6. Donc, juste mis au point quelques formes vraiment basiques. Notez que cette œuvre est de 50 pixels par 50 pixels. Donc, ces petits croquis eux-mêmes sont, ces petits atouts vectoriels sont minuscules. Ils sont 50 par 50. Maintenant, ce que je vais faire est, ici je les ai sur mon bureau, ici j'ai ce dossier appelé HDrawablePool. Je vais aller de l'avant et passer à l'étape 1 que nous venons de terminer, et prendre ceci et en faire une deuxième étape. Je vais aller dans Build et je vais créer un nouveau dossier appelé Data. Dans le dossier Data, je vais mettre ces ressources externes. Je vais aller de l'avant et faire glisser SVG un à six, et le vider dans ce dossier Data. Maintenant, allons de l'avant et ouvrons, construisez PDE et commencez à faire quelques ajustements ici. Le premier, c'est que nous travaillons juste avec HWrecked. Au lieu de cela, je veux travailler avec ces actifs SVG. Donc, continuons et modifions simplement ceci pour dire, nouveau HShape et vous pouvez spécifier svg1.svg. Je ne veux pas faire d'atout en attendant, donc cette ligne devrait ressembler à ça. Maintenant, il y en a six, alors continuons et copions deux, trois, quatre, cinq, six et modifions ça en deux, trois, quatre, cinq, six. Donc, maintenant chaque pool drawable a été spécifié six actifs SVG externes dans lesquels peindre avec. Génial. Je vais faire quelques ajustements. Je vais changer HDrawable pour H forme une H forme Obj. Maintenant, je ne vais rien changer. Je vais garder tout comme il était avec une piste, où je vais garder le poids de course un, le coup et la couleur orange, le remplissage un gris foncé, la taille, aléatoire 25 à 125, pas tout à fait sûr comment qui va fonctionner, tourner au hasard 360, emplacement largeur aléatoire, hauteur aléatoire. Maintenant, si je lance ce croquis, vous devriez maintenant remarquer que HDrawablePool est maintenant en train de peindre avec ces actifs SVG. Donc, maintenant quoi que vous dessinez, dans n'importe quel outil vectoriel que vous voulez, vous pouvez commencer à sortir ces fichiers SVG et les ajouter au pool hDrawable, et tout comme le pool de couleurs, chacun de ces actifs SVG a un dans six chances de se faire peindre. Maintenant, vous remarquerez qu'aucun des styles n'a pris effet et que la raison en est que nous n'avons pas ajouté cette ligne de code, où nous avons dit, « Activer le style et le transformer en faux ». Par conséquent, veuillez remplacer le style dans Illustrator et appliquer ce style ci-dessous. Coup d'orange et remplissage de gris foncé. Allez-y et exécutez ce fichier et maintenant nous devrions remplacer le style à l'intérieur d'Illustrator et utiliser ce qui est spécifié ici. Maintenant, si c'est le cas, je veux ajouter quelques choses. J' ai trouvé que l'utilisation de trucs comme StrokeJoin de Round et l'utilisation de StrokeCap de Round, ont tendance à me donner de meilleurs résultats pour ce que je regarde à l'écran et par la suite quand je sors réellement cela à un vecteur à la fin de cette classe. Donc, chaque fois que je travaille avec SVG, je règle généralement mes Join et Caps pour arrondir. Maintenant, allons de l'avant et ajouter une partie de cette coloration aléatoire, par exemple, n'est-ce pas ? Donc, nous avons HDDrawablePool fonctionne, nous avons choisi au hasard certains de nos six actifs SVG, allons de l'avant et ajouter quelques couleurs. En haut, couleurs hColorPool. Je vais copier les couleurs que nous avons faites avant, qui étaient ces blancs, ces gris clair, ce gris foncé, deux bleus et deux oranges. Je veux changer la couleur du trait pour être noir 000000, et je ne veux pas spécifier un remplissage parce que je vais avoir un pool de couleurs le faire pour moi. Donc, je peux venir ici, et je peux dire D.Randomcolors, et puis, je peux dire hey couleurs.fill seulement comme ça. Maintenant, à ce stade, je devrais être capable d'exécuter l'esquisse, erreur de syntaxe, point-virgule manquant. Oui, c'est absolument vrai, ligne 34, fin de ligne. Essaie encore Josh. Courir. Super. Donc, maintenant vous pouvez voir. Oh mon Dieu. C' est tout à fait ensemble, non ? HDrawablePool est la colle. C' est cette chose qui va lier toutes ces pièces ensemble. Donc, les lignes 13 à 18 parlent à un tas d'actifs externes. Ligne neuf spécifiant quelques couleurs, ligne 34 définissant ces couleurs, remplissage seulement. Mais, ce que j'aime à propos de hDrawablePool, c'est que vous pouvez faire des actifs en attente comme nous l'avons fait dans hColorPool. Ainsi, par exemple, cet actif ici est SVG6. J'adore ça. Donc, nous pouvons venir ici et dire, hé SVG6, donnez-moi 20 de ceux-là. Maintenant, quand je fais le sketch, vous allez obtenir plus de SVG6 attaché à l'écran que les cinq autres, n'est-ce pas ? Donc, c'est essentiel parce que, souvent, je vais dessiner un tas de trucs et l'un est le point focal. Comme si un compositionnellement fonctionne vraiment, vraiment bien. Je vais faire ce genre d'attente, pour que je puisse spécifier que cet actif sera peint plus que les autres. Les autres soutiennent, mais peut-être que je ne veux pas qu'ils soient la cible. Donc, c'est cette ligne 18, où je peux réellement spécifier combien d'instances de ce SVG sont ajoutées, me permet de contrôler la quantité de choses que nous voyons à l'écran. Donc, génial. Je vais fermer ça. On va sauver ça. Dans la vidéo suivante, je vais faire une troisième étape, et je vais vous montrer quelques nouveaux actifs SVG qui rendent même cette composition plus complexe. Dès que nous aurons fini, nous passerons à l'organisation. Parce que, en ce moment, nous ne faisons que randomiser la largeur, randomiser la hauteur, et c'est juste jeter des choses à l'écran. Comment pouvons-nous utiliser une classe comme la mise en page de grille pour réellement organiser cela dans une structure ? Super. Rendez-vous à la prochaine vidéo. 33. HDrawablePool + HShape 2: Ok, ornement national mongol. On a scanné cette page, incroyable, un tas de trucs vraiment sympa là-bas. Eh bien, vous avez probablement regardé ce laps de temps où j'ai bien dessiné l'un d'eux en fait, j'en ai dessiné six et les voici, donc ici et je viens de les nommer comme mongo1.svg, voici mongo2.svg, mongo3, mongo4, mongo5 et mongo6. Notez que toute cette œuvre est de 300 pixels par 300 pixels, d'accord ? Maintenant, cette œuvre est évidemment beaucoup plus détaillée que les premiers svgs que nous venons d'utiliser dans la dernière vidéo. Maintenant, je vais aller de l'avant et les fermer d'Illustrator, voici sur mon bureau, je vais de l'avant et je sauve notre étape trois, dans la construction, aller dans les données et je vais supprimer ces svg1 à six et je vais pour aller de l'avant et jeter dans mon mongo1 à six. Ensuite, je vais ouvrir mon build_pde et je peux changer cela mongo1 et je vais faire les ajustements ici sur le reste d'entre eux. Donc on a mongo2, trois, quatre, cinq, six. Dans le cas de ça, je vais enlever la pondération. Donc, encore une fois, ils ont une chance sur six de se faire tirer. Maintenant, chaque fois que j'utilise quelque chose de super détaillé, je suis un peu nerveux à propos de la ligne 11 qui dit, « Hé, dessine 100 choses. » Je pourrais planter le traitement, je pourrais avoir une erreur qui dit qu'il manque de mémoire parce que c'est beaucoup de choses. Donc, essayons de changer cela pour dire 10 actifs juste pour commencer. Maintenant, l'autre chose que je veux changer est ici sur la taille, rappelez-vous que l'illustration est de 300 pixels par 300 pixels à l'intérieur de llustrator. Donc, peut-être que je veux dire que la taille aléatoire pourrait être quelque chose comme 50 par 50 à 300. Donc, je sais au maximum, c'est sa taille d'origine à 300 par 300 et au minimum il serait 50 par 50, ça peut fonctionner, ça pourrait ne pas fonctionner. Encore une fois, testons simplement le croquis pour voir. Je pense que tout va bien avec l'univers, allons de l'avant et faisons ce croquis et voyons ce qui se passe. Donc, à ce stade, je peux commencer à jouer avec la taille. Donc, dans ce cas, peut-être 50 est trop petit, regardez ce petit gars ici, vous pouvez à peine le voir, donc je peux commencer à faire des choses maintenant comme, eh bien 150 serait la moitié de sa taille d'origine et peut-être que je veux aller nu, peut-être que je veux aller 400 ou peut-être 150 Je pense que c'est trop petit, peut-être 200, 400, donc de cette façon 300 est le milieu de la route, nous allons 100 pixels de moins et 100 pixels de plus. Si je refaisais le croquis, je pourrais voir comment les choses se mélangent à l'écran. Donc, cool il a couru avec 10, je peux probablement monter cela, alors venons ici et disons que la piscine a 50 actifs svg, allez-y et exécutez-le et nous devrions voir l'écran mélanger beaucoup plus qu'avant. Donc cool, à ce stade, j'ai vraiment l'impression d'avoir fini avec hDrawablePool, nous commençons à coller ces idées ensemble en utilisant hDrawablePool pour spécifier combien d'actifs nous dessinons avec, point ajouter qui nous dessinons, ont -ils un poids ou un précédent par rapport à certains des autres actifs ? Nous avons chaque pool de couleurs ici, donc les choses sont colorées au hasard. C' est maintenant à ce stade que je veux m'éloigner de certains de ce juste hasard à l'écran et commencer à le structurer un peu plus. Donc, la prochaine vidéo, nous allons implémenter chaque mise en page de grille dans RhDrawablePool et commencer à organiser certains des actifs à l'écran et voir quelles variations nous pouvons trouver. Vidéo suivante, HGridLayout. On se voit là-bas. 34. HGridLayout: Donc, toute cette section nous amène à ce point, en tirant dans HGridLayout. Encore une fois, toutes ces pièces du puzzle tombent en place. Donc, je vais créer un nouveau dossier sur mon bureau appelé HGridLayout et je vais aller à l'exemple hDrawablePool, étape 2. L' exemple de l'étape 2 utilise les actifs SVG de 50 pixels par 50 pixels qui sont de nature triangulaire. Donc, laissez-moi copier cette étape 2 dans HGridLayout et laissez-moi renommer ceci tant qu'étape 1 et je vais ouvrir build.pde et encore une fois, j'ai mes six actifs SVG à l'intérieur du dossier de données. Maintenant, voici le code. Ici, je vais faire quelques ajustements. La première est, je vais sortir le 20 de SVG 6. Donc, en éliminant cela, chacun des actifs a une chance sur six de se faire tirer. Maintenant, je suis après le .add, je vais me donner quelques retours durs et je vais simplement dire que DrawablePool a une mise en page attachée à elle et le genre de mise en page qu'il y a attachée est un nouveau HGridLayout. Maintenant, il y a des choses que nous devons spécifier qui est ; où voulez-vous que cette grille commence ? Donc, je vais aller de l'avant et dire, StartX est zéro et je vais dire que Starty est zéro. Maintenant, l'argument suivant est parce que c'est une grille et parce qu'une grille est constituée de cellules, de lignes et de colonnes, quel est l'espacement entre chacune de ces cellules ? Donc, je vais aller de l'avant et dire, espacement et je vais dire, 50,50 parce que notre illustration est de 50 pixels par 50 pixels, donc cela devrait construire une grille parfaite où chaque cellule est 50 pixels distance d'une autre et même descendre à la ligne suivante. Maintenant, parce que c'est une grille, il y a des lignes, il y a des colonnes, mais vous avez seulement besoin de lui dire ce que sont les colonnes et dans ce cas, je vais dire 11. Maintenant, la seule raison pour laquelle vous devez spécifier des colonnes est que hDrawablePool a un certain nombre d'actifs qui sont dessinés. So,100 divisé par 11 vous indiquerait combien de lignes la grille va avoir. Donc, il n'y a pas besoin de spécifier des lignes, nous avons seulement besoin de spécifier le nombre de colonnes que nous voulons. D'accord ? Maintenant, il y a des choses que je dois changer ci-dessous en D. Par exemple, je ne veux pas spécifier une taille parce que l'illustration est 50 par 50, nous allons juste l'attacher 50 par 50. Donc, je vais aller de l'avant et supprimer cette ligne. Je construis une grille ici, je ne veux pas voir la rotation juste pour l'instant et la dernière chose est, est cette dernière ligne de .location. Si vous supprimez .location qui était la ligne qui a randomisé toutes les ressources à l'écran, si vous supprimez cela, la mise en page a priorité dans hDrawablePool. Donc maintenant, à chaque fois que ceux-ci sont créés, cette mise en page et toutes les instructions pour la structure de cette grille seront poussées dans la création de D, qui est notre HShape. Voyons ce qui se passe. Donc, je vais aller de l'avant et faire ce sketch et vous devriez remarquer quelques choses. La première est, c'est que notre grille se termine ici. Maintenant, la raison pour laquelle la grille se termine juste là est parce que nous avons seulement dit que le hDrawablePool était 100. Donc, si je devais vraiment venir ici et dire, eh bien, qu'est-ce que 11 fois 11 ? Ce serait 121. Donc, si je fais maintenant mon croquis, vous devriez remarquer que c'est une grille parfaite, 11 lignes et 11 colonnes. Donc, 11 fois 11, le pool drawable devrait être 121 actifs afin de faire une grille parfaite. Maintenant, parce que sur la ligne 38 nous avons dit, H.Center qui affecte StartX, Starty. Donc, puisque l'illustration est de 50 pixels par 50 pixels, si l'ancre au H.Center est le centre, cela signifie que le point central est à 25,25. Donc, si on démarre X, Starty à 0,0 alors cela signifierait que l'œuvre est 25,25 négative sur le X et négative sur le Y, donc on l'a accrochée de ce côté ici. Donc, en fait, ce que je vais faire est, pour le moment, je vais juste commenter H.center. Maintenant, si je commente H.center et exécute mon croquis, maintenant la grille devrait commencer à 0,0. Maintenant, parce que c'est 50 par 50, nous avons un peu d'espace supplémentaire où je pourrais mettre autre ligne et un autre ensemble de colonnes parce que mon croquis ici est 600 par 600, mais au lieu de cela, je vais changer StartX, Starty pour être 25,25. Maintenant, en faisant 25,25, signifie simplement que c'est la position de départ de l'axe X et de l'axe Y. Donc, maintenant j'ai cette grille qui flotte dans l'espace ici. Maintenant, parce que mon oeuvre est 50 par 50, faisons quelques tests ici. Faisons semblant un instant que StartX était zéro et Starty était zéro et vous pourriez dire que l'espacement était 55 par 55 et cela signifierait qu'il y a un tampon de cinq pixels entre chacune des cellules, donc je peux les espacer. Ou vous pourriez dire que l'espacement est 50 sur le X et 60 sur le Y. Donc, cela signifierait qu'ils sont parfaitement bien dans chaque rangée, mais alors il y a un espacement de 10 pixels entre chaque ligne. Donc, l'espacement et StartX et Starty est l'endroit où je peux commencer à changer certains de ces arguments pour changer la structure de ma grille. Disons ceci par exemple, disons que j'ai dit 25 pour le X et 25 pour le Y. Cela signifierait que chaque cellule se chevauche 25 pixels sur le précédent. Donc, peut-être que ce chevauchement pourrait être intéressant, qui sait. Donc, revenons à l'endroit où je veux qu'il soit, c'est-à-dire StartX 25 et Starty 25 et faisons l'espacement 50 et l'espacement 50 et allons de l'avant et lançons notre film. Maintenant, quand nous tournons notre film, encore une fois, nous avons cette belle et belle grille qui se passe. Maintenant, à partir de cette structure de base, je peux commencer à enregistrer les étapes de plusieurs façons différentes et juste modifier pour voir ce qui se passe. Alors, regarde ça. Allons de l'avant et sauvegardons et fermons ceci et je vais passer l'étape 1 et l'enregistrer comme une étape 2. Si j'ouvre le build.pde, je pourrais dire, « Hé, pendant un moment, je ne veux pas voir SVG un à cinq. » Donc, laissez-moi juste les commenter et je ne peins qu'avec SVG six. Je vais de l'avant et je dirige mon film et encore une fois il devrait construire ma grille de 121 actifs mais je vois parfaitement SVG six tout le chemin. Ok, très bien. Mais, que se passerait-il si je faisais une rotation aléatoire ? Chacune de ces cellules individuelles de 90 degrés. Voyons ce qui se passe. Je vais faire ça en disant que pivoter, non ? Ensuite, dans la rotation, je vais dire des entiers, donc c'est un nombre entier, et puis je vais dire aléatoire (4) fois 90, non ? Donc aléatoire (4) va me donner zéro, un, deux, trois, non ? Zéro fois 90 est zéro, 90, 180, 270. Donc, je reçois les quatre rotations de cette œuvre. Maintenant, quand ils tournent au hasard, laissez-moi aller de l'avant et faire ce croquis et voir quel genre de résultats nous obtenons. Maintenant, regarde ce qui s'est passé. D'accord. La raison pour laquelle cela est arrivé est parce que la ligne 38, nous avons commenté .Anchorat (H.CENTER), ce qui signifie que- Je n'ai pas un morceau de papier. Ok, ça veut dire qu'on fait tourner le papier d'ici on est, de zéro, puis on tourne 90 degrés et puis on tourne à 90 degrés, non ? Donc, dans ce cas, peut-être que .Anchorat (H.CENTER) est exactement ce que nous recherchons mais commentons la rotation et mettons le .Anchorat (H.CENTER) en arrière. Maintenant, quand je lance ce croquis, parce que je l'ai centré, j'ai foiré mon début X et démarrer Y, parce que je l'ai décalé à nouveau par 25 pixels sur le X et 25 pixels sur le Y en disant .Anchorat (H.CENTER). Donc, pour corriger cela, le début X devrait être 50 et le début Y devrait être 50. Si je fais cela, il devrait remettre la grille belle et centrée au milieu de l'écran avec un peu de tampon autour de l'extérieur. Cool. Maintenant, cette rotation va sembler beaucoup plus intéressante parce que maintenant elle tourne autour de ce point médian et maintenant, quand je fais mon croquis, vous commencez à voir des motifs vraiment sympas qui quand je fais mon croquis, commencent à émerger de cette œuvre, non ? Très cool. Donc, encore une fois, je peux juste commencer à muter autant de façons différentes. Ok, utilisez ce SVG avec ces numéros, utilisez ce SVG avec ces nombres et ça commence juste à muter, muter, muter. Alors, faisons autre chose. Je vais aller de l'avant et fermer ça et je vais sauver ça, et je vais sortir une étape 3 ici. Dans la troisième étape, essayons de randomiser la taille, non ? Donc, l'œuvre est toujours 50 par 50, alors que faire si je devais randomiser et faire la taille de l'œuvre par incréments de 50. Maintenant, ça ressemblerait à ça, où tu dirais .taille, ok. Maintenant, je veux que ça commence à 50 pixels plus quelque chose, ok, et dans ce quelque chose est où je mets entier, disons aléatoire (2) fois 50. Cool. Donc, aléatoire (2) va revenir à zéro ou à un. Zéro fois 50 est zéro et, mais vous ne pouvez pas avoir une taille de zéro, parce que vous ne verrez rien dessus. C' est pourquoi je fais ça 50 plus à la fin. Donc, zéro aléatoire fois 50 est zéro, plus 50 est 50 est 50. Cool. Donc, nous savons qu'au plus petit niveau, ça va être 50 sur 50. Aléatoire une fois 50 est 50. Cinquante plus 50, c'est 100. Alors maintenant, cette ligne 40. Travaillez avec moi ici, aimez-moi, embrassez-moi. Cette ligne 40 ici va soit choisir un aléatoire 50 par 50 ou au hasard 100 par 100. Cool. Maintenant, quand je tourne mon film. Un film. Arrête de dire un film. Quand je fais ce croquis, maintenant il commence à muter en quelque chose de beaucoup plus intéressant parce que je randomise la taille de l'actif de 50 par 50 ou 100 par 100, et quand ils se chevauchent, tout ça, vérifier cela, cela finit par être 100 par 100 mais parce que j'ai mathématiquement créé ces lignes en utilisant une grille à l'intérieur d'Illustrator même si je monte à l'échelle deux fois, les lignes vont en fait correspondre, ce qui est génial. Maintenant, si je devais dire que je voulais que ce soit aléatoire (4), cela signifierait que je reçois quatre tailles, 50 par 50, 100 par 100, 150 par 150 et 200 par 200. Encore une fois, si je suis venu ici et que je décommente pour que j'utilisais les six actifs, cela signifierait que cette œuvre va même devenir étrangère. D' accord ? Comme ça. En ce moment, tout tourne autour de ce point central, et donc rappelez-vous juste que si je commente cet Anchorat, alors cette rotation est un balayage beaucoup différent et si c'est un balayage beaucoup différent, alors peut-être que ça va marcher pour moi mieux à l'écran. Donc, ce genre d'idées est quelque chose avec lequel j'ai beaucoup joué, et je veux vraiment vous montrer une URL ici où j'ai ma page a Pinterest. Sur ma page Pinterest, j'ai en quelque sorte ajouté mon archive de conception complète, et il y a un petit projet ici appelé Social Grid. La grille sociale, c'est que je prends cette idée, ce code que vous avez ici, n'est-ce pas ? Laisse-moi juste le trouver, bingo ! C' est SVG six avec la rotation aléatoire de 90 degrés. Donc, j'ai pris ce moteur et muté tous les paramètres pour essayer de voir combien de types différents d'arrangements de grille je pouvais trouver, non ? Donc, certains étaient très basiques et d'autres je randomisais la rotation, l'échelle et je commencerais à obtenir ces modèles vraiment, vraiment fascinants. Ce qui est sympa dans la série, c'est que, tout ce truc en ce moment est juste noir et blanc, il n'y a pas de couleur du tout ajouté à ces documents et juste en ajoutant de la couleur, nous ajoutons juste une toute autre couche à la complexité de ces modèles. Donc, j'ai vu que quelques-uns d'entre vous sont des designers textiles, non ? Donc, ce devrait être des bananes. Cela signifie que vous pouvez travailler dans Illustrator, ce genre de petites textures, puis utiliser HGridLayout pour construire cette structure mais randomiser dans la structure. Encore une fois, dans le cas de ce fichier particulier, la seule chose que je randomise est sa rotation aléatoire et sa taille aléatoire, mais je permet la mise en page de structurer réellement l'illustration à l'écran dans un système très rigide, un système de grille. Encore une fois, si vous avez profité de l'occasion pour regarder mon site Web, j'espère certains d'entre vous ont vu ce que j'ai fait avec Libs Elliot à Toronto, au Canada, où, encore une fois, elle prend ce dossier que vous avez en ce moment et générant au hasard ces grilles, puis en utilisant cette information de grille pour réellement faire des courtepointes et elle est à la main coudre ces courtepointes où c'est juste, soufflé d' esprit, ce qui est incroyable. D' accord. Donc, chaque mise en page de grille. Vraiment bon exemple ici, alors j'espère que vous allez télécharger le fichier zip, vous allez muter certaines de ces étapes et savoir quel type de modèles vous pouvez créer en changeant certains de ces numéros. En plus de cela, vous pouvez commencer à créer vos propres ressources visuelles à l'intérieur d' Illustrator et obtenir un éventail infini de choses différentes. Par exemple, voici un ensemble parfait de choses qui se trouve sous des trucs que j'ai fait pour... Oh, voici une couverture de livre que j'ai faite, Aim High, Keep Moving. Encore une fois, c'est en utilisant le même système exact où j'utilise la disposition de la grille et juste un tout nouvel ensemble différent de géométrie et de mappage à une grille qui est super cool. Puis il y en a un autre que j'ai fait. Laisse-moi juste essayer de le trouver. Laisse-moi aller à mes conseils et je veux chercher Orbit. On y va. Que se passe-t-il lorsque vous mélangez des formes circulaires ? D' accord. Encore une fois, cela utilise HGridLayout. Donc, je suis super excité de voir quel genre d'actifs vous dessinez dans Illustrator et ce qui se passe lorsque vous commencez à les mapper pour trouver genre d'arrangements. Maintenant, cette section est terminée. Nous allons passer à la section sept qui est HShapeLayout et vous allez le perdre parce que HShapeLayout est incroyable. Donc, nous vous verrons dans la section suivante. 35. Introduction : HShapeLayout: Je vais vous montrer une tonne d'exemples en utilisant cette prochaine esthétique. Celui-ci est mise en page en forme de H et j'adore le calque en forme de H. Disons que je dessine un bouquet de fleurs, non ? Donc, je dessine un tas de fleurs indépendantes et ensuite ce que je peux faire, c'est que je pourrais faire un autre atout qui est ma main. Donc, ce que fait la mise en page de forme est qu'elle regarde le dessin et si elle frappe un pixel transparent, elle essaie à nouveau. Donc, disons que je dessine six fleurs et disons que nous écrivons un programme qui dit, je veux dessiner 10 000 fleurs. Ce qui va arriver, c'est qu'il va commencer à cueillir au hasard jusqu'à ce qu'il me frappe la main. Donc, ma main entière sera en fait composée de toutes ces petites fleurs indépendantes que nous avons faites, et je peux réellement commencer à définir ces formes aléatoires sur ma toile et chaque fois que le programme s'exécute, il va Dis : « Oh, j'ai ces formes. J' ai ces banques d'actifs ». Il y a des instructions sur quels types de banques d' actifs sont attachés à quel type de formulaires. Croyez-le ou non, cette empreinte entière est générée à partir de ce guerrier. Vous pouvez voir qu'il a une petite ceinture ici et si vous regardez le modèle qui est généré le long de cette ceinture, c'est en fait juste ici. Vous pouvez voir que la forme de la ceinture se produit juste sur ce truc haut ici. Ici, c'est de nouveau randomisé. Vous pouvez voir la ceinture. Ce qui vous reste n'est plus le matériau source d'origine. Ce n'est plus ce guerrier. C' est cette fusion de l'abstraction que, pour moi, c'est là que je trouve la beauté en prenant quelque chose familier et en remixant d'une manière qui devient quelque chose de complètement différent. 36. HShapeLayout: Très bien, Section 7. Tellement génial, je peux à peine me contenir. J' adore ce prochain projet. Voilà ce que je vais faire. Nous venons de couvrir chaque mise en page de la grille, Section 6. Si je vais à HGridLayout, et je vais à l'étape 1, et je vais à construire, et je vais à build_pde, et je lance ce film, il construit une grille. Donc, nous allons travailler sur ce fichier. Donc, je vais créer un nouveau dossier appelé HShapeLayout, et à l'intérieur de HShapeLayout, je vais copier cette étape une. Donc, HShapeLayout, je copie l'étape 1, et allons de l'avant et ouvrons ce build_pde ici. Alors, de bonnes choses. Maintenant, que fait HShapeLayout ? C'est des bananes. Ce que je vais faire, c'est regarder mon film, mon film est 600 par 600. Donc, je vais passer à Photoshop et je vais créer un nouveau document de 600 par 600. Voilà, et je vais prendre l'outil de type et j'ai choisi Georgia Bold à 400 points, et je vais juste écrire, « Salut ». Je vais sélectionner ceci et le centrer comme ça. Maintenant, ce que je vais faire, c'est, vous pouvez voir que j'ai deux couches ici à l'intérieur de Photoshop, je vais cacher le calque d'arrière-plan. Donc, c'est transparent, et j'ai ce genre qui traîne. Ce que je vais faire est Enregistrer pour le Web, et sous Enregistrer pour le Web, je vais venir à PNG-24. Maintenant, la bonne chose à propos de PNG-24 est qu'il supporte la transparence, et donc vous pouvez voir que j'ai mon petit checkboard en arrière-plan parce que PNG peut gérer la transparence. Je vais enregistrer ceci sur mon bureau en tant que shapeMap.png. Cool ? Cool. Fait. Maintenant, je vais minimiser ça parce que nous allons revenir à cette science. Maintenant, je suis à l'intérieur du dossier appelé HShapeLayout. Je suis à l'intérieur de l'étape 1. Je suis à l'intérieur de build, et il y a un dossier appelé Data et c'est là que nous mettons tous nos actifs externes. Donc, je vais copier ou je vais déplacer shapeMap.png dans le dossier Data. Maintenant, c'est une affaire maléfique. Je vais éditer ce build_pde. La première chose est que je ne veux pas dessiner avec toutes ces formes. En fait, je veux seulement dessiner avec svg5, et svg5 se trouve être un triangle. Donc, il y a sgv5, un beau triangle. Donc, on va juste dessiner avec ce triangle pour commencer. Je vais modifier des trucs à l'intérieur. On ne va pas encore faire la mise en page, juste une seconde. Nous allons activer le style (false). Je ne veux pas avoir d'accident vasculaire cérébral. Je ne veux pas avoir d'accident vasculaire cérébral, je suis trop jeune. Je suis trop jeune. NoStroke, ma prochaine classe, comment faire de l'humour nerd ? Ancre à H.CENTER, j'aime ça, et je vais mettre d'autres trucs, mais je vais attendre. Maintenant, que fait ShapeLayout ? Eh bien, ce que vous pouvez faire est, vous pouvez dire que la mise en page est égale nouvelle HShapeLayout. Maintenant, vous devez passer un argument de .target. HShapeLayout veut savoir, qu'est-ce que j'utilise ? Qu' est-ce que j'utilise comme forme ? Je suis vague pour la raison ici. Maintenant, je veux définir ce qu'est la forme et donc, je dis, .target (). Je vais aller de l'avant et mettre cette parenthèse étroite sur sa propre ligne et c'est parce que je vais tabuler ici, et dire que la cible de forme est une nouvelle hImage et à l'intérieur de la nouvelle hImage, je vais dire le nom de notre PNG, donc ShapeMap. png. Maintenant, allons de l'avant et changeons ici en haut, hDrawablePool à 100. Je suis vraiment excité à propos de ça. Ce qui va se passer, c'est que HShapeLayout dépasse la cible, et la cible est la forme à laquelle les actifs doivent s'en tenir. Donc, si je devais enregistrer et exécuter ce croquis, que se passe-t-il dans le cas de la mise en page de forme est, c'est bizarre, que fait-il ? Eh bien, il regarde votre image, c'est choisir au hasard une position, et si ce pixel est transparent, il reprend à nouveau. En fait, il continue à choisir un espace sur l'image jusqu'à ce qu'il touche réellement les pixels non transparents. Si elle touche des pixels non transparents , l'illustration s'y accroche réellement. Alors j'espère que quelque part, les esprits explosent. Parce que cela signifie qu'à l'intérieur de Photoshop maintenant, je peux réellement utiliser le geste, forme et le type, et je peux dessiner des formes. Je peux dessiner ce que je veux, et les illustrations vont coller aux pixels non transparents. Alors, sacrée vache, faisons quelques modifications ici. Pool est égal à hDrawablePool (2000), je veux joindre 2 000 œuvres d'art. Maintenant, notre oeuvre est de 50 pixels par 50 pixels, donc je veux l'abaisser un peu. Donc, je veux qu'il soit plus petit pour que vous puissiez vraiment le voir coller au type. Donc, je vais dire .size et à l'intérieur de .size, allons de l'avant et mettons entier et aléatoire. Disons que sur un minimum, c'est 10 pixels par 10 pixels, et un maximum de 30 pixels par 30 pixels. Ajoutons également une rotation aléatoire. Donc, je vais aller de l'avant et mettre dans une rotation ici, et je vais dire (int) aléatoire (360). Tu es prêt ? On y va. Allez-y et exécutez le croquis et maintenant 2 000 de svg5 collent à n'importe quelle forme que vous faites à l'intérieur de Photoshop. Donc j'espère que maintenant, vous commencez à comprendre les possibilités de la façon dont je fais beaucoup de mes impressions génératives. Vous savez beaucoup de fois, je vais dire, « Bon, je veux ce genre de formulaire ici et je veux au hasard générer un tas de choses juste dans cette zone, » et la mise en page de forme va coller mes actifs aléatoires à cette zone. Alors, regarde ça. Sauvons ceci, fermons, continuons et sauvegardons une étape deux. À l'intérieur de l'étape deux, je vais ouvrir build.pde. Je vais retourner à Photoshop ici. Je peux aller de l'avant et fermer ça. En fait, à l'étape deux, build , data, je vais rouvrir shapeMap.png. Donc, si j'ai ceci ouvert, juste vérifier ceci, je peux supprimer ceci. Essayons quelques trucs, mettons un carré là, mettons un rectangle ici, passons à l'outil ellipse et dessinons un cercle. Donc, je ne fais que définir des formes. Maintenant, si je devais, encore une fois, enregistrer ceci en tant que PNG, et cette fois mettons-le à l'intérieur de ShapeLayout, étape deux, build et données. Donc, j'écris shapeMap.png, remplacer, remplacer. Basculez pour sous-lier le texte deux, enregistrez et exécutez l'esquisse. Bien sûr, ça colle à ces actifs. Encore une fois, vous pourriez même venir ici avec un pinceau si vous le vouliez, et vous pourriez faire ce genre d'affaires. Enregistrez en PNG, écrasez, shapeMap.png, basculez vers le texte de sous-ligne deux, allez de l'avant et construisez votre esquisse, et encore une fois, vous verrez maintenant qu'il est en fait mappé à cette forme. Donc, ShapeMap est tout simplement génial parce que si vous commencez à regarder certaines des choses que j'ai faites, alors allons à ma page Pinterest, et regardons quelque chose. Regardons ce type ici. On va faire cette violette ici. Donc, si vous regardez ça, regardez ces petits cercles blancs. Vous remarquez qu'aucun des cercles blancs n'est en bas ? Pourquoi c'est ça ? Eh bien, c'est parce que j'ai défini un ShapeMap juste dans cette zone, juste comme ça, et dit, « Oh, ok écoute. Je ne veux que des cercles s'attachent à cette zone. » Donc, quand je dirige le film, je mettrais au hasard des cercles à l'intérieur de ces positions. Donc maintenant, je peux commencer à définir des formes dans mon code, et dire, « Ok, je veux des choses mappées à ces formes. » Encore une fois, j'habilite encore la grandeur du hasard, mais c'est contrôlé. C' est un scénario contrôlé que je définit ce qui va où et tout ça. Vraiment, j'espère que vous allez vraiment profiter de ce cours, parce que HShapeLayout est amusant. Donc, à ce stade, vous pouvez prendre ce code que j'ai zippé et attaché à cette leçon et vous pouvez à nouveau utiliser Photoshop pour définir n'importe quelle forme. La chose à retenir est que HShapeLayout recherche des pixels non transparents. Donc, si un pixel est transparent, il va continuer à ramasser jusqu'à ce qu'il trouve un pixel non transparent. Si elle touche un pixel non transparent , l'illustration s'en tiendra à cette forme. Donc, super excitant. Super. Passons à la Section Eight et parlons de la façon dont nous allons prendre les fichiers HGridLayout, les fichiers HShapeLayout, et comment allons-nous les exporter vers des actifs avec lesquels nous pouvons travailler. Sont-ils des images basées sur des pixels ? Sont-ils des images vectorielles ? Donc, nous allons passer à cela dans la dernière section, et ensuite nous parlerons de quelques réflexions finales. Très bien, à la section suivante. 37. Introduction : Fichiers de sortie: Donc, vous êtes maintenant à l'étape finale de ce processus. Donc, à ce stade, ce que je veux faire est de sortir ce contenu de l'écran et de le retourner dans un format avec lequel je peux travailler. Jetons un coup d'oeil à cette composition par exemple. Encore une fois, généré aléatoirement, mais renvoyé vers un système vectoriel. Je voulais que cette zone soit très, très calme. Donc, tous ces petits cercles minuscules qui ont été générés aléatoirement dans cette section, j'ai pu supprimer. Regardez le numéro huit, si vous regardez directement vers le bas, il y a un cercle qui est parfaitement aligné au centre avec le huit. Est-ce que c'est arrivé au hasard ? Non, Josh l'a mis là. Ce cercle a probablement été généré ici et je l'ai très délibérément déplacé directement sous les huit. Donc, alors que 90 pour cent de cela est généré au hasard, 10 pour cent est que je rentre et que je nettoie des choses, que je déplace des choses. Mon espoir est que vous êtes assez à l'aise avec illustrateur, que vous voudriez revenir dans cet environnement vectoriel, afin que vous puissiez faire ce genre d'édition compulsive obsessionnelle. Je veux dire TOC. On sort ensemble. On sortait ensemble. 38. letsRender / mauvais: C' est ça. Section huit, sortez les fichiers. Donc, wow, on a tout ça en place. Nous avons dessiné nos atouts visuels. Nous avons appris comment les peindre à l'écran. Nous avons appris à voler des couleurs à partir de photos et à tirer ça dans notre travail. Nous avons appris à joindre ces ressources externes dans une mise en page de grille. Nous avons appris à attacher ces actifs dans une forme. Maintenant, comment faire pour le sortir du traitement ? Je pense à quatre vidéos qu'il me reste à faire. Commençons par le premier. Donc, je vais faire un nouveau dossier appelé LetsRender. D'accord. À l'intérieur de LetsRender, je vais aller à HGridLayout, et je vais passer à l'étape 1, et je vais ouvrir build.pde, et je vais juste vous montrer ce fichier. C' est celui qui utilise HGridLayout. Maintenant, ce code que nous allons écrire va fonctionner dans tout. Donc, cool, je vois cette grille à l'écran, je le veux, je veux la prendre. Maintenant, ce que je vais faire, c'est que je vais copier l'étape 1 de HGridLayout et que je vais le copier dans LetsRender. Maintenant, allons de l'avant et ouvrons ce build.pde, et pourquoi ne pas faire ce que le site web de traitement nous dit que nous devrions faire. Ce qu'il dit, c'est que si la ligne 47 est là où on dessine la scène, on peint la scène, on sauve ce qui se passe. Donc, si vous deviez aller sur le site Web de traitement, il serait dit SaveFrame. Dans SaveFrame, il y a tellement de formats d'image différents que vous pouvez passer ici. Par exemple, je pourrais dire render.jpg. Maintenant, si j'enregistre et construit ce croquis, regardez ce qui arrive à mon dossier. Je vois ce qui se passe à l'écran, et dans mon dossier, il crache render.jpg. Maintenant, je peux aller de l'avant et fermer le croquis, je peux ouvrir le JPEG à l'intérieur de Photoshop, et bien sûr, vérifier cela, il a rendu ce que je vois à l'écran. Maintenant, c'est un JPEG et JPEG a un peu de compression. Si vous commencez vraiment à zoomer ici, JPEG n'est pas notre ami. Donc, c'est trop mignon Chewbacca pour Josh Davis. Donc, je n'aime pas ça. Donc, je vais fermer ça hors de Photoshop, et je vais retourner et je vais changer ça. Je pourrais dire render.png, je pourrais sauver, je pourrais construire notre croquis. Vous devriez remarquer qu'il crache un render.png à l'intérieur de votre dossier de construction. Je peux aller de l'avant et fermer ce croquis. Je pourrais ouvrir ce render.png à l'intérieur de Photoshop et beaucoup mieux. Ce n'est pas un format compressé, nous n'avons aucune sorte de cette affaire d'artefacts JPEG bizarre, donc tout va bien avec l'univers. J' aime PNG, PNG est sympa. Mais il y a des choses que je n'aime pas vraiment, ce qui est ne serait-ce pas génial si c'était transparent ? Doit-on vraiment rendre l'arrière-plan ? moment, c'est plat. Que faire si je voulais rendre cela et le rendre comme un PNG transparent ? Comme vous pouvez le voir juste à la porte, il ne fait pas ça en fait. Maintenant, juste pour vous montrer si vous ne voulez vraiment pas de compression du tout et que vous voulez juste des fichiers bruts, bien sûr, vous pouvez dire render.tif et cela va cracher un fichier TIFF. Vous pouvez également faire TARGA, et bien sûr, si vous effectuez le rendu de votre esquisse, vous verrez qu'il crache également un fichier TARGA sur. Donc, c'est bien, mais ça manque dans certains domaines. Donc, ce que j'aimerais vraiment faire, c'est développer cela d'une manière ou d'une autre. Donc, ce que je vais faire à ce stade est arrêter cette vidéo, allons de l'avant et commencer une nouvelle, mais cette fois nous allons essayer d'améliorer les choses. Sortie deux, vidéo suivante. 39. letsRender / mieux: D' accord. Donc, maintenant, je veux faire des sorties plus avancées. Donc, prenons cette étape 1 et je vais juste copier l'étape 1 à une étape 2. D'accord. À l'intérieur de l'étape deux, à l'intérieur de build, je vais aller de l'avant et je vais juste écraser ces images existantes qui ont été copiées et je vais ouvrir build.pde. Maintenant, je vais faire quelques changements. En ce moment, nous n'avons utilisé que la configuration, d'accord. Ce que je veux faire, c'est que je vais me donner quelques retours difficiles ici pour monter ce truc. Je vais me débarrasser de ce SaveFrame, et en ce moment, nous venons d'être dans la configuration. Eh bien, il s'avère que j'aimerais introduire un tirage au sort vide, d'accord ? Dans le tirage au sort vide, je veux copier ce H.Drawstage dedans, ok. Maintenant, si vous vous souvenez d'avant, un tirage au sort est une boucle. Il court encore et encore et encore et encore. On peut annuler ça en disant Noloop. En gros, NoloOp exécutera la fonction de dessin une fois, puis l'éteindra, d'accord ? Donc, NoloOp va arrêter cette fonction de dessin après qu'elle s'exécute une fois. Maintenant, je veux introduire une nouvelle fonction aussi bien appelée saveHires void. Ce que je veux faire est juste avant d'appeler NoLoop est que je veux appeler SaveHires, d'accord ? En appelant cette fonction, je vais lui passer un entier, non ? Tout cela aura du sens ici dans un instant. Je vais en passer un, d'accord ? Ici, dans la fonction, je vais dire : « Oh mon Dieu, il y a un numéro qui arrive. » D' accord, alors laissez-moi juste dire int, et ensuite on appellera ça ScaleFactor, ok ? Donc, int scaleFactor. Maintenant, ce que je vais faire, c'est que je vais écrire un peu de code qui me permet de faire des choses au-dessus et au-delà de ce que l'on fait. Je vais aller de l'avant et dire que PGraphics, et on appellera que les embauches sont égales à CreateGraphics, ok ? À l'intérieur de CreateGraphics, je vais dire largeur fois ScaleFactor, puis je vais dire hauteur fois ScaleFactor et puis je vais passer un rendu. Donc, je vais dire JAVA2D. Cool. Donc, je crée un PGraphics qui est la largeur fois le ScaleFactor et la hauteur fois le ScaleFactor, mais je le transmets un. Donc, si vous venez en haut, notre croquis est 600 par 600, donc 600 fois 1 par 600 pour la largeur, et 600 fois 1 pour la hauteur est 600, non ? Donc, j'espère que vous allez pouvoir voir ici, vous serez en mesure de passer un nombre pour afficher la taille de l'image que vous voulez en fonction d'un certain ScaleFactor. Donc, si j'ai dit SaveHires deux, au lieu de rendre un graphique qui est 600 par 600, il rendrait notre graphique 1200 par 1200. Donc, je peux rendre une version plus haute résolution que ce que vous voyez réellement à l'écran. À l'écran, vous verrez toujours le 600 par 600 mais dans notre dossier, nous afficherons cette image à 1200 1200 si SaveHires a été passé le numéro deux, mais nous y arriverons. Maintenant, après avoir défini ce PGraphics, je vais juste aller de l'avant et dire BeginRecord et après BeginRecord, vous devez endRecord comme ça. A l'intérieur du BeginRecord, je vais passer ce PGraphics des embauches, ok ? Alors je vais dire que les recrues devraient mettre à l'échelle tout ce qui est arrivé en tant que ScaleFactor, d'accord ? Donc, nous mettons à l'échelle l'illustration en fonction de notre ScaleFactor ici, mais encore , pour l' instant, il n'en est qu'un, donc il aura la même taille exacte que notre scène, notre largeur et notre hauteur. Alors je vais mettre une petite déclaration If-else ici. Donc, laissez-moi juste faire si et puis laissez-moi définir un autre et les tabler comme ça. A l'intérieur du if, je vais dire si embauche des égaux égaux nuls, alors il devrait faire H.Drawstage, ok ? Maintenant, si les embauches ne sont pas nulles, je vais dire H.Stage alors je vais virer notre petit gars interne, PainTall, et à l'intérieur de PainTall, je dois lui transmettre quelques informations. Donc, à l'intérieur de PainTall, je dois passer les PGraphics. Il veut également savoir s'il utilise la 3D ou non. moment, cela est encore en cours de développement parce que nous voulons voir si nous pouvons rendre l'espace tridimensionnel à un graphique bidimensionnel, mais c'est un travail en cours. Alors le troisième argument est l'Alpha qui arrive, ok ? À l'intérieur de PainTall, nos PGraphics sont en fait appelés embauches. Nous n'utilisons pas la 3D donc c'est une valeur booléenne, je vais juste dire false, et pour Alpha, je vais juste passer une valeur de 1, ok ? Maintenant, nous avons notre EndRecord et une fois l'enregistrement terminé, je vais maintenant rendre l'image. Encore une fois, JPG, pas notre ami. Vous aimeriez peut-être si vous voulez une cible, mais je veux aller en PNG. Donc, je vais dire embaucher.save et à l'intérieur de la sauvegarde, je vais dire s'il vous plaît enregistrez-le dans render.png, ok ? Maintenant, je creuse ça, alors voyons ce qui se passe ici. Je vais aller de l'avant et sauver et je vais construire le croquis. Espérons que nous n'avons pas d'erreurs. Nous ne le faisons pas. Boum. Il fonctionne et nous pouvons voir qu'il rend le render.png à l'intérieur de notre dossier ici. Donc, d'après ce que je peux dire, allons de l'avant et ouvrons ce png, il semble identique à l'étape 1. Oui, c'est vrai, d'accord ? C' est absolument identique. Cependant, il y a en fait quelques fonctionnalités cachées ici. Vérifie ça. Cela a effectivement rendu une image 600 pixels par 600 pixels. Donc, si je supprime ce PNG et demande cet appel de fonction d'enregistrer des embauches avec un facteur d'échelle de deux, si vous enregistrez et construisez votre croquis, qu'est-ce qui se passe à ce stade est-il qu'il l'affiche 600 par 600, ok ? Mais si je devais fermer ceci et regarder réellement le PNG, vous remarqueriez qu'il est en fait sorti à 1200 par 1200. Donc, si je viens ici à la taille de l'image, je peux voir que les dimensions ont été rendues à 1200, 1200. Donc, maintenant je peux rendre cette image n'importe quelle taille que je veux malgré ce que nous voyons quand nous construisons le croquis. Donc, être capable de rendre à une taille beaucoup plus grande est quelque chose que je pense extrêmement utile. Il y a un autre petit peu ici et c'est la question de la transparence, non ? C' est un PNG, donc je vais revenir ici, je vais supprimer ce PNG, et ça finit par le haut ici, je mets la couleur de fond sur un gris foncé, 20, 20, 20. Eh bien, tu l'as. Vous pouvez en fait venir à l'arrière-plan et dire H.CLEAR. H.CLEAR serait un fond transparent. Donc, si je sauvegarde et construis ce croquis, je devrais le voir rendre à l'écran. Maintenant, évidemment, je ne regarde plus l'arrière-plan de 20, 20, 20, 20 mais si je ferme réellement ce croquis et viens rendre PNG et ouvrir ceci à l'intérieur de Photoshop, il a rendu cela avec transparence. Donc, maintenant, je peux tirer beaucoup de choses différentes dans Photoshop et les superposer l'un sur l'autre, je peux définir une couleur d'arrière-plan différente, je peux commencer à modifier cela d'une manière que je pense est un peu plus robuste que la première étape. Donc, je suis vraiment excité à propos de ça, d'accord ? Dans la prochaine vidéo, on va faire une troisième étape, non ? À l'étape trois, revenons cette sortie aux données vectorielles. Donc, sortie 3, on se voit là-bas. 40. letsRender / MEILLEUR: D' accord. Nous sommes à LetsRender et nous allons faire une troisième étape. Troisième étape pour moi c'est ça, c'est le Saint Graal des réalisateurs. Si nous utilisons des actifs vectoriels, alors je veux revenir à une sortie vectorielle. Alors, mettons en œuvre cela. Je vais passer l'étape 2 et je vais le copier à l'étape 3. Je vais ouvrir le dossier Build. Je vais supprimer render.png et aller de l'avant et ouvrir build.pde. Maintenant, je vais modifier une partie du code en bas, mais avant de le faire, il y a quelques choses que je veux faire en haut. La première est que si vous allez restituer à un format vectoriel, vous devez en fait importer une bibliothèque pour pouvoir le faire. Ce que nous allons faire est, est en haut, nous allons simplement taper import processing.pdf.* ;. Donc, il s'agit d'importer la bibliothèque PDF du traitement afin que, encore une fois, nous puissions travailler dans le vecteur et revenir en tant que vecteur. Maintenant, la deuxième chose que je veux changer est la ligne 8, où il est dit H.CLEAR. Je ne travaille plus avec un PNG transparent, c'est basé sur des vecteurs, donc je suis d'accord pour voir l'arrière-plan à ce stade. Donc, je vais en fait remettre l'arrière-plan à notre gris foncé de 202020. faisant défiler vers le bas, nous allons apporter quelques modifications ici. Évidemment, je ne veux plus appeler ce SaveHires, je veux appeler ce SaveVector. Dans les SaveHires, nous passions dans un facteur d'échelle. C' est vecteur et parce que c'est vecteur, peu importe que ce fichier vectoriel soit de la taille d' un timbre-poste ou de la taille du Taj Mahal. C' est vecteur, vous pouvez le mettre à l'échelle à n'importe quelle taille désirée. Donc, nous n'avons pas besoin de passer dans un facteur d'échelle, nous pouvons simplement dire tirer cette fonction appelée SaveVector. Donc, continuons et mettons à jour la fonction ici vers SaveVector. Encore une fois, je peux tuer cet argument pour facteur d' échelle et maintenant je vais modifier nos PGraphics et, plutôt que d'utiliser des locations parce que, encore une fois, pour moi, cela semble un peu spécifique que vous rendez une version plus haute résolution que peut-être ce que vous voyez à l'écran, allons de l'avant et changeons cela en pGraphics tmp. temp pGraphics est égale à null. Maintenant, la prochaine chose que je vais faire est de dire que tmp est égal à BeginRecord, et à l'intérieur du BeginRecord je vais dire, je veux que vous enregistrez mais je veux que vous enregistriez en PDF. Donc, nous allons sortir dans un document PDF. Maintenant, le deuxième argument est le nom du fichier. Donc, nous allons juste dire render.pdf. Maintenant, je n'ai pas besoin de ces lignes sur 60 et 61, donc je peux aller de l'avant et les supprimer parce que encore une fois, elles se rapportent à la sortie basée sur les pixels, donc je peux les supprimer. Cette instruction if et else modifie juste un peu parce que nous avons changé le nom en tmp, donc je vais dire si tmp est nul et ici sur l'autre, h.stage () .paintall et encore nous passons dans ce nouveau type de tmp. Maintenant, nous avons besoin d'un enregistrement de fin mais nous n'avons pas besoin du fichier hires.save (« render.png ») parce que le format de fichier dans lequel nous enregistrons, encore une fois, est défini ici sur cette ligne 59. Maintenant, si tout va bien, je devrais être capable d'enregistrer et de construire le croquis et quand je construis le croquis, je devrais voir à l'écran 600 pixels par 600 pixels exactement comme prévu, mais dans mon dossier, je vois un render.pdf. Je vais aller de l'avant et ouvrir ce render.pdf à l'intérieur d'Illustrator. Donc, ici, nous sommes à l'intérieur d'Illustrator, je peux ouvrir la palette Calques et, oh je vois, cela crée automatiquement un masque d'écrêtage. Donc, si je vais de l'avant et que je l'ouvre, vous devriez remarquer qu'il y a probablement un chemin d'écrêtage en haut, vous pourriez supprimer ce chemin d'écrêtage si vous le vouliez, vous pourriez dégrouper tout ça et, oh mon Dieu, nous sommes retour à un format vectoriel. Vous pouvez venir ici et cliquer sur Voir, Outline, on pourrait danser à ce stade parce que c'est là qu'il est. Si nous utilisons des actifs vectoriels, revenons à des actifs vectoriels car maintenant, tout cela est modifiable. Si je n'aimais pas que ça soit bleu, je voulais que ce soit une orange, je peux le modifier. Là où il est beaucoup plus difficile de modifier si nous rendons le PNG. Donc, dans l'exemple de l'étape deux, parce que nous rendons à une image basée sur un pixel, vous aimez mieux ce que vous voyez car il est beaucoup plus difficile modifier ce fichier une fois qu'il a été rendu et que vous l'avez ouvert dans Photoshop, mais si Nous rendons au vecteur, je peux y aller et faire toutes sortes de changements. Donc, si je n'aimais pas le poids du trait, je pourrais sélectionner le poids de l'un des vecteurs ici, je vois qu'il est sélectionné le trait noir et je pourrais venir sélectionner la même couleur de trait, et si je le voulais, je pourrais changer le trait à cinq si c'est ce que je cherchais. Donc, j'aime cette idée de travailler avec actifs vectoriels faisant une sorte de génération aléatoire au lieu de traiter, mais ensuite la possibilité de le rendre à une composition vectorielle b afin que je puisse commencer à faire un peu d'édition dans d'Illustrator. Allons-y et fermons cette vidéo, je vais vous montrer une dernière vidéo en termes de montage. On se voit à l'étape 4. 41. letsRender / modifications finales: Parce que c'est ça. En fait, je ne connais pas cette chanson. Mais c'est ça, c'est ça. Je veux te montrer autre chose. Je vais ouvrir HGridLayout. Dans HGridLayout spécifiquement, je vais ouvrir l'étape trois. Regardez celui-ci, c'est celui où nous randomisons la rotation, et nous randomisons la taille, et ça ressemble à ceci. Maintenant, je n'ai pas fait de commentaire plus tôt parce que je voulais vraiment l'aborder ici. Parce que vous êtes en train de randomiser la taille, remarquez-vous que le poids du trait a changé dans tout le document ? Comme ici, où il a fait 50 sur 50, le poids du trait ressemble à un, et ici, où le coup est assez grand, il est devenu beaucoup plus épais parce que le trait est en fait échelle avec l'illustration que vous attachez à une taille plus élevée. Maintenant, est-ce que je m'en fiche ? Peut-être pas au départ, mais je veux certainement éditer cela dans Illustrator. Donc, je vais vous montrer quelques derniers tours ici. Maintenant, c'est HGridLayout, et c'est l'étape trois, mais nous avons déjà une étape trois à l'intérieur de LetsRender. Donc, je vais copier ceci sur mon bureau comme ça, et puis, je peux fermer ce dossier, et je vais en fait changer cela à une étape quatre, puis, je vais faire glisser l'étape quatre dans le dossier LetsRender. Maintenant, je veux ouvrir l'étape trois, et je veux également ouvrir l'étape quatre, et la raison pour laquelle je veux faire cela est de sorte que je peux simplement copier et coller mon entreprise comme taux apparaissent en haut que l'importation de traitement PDF. Oui, s'il vous plaît. Je vais coller ça, puis en bas ici, j'ai cette belle, disons, fonction vectorielle. Donc, je vais copier jusqu'à cette fonction vecteur de sauvegarde, et puis, je vais venir ici, et je vais coller là où il est dit H.Draw scène. Alors, cool. Je peux fermer maintenant cette étape trois. Donc, je suis à l'étape quatre, et tout ce que j'ai fait est d'ajouter le rendu à un PDF. Donc, si je sauvegarde et construis mon croquis, encore une fois, je devrais voir quelque chose à l'écran, et je vois aussi qu'il a sorti un render.pdf. Donc, ce que je veux faire, c'est juste vous montrer quelques choses en fait dans Illustrator. Donc, je vais fermer mon croquis, et je vais aller de l'avant et fermer le PDE de construction, et je vais ouvrir ce rendu à l'intérieur d'Illustrator. Maintenant, tout a l'air bien. Si vous venez voir le contour, oui, bien sûr, tout est vecteur, c'est génial. Il fait ce masque d'écrêtage, donc je vais ouvrir mes calques, et bien sûr, il y a le chemin d'écrêtage juste là, et je vais aller de l'avant et dire, supprimer le chemin d'écrêtage. Quand je fais ça, ce gars s'ouvre, je vais tout sélectionner et cliquer sur dissocier. Alors maintenant, je regarde juste les vecteurs et toute leur beauté merveilleuse. Maintenant, ce que je vais faire est d'appuyer sur le A sur le clavier, qui est le gars de la flèche de sous-sélection juste ici, et je vais sélectionner le trait, et je vais dire sélectionner la même couleur de trait. Maintenant, ça va passer et ça va trouver tous mes coups parce que tous mes coups ont la même couleur exacte. Encore une fois, si je commande H pour masquer la sélection et que je viens ici pour caresser, vous verrez que le poids est vide car il y a tellement de traits différents qui se sont produits en raison des changements de taille. Donc, je pourrais venir ici et dire que je veux que le coup soit un, alors, qui corrige la façon dont cela ressemble à l'intérieur d'Illustrator. Maintenant, je veux te montrer un autre petit truc que je finis par faire dans mon travail, et ne le dis à personne parce que c'est notre secret. J' adore cette palette qui est la palette d'apparence, et je parie que la plupart d'entre vous ne savent même pas que cette palette existe. J' aime la palette d'apparence parce que ce que vous pouvez faire avec la palette d'apparence est alors que les traits sont toujours sélectionnés, je peux voir ici, cool , hey, vous avez des traits sélectionnés. Ils utilisent un point sans remplissage. Eh bien, vous pouvez réellement sélectionner le calque de contour et effectivement le dupliquer. Donc, je vais le dupliquer ici, et maintenant, j'ai deux coups qui sont en fait juste au-dessus de l'autre. Tous les deux, un poids de course d'un et sur ce bas. Je vais le mettre à un poids de trois coups. Donc, tout d'un coup, vous remarquez que toutes les lignes deviennent plus épaisses à l'écran. Eh bien, la raison pour laquelle j'aime la palette d'apparence est parce que je pourrais prendre cette palette d'apparence en conjonction avec la transparence et je peux dire, « Hé, je veux que la transparence des traits qui sont trois soit 20 pour cent. » Vous remarquerez que, si vous avez réellement ouvert ce petit bascule ici, cela vous montrerait que le trait se produit en fait à trois points avec une opacité de 20 pour cent, mais le trait à un moment donné n'est pas une transparence du tout. Maintenant, si vous deviez zoomer, vous remarqueriez que c'est devenu sympa et floue, et je le fais dans chacune de mes impressions parce que quand cela imprime réellement sur du papier dans une de mes imprimantes grand format ici, juste avoir ce 20 pour cent Alpha de chaque côté de la course, juste adoucit l'œuvre d'une belle manière. Maintenant, je veux te montrer un autre truc avant de finir cette affaire. Encore une fois, aussi dans Illustrator et c'est la palette de nuances. Donc, je vais venir à des échantillons ici, et je peux dire ajouter des couleurs usagées. Donc, si je clique dessus, il devrait parcourir mon document et ajouter toutes les couleurs qui refroidissent ici à l'intérieur de mon document. Maintenant, ce que je veux faire, c'est avec les nuanciers, je veux vraiment les sélectionner et les transformer en un groupe, un nouveau groupe de couleurs. Donc, en bas, je clique sur le petit dossier et le groupe de couleurs et je dis, ok. Donc, ça a pris ces couleurs et ça les a regroupées en un joli petit groupe de couleurs ici. Maintenant, la raison pour laquelle je veux faire cela est parce que vous pouvez réellement sélectionner tout à l'intérieur de votre fichier Illustrator, et la plupart des gens n'ont aucune idée de ce que ce petit bouton fait ici. Il est écrit recolor artwork. Donc, vous cliquez sur ce petit bouton, recolorer l'illustration et il tire en fait cette petite palette ici, et tous les nuanciers que vous ajoutez dans cette palette nuancier, ils sont automatiquement ajoutés par magie dans cette chose de groupes de couleurs. Donc, en fait, je vais choisir ça, et je pourrais venir ici et juste dire, « Hé, ne pas mettre à l'échelle la tension comme rendre exact. » Mais la raison pour laquelle j'aime cette palette est parce que j'aime la couleur aléatoire, et ça finit par qu'il y a ce petit bouton juste ici qui dit changer aléatoirement l'ordre des couleurs, et je peux m'asseoir là et aller, oh, ouais, oh, oui . Je peux appuyer sur ce bouton toute la journée. Ce qu'il fait, c'est qu'il traverse mes œuvres d'art et remanie les couleurs autour. Donc, c'est juste une étape supplémentaire de moi être capable d' offrir beaucoup de variations différentes à mes clients en définissant quelques couleurs initiales, mais peut-être en utilisant cette astuce et en sortant cette composition une tonne de façons différentes, mais avec différentes arrangements de couleurs. Tout d'un coup, quelqu'un dit : « Oh, ouais. Mais pouvons-nous changer l'une des couleurs ? Vous pouvez créer un tout nouveau jeu de couleurs, et vous pouvez recolorer l'ensemble de cette illustration à l'aide d'un tout nouveau groupe d'échantillons de couleurs. Donc, ce sont deux petits secrets que j'aime partager avec Illustrators, c'est ce recoloring des couleurs et ensuite ce coup, mettre deux sur l'autre et avoir le dernier, avoir un peu de transparence à elle, sorte qu'il adoucit les bords. D' accord. Oh, mon Dieu. Nous nous sommes embarqués dans un voyage de fesses. On a donné des coups de pied à des fesses. Je pouvais le sentir. Je pouvais sentir que beaucoup de fesses ont été botté, et je suis tellement excité que tu as décidé de passer ton temps avec ma folle. J' ai hâte de voir ce que vous faites et les filles. Je pense qu'il y a beaucoup de techniques ici qui, encore une fois, que la chose que je veux continuer à conduire à la maison est que le code ne se soucie pas des couleurs que vous utilisez, ou des actifs artistiques que vous utilisez. Vous pouvez faire un tout nouveau jeu de dessins avec des tronçonneuses et des chatons, et vous pouvez cartographier cette composition ici avec des scies et des chatons. Le code est complètement agnostique de l'illustration. Nous spécifions quels actifs doivent être utilisés. Donc cela signifie qu'à la fin de ce voyage, le travail que vous créez, et le travail que vous partagez avec nous tous qui ont suivi ce cours seront complètement uniques pour vous, et la raison pour laquelle il va être unique pour vous, c'est parce que vous êtes attirés par des couleurs différentes de celles que nous sommes tous. Vous êtes poussé vers des formes différentes que les autres d' entre nous et même en utilisant ces simples blocs de construction, il y a un nombre infini de possibilités qui devraient frapper notre galerie, et je suis heureux de voir cela arriver. Super. J'espère que c'est l'une des nombreuses classes. J' adorerais faire un autre cours sur l'animation, et j'aimerais faire une troisième classe sur du matériel comme le Leap Motion et le Connect. Donc, si vous avez aimé ce cours, dites à ces gens de Skillshare que je suis le meilleur professeur que vous ayez jamais eu de toute votre vie et que nous sortons ensemble. On sort ensemble. Merci. Frappe-moi sur Twitter. Frappe-moi sur Facebook. J'aime les courriels. J' ai lu l'email. Merci encore. Merci d'avoir suivi ce cours. À plus tard. 42. Quelques mots pour terminer...: Nous sommes arrivés à cette grande fin de production. C' est là que je suis vraiment excité de voir ce que vous faites, parce que j'espère que vous avez vu à ce stade, vos dessins sont vos dessins, vos choix de couleurs sont vos choix de couleurs, et c'est cette sortie qui est aléatoire qui se produisent dans ces classes de mise en page. Tout comme ce que je vous montre est totalement unique à moi, et c'est motivé par ce voyage à Istanbul, c'est loin de l'ordinateur, non ? C' est là que se trouve cette magie. Ce n'est pas devant l'ordinateur, il s'agit de faire un voyage à Istanbul, marcher à travers le Grand Bazar, trouver ces dessins, et d'avoir ce moment de, « Je peux prendre ce dessin et je peut en faire la mienne. Je peux le faire mien en le redessinant et en l'abstrayant, d'une manière que cette programmation informatique va utiliser pour générer cette excitation à l'écran. » Ensuite, il va être rempli avec des couleurs que j'ai peut-être vécues lors de ce voyage. Je fais un tour, et je vois des mosaïques avec certaines couleurs, et je prends une photo de ces couleurs, et je vais extraire les couleurs de cette photo. Donc, toute cette sortie est entièrement pilotée par les choix initiaux que vous faites, ce qui signifie que tout ce travail que vous allez vomir à cette classe est spécifique à vous. Elle est spécifique à l'imagerie qui vous attire, qu' elle soit florale ou organique. J' ai ma phase florale. Peut-être que vous allez avoir votre phase florale. J' ai ensuite dessiné beaucoup trop de fleurs et je me suis déplacé dans la géométrie. J' ai dû aller mathématique. Donc, ce genre d'esthétique que vous êtes attiré va définir votre sortie. Votre sortie, encore une fois, complètement unique à vous. Donc, je suis super excité parce que vous devriez nous éblouir tous avec votre fantaisie. Je peux avoir une alléluia ? 43. hexGrid / Randy Steward: Hé ! Donc, j'ai pensé qu'il faudrait le temps d'ajouter une section 9 intitulée Inspirations de projet, où je prendrais des choses que je vois que vous publiez dans la galerie des étudiants, et peut-être vous montrer certaines choses que je ferais. Oui. Donc, voici un post que Randy a fait, et il fait ces hexagones, et juste en regardant ces hexagones, j'ai pensé que je vous montrerais comment combiner beaucoup de pools différents avec beaucoup de mises en page de grille différentes. Donc, attaché à cette vidéo, il va y avoir un fichier hexGrid.zip, et regardons, je l'avais divisé en six étapes. Alors, regardons l'étape 1. première étape est évidemment, j'ai un PDE de construction, j'ai PDE de hauteur, j'ai un dossier de données, et à l'intérieur du dossier de données, j'ai hexagonal SVG. Si nous basculons vers l'illustrateur, vous pouvez voir que je viens de faire un hexagone très simple ici, et aussi cet art est une largeur de 50 et une hauteur de 50. Droit. Donc, chacun de ces petits hexagones est 50 par 50. D' accord. Donc, laissez-moi vous montrer en ouvrant cette build PDE ici quelques astuces. Donc, la première chose est que, laissez-moi juste faire la taille de la police un peu plus grande. D' accord. Est-ce que j'ai compacté le code hDrawablePool. Ok, et vous verrez pourquoi, parce que encore une fois nous allons ajouter six piscines différentes ici. D'accord. Donc, en haut, j'ai dit dp1 pour la piscine drawable un. J' ai dit que je voulais dessiner 88 articles. Sur la ligne 10, j'ai spécifié que je veux utiliser un hexagone hexagon.svg. Sur la ligne 11, j'ai créé une disposition de grille, et j'ai dit, Ok je veux que vous commenciez sur 27 sur l'axe x, 40 sur l'axe y cet espacement est 78, l'espacement Y est 51 et les colonnes sont huit. Ok, et dans ce particulier, je dis bien, tuons le style qui vient de l'illustrateur, tuons le coup, et ajoutons un remplissage de gris foncé, et mettons le point d'ancrage au centre. D' accord. Maintenant, donc c'est un pool utilisant hexagone SVG, et si je lance ceci, vous remarquerez qu'il construit une grille comme ça. Maintenant, vous remarquerez que les nombres que j'ai inventés me permettent d'écrire, mettre une nouvelle grille à l'intérieur de l'espacement, c'est ce qu'est l'espacement, ses 78 pixels parce qu'il est aligné d'une manière pour que je puisse mettre un autre hexagone ici. Mais cet hexagone, est évidemment sur un autre départ x, et dans un autre départ y, parce qu'il n'est pas aligné avec cette grille particulière. D'accord. Donc, passons à HGrid deux, et dans HGrid deux en haut, je change chaque pool drawable, disons que je vais avoir un pool drawable, et un pool drawable deux. Dans la piscine deux tirage, je dis bien, je veux 70 articles, j'utilise toujours hexagone SVG, mais vous remarquerez que j'ai un départ différent x j'ai un début différent y, mais l'espacement est toujours 78 par 51, et le colonne est sept. Dans le cas de cet hexagone SVG, il est identique à celui ci-dessus sauf pour un ensemble de la couleur de remplissage à cet orange foncé. D' accord. Donc, maintenant, nous avons deux pools drawable en utilisant le SVG hexagonal. Donc, si je construis le fichier, j'ai maintenant une deuxième grille et en utilisant un deuxième pool dessinable avec une mise en page différente, mais je suis capable de le mettre de telle manière qu'il remplit l'espacement entre la première grille que nous avons créée. D' accord. Maintenant, allons-y un peu plus loin. Donc, dans la troisième construction, j'ai dit d'accord, eh bien, je veux faire un coloriste H pixel. D' accord. Alors, regarde ça. Je dis piscine H drawable, je vais en ajouter un troisième, mais maintenant je vais ajouter un coloriste pixel, non ? Je veux voler la couleur d'un dégradé Jpeg. D'accord. Donc, il y a notre hexagone et à l'intérieur de Photoshop, j'ai créé une image qui 600 par 600, et j'ai fait un dégradé qui est passé du blanc au noir. D' accord. Donc, si nous devions regarder la piscine 3 drawable, encore une fois c'est identique à la piscine 2 drawable sauf que j'ai changé quelques choses. J' ai dit que je veux que la taille soit 40 par 40 au lieu de sa valeur par défaut 50 par 50, puis sur la ligne 36, j'ai dit, hey prenons ce dégradé de pool de couleurs, et appliquons la couleur au remplissage seulement. Donc, maintenant quand je teste ce film, j'ai maintenant une troisième grille qui est au-dessus de la deuxième grille, mais en utilisant chaque coloriste pixel pour passer du blanc vers le haut en haut, vers le noir, vers le bas. Droit. Donc, maintenant j'ai trois piscines, trois grilles, et encore une fois je peux continuer ce genre d'empilement. Alors, ouvrons HexGrid quatre, et bien sûr, j'ajoute maintenant un quatrième pool drawable. Mais cette fois, j'ajoute un pool de couleurs H, et dans le pool de couleurs H, j'ai les couleurs que nous avons essentiellement travaillé sur toutes nos versions d'échantillons. Donc, des gris et deux bleus, et deux oranges, ainsi de suite et ainsi de suite. Maintenant, en bas, je copie exactement la même chose de la piscine 3 drawable. Donc, je copie le pool drawable trois, renomme comme pool drawable quatre, encore une fois c'est 70 hexagones SVG, mais j'ai changé la taille pour être 20 au lieu de 40, et puis je dis, au lieu de CP un, appliquer la couleur que je dis CP2 appliquer la couleur. Maintenant, cela devrait mettre une quatrième grille sur le dessus de la troisième grille qui est au-dessus de la deuxième grille, et nous obtenons quelque chose comme ça. D' accord. Donc, maintenant nous pouvons voir que c'est choisir au hasard des couleurs sur cette quatrième grille. Maintenant, nous avons cette grille, la toute première que nous avons recréée qui est encore grise. Alors, pourquoi ne pas dupliquer la même chose, mais peut-être l'inverser. D' accord. Alors, allons-y et ouvrons la grille H 5, et une grille H 5 en haut, je crée un pool 5 drawable, et dans la piscine 5 drawable, je copie en fait le pool 1 drawable. Droit ? Parce que deux, trois et quatre sont empilés l'un sur l'autre. Je veux que cinq soient empilés sur un. Encore une fois, j'ai changé la taille à 40, et je fais le CP2 qui est le pool de couleurs H. Donc, si je devais exécuter ce fichier, il devrait mettre le pool drawable cinq sur le pool drawable un, que vous pouvez voir ici dans cette rangée est de choisir aléatoirement des couleurs dans le pool de couleurs. Droit. Donc, nous l'avons inversé que cette pile. Maintenant, ajoutons la dernière grille. Si vous allez à la grille H six, et que vous ouvrez construire PDE, bien sûr en haut, j'ai créé un pool 6 drawable, pool 6 est juste une copie du pool drawable 5, mais j'ai changé la taille à 25, et j'ai effectivement utilisé le coloriste de pixel dégradé appliquer la couleur. D' accord. Donc, maintenant, piscine 6 est sur le dessus de la piscine 5 drawable, et la piscine 5 est sur le dessus de la piscine drawable 1. Donc, en gros, on fait juste l'empilage de grille. D'accord. Donc, maintenant si on regarde, on peut voir que nous avons des hexagones qui vont de la couleur blanche jusqu'à la couleur foncée. D'accord. Donc, en utilisant cette structure, nous pouvons réellement empiler beaucoup de pools de tirage tous en utilisant le même SVG hexagonal, mais en utilisant simplement une mise en page différente avec différents paramètres, et donc nous pouvons obtenir cet empilement de couche. Maintenant, ce que je pense que ça va bien paraître. Laissez-moi juste aller à l'URL ici. Skillshare. Maintenant, ce que je pense que ça va paraître bien dans fichier de Randy au lieu d'utiliser un SVG, s'il utilisait toutes ces différentes mutations de SVG, d'accord. Ensuite, ce fichier prendrait en fait ce nouveau modèle de texture, qui serait le débutant. D' accord, je vais finir ça. Je vais continuer à être totalement inspiré par les choses que vous publiez les gars, et j'ai d'autres idées pour d'autres vidéos de remix d'inspiration de projet que je vais poster dans cette section. Très bien, à plus tard. 44. hypnoWheel / Luke L: D' accord. Je pensais enregistrer. Salut, comment vas-tu ? Comment va la classe ? Bien ? Je pensais que nous ferions un autre tutoriel pour la section 9, qui est des inspirations de projet. Celle-ci, Luke L, aime vraiment les images qu'il propose ici. Mais j'ai pensé briser celui-ci et montrer quelques possibilités avec lui. Donc, j'ai créé un nouveau dossier sur mon bureau appelé HypnoWheel. Je viens d'utiliser le projet de Luke comme un point de départ, mais je vais en fait recréer les vecteurs un peu différemment et nous en parlerons. Maintenant, la bonne chose est que vous pouvez cliquer sur le lien de Luke juste ici, et vous pouvez réellement voir ce fichier particulier en cours d'exécution. Il y a des choses que je ferais peut-être un peu différemment. Donc, j'ai pensé qu'on ferait peut-être la même chose qu'avant, décomposer quelques pas, montrer quelques possibilités, et partir de là. Maintenant, dans le dossier de Luke, allons-y et fermons ça. Dans le dossier de Luke, ses actifs SVG sont en fait remplis. En fait, je n'utiliserais pas de remplissages. J' utiliserais des coups. Laissez-moi vous expliquer pourquoi. Donc, si je passe à Illustrator, vous pouvez voir ici que j'ai recréé les actifs, mais plutôt que d'utiliser des remplissages, j'utilise en fait des traits. Je viens de faire quatre SVG. L' œuvre est de 100 par 100. J' ai juste pris un cercle et je l'ai divisé en un tas de sous-sections. Donc, encore une fois, important de se rappeler que l'œuvre est 100 par 100. Encore une fois, j'ai quatre exemples de SVG ici. Donc, d'abord, nous regardons Build one. Ce petit projet va avoir cinq étapes différentes, et je vais présenter quelques fonctionnalités différentes. Donc, parlons juste de certaines des choses que Luke fait dans son fichier, et comment je l'aborderais dans mon fichier, et aussi ajouter certaines fonctionnalités. Alors, Luke, je parle aussi à toi et à d'autres personnes qui écoutent. La première chose est que, plutôt que, dans votre fichier particulier, vous copiez du blanc plusieurs fois, n'oubliez pas que dans le pool de couleurs, vous pouvez ajouter une pondération de couleur en spécifiant la couleur, puis en spécifiant le nombre d'instances de cette couleur que vous voulez. Donc, plutôt que de copier et de coller le blanc, le blanc, blanc, le blanc, le blanc, le blanc, le blanc, le blanc, vous pouvez définir votre pool de couleurs de cette façon. Encore une fois, vous pouvez voir que j'ai dit, « Ok, je veux un gris foncé. » Un gris moyen me donne six d'entre eux, un gris plus clair me donne quatre d'entre eux, et un gris plus clair me donne deux d'entre eux. Donc, encore une fois, je peux me concentrer sur la pondération des couleurs de cette façon. J' ai ajouté d'autres trucs à ce dossier. Voici mes quatre SVG. Encore une fois, rappelez-vous que ce sont des coups, pas des remplissages. Pourquoi c'est ça ? Eh bien, la première chose dont je veux parler est d'utiliser l'échelle plutôt que la taille. Maintenant, dans certains des exemples que nous avons faits au cours de ce cours, il a été de définir la taille. La taille de réglage est quand vous définissez comme, ok, je veux que la largeur soit 100, et je veux que la hauteur soit 100, ou je veux que la largeur soit ceci et la hauteur soit cela. Quelle que soit l' échelle, l'échelle est basée sur la taille originale de l'œuvre provenant d'Illustrator. Donc, je dis d'extraire cette œuvre d'Illustrator. Cette illustration dans Illustrator a déjà une largeur et une hauteur définies. Ce que je veux faire, c'est changer d'échelle. L' échelle est un pourcentage. Donc, 0,5 serait 50 pour cent plus petit. Une échelle de deux serait 200 pour cent plus grande. Donc, encore une fois, vérifiez ce fichier où j'utilise l'échelle par opposition à la taille. Donc, à la ligne 38, je dis : « Bon, ok, je veux définir une échelle aléatoire. » Je dis à la base, il devrait être un, puis choisir un nombre aléatoire 16 et sauter par incréments de 0,3. Tu verras ce que ça fait dans un instant. A l'intérieur du drawable, permet le style faux. Donc, j'ai mis l'ancre au centre. Je l'attache au centre de l'écran. Ensuite, au lieu d'utiliser la taille des points, j'utilise l'échelle des points et en passant cette échelle aléatoire que j'ai configurée sur la ligne 38. Maintenant, je n'utilise pas de remplissages. Alors, je vais de l'avant et je dis pas de remplir. Ce que je fais, c'est que je joue avec le coup. Maintenant, une des questions que vous avez posées est, comment puis-je joindre quelque chose mais avoir tout pour avoir le même poids ? Donc, encore une fois, c'est pourquoi je voudrais utiliser trait plutôt que de remplir parce que vous pouvez voir sur la ligne 47, je peux dire StrokeWeight, commencer par une base de 10, mais ensuite multiplié un divisé par Ranscale. Donc, ce qui se passe est, mesure que l'illustration augmente, elle met à l'échelle le StrokeWeight vers le bas. Donc, de cette façon, il semble que le StrokeWeight est en fait le même poids quelle que soit la taille, ce soit dans le plus petit au centre ou le plus grand à l'extérieur. Ligne 51, j'ai défini un RandomColor et sur les lignes 55 à 57, j'ai défini une RandomSpeed pour hRotate. Ici, je dis que si les choix aléatoires sont nuls, abandonnez une vitesse d'un. Maintenant, allons juste essayer ce croquis pour que vous puissiez voir ce qui se passe ici. Donc, comme vous pouvez le voir, il semble en fait que le StrokeWeight est le même, et c'est parce que comme je suis en train de mettre à l'échelle le SVG, je suis en fait dynamiquement à l'échelle le poids des coups vers le bas. Donc, ils semblent tous avoir le même StrokeWeight. N' oubliez pas sur les lignes 48 et 49, vous pouvez spécifier ce que vous voulez que les StrokeJoin et StrokeCap soient. Donc, vous pouvez voir ici que j'ai des bouchons arrondis. Maintenant, j'ai ajouté d'autres fonctionnalités vraiment cool ici. La dernière section de la classe est en fait comment ils sortent. Donc, j'ai pensé que peut-être vous voudriez sortir ce fichier particulier. Donc, vous pouvez voir en haut, j'ai mis dans le importprocessing.pdf. J' ai aussi mis deux bascules ici, l'une pour faire une pause et l'autre pour enregistrer. Si vous faites défiler vers le bas, je copie et colle notre même fonction vectorielle, c'est encore une fois dans la dernière section de la classe, puis j'ai mis une touche vide pour faire quelques choses. barre d'espace se met en pause et redémarre, la touche plus passera à l' itération suivante de l'animation et appuyez sur la touche R rendrait réellement au PDF. Si je lance cette esquisse encore une fois, ce que vous verrez est que je peux appuyer sur la barre d'espace et qu'il met en pause l'animation, je peux appuyer à nouveau sur la barre d'espace, il redémarre l'animation, je peux appuyer sur la barre d'espace pour pause, puis je peux appuyer sur la touche plus de mon clavier et faire avancer l'itération de l'animation par un. Donc, je peux vraiment commencer à regarder cette animation et aller « Ok, laissez-moi appuyer quelques fois jusqu'à ce que j'arrive à quelque chose que j'aime », et puis bien sûr, si j'appuie sur la touche R, cela va réellement le rendre. Si je mets cela sur le côté, vous verrez qu'il est rendu un document PDF que je peux évidemment ouvrir à l'intérieur de illustrator et toutes les informations vectorielles sont là et tout semble bien. C' est le premier dossier. Si nous passons au deuxième fichier, tout ce que j'ai fait dans le deuxième fichier est dit que je veux que la jointure et le bouchon soient réellement carrés, donc cela commence à ressembler un peu plus votre animation parce que je n'arrondis pas les majuscules, je suis en quadrature des majuscules. Passons à construire trois. Sur la troisième version, j'ai ajouté un peu plus de fonctionnalités ici, qui est, et si je randomisais le poids de base ? Donc, vous verrez sur la ligne 39, je choisis un poids de base aléatoire pour le coup et quand je mets réellement poids de la course sur le réglage des temps de poids de base et la mise à l'échelle dynamique, donc plutôt que d'avoir l'impression que c'est le même poids, si vous exécutez réellement ce fichier, je suis en fait randomiser le poids de base et je pense que cela commence à paraître un peu plus intéressant. Il se trouve que ce que je vois à l'écran en ce moment, je ne suis pas fou de la couleur. Donc, j'ai pensé que j'introduirais la possibilité de randomiser une partie de la couleur. Si vous descendez à la touche, vous remarquerez que j'ai ajouté une nouvelle touche pour la lettre C, C évidemment étant de couleur. Ce qui est bien à propos de ool, c'est que je peux faire ce genre de parler ici qui est pour pendant que vous trouvez des drawables à l'intérieur de la piscine. Donc, cette boucle pour va maintenant itérer sur le pool et trouver tous les drawables que nous avons définis à l'intérieur de la piscine. Donc, j'ai dit, « Cool », hDrawable temp à l'intérieur de la piscine, puis je crée un nouveau HShape d et le mettre à l'objet de temp, puis relancer le trait de couleurs aléatoires. Donc, si je devais tester le croquis, faire tourner cette chose, encore une fois, si je n'aimais pas les couleurs, je pourrais réellement appuyer sur la touche C et cela ré-randomiserait les couleurs à l'écran pour moi. Maintenant, encore une fois je peux l'arrêter. Sachez juste que sur la ligne 101 il y a redessiner, et redessiner va tout redessiner et malheureusement il va aussi redessiner l'animation hRotate en cours d'exécution. Donc, si vous appuyez réellement sur la touche C maintenant, non seulement il va re-randomiser, mais il fait également avancer l'animation hRotate d'un. Donc, soyez prudent que C va randomiser la couleur, mais il va également relancer hRotate. Encore une fois, si j'appuie sur R, je pourrais vraiment rendre cela, je peux maintenant aller en construire trois, et vous verrez que je peux ouvrir cela dans Illustrator, et je suis en train de rendre une jolie œuvre d'art. Regardons la construction quatre. Je commente en fait l'utilisation de l'actif un, deux et quatre. J' utilise juste SVG3. La raison pour laquelle j'utilise simplement SVG3 est parce que je vais introduire quelque chose de nouveau et je sais que cela commence à entrer dans l'animation et mon espoir est que je vais faire une classe de battage médiatique sur l'animation, mais ce que j'ai fait ici est que j'ai effectivement échangé l'animation de hRotate et introduit HosCillator. HosCillator est vraiment sympa parce qu'il dessine en fait avec une fonction d'onde, et dans ce cas, j'utilise une onde de signe. Donc, ce que je fais ici, c'est dire : « Je veux un HosCillator et ce que je veux osciller c'est en fait la rotation. Donc, je veux osciller de -180 degrés à +180 degrés. » Je spécifie une taille et je spécifie une fréquence de l'onde. Si je devais tester cette esquisse en utilisant Hoscillator au lieu de hRotate, je peux commencer à obtenir des animations d'onde vraiment intéressantes en utilisant cela par opposition à hRotate, et encore une fois, je peux exécuter ceci et le mettre en pause, et de Bien sûr, je peux le rendre. Maintenant, construisez cinq, ce qui est le dernier, la bonne chose à propos de battage médiatique est que vous pouvez réellement empiler le comportement. Donc, dans ce cas, j'empile deux Hoscillateurs, un qui fait la rotation et l'autre qui fait de l'échelle. Donc ici vous pouvez voir sur les lignes 67 à 74, je vous présente un nouvel HosCillator où je change l'échelle de l'œuvre de 0.25-1.5. Si je devais tester le croquis, vous commencerez à voir que le système ressemble maintenant à ceci. Donc ce sont juste beaucoup de choses différentes, beaucoup de fonctionnalités différentes qui sont dans le battage médiatique que, encore une fois, même si je fais une impression statique, je peux exécuter un comportement comme celui-ci et « Ok, laissez-moi changer les couleurs jusqu'à ce que je reçoive quelque chose que j'aime » et quand on appuie sur la touche plus pour passer à la prochaine itération de l'animation, « Cool, j'aime ça juste là » et je finis par le rendre et peut-être que je l'utilise dans une affiche et j'utilise ces formes pour déchiffrer le long des formes, les possibilités sont infinies. Continuez à poster de nouveaux projets dans la galerie des étudiants et je vais continuer à faire ces types de vidéos. J' espère que tu t'amuses. À plus tard. 45. 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. Cela signifiait également que vous pouviez utiliser des choses comme le traitement de JS à l'époque. Mais maintenant, beaucoup de choses ont changé. C' est quatre ans plus tard. Le traitement de JS n'est vraiment plus une chose, mais P5 JS est le nouveau, 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, c'est j'ai parcouru toutes ces classes que j'avais faites il y quatre ans en utilisant HYPE pde et Processing 2, et les ai mises à jour pour qu'elles utilisent Processing 3 et HYPE, le 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 Master_Repo. Cependant, je veux juste vous montrer que si vous cliquez sur branches et à l'intérieur des branches, il y a lib_staging. lib_staging est toujours le plus récent. 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é à Master. Donc, parce que nous voulons le nouveau, nouveau, le secret nouveau, nouveau, allons de l'avant et allons à lib_staging et vous allez juste cliquer sur ce bouton vert qui dit « clone or download », puis 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 du traitement. Donc, vous remarquerez que si vous allez dans votre fichier de documents, Traitement, il y a un dossier appelé Bibliothèques, et 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 avoir ce gars. 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 qu'il s'agit de la version actuelle que vous pouvez pousser à l'intérieur de votre dossier 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 décompressez HYPE.zip, et il va créer ce dossier appelé HYPE, et vous allez simplement faire glisser ce dossier vers 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. Regardez, vous devriez voir HYPE là-bas. 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 vouliez sortir vos trucs en JavaScript, je ne suggère pas d'utiliser cet environnement du tout, allez-y et regardez le projet P5 JS qui se passe qui est en cours de 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 et ensuite vous utilisez HYPE, la bibliothèque de traitement. Alors, cool. Donc, nous avons ceci à l'intérieur du traitement et juste pour le diable, si je devais déplacer cela de côté et voici quelques-unes de ces classes Skillshare et Gumroad sur lesquelles j'ai travaillé, et vous remarquerez si je vais à Programming Graphics 1, J' ai maintenant inclus dans ce zip toutes les mises à jour de ce code pour utiliser Processing 3 et pour utiliser HYPE, la bibliothèque. Donc, si vous allez à, disons juste 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 buildpde, vous remarquerez en haut que nous avons une nouvelle structure, qui est maintenant qu'il s'agit d'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.Asterisk, 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 choses supplémentaires comme, « Hé, j'utilise un pool de couleurs ou j'utilise une disposition de grille », alors 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 des exemples et de dire, « Hé, je veux utiliser un oscillateur. » Donc, si vous regardez l'oscillateur, vous remarquerez oh, je dois importer l'oscillateur. Cela signifie que cela maintient la bibliothèque HYPE très mince. Alors qu'avant avec Hype.pde, vous importiez tout, même si vous n'utilisiez pas 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 souhaitez 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. Discutez bientôt.