0:00:01.232,0:00:02.322
¡Hola! y Bienvenidos

0:00:02.442,0:00:03.532
en este video te enseñaré

0:00:03.561,0:00:05.301
como coger un sketch de Processing

0:00:05.349,0:00:06.769
y hacerlo una película.

0:00:06.796,0:00:10.206
Esto sale mucho así que quizá hay [br]varias formas que puedes hacerlo

0:00:10.216,0:00:13.306
te voy a enseñar una técnica particular[br]que espero te sea útil

0:00:13.306,0:00:15.786
así que voy a tomar esto arbitrariamente

0:00:15.823,0:00:19.273
es uno de mis ejemplos de mi material [br]"Nature of code".

0:00:19.752,0:00:23.145
Es un código de simulación llamado [br]"El juego de la vida"

0:00:23.145,0:00:27.565
Un sistema celular autómata. [br](chiste sobre Tom Atta).

0:00:28.283,0:00:30.873
Y es solo una animación arbitraria

0:00:31.007,0:00:35.187
pero cualquier cosa, cualquier cosa que [br]dibujes en la pantalla en Processing

0:00:35.187,0:00:37.757
puedes hacerlo un archivo de video

0:00:37.757,0:00:38.887
¿Por qué hacer esto?

0:00:38.887,0:00:40.187
Hay muchas razones:

0:00:40.187,0:00:44.187
Una es que quizá quieras subir algo a [br]Vimeo o Youtube o algún otro

0:00:44.190,0:00:47.040
sitio para hospedar un video

0:00:47.040,0:00:50.150
quizás quieras llevar esto a otro proyecto

0:00:50.150,0:00:53.020
estás trabajando en animación y en [br]algo como After Effects

0:00:53.020,0:00:56.160
y quieres tener algunos elementos [br]que has programado ahí.

0:00:56.160,0:01:00.160
Voy a intentar incluir algunos ejemplos de[br]personas que han hecho esto

0:01:00.160,0:01:01.560
abajo en el cuadro de Youtube

0:01:01.560,0:01:05.555
Quizá quieras tomar lo que estás haciendo [br]e incorporarlo en otro proyecto en video.

0:01:05.713,0:01:08.963
Otra cosa que puede ser de hecho, [br]es que lo que hiciste es hermoso

0:01:08.963,0:01:11.518
pero corre increíblemente lento

0:01:11.998,0:01:14.338
y tú quieres que corra en tiempo real

0:01:14.338,0:01:17.408
para que puedes hacerlo video para que [br]pueda verse a 30 fps

0:01:17.418,0:01:20.998
y se reproduzca como una instalación[br]o lo que sea que estés haciendo.

0:01:21.148,0:01:23.530
Así que veamos como puedes hacer esto.

0:01:23.530,0:01:28.050
Hay un montón de pasos [br]y voy a intentar pasar por ellos

0:01:28.050,0:01:28.822
(Risa)

0:01:28.833,0:01:31.313
La primera cosa que voy a mostrarte

0:01:31.313,0:01:33.893
y sabes que esta letra es[br]notoriamente pequeña

0:01:33.893,0:01:36.863
déjame mostrarte en Processing 3[br]puedo ir a las preferencias

0:01:36.863,0:01:39.103
voy a cambiar la letra del editor a 36[br]

0:01:39.743,0:01:41.443
y creo que va a ser un poco mejor.

0:01:41.443,0:01:42.693
Ojalá puedes verla

0:01:43.217,0:01:46.127
De acuerdo. Esto es la primer cosa que [br]quiero que hagas:

0:01:46.127,0:01:50.126
...lo que voy a hacer es voy a guardar...[br]

0:01:51.446,0:01:54.126
puede que haya algunas otras [br]librerías de Processing

0:01:54.126,0:01:56.516
que puedes usar para obtener [br]directamente un video

0:01:56.516,0:02:00.006
pero lo que te voy a enseñar a hacer en [br]lugar de esto

0:02:00.006,0:02:04.266
siempre puedes guardar lo que está [br]en la pantalla como imagen.

0:02:04.493,0:02:09.723
Por ejemplo si yo pongo la función “save”

0:02:11.386,0:02:17.266
y digo "gol.PNG" voy a poner eso [br]en el dibujo

0:02:18.253,0:02:19.353
y voy a ejecutarlo

0:02:19.353,0:02:22.463
Primero... puedes [br]decirme si está corriendo lento o no

0:02:22.463,0:02:23.663
quizá lo hace quizá no[br]

0:02:23.663,0:02:26.663
Voy a cerrar esto y voy a ir a la carpeta [br]de “sketch”

0:02:26.663,0:02:31.503
pueden ver justo ahí ahora hay un archivo [br]llamado "gol.PNG"[br]

0:02:31.503,0:02:33.583
una imagen de lo [br]que había en la pantalla

0:02:33.585,0:02:35.295
estaba rescribiendo

0:02:35.295,0:02:38.165
como lo estaba haciendo una y otra vez[br]

0:02:38.165,0:02:41.625
y lo que estamos viendo ahora es [br]el último cuadro que dibujó

0:02:41.630,0:02:43.230
la función “save” está fuera

0:02:43.230,0:02:45.820
puedes poner eso en “mousePressed” [br]o "attach" ¿sabes?

0:02:45.820,0:02:47.830
puedes en algún punto querer usar “save” [br]

0:02:47.830,0:02:49.430
para guardar una instantánea [br]de la pantalla

0:02:49.430,0:02:52.900
pero si usas la función "saveFrame()"

0:02:52.900,0:02:55.460
lo que la función "saveFrame()"[br]te permite hacer

0:02:55.460,0:02:57.610
es incluir

0:02:59.166,0:03:01.706
el símbolo gato (#)

0:03:01.706,0:03:04.946
y lo que hará ahora es un número [br]automático de archivos

0:03:04.950,0:03:07.189
así que cada vez que llames a[br]"saveFrame()"

0:03:07.189,0:03:11.599
va a guardar "gol_1.png", "gol_2.png"...[br]

0:03:11.602,0:03:18.022
si ejecuto este dibujo cada vez que dibuje[br]voy a obtener un nuevo archivo de imagen

0:03:18.022,0:03:19.572
y voy a correr esto

0:03:19.572,0:03:22.122
y voy a intentar no correrlo por mucho... [br]¡ups!

0:03:22.122,0:03:25.542
lo dejo correr porque ahora voy a entrar [br]y eso va estar como "ah caray"

0:03:25.542,0:03:28.492
y puedes ver, aquí está

0:03:28.734,0:03:34.204
tengo un archivo de imagen por cada[br]cosa que fue grabada, cada cuadro.

0:03:34.204,0:03:36.214
No me gusta esto[br]Es una especie de desastre

0:03:36.214,0:03:39.854
porque tengo un trillón de archivos y está[br]contaminado mi sistema.

0:03:39.984,0:03:44.144
Voy a borrar estos y voy a enseñarte [br]lo que pienso puede ser más útil hacer

0:03:44.144,0:03:49.764
Voy a hacer un directorio lo voy a llamar [br]"Output/gol_####.png"

0:03:49.764,0:03:50.754
y voy a correr esto

0:03:51.808,0:03:53.098
y lo voy a dejar corriendo

0:03:53.106,0:03:57.546
(tarareo feliz y risa)

0:03:57.546,0:03:59.346
De acuerdo. Suficiente tiempo.

0:03:59.346,0:04:03.066
Ahora puedes ver que tengo todo [br]esto aquí

0:04:03.066,0:04:07.006
y que puedo solo recorrerlo y aquí [br]está cada cuadro

0:04:07.006,0:04:10.356
y por cierto estoy usando el formato [br]de archivo .PNG

0:04:10.506,0:04:15.876
que lo guarda sin compresión así que toda [br]la calidad está en cada uno de los cuadros

0:04:15.876,0:04:20.286
de esta forma más tarde puedes escoger [br]comprimirlo en un diferente codec

0:04:20.286,0:04:22.916
lo que quieras hacer con tu video[br]allá afuera

0:04:22.916,0:04:25.616
ahora la cuestión es qué hacer [br]con estos archivos

0:04:25.626,0:04:29.486
para que puedas meterlos a Final Cut Pro [br]o iMovie

0:04:29.486,0:04:35.647
o MPEG Studio 15 9 z y Plutón [br]arcoíris cosa mágica.

0:04:35.647,0:04:38.687
No sé si lo haya un arcoíris ahí. [br]Puedes encontrar software.

0:04:38.687,0:04:40.517
Muchos usan una secuencia [br]de imágenes

0:04:40.517,0:04:44.267
After Effects hará eso y lo hará película.[br]Pasa eso.

0:04:44.267,0:04:46.497
Si quieres esta forma rápida de hacerlo.

0:04:46.977,0:04:49.617
Processing aquí arriba en el menú de [br]"Herramientas"

0:04:49.617,0:04:52.647
debajo de "Herramientas" está "Creador [br]de Películas"

0:04:52.937,0:04:56.047
si presiono aquí en "Creador de [br]películas" y lo selecciono

0:04:56.269,0:04:59.999
Abre una interface que dice "esta [br]herramienta" no sé si puedas leer esto

0:04:59.999,0:05:03.079
"Esta herramienta crea una película de [br]QuickTime de una secuencia de imágenes"

0:05:03.079,0:05:05.359
bla bla bla, un montón de información

0:05:05.359,0:05:06.709
Cosas que puedes hacer.

0:05:06.709,0:05:11.289
Voy a ir al Buscador ,

0:05:11.289,0:05:13.179
voy a encontrar la carpeta de "Output"

0:05:13.179,0:05:15.689
y voy a arrastrar esta carpeta de "Output"[br]justo aquí

0:05:15.689,0:05:20.749
y ahora voy a... miren aquí dice, de [br]acuerdo.... mmm...

0:05:20.749,0:05:23.859
puede que... está...

0:05:23.859,0:05:28.459
Está dando la altura por defecto de [br]640 por 480, pero quiero cambiar esto

0:05:28.459,0:05:32.129
porque mi ventana de processing es de[br]640 por 360

0:05:32.129,0:05:33.939
¿cuál es la tasa fps que quiero? [br]

0:05:33.939,0:05:36.779
¡Oh! creo puedo presionar el mismo tamaño [br]que el original

0:05:36.779,0:05:39.489
en cuyo caso usaría el tamaño del archivo

0:05:39.891,0:05:43.001
y después puedo escoger si quiero tener[br]algún tipo de compresión

0:05:43.001,0:05:45.791
Voy a escoger animación que [br]significa sin compresión

0:05:45.791,0:05:47.881
así que voy a tener un archivo muy grande

0:05:48.271,0:05:52.201
pero lo podré usar en otro software[br]y si estoy usándolo en After Effects

0:05:52.201,0:05:54.211
va a tener que re comprimirse después

0:05:54.211,0:05:56.541
así que no quiero comprimirlo varias veces

0:05:56.541,0:05:58.691
También puedo poner un archivo de sonido

0:05:58.691,0:06:01.311
si quiero incluir algún sonido,[br]equis

0:06:01.311,0:06:04.761
voy a presionar "Crear película"

0:06:04.761,0:06:06.331
quiere que lo guarde

0:06:06.956,0:06:10.026
Voy a ponerlo en el Escritorio como [br]"testmovie.mov"

0:06:10.145,0:06:11.775
Presionar "guardar"

0:06:12.631,0:06:15.301
y... ¿eso ya pasó?

0:06:15.301,0:06:16.641
Lo hizo tan rápido.

0:06:17.915,0:06:20.255
Normalmente hay una pequeña ventana [br]de progreso

0:06:20.255,0:06:21.775
pero quizá tenía solo muy poco

0:06:23.077,0:06:24.607
"testmovie.mov"

0:06:25.055,0:06:25.985
Abriré esto.

0:06:27.228,0:06:28.398
¡Vamos QuickTime!

0:06:29.143,0:06:31.933
Y sip... sucede muy rápido, [br]pueden verlo ahí está.

0:06:31.969,0:06:34.969
Ahora tengo un archivo ".mov" [br]que puedo guardar

0:06:34.969,0:06:39.509
¡Guau! Impresionante. Si fuera más largo [br]quizá hubieras visto una barra progresiva.

0:06:39.509,0:06:42.819
Puedes ver que es solo un video de [br]QuickTime que estoy reproduciendo.

0:06:42.819,0:06:43.819
¡Fantástico!

0:06:43.819,0:06:48.269
Así que la esencia básica de esto, en 6 [br]minutos. Te acabo de mostrar lo principal

0:06:48.334,0:06:50.854
Pero creo que podemos hacer más aquí

0:06:50.854,0:06:55.824
porque puedes querer comenzar y parar [br]la realización del archivo

0:06:56.517,0:07:00.517
puedes querer ver algún tipo de [br]información en la pantalla

0:07:00.559,0:07:01.929
si se está realizando o no [br]

0:07:02.125,0:07:05.455
así que voy a agregar solo unas cuantas [br]piezas a este programa

0:07:05.455,0:07:07.195
solo para hacerlo más sofisticado.

0:07:08.165,0:07:09.635
De acuerdo, así que...

0:07:09.822,0:07:13.662
lo que voy a hacer es crear una variable [br]booleana llamada "recording"

0:07:14.452,0:07:18.452
asumiré que no estamos grabando [br]cuando el programa corre por primera vez

0:07:18.452,0:07:21.532
así que la boleada “recording” [br]es igual “false”

0:07:21.532,0:07:23.922
y luego voy a decir que si está grabando

0:07:24.402,0:07:28.402
aquí es donde debería poder grabar [br]esos cuadros

0:07:28.402,0:07:31.672
Otra cosa que quiero hacer, ahora[br]que terminé de hacer esa película

0:07:31.672,0:07:34.322
quizá necesites respaldos [br]solo voy a ir y borrar esa carpeta

0:07:34.322,0:07:36.422
porque no quiero guardar lo previo

0:07:36.422,0:07:38.762
no necesito guardar esos archivos previos

0:07:38.762,0:07:41.442
tengo todo lo que necesito ahora justo [br]aquí en QuickTime

0:07:41.857,0:07:45.857
voy a guardar el archivo de video de nuevo

0:07:46.399,0:07:50.399
así que ahora solo si

0:07:50.399,0:07:56.299
solo si la variable booleana “recording” [br]está en "true" guardará esos cuadros.

0:07:56.562,0:07:57.952
Eso es algo útil.

0:07:58.943,0:08:00.853
Ahora lo que voy a hacer

0:08:00.853,0:08:03.413
digamos que lo que quiero hacer es

0:08:03.413,0:08:04.903
tener un camino... de acuerdo

0:08:05.012,0:08:07.672
así que si digo... esto no es [br]tan interesante

0:08:07.672,0:08:08.942
vamos a usar “keyPressed”

0:08:11.431,0:08:19.591
para que pueda decir si la tecla es igual [br]a "r" o igual a "R" mayúscula,

0:08:20.111,0:08:23.271
grabar es igual a no grabar

0:08:23.271,0:08:25.571
así que lo que esto va a hacer [br]

0:08:25.571,0:08:29.271
soy un aterrizador de JavaScript [br]escribiré función “void

0:08:29.271,0:08:33.981
lo que esto va a hacer es que cada vez que[br]presione "r" en el teclado

0:08:33.981,0:08:35.821
va a grabar o a parar de grabrar

0:08:35.821,0:08:38.071
Va a alternar el estado booleano [br]de grabar

0:08:38.072,0:08:42.072
si no es “true” es “false” [br]si no es “false” es "true"

0:08:42.072,0:08:45.462
así que grabar es igual no así mismo

0:08:45.462,0:08:48.282
si es “false” se vuelve “true” y [br]si es “true” se vuelve "false"[br]

0:08:48.282,0:08:51.572
así que eso va a suceder cada vez [br]que lo alterne

0:08:51.572,0:08:53.492
y puedes ver que si corro este programa

0:08:53.492,0:08:56.632
y si voy a los archivos

0:08:58.032,0:08:59.962
podemos ver que no está grabando

0:08:59.962,0:09:02.332
si voy aquí y presiono aquí "r"

0:09:02.332,0:09:05.112
puedes ver de repente que [br]nuevos archivos aparecen

0:09:05.112,0:09:08.282
y si presiono "R" de nuevo[br]esos nuevos archivos pararán.

0:09:08.282,0:09:13.812
Agregando algo sencillo y rápido [br]puedo prender y apagar la grabación.

0:09:13.812,0:09:19.552
También estaría mejor para mí, ver alguna [br]indicación visual en la pantalla

0:09:19.552,0:09:21.352
si está grabando o no.

0:09:22.262,0:09:25.602
Así que tal sí justo aquí digo, de acuerdo

0:09:26.591,0:09:34.011
"fill" rojo, o "fill" verde

0:09:35.871,0:09:37.421
y dibujan un círculo

0:09:37.421,0:09:39.871
no lo sé, a la mitad de la pantalla

0:09:39.871,0:09:42.141
hacia la parte baja

0:09:42.141,0:09:44.151
eso es como un círculo

0:09:44.151,0:09:45.541
así que si corremos esto

0:09:45.761,0:09:48.021
puedes ver hay un pequeño verde

0:09:48.021,0:09:50.231
esto es como que un diseño visual terrible

0:09:50.231,0:09:53.531
pero hay un pequeño círculo verde ahí[br]cuando no está grabando

0:09:53.531,0:09:56.121
y cuando presiono grabar [br]ese círculo se vuelve rojo

0:09:56.121,0:09:58.061
cuando presiono otra vez [br]se vuelve verde

0:09:58.061,0:10:00.741
No sé si son los colores correctos [br]de los indicadores

0:10:00.741,0:10:01.751
pero tienes la idea.

0:10:01.751,0:10:03.731
Puedo alternar el color de ese círculo

0:10:03.731,0:10:05.501
y sé si está grabando o no.

0:10:05.501,0:10:09.901
Muy útil. Pero estás pensando "Aquí[br]hay un enorme problema:[br]

0:10:09.901,0:10:13.471
No quiero un gran y horrible círculo verde[br]o rojo en mi video

0:10:13.731,0:10:17.311
Pero algo que es increíble acerca de [br]la función "saveFrame()"

0:10:18.101,0:10:23.061
es que va a guardar la vista actual de la [br]ventana de Processing

0:10:23.061,0:10:27.045
¿Y adivina qué? este círculo es dibujado después[br]de que llame a la función "saveFrame()"

0:10:27.045,0:10:29.815
"saveFrame()" va a guardar lo que está en [br]la ventana

0:10:29.815,0:10:33.505
y luego dibujará el círculo encima de eso.[br]El círculo no aparecerá en el archivo.

0:10:33.505,0:10:35.025
así que deberíamos poder ver[br]

0:10:35.025,0:10:38.225
si regreso aquí

0:10:38.783,0:10:40.713
y borro eso

0:10:40.909,0:10:41.829
y voy a correr esto

0:10:42.736,0:10:45.036
y quiero comenzar a grabar por un pequeño [br]lapso

0:10:45.036,0:10:47.196
está grabando, está grabando, [br]está grabando, está grabando,

0:10:47.196,0:10:48.326
ahora paro grabar

0:10:48.326,0:10:49.896
y voy a cerrar aquí

0:10:49.896,0:10:51.226
voy a ir y ver

0:10:51.226,0:10:52.646
Veamos estos archivos.

0:10:52.646,0:10:54.716
No círculo verde o rojo.

0:10:54.716,0:10:55.906
Así que lo hicimos.

0:10:55.906,0:10:58.846
Somos capaces de agregar un indicador [br]visual

0:10:58.846,0:11:02.056
en nuestra ventana que nos dice [br]si está grabando o no.

0:11:03.163,0:11:05.523
Pienso que esa es la esencia de esto... [br]Ah...

0:11:05.523,0:11:09.153
Mostremos algo agradable que podemos [br]hacer aquí.

0:11:10.194,0:11:15.424
Si corro esto a 1920 por 1080 [br]como súper alta resolución.

0:11:17.392,0:11:21.392
Voy a poner una línea de impresión sobre [br]la tasa de cuadros por segundo aquí.

0:11:21.392,0:11:22.602
Voy a correr esto.

0:11:22.602,0:11:23.862
Puedes ver que

0:11:23.922,0:11:27.182
Processing no es capaz de realizar [br]el Juego de la Vida.

0:11:27.182,0:11:30.662
Puede serte difícil ver esto en esta [br]especie de video tutorial pero

0:11:30.662,0:11:34.504
no es capaz de correr esto [br]súper rápido en tan alta resolución

0:11:34.814,0:11:39.965
y de hecho es bastante rápido puedes ver [br]la tasa es de 14 fps

0:11:39.965,0:11:43.015
pero quiero hacer esta gloriosa simulación del[br]Juego de la vida

0:11:43.015,0:11:44.595
que corra a 30 fps

0:11:44.595,0:11:46.245
así que ahora si hago esto

0:11:46.245,0:11:47.745
y presiono grabar

0:11:47.745,0:11:50.785
puedes ver que la grabación también [br]lo está ralentizando

0:11:50.806,0:11:56.296
porque hay algo de energía compitiendo[br]y toma tiempo convertirlo en un archivo

0:11:56.296,0:12:01.016
Si corro esto ahora, lo hago un archivo

0:12:01.016,0:12:03.066
y paro la grabación

0:12:03.066,0:12:06.586
y salgo del programa y regreso [br]a "Herramientas"

0:12:06.586,0:12:08.146
"Creación de película"

0:12:08.146,0:12:10.396
y yo...

0:12:10.415,0:12:14.575
¡ups! Aquí arriba tomo la carpeta "Output"

0:12:14.575,0:12:17.845
y la arrastro aquí. Es la misma carpeta.

0:12:17.845,0:12:20.765
ahora esto es 1920 por 1080

0:12:20.765,0:12:24.045
y por supuesto puedo solo seleccionar "la[br]misma medida que el original"

0:12:24.045,0:12:26.045
Tasa de cuadros, crear película

0:12:26.045,0:12:30.565
y quiero ahora "testmovie1080.mov" [br]y presiono guardar

0:12:30.565,0:12:33.525
y ahora puedes ver esa pequeña ventana de [br]progresión

0:12:33.525,0:12:34.995
no lo está haciendo tan rápido esta vez

0:12:34.995,0:12:36.255
está creando la película

0:12:36.529,0:12:38.929
(tarareo feliz)

0:12:39.799,0:12:41.819
y ahora está terminado.

0:12:41.819,0:12:43.569
Ahora voy al Escritorio

0:12:44.445,0:12:46.715
para ver lo que hice

0:12:47.654,0:12:49.424
y "testmovie1080.mov"

0:12:49.424,0:12:50.464
voy a abrir esto

0:12:50.822,0:12:52.462
Convirtiendo.

0:12:52.462,0:12:54.812
Para que QuickTime pueda reproducirla

0:12:55.326,0:12:57.676
¡Vamos Quicktime!

0:12:57.878,0:13:00.201
(Sonidos mágicos)

0:13:00.201,0:13:03.101
De acuerdo. Aquí vamos. [br]Pantalla completa. Reproducimos.

0:13:03.101,0:13:06.351
Puedes ver, tengo mis 30 fps de mi [br]simulación del Juego de la vida

0:13:06.351,0:13:08.401
todo realizado en Processing.

0:13:08.443,0:13:10.573
No sé que acaba de... [br](sonidos raros)

0:13:10.653,0:13:16.423
Dejé algunos archivos viejos ahí al final[br]así que los entretejió

0:13:16.423,0:13:20.553
entretejió lo de alta resolución con [br]lo de baja, es interesante.

0:13:20.553,0:13:24.183
Como sea, puedes ver todo tipo[br]de posibilidades

0:13:24.183,0:13:27.883
espero que esto te ayude con cosas que[br]estés haciendo en Processing

0:13:27.883,0:13:29.843
puedes hacer esto con 3d,

0:13:29.843,0:13:32.343
puedes hacer esto con casi cualquier cosa

0:13:32.343,0:13:33.703
y dime cómo te resulta

0:13:33.703,0:13:35.553
así que gracias por ver este video

0:13:35.553,0:13:37.863
y volveré pronto con más videos.