Une introduction à l'art génératif: ce que c'est, et comment vous le faites

L'art génératif peut être un sujet intimidant - il semble qu'il y ait beaucoup de mathématiques impliquées, et l'art est délicat en soi!

Mais cela n'a pas à être difficile - vous pouvez créer des choses vraiment cool sans diplôme en mathématiques ou en art. Cet article décrira ce qu'est même l'art génératif et comment vous pouvez commencer à créer votre propre art génératif.

Tout d'abord, qu'est-ce que l'art du code?

L'art de code est tout art construit à l'aide de code. Il existe d'innombrables exemples sur CodePen - par exemple l'art CSS.

Qu'est-ce que l'art génératif?

Souvent, l'art génératif s'inspire de l'art moderne, en particulier du pop art qui fait un usage intensif de motifs géométriques ordonnés.

Cependant, c'est une catégorie d'art très large et riche créée avec un code avec une caractéristique centrale. L'art génératif intègre en quelque sorte un système autogéré ou autonome.

L'aléatoire est un type de système autonome. En incorporant le hasard dans une pièce d'art de code, vous obtenez une œuvre d'art différente et complètement unique chaque fois que vous exécutez votre script, chargez votre page ou répondez à une interaction de l'utilisateur.

Il existe également des systèmes autonomes plus ordonnés. Un exemple est la fractale de Mandelbrot, dérivée d'une équation trompeusement simple.

Nous pouvons également intégrer les deux approches, mêlant ordre et chaos!

L'œuvre devient une collaboration entre l'ordinateur et l'artiste. Certains aspects de l'illustration sont contrôlés par le codeur, mais pas tous. L'artiste contrôle à la fois le caractère aléatoire et l'ordre dans l'art.

D'une certaine manière, avec un système autonome, l'artiste abandonne le contrôle de son art, et l'ordinateur le fait pour lui. Une perspective plus nuancée émerge lorsqu'un nouveau processus créatif est envisagé.

Le codeur-artiste s'engage dans une boucle de rétroaction où il peaufine constamment un système pour produire des résultats plus souhaitables et souvent plus surprenants.

Ce processus englobe l'expérimentation et les accidents heureux d'une manière qui remodèle le rôle de l'artiste. En tant qu'artistes génératifs, nous utilisons les bases du code comme les boucles, le flux de contrôle et les fonctions spécialisées. Nous les combinons ensuite avec des forces souvent imprévisibles, pour produire des résultats complètement uniques, contrairement à tout ce qui existe.

Exemples d'art génératif

Les fleurs de Kate Compton

Les automates cellulaires et le bord du chaos

Art génératif animé en multicolore par Phil Nash

Blobs impressionnistes par Murasaki Uma

Arbre généré par Miriam Nadler

Qu'est-ce qui entre dans une œuvre d'art génératif?

  • L'aléatoire est crucial pour créer de l'art génératif. L'art doit être différent à chaque fois que vous exécutez le script de génération, donc le caractère aléatoire est généralement une grande partie de cela.
  • Algorithmes - La mise en œuvre visuelle d'un algorithme peut souvent générer de l'art impressionnant, par exemple, l'arbre binaire ci-dessus.
  • Géométrie - La plupart des arts génératifs incorporent des formes, et les mathématiques du cours de géométrie du lycée peuvent aider à créer des effets vraiment sympas.

Comment aborder une œuvre d'art générative?

Il existe deux stratégies principales pour créer un art génératif, bien que la plupart se situent entre les deux stratégies.

Le premier est de n'avoir aucun résultat en tête et de voir ce que l'ordinateur génère pendant que vous jouez.

La seconde est que vous avez une idée très finalisée de ce à quoi vous voulez que l'art ressemble, et le caractère aléatoire ne change que légèrement le résultat final.

Où devriez-vous commencer?

Si vous connaissez JavaScript, p5.js est un excellent point de départ. Son objectif est de «rendre le codage accessible aux artistes, concepteurs, enseignants et débutants». C'est un wrapper sur l'API Canvas et cela simplifie une grande partie des calculs. Il se concentre sur le dessin, mais vous pouvez également faire des interactions sonores, vidéo ou webcam avec lui si vous êtes intéressé par ces formes d'art!

Une introduction rapide à P5

Commencez par charger le CDN p5. Ensuite, dans votre fichier JavaScript, vous ajouterez deux fonctions qui seront utilisées dans presque tous les scripts p5: setupet draw. Ces noms sont nécessaires pour que p5 les appelle.

setupest appelé au démarrage du programme. Vous allez probablement créer un canevas sur lequel dessiner en utilisant la createCanvasfonction, et vous pouvez y définir des valeurs par défaut. Il n'est appelé qu'une seule fois!

drawest appelé après l'installation et est exécuté en permanence jusqu'à ce que vous appeliez noLoop, ce qui l'empêchera de fonctionner à nouveau. Vous pouvez contrôler le nombre d' drawexécutions par seconde avec la frameRatefonction.

Avec l'art génératif, je mets généralement noLoopdans la setupfonction, qui drawne fait fonctionner qu'une seule fois au lieu de continuellement.

Voici un modèle de démarrage p5 sur CodePen.

Puisque nous avons tellement parlé de l'importance de l'aléatoire pour l'art génératif, une autre fonction importante de p5 est random. Cela fonctionne de la même manière que JavaScript, Math.randommais vous pouvez définir une plage pour les nombres afin de ne pas avoir à faire autant de calculs pour obtenir le nombre dans un format utile.

p5 lignes

Vous pouvez créer une ligne dans p5.js comme ceci:

line(startX, startY, endX, endY)

Ensuite, vous pouvez générer au hasard un tas de lignes et créer une simple œuvre d'art générative comme celle-ci:

Même des scripts très simples peuvent générer des œuvres d'art sympas!

Formes p5

Vous pouvez également créer des formes avec des cercles, des triangles et des carrés comme p5.

Voici un exemple de création de formes avec p5:

// circle ellipse(xCoordinate, yCoordinate, width, height) 
// square rect(xCoordinate, yCoordinate, width, height) 
// triangle triangle(xCoordinate1, yCoordinate1, x2, y2, x3, y3)

Ensuite, nous pouvons créer d'autres formes pour créer quelque chose de plus amusant!

Mouvement p5

Nous pouvons ajouter du mouvement à nos dessins en supprimant l' noLoopappel de fonction dans la setupfonction - vérifiez ceci!

Couleur

Vous pouvez également jouer avec la couleur avec l'art génératif en choisissant des couleurs au hasard. Vous pouvez le faire mathématiquement via les valeurs RVB, ou vous pouvez générer une palette de couleurs avec votre sélecteur de couleurs préféré (nous avons utilisé celui-ci).

Vous pouvez définir la couleur de remplissage avec la colorfonction. Il prend un tas de formats différents, comme les couleurs nommées, les RVBA et les codes hexadécimaux.

Vous pouvez également modifier la couleur du contour en utilisant stroke. Vous pouvez également supprimer ce contour en utilisant noStrokeou lui donner une largeur différente avec strokeWeight.

Mettre tous ensemble

Une fois que nous avons toutes ces pièces en place, nous pouvons combiner les techniques pour créer des choses vraiment cool.

Une autre stratégie: peaufiner les tutoriels

Vous pouvez également générer de l'art génératif vraiment cool en prenant le travail de quelqu'un d'autre et en le construisant. Par exemple, voici le résultat d'un tutoriel de Dan Shiffman:

En voici deux ajustements pour créer différents effets:

Voici une collection Codepen avec encore plus!

Vous pouvez suivre des tutoriels, créer des projets CodePens ou Glitch et créer quelque chose de nouveau et d'unique. Assurez-vous simplement de donner un peu de crédit à l'artiste original.

Aide-mémoire

Voici une feuille de triche avec toutes les fonctionnalités P5 que nous avons utilisées pour ce didacticiel.

Lire la suite

  • Artistique générative
  • Train de codage
  • Conférence de Tim Holman

Rester en contact

Cet article a été co-écrit avec James Reichard. Si vous créez votre propre art, assurez-vous de nous le tweeter! (Ali et James).

Publié à l'origine sur dev.to.