Exporter un sketch Processing en vidéo

Avant de publier une série de tutoriel concernant la programmation avec Processing, voici un article qui explique, pas à pas, comment exporter votre sketch Processing en vidéo. Ce billet de blog est la réponse à la question posée par mes étudiants lors du cours d’initiation à la programmation.

Ce dont vous aurez besoin, c’est de :


Petit rappel…

Si vous êtes nouveau dans le monde magique de la programmation avec Processing, voici un petit rappel simple. Partant d’ici : 

// une fois...
void setup(){
}

// plusieurs fois...
void draw(){
}

Il existe deux fonctions importantes dans Processing : setup et draw.

setup est exécuté une fois, draw 60 fois par seconde jusqu’à ce que je ferme mon programme.


Ajout de la libraire VideoExport

Maintenant, pour exporter une vidéo, il faut télécharger la librairie Video Export. Voici les étapes :

Outils > Ajouter un outil…

Ensuite, chercher pour Video Export dans l’onglet librairie et l’installer :

Parfait ! Maintenant, on va s’assurer que tout marche à merveille. On va importer la librairie dans notre code :

import com.hamoid.*;

void setup(){
}

void draw(){
}

Les erreurs…

Si vous avez mal installé la librairie, un message d’erreur va apparaitre : 

ou…

et sur la console, ça va même afficher ceci : 

Dans ce cas, refaites les étapes au dessus ! Les erreurs sont claires… visiblement, ça manque un truc !

Si tout va bien en exécutant (cmd+r sur MacOS ou ctrl+r sur Win et Linux) une jolie petite fenêtre va s’afficher et aucune erreur ne va empêcher l’exécution de notre code. Continuons !


Le code pour exporter :

Donc comme tout autre langage de programmation, il faut importer la librairie avant de l’utiliser. Ensuite,  il faut déclarer, créer un nouvel objet et appeler les fonctions dans draw() et setup(). Je vais prendre comme exemple un rect() avec une petite interaction. N’oubliez pas d’enregistrer le sketch sur votre disque, sinon la librairie ne saura pas où placer la vidéo !

import com.hamoid.*;

VideoExport videoExport;


void setup(){
  size(600, 600);
  videoExport = new VideoExport(this);
  videoExport.startMovie();

}


void draw(){
  background(0);
  rect(mouseX, mouseY, 50, 50);
  videoExport.saveFrame();
}

VideoExport videoExport;  : on déclare ici l’objet.

videoExport = new VideoExport(this); : videoExport est comme n’importe quel objet – pour construire un objet, on utilise un nouvel opérateur suivi par un constructeur. Rappel : ceci n’est pas une class que vous avez écrit vous-même donc aucun moyen de savoir à l’avance ce qu’il faut mettre entre les parenthèses comme argument sans consulter la documentation (lien disponible en bas). La référence nous indique justement qu’il faut rajouter “this” pour appeler l’objet.

videoExport.saveFrame(); : renvoies à la fonction saveFrame() de l’objet videoExport, qui rajoute une image à la vidéo.

et voilà ! au moment de l’arrêt du programme, vous allez voir apparaître une vidéo dans le dossier du sketch. Mais en l’arrêtant, que cela soit avec le bouton STOP, Esc ou autre, le fichier peut être corrompu. La solution ? il faut appeler la fonction endMovie(), en voici un exemple avec keyPressed() :

void keyPressed() {
  if (key == 'q') {
    videoExport.endMovie();
    exit();
  }
}

J’espère que ce petit guide vous a aidé. N’hésitez pas à partager vos créations avec cette solution ! Je vous invite aussi à consulter la documentation de la librairie pour explorer d’autres fonctions par exemple pour le choix du framerate, de la qualité…etc.


Ressources :

Emir C. Écrit par :

Soyez le premier à commenter

Laisser un commentaire

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