Créer de l'art génératif émergent avec JavaScript et P5.js

1. Introduction: bonjour et bienvenue à un maître de Belikov gras. Et aujourd'hui, je vais vous apprendre à créer de l'art généré en utilisant une technique qui implique comportement émergent. Une fois que vous aurez appris cette technique, vous serez en mesure de créer une grande variété d'animations et d'images fixes qui semblent très complexes et belles. Pour l'instant, nous allons créer deux pièces animées en dehors de l'art. C' est le 1er 1 Il semble être si plein de vie, n'est-ce pas ? Mais la création de ceci ne prendra que quelques minutes et un code très simple. D' accord. Et c'est la deuxième pièce de l'art émergent que nous allons créer aujourd'hui. Cela peut sembler plus complexe que le 1er 1, mais je vous assure que ce n'est pas vrai. Nous serons en mesure de créer cela aussi. Dans un très, très peu de temps. Vous n'aurez pas besoin d'outils ou de connaissances spéciaux pour cette classe. Nous n'écrirons que du code javascript, donc vous aurez seulement besoin d'un Broza. Nous allons plonger dans le code dans la prochaine vidéo. Donc, je te verrai là-bas 2. Créer des œuvres d'art émergentes animées: Bonjour et bienvenue. Nous utiliserons un stylo pour écrire tout notre code. Alors allez à la cour ben dot io et créez une nouvelle broche. Nous n'écrirons aucun HTML r C s s maintenant, donc vous pouvez minimiser les panneaux. Ensuite, nous allons utiliser une bibliothèque appelée p five dot Js pour dessiner sur notre toile. Vous n'avez pas besoin de l'utiliser, mais cela simplifie vraiment votre cour et vous aide à vous concentrer davantage sur vos algorithmes pour l'ajouter. Allez dans les paramètres, puis JavaScript et ici, comme pour p cinq largesse. Sélectionnez la première option et vous pouvez maintenant fermer ce Ce soit cinq DJs. Vous aurez seulement besoin de fonctions pour commencer à sécher. La première fonction est appelée set up et la seconde fonction est appelée Draw. L' ensemble de fonction n'est appelé qu'une seule fois, mais la fonction de dessin est appelée encore et encore environ 60 fois par seconde. Cela signifie que tout ce que vous dessinez à l'intérieur de cette fonction peut devenir une animation. D' accord. Tout d'abord, créons un Gammas à l'intérieur de la fonction de configuration. Nous voulions être un carré, alors fixons la taille 2 400 par 400. Et puis donnons-lui un arrière-plan. Vous pouvez passer toutes les valeurs RVB au dysfonctionnement. , si vous lui transmettez une seule valeur Toutefois, si vous lui transmettez une seule valeur, elle devient un gris désactivé partagé. Donc zéro est noir et 2 55 est blanc. Tout ce qui se trouve entre les deux sera d'accord. C' est aussi le bon moment pour définir les valeurs de contour et de remplissage de notre toile. Je vais dire que la couleur du trait est un noir semi-transparent. Comme vous l'avez peut-être deviné, le deuxième paramètre spécifie ici la transparence sur Daz pour la couleur de remplissage. Que ce soit une sensation noire légèrement moins transparente. Libre a conservé ces valeurs. Si vous êtes en cour maintenant, vous pouvez voir la toile maintenant pour créer des graphiques basés sur le comportement émergent, vous aurez besoin de beaucoup d'éléments simples qui peuvent se déplacer et entrer en collision les uns avec les autres. Vous pouvez les appeler particules, créatures de Boyd ou tout ce que vous voulez. Je les appelle simplement particules. Donc, disons pour l'instant que nous avons 100 particules AH. Le magasin, toutes les particules. Utilisons un tableau. Chaque particule peut avoir une taille, alors disons qu'elle est de 40 à nouveau. Vous êtes libre de modifier les valeurs de ces variables. En fait, c'est ainsi que vous modifiez votre génération sur. Bon maintenant, écrivons une fonction pour créer une particule pour garder les choses bien rangées. Disons que notre particule est un objet. Il va avoir quelques champs. Le 1er 1 va être sa position. Évidemment, une position sur nos toiles constitué d'une coordonnée X et de je coordonnée pour stocker acheté les valeurs. Ensemble, nous pouvons utiliser un vecteur. Pour l'instant. Affectons une position aléatoire à notre particule, donc nous devrons utiliser la fonction aléatoire pour la coordonnée X aura besoin d'une valeur aléatoire entre zéro et la largeur de la toile, donc juste multiplié mais choisi de façon similaire pour le Y. Coordonner, Il suffit de multiplier un nombre aléatoire avec la hauteur de la toile. Ensuite, nous devrons spécifier la direction dans laquelle notre particule se déplace. Cette direction sera composée d'un X, confiant et de je confiant, alors créez un autre vainqueur et définissez sa valeur à quelques nombres aléatoires. En d'autres termes, donnez-lui une direction aléatoire. Et maintenant ajoutons orteil des comportements très simples à nos particules. Nous allons le faire à l'intérieur d'une fonction appelée mise à jour. Ok, le premier comportement va être le mouvement en ligne droite. En d'autres termes, la particule doit toujours se déplacer dans la direction qui lui est assignée. Pour implémenter cela, tout ce que nous devons faire est d'ajouter le vecteur de direction au vecteur de position. Maintenant, si la particule continue de se déplacer dans une direction, tôt ou tard, elle sortira de la toile pour gérer une telle situation. Ajoutons un autre comportement. Disons que si la particule se déplace à l'extérieur de la toile, elle saute simplement au centre de la toile. Pour ce faire, nous devons vérifier si la coordonnée X est supérieure au mot de la toile, notre Lesa que zéro. Si c'est vrai, nous définissons la coordonnée X. Remorquez-le par deux. Ce n'est rien d'autre que le centre horizontal de notre toile. De même, si la coordonnée par est supérieure à la hauteur de la toile sont inférieures à zéro, nous avons réglé la hauteur des orteils par deux, qui est le centre vertical de notre toile. La fonction de mise à jour est maintenant terminée sur notre particule à est prête, alors revenons-la à partir d'ici. Maintenant, il est temps de créer 100 particules. Nous pouvons le faire à l'intérieur de la fonction de configuration, alors allons-y. Ah, Farlow Pia. Et à l'intérieur, nous pouvons pousser de nouvelles particules à l'intérieur des particules. Harry. Bon, maintenant on dessine les particules. Donc, à l'intérieur de la fonction de dessin, écrivons un autre pour boucle orteil itérer sur toutes les particules ici, utilisons un cercle pour représenter une particule. Pour tracer un cercle dans p 5 ponts, vous devez utiliser la fonction Ellipse au-delà des coordonnées X et Y de la particule à la fonction et lui transmettre également la taille des particules. Notez que ce sera le diamètre du cercle, pas le rayon, et pour déplacer sa particule appelée fonction de mise à jour. À ce stade, si vous êtes en cour, vous verrez quelque chose comme ça, pas exactement ce que nous attendions, n'est-ce pas ? Cela se produit parce que les cercles sont continuellement dessinés, chaque image, et ils se surévaluent eux-mêmes et les uns les autres pour corriger cela. Nous avons juste besoin d'effacer la toile chaque fois que nous dessinons. Nous pouvons le faire en appelant à nouveau la fonction d'arrière-plan. Cette fois, je le mettrai en blanc orteil Scholar. Et maintenant, comme vous pouvez le voir, le mouvement des cercles a l'air bien. Il est temps d'ajouter un comportement un peu plus complexe à nos particules. Ce comportement leur permettra de se heurter les uns avec les autres et de réagir de manière appropriée. Donc, créez une nouvelle fonction appelée collisions de vérification. A l'intérieur, nous devons faire une boucle à travers toutes les particules et prendre, cas échéant, pour entrer en collision. Nous aurons donc besoin de deux boucles imbriquées. Une particule ne peut pas entrer en collision avec elle-même, alors ajoutons une condition à prendre pour cela. Ok, maintenant c'est très facile à prendre. Si deux particules circulaires identiques entrent en collision, tout ce que vous devez faire est de vérifier si la distance entre leurs centres est inférieure à leur rayon. Pour calculer la distance, vous pouvez utiliser leur fonction de distance. Vous devez passer les positions des deux particules à dysfonctionnement. à Si cette distance est inférieureàla taille des particules, ça veut dire qu'on a une collision. Comment gérer la collision ? Disons que nous avons simplement changé les directions des deux particules, mais au lieu de leur assigner ah, toute nouvelle direction aléatoire. Tournons simplement au hasard la direction. Alors appelez la fonction de rotation sur la direction victor de la première particule et lui a transmis une valeur aléatoire. Aussi, faites-le. Faites la deuxième particule. Ok, c'est assez bon. Pour l'instant, appelons la fonction de collision tic à l'intérieur de la fonction de dessin et voyons comment les particules se comportent. Très intéressant. Mais il semble que toutes les particules sont en quelque sorte gelées et ne sont pas capables de bouger. C' est parce que nous ne donnons pas assez de temps aux particules pour s'éloigner les unes des autres. Pour corriger cela, ajoutons quelque chose comme un compteur à chaque particule et dit sa valeur à zéro par défaut . Disons qu'après une collision, on ne veut pas déranger la particule avant un certain temps. Disons qu'après une collision, Plus précisément, disons que nous ne voulons pas déranger la particule pour certains cycles de tirage. Pour spécifier ce nombre, nous allons utiliser une variable nommée compteur Max. Je vais définir sa valeur à 1 50 Cela signifie qu'après une collision, la particule sera capable de se déplacer librement pour 1 50 appels de drogue pour appliquer ce comportement À l'intérieur des religions de contrôle Fonction dit la valeur de la propriété de compteur à la fois le particules en collision ne compteur Max. Maintenant, nous pouvons simplement dire que le comportement de collision d'une particule ne devrait être exécuté que si c' est compteur est zéro, alors ajoutez, comme si les conditions aux deux particules. Si le premier compteur de particules est égal à zéro, exécutez ces deux lignes, et si le second compteur de particules est égal à zéro, exécutez ces deux lignes. Enfin, nous devons dépénaliser le compteur. Nous pouvons le faire à l'intérieur de la fonction de mise à jour de la particule. Donc, si le compteur est supérieur à zéro, juste discriminé par un chaque fois qu'il est mis à jour. À ce stade, s'il a couru notre cour, les particules sont capables de se déplacer librement. D' accord. Maintenant, il n'y a aucune raison pour que la taille des cercles soit égale à la taille des particules. Changons le rayon ici dans la fonction Ellipse à quelque chose de beaucoup plus petit. Le moment semble beaucoup plus clair maintenant. Ensuite, essayons quelque chose de différent. Chaque fois que deux particules entrent en collision, tracons une ligne entre elles. Cela est facile, mais nous ne pouvons pas vraiment tracer une ligne à l'intérieur. La fonction de vérification des collisions. Donc, chaque fois que la collision se produit, stockons les positions des particules en collision à l'intérieur d'un tableau. Je vais appeler les lignes IRA. Ici. À l'intérieur de la fonction de religions technologiques commence simplement ajouter les positions des particules à la zone, sorte que chaque article, un journal lui-même, sera un tableau contenant deux éléments qui ne sont rien d'autre que les positions off les deux particules. Maintenant, vous devez vous assurer que cette zone de lignes est vide chaque fois qu'une fonction de collisions est appelée. Sinon, il deviendra très grand. Donc réinitialiser ce sont le début de la fonction. Ok, retour à l'intérieur de la fonction de tirage. Tout ce que nous devons faire maintenant est de faire une boucle à travers les lignes sont un et dessiner les lignes, alors créez une boucle for à l'intérieur. Il a utilisé la fonction de ligne pour tomber. Les 2 premiers arguments de la fonction sont les coordonnées X et Y de la première particule. Et les deux arguments suivants sont les coordonnées X et Y de la deuxième particule. Et voilà. Nous avons déjà une animation intéressante. Maintenant, vous êtes libre de changer les comportements des particules. Cependant, vous pouvez modifier cette animation en changeant ces variables globales à, par exemple, exemple, si j'ai changé la taille des particules à quelque chose de beaucoup plus grand, disons, 80 J'obtiens une animation très différente. Vous pouvez également réduire davantage la taille des cercles pour donner une sensation différente à l' animation. Vous pouvez également augmenter le nombre de particules elles-mêmes, mais pas que cela puisse avoir un effet drastique sur la performance. Donc, comme vous pouvez le voir, mais juste un tas de comportements simples assignés à un grand nombre de particules, nous avons réussi à créer une animation qui semble à la fois intéressante et genre de beau Do . 3. Ajouter des traînées: bienvenue à la dernière leçon de cette classe. Maintenant, nous n'allons pas ajouter de comportements supplémentaires à nos particules. Au lieu de cela, ils vont simplement changer la façon dont nous les utilisons pour tracer nos lignes. abord, disons que la couleur de la ligne qui est tracée entre faire des particules en collision dépend de la distance entre les particules. Donc ici, avec les positions, incluons la distance dans le tableau. Maintenant, nous devons convertir la distance en une valeur qui est entre zéro et 2 55 C'est parce que les valeurs RVB hors couleurs doivent être comprises entre zéro et 2 55 seulement. Pour ce faire, nous pouvons utiliser la fonction de carte. Le premier argument de cette fonction est la valeur que vous souhaitez mapper au-delà de la distance , qui est le troisième élément de la zone. Les deux arguments suivants de dysfonctionnement ont défini leur portée hors de la distance. Maintenant, cela ne peut, bien sûr, être qu'entre zéro et la taille des particules elle-même. Les deux arguments suivants ont défini la plage des couleurs alors dites zéro et 2 55 ici. Non, si nous appliquons cette couleur au trait de la ligne et exécutons vz. Ce n'est pas mal. Cachons maintenant complètement l'ellipse. En fait, les dessinons pas du tout. Donc, je vais supprimer cette ligne, ni que nos lignes sont très légères pour les rendre plus proéminentes. Changeons la couleur de fond ici. Fais du noir. Ok, voyons ce qui se passe. Si nous déplaçons cet appel à la fonction d'arrière-plan, faites le métal mis en place à la place. Cela signifie que nous allons dessiner à plusieurs reprises sur notre toile sans l'effacer. C' est beaucoup mieux maintenant. C' est une belle animation pour le rendre encore mieux. Ajoutons de la valeur Alfa à notre couleur de trait. Que ce soit une très petite valeur, disons, cinq. Comme vous pouvez le voir, cela a eu un effet très profond sur le regard de l'animation. Je l'aime beaucoup plus parce que les lignes sont ténor. En fait, ça ressemble à Harry, n'est-ce pas ? Vous pouvez à nouveau jouer avec ces variables globales pour modifier davantage l'animation. Voyons ce qui se passe si nous avons très peu de particules dire, Puis encore une fois, une animation très différente mais très intéressante. Il est à noter que toutes ces animations peuvent durer éternellement et semblent toujours intéressantes à tout moment. Si vous voulez enregistrer l'art, vous pouvez simplement cliquer avec le bouton droit de la souris et l'image perçue car cela permettra d'enregistrer votre art en tant qu' image fixe sous la forme d'un fichier PNG. D' accord, c'est tout pour l'instant. Mesdames et messieurs, je suis maître du hot available, et je vous remercie d'avoir regardé ces vidéos.