Créer un GIF animé/une vidéo avec Processing

En plein dans la préparation d’un cours de conception orientée objet, modélisation UML et implémentation en Java via Processing (ouf), j’ai besoin pour illustrer mes cours de créer des petits gifs illustrant les résultats à attendre…

Facile avec ffmpeg !

Méthode simple

Sans détailler le fonctionnement de Processing, il suffit d’ajouter dans la boucle de dessin (fonction draw), à la fin par exemple, ceci :

if (frameCount< 400) {
    saveFrame("data/balle-####.png");
} else {
    noLoop();
}

Cela va générer dans un dossier data un fichier png pour chaque frame, donc pour chaque image dessinée à l’écran. Je limite à 400 pour l’exemple, et cela stoppera le dessin après (noLoop).

Une fois l’opération faite, un petit coup de ffmpeg en ligne de commande:

ffmpeg -i data/balle-%04d.png balle.gif

Qui va prendre chaque image pour créer un GIF animé…

Si vous préférez une vidéo, plus légère sans doute:

ffmpeg -i data/balle-%04d.png balle.mp4

Tada !

Capture vidéo

J’ai constaté que la méthode simple ralentit considérablement le tracé (forcément, il faut que Processing génère les images). Pour illustrer un support de cours, cela ne me dérange pas. Mais si vous avez besoin de performance, lancer une capture vidéo peut être intéressante (via Quicktime dans mon cas)…

Encore faut-il que Processing ne démarre pas trop vite…

Donc, on ajoute un noLoop dans le setup (après les autres initialisations):

void setup() {
    noLoop();
}

Et on précise un écouteur de touche (ou de clique de souris, selon) pour lancer la loop… le temps d’avoir lancé et réglé Quicktime

void keyPressed() {
    if (key==' ') {
        loop();
    }
}

Et re-Tada !

Pour illustrer: