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

par Anne-Laure DELPECH | 6 Juin 2018 | Art numérique, Processing

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 :

/*******
* un sketch tout simple qui permet de dessiner à la souris
* si on clique sur la souris, la couleur du cercle change
* si on tape sur z ou Z, l'écran est effacé
* si on tape sur v ou V, le sketch sauvegarde des images pour générer une vidéo
* pour créer la vidéo à partir des images 
*  ----> voir mon tutoriel sur https://knowledge.parcours-performance.com
*******/

int r ;            // radius
float hue ;        // HUE of shape
float compHue;      // complementary hue
float sat ;        // saturation of shape's color

// Pour les interactions 
boolean makeMovie = false ; // sauvegarder images en rafale / vidéo
// int movStart = 0 ;       // pour compter l'intervalle de frame entre deux images
String dest = "vid/infini" ; // destination des images pour faire un film
// String dest = "E:/--- PLANCTON -----/vid1440/infini" ;

 
void setup() {
 
  size(1440, 1080, JAVA2D) ;    // ATTENTION la taille de l'écran doit être celle qu'on prévoit pour la vidéo
  frameRate(30) ;               // idéalement 24 ou 30 qui sont les framerate habituels des vidéos
  colorMode(HSB, 360, 100, 100, 100);  
  r = 55 ;
  hue = random(360) ;
  compHue = 0 ;
  sat = 50 ;
  background(0,0,99,100) ;  // white
 
}
 
void draw() {
 
    smooth();
    strokeWeight(3);
    compHue = (hue + 180) % 360 ;  // modulo 360 to turn in a circle !
    stroke( compHue, sat, 100, 70 );
    fill( hue, sat, 100, 70 );
    ellipse( mouseX, mouseY, r, r );

    if( makeMovie == true) {
      
      // infini-00000nnn.tif
        saveFrame ( dest + "-########.tif"); 
      
    }  
 
}

void mousePressed () {
 
        hue = random(360) ; 
 
}

void keyPressed() {
  
  if (key=='z' || key=='Z') {
    background(0,0,99,100) ;  // white   
  }
  
  if (key=='v' || key=='V') {
    println("!!!! enregistrement images pour movie !!!!") ;  
    background(0,0,99,100) ;  // white
    makeMovie = !makeMovie ;
  }  
}

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 :

    if( makeMovie == true) {     
        saveFrame ( dest + "-########.tif"); 
    }

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

void keyPressed() {
  
  if (key=='z' || key=='Z') {
    background(0,0,99,100) ;  // white   
  }
  
  if (key=='v' || key=='V') {
    println("!!!! enregistrement images pour movie !!!!") ;  
    background(0,0,99,100) ;  // white
    makeMovie = !makeMovie ;
  }  
}

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

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

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

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

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.