Comment créer des visuels à l'aide d'un code généré par l'IA (aucune connaissance en codage requise)

25 février

Animation uniquement en CSS — 10 éléments div, environ 40 lignes de CSS, sans JavaScript. Boucle fluide de 30 secondes. Générée en une seule conversation avec l'IA.

Ce n'est ni un framework ni une bibliothèque. Il s'agit simplement de HTML et CSS, les mêmes outils qui équipent tous les navigateurs depuis des décennies. Une seule propriété CSS personnalisée (--i) alimente un calc() expression, de sorte qu'une seule règle d'animation génère dix vitesses différentes. L'IA a compris la technique ; vous avez simplement décrit ce que vous vouliez voir.

Il est important de garder cela à l'esprit lorsque nous explorons des outils tels que p5.js et Three.js : on peut faire beaucoup avec très peu.

Au-delà du texte-vidéo : utiliser l'IA pour écrire du code qui génère des visuels

Dans notre précédent article sur la création de visuels de concert à l'aide de l'IA, nous avons examiné des outils de conversion de texte en vidéo tels que Sora, Veo et Runway, qui génèrent des clips vidéo à partir de consignes écrites. Ces outils sont parfaits pour créer des contenus cinématographiques et photoréalistes : paysages oniriques, mondes liquides abstraits, survols cosmiques. Mais il existe une autre approche tout aussi puissante et sans doute plus amusante : utiliser l'IA pour écrire du code qui génère des visuels.

Vous n'avez pas besoin de savoir coder. L'IA s'occupe de cette partie. Vous devez simplement savoir ce que vous voulez voir. Certains appellent cela le « vibe coding » : décrire votre vision dans un langage simple et laisser l'IA se charger de la mise en œuvre. C'est devenu l'une des utilisations les plus populaires des outils d'IA, et il s'avère que c'est parfait pour créer des visuels.

Au lieu de décrire une vidéo et d'attendre qu'une IA la rende, vous décrivez une animation dans une conversation et l'IA écrit un programme qui la crée, directement dans votre navigateur, en temps réel. Les résultats sont algorithmiques, géométriques et personnalisables à l'infini. Pensez à des grilles pulsantes, des particules en spirale, des formes en mutation, des motifs génératifs et des illusions d'optique de style Op Art. Il s'agit d'un codage créatif assisté par l'IA, et c'est ainsi que nous avons créé notre pack vidéo Op Art.

Pourquoi utiliser du code généré par l'IA pour les visuels ?

Avant d'aborder les outils, il est utile de comprendre pourquoi vous pourriez choisir cette approche plutôt que la génération de texte en vidéo :

Boucles parfaites. Les animations basées sur du code peuvent être conçues pour s'enchaîner de manière fluide dès le début. Pas besoin d'astuces de fondu enchaîné : les calculs mathématiques font tout le travail.
Des variations infinies. Changez une couleur, une vitesse, une forme, un paramètre, et vous obtenez un visuel complètement différent. Une seule commande peut générer des dizaines de boucles uniques.
C'est addictif. Sérieusement. Une fois que vous commencez à dire « maintenant, fais une spirale » et à regarder l'IA réécrire le code en temps réel, vous y passerez tout l'après-midi.

IA générée par code ou IA texte-vidéo : quand utiliser l'une ou l'autre ?

Si vous avez lu notre précédent article sur les visuels générés par l'IA, vous vous demandez peut-être quand utiliser quelle approche. Voici une comparaison rapide :

	IA texte-vidéo (Sora, Runway, Veo)	Génération de code par IA (cet article)
Idéal pour	Imagerie cinématographique, organique et photoréaliste	Visuels géométriques, algorithmiques, basés sur des motifs
Boucle	Nécessite des astuces d'édition ou des outils spéciaux	Conception mathématiquement transparente
Personnalisation	Régénérer à partir de zéro à chaque fois	Modifiez un paramètre, obtenez une nouvelle variante
Taille du fichier	Grand (données vidéo complexes)	Petit (mouvement propre et compressible)
Configuration	Compte de service cloud + crédits	Chatbot IA gratuit dans votre navigateur
Style	Rêveur, surréaliste, photographique	Précis, géométrique, Op Art

Outils d'IA qui écrivent du code visuel

Les principaux chatbots IA intègrent désormais des fonctionnalités de prévisualisation du code en direct, des outils qui permettent le « vibe coding ». Vous tapez ce que vous voulez, et ils génèrent du code HTML, CSS et JavaScript que vous pouvez voir s'exécuter instantanément. Voici ce qui est disponible.

Claude (Artefacts)

Claude, d'Anthropic, dispose d'une fonctionnalité appelée « Artifacts » qui ouvre un panneau latéral à côté de votre conversation. Lorsque vous demandez à Claude d'écrire du code visuel, il affiche le résultat directement à cet endroit : vous obtenez un aperçu interactif en direct à côté du code. Demandez des modifications (« rendez les couleurs plus chaudes », « ralentissez la rotation », « ajoutez plus de particules ») et l'aperçu se met immédiatement à jour.

Claude a tendance à écrire un code propre et bien structuré et gère particulièrement bien les invites de codage créatif. Il fonctionne très bien avec p5.js, Three.js, l'API Canvas et les animations CSS, tous chargés via des liens CDN dans un seul fichier HTML.

Les niveaux gratuits et payants prennent tous deux en charge les artefacts. Disponible sur claude.ai.

ChatGPT (Canvas)

ChatGPT d'OpenAI dispose de Canvas, un espace de travail similaire sous forme de panneau latéral qui peut rendre du HTML et du JavaScript en temps réel. Vous pouvez lui demander de générer un croquis p5.js, une scène Three.js ou une animation JavaScript vanilla, et Canvas vous montre le résultat en direct. Répétez l'opération tout au long de la conversation, comme avec Claude.

Canvas fonctionne dans un environnement sandbox et prend en charge les bibliothèques externes via CDN. Il est inclus dans les formules ChatGPT gratuites et payantes, mais les utilisateurs payants ont accès à des modèles plus performants pour la génération de code complexe. Disponible sur chatgpt.com.

Google Gemini (Canvas & AI Studio)

Gemini de Google dispose également d'une fonctionnalité Canvas qui génère et prévisualise le code dans un panneau latéral, similaire à Claude Artifacts et ChatGPT Canvas. Elle est gratuite pour tous les utilisateurs de Gemini et prend en charge HTML, CSS et JavaScript avec prévisualisation en direct.

Pour les projets plus ambitieux, AI Studio de Google dispose d'un « mode création » qui permet de générer des applications web complètes à partir de descriptions en langage naturel, avec un aperçu en direct et un déploiement en un clic. C'est excessif pour une simple boucle d'animation, mais si vous souhaitez créer un instrument visuel interactif ou une galerie d'art générative, cela vaut la peine d'être exploré. Disponible sur gemini.google.com et aistudio.google.com.

Autres options

Pour les workflows plus avancés, les éditeurs de code basés sur l'IA tels que Cursor et Windsurf offrent des environnements de développement complets avec IA intégrée, et des outils web tels que v0, Bolt.new et p5js.ai peuvent également générer du code visuel avec aperçu en direct.

Bibliothèques de codage créatif : p5.js, Three.js, et plus encore

Vous n'avez pas besoin de comprendre ces concepts en profondeur (l'IA écrira le code pour vous), mais il est utile de savoir quoi demander :

HTML et CSS simples -- Ne négligez pas le système d'animation propre au navigateur. L'exemple ci-dessus a été créé à l'aide de ce système. CSS @keyframes, propriétés personnalisées et calc() peut produire des animations géométriques complexes sans aucun JavaScript. Demandez à votre IA une « animation uniquement CSS » avant de vous tourner vers une bibliothèque — vous n'en aurez peut-être pas besoin.
p5.js -- La bibliothèque incontournable pour le codage créatif sur le web. Conçue à l'origine pour les artistes et les designers, elle est parfaite pour l'art génératif en 2D : systèmes de particules, champs de flux, motifs géométriques, visuels basés sur le bruit. En cas de doute, demandez à l'IA un croquis p5.js. C'est le moyen le plus simple d'obtenir quelque chose de beau.
Three.js -- La norme pour la 3D sur le Web. Si vous souhaitez faire pivoter des objets 3D, utiliser un éclairage volumétrique, effectuer des survols à la caméra ou tout autre effet donnant de la profondeur, optez pour Three.js. Il fonctionne dans tous les bacs à sable des chatbots IA via CDN.
Autres options: l'API Canvas intégrée au navigateur et les animations CSS/SVG fonctionnent sans aucune bibliothèque. GSAP est idéal pour les séquences basées sur une timeline. Et pour les effets avancés accélérés par GPU (comme Shadertoy), demandez à l'IA un fragment shader GLSL. Le code est plus complexe, mais les résultats sont époustouflants.

