Obtenir Visibox
Toutes les actualitésTutoriels

ChatGPT a écrit mon visualiseur Stranger Things

Je voulais le look du générique de Stranger Things. De fines lignes rouge-orangé qui rougeoient sur un noir pur, s'épanouissant doucement sur les bords, dérivant devant la caméra comme si tu volais à travers elles. Pas le logo, pas la police, juste cette ambiance : quelque chose d'immense et à moitié formé, éclairé de l'intérieur.

J'ai donc ouvert ChatGPT Work, le mode agent de l'appli de bureau ChatGPT d'OpenAI, et je lui ai demandé de me construire le shader. Je n'ai jamais écrit une ligne de code de shader. J'ai décrit ce que je voulais, ChatGPT l'a écrit, et Visibox l'a exécuté, en direct, réagissant à la musique, le tout sans que je touche à un éditeur de texte. C'est tout le tour de force de cette vidéo, et il vaut la peine de le décortiquer, car la partie intéressante n'est pas le visualiseur fini. Ce sont les allers-retours qu'il a fallu pour y arriver.

Ce qu'est réellement un visualiseur dans Visibox

Visibox 5 a ajouté une fonctionnalité appelée Visualiseurs : des clips génératifs, rendus par le GPU, qui vivent sur la grille à côté de tes clips vidéo habituels. Certains sont réactifs au son et bondissent avec la musique. D'autres tournent, tout simplement. Dans les deux cas, tu les déclenches exactement comme n'importe quel autre clip de ton projet.

Il y a deux formats. MilkDrop est le plus ancien, conçu à l'époque de Winamp, et il existe une immense bibliothèque de préréglages .milk qui circulent sur Internet, que tu peux glisser directement dans Visibox et utiliser. ISF est plus récent, créé par l'équipe derrière le logiciel de VJ VDMX : un seul fichier de shader avec un petit en-tête qui déclare ses entrées réglables. Visibox prend en charge les deux, mais pour ce projet j'ai utilisé ISF, car il s'avère que c'est exactement le genre de fichier qu'une IA écrit proprement.

Activer la connexion MCP

Avant que tout cela fonctionne, Visibox doit dialoguer avec ton assistant IA. Cela se fait une seule fois, dans les Réglages, sous Connect to AI Tools. Visibox recherche les applis IA installées et se configure automatiquement dans chacune d'elles. Ensuite, ChatGPT (ou Claude, ou ce que tu utilises) peut voir ton projet, lire les formats de visualiseurs, construire des préréglages, et même contrôler la lecture : volume, plein écran, déclenchement des clips. J'ai vérifié que la connexion était active en demandant à ChatGPT s'il pouvait joindre Visibox ; il m'a répondu avec mon niveau de volume actuel.

Un détail compte ici : Visibox se connecte comme un outil local qui tourne sur ton propre ordinateur, il te faut donc une appli IA de bureau capable de l'atteindre. Le site ChatGPT ouvert dans un navigateur ne peut pas voir une appli locale comme Visibox. C'est pour ça qu'on utilise ici ChatGPT Work, l'un des modes de l'appli de bureau d'OpenAI (la même appli qui a récemment absorbé Codex), ou Claude Desktop, plutôt que chatgpt.com. À partir d'ici, je l'appellerai simplement ChatGPT.

J'ai fait exactement la même chose avec Claude Desktop dans une vidéo précédente, et le déroulé était quasi identique.

L'astuce : faire décrire la référence par l'IA d'abord

Avant de demander le moindre code, j'ai demandé à ChatGPT de décrire le générique de Stranger Things avec ses propres mots, pour qu'on s'accorde sur un concept avant de construire quoi que ce soit. Cette seule étape a fait plus de travail que je ne l'imaginais.

Il est revenu avec quelque chose de proche d'une description de plan : une obscurité quasi totale, de fines lignes rouge-orangé dérivant devant une caméra, un bloom doux, un léger flou, et même ses propres hypothèses sur la réactivité au son. Ça m'a donné quelque chose de concret auquel réagir, au lieu d'une page blanche.

Je lui ai dit quoi garder et quoi changer : des fragments géométriques plutôt que des lettres (trop proche de reproduire la série, et honnêtement, plus utilisable sans elles), des couleurs configurables pour que la palette puisse virer au bleu plus tard, et un mouvement vers l'avant constant, de nouvelles couches de formes émergeant de l'obscurité tandis que les anciennes dérivent hors des bords du cadre.

Une consigne comptait plus que les autres : ne jamais laisser le cadre se vider. Quel que soit le réglage de densité, il devait toujours y avoir des formes quelque part dans le champ de profondeur. C'est toute la différence entre un visualiseur qui semble vivant et un autre qui semble attendre qu'il se passe quelque chose.

ChatGPT a nommé le concept lui-même, de sa propre initiative : Ember Geometry. Une fois d'accord là-dessus, je l'ai fait passer à un modèle de raisonnement plus performant pour le codage à proprement parler et je lui ai dit de construire le préréglage comme un nouveau visualiseur ISF.

Première version : un écran noir

ChatGPT a travaillé quelques minutes, dialoguant avec Visibox via MCP tout du long, lisant la spécification du format ISF, écrivant le shader, l'enregistrant comme un nouveau préréglage. Puis je suis revenu pour jeter un œil.

Écran noir. Rien.

C'est la partie que la plupart des vidéos couperaient. Pas moi. J'ai simplement dit à ChatGPT ce que je voyais : un écran noir, aucun visualiseur, et je lui ai demandé de vérifier sa propre syntaxe. Il a trouvé une erreur de compilation dans le fragment shader, quelque chose à propos de l'usage illégal d'un mot réservé, et l'a corrigée. Deuxième essai : le voilà. Des lignes rouge-orangé rougeoyantes, dérivant devant la caméra, exactement l'ambiance que j'avais décrite. Cette correction a pris un message et quelques minutes.

Trop réactif, puis juste ce qu'il faut

J'ai mis de la musique pour voir comment il réagissait au son, et c'était beaucoup. Le mouvement s'inversait avec les basses, si bien qu'au lieu de donner l'impression d'une avancée continue, tout semblait tanguer d'avant en arrière. Amusant à regarder une dizaine de secondes, distrayant ensuite.

J'ai dit à ChatGPT ce qui n'allait pas : la réactivité au son écrasait le mouvement vers l'avant, et je voulais qu'on laisse la poussée en avant tranquille. Les basses et les aigus pouvaient encore piloter le rougeoiement et le grain, mais pas le mouvement de caméra. Une minute plus tard environ, la mise à jour est arrivée. Plus calme, plus maîtrisée, et toujours clairement vivante quand la musique frappait.

Le déposer dans un projet, c'était la partie facile : glisser Ember Geometry sur un morceau, comme n'importe quel autre clip, le lancer en plein écran, terminé.

Pourquoi ça compte plus que le shader lui-même

Rien de tout cela n'a exigé que je connaisse GLSL, ou la syntaxe des paramètres d'ISF, ou quoi que ce soit sur la compilation des shaders. Ce que ça a exigé, c'est d'être précis sur ce que je voulais, honnête sur ce qui ne marchait pas, et prêt à faire des allers-retours plutôt qu'à accepter le premier jet. Cette boucle, décrire, regarder, corriger, c'est la vraie compétence, et elle n'est pas liée à ChatGPT en particulier. Active la connexion MCP, accorde-toi sur un concept avant qu'une ligne de code soit écrite, et attends-toi à ce que la première version demande une remarque ou deux en retour. C'est normal, pas un échec.

Tu veux la même astuce appliquée à des effets en superposition plutôt qu'à des visuels plein écran ? C'est une vidéo compagnon : Effets en superposition avec l'IA. Et si tu préfères suivre un pas-à-pas structuré plutôt que le récit d'une session, il y a aussi une recette écrite : construire un visualiseur généré par IA à partir de zéro.

Visibox est proposé avec un essai Pro gratuit de 14 jours. Plus d'infos sur les visualiseurs, MilkDrop et ISF dans le mode d'emploi.