Introduction à l'art génératif dans Processing

1. Introduction: Bonjour, tout le monde. Je suis Hadeel, et voici l'introduction à l'art génératif. Dans ce cours, nous apprendrons les concepts de base de la programmation et certaines fonctions spécifiques de traitement pour créer cette œuvre d'art générative. Le traitement est un langage Java, et c'est l'un des moyens les plus simples d'apprendre à aller. Non seulement il donne la possibilité d'apprendre une langue répandue, mais il fournit également des résultats visuels instantanés. Nous ferons également référence à la page de documentation de traitement pour montrer comment tirer le meilleur parti du traitement, ce qui vous aidera sûrement à créer votre projet. En outre, je vais vous montrer comment utiliser une bibliothèque de traitement pour exporter les résultats dans un format vectoriel. Un excellent moyen d'enregistrer des images de haute qualité ou manipuler le travail à l'aide d'un logiciel comme Adobe Illustrator. À la fin de ce cours, vous devriez être en mesure de programmer et de produire une pièce originale. Ils seront votre certificat de fantaisie pour présenter au monde entier. Commençons. 2. Les bases du codage: Tout d'abord, vous devez connaître les concepts de base de n'importe quel langage de programmation pour pouvoir passer par cette classe. Ils sont très faciles à comprendre et avec la pratique, vous serez en mesure de créer un design génératif par jour avec ceux-ci. Le codage en dur de chaque valeur de précision, taille ou couleur peut se transformer en une tâche fastidieuse à la fois, surtout lorsque vous devez modifier des valeurs pour un tableau de formes, c'est pourquoi nous avons besoin de quelque chose appelé variables. Une variable est simplement un nom que vous définissez pour une valeur pour l'enregistrer en mémoire, pour l'utiliser dans tout le programme. En général, par exemple, si vous voulez définir le rayon du cercle, vous tapez CirclRadius égal à 100, comme dans un 100 pixels. Maintenant, le programme comprend que CirclRadius est un 100 pixels parce que nous l'avons défini. Dans le traitement cependant, cette instruction manque un mot-clé très important, qui signifie que votre programme peut lancer une erreur à cause de cela. Le mot-clé est int. Int représente des entiers, et c'est l'un des types de données du traitement. Il existe plusieurs types de données dans le traitement que vous pouvez utiliser dans vos programmes, tels que int pour les entiers, float pour les nombres décimaux, chaîne pour le texte, char pour les caractères, booléen pour les valeurs vraies et fausses, couleur pour les teintes, pour les listes ordonnées et les dictionnaires pour les listes de valeurs clés. Dans ce cours, nous n'utiliserons que des entiers, flottants, des tableaux et des couleurs. Puisque nous créons une grille, cela signifie que nous allons dessiner un tas de formes sur la toile, ce qui semble être beaucoup de travail jusqu'à ce que vous appreniez à connaître les boucles. Les boucles sont un excellent moyen de faire la même tâche plusieurs fois sans les tracas de taper cette tâche encore et encore. Une façon de créer une boucle est d'utiliser le « mot clé For » comme ceci. La première partie de l'instruction spécifie le début de la boucle, la deuxième partie indique quand arrêter une boucle, et la troisième partie est votre valeur d'incrément, et quel que soit le code que vous voulez répéter ceux à l'intérieur du corps de la boucle. Parfois, à l'intérieur des boucles ou toute autre partie de l'esquisse, nous devons contrôler le flux de notre code en utilisant « Si conditionnals ». Ceci est utile si vous voulez exécuter un bloc de code uniquement lorsqu'une instruction est évaluée à true, voulant uniquement colorer les formes s'il s'agit d'une colonne numérotée pair. La dernière chose que nous devons savoir dans cette leçon sont les fonctions et les méthodes, ces deux déclarations sont quelque peu les mêmes. Les méthodes sont fondamentalement des fonctions qui appartiennent à une classe, donc elles ne sont pas définies directement à l'intérieur du programme comme des fonctions. Nous n'avons pas besoin de connaître une tonne sur les fonctions pour ce cours autre que, c'est une instruction qui contient un bloc de code que vous pouvez appeler n'importe où dans votre programme en tapant son nom et en passant le type approprié et la quantité d'arguments . Au cours de ce cours, vous allez saisir toutes les informations contenues dans cette leçon et ne vous inquiétez pas de mémoriser quoi que ce soit en ce moment, tout le monde revient à la documentation de temps en temps, en particulier dans le début. 3. Introduction au traitement: Le traitement a trois composants principaux dont vous devez être conscient : l'éditeur de texte, où vous écrivez votre code, la console, où vous déboguez généralement votre code et Canvas, où vous pouvez visualiser votre conception. De plus, chaque fichier de traitement est classiquement désigné comme une esquisse. Dans chaque croquis, nous avons deux fonctions formant l'entraînement de base. L' un est appelé configuration, et l'autre est appelé dessin. La fonction de configuration englobe les paramètres de votre esquisse et elle est appelée une fois lorsque vous exécutez le programme. Alors que la fonction de dessin inclut le reste de votre code et il est exécuté pour chaque image jusqu'à ce que vous arrêtiez le programme. Maintenant que nous avons toutes ces informations, explorons les fonctions que nous pouvons utiliser pour configurer notre environnement. Tout d'abord, nous avons la fonction de taille qui détermine la taille de notre Canvas. Pour le projet, je suggère un rapport de trois par deux ou un carré. L' échelle elle-même n'a pas d'importance, principalement parce que nous allons exporter notre esquisse dans un fichier vectoriel qui peut être facilement ajusté après l'exportation. Je vais utiliser 600 par 400 pour la durée de ce cours. Une autre fonction que nous pouvons appeler dans la configuration est la fonction d'arrière-plan, qui détermine la couleur d'arrière-plan du Canvas. La couleur de fond à utiliser est bien sûr, à vous. J' utiliserai cette couleur. Nous allons également utiliser la fonction NoloOp pour arrêter la fonction de dessin en boucle. C' est parce que nous voulons créer un design statique. Au lieu de cela, vous pouvez créer des conceptions statiques en écrivant le code complet à l'intérieur de la fonction de configuration. Mais cela semble un peu contre-intuitif, et un peu déroutant, donc nous allons utiliser la fonction NoLoop. Une autre fonction de traitement que nous allons utiliser tout au long de ce cours est la fonction ellipse. Ceci est spécifique à la conception que nous créons. Cependant, il existe un assortiment de fonctions de forme que vous pouvez utiliser pour créer d'autres formes telles que des carrés, des arcs et des lignes. Passons au traitement pour démontrer ce que nous venons d'apprendre. Avant de faire quoi que ce soit avec le traitement, nous devons télécharger le logiciel. La façon de le faire est d'aller à processing.org, puis d'aller au lien de traitement de téléchargement. Maintenant, vous pouvez trouver le système d'exploitation dont vous avez besoin et le télécharger, pour moi c'est Mac OS. Je vais juste cliquer dessus. Le fichier doit être téléchargé. Décompressez le fichier et installez-le. Maintenant, ouvrons le traitement. Une fois que vous ouvrez le traitement, vous devriez voir un fichier vide comme celui-ci. Pour configurer l'environnement, nous définissons d'abord les fonctions de configuration et de dessin. Pour ce faire, nous faisons juste la configuration vide. La raison pour laquelle nous utilisons void, est parce que cette fonction ne renvoie rien, et donc vide, comme dans vide ne retourne rien, et void draw. Maintenant que nous avons défini la fonction de configuration et de dessin, nous pouvons configurer l'environnement en définissant la taille du Canvas. Nous pouvons le faire en utilisant la fonction de taille, comme nous l'avons vu précédemment dans la vidéo. La fonction Size attend deux arguments. On a dit qu'on utiliserait 600 par 400. N' hésitez pas à choisir la taille que vous voulez. Ensuite, nous ferons un fond de zéro pour l'instant. Maintenant, à l'intérieur de la fonction de dessin, nous allons dessiner l'ellipse. Nous pouvons le faire en utilisant la fonction ellipse, qui attend quatre arguments. On peut passer quatre arguments. Les deux premiers seront la position du centre de cette ellipse. Les deux autres arguments vont être la largeur et la hauteur de cette ellipse. Parce que nous voulons créer un cercle, la largeur et la hauteur vont être égales. Dans notre système de coordonnées, nous avons les axes x et y. Nous voulons que cela soit au centre de la page, donc zéro pour x et zéro pour y, qui est le centre de notre système de coordonnées, se trouve en haut à gauche de notre canevas. Si nous voulions aller au centre de cette toile, nous lui disons essentiellement d'aller à la largeur divisée par la moitié, puis la hauteur divisée par la moitié. Le traitement a des variables très utiles appelées largeur et hauteur. Ils obtiennent leurs valeurs à partir de la fonction de taille. Puisque 600 est la largeur de notre toile, et 400 est la hauteur de notre toile, largeur va être 600 et la hauteur va être 400. Si vous voulez le centrer horizontalement, nous divisons la largeur par deux. Ensuite, si nous voulions le faire verticalement, nous avons divisé la hauteur par deux. Pour la largeur et la hauteur, faisons juste 100 par 100. La largeur et la hauteur sont essentiellement le diamètre du cercle. Si nous l'exécutons, vous pouvez soit cliquer sur le bouton Exécuter ici ou vous pouvez faire la commande R. Maintenant, nous pouvons voir que nous avons un cercle sur un fond qui est noir. 4. Perusing la documentation: J' ai mentionné dans une vidéo précédente que nous pouvons utiliser une forme différente au lieu de simplement utiliser l'ellipse que j'utilise. Nous pouvons donc le faire en allant à la page de référence, et c'est essentiellement la page de documentation pour tout le traitement. Donc, quelles que soient les fonctions dont vous avez besoin, quels que soient les opérateurs dont vous avez besoin, tout ce dont vous avez besoin qui est lié au traitement, vous pouvez trouver dans cette page. Si vous accédez à la section Forme de la page Documentation et que vous descendez aux Primitives 2D, vous pouvez voir qu'il existe plusieurs formes que vous pouvez utiliser. Il y a une fonction Arc, il y a une fonction Circle, il y a une fonction Line, il y a aussi une fonction Rect, alors n'hésitez pas à choisir ce que vous voulez. Donc, je vais démontrer avec la fonction Ellipse que nous venons d'utiliser. Si vous allez à la page Fonction Ellipse et que vous descendez ici, vous pouvez voir que c'est la syntaxe de cette fonction. C' est ainsi que vous écrivez une fonction dans votre code. Ensuite, dans la section Argument de la fonction, donc A, B, C et D, qui sont les arguments de la fonction Ellipse, vous pouvez voir la définition de ceux-ci ici. Donc pour A, c'est un flotteur, et c'est la coordonnée X de l'ellipse. Et puis B est la coordonnée Y de l'ellipse. Puis C et D sont la largeur et la hauteur de cette ellipse. Je l'utilise pour créer des cercles, mais n'hésitez pas à choisir la fonction Cercle réelle pour créer vos propres cercles. Si vous revenez en arrière et voyez comment nous pouvons écrire cela, vous pouvez voir un exemple, puis vous pouvez voir qu'il a un X et Y comme les deux premiers arguments. Pour le troisième argument, vous pouvez voir que c'est l'étendue du cercle. Il y a beaucoup plus de formes que vous pouvez utiliser, comme vous l'avez vu dans la section Primitives 2D, et n'hésitez pas, bien sûr, à utiliser ce que vous voulez pour rendre votre projet aussi unique que possible. 5. Planifier la grille: Pour créer une grille, vous devez d'abord comprendre le fonctionnement du concept. Habituellement, avant de programmer quelque chose, vous le planifiez sur un morceau de papier ou mentalement, puis vous écrivez votre pseudocode et enfin vous commencez à coder. Cela rend la tâche à accomplir beaucoup plus facile. Comme nous l'avons dit précédemment, le point zéro sur notre système de coordonnées se trouve dans le coin supérieur gauche de notre canevas. En outre, une autre chose à noter est que le système de coordonnées est retourné verticalement. Donc, les positifs Y sont en bas, par opposition à la façon dont nous l'avons appris en maths. Donc, si nous avons besoin de descendre le canevas, vous ajoutez à la valeur Y. Si vous devez vous déplacer vers le haut, vous soustrayez de la valeur Y. L' axe des x dans la programmation fonctionne exactement comme en mathématiques. Aller à droite est positif et aller à gauche est négatif. Visualisons une grille. Pour dessiner une grille, nous devons connaître le nombre de colonnes et de lignes. Disons que nous voulons une grille 15 par 10. Maintenant, nous savons que nous devons définir le nombre de colonnes et de lignes pour créer une grille. Ce sont nos deux premières variables. Ensuite, nous savons que nous devons déterminer la largeur et la hauteur de chaque cellule de cette grille pour déterminer la taille maximale de nos formes. Nous pouvons le faire en divisant la largeur par le nombre de colonnes et la hauteur par le nombre de lignes. Telles sont les dimensions de nos cellules et il y a nos deux variables suivantes. La dernière chose que nous devons comprendre sont les positions X et Y de chaque forme. Si nous dessinons un cercle à zéro, zéro, il sera positionné dans le coin supérieur gauche de la première cellule, qui se trouve dans le coin supérieur gauche de la première cellule, qui se trouve dans le coin supérieur gauche du canevas. Maintenant, si vous voulez pousser ce cercle au centre de cette cellule, je peux simplement ajouter la moitié de la largeur de cette cellule à la position X de ce cercle et ajouter la moitié de la hauteur de cette cellule, faire la position Y de ce cercle. Cela va pousser notre forme au centre de cela. Cela fonctionne donc parce que les cercles et les ellipses sont tirés du centre. Pour les rectangles et les carrés, cependant, ils sont dessinés à partir du coin supérieur gauche. Donc nous n'avons pas besoin de les mettre n'importe où pour les centrer. Passez à la leçon suivante pour voir comment nous pouvons le faire par programme. 6. Créer la grille: Maintenant que nous avons conceptualisé comment créer des grilles à l'aide du traitement, laissez-vous passer au traitement et commencez à appliquer ces concepts. Tout d'abord, définissons toutes les variables dont nous avons besoin pour cette conception. Il y a quatre variables que nous devons initialiser. Les deux premiers sont le nombre de colonnes et de lignes et ils devraient être des entiers car nous ne pouvons pas avoir une demi-colonne ou une ligne. Les deux secondes sont les dimensions de chaque cellule. Pour éviter d'avoir des lacunes inutiles sur le côté droit et le côté inférieur de la grille, nous devons faire flotter ces variables parce que nous divisons deux nombres qui peuvent ne pas donner un nombre entier. Je vais déclarer les variables en dehors des fonctions pour les rendre globales afin que je puisse les utiliser partout dans le programme. Si j'ai déclaré les variables à l'intérieur de la configuration ou de la fonction de dessin. Je les fais des variables locales. Je ne peux accéder qu'à l'intérieur de leurs fonctions respectives. Maintenant que les variables sont déclarées, je peux les initialiser à l'intérieur de la fonction de configuration en passant les valeurs dont j'ai besoin. J' ai choisi d'avoir une grille de 15 par 10 pour l'instant. Donc, je vais faire les colonnes 15 et les lignes 10 et vous pouvez utiliser des raccourcis pour vos variables. J' ai utilisé des cols pour faire référence à des colonnes. Ensuite, je vais initialiser la largeur de cellule et les variables de hauteur de cellule en divisant la largeur, qui est la largeur du canevas, par le nombre de colonnes, et en divisant la hauteur par le nombre de lignes. Je vais faire la largeur de la cellule, et encore une fois, je dis cellule W ou je tape cellule W pour faire référence à largeur de la cellule et ce sera la largeur divisée par des colonnes. Ensuite, la hauteur de la cellule sera la hauteur divisée par des lignes. Je peux faire autre chose pour rendre ce code plus court qui est, au lieu d'écrire int ici et ici, je peux supprimer le second et ajouter une virgule entre les colonnes et les lignes. Donc maintenant, je sais que les colonnes sont un int et la ligne est un int, et le programme le sait aussi. Je ferai la même chose pour les chars. Utilisons des boucles pour pouvoir dessiner un tas de rectangles pour créer notre grille. Pour ce faire, nous pouvons utiliser la syntaxe de la boucle for, qui va comme ça pour int i égal à 0. C' est notre variable ou notre initialiseur, puis la condition est i est inférieure aux colonnes et enfin, incrémentant la variable i en faisant i plus, ce qui signifie que i incrémente par un. Ensuite, nous fermons les parenthèses et nous ouvrons le bloc de code. Maintenant, si nous créons un rectangle à l'intérieur de ceci, et nous lui avons donné une position de zéro, zéro. Donnez-lui la largeur de cellule et la hauteur de cellule et exécutez notre programme. Donc maintenant, nous avons 15 carrés l'un au-dessus de l'autre. Nous devons traverser la toile, comment pouvons-nous faire ça ? Nous pouvons utiliser la variable i pour déplacer chaque rectangle à sa position. Au lieu de zéro, qui est codé en dur, nous devons utiliser la variable i. Mais si vous avez utilisé i sans le multiplier par la largeur de la cellule, alors nous allons seulement incrémenter par un. Donc, si je lance ça maintenant, nous verrons qu'il n'y a qu'un point ou un pixel en mouvement. Si j'avais besoin de me déplacer par la largeur de la cellule, alors je dois la multiplier par la largeur de la cellule et maintenant nous avons nos colonnes. Mais comment créer les lignes pour chaque colonne ? Nous pouvons le faire en boucle à travers chaque colonne et en ajoutant un tas de boucles for pour cela. La façon dont nous pouvons le faire est d'utiliser une boucle à l'intérieur de notre autre boucle. Si je fais pour int et que je dois choisir une variable différente car il ne peut plus utiliser i car il est déjà utilisé dans cette boucle pour. Donc, je vais choisir j et le rendre égal à zéro, puis la condition pour cela va être inférieure à des lignes parce que nous voulons passer à travers la hauteur de la toile, puis j plus pour l'incrémenter, fermer les parenthèses et fermer le accolades. Maintenant, nous allons devoir inventer ceci pour comprendre que c'est à l'intérieur de deux boucles pour. Maintenant, si je recommence, on verra que rien n'a changé. Cependant, quelque chose a changé parce que maintenant nous avons 10 lignes sur l'autre, mais nous devons les déplacer sur la hauteur de la toile. Nous allons faire la même chose que nous avons fait avec les colonnes mais cette fois nous allons utiliser la variable j parce qu'un j fait référence à chaque ligne. Donc je vais multiplier j par la hauteur de la cellule et maintenant si je l'exécute, ça devrait fonctionner. Maintenant que nous avons créé notre grille, changeons ces rectangles en cercles parce que c'est le design que nous recherchons. Si je vais ici et que je change rect en ellipse, cela devrait fonctionner car ils ont la même quantité d'arguments dans le même arrangement. La position x et y pour les deux premiers et la largeur et hauteur pour la seconde ou pour l'ellipse ici, son diamètre. Si je cours ceci, je peux voir que toutes mes ellipses se sont décalées vers la gauche et le haut. La raison en est qu'ils sont tirés du centre. Comme nous l'avons dit précédemment dans la leçon précédente, nous devons ajouter la moitié de la largeur de la cellule à la position x et la moitié de la hauteur de la cellule à la position y de cette ellipse pour la centrer. Donc, si vous revenez ici et ajoutez la largeur de cellule divisée par deux et ici, hauteur de cellule divisée par deux. Cela devrait être centré dans les cellules et nous avons notre grille de cercles. 7. Ajouter de la couleur: Il existe généralement deux modèles de couleur à utiliser dans le traitement, RVB et HSB. RGB signifie rouge, vert et bleu, tandis que HSB signifie teinte, saturation et luminosité. Tout au long de ce cours, je me concentrerai principalement sur RGB. Les valeurs RVB vont de 0 à 255, zéro étant le plus sombre et 255 étant le plus lumineux. Chacune des fonctions concernant la couleur comme l'arrière-plan, le contour et le remplissage prend trois arguments, respectivement rouge, vert et bleu. Si les trois valeurs sont identiques, vous obtenez un mode de couleur en niveaux de gris. Par exemple, si vous passez en zéros, vous obtenez du noir, et si vous passez en 255s, vous obtenez du blanc. Vous pouvez obtenir des résultats comparables en utilisant un argument d'une valeur comprise entre 0 et 255. Sinon, combinez la quantité dont vous avez besoin pour chaque couleur pour obtenir les formes dont vous avez besoin. Disons que vous avez envie d'une couleur rouge vif, dans ce cas, vous passez 255 au premier argument, et si vous avez besoin d'une orange, alors vous ajoutez un peu de vert. Vous pouvez expérimenter avec des couleurs autant que vous le souhaitez jusqu'à ce que vous perceviez le concept. Bien qu'il existe une approche plus simple pour choisir les valeurs de couleur pour vos conceptions, c'est-à-dire en utilisant une roue de couleur. Une façon de le faire est d'utiliser Adobe Color. Choisissez des couleurs à l'aide du site Web Adobe Color, tapez color.adobe.com et vous accédez au site Web Adobe Color. Vous pouvez choisir les couleurs dans la section Explorer en allant ici où il est dit afficher toutes les sources. Si je descends et passe au thème de couleur, je peux choisir le plus populaire, le plus utilisé, puis une fois que j'ouvre une palette, je peux voir que je peux copier et coller les valeurs hexadécimales ici, que je peux utiliser. valeurs hexadécimales sont exactement comme les valeurs RVB. Nous pouvons voir cela dans l'onglet Créer ici, donc si je vais à la roue de couleur que nous avons ici, et que je passe en mode couleur, nous pouvons voir que c'est un RVB. Si je choisis pour la première couleur pour faire défiler tous ces vers zéro, nous pouvons voir que parce qu'ils sont tous des zéros maintenant la valeur est noire. Vous pouvez voir que c'est rouge et c'est vert, c'est bleu. Vous pouvez faire défiler toutes ces couleurs pour choisir les couleurs que vous aimez, ou vous pouvez les choisir dans la roue de couleur elle-même. Si vous regardez ici dans les valeurs hexadécimales, quand je n'ai pas ajouté de zéros, alors tous ces zéros sont des zéros. Ainsi, les deux premiers nombres sont pour les valeurs rouges, les deux secondes pour le vert et le troisième pour le bleu. Les valeurs vont de 0-9, puis de A-F. Si je veux qu'il soit blanc, la dernière valeur est F, donc je dois faire tous les Fs. Je vois que c'est 255 comme on l'a fait avant. C' est un excellent moyen de choisir les couleurs. Je vais généralement à l'onglet Explorer dans les couleurs Adobe, mais je peux aussi aller à l'onglet Tendances, et je peux faire défiler vers le bas jusqu'à la conception graphique, et si j'en vois plus, je peux voir les couleurs à la mode dans l'industrie de la conception graphique. Ensuite, si je l'ouvre, je peux copier et coller les valeurs et les ajouter à mon RPC génératif. Continuez à la leçon suivante pour voir comment nous allons utiliser les couleurs pour notre design. 8. Randomisation: Jusqu' à présent, nous avons initialisé nos variables et nos boucles imbriquées pour créer 15 colonnes et 10 lignes. En créant d'abord une boucle qui itère 15 fois, puis pour chacune de ces colonnes, nous faisons une boucle 10 fois pour créer 10 lignes. Voici à quoi ressemble notre grille maintenant. C' est un peu vierge sans aucune couleur. Ajoutons une fonction de remplissage à l'intérieur de la boucle. Quelle que soit la couleur que nous attribuons à ce remplissage sera appliquée à toutes les formes. Nous ajoutons toujours la fonction de remplissage ou n'importe quelle fonction de coloration avant les formes que nous voulons colorier. Sinon, ils ne l'appliqueront pas à cette forme. Nous ferons le remplissage et faisons zéro pour le noir. Si nous exécutons notre programme en ce moment, nous verrons que tous nos cercles sont noirs. Cependant, nous voulons un peu de randomisation. Nous pouvons le faire en utilisant la fonction aléatoire. La fonction aléatoire prend un ou deux arguments. Lorsque vous passez un argument à la fonction aléatoire, alors vous ne transmettez que le nombre maximum et le nombre minimum sera par défaut zéro. Cependant, si vous passez deux arguments, vous spécifiez les nombres minimum et maximum. Puisque nous savons que les valeurs de couleur vont de zéro à 255, nous pouvons passer dans 255 à la fonction aléatoire. Maintenant, nous allons obtenir un nombre aléatoire de zéro à 255. Ensuite, nous pouvons stocker cette valeur dans une variable et l'utiliser dans la fonction de remplissage. Démontrons dans le traitement. La fonction aléatoire renvoie toujours un nombre décimal, donc nous allons créer un flotteur appelé col, comme en couleur et lui assigner une valeur pour 255 aléatoire. Maintenant, nous passons cette valeur dans la fonction de remplissage. D' après ce que nous savons sur les couleurs, nous savons qu'un argument dans la fonction de remplissage signifie une couleur à partir d'un mode en niveaux de gris. Si nous gérons notre programme, nous pouvons en voir une preuve. Voyez comment le hasard, mais ils sont tous en niveaux de gris. Si vous voulez rendre le design coloré, alors nous devons obtenir une valeur aléatoire pour chacun des paramètres R, G et B. Au lieu de cela, créons trois variables, une appelée R l'autre appelée G pour vert, et une troisième appelée B pour bleu et donnez-lui une valeur aléatoire aussi de 255. Maintenant, ajoutons ceux-ci à la fonction de remplissage. Exécutons le programme et maintenant nous devrions voir une couleur différente pour chacun des cercles. Retirons la couleur du trait pour le rendre un peu plus attrayant. Je vais aller dans la fonction de configuration et ajouter une fonction sans course pour supprimer les traits dans notre conception. Tu dois toujours finir par un point-virgule. Si je dirige mon programme en ce moment, je peux voir que c'est beaucoup mieux. C' est un grand pas, cependant, nous aimerions que cela soit un peu plus contrôlé, car nous voulons choisir un thème de couleur spécifique à appliquer aux cercles. Nous le ferons dans la prochaine leçon. 9. La randomisation s'est suivie: Dans la leçon précédente, nous avons créé ce design en utilisant une valeur aléatoire pour les valeurs rouges, vertes et bleues. Mais nous voulons que ce soit plus contrôlé, comme nous l'avons dit. Pour avoir un thème de couleur plus contrôlé, nous devons créer un tableau. C' est ainsi que fonctionnent les tableaux. Nous avons une variable comme toute autre, mais son type de données est suivi de crochets, pour indiquer qu'il s'agit d'une liste de valeurs. Ensuite, pour assigner des valeurs, nous avons ouvert des accolades et ajouté les valeurs d' un type de données que nous avons spécifié avant les crochets. Maintenant, l'accès à ces valeurs nécessite une syntaxe différente de celle des variables normales. Il commence exactement comme des variables. Cependant, le nom de la variable est maintenant suivi de crochets. À l'intérieur de ces crochets, nous passons dans la position de ce point. Maintenant, les positions pour les tableaux sont appelées indices. Si je veux obtenir le premier élément dans le tableau, je dois passer dans l'index zéro. Parce que dans les tableaux de programmation, les indices commencent à zéro. C' est aussi l'une des raisons pour lesquelles nous commençons habituellement notre boucle for avec une valeur initiale de zéro. Allons créer notre tableau de couleurs. Ok, j'ai cinq couleurs dans mon thème de couleur que je vais copier et coller ici que je veux utiliser pour mes cercles. Donc, d'abord, je vais faire la couleur parce que c'est le type de données des valeurs, puis suivi de crochets et donner à cette liste un nom. Je vais l'appeler « couleurs ». Maintenant, je vais copier et coller mes couleurs. Ce sont les cinq couleurs que je vais choisir. J' utilise des valeurs de couleur hexadécimales car elles sont plus courtes que le tressage des valeurs RVB à l'intérieur des fonctions de couleur. Imaginez combien de temps ce sera si j'utilise les valeurs RVB. Maintenant que nous savons que les indices vont de zéro à un de moins que la longueur, nous savons que notre tableau de couleurs a cinq éléments, et donc il va commencer à partir de zéro et se termine à quatre. Maintenant, nous pouvons l'utiliser dans la fonction aléatoire. Donc, au lieu d'écrire tous ces éléments, je vais les supprimer et maintenant notre fonction de remplissage se plaindra parce qu'il n'y a pas de variables appelées R, G ou B. Je vais faire un flux et lui donner une valeur de « r » pour aléatoire, et je vais faire un de cinq parce qu'il passera de zéro à cinq, il n'atteindra jamais cinq. Mais maintenant, quand nous passons ici en utilisant le tableau de couleurs, et j'utilise les crochets. Maintenant, je vais utiliser la fonction aléatoire pour passer dans l'index. Je sais qu'il obtient un nombre de zéro à cinq, et je vais passer « r ». Mais maintenant, il y a une erreur ici parce que cela me dit qu'il y a une incompatibilité de type. « Float » ne correspond pas à « int ». La raison en est que dans le tableau, les indices ne sont que des entiers, donc il n'y a pas de nombres flottants. Nous pouvons changer la fonction aléatoire ici pour devenir un entier en faisant cela. Donc, si je dis que je veux que ce soit un entier, mais maintenant cela se plaint parce que la fonction aléatoire renvoie un flotteur. Donc, nous devons le convertir en un entier. La façon dont nous pouvons le faire est d'utiliser la fonction « int », passant la fonction aléatoire dans la fonction « int ». Puis maintenant je reçois un nombre aléatoire de zéro à quatre, ou de zéro à cinq. Mais ça va arrondir aux indices dont j'ai besoin. Nous pouvons vérifier ce que la variable « r » retourne en l'imprimant dans la console. Donc, la façon dont nous pouvons le faire est d'utiliser la fonction « println ». Println imprime essentiellement la valeur que nous la transmettons à la console et il crée une nouvelle ligne pour chaque valeur, il est donc plus facile pour nous de la voir. Donc, si vous imprimez la variable « r » et exécutez mon programme, je devrais d'abord voir que mes couleurs sont toutes transmises. Je peux voir ici que je reçois toujours une valeur aléatoire de zéro à quatre. Vous pouvez voir ici un trois, ici zéro, en voici quatre, et ici comme deux et il devrait y en avoir un quelque part par ici. Donc, nous savons que notre fonction aléatoire fonctionne, et bien sûr, nous pouvons la voir visuellement ici. C' est pourquoi le traitement est un excellent moyen d'apprendre la programmation pour les concepteurs car il est plus visuel que n'importe quel autre langage de programmation. Maintenant, obtenons la couleur d'arrière-plan que j'utilisais dans mon projet. Donc, comme vous pouvez le voir ici, j'ai la couleur de fond et la couleur brune que je choisis, et j'ai ma palette de couleurs spécifique au lieu de couleurs aléatoires arbitraires. Maintenant, nous allons randomiser la taille de chacun de ces cercles. Donc, si vous revenez au programme, nous pouvons voir ici que la largeur et la hauteur de l'ellipse sont fixées. Nous devons donc supprimer cela et le remplacer par une fonction aléatoire. Nous pouvons faire au hasard, et ensuite je veux qu'il monte à la largeur de la cellule et aussi à la hauteur de la cellule. Cependant, cela va créer un problème pour nous. Voyons ce que cela va entraîner. Donc, vous voyez comment il ellipse maintenant pas cercles, parce que nous passons dans une fonction aléatoire pour chacun des deux. Nous devons créer une variable pour la taille obtenir une valeur aléatoire pour la largeur et la hauteur. Alors je vais flotter, CircleSize. Maintenant, nous avons un CircleSize qui a une valeur aléatoire de la largeur de cellule, et nous l'avons passé en argument. Si nous exécutons le programme, nous pouvons voir que nous avons des cercles de taille aléatoire. Nous avons finalement réussi à créer le design que nous voulons créer. Cependant, dans le design que j'ai partagé, nous avions des cercles au-dessus d'autres cercles qui avaient aussi des tailles différentes. Donc, la façon dont nous pouvons le faire est d'utiliser un si conditionnel. On peut y arriver dans la prochaine leçon. 10. Contrôler le flux: Nous avons vu dans notre dernière leçon que nous avons créé une grille de cercles de différentes tailles et de différentes couleurs. Cependant, dans le même projet que j'ai partagé avec vous, j'avais quelques cercles au-dessus d'autres cercles. La façon dont nous pouvons le faire, comme nous l'avons dit dans la leçon précédente, est d'utiliser si conditionnals. Si je vais ici et écrire un si conditionnel, cela vérifie si la colonne est un nombre pair. Nous savons que les colonnes sont référencées avec la variable i. Je peux dire si le module 2 est égal à zéro, et ce que cela fait est fondamentalement diviser i par deux et vérifier si le reste de cela est zéro. Si c'est zéro, alors c'est divisible par deux, ce qui signifie que c'est un nombre pair. Le signe modulo renvoie le reste de la division. Maintenant, nous pouvons ouvrir les parenthèses. Nous pouvons mettre la fonction ellipse à l'intérieur du bloc. Maintenant, si nous l'exécutons, nous pouvons voir que nous voyons seulement que les cercles sont dessinés à l'intérieur comme tolérance de nombre pair. La raison pour laquelle cela commence dès le début est que nos indices commencent à partir de zéro ou nos valeurs dans les variables i et j commencent à partir de zéro, et zéro est divisible par deux, et donc il est considéré comme un nombre pair, même si ce n'est pas le cas. On aura zéro et ça va être un, la colonne numéro un, donc ce n'est pas même. n'y a pas de cercles là-dedans, puis nous avons deux, quatre et ainsi de suite et ainsi de suite. Nous pouvons améliorer notre code en choisissant un nombre aléatoire. Au lieu de l'avoir trop contrôlé, je voulais qu'il soit un peu plus arbitraire. Si je crée un nombre aléatoire, appelons-le position aléatoire, Pos pour la position, et je voulais être un entier, et je vais vous montrer pourquoi. Je vais lui donner une valeur aléatoire de zéro à deux. Je vais juste passer dans ce n'aura que des zéros ou des zéros. Maintenant, je peux vérifier ici. Si la position aléatoire est égale, et vous devez être conscient que, égal ici est un opérateur d'affectation parce que c'est juste un égal. Cependant, lorsque vous avez deux signes égaux, s'agit d'un opérateur de comparaison. Si je vérifie si la position aléatoire est égale à zéro, alors je voulais dessiner une ellipse autre. Faisons la même chose, mais un rectangle, juste pour voir la différence. Si je dirige le programme, je peux voir qu'il y a des cercles à certains endroits, et des rectangles à d'autres endroits. La seule raison pour laquelle c'est un peu bizarre est parce que les carrés sont poussés comme des cercles. Nous pouvons enlever le solide ajouté et ainsi de hauteur, et maintenant nous pouvons voir que c'est un peu mieux. Cependant, revenons aux ellipses. Maintenant, nous allons voir que nous sommes revenus aux premiers résultats. Cependant, la raison pour laquelle j'ai fait cela est parce que je veux créer une ellipse différente au-dessus de ces ellipses. Si je vais ici et je fais aussi une ellipse, mais cette fois, je veux que le nombre aléatoire pour la taille soit un peu différent. Je vais faire la taille du cercle divisé par deux, et la taille du cercle divisé par deux. Je vais obtenir des valeurs aléatoires, mais je vais le diviser par deux donc c'est plus petit, et c'est au-dessus de l'autre cercle. Cependant, cela ne va pas changer quoi que ce soit juste parce que ce sera de la même couleur. Nous devons réaffecter une cellule pour cela aussi. Puis scellez ces cercles avec cette nouvelle variable assignée. Maintenant, nous avons notre design. Ce que nous avons fait ici, c'est que nous avons réaffecté la variable r que nous avons ici, et si nous la relanceons, nous pouvons voir que nous obtenons d'autres valeurs aléatoires. Nous pouvons également réaffecter la variable de taille de cercle parce que maintenant nous obtenons seulement cette taille de cercle et ensuite nous la divisons par moitié, donc nous obtenons toujours la moitié de ce cercle. Mais je voulais que ce soit un peu plus aléatoire. Je voulais qu'il ressemble à certains des grands cercles ont de très petits cercles à l'intérieur, et certains des petits cercles sont couverts par de plus grands cercles. Je peux également réaffecter la variable de taille de cercle lui assignant également une valeur de largeur de cellule aléatoire, et la garder comme taille de cercle. Mais cette fois parce qu'il est réaffecté, nous allons obtenir des valeurs différentes de cette variable ici. Nous pouvons voir que nous avons des tailles différentes. Vous pouvez voir la partie jaune ici est très petite par rapport à la partie orange que nous pouvons voir, et vous pouvez voir ici qu'il y a un très petit point orange à l'intérieur de notre cercle bleu. 11. Exporter le design: C' est maintenant le point où vous ajoutez vos derniers réglages à votre projet. Parce que ensuite, nous exporterons le design. La façon dont je préfère exporter un design aussi simple est d'utiliser la bibliothèque PDF et le traitement. Pour utiliser cette bibliothèque, nous devons d'abord l'importer dans une esquisse en utilisant cette syntaxe. Importer, traiter, à partir de la bibliothèque de traitement je veux obtenir la bibliothèque PDF, puis j'utiliserai l'astérisque pour obtenir toutes les fonctions à l'intérieur de cette bibliothèque PDF. Fondamentalement, l'astérisque indique que nous voulons exposer toutes les fonctionnalités de cette bibliothèque à notre esquisse afin que nous puissions l'utiliser. Sinon, vous pouvez spécifier quelles fonctions exactement vous souhaitez importer à partir de cette bibliothèque. Examinons les fonctions que nous pouvons utiliser pour exporter notre œuvre d'art finale générée. Pour exporter notre design dans un fichier PDF, nous devons commencer l'enregistrement ou l' exportation avant la fonction d'arrière-plan ou la fonction NoStroke, car ce sont des fonctionnalités qui sont ajoutées à notre conception. Je peux enregistrer en utilisant la fonction BeginRecord. La fonction BeginRecord prend un type, donc je vais lui donner un type PDF. Ensuite, le chemin où vous voulez enregistrer vos conceptions. Les fichiers vont être exportés dans le dossier d'esquisse. Cependant, vous pouvez spécifier un dossier que vous souhaitez ajouter à l'intérieur de ce dossier d'esquisse, et c'est ce que j'aime faire pour le rendre un peu plus organisé. J' aime l'appeler sortie et ensuite je vais donner un nom au fichier. Je dirai, les grilles génératives, et l'extension. Maintenant, une fois que nous commencerons l'enregistrement, nous devrons y mettre fin. Parce que si nous commençons l'enregistrement et ne l'arrêtons jamais, vous n'obtiendrez jamais le fichier. Le fichier va commencer à enregistrer, mais il ne finira jamais l'enregistrement. Je vais devoir l'ajouter à la fin ici. La fonction EndRecord est fondamentalement EndRecord avec des parenthèses sans arguments à l'intérieur. Maintenant, si je lance mon esquisse, il est enregistré dans mon dossier d'esquisse. Allons vérifier le dossier d'esquisse. Ils peuvent trouver où vous avez enregistré vos fichiers si vous avez oublié en cliquant avec le bouton droit sur le titre ici. Je peux cliquer sur le dossier et il me mènera à l'endroit où je l'ai enregistré. Si je double-clique sur l'ouverture pour ouvrir le dossier, alors je peux voir que j'ai mon design ici et enregistré au format PDF. Maintenant que nous avons notre fichier PDF, nous pouvons l'ouvrir dans n'importe quel logiciel d'imagerie. Je vais l'ouvrir et prévisualiser parce que je suis sur Mac, mais n'hésitez pas à choisir n'importe quel programme qui ouvre un PDF et peut l'enregistrer dans un fichier image. Après l'ouverture et l'aperçu, je vais aller dans fichier, exporter, puis choisir PNG. J' ai la résolution à 300 pixels par pouce pour obtenir une image de très haute qualité. Vous devez choisir où vous voulez l'enregistrer, Il est sauvegardé. Maintenant, si nous revenons ici et prévisualisons le fichier, nous pouvons voir que l'image est de très haute qualité. Comme dans, il n'y a pas de pixellisation ou il y a une pixelisation mineure lorsque nous l'mettons à l'échelle. C' est génial. Maintenant, nous avons un fichier PDF et un PNG. 12. Édition du design dans Adobe Illustrator: Ensuite, je vais vous montrer comment ouvrir ceci dans Illustrator pour le manipuler plus loin. Vous pouvez cliquer avec le bouton droit de la souris et choisir « Ouvrir avec Adobe Illustrator ». Maintenant, nous avons notre dossier. Si je double-clique sur le groupe de clips, vous pouvez voir que je peux changer chaque cercle. Cependant, l'ouverture de PDF dans Illustrator peut être un peu limitative. Si vous regardez dans le panneau Nuancier, vous pouvez voir qu'il n'y a pas de nuancier ici. La façon dont je ferais cela est d'ouvrir un autre fichier et de copier et coller tout ce qui est ici dans un autre fichier Adobe Illustrator du même rapport. Mais je vais vous montrer comment le manipuler plus loin. Si je clique sur « Image », l'image entière est en train de bouger parce qu'elle est à l'intérieur d'un masque de découpe. Si je vais à « Objet », puis je vais à « Masque d'écrêtage », et je relâche le masque ou utilise l'option de commande de raccourci 7, et maintenant je peux sélectionner les cercles individuellement. Vous pouvez recolorier l'image, vous pouvez redimensionner vos formes comme vous le souhaitez. C' est ainsi que j'ai créé ma miniature pour ces projets en supprimant la partie centrale et en y ajoutant du texte. C' est donc essentiellement ainsi que vous le manipulez dans Adobe Illustrator. 13. Votre projet: Pour votre mission, vous allez créer une œuvre d'art générative authentique basée sur une grille. Vous pouvez aller au-delà de votre projet. Cependant, surtout, vous aurez besoin d'une sorte de randomisation dans votre conception. Voici trois exemples pour vous montrer plusieurs façons d'implémenter la fonction aléatoire. Pour le premier exemple, j'ai créé des rectangles, chacun couvrant la largeur et la hauteur d'une cellule dans la grille. Ensuite, j'ai randomisé les couleurs de ces rectangles pour obtenir ce résultat. Le deuxième exemple a utilisé la rotation vers certains des carrés dessinés sur le canevas, ce qui est un peu plus avancé, car il crée une nouvelle matrice pour chaque cellule de la grille, puis la fait pivoter de 45 degrés ou d'un quart de Pi. J' ai également ajouté divers poids de trait à certains des carrés et j'ai randomisé les couleurs de chaque forme. Enfin, j'ai créé des cercles de même taille avec des poids et des couleurs mélangés pour créer ce design. Si vous référencez les primitives 2D dans la section de forme de la page de documentation, vous devriez pouvoir les utiliser dans votre projet.