Pour commencer : créez votre première boucle visuelle générée par l'IA

Voici un exemple pratique. Ouvrez l'un des chatbots IA mentionnés ci-dessus et essayez une invite comme celle-ci :

Créez un croquis p5.js représentant des cercles concentriques qui pulsent et tournent lentement. Utilisez un fond sombre avec des couleurs vives et saturées. Faites en sorte que le croquis se répète en boucle de manière fluide.

Vous obtiendrez un aperçu en direct d'une animation en quelques secondes. À partir de là, commencez à itérer :

« Réduisez l'épaisseur des cercles et ajoutez-en davantage. »
« Utilisez une palette de couleurs composée de violet foncé, bleu électrique et rose vif. »
« Ajoutez un léger balancement à la rotation. »
« Accélère légèrement »
« Maintenant, faites une variante avec des carrés à la place des cercles. »

Chaque modification ne prend que quelques secondes. En 15 minutes, vous pouvez obtenir une douzaine de boucles uniques.

Préambule : mettre l'IA sur la voie du succès

Les chatbots IA sont des outils polyvalents. Si vous les laissez faire, ils risquent de vous fournir une petite toile, d'ajouter des commandes d'interface utilisateur dont vous n'avez pas besoin ou de créer une animation qui ne se répète pas correctement. Vous pouvez éviter la plupart de ces problèmes en ajoutant au début de votre première invite quelques lignes de contexte qui indiquent à l'IA le type de résultat que vous recherchez.

Voici un préambule que vous pouvez coller au début de toute conversation sur la génération visuelle :

Je souhaite créer des animations visuelles en boucle pour des performances live. Pour chaque visuel que vous créez, veuillez respecter les règles suivantes :

Utilisez p5.js chargé via CDN dans un seul fichier HTML

Remplir toute la fenêtre du navigateur avec la toile et redimensionner de manière réactive

Utilisez un fond sombre ou noir.

Tous les mouvements doivent s'enchaîner de manière fluide à l'aide de calculs mathématiques basés sur le temps (sin, cos, modulo) et non sur le comptage d'images.

N'ajoutez aucun contrôle d'interface utilisateur, superposition de texte, bouton ou curseur, uniquement l'élément visuel.

Maintenez la fluidité de l'animation à 60 images par seconde.

Utilisez des couleurs vives et saturées, sauf indication contraire de ma part.

Après cela, chaque invite dans la conversation peut être courte et créative : l'IA connaît déjà le format que vous souhaitez. Il suffit de dire « hexagones en spirale avec une traînée arc-en-ciel » et vous obtiendrez exactement cela, en plein écran, en boucle, prêt à être enregistré.

Vous pouvez adapter le préambule à votre convenance. Vous préférez Three.js à p5.js ? Remplacez-le. Vous préférez les arrière-plans blancs ? Modifiez la ligne. L'objectif est d'établir les règles une fois pour toutes afin de ne pas avoir à les répéter à chaque fois.

Conseil : si vous utilisez Claude, vous pouvez enregistrer ce préambule en tant qu'instruction « Projet » afin qu'il soit automatiquement inclus dans chaque conversation. ChatGPT dispose d'une fonctionnalité similaire, « Instructions personnalisées », dans ses paramètres. Ainsi, il vous suffit d'ouvrir une nouvelle conversation et de commencer immédiatement à demander des visuels.

Conseils pour le codage créatif avec l'IA

Le préambule traitant de la configuration technique, vos suggestions créatives peuvent se concentrer entièrement sur ce que vous souhaitez voir:

Décrivez le mouvement, pas seulement la forme. « Hexagones en rotation » est acceptable. « Hexagones qui tournent lentement et changent d'échelle selon un rythme respiratoire, avec un effet de traînée » est bien mieux.
Mentionnez l'ambiance. « Hypnotique », « minimaliste », « psychédélique », « calme », « agressif » : ces mots guident le choix des couleurs, la vitesse et la complexité.
Faites référence à des choses réelles. « Comme un kaléidoscope », « comme des cellules sous un microscope », « comme la pluie sur une fenêtre » : les analogies fournissent à l'IA une cible visuelle plus efficace que les descriptions abstraites.
Spécifiez une palette de couleurs. Si vous ne le faites pas, l'IA choisira les couleurs, mais celles-ci seront souvent génériques. « Utilisez uniquement du cyan et du magenta sur fond noir » ou « des tons chauds de coucher de soleil » vous donnera un résultat avec vraiment du caractère.
Procédez par petites étapes. N'essayez pas de décrire votre visuel idéal en une seule fois. Commencez par quelque chose de simple, puis affinez. C'est plus rapide et plus amusant.
Demandez des variantes. Une fois que vous avez trouvé quelque chose qui vous plaît, demandez « créez 3 variantes de ce modèle avec des palettes de couleurs différentes » ou « créez une version plus minimaliste ». C'est l'un des moyens les plus rapides pour constituer une bibliothèque visuelle.
Changez de technologie en cours de conversation. Si un croquis p5.js ne vous donne pas le résultat souhaité, essayez de dire « reconstruisez ce concept dans Three.js avec une perspective 3D » : parfois, une approche différente du rendu transforme le résultat.

Invites de démarrage

Si vous avez besoin d'un point de départ, voici quelques suggestions qui donnent toujours d'excellents résultats. Collez d'abord votre préambule, puis essayez l'une de ces suggestions :

Art optique et géométrique

« Anneaux concentriques tournants avec des segments alternés noirs et blancs qui créent un motif d'interférence moiré ».
« Polygones concentriques qui alternent entre expansion et contraction, chacun légèrement déphasé par rapport au suivant. »

Particules et écoulement

« Des centaines de petites particules flottant le long de courbes invisibles, comme de la fumée emportée par un vent léger. Les particules doivent apparaître et disparaître progressivement. »
« Un champ d'étoiles qui dérive lentement vers l'avant, comme s'il volait dans l'espace. Les étoiles doivent varier en taille et en luminosité. »

Biologique et naturel

« Des ondes sinusoïdales qui se chevauchent et dérivent à travers l'écran comme une aurore boréale, avec des nuances changeantes de vert et de violet. »
« Des ondulations concentriques qui s'étendent vers l'extérieur à partir de points aléatoires, comme des gouttes de pluie sur une eau calme. »

3D et perspective (demandez Three.js pour ces éléments)

« Un nœud torique filaire tournant lentement, dont les bords brillants se détachent sur un fond noir, rendu dans Three.js. »
« Un tunnel composé de formes géométriques en rotation que la caméra traverse lentement. Three.js. »

Abstrait et psychédélique

« Une forme blob en morphing avec un déplacement fluide du bruit, passant par des couleurs irisées »
« Des formes translucides superposées qui dérivent et se chevauchent, créant de nouvelles couleurs là où elles se croisent. »

Comment capturer des images générées par l'IA sous forme de fichiers vidéo

Une fois que vous avez créé quelque chose qui vous plaît dans votre navigateur, vous devez le capturer sous forme de fichier vidéo afin de pouvoir l'utiliser dans Visibox (ou ailleurs). Il existe plusieurs approches.

Enregistrement d'écran

La méthode la plus simple : affichez votre animation en plein écran dans le navigateur (F11 sur la plupart des navigateurs) et enregistrez votre écran.

Mac : utilisez la fonction d'enregistrement d'écran intégrée (Cmd+Maj+5) pour des captures rapides, ou OBS Studio (gratuit) pour un contrôle total sur la fréquence d'images, le format et l'encodage.
Windows : utilisez la barre de jeu Xbox (Win+G) pour des captures rapides, ou OBS Studio pour un travail plus poussé avec 60 images par seconde et des options de format.

Capture dans le navigateur (la solution professionnelle)

Si vous souhaitez obtenir un résultat parfait au pixel près, sans aucun artefact d'enregistrement d'écran, vous pouvez capturer des images directement à partir de l'élément canvas du navigateur. Cette méthode est plus technique, mais l'IA peut vous aider à la mettre en place :

CCapture.js -- Une bibliothèque JavaScript qui s'intègre à votre boucle d'animation et capture chaque image à une fréquence fixe, quelle que soit la vitesse (ou la lenteur) de rendu de votre animation. Vous obtenez ainsi un résultat d'une fluidité exceptionnelle, même pour les scènes complexes. Demandez à l'IA : « Ajoute CCapture.js à ce croquis pour l'exporter sous forme de vidéo WebM à 60 images par seconde. »
API MediaRecorder: une API intégrée au navigateur qui permet d'enregistrer directement la sortie d'un élément canvas. Demandez à l'IA : « Ajoutez un bouton d'enregistrement qui capture cette animation canvas sous forme de fichier WebM. »

Conseils pour des captures nettes

Enregistrez à 60 images par seconde si votre système de lecture le permet. La fluidité des mouvements fait toute la différence avec les effets visuels algorithmiques.
Adaptez-vous à la résolution cible. Si vous diffusez sur un projecteur 1080p, réglez la taille de la fenêtre de votre navigateur (ou configurez votre canevas) sur 1920x1080 avant d'enregistrer.
Enregistrez plus longtemps que nécessaire. Enregistrez 30 à 60 secondes, même si votre boucle ne dure que 10 secondes. Vous pourrez ensuite faire un montage dans un logiciel de montage vidéo et choisir la partie la plus propre.
Fermez les autres applications pendant l'enregistrement pour éviter les pertes d'images.
Utilisez le codage H.264 pour vos fichiers finaux. Il est universellement compatible et c'est celui que Visibox (et la plupart des logiciels de lecture) gère le mieux. OBS peut enregistrer directement au format H.264/MP4.

Utilisation de vos boucles générées par IA dans Visibox

Une fois que vous avez capturé vos boucles sous forme de fichiers vidéo, les importer dans Visibox est un jeu d'enfant : il suffit de les glisser-déposer. Quelques points à garder à l'esprit :

Testez vos boucles. Lisez-les dans Visibox avec la fonction de boucle activée et observez le point de transition. Les visuels générés par code ont généralement une boucle plus fluide que les vidéos générées par IA, mais cela vaut toujours la peine de vérifier.
Utilisez les effets de Visibox. Notre pack vidéo Op Art comprend 24 boucles, mais les filtres de couleur, les effets de retournement et de rotation intégrés à Visibox permettent de multiplier ces boucles en des centaines de variations. La même astuce fonctionne avec votre contenu généré par IA.
Constituez une bibliothèque. Chaque session de prompt peut produire une poignée de boucles uniques. Au fil du temps, vous constituerez une bibliothèque visuelle personnelle qui vous sera entièrement propre.

Synthèse

Le plus grand avantage de cette approche est qu'elle donne moins l'impression que « l'IA a créé cela » et davantage que « j'ai conçu cela avec l'aide d'un assistant très rapide ». Téléchargez gratuitement notre pack vidéo Op Art pour découvrir toutes les possibilités, puis ouvrez Claude, ChatGPT ou Gemini et essayez de créer votre propre vidéo. Et lorsque vous serez prêt à les utiliser, Visibox vous facilitera la tâche.

Foire aux questions

Dois-je savoir coder ? Non, c'est justement là tout l'intérêt. L'IA écrit le code ; vous décrivez ce que vous voulez voir en anglais courant. Vous apprendrez quelques termes techniques en cours de route (comme demander « p5.js » ou « Three.js »), mais vous n'aurez jamais besoin de modifier directement le code.

Quel chatbot IA est le plus adapté pour générer du code visuel ? Les trois principales options (Claude, ChatGPT et Gemini) peuvent générer du code visuel avec un aperçu en direct. Claude a tendance à produire un code particulièrement propre et créatif, mais ChatGPT et Gemini sont également très performants. Essayez les trois et voyez lequel correspond le mieux à votre flux de travail. Ils sont tous gratuits pour commencer.

Puis-je utiliser ces visuels à des fins commerciales ? En général, oui. Le code généré par ces outils d'IA est original (il ne s'agit pas d'une copie de code existant) et le résultat visuel est déterminé par des fonctions mathématiques, et non par des images entraînées. Vérifiez les conditions d'utilisation de chaque outil pour plus de détails, mais en pratique, vous êtes propriétaire du résultat et pouvez l'utiliser dans des performances, des packs vidéo ou tout autre support.

Quelle résolution dois-je utiliser pour la capture ? La résolution 1080p (1920 x 1080) est idéale pour la plupart des configurations de spectacles en direct. De nombreux projecteurs et murs LED ne dépassent pas cette résolution, et les fichiers restent faciles à gérer. Si vous avez besoin d'une résolution 4K, définissez la taille de votre toile en conséquence avant l'enregistrement.

Jeff Robbins