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