Explorer l'art génératif avec JavaScript

L'art génératif est une technique dans laquelle l'artiste crée des systèmes, généralement sous la forme d'algorithmes, qui génèrent de manière autonome des œuvres d'art. Ces systèmes peuvent produire une infinité de résultats à partir d’un ensemble initial de règles, rendant le processus fascinant et plein de possibilités. Dans cet article, nous plongerons dans le monde de l'art génératif utilisant JavaScript et, plus précisément, la populaire bibliothèque p5.js.

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

L'art génératif repose sur la création de systèmes capables de générer un nombre infini de variations d'une œuvre d'art. Ces systèmes peuvent être contrôlés par des règles spécifiques, des algorithmes mathématiques ou même par le hasard. Avec chaque exécution du système, une nouvelle œuvre d'art unique et visuellement intéressante peut être produite.

Cette forme d'art est profondément liée à la programmation, car les règles et le code définissent la manière dont les résultats visuels sont créés. Les artistes génératifs utilisent des algorithmes pour définir des motifs, des couleurs, des formes et des mouvements, faisant de chaque œuvre un processus de découverte.

Pourquoi Javascript ?

JavaScript est un langage polyvalent et accessible qui s'exécute directement dans les navigateurs Web, permettant une visualisation immédiate des résultats artistiques génératifs. De plus, grâce à des bibliothèques comme p5.js, il est possible de créer des graphiques complexes avec seulement quelques lignes de code.

p5.js est une bibliothèque JavaScript spécialement conçue pour créer des graphiques interactifs et visuels. Sa simplicité en fait un outil idéal pour commencer à explorer l'art génératif.

Premiers pas avec p5.js

Configuration de l'environnement

Pour commencer à créer de l'art génératif avec JavaScript, tout ce dont vous avez besoin est un navigateur et un éditeur de code. Vous pouvez utiliser l'éditeur Web p5.js ou télécharger la bibliothèque et l'ajouter à votre projet.

Le squelette de base d'un croquis p5.js

Chaque sketch p5.js est structuré en deux fonctions principales :

• setup() : Cette fonction s'exécute une fois au début. C'est là que nous configurons le canevas, les couleurs et tous les paramètres initiaux.
• draw() : Cette fonction s'exécute à plusieurs reprises en boucle. Ici, nous plaçons les instructions pour dessiner et créer les éléments visuels.

Voici un exemple de base :

function setup() {
  createCanvas(800, 800); // Create an 800x800 pixel canvas
  background(255); // White background
}

function draw() {
  noLoop(); // Prevent the draw function from looping
  for (let i = 0; i < 100; i++) {
    let x = random(width);
    let y = random(height);
    fill(random(255), random(255), random(255), 150); // Random colors with transparency
    noStroke();
    ellipse(x, y, random(50, 100)); // Draw random circles
  }
}

Dans ce croquis de base, nous créons une toile vierge et dessinons 100 cercles de couleurs aléatoires, chacun positionné de manière aléatoire. La beauté de l’art génératif réside dans la variabilité des résultats. À chaque exécution du code, les cercles apparaîtront à différents endroits et avec des couleurs différentes.

Créer des modèles avec les mathématiques

L'art génératif combine souvent le hasard avec des structures mathématiques précises. Voyons un exemple où nous générons un motif géométrique basé sur des formes régulières et des mouvements cycliques :

function setup() {
  createCanvas(800, 800);
  background(255);
  noFill();
  stroke(0, 50);
}

function draw() {
  translate(width / 2, height / 2); // Move the origin to the center
  let radius = 300;
  for (let i = 0; i < 100; i++) {
    let angle = map(i, 0, 100, 0, TWO_PI);
    let x = radius * cos(angle);
    let y = radius * sin(angle);
    ellipse(x, y, 50, 50); // Draw circles in a circular pattern
  }
  noLoop(); // Static drawing
}

Dans cet exemple, nous utilisons des fonctions trigonométriques comme cos() et sin() pour répartir 100 cercles autour du centre du canevas selon un motif circulaire. La beauté des mathématiques dans l’art génératif est que vous pouvez utiliser des équations simples pour créer des modèles complexes et surprenants.

Ajout d'interactivité

L'un des grands avantages de travailler avec JavaScript et p5.js est la facilité avec laquelle vous pouvez ajouter de l'interactivité à vos créations. Ci-dessous un exemple où les couleurs d'un motif changent en fonction de la position de la souris :

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(255);
  let numLines = 50;
  let spacing = width / numLines;

  for (let i = 0; i < numLines; i++) {
    let x = i * spacing;
    let colorValue = map(mouseX, 0, width, 0, 255); // Changes with mouse position
    stroke(colorValue, 100, 150);
    line(x, 0, width / 2, height);
  }
}

Dans ce croquis, la couleur des lignes change en fonction de la position de la souris. L'interactivité est une composante essentielle de l'art génératif, car elle permet au spectateur d'influencer directement l'œuvre d'art.

Conclusion

L'art génératif avec JavaScript ouvre un monde de possibilités créatives. Grâce à p5.js, nous pouvons transformer des équations mathématiques, des fonctions aléatoires et des interactions utilisateur en visuels dynamiques et surprenants. Le meilleur, c'est que, grâce à la flexibilité de cet environnement, les résultats sont uniques et toujours différents à chaque exécution.

Explorer l’art génératif est un excellent moyen de mélanger programmation et créativité. Expérimentez avec différentes formes, couleurs et motifs pour voir jusqu'où vous pouvez pousser votre propre œuvre d'art générative !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!