GPT Animation Base

Du dessin au motion design, avec GPT.
Animation 2D et motion design avec ChatGPT et Codex.

Voir le résultat · Démarrer · Premier prompt · Guide d'animation · Rendu

---

Décrivez votre idée de petit film à ChatGPT ou à Codex, puis faites évoluer la scène avec lui. Ce projet vous donne un compagnon animé, quelques exemples et les outils pour transformer ce code en vidéo MP4 sur votre machine.

p5.js + p5.brush dessinent les formes, les traits et la matière du papier ; FFmpeg assemble les images et le son. Le rendu fonctionne localement, sans clé API. C'est une première base à explorer et à améliorer : vous gardez la main sur le style, le rythme et chaque mouvement.

Voir le résultat

Voici un premier film de dix secondes. Le compagnon Codex lance un signal, trois formes entrent en scène et les lettres GPT se dessinent. Tout se transforme ensuite en une composition sur fond indigo. Le personnage et les formes partagent le même style peint à la main.

_{Aperçu animé allégé, sans son. Le film final dure 10 secondes, en 1920×1080 à 24 images/s, avec un son original.}

Un assistant qui vous guide	Une composition animée	Une vidéo à partager
Instructions courtes, exemple complet et prompt copiable.	Modules, tracés, transformations et compagnon, avec la matière du papier.	Brouillon 540p, aperçu local et export final 1080p.

Le rendu est une animation 2D procédurale : GPT aide à écrire le code, JavaScript dessine les images et FFmpeg assemble la vidéo. La texture dessinée est un choix artistique ; le motion design organise formes, rythme et mise en page dans le temps. Comprendre le moteur et le rôle de GPT.

Voir aussi le film clavier G → P → T → Entrée

Le compagnon saute sur les lettres d'un QWERTY et valide sa commande. Ce film centré sur le jeu du personnage reste disponible avec npm run intro.

Démarrer

Installez Node.js 22.12 ou plus récent, Chrome/Chromium et FFmpeg, puis récupérez le projet :

git clone https://github.com/coconut971/GPTAnimationBase.git
cd GPTAnimationBase

Dans ce dossier, lancez :

npm ci
npm run doctor
npm test
npm run motion

Votre film se trouve dans outputs/gpt-motion-design.mp4. La commande crée le son à partir des événements du projet, rend les images, encode le MP4 et vérifie que les flux vidéo et audio se décodent.

Chrome ou FFmpeg ne sont pas détectés ?

Indiquez le chemin de vos outils. Exemple PowerShell :

$env:CHROME_PATH = 'C:\Program Files\Google\Chrome\Application\chrome.exe'
$env:FFMPEG_PATH = 'C:\outils\ffmpeg\bin\ffmpeg.exe'
npm run doctor
npm run motion

Sous macOS/Linux : export FFMPEG_PATH=/chemin/vers/ffmpeg. Adaptez ces chemins à votre installation. Toutes les options de rendu.

Choisir votre assistant GPT

Votre outil	Comment travailler
Codex	Ouvrez ce dossier et donnez le prompt ci-dessous. AGENTS.md décrit le travail et ses contrôles.
ChatGPT	Joignez le guide, AGENTS.md, la référence d'API et les deux fichiers hello indiqués ci-dessous. Appliquez les fichiers proposés localement, puis renvoyez la feuille d'images ou l'erreur.

Les scènes sont du code modifiable : une conversation sans accès à un terminal peut vous fournir les fichiers, et vous exécutez les commandes sur votre machine.

Votre premier prompt

L'exemple hello raconte une seule action en six secondes. C'est le point de départ le plus simple pour créer votre propre film.

Lis AGENTS.md et ANIMATION_GUIDE.md. Pars du projet hello et crée un petit film
de 6 secondes : Codex découvre une étoile de papier et lui fait un signe joyeux.
Garde le style peint à la main, la 2D, les couleurs douces et aucun texte.
Écris un storyboard court, implémente une scène complète et son projet JSON.
Rends une feuille et un brouillon ; inspecte les poses et les contacts avant
l'export final. Utilise les helpers existants et donne les commandes exécutées.
Si tu n'as pas de terminal, fournis les fichiers complets et une étape à tester.

Fichiers de départ : projet hello, scène hello, référence d'API. D'autres prompts permettent d'adapter une scène ou de travailler étape par étape avec ChatGPT.

Regarder, ajuster, exporter

npm run motion:sheet # Les compositions clés réunies sur une image
npm run motion:draft # Un MP4 brouillon calculé en 960×540
npm run studio   # Le studio local pour scruter ou lire le film

Ouvrez le studio local. Le curseur calcule une image précise ; « Lire le brouillon » lance le MP4 avec son à vitesse normale. Après une modification de la scène, régénérez le brouillon, puis le final.

Essayer l'exemple simple ou regarder les poses du compagnon

node render.mjs --project=hello --sheet
npm run draft -- --project=hello
node render.mjs --project=hello --clip --out=out/hello.mp4

Le studio permet de choisir la scène. Le compagnon dispose de six états : repos, curiosité, concentration, effort, surprise et joie.

Après npm ci, les bibliothèques et la police sont locales : le rendu fonctionne hors ligne. Lancez le studio avec sa commande ; il se sert via HTTP local.

Trouver le bon fichier

Vous voulez…	Ouvrez…
Raconter une histoire et fixer le rythme	STORYBOARD.md et le guide d'animation
Composer un film de motion design	Le storyboard hybride, le projet motion et sa scène
Choisir la durée, la palette et les événements	Le projet keyboard ou hello
Modifier le jeu et le dessin du compagnon	Les poses et le personnage
Rendre des extraits, inspecter un contact ou reprendre un export	Le guide de rendu
Comprendre les modules et les mesures	La cartographie et la validation
Préparer votre dépôt public	La publication et les visuels du dépôt

Le style privilégie la 2D à plat, les regards, le poids des mouvements, les transitions et les temps de lecture. Les textes à l'écran sont réservés à une demande explicite, comme les lettres du clavier dans cette démonstration.

---

GPT Animation Base
_{Des idées, du code et un peu de papier.}

Sources sous licence MIT, copyright John Heibel conservé. Provenance du moteur et de la police. Les vidéos complètes, dépendances et fichiers de travail sont ignorés par Git.

Mots-clés du projet : gpt, chatgpt, codex, openai, animation, motion-design, motion-graphics, procedural-animation, creative-coding, generative-art, p5js, p5-brush, javascript, canvas, ffmpeg, 2d-animation, hand-drawn, video-rendering.