Tutorial: Cómo convertir un sketch de Processing en un video

Este video muestra el uso de la función saveFrame() para hacer un video desde un sketch de Processing.

Ejemplo del código: https://github.com/shiffman/Video-Les...

Más acerca del Juego de la Vida: http://natureofcode.com/book/chapter-...

Contacto: https://twitter.com/shiffman

¡Ayúdanos a transcribir y traducir este video!

http://amara.org/v/Qbt6/

¡Hola! y Bienvenidos

en este video te enseñaré

como coger un sketch de Processing

y hacerlo una película.

Esto sale mucho así que quizá hay
varias formas que puedes hacerlo

te voy a enseñar una técnica particular
que espero te sea útil

así que voy a tomar esto arbitrariamente

es uno de mis ejemplos de mi material
"Nature of code".

Es un código de simulación llamado
"El juego de la vida"

Un sistema celular autómata.
(chiste sobre Tom Atta).

Y es solo una animación arbitraria

pero cualquier cosa, cualquier cosa que
dibujes en la pantalla en Processing

puedes hacerlo un archivo de video

¿Por qué hacer esto?

Hay muchas razones:

Una es que quizá quieras subir algo a
Vimeo o Youtube o algún otro

sitio para hospedar un video

quizás quieras llevar esto a otro proyecto

estás trabajando en animación y en
algo como After Effects

y quieres tener algunos elementos
que has programado ahí.

Voy a intentar incluir algunos ejemplos de
personas que han hecho esto

abajo en el cuadro de Youtube

Quizá quieras tomar lo que estás haciendo
e incorporarlo en otro proyecto en video.

Otra cosa que puede ser de hecho,
es que lo que hiciste es hermoso

pero corre increíblemente lento

y tú quieres que corra en tiempo real

para que puedes hacerlo video para que
pueda verse a 30 fps

y se reproduzca como una instalación
o lo que sea que estés haciendo.

Así que veamos como puedes hacer esto.

Hay un montón de pasos
y voy a intentar pasar por ellos

(Risa)

La primera cosa que voy a mostrarte

y sabes que esta letra es
notoriamente pequeña

déjame mostrarte en Processing 3
puedo ir a las preferencias

voy a cambiar la letra del editor a 36

y creo que va a ser un poco mejor.

Ojalá puedes verla

De acuerdo. Esto es la primer cosa que
quiero que hagas:

...lo que voy a hacer es voy a guardar...

puede que haya algunas otras
librerías de Processing

que puedes usar para obtener
directamente un video

pero lo que te voy a enseñar a hacer en
lugar de esto

siempre puedes guardar lo que está
en la pantalla como imagen.

Por ejemplo si yo pongo la función “save”

y digo "gol.PNG" voy a poner eso
en el dibujo

y voy a ejecutarlo

Primero... puedes
decirme si está corriendo lento o no

quizá lo hace quizá no

Voy a cerrar esto y voy a ir a la carpeta
de “sketch”

pueden ver justo ahí ahora hay un archivo
llamado "gol.PNG"

una imagen de lo
que había en la pantalla

estaba rescribiendo

como lo estaba haciendo una y otra vez

y lo que estamos viendo ahora es
el último cuadro que dibujó

la función “save” está fuera

puedes poner eso en “mousePressed”
o "attach" ¿sabes?

puedes en algún punto querer usar “save”

para guardar una instantánea
de la pantalla

pero si usas la función "saveFrame()"

lo que la función "saveFrame()"
te permite hacer

es incluir

