¡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.