Art génératif pour NFTs avec JavaScript et p5js

1. Intro: Bonjour et bienvenue dans mon cours. m'appelle Dan Burgess et je suis, entre autres, musicien et développeur web. Et nous allons apprendre comment créer un programme d' art génératif qui s'exécute sur le navigateur à l'aide de JavaScript et d'une bibliothèque JavaScript appelée p5.js. Nous allons donc dessiner un NFT, un design de style à l'aide de code. Ensuite, le programme générera une variation unique du design à chaque actualisation de la page. Vous devrez également enregistrer les images que vous générez sur votre disque dur. Ce que vous voyez maintenant à l'écran en est quelques exemples. Donc, si vous vous demandez comment les variations NFT sont réalisées, ce cours sera une excellente introduction. Il suffit donc de cliquer sur la prochaine leçon et de l'appeler avec moi. Je suis venu ici aujourd'hui. Merci. L'un d'entre eux, c'est que je dois partir. Vous êtes tous les deux 2. Configuration d'environnement: Pour ce projet, nous allons utiliser Visual Studio Code dans notre éditeur de code. Je l'ai déjà installé sur mon ordinateur. Mais si ce n'est pas le cas, vous pouvez le télécharger et installer directement depuis le site Web, appelé Visual Studio.com. Je l'ai déjà ici. Dans Visual Studio Code, nous allons donc créer deux fichiers et les enregistrer dans le même dossier. Je vais donc cliquer sur Nouveau fichier, et nous allons l'enregistrer. Et je vais appeler ça le point d'index HTML. Je vais juste enregistrer cela sur mon bureau dans un nouveau dossier appelé Jan Art. OK ? Nous en avons besoin d'un ou d'un dossier. Je vais l'enregistrer dans le même dossier et l' appeler script dot js. Je suis maintenant dans le fichier index.html. Nous avons besoin d'un code HTML très facile à faire et de ressources pour le code que très facile à faire et de ressources pour nous saisissons simplement HTML. Et cela nous donne, voici différentes options pour différents formats. Je vais choisir celui qui se termine par cinq. Et ici, nous avons notre boilerplate HTML de base. La dernière chose que nous devons faire est d'inclure ici dans le fichier HTML trois dépendances ainsi qu'aux dépendances et à notre script. Pour cela, juste en dessous de la balise de titre, nous allons ajouter une balise de script. Demandez à la source. Nous allons ajouter p5.js. C'est la dépendance que nous allons utiliser et le lien se trouve dans la description ci-dessous. Je le copie donc cette version, 1 point pour le point 0, Min et le colle ici. Et nous en avons besoin d'un autre. Celui-là. Le lien se trouve également dans la description. C'est ce paquet ici appelé p5.js, SVG. Et si nous faisons défiler ici sur GitHub, c'est juste ici au début. Il suffit d'ajouter cette ligne au projet. Il a donc déjà la balise de script. Je vais donc remplacer tout ça. Et nous avons également besoin de notre scénario, celui-ci ici. C'est donc un script, script dot js. Nous économisons. Nous sommes bons d'aller dans le fichier script.js. Nous allons le laisser vide pour l'instant. 3. Dessin de notre conception: Donc, si j'ouvre le dossier général avec notre projet sur mon bureau en ce moment, un ouvre-regard, index.html et mon navigateur. Rien ne va se passer car le scénario, nous ne l'avons pas encore là-dedans. Nous allons donc écrire une version de base du script dans lequel nous dessinons notre conception de base. Bon, donc dans notre fichier script.js, nous allons ajouter une fonction JavaScript. Nous allons parler de tout cela vraiment tout ce dont nous avons besoin, nous pouvons commencer à lancer ici. Donc, tout d'abord, je vais fixer le poids de notre AVC. Réglons ça à cinq. Maintenant, faisons nos antécédents. Disons donc, par exemple, un bloc d'arrière-plan. Épargons. Et je vais ouvrir à nouveau le fichier index.html dans mon navigateur et voir ce qui se passe. Bon, nous avons donc un contexte ici. C'est plutôt petit, mais il est ici. Cela signifie donc qu'il fonctionne. Bon, nous allons donc ajouter une autre fonction juste avant la fonction creuse. Et nous allons appeler ça la configuration en minuscules. Et dans le cadre de cette fonction, nous allons pouvoir définir la taille de notre toile. Cela va donc être de créer un canevas. Je vais passer en 600 x 600 pixels. Et comme troisième argument, nous voulons simplement mettre comme VG dans toutes les majuscules. Je vais donc ouvrir à nouveau notre fichier avec mon navigateur. Et en ce moment, il est 600 sur 600. Bon, donc pour mon arrière-plan, au lieu d'utiliser le noir, je vais utiliser une hache, eh bien, numéro hexadécimal couleur HTML. Et je suis ici à HTML color codes.com. Je vais laisser ce lien dans la description et je peux simplement choisir une couleur et elle me donnera le code hexadécimal. Par exemple, quelque chose comme ça, ce rouge. Je vais copier ça. Je vais donc enregistrer et actualiser le document pour voir s'il fonctionne et fonctionne parfaitement. Je vais donc dessiner le corps de mon dessin. Je vais donc utiliser une couleur différente pour l'instant. Je vais dire remplir le remplissage. Et faisons, par exemple, une sorte de guillemets jaunes à l'intérieur de simples guillemets. Et nous allons dessiner une ellipse, donnons-la comme coordonnées plus 2, trois cent six cent quatre-vingt-dix six quarante pour 40. Je vais me rafraîchir. Et voici notre corps. Alors, où suis-je dans ces deux fonctions, configurer et puiser comme comment fonctionnent-elles ? Eh bien, essentiellement puisque nous utilisons p5.js, désolé, p5 js comme dépendance. Nous utilisons simplement leurs conventions. Si nous allons à leur documentation, je vais laisser ce lien dans la description. Nous voyons que cela fonctionne exactement comme ça. Nous avons besoin d'une fonction appelée configuration à l'intérieur de celle-ci, créer un canevas. Et nous passons dans la largeur et la hauteur. Et puis un dessin de fonction dans lequel nous dessinons des trucs. Et il y a différentes choses que nous allons dessiner comme un arrière-plan comme nous l'avons fait, ou nous pouvons dessiner une ellipse comme ici. Donc, dans l'ellipse, nous passons quatre paramètres différents ici. Donc, si nous allons à la documentation p5.js et que nous allons à la référence. Ici sous forme, voici la fonction ellipse. Et nous voyons qu'il faut quatre paramètres comme nous passons n. Et ici, il indique ce qu'ils signifient, dit par défaut, les deux premiers paramètres définissent l'emplacement du centre de l'ellipse. Donc, nous lui donnons 306, 90. Et les troisième et quatrième paramètres définissent les formes, la largeur et la hauteur. Et c'est là que nous sommes donnés à 640 et 40 ans. Bon, donc après le corps, nous allons dessiner les oreilles. Nous allons dire ne pas choisir une couleur différente pour un sondage, un peu de vert. Ensuite, nous allons avoir besoin de deux ellipses. Donc pour la première, je vais passer, disons un 125, 135. Faisons 170. 170. Pour l'oreille droite. Faisons quatre, 75, 135 houles. Ils sont donc à la même hauteur en arrière-plan. Et aussi 140, désolé, 170, 170. Ils ont donc la même taille, k. Alors rafraîchissons. Et on y va. Voici les oreilles. Bon, alors allons maintenant faire la partie interne de l'oreille. Remplissez une couleur différente du vert foncé. Et ce sera deux autres points de suspension. Soyons donc 125, tout comme l'oreille externe. Faisons 135, même centre, puis faisons 140 et 140. Il est donc plus petit, plus petit. Et au fait, nous utilisons l'outil ellipse, mais ce sont tous des cercles parce que la hauteur et la largeur de l'ellipse, voici bonjour, voici la largeur sont les mêmes. Et l'autre que vous venez de faire sera une ellipse, elle sera 475 puis 135, puis 140 et 140 à partir. Rafraîchissons et voyons à quoi cela ressemble . Et on y va. Faisons donc le visage. Je suis allé dire « Fill ». Donnons une autre couleur. Faisons un peu de bleu, une autre ellipse. Et nous allons lui donner 300. Faisons trente quatre, cinquante, quatre quarante. Rafraîchissons. Et on y va. Il y a notre visage. Faisons donc les yeux. est tombé sur une autre couleur. Allons faire du violet. D'accord. C'est une ellipse. Et passons de 30 à 50 ans. Dessinons un 22 sur l'autre œil. Une autre ellipse. On va en faire 370. Et les mêmes valeurs, 250, nous voulons qu'il soit à la même hauteur, puis à la même taille, 282. Ok, rafraîchissons. On y va. Faisons donc les PBLS. Ils vont donc avoir le même centre, mais l'échec va être noir. Nous pourrions donc simplement écrire en noir, ou nous pouvons utiliser le code hexadécimal , c'est juste cela. Tous les zéros. Donc, ellipse. Et bien sûr, le centre sera le même, donc il sera deux trente et deux cent cinquante. Et nous voulons réduire l'élève. Nous allons donc en faire 30 par exemple. Le bon. Ce sera donc 375, 250 ans, puis 30 et 32 ans. Eh bien, nous allons nous rafraîchir. Et on y va. Bon, allons donc faire cette note. Échec. Eh bien, choisissons une autre couleur. Ok, et ça va être une autre ellipse. Passons donc par 100, 390. Et nous allons faire 200 par 200. C'est donc encore un cercle. Rafraîchissons. Et on y va. Et faisons la bouche. Je vais donc le rendre noir. Sur le code pour le noir, il y a tous des zéros. Donc, c'est six zéros. Et ici, je vais faire quelque chose de différent. Je vais faire un arc, un arc. Et si nous examinons la documentation, nous ferons référence. Voici notre arc. C'est ainsi que cela fonctionne. S'il est appelé uniquement avec x, y, w, a pour démarrer et s'arrêter, l'arc sera défectueux de drones. C'est un segment de tarte ouvert. Ce que nous voulons faire ici, c'est nous allons faire exactement, c'est vrai. 300, c'est-à-dire x. Faisons 420, et faisons 70 et 65, la largeur et la hauteur. Et puis pour commencer et arrêter, nous allons le faire, commençons à 0. Et terminons à Pi k , alors voyons à quoi ça ressemble. Oui, parfait. Et il nous manque juste le nez. Je vais être noir aussi. Donc, si nous n'avons rien fait, il restera noir car la dernière fois que nous appelons échouer, nous avons dit qu'il était noir, mais nous allons encore l' écrire ici aussi. C'est donc Xeon qui a sa couleur comme la Clara explicitement. Donc, 000 000 000 000 000 000. Et ça va être une ellipse. Et faisons 300, 350. Et faisons de nouveau un cercle. Donc, seulement 80 sur 80. Bon, nous allons nous rafraîchir. Et voici notre ours. 4. Obtenir des couleurs aléatoires à partir d'une liste: Ok, donc nous avons codé en dur toutes nos couleurs, rectangle avec une façon chlorophylle. Nous l'avons maintenant, nous avons une couleur que Claire, donc celle-ci change, mais nous voulons que les couleurs changent chaque fois que nous actualisons la page pour la rendre générale. Pour cela, nous allons retirer les couleurs de la fonction de remplissage. Et nous allons les placer dans un tableau JavaScript et laisser l'ordinateur choisir au hasard une de ces couleurs. Pour cela, tout en haut, nous allons ajouter un tableau. Ok, contre, couleurs. Il va s'agir d'un tableau. Et ici, nous allons ajouter toutes les couleurs que nous voulons utiliser. Nous pouvons donc ajouter celui-ci. Et nous pouvons en ajouter tous les autres. voici un autre. Oh, d'accord, donc on y va. J'ai ajouté toutes les couleurs que nous avions utilisées dans notre exemple. Il est donc temps d' appeler la fonction de remplissage. Au lieu de coder en dur la couleur comme nous l'avions auparavant. Maintenant, toutes les couleurs sont ici. Nous allons passer une fonction qui choisira au hasard l'une des couleurs de cette liste ici de ce tableau JavaScript qui inclut toutes les couleurs que nous voulons utiliser. Nous allons donc écrire cette fonction. Ok, alors appelons ça la fonction Grand Color. Nous n'allons pas transmettre d'arguments. Et c'est ainsi que nous allons le faire. Créons une variable appelée index qui sera Math.Floor. Et il y aura un point mathématique aléatoire multiplié par la longueur du point des appelants, c' est-à-dire la longueur de ce tableau. Voici donc 1234567. Ensuite, nous allons simplement renvoyer le tableau de l'appelant avec l'index aléatoire que nous avons généré. D'accord ? Donc, ici, cet index choisit un nombre pour une position dans le tableau ici. Et puis on retourne la couleur dans cette position, poursuit-il. Maintenant, à chaque fois que nous avons utilisé notre couleur, au lieu d'avoir la coloration ici, nous allons appeler la fonction d'appel rand. Ok, donc je vais le faire aussi pour le corps. Pour les oreilles, les oreilles internes, le visage, les yeux. Je vais laisser les élèves noirs, fumer. D'accord. Je vais laisser la bouche et le nez noirs. D'accord. Je vais donc enregistrer et rafraîchir et voir si cela fonctionne. D'accord. Cela n'a donc pas fonctionné. Voyons ce qui s'est passé ici. Ok, oui, j'ai oublié la parenthèse ici. Nous voulons exécuter la fonction. Faisons en sorte que je mette tous les autres. Rafraîchissons et voyons si cela fonctionne cette fois. Et cela ne fonctionne pas. Oui, j'ai une faute de frappe ici. C'est de la longueur. Ok, donc nous avons quelque chose de très trippant et ce n'est pas ce que nous voulons. La raison est que nous appelons la fonction ici, à l'intérieur de la fonction Draw. Donc, au lieu de baisser, nous allons définir les couleurs des différentes parties du corps sur certaines variables en dehors de la fonction. Ensuite, nous utiliserons simplement la variable ici. Par exemple, on peut dire que la couleur BG est égale à la couleur FRAND. Et ensuite, ici, on dira B à colorier. Essayons donc ça. Et on y va. Maintenant, l' arrière-plan est statique, donc je vais faire la même chose pour toutes les autres parties du corps. Alors, faisons-le. La couleur du corps est égale à la couleur R1. On va se substituer ici. Même chose pour l'IRS, même pour les oreilles internes, et même pour les yeux. Et enfin, il en va de même pour les neiges. Rafraîchissons donc. Et nous avons oublié les oreilles intérieures. Qu'est-ce qui ne va pas là ? Oui, c'est ici. Nous avons deux substitués à la variable. Ok, parfait. Et vous verrez que chaque fois que nous nous actualisons, notre script sélectionne désormais différentes couleurs au hasard. Cependant, c'est un peu trop coloré pour moi. Je veux que certaines couleurs correspondent, par exemple, à la phase et aux oreilles. Nous allons donc utiliser moins de variables pour les différentes couleurs. Je vais donc en garder un pour le fond, en garder un pour le visage. Et je vais en garder un pour les yeux, mais c'est à peu près tout. Donc pour les oreilles, intérieures et extérieures, et pour cette note, je vais juste utiliser la couleur du corps. Voici donc la phase qui utilise également la couleur du corps. Ce nœud utilise la couleur du corps. D'accord ? Oui, c'est un peu plus logique. Cependant, parfois, les appelants sont répétés à, par exemple, ici, ce script utilise les mêmes couleurs, la même couleur pour les yeux, pour le corps, le visage, etc. Et je n'en veux pas. Nous allons donc modifier notre fonction de couleur aléatoire. Et nous allons dire ce qui suit. Tout d'abord, nous allons créer ici un tableau que nous allons appeler. Utilisez des appelants, des index, d'accord, et il s'agit d'un tableau vide. Donc maintenant, ici dans la fonction, nous allons dire pendant qu'ils sont utilisés, les appelants existent, le point inclut l'index. Cela signifie que si dans ce tableau nous avons déjà cet index, nous allons réécrire la valeur de index en générant un nouveau. S'il n'est pas dans ce tableau comme celui-ci pour le moment, car il est vide, cette valeur restera. Et la dernière chose que nous voulons faire est après cela, après avoir obtenu un index, nous allons ajouter cet index à ce tableau. Nous allons donc dire utiliser des couleurs dans l'index Porsche. D'accord ? Maintenant, si nous nous rafraîchissons, nous verrons que les trois couleurs sont toujours différentes. 5. Correcte de yeux: Ok, donc notre scénario fonctionne très bien. Je vais juste ajouter un peu de détails aux yeux. Je vais juste ajouter du blanc. Alors, pour cela, qu' avons-nous les yeux ici ? Eh bien, nous allons faire, c'est que nous allons copier tout ça. D'accord ? Et nous allons avoir une ellipse extérieure indiquant que c'est vraiment un cercle qui prend tout l'espace. Mais celui-là, nous allons le rendre blanc. On pourrait juste écrire ici en blanc. Ou nous pouvons utiliser les codes couleur HTML, qui sont FF, FF, FF, FF. Et puis la seconde, nous allons laisser la couleur glacée générée par le script. Mais nous allons le rendre plus petit. Disons donc 59 par 59. en va de même pour celui-ci. Bon, je vais économiser et me rafraîchir. Ça va aller. C'est mieux. 6. Éclairer quelques couleurs: Ok, donc nous utilisons la même couleur pour le corps, la phase, la neige , les oreilles, etc. Mais je vais ajouter une petite fonction juste pour que nous ayons différentes nuances de cette couleur. Ce que j'ai l' intention de faire, c'est que je vais rendre le visage, l'oreille externe et le corps légèrement plus légers, et je quitterai la voiture qui a été sélectionnée pour l' oreille interne et pour ce nœud. Et puis l'arrière-plan, je vais toujours rendre plus clair que la couleur réelle. Pour cela, il y aura un lien dans la description vers ce fichier GitHub. Et c'est une fonction pour Leiden dans une couleur, celle-ci, c'est un peu compliqué. Eh bien, nous pouvons simplement le copier et le coller et ensuite nous l'inclure dans notre script. Je vais donc copier et je vais le coller. Et je vais le coller tout en bas. On y va. Cette fonction prend donc une couleur au format HTML qui commence par le signe dièse, puis elle prendra un pourcentage. D'accord ? Je vais donc utiliser cette fonction. Voyons en arrière-plan. Donc, au lieu de la couleur d'arrière-plan, nous allons utiliser la fonction lumière et parenthèse de couleur. Et nous passons dans la couleur de fond. Et puis disons 30. Rafraîchissons donc. Ok, oui, choisissons une couleur pour l'arrière-plan et ça rend automatiquement plus légère qu'elle ne l'est à l'origine. Nous allons donc faire la même chose avec la la couleur du corps parenthèse de la couleur du corps. Et puis nous passons dans la couleur du corps. Et ensuite, faisons juste 10 % ici. Et je vais copier toute cette ligne. Je vais l'utiliser aussi dans les oreilles externes. Je vais aussi l'utiliser dans leur visage. Et je vais aussi utiliser ce qui est dit dans le corps, dans l'oreille et dans le visage. Et cela devrait fonctionner. Rafraîchissons donc. Oui, parfait. 7. Télécharger les fichiers: Ok, et la dernière chose que nous allons faire, c'est que nous allons ajouter une petite fonction en bas. Et cette fonction va nous permettre de télécharger le fichier. Il est temps de se rafraîchir. Donc, ça se passe comme ça. Il va au document, au point, à ajouter un événement, à l'écoute. Le type d'événement que nous allons écouter, c'est du contenu DOM chargé. Et ce que nous disons, c'est quand le contenu du document est complètement chargé sur ce qui suit et nous allons passer une fonction. C'est ce qu'on appelle une fonction de flèche en JavaScript. Il s'agit donc d'un ensemble de parenthèses et de R0, qui est égal plus grand que le signe. Et puis des crochets bouclés avec un point-virgule. Et ici, à l'intérieur d'une fonction que nous allons faire , c'est définir le délai d'attente. Et cela va prendre une autre fonction de flèche comme premier argument. Et ici, nous allons ouvrir les bretelles bouclées et fermer les accolades bouclées. Et à l'intérieur, nous allons dire Enregistrer sous V, parenthèse g, puis SVG, toutes minuscules. Et puis une virgule après le crochet bouclé de fermeture. Et 500, ce qui signifie 500 millisecondes. Cela signifie le faire après 500 millisecondes. Alors sauvegardons, rafraîchissons et voyons si cela fonctionne. Oui, il nous demande de le télécharger. Je vais donc le télécharger à nouveau. D'accord. Ici, si j' ouvre mes téléchargements, voici tous mes petits ours en peluche. 8. Modifier la palette de couleurs et les formes: Bon, donc dans la dernière leçon, je veux vous montrer comment expérimenter ce script pour créer votre propre design original. Donc, tout d'abord, je vais commenter la fonction que nous avons ajoutée dans la dernière leçon. Et pour cela, il existe différentes façons de le faire. Nous pouvons simplement faire cet astérisque oblique avant , puis nous en ajouterons un autre à la fin. barre oblique d'astérisque vers l'avant, ou l'inverse. Et maintenant, cette fonction va être ignorée. Je ne fais que ça. Il ne nous demande donc pas de télécharger le fichier chaque fois que nous actualisons pendant que nous expérimentons. D'accord ? Donc, en gros, vous pouvez d'abord expérimenter en modifiant les couleurs. Vous pouvez avoir différentes couleurs, vous pouvez en ajouter d'autres, vous pouvez en retirer certaines. La seule chose est que vous devez respecter la syntaxe d' un tableau JavaScript avec toutes les chaînes différentes pour les appelants toujours entourées de guillemets simples. Et vous ajoutez une virgule à la fin dans tous les cas sauf la dernière. Nous avons donc maintenant peu de couleurs. Et nous allons passer par HTML color codes.com et expérimenter, essayer d'ajouter de nouvelles couleurs. Nous allons donc ajouter celui-ci. Et ajoutons un peu de gris. Allons aussi gris clair. D'accord ? Et nous allons avoir autant de couleurs nous le voulons ici, puisque la fonction de génération d'une couleur aléatoire est prise en compte de la longueur de ce tableau. Il n'est pas nécessaire qu'il s' agisse d'un terrain spécifique. Vous pouvez utiliser autant de couleurs que vous le souhaitez. Rafraîchissons et voyons comment. Maintenant, le script est également inséré dans les nouvelles couleurs. Voici notre gris. D'accord ? Et ensuite, l'autre chose que vous pouvez faire est dans la fonction de dessin, vous pouvez modifier tous ces éléments. Par exemple, si nous modifions le poids du trait, les lignes dessinées seront beaucoup plus minces. Comme ça. Vous pouvez également modifier chaque élément individuel ou même créer des éléments à partir de zéro. Vous pouvez expérimenter avec les lèvres avec le nom postérieur. N'oubliez pas que les deux premiers paramètres sont x et y, qui déterminent le positionnement du centre de l' ellipse dans le Canvas. Et ces deux derniers sont la hauteur et la largeur de cette ellipse. Par exemple, nous pourrions rendre la phase, rendre plus mince en modifiant celle-ci qui est la largeur. Allons en faire 400. On y va. Et nous pourrions également ajouter quelque chose à l'arrière-plan. Par exemple, nous pourrions ajouter une ellipse qui a son centre au milieu de la toile. Puisque la toile est de 600 sur 600, sera 300, 300. Et puis on peut le faire prendre toute la toile et ce sera un cercle en arrière-plan qui prend l'ensemble de la toile six cent six cents. Nous pouvons en faire une couleur différente. Alors remplissez. Et nous pouvons ajouter une nouvelle variable pour cela. La couleur du cercle est égale à la couleur sram. Disons la couleur du cercle ici. Voyons si ça a fonctionné. On y va. Donc, dans la section description, vous allez avoir un lien vers l'ensemble de mon script. Vous pouvez le vérifier. Il y a si vous commettez des erreurs, et cetera. Et n'hésitez pas à expérimenter et à modifier tous les différents paramètres et même essayer de dessiner quelque chose à partir de zéro avec des ellipses sur les arcs. Et si vous vous sentez très aventuriers, vous pouvez même lire la documentation p5.js et utiliser différentes nouvelles formes que nous n'avons même pas utilisées dans ce cours.