el símbolo gato (#)

y lo que hará ahora es un número
automático de archivos

así que cada vez que llames a
"saveFrame()"

va a guardar "gol_1.png", "gol_2.png"...

si ejecuto este dibujo cada vez que dibuje
voy a obtener un nuevo archivo de imagen

y voy a correr esto

y voy a intentar no correrlo por mucho...
¡ups!

lo dejo correr porque ahora voy a entrar
y eso va estar como "ah caray"

y puedes ver, aquí está

tengo un archivo de imagen por cada
cosa que fue grabada, cada cuadro.

No me gusta esto
Es una especie de desastre

porque tengo un trillón de archivos y está
contaminado mi sistema.

Voy a borrar estos y voy a enseñarte
lo que pienso puede ser más útil hacer

Voy a hacer un directorio lo voy a llamar
"Output/gol_####.png"

y voy a correr esto

y lo voy a dejar corriendo

(tarareo feliz y risa)

De acuerdo. Suficiente tiempo.

Ahora puedes ver que tengo todo
esto aquí

y que puedo solo recorrerlo y aquí
está cada cuadro

y por cierto estoy usando el formato
de archivo .PNG

que lo guarda sin compresión así que toda
la calidad está en cada uno de los cuadros

de esta forma más tarde puedes escoger
comprimirlo en un diferente codec

lo que quieras hacer con tu video
allá afuera

ahora la cuestión es qué hacer
con estos archivos

para que puedas meterlos a Final Cut Pro
o iMovie

o MPEG Studio 15 9 z y Plutón
arcoíris cosa mágica.

No sé si lo haya un arcoíris ahí.
Puedes encontrar software.

Muchos usan una secuencia
de imágenes

After Effects hará eso y lo hará película.
Pasa eso.

Si quieres esta forma rápida de hacerlo.

Processing aquí arriba en el menú de
"Herramientas"

debajo de "Herramientas" está "Creador
de Películas"

si presiono aquí en "Creador de
películas" y lo selecciono

Abre una interface que dice "esta
herramienta" no sé si puedas leer esto

"Esta herramienta crea una película de
QuickTime de una secuencia de imágenes"

bla bla bla, un montón de información

Cosas que puedes hacer.

Voy a ir al Buscador ,

voy a encontrar la carpeta de "Output"

y voy a arrastrar esta carpeta de "Output"
justo aquí

y ahora voy a... miren aquí dice, de
acuerdo.... mmm...

puede que... está...

Está dando la altura por defecto de
640 por 480, pero quiero cambiar esto

porque mi ventana de processing es de
640 por 360

¿cuál es la tasa fps que quiero?

¡Oh! creo puedo presionar el mismo tamaño
que el original

en cuyo caso usaría el tamaño del archivo

y después puedo escoger si quiero tener
algún tipo de compresión

Voy a escoger animación que
significa sin compresión

así que voy a tener un archivo muy grande

pero lo podré usar en otro software
y si estoy usándolo en After Effects

va a tener que re comprimirse después

así que no quiero comprimirlo varias veces

También puedo poner un archivo de sonido

si quiero incluir algún sonido,
equis

voy a presionar "Crear película"

quiere que lo guarde

Voy a ponerlo en el Escritorio como
"testmovie.mov"

Presionar "guardar"

y... ¿eso ya pasó?

Lo hizo tan rápido.

Normalmente hay una pequeña ventana
de progreso

pero quizá tenía solo muy poco

"testmovie.mov"

Abriré esto.

¡Vamos QuickTime!

Y sip... sucede muy rápido,
pueden verlo ahí está.

Ahora tengo un archivo ".mov"
que puedo guardar

¡Guau! Impresionante. Si fuera más largo
quizá hubieras visto una barra progresiva.

Puedes ver que es solo un video de
QuickTime que estoy reproduciendo.

¡Fantástico!

Así que la esencia básica de esto, en 6
minutos. Te acabo de mostrar lo principal

Pero creo que podemos hacer más aquí

porque puedes querer comenzar y parar
la realización del archivo

puedes querer ver algún tipo de
información en la pantalla

si se está realizando o no

así que voy a agregar solo unas cuantas
piezas a este programa

solo para hacerlo más sofisticado.

De acuerdo, así que...

lo que voy a hacer es crear una variable
booleana llamada "recording"

asumiré que no estamos grabando
cuando el programa corre por primera vez

así que la boleada “recording”
es igual “false”

y luego voy a decir que si está grabando

aquí es donde debería poder grabar
esos cuadros

Otra cosa que quiero hacer, ahora
que terminé de hacer esa película

quizá necesites respaldos
solo voy a ir y borrar esa carpeta

porque no quiero guardar lo previo

no necesito guardar esos archivos previos

tengo todo lo que necesito ahora justo
aquí en QuickTime

voy a guardar el archivo de video de nuevo

así que ahora solo si

solo si la variable booleana “recording”
está en "true" guardará esos cuadros.

Eso es algo útil.

Ahora lo que voy a hacer

digamos que lo que quiero hacer es

tener un camino... de acuerdo

así que si digo... esto no es
tan interesante

vamos a usar “keyPressed”

para que pueda decir si la tecla es igual
a "r" o igual a "R" mayúscula,

grabar es igual a no grabar

así que lo que esto va a hacer

soy un aterrizador de JavaScript
escribiré función “void

lo que esto va a hacer es que cada vez que
presione "r" en el teclado

va a grabar o a parar de grabrar

Va a alternar el estado booleano
de grabar

si no es “true” es “false”
si no es “false” es "true"

así que grabar es igual no así mismo

si es “false” se vuelve “true” y
si es “true” se vuelve "false"

así que eso va a suceder cada vez
que lo alterne

y puedes ver que si corro este programa

y si voy a los archivos

podemos ver que no está grabando

si voy aquí y presiono aquí "r"

puedes ver de repente que
nuevos archivos aparecen

y si presiono "R" de nuevo
esos nuevos archivos pararán.

Agregando algo sencillo y rápido
puedo prender y apagar la grabación.

También estaría mejor para mí, ver alguna
indicación visual en la pantalla

si está grabando o no.

Así que tal sí justo aquí digo, de acuerdo

"fill" rojo, o "fill" verde

y dibujan un círculo

no lo sé, a la mitad de la pantalla

hacia la parte baja

eso es como un círculo

así que si corremos esto

puedes ver hay un pequeño verde

esto es como que un diseño visual terrible

pero hay un pequeño círculo verde ahí
cuando no está grabando

y cuando presiono grabar
ese círculo se vuelve rojo

cuando presiono otra vez
se vuelve verde

No sé si son los colores correctos
de los indicadores

pero tienes la idea.

Puedo alternar el color de ese círculo

y sé si está grabando o no.

Muy útil. Pero estás pensando "Aquí
hay un enorme problema:

No quiero un gran y horrible círculo verde
o rojo en mi video

Pero algo que es increíble acerca de
la función "saveFrame()"

es que va a guardar la vista actual de la
ventana de Processing

¿Y adivina qué? este círculo es dibujado después
de que llame a la función "saveFrame()"

"saveFrame()" va a guardar lo que está en
la ventana

y luego dibujará el círculo encima de eso.
El círculo no aparecerá en el archivo.

así que deberíamos poder ver

si regreso aquí

y borro eso

y voy a correr esto

y quiero comenzar a grabar por un pequeño
lapso

está grabando, está grabando,
está grabando, está grabando,

ahora paro grabar

y voy a cerrar aquí

voy a ir y ver

Veamos estos archivos.

No círculo verde o rojo.

Así que lo hicimos.

Somos capaces de agregar un indicador
visual

en nuestra ventana que nos dice
si está grabando o no.

Pienso que esa es la esencia de esto...
Ah...

Mostremos algo agradable que podemos
hacer aquí.

Si corro esto a 1920 por 1080
como súper alta resolución.

Voy a poner una línea de impresión sobre
la tasa de cuadros por segundo aquí.

Voy a correr esto.

Puedes ver que

Processing no es capaz de realizar
el Juego de la Vida.

Puede serte difícil ver esto en esta
especie de video tutorial pero

no es capaz de correr esto
súper rápido en tan alta resolución

y de hecho es bastante rápido puedes ver
la tasa es de 14 fps

pero quiero hacer esta gloriosa simulación del
Juego de la vida

que corra a 30 fps

así que ahora si hago esto

y presiono grabar

puedes ver que la grabación también
lo está ralentizando

porque hay algo de energía compitiendo
y toma tiempo convertirlo en un archivo

Si corro esto ahora, lo hago un archivo

y paro la grabación

y salgo del programa y regreso
a "Herramientas"

"Creación de película"

y yo...

¡ups! Aquí arriba tomo la carpeta "Output"

y la arrastro aquí. Es la misma carpeta.

ahora esto es 1920 por 1080

y por supuesto puedo solo seleccionar "la
misma medida que el original"

Tasa de cuadros, crear película

y quiero ahora "testmovie1080.mov"
y presiono guardar

y ahora puedes ver esa pequeña ventana de
progresión

no lo está haciendo tan rápido esta vez

está creando la película

(tarareo feliz)

y ahora está terminado.

Ahora voy al Escritorio

para ver lo que hice

y "testmovie1080.mov"

voy a abrir esto

Convirtiendo.

Para que QuickTime pueda reproducirla

¡Vamos Quicktime!

(Sonidos mágicos)

De acuerdo. Aquí vamos.
Pantalla completa. Reproducimos.

Puedes ver, tengo mis 30 fps de mi
simulación del Juego de la vida

todo realizado en Processing.

No sé que acaba de...
(sonidos raros)

Dejé algunos archivos viejos ahí al final
así que los entretejió

entretejió lo de alta resolución con
lo de baja, es interesante.

Como sea, puedes ver todo tipo
de posibilidades

espero que esto te ayude con cosas que
estés haciendo en Processing

puedes hacer esto con 3d,

puedes hacer esto con casi cualquier cosa

y dime cómo te resulta

así que gracias por ver este video

y volveré pronto con más videos.