8. Multimedia

8.4. Vídeo

En nuestros sketches de P5 podemos cargar y visualizar también vídeos. El proceso para hacerlo es muy similar al que seguimos con las imágenes, puesto que, en esencia, un vídeo no es más que una sucesión de imágenes que irán cambiando en cada uno de nuestros frames. Para cargar el archivo de vídeo, haremos igual que para cargar cualquier otro archivo externo: utilizaremos la pestaña Files de la barra lateral de Openprocessing. Una vez que lo tengamos subido en Openprocessing el proceso para mostrarlo en nuestro canvas es también similar al que usábamos para mostrar imágenes:

let vid; 

function preload() {
  vid = createVideo("myVideo.mp4 ");
}

function setup() {
  createCanvas(400, 400);
  vid.hide();
  vid.play();
}

function draw() {
  image(vid, 0, 0);
}

Primero, creamos una variable para almacenar el vídeo. Después en el preload() utilizamos el método createVideo(), al que le pasaremos como parámetro el nombre del archivo de vídeo con su extensión. A continuación, en el setup() utilizamos el método hide(), ya que createVideo() automáticamente crea un elemento HTML <video> en el DOM y nosotros no lo queremos mostrar, sino que queremos únicamente dibujarlo en nuestro canvas. Después, utilizamos play() para que el vídeo inicie la reproducción, aunque alternativamente también podemos usar loop() para que la reproducción del vídeo sea en bucle. Por último, para dibujar el vídeo utilizaremos image(), al que le pasaremos como parámetro la variable donde almacenamos el vídeo y las coordenadas en las que queremos dibujarlo.

Todas las técnicas y los métodos que hemos utilizado para las imágenes podemos aplicarlos también para vídeos, por lo que nuestras posibilidades creativas se multiplican, aunque debemos tener en cuenta que reproducir el vídeo es mucho más costoso en cuanto a computación que mostrar una imagen, por lo que el rendimiento de nuestros sketches manipulando vídeo en tiempo real puede verse afectado y nuestro frame rate puede caer.

Webcam

Otra fuente de vídeo que podemos mostrar en nuestros sketches es el vídeo que procede de nuestra webcam. Para acceder a esta, usaremos createCapture() y le pasaremos como parámetro la constante VIDEO; posteriormente seguiremos los mismos pasos que con archivos de vídeo para mostrarla en nuestro canvas. Al igual que con el vídeo, deberemos usar hide(), ya que P5 automáticamente creará un objeto en el DOM que nosotros no queremos mostrar, y dado que la cámara está capturando imágenes de manera continua, no es necesario que usemos play(), sino que automáticamente empezará a capturar.

Por razones de seguridad, es muy probable que al iniciar un sketch en el que se intente acceder a las imágenes de la webcam nuestro navegador nos pida permiso para utilizarla. Simplemente deberemos aceptar cuando nos aparezca el mensaje del navegador y así el sketch se ejecutará con normalidad.

Del mismo modo que ocurría con el vídeo, podemos usar las técnicas y los métodos que ya conocemos para manipular creativamente las imágenes que la webcam nos ofrece.

En el ejemplo anterior estamos usando la técnica puntillista, pero en esta ocasión con la imagen de la webcam. Dado que ahora en lugar de una imagen estática tenemos una imagen en movimiento, se ha incrementado el número de círculos que se dibujan en cada frame hasta un total de 100 haciendo uso de un bucle for.