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