Processing : créer une vidéo ou un gif animé à partir d’un sketch

Dans l’article Un sketch interactif (clavier ou souris) et des sauvegardes d’écran sous Processing 3 , nous avons vu comment réaliser des images à partir d’un sketch Processing. Maintenant nous allons voir comment créer une vidéo.

Le principe est simple :

  • Dans le sketch Processing, l’appui sur une touche (v ou V) déclenche l’enregistrement d’une image à chaque fois que la fonction draw se termine (une frame).
  • Avec les outils de Processing, création d’un fichier MOV à partir de toutes les images générées
  • Réduction du volume de la vidéo en la convertissant en mp4 avec VLC

Le sketch dont nous voulons réaliser une vidéo

Nous repartons de l’exemple très simple présenté dans l’autre article déjà cité. Nous y avons simplement ajouté la possibilité de changer de couleur au clic de souris, et de remettre l’écran à zéro en préssant z ou Z. Pour des raisons évidentes, ce sketch en ligne ne fait pas les enregistrements :

Créer les images, dans le sketch

Je me suis inspirée de ce chapitre du manuel Floss de Processing.

Le code complet est :

Les points importants sont :

  • bien définir la taille des images (et donc de la vidéo) en définissant screen ;
  • Définir le nombre d’image par seconde que l’on veut générer en utilisant framerate()
  • Faire bien attention au lieu de sauvegarde des images car elles peuvent être très nombreuses et très volumineuses
  • déclencher la génération d’images avec une touche

bien définir la taille des images (et donc de la vidéo) en définissant la taille de l’écran  ;

Dans le setup(), on règle l »écran à la taille du film souhaité, ici 1440 x 1080 pixels : size(1440, 1080, JAVA2D) ;

Définir le nombre d’image par seconde que l’on veut générer en utilisant framerate()

Ici j’ai choisi un rythme de 30 images par secondes avec frameRate(30) ;  dans le setup().

Remarque pour youtube, les frame rates courants sont 24, 25, 30, 48, 50, 60 images par seconde si l’on en croit le support technique Google.

Attention images nombreuses et volumineuses !!!!

String dest = "vid/infini" ;  ou String dest = "E:/--- PLANCTON -----/vid1440/infini" ; , permettent de dire où placer les images créées.

Attention, on crée autant d’image par seconde que le framerate (ici 30 , dont 30 images par seconde, 1800 par minute ! Et pour cet exemple, chaque image fait environ 4 Mo.

En 14 secondes, j’ai généré 694 Mo d’images ! 

déclencher la génération d’images avec une touche

On dessine le contenu de l’écran avant la sauvegarde de l’image. On place donc à la fin de la boucle draw le code suivant :

Ce code sauvegarde l’écran sous la forme d’une image  dans le sous-répertoire vid du répertoire contenant notre sketch (pour moi \create_video_1\vid\infini-00000485.tif par exemple). Et makeMovie devient vrai lorsqu’on appuie sur la touche v (ou V) et redevient faux avec la même touche car

Et voici le sketch complet : Sketch create_video_1 (changer l’extension en .pde)

Créer une image animée (gif) avec Gimp

Je suis partie de « Quick Tip: Combine images to gif animation in Gimp » :

  1. Ouvrir Gimp puis dans le menu fichier, choisir « ouvrir en tant que calques » et sélectionner toutes les images qui devront constituer notre image gif (j’ai sélectionné les 415 images !) ;
  2. Dans le menu fichier, choisir « export as » puis donner un nom finissant par gif (par exemple gif-tout-1.gif) au fichier à créer;
  3. Dans la boîte de dialogue, cocher « as animation » puis régler le délai entre frame pour que la vitesse soit convenable. Dans la mesure où je veux 30 images par seconde, je régle à 30 millisecondes entre frames.
  4. Ca prend un bon bout de temps.
Gif créé avec Gimp a partir d'images d'un sketch Processing
Gif créé avec Gimp a partir d’images d’un sketch Processing

Créer une vidéo, avec les outils de Processing

Je me suis inspirée de ce chapitre du manuel Floss de Processing.

Dans le menu Outils de Processing, choisir « Movie Maker ». Attention à sélectionner le même framerate que celui d’enregistrement des écrans. Et cocher « same size as original » pour créer une vidéo de la taille de screen.

Créer une vidéo avec le Movie Maker dans Processing
Créer une vidéo avec le Movie Maker dans Processing

Lorsqu’on clique sur le bouton « create movie », Processing nous demande où l’on veut enregistrer le fichier .mov qu’il va créer. Ensuite, la création se fait.

Conversion en MP4 avec VLC

Ouvrir la vidéo avec VLC. Dans le menu Média, choisir « Convertir / Enregistrer . Indiquer de nouveau le fichier à convertir, éventuellement indiquer à quel moment de la vidéo il faut commencer ou terminer. Ensuite cliquer sur « convertir ».

VLC convertir une vidéo en mp4 - 1
VLC convertir une vidéo en mp4 – 1

Choisir le format (ici h264) puis définir le fichier de destination.

VLC convertir une vidéo en mp4 - 2
VLC convertir une vidéo en mp4 – 2

Le fichier créé est énormément plus léger que le fichier MOV d’origine (100 fois mois d’octets parfois !) et la qualité reste très bonne.

Pour la vidéo correspondant au fichier gif ci-dessus, on a :

  • une seule image fait 4 457 ko ;
  • fichier gif réalisé avec les 415 images 6 655 ko ;
  • vidéo .MOV réalisée avec les 415 images 1 614 ko ;
  • vidéo .mp4 80 ko.
  • Et voici la vidéo en mp4

Un exemple plus important et utile

Pour information, j’ai généré une demi-heure de vidéo d’un travail artistique collectif :

  • Processing a tourné au moins 5 heures pour générer les 54000 images correspondant à 30 minutes (30 minutes * 60 secondes * 30 images par seconde).
  • Le répertoire (un disque dur externe pour ne pas prendre de risque) a reçu 297 Go de fichiers. Chaque image au format tif faisait 1440 x 1080 pixel, 4.45 Mo ;
  • La vidéo résultante en .MOV fait 104 Go (111 902 148 526 octets) !
  • La vidéo enregistrée en MP4 avec VLC fait 949 Mo (995 936 674 octets).

Et maintenant ?

On dispose d’un moyen pratique de montrer ce que produit un sketch processing sans la lourdeur de devoir lancer le sketch sur le bon ordinateur.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *