ouerf-man/hand-drawn-video

Vidéo dessinée à la main

Tout ce qui est à l'écran est peint par p5.brush (textures réalistes de stylo, crayon et aquarelle, dessinées sur le GPU) dans un projet HyperFrames, et chaque image est une fonction pure du temps, donc le rendu est exact. Les cas d'utilisation ci-dessous sont des points de départ, pas des limites : toute idée de dessin à la main fonctionne. Les chemins dans ce fichier sont relatifs au dossier de cette compétence.

1. Configuration (une fois)

• Node.js 18+ (HyperFrames s'exécute via npx).
• Le Python de la compétence : ~/.cache/hand-drawn-video/venv/bin/python (Windows %USERPROFILE%\.cache\hand-drawn-video\venv\Scripts\python.exe), créé par l'étape 5 de INSTALL.md à partir de Python 3.10-3.12. Utilisez-le pour chaque commande ci-dessous. S'il manque, exécutez les étapes 4 à 7 de INSTALL.md. N'installez jamais pip install dans le Python système (le Python Homebrew le refuse), et sur Mac la commande est python3, pas python.
• Internet : la première fois, scripts/brushlib.py télécharge p5.brush (version figée, SHA-256 vérifié) dans kit/.cache/ ; chaque projet reçoit une copie. Les rendus chargent également GSAP depuis cdn.jsdelivr.net, donc le rendu nécessite Internet.
• Le cas d'utilisation redraw-video nécessite plus (MediaPipe, ffmpeg) : voir son USECASE.md. Terminé quand : npx --yes hyperframes --version affiche une version et <skill Python> scripts/brushlib.py affiche p5.brush ... ok.

2. Choisir le cas d'utilisation

Cas d'utilisation	Ce qu'il produit	Commencer par
explainer	Un sketchnote qui explique des étapes : dessins au stylo, flèches, lavis, étiquettes manuscrites, payoff au marqueur rouge	usecases/explainer/
story	Une courte histoire animée : un personnage doodle qui agit (écrasement, anticipation, yeux, sourcils), un monde peint à l'aquarelle	usecases/story/
redraw-video	Un clip réel d'une personne redessiné 12 fois par seconde (sérigraphie ou aquarelle), avec un fondu réel-vers-dessin	usecases/redraw-video/
blank	Tout autre chose, ou un nouveau style : un trait de stylo, un lavis, un hachurage, une écriture manuscrite, et le kit de dessin	usecases/blank/

Lisez le usecases/<nom>/USECASE.md choisi avant d'écrire quoi que ce soit. Pas dans le tableau : partez de blank et lisez references/p5brush-notes.md. Terminé quand : le cas d'utilisation est choisi et le contenu est convenu (les mots, les temps, la durée, 9:16 ou 16:9).

3. Démarrer le projet

<skill Python> scripts/new_project.py <use case> "<Documents>/<new folder>"

Placez le projet dans le dossier Documents de l'utilisateur (un chemin absolu ; sur Windows, il peut être dans OneDrive), jamais dans le dossier de la compétence : la mise à jour de la compétence remplace ce dossier. (--list montre les cas d'utilisation.) redraw-video est l'exception : il exécute son propre outil (USECASE.md). Terminé quand : le dossier contient index.html, assets/vendor/brush.js (p5.brush, patché pour le lint HyperFrames) et assets/fonts/.

4. Personnalisez-le : règles pour un bon travail dessiné à la main

Ces règles s'appliquent à chaque cas d'utilisation et à chaque nouveau style.

1. Chaque image est une fonction pure du temps. renderAt(t) efface et repeint tout à chaque hf-seek. Pas de Math.random(), Date, minuteurs ou trames d'animation.
2. Une graine par élément (sd(id) avant chaque élément). Un trait qui continue de pousser ne doit pas changer la texture des traits qui le suivent.
3. Le trait mène, la peinture suit. Le contour se dessine d'abord ; le lavis apparaît juste après ; le hachurage se révèle de gauche à droite avec brush.clip. La peinture va sous les traits dans l'ordre de peinture.
4. Dessinez à la vitesse de la main. Un trait prend 0,2 à 0,8 s avec un ralentissement au début et à la fin. L'écriture manuscrite est d'environ 0,04 s par lettre. Rien n'apparaît d'un coup.
5. Une famille d'outils par vidéo. Par exemple stylo + aquarelle + un marqueur rouge. Trois ou quatre encres plus la couleur du papier. Le rouge seulement sur la chose à regarder.
6. Imparfait, mais la même imperfection à chaque image. Dépassez les coins et faites osciller les lignes avec un bruit sinusoïdal fixe, jamais de nouvel aléatoire par image. Exception : une « ébullition » délibérée (lignes qui scintillent), avec une nouvelle graine par dessin, maintenue pendant 2 à 3 images (8 à 12 dessins par seconde).
7. Les formes simples se lisent plus vite que les détails. Un personnage est une tête en cercle, des yeux en points et une ligne de bouche ; il agit avec son corps (écrasement, anticipation, suivi) et ses yeux et sourcils.
8. Les mots sont manuscrits, courts et à côté du dessin, jamais dessus. La police du kit est Caveat (latin). Pour l'arabe, ajoutez une police arabe OFL dans assets/fonts/ et déclarez-la avec @font-face.
9. Restez court et sûr. 5 à 12 s par clip. En 9:16, gardez les dessins et mots clés entre environ 170 px du haut et 400 px du bas (boutons de la plateforme et légendes). Terminé quand : la scène dit ce qui a été convenu et suit les neuf règles.

5. Vérifier et rendre

• npx --yes hyperframes lint : 0 erreurs. Un avertissement « fichier trop volumineux » est acceptable pour les scènes d'un seul fichier.
• npx --yes hyperframes preview pour parcourir, ou rendez et examinez les images du début, du milieu et de la fin.
• npx --yes hyperframes render . -o renders/video.mp4.
• Vérifiez les images par rapport aux règles de l'étape 4 et aux propres vérifications du cas d'utilisation ; corrigez et rendez à nouveau. Terminé quand : renders/video.mp4 existe et ses images passent les vérifications.

6. Ajouter un cas d'utilisation (étendre la compétence)

Créez usecases/<nom>/ avec :

• index.html : une composition HyperFrames fonctionnelle qui charge assets/vendor/brush.js et les polices depuis assets/fonts/ (copiez blank pour commencer).
• USECASE.md : quand l'utiliser, quoi changer dans le modèle, et ses propres vérifications. new_project.py le trouve automatiquement. Ajoutez une ligne au tableau de l'étape 2.

Limites

• p5.brush nécessite WebGL2 : HyperFrames effectue le rendu dans Chrome, qui le possède.
• Les remplissages à l'aquarelle ne peuvent pas devenir complètement foncés (comme la vraie aquarelle) : utilisez un lavis pour les zones sombres. Plus de pièges dans references/p5brush-notes.md.
• Le cas d'utilisation de redessin fonctionne mieux sur une seule personne, visage de face ou trois quarts.