Exporter un sketch p5.js en vidéo

Cet article montre comment utiliser p5.js pour générer une vidéo au format webm.

Le taille de la vidéo est celle du canvas. Pour créer une vidéo dans une taille qui est plus grande que la place disponible dans l’espace Preview de l’éditeur en ligne de p5.js, voir l’article Grand canvas avec p5.js editor.

Installation

Télécharger le sketch VideoRecorder demo (menu File > Download).
Récupérer le fichier VideoRecorder.js sur votre disque et l’ajouter à votre sketch.
Editer le fichier index.html de votre sketch et ajouter la ligne 7:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
    <script src="VideoRecorder.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

Enregistrement d’une vidéo

Il y a 2 méthodes:

Ajouter un bouton. Le bouton permet de décider manuellement quand démarrer l’enregistrement et quand l’arrêter.
Lancer et arrêter l’enregistrement depuis le code. Cette manière permet de définir précisément le début et de la fin de la vidéo.

Avec un bouton

Ajouter ce code dans la fonction setup() du sketch:

function setup() {
  
  createCanvas(800, 600);

  VideoRecorder.addButton();

}

Cliquer sur le bouton pour démarrer et arrêter l’enregistrement
Cliquer sur le lien pour télécharger la vidéo

Avec du code

Vous décidez quand démarrer l’enregistrement. Par exemple dans la fonction setup() et dans draw(), avec une condition (à vous de voir laquelle):

function setup() {

  VideoRecorder.record();

}

function draw() {

  if (frameCount == 100) {
    VideoRecorder.stop();
  }

}

Dépannage

Taille vidéo double du canvas

Si la taille de votre vidéos fait le double de celle du canvas, c’est probablement que vous avez un écran Rétina. La solution est d’ajouter la ligne suivante avant l’appel à createCanvas().

function setup() {
  
  // Make sure the video will be the same size as the canvas. Must be called before the createCanvas
  pixelDensity(1);
  
  createCanvas(400, 400);
  
  VideoRecorder.addButton();

}