Laisse faire de l'art génératif, nous pouvons exporter vers SVG et PNG

Cet article montre comment créer un outil d'art génératif à l'aide de JavaScript, SVG et Canvas pour produire des actifs de conception, répondant spécifiquement aux besoins d'un projet de conception de conférence. L'auteur, inspiré d'un outil similaire utilisé par des concepteurs professionnels, décrit une solution pour créer des illustrations personnalisables et exportables.

Le processus commence par définir une palette de couleurs par programme dans JavaScript:

 const ColorPalette = ["# 9b2e69", "# d93750", "# e2724f", "# f3dc7b", "# 4e9397"];

Une fonction, makeRects , génère ensuite des rectangles qui se chevauchent avec des positions et des couleurs aléatoires de la palette:

 // ... (La définition de la fonction reste la même)

Cette fonction remplit un élément SVG, dimensionné dynamiquement à la fenêtre du navigateur:

 const Makevg = () => {
  // ... (La définition de la fonction reste la même)
};

Le SVG généré est ensuite téléchargeable en tant que fichier SVG à l'aide d'une fonction de téléchargement personnalisée:

 // ... (La fonction de téléchargement reste la même)

Pour répondre au format du client du client, l'article exploite canvg pour rendre le SVG sur une toile, permettant un téléchargement de l'œuvre d'art en PNG via FileSaver.js :

 // ... (la fonction de configuration reste la même)

L'application finale permet aux utilisateurs de générer et de télécharger des illustrations dans les formats SVG et PNG, en s'adaptant à différentes tailles de fenêtre et ratios d'aspect. L'auteur met en évidence l'aspect pratique de cette approche pour générer rapidement des actifs de conception adaptés à des besoins spécifiques du client. Tout en reconnaissant le potentiel de sophistication supplémentaire (par exemple, ajustant dynamiquement le nombre de rectangles basés sur la taille de la fenêtre), l'article met l'accent sur l'efficacité et l'applicabilité du monde réel de cet outil d'art générateur. L'inspiration pour ce projet est venue de l'observation d'un outil similaire et plus avancé utilisé par les concepteurs professionnels.

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!