Programación de gráficos I: Introducción al arte generativo

1. Avance: llamo Joshua Davis, y soy diseñador, soy programador, soy tecnólogo, amante del código abierto, amante del caos aleatorio y vamos a tomar una clase sobre aprender a programar composiciones algorítmicas generativas. ¿ Qué es el arte generativo? Es hacer arte que es impulsado principalmente por un programa de computadora. A mí me gusta esta idea de poder mirar la pantalla y que la composición tome decisiones que están totalmente fuera de gesto. Puede que me lleve un tiempo enseñarte a configurar este proceso, pero una vez que termines con ese proceso tienes un sistema para generar un número infinito de competencias. Creo que donde estoy más emocionado es ver lo que hacen otras personas. ¿ Qué tipo de dibujos hacen otras personas? ¿ Qué tipo de colores usan otras personas? Nuevamente esa obra de arte que se genera al final, va a ser única para ese individuo porque han tomado toda la toma de decisiones dentro de los parámetros. Solo te estoy dando las herramientas para establecer esos parámetros. 2. Introducción: Preparación del entorno: Entonces, ahora mismo nos vamos a concentrar en configurar el medio ambiente. Esto lo relaciono de nuevo con el skateboarding. Recuerdo haber mirado a los pros que admiraba y la forma en que montaban monopatines, y cuando me enteré de cómo montaban sus tablas, tal vez qué tipo de rodamientos usaban para tratar de replicar esa configuración, me ayudó a entender mejor cómo esa persona lo hizo, cómo patinaban tan bien como lo hacían. Entonces, relato eso de nuevo a la tecnología que estamos haciendo. Vamos a estar trabajando en el entorno de procesamiento, pero en realidad no escribo código dentro del entorno de autoría de procesamiento o del IDE. En realidad escribo código en un programa llamado Sublime Text 2. Entonces, vamos a tomar algún tiempo para descargar Sublime Text 2. Te voy a mostrar cómo instalar el paquete de procesamiento para obtener procesamiento para construir dentro de Sublime Text 2, y también te voy a mostrar cómo configurar fragmentos. Por ejemplo, vamos a configurar uno para la configuración. Entonces, empezaré a escribir S-E-T-U-P, y en realidad autocompletará un fragmento muy grande de código que suele ser el código que reescribo una y otra vez. Entonces, ¿por qué no configurar un fragmento para ejecutar este gran bloque de código? Entonces, trabajar dentro de Sublime Text 2 va a ser súper útil en cuanto optimizar cómo realmente creamos en este entorno. 3. Descarga de Processing: Hey, este es Joshua Davis y bienvenidos a Programming Graphics, una introducción al arte generativo. Nos vamos a divertir. Nos vamos a divertir, y tenemos una tonelada de contenido que cubrir. Voy a dividirlos en un montón de videos independientes para que puedas digerir a tu tiempo libre, y esta primera sección que vamos a cubrir es en realidad configuración del entorno. Para mí, es lo más crucial. Es una ventana de cómo las personas configuran sus ambientes, y les voy a mostrar cómo configuro mi entorno y me parece fascinante y útil. ¿ Qué tipo de atajos toma la gente para hacer el trabajo que realiza. Entonces, en esta clase, vamos a estar cubriendo el procesamiento. Vamos a estar cubriendo una pequeña biblioteca en la que trabajo llamada Hype, y vamos a estar trabajando con SVG, Scalable Vector Graphics, lo que significa que vamos a estar dibujando activos dentro un ilustrador y luego mapeando esos en programas que escribimos usando procesamiento, bien. Entonces, lo primero que quiero hacer es pasar a descargar e instalar el procesamiento. Entonces, si abres un navegador y vas a processing.org, notarás arriba en la parte superior de la página hay procesamiento de descargas. Si haces clic en el procesamiento de descargas puedes hacer una donación. Si lo deseas, puedes hacer click sin donación y aún así descargar el procesamiento de forma gratuita. Se puede ver que hay instaladores de Windows, Linux, y OS X. Obviamente, voy a estar usando OS X. Cuando sigas adelante y haz clic en descargar deberías obtener un archivo zip, y cuando descomprimiste ese archivo zip realmente obtienes procesando la aplicación. Ahora bien, si fuera a ejecutar el procesamiento de la aplicación se vería algo como esto. lo primero que debes tener en cuenta es de ese procesamiento que es un editor de texto. Se trata de un entorno que permite escribir código, ejecutar ese código y ver los resultados visuales. Entonces, digamos que quería pintar algo en pantalla. Lo que podría hacer es, simplemente podría escribir justo en el IDE de procesamiento, y voy a decir configuración nula. Voy a seguir adelante y decir que el color de relleno es naranja, y luego voy a seguir adelante y dibujar un rectángulo. Digamos que este rectángulo es de 20 píxeles en el eje x, 20 píxeles en el eje y, un ancho de 50, y una altura de 50. Ahora, acabo de escribir un poco de código aquí dentro del editor de procesamiento, y si iba a seguir adelante y guardar este archivo, seguiré adelante y guardaré esto como procesamiento IDE y lo pondré en mi escritorio. Si tuviera que hacer clic en ejecutar aquí mismo en el IDE de procesamiento, realidad va a compilar el código que escribí, y de nuevo realmente puedo ver los resultados aquí mismo en pantalla. Entonces, de hecho, sí dibujó un rectángulo naranja a 20 en el eje x, 20 en el eje y, un ancho de 50, y una altura de 50. Ahora, para el siguiente video, en realidad te voy a mostrar cómo trabajar con Sublime Text 2. Entonces, si bien me encanta la autoría en procesamiento, realidad no es mi editor de elección. En realidad me gusta escribir mi código en Sublime Text 2. El motivo de esto es que tiene un montón de atajos para, en mi opinión escribir código, más rápido, más fácil, y un poco más eficientemente. Entonces, mientras me gusta procesar. No me gusta la autoría en su editor. Entonces, siguiente video trabajando con Sublime Text 2. 4. Trabajo con Sublime Text 2: Está bien. En este video, vamos a cubrir trabajando con Sublime Text 2. Entonces, si regresas a tu navegador y vas adelante y tecleas Sublime Text 2 en un motor de búsqueda debería ser el mejor resultado. Si vas adelante y haces clic, notarás que la URL Sublime Text 2 sublimetext.com/2. En la parte superior, tienes la opción de descargar y de nuevo también tiene sabores de Windows, Linux, y OSX. Voy a seguir adelante y dar click para descargar el instalador, que ya he hecho. Ya he instalado. De nuevo, si fuera a ejecutar Sublime Text 2, notarás que es un editor de texto, al igual que tiene el procesamiento IDE pero tiene algunas ventajas interesantes. Si empiezo a escribir algo del mismo código tal como lo había hecho antes en el video anterior, te darás cuenta de que si sigo adelante y escribo void y si sigo adelante y escribo setup y hago paren abierta, te darás cuenta de que lo genera automáticamente el cierre paren, y si sigo adelante y escribo open bracket, notarás que lo completa haciendo el corchete de cierre. Si fuera a hacer un duro retorno, pone ese corchete de cierre en la tercera línea y automáticamente apaga mi segunda línea. Entonces, tiene formas de hacer mucho más eficiente escribir código en mi opinión. Ahora, y de nuevo, esto es solo un editor de texto y puedo hacer cosas como hacer que el tipo sea más grande para el caso de estos videos para que en realidad puedas ver el código que estoy escribiendo. Entonces, tiene estas mejoras que yo solo creo que son un poco más eficientes. Ahora bien, si entras en la esquina inferior derecha, notarás que estos son todos los diferentes paquetes de idiomas que vienen con Sublime Text 2. Podría notar que el procesamiento no forma parte de esta instalación base. Es algo que tenemos que añadir. Entonces, si se baja a los Ps estaban procesando debería ser, su PHP a Python pero no hay procesamiento bien. Ahora, termina que hay un paquete de procesamiento por lo que necesitamos que Sublime Text 2 sepa que el procesamiento existe. Voy a seguir adelante y volver a mi navegador y voy a seguir adelante y escribir en paquete de procesamiento Sublime Text 2. Cuando haces eso, te interesan los dos mejores enlaces. Este es el repositorio de GitHub que aloja el paquete y hay este gran segundo enlace que en realidad tiene un video en Vimeo para que digieras el contenido. Té helado. Entonces, voy a seguir adelante y abrir este video de Sublime Text 2 Vimeo. Tiene como un minuto de duración. De nuevo, es súper útil para mostrarte cómo puedes atar Sublime Text 2 al procesamiento. Ahora, voy a seguir adelante y dar clic en este enlace superior porque obviamente ya he visto el video y aquí es donde se puede obtener toda la información que se necesita con el fin de agregar procesamiento a Sublime Text 2. Ahora, lo voy a hacer usando Control de paquetes. Ahora, para poder usar el Control de Paquetes, verás aquí que queremos buscar bajo instalación y la primera es usar Sublime Package Control. Ahora, si sigue adelante y hace clic en este enlace. Si estás utilizando Sublime Package Control, puedes instalar fácilmente el paquete de procesamiento vía y luego te muestra los pasos. Desafortunadamente, por defecto Control de paquetes no está instalado. Entonces, si te encuentras bajo preferencias, Package Control es en realidad no está aquí. Entonces, voy a hacer clic en este enlace, si estás usando Sublime Package Control. El Sublime Text Package Manager que hace que sea sumamente sencillo instalar- ahora. Entonces, al hacer clic en instalar ahora, notarás que hay algún código que tienes que copiar y pegar en la consola de Sublime Text 2. Ahora, Sublime Text 3 está en realidad en Beta, así que verás algo de información aquí. Voy a seguir adelante y dar clic en este enlace para Sublime Text 2. Ahora, vas a copiar esta larga cadena de instrucciones. Entonces, voy a seguir adelante y copiar eso y voy a volver a Sublime Text y quiero abrir la consola. Entonces, si sigues adelante y haces clic en ver, verás aquí mismo dice show console. Ahora, cuando dices show console, va a cargar esa sección inferior de Sublime Text 2 y aquí abajo, hay una entrada, el cursor está parpadeando, todo lo que voy a hacer es realmente pegar lo que acabamos de copiar desde el navegador. Entonces, voy adelante y pego eso y sigo adelante y hago clic en volver, y te darás cuenta de que pasó un montón de cosas y luego se acaba de decir, por favor lee iniciar Sublime Text para terminar la instalación. Por lo tanto, las instrucciones para agregar Control de Paquetes ahora se han agregado a Sublime Text 2. Entonces, es en este punto que puedo cerrar las instrucciones de instalación de Package Control. Necesito salir de Sublime Text 2 y en realidad reiniciarlo. Entonces, cuando reinicie Sublime Text 2, parecerá que nada es diferente pero en realidad, si entras al menú principal aquí, Sublime Text 2, si entras en preferencias, ahora notarás abajo en la parte inferior es un Control de paquetes, donde previamente no estaba el Control de paquetes. Ahora, si hago clic en Control de paquetes, me va a dar este pequeño submenú arriba en la parte superior con cosas que quiero hacer con paquetes. ¿ Quiero agregar paquetes, eliminar paquetes así sucesivamente y así sucesivamente? Entonces, lo que queremos hacer es realmente instalar un paquete. Queremos instalar el paquete de procesamiento. Entonces, voy a seguir adelante y hacer clic en instalar paquete y te darás cuenta de que ha surgido una lista de paquetes. Todo lo que tengo que hacer es empezar a escribir en procesamiento y te darás cuenta que es el resultado máximo. Entonces, dice, procesando un paquete Sublime Text 2 para el procesamiento del lenguaje de programación. Entonces, voy a seguir adelante y hacer clic en eso y notar aquí abajo en el muy, muy abajo, dice que el procesamiento de paquetes se instaló con éxito. Ahora, lo que eso significa es que no sólo está instalado el paquete de procesamiento sino que ahora puedo hacer clic en el menú inferior derecho y notarás que ahora el procesamiento ha surgido como un idioma en la lista de selección de idiomas. Entonces, voy a seguir adelante y el procesamiento de clics y voy a empezar a conseguir cosas como la codificación de color y todo eso. Entonces eso es súper divertido, pero incluso hace algunas otras cosas. Se podría notar que cuando escribí por primera vez este código escribí void. Escribí configuración, afeité minutos de mi vida, hombre. Yo quiero hacer las cosas más rápido. Entonces, lo que hace el paquete es empaquetar muchas características de procesamiento en atajos. Entonces, por ejemplo, en realidad puedo eliminar todo este código, y digamos que quiero hacer la configuración. Todo lo que tienes que hacer es tipo S-E-T, y ahora te darás cuenta de que nos da una lista de acciones a las que podemos llamar. Entonces, quiero seguir adelante y hacer configuración, voy adelante y golpeo Enter, y notarás que escupe mi función de configuración de vacío, mi función de sorteo de vacío. Entonces, ya no tengo que seguir reescribiendo ese código. En realidad puedo usar ese atajo para hacer cosas. Entonces, de nuevo, digamos que quería hacer un For Loop. Puedes seguir adelante y decir For. De nuevo, notarás que tira hacia arriba del submenú, puedo seguir adelante y hacer clic en Entrar, automáticamente escupe la estructura para For Loop, y hace resaltado tabulador. Entonces, notarás que dice, entero i es igual a cero, eso está bien. Si sigo adelante y hago clic en el Tab, notarás que pasa al cero. Si vuelvo a presionar Tab, podría escribir 100. Si vuelves a pulsar Tab, te pone en medio del bucle For. Entonces, esta idea de no solo ejecutar atajos sino poder tabular a través de esos atajos es súper útil. Entonces, quiero hacer un rectángulo, y tú vas y haces clic en Entrar. Oye, ¿dónde lo quieres en el eje x? De antes, 20 en la x, Tab; 20 en la y, Tab; 50 para ancho, Tab; 50 para altura. Entonces, Sublime Text 2 hace que sea súper fácil escribir código simplemente más rápido, más fácil, es bonito, es un cambio de juego. Está bien. Entonces, tenemos instalado procesamiento, tenemos instalado Sublime Text 2. Sólo hay un par de cosas más que yo diría que tenemos que hacer. Una de las últimas cosas es que en realidad vamos a escribir código en Sublime Text 2, pero cuando hacemos clic en Build, necesitamos crear este puente entre procesar la aplicación y Sublime Text 2. Entonces, lo último que necesito hacer es realmente lanzar el procesamiento de nuevo, y te darás cuenta en Herramientas, hay Instalar Procesamiento Java. Necesitas hacer esto, otras palabras puedes escribir todo el código que quieras todo el día en Sublime Text 2 y nada va a pasar porque en realidad aún no has instalado Processing Java. Entonces, voy a seguir adelante y hacer clic en Instalar procesamiento Java. Se va a decir: “¿Quieres instalarlo para todos los usuarios?” Bla, bla, bla. “Es posible que necesite una contraseña”. Voy a seguir adelante y hacer clic en Sí, voy a seguir adelante y poner mi contraseña, voy a seguir adelante y hacer clic en Ok, y que ahora ha instalado exitosamente Processing Java en mi entorno. Entonces, a estas alturas, en realidad puedo dejar de procesar de nuevo, ¿de acuerdo? Porque ahora he instalado Processing Java. Entonces, si cierro esta ventana, y si cierro esta ventana, y si cierro esta ventana, y sigamos adelante y guardemos este archivo. Otra cosa que diría que es un poco agradable de procesar IDE es que cuando realmente haces clic en Guardar archivo, crearía una carpeta y luego pondría tu archivo dentro de esa carpeta. De hecho, así es como funciona el procesamiento. El procesamiento tiene que tener un boceto guardado en una carpeta con el mismo nombre exacto. Entonces, si tu boceto se llama Joshuadavis.pde, entonces tu carpeta necesita llamarse Joshua Davis de lo contrario obtendrás compiladores. Sublime Text 2 no sabe hacer eso todavía, sabe que puede guardar este archivo, pero no sabe crear la carpeta para. Entonces, esa es una yo diría leve molestia por trabajar con Sublime Text 2. Entonces, sigamos adelante y creemos una nueva carpeta en mi escritorio. Voy a seguir adelante y llamar a esta carpeta, digamos que se llama Prueba Uno, ¿verdad? Ahora, esto es típicamente lo que hago, es abriré Test One y crearé una nueva carpeta llamada Build, ¿de acuerdo? Entonces tomaré este código que he escrito, en este caso no quiero este For Loop, este rectángulo está bien. No vamos a cubrir empate todavía. En nuestro expediente original, lo teníamos con un relleno de naranja. Voy a seguir adelante y salvar esto ahora. Voy a seguir adelante y guardar esto en mi escritorio. Voy a guardar esto en la carpeta Test One, y luego lo voy a guardar en la carpeta Build, y sólo voy a llamar a esta build.pde. Está bien. Entonces, déjame simplemente mover esto a un lado y déjame solo mostrarte mi estructura de carpetas aquí. Entonces, tenemos Prueba Uno, tenemos Build, tenemos build.PDE. Por lo que ahora en este punto, realidad puedes llegar a las herramientas y puedes hacer clic en Construir. Si hago clic en Build, lo que hará en realidad es ejecutar Processing Java, y notarás que estoy viendo los resultados visuales tal como lo hice en el IDE de procesamiento. Está bien. Ahora, hay un par de cosas de las que debes estar al tanto. Voy a seguir adelante y dejar esto. Uno es Josh. ¿ Por qué haces esto como Test One, Build, build.PDE? Porque si quiero hacer un montón de mutaciones de Test One, todo lo que tengo que hacer es arrastrar y copiar, arrastrar y copiar, arrastrar y copiar, arrastrar y copiar, arrastrar y copiar, ¿verdad? Entonces ahora tengo cinco pruebas de tal vez este boceto inicial que había desarrollado. Pero en lugar de, ¿cómo pongo esto? Porque el nombre del boceto tiene que ser lo mismo que el nombre de la carpeta, si hiciera este tipo de copia y duplicación, tendría que ir y cambiar el nombre del archivo pde, test1.pde, test2.pde. De nuevo, afeitarse minutos de mi vida hombre. Preferiría mucho tener este tipo de anidación, así que de esa manera tengo Test One. Dentro de Test One es Build, y dentro de Build está build.PDE. Entonces, nunca tengo que renombrar build.pde. Entonces, puedo duplicar ese boceto inicial y no preocuparme por tener que renombrar mi pde cada vez que hago una nueva mutación. Eso soy solo yo y estoy loco. Ahora, esta clase va a ser divertida, divertida. Otra cosa que debes notar es que algo que sucede en Sublime Text 2 que no sucede en el procesamiento de IDE, y ese es este directorio build-temp. Entonces, cada vez que construyo un archivo, va a construir este directorio build.temp, ¿de acuerdo? En un poco aquí, te voy a mostrar algunos atajos de cómo simplemente eliminar esos archivos para que no estés acumulando todos estos archivos build.temp. Desafortunadamente Sublime Text 2 siempre va a generar ese archivo build.temp, y no hay forma de apagarlo dentro de Sublime Text 2. De nuevo, procesar IDE no hace eso. procesamiento de IDE no tiene razón para crear este archivo temp de compilación donde Sublime Text 2 lo hace, ¿de acuerdo? Entonces, ahora tenemos procesamiento descargado, tenemos Sublime Text 2 descargado, tenemos el Bundle instalado. Estamos aprendiendo sobre los atajos dentro de Sublime Text 2. Abrimos el procesamiento e instalamos Processing Java. En el siguiente video, te voy a mostrar algunos pasos más dentro de Sublime Text 2 así como algunas aplicaciones esenciales que utilizo solo en OSX, y hablaremos de por qué y cómo estos son útiles. Nos vemos en el tercer video. 5. Consejos finales para la preparación del entorno: Está bien. En el video tres, quiero delinear solo algunas cosas más que hago como parte de mi configuración de entorno. Ahora, tenemos este archivo que acabo de batir juntos muy rápidamente, llamamos a eso prueba uno, construir, build.pde. Aquí puedes ver desde el código estamos poniendo un relleno de naranja y estamos dibujando un rectángulo. Ahora, tengo ese mismo archivo exacto abierto tanto en Sublime Text 2 Processing. La razón por la que he hecho eso es porque hay una diferencia entre estos dos programas cuando realmente construyes el código. Dentro de Processing, si haces clic en este icono, se está ejecutando ejecución pero si resalta Sketch, verás que la ejecución es en realidad Command+R. Entonces, en realidad puedo golpear un montón de código, puedo presionar Command+R y eso es va a compilar mi código y se va a ejecutar y podemos ver los resultados visuales. Entonces, si vengo a Procesamiento y presiono Comando+Ejecutar, ahí está. Desafortunadamente, en Sublime Text 2, si te encuentras bajo Herramientas, en realidad es Comando+B para construir. Entonces, esto me parece un poco ligeramente confuso porque en Processing es Command+R y Sublime Text 2 su Comando+B. Había pasado como un año trabajando en el IDE de Procesamiento antes de usar Sublime Text 2 y así mi cerebro está cableado de cierta manera . Estaría escribiendo código en Sublime Text 2 y presionaría Command+R y haría algo completamente diferente. Entonces, en realidad quiero cambiar las preferencias en Sublime Text 2 para que la compilación sea Comando+R igual que lo está en Processing. Entonces, de esa manera puedo trabajar entre estos dos ambientes y no tengo que preocuparme por recordar, Comando+B en uno y Comando+R en otro. Entonces, lo que voy a hacer es, voy a venir a Sublime Text 2 y bajo preferencias, verás Key Bindings. Ahora, verás Fijaciones de teclas para Predeterminado y Fijaciones de Clave para Usuario. Ahora, primero voy a abrir Key Bindings for Default y notarás que se abre este enorme documento. Ya verás aquí puedes mover esto y hay un montón de enlaces de teclas diferentes asociados con Sublime Text 2. Ahora, soy un usuario individual. Entonces, quiero abrir Sublime Text 2, Preferencias, Fijaciones Clave, Usuario. Cuando hagas eso, notarás en blanco de este documento. No has especificado ningún enlace de clave específico relacionado con el usuario. Entonces, lo que quiero hacer es, quiero ir a Default y quiero encontrar el enlace para construir. Entonces, solo voy a hacer Comando+F para encontrar y aquí abajo en la parte inferior, te darás cuenta de que escribo build y doy clic en find. Al hacer clic en encontrar, notarás que estos chicos resaltan aquí mismo. Cierto, este es el que busco en la línea 232, claves, super plus b o Comando+B es el comando de construir. Entonces, en realidad voy a seleccionar esta línea justo aquí, no la coma al final, la coma es sólo si hubiera múltiples Key Bindings que quiero establecer, pero siempre estoy configurando el uno. Entonces, no necesito la coma al final. Voy a seguir adelante y prensa copia. Entonces voy a dirigirme al enlace clave específico del usuario y sólo voy a darme un giro un poco más duro y voy a pegar. Por lo que ahora, he pegado build en la preferencia específica del usuario. Entonces solo voy a cambiar esto a super plus r.SO, esa manera no estoy estropeando las cargas por defecto, por defecto pero luego va a cargar este específico del usuario y luego anular el valor predeterminado. Entonces ahora, si en realidad hago clic en Guardar y luego vengo a Herramientas, notarás que la compilación ahora está configurada en Command+R, lo mismo que está dentro de Processing. Entonces, puedo cerrar esto, puedo volver a mi código y solo presionar Comando+R y se ejecuta igual que lo haría en Processing. Entonces, eso es sólo otra cosa que me gusta armar para que estos dos sean similares y no tengo que recordar construir eso es una cosa y una en una cosa en otra, no quiero hacer eso. Entonces ahora, es Command+R en ambos entornos, por lo que estoy súper feliz. Ahora, aplicaciones específicas de Macintosh. Para tus usuarios de Windows, entenderás aquí en un segundo por qué esta conversación no te aplica. Estoy escribiendo código y me gusta tener las cosas organizadas de manera específica. Entonces, los usuarios de Mac realmente necesitan esta aplicación llamada SizeUp. Entonces, si en realidad abres un navegador y escribes “tamaño”, notarás que es el enlace superior, “Software irradiado, SizeUp”, y es el Window Manager que falta para la gente de OS X. PC, tienes esto incorporado. Tomas una ventana, arrastras a un lado y se brota y puedes organizar las cosas de esa manera. En OS X no tenemos eso. Entonces, SizeUp es un super eficiente para organizar tu espacio de trabajo para escribir código en mi opinión. Entonces, una vez que tengas SizeUp instalado en OS X, verás cuáles son todos los atajos aquí, pero es súper útil puedo decir que quiero esto a la izquierda, quiero esto a la derecha, lo quiero a la parte superior, lo quiero a la parte inferior, Yo lo quiero para cada una de las esquinas o puedes presionar para realmente tenerlo centrado. Entonces, solo son algunos atajos de teclado bonitos para que el Mac ayude a organizar las cosas. Entonces, notarás que al igual que tengo aquí, tengo esta pequeña ventana de Procesamiento en la parte superior derecha, tengo mi buscador en la parte inferior derecha y tengo Sublime Text 2 a la izquierda. Si volviera a empezar un nuevo documento, tal vez no me guste esta idea de tener que cambiar de ida y vuelta y pestañas, realidad puedo tirar de esto a un lado y luego posicionarlo al lado derecho de la pantalla para luego trabajar en dos documentos lado a lado. Entonces, me parece que usar SizeUp para ser súper útil en organizar el espacio en el que escribo Code.Second app que realmente me gusta es Cafeine. Cafeína que puedes obtener de la App Store y pone un poco de taza de café en tu bandeja de tareas. Eso es para no hacer que tu computadora se vaya a dormir. Porque todo está saltado de cafeína. Entonces, si lleno la taza de café con cafeína, sólo significa que puedo irme o puedo ver algo y no tengo que preocuparme de que mi computadora se vaya a dormir y mis pantallas se vuelvan negras. Esto es lo mismo que lanzar tus Preferencias del Sistema y luego entrar en Energy Saver y luego dentro de Energy Saver, te vas Nunca y se va, ¿estás seguro? Se pulsa bien. Dices Nunca y luego dices: “Está bien, no pongas los discos duros dormidos”. Entonces, en lugar de tener que hacer eso cada vez, Cafeína simplemente anula esto y básicamente solo siempre lo establece Nunca siempre establece no poner las cosas a dormir. Entonces, me gusta tener Cafeína instalada solo para poder escribir código, hacer pausas cuando necesito, dar un paso atrás cuando necesito irme cuando necesito y luego no tener que preocuparme que todo se fue a dormir mientras estaba brevemente ausente. Entonces, dos apps que me gustan mucho SizeUp y Cafeína y otra vez Cafeína, sólo se obtiene de la App Store. Entonces, solo tecleas Cafeína y se instalará. Entonces, hemos hablado de este tercer video, Cafeína, hemos hablado de SizeUp. Hemos hablado de construir sistema. Ahora, lo último que quiero hablar de un Simppets. fragmentos se meten en un nivel más experto de escritura de código pero quiero darte al menos un Spppet y mostrarte cómo usarlo. Puedes ver por qué es súper útil, y a medida que te pones más cómodo trabajando con código y específicamente con Hype y con específicamente Sublime Text 2, vas a encontrar que los Simppets son simplemente impresionantes. Entonces, déjame dejar de fumar y hacer algunas cosas aquí. Ahora, qué es un Simppet, digamos que siempre configuras tu entorno de cierta manera. Para mí, me encuentro siempre haciendo lo mismo que es, diré, configuración de vacío y diré que quiero que el tamaño sea de 640 píxeles por 640 píxeles y tal vez quiero que el fondo siempre sea negro y tal vez siempre quiera alisar. A lo mejor siempre quiero una función de dibujo. Me encuentro en el procesamiento siempre escribiendo las mismas cosas una y otra vez. Lo que Simppets te permiten hacer, es empaquetar cosas que tú como creador de contenido individual tipo día a día, empaquetar todas esas cosas en un fragmento. Entonces, déjame solo mostrarte cómo se ve un fragmento. Este es mi fragmento inicial y está orientado a usar bombo y obviamente no estaban a la altura de los videos donde estamos cubriendo bombo todavía pero lo bueno es que quiero que instales los fragmentos para que más tarde cuando empecemos cubriendo este contenido, podemos ejecutar esto el atajo. Entonces, recuerda cuando escribimos un for loop y automáticamente escupe el for loop e incluso tenía todas las tabbing y te permitió saltar a todas las pestañas diferentes.? Eso es un fragmento. Entonces, esto es solo un fragmento de configuración que siempre uso con bombo. Nuevamente, lo que es bonito es que puedes abrir el fragmento dentro del sublime texto dos y puedes ver cómo se estructuran las cosas. Se puede ver cómo ejecutar el código de tabulación, así sucesivamente y así sucesivamente. Ahora, para poder instalar este fragmento, necesitamos ponerlo en la carpeta de fragmentos de procesamiento y está un poco enterrado. Entonces, lo que quiero que hagas es en realidad ir a la carpeta y luego voy a teclear ~/Biblioteca. Voy a seguir adelante y hacer clic en Ir, y ahora te darás cuenta de que ahora estás viendo la carpeta de la biblioteca. Por defecto en OS X, esta carpeta de biblioteca está oculta. Entonces, si solo abres tu disco duro e intentas encontrar la carpeta de la biblioteca, no puedes porque es una carpeta oculta. Entonces, al ir, conéctate a la carpeta ~/ Biblioteca con una L mayúscula ya podemos ver la carpeta de la biblioteca. Ahora, dentro de esta carpeta de biblioteca verás Soporte de Aplicaciones. En Soporte de aplicaciones, verás Sublime Text dos. Debajo de Sublime Two, verás Paquetes y verás que estos son todos los paquetes de todos los diferentes idiomas, el que acabamos de instalar, justo aquí procesando. Entonces, si hago clic en Procesamiento, ahora verás que hay una carpeta llamada Simppets y dentro de Simppets son todos estos fragmentos que puedes usar dentro de Sublime Text dos como, configuración, ese cuatro bucle, rectángulo. Ahora, en algún lugar te voy a dar este archivo de fragmento y todo lo que tienes que hacer es simplemente copiarlo a la carpeta Spppets. Entonces, ahora se ha copiado ahí dentro. Esto se llama hype_set up así que, si realmente fueras a ir al Hs, verías que está justo ahí, hype_setup. Ahora, lo que eso significa es, es que puedo volver a Sublime Text dos y solo puedo seguir adelante y empezar a escribir este atajo. Entonces, abajo al fondo. Necesito asegurarme de que tengas Procesando seleccionado, ya que este es un fragmento de procesamiento. HY y mira, aparece hype_setup. Este es el fragmento que acabamos de agregarlo y si sigo adelante y hago clic en Entrar, notarás que construye mi configuración, construye mi sorteo, construye mi tamaño como siempre me gusta. ¿ Quiero que sea 640 por 640? No lo sé. Mira, puedo dar click a Tab, puedo dar click a Tab. ¿ Quieres que sea 3D? No, aún no, así, puedo seguir adelante y dar clic en Eliminar. Entonces, ahora este boceto de procesamiento no va a estar usando coordenadas 3D. Línea tres, totalmente no hemos cubierto todavía pero de nuevo, puedo dar clic en Tab si quería cambiar el color de fondo. ¿ Queremos usar 3D? No, en realidad apagamos eso. Entonces, puedo dar clic en Eliminar. Auto claro, ¿quieres eso? ¿ Sí o no? Si sí lo quieres, ¿quieres que sea verdad o falso? Vuelvo a hacer clic en Tab. Abajo en el empate estamos disparando etapa de empate. ¿ Estoy grabando esto? Hablaremos de salida a formatos de imagen. En este caso, esto renderizaría 900 tiffs, lo que equivaldría a 30 segundos de película. Entonces, ¿quieres decir marco? A lo mejor sí, tal vez no. Voy a decir Eliminar. Entonces, es una manera de, si te encuentras cómoda con la programación y te encuentras haciendo cosas una y otra vez, lugar de tener que escribirlas una y otra vez, te podría interesar crear tus propios fragmentos personalizados. De esa forma solo puedes empezar a escribir parcialmente algo e ir sí, quiero hacer configuración de bombo y hacer clic en hyp_setup y sabes que siempre va a autogenerar cosas que estás reutilizando constantemente. Eso termina esta sección, esta es configuración de entorno. Entonces, de nuevo, instalamos Processing, instalamos Sublime Text dos, instalamos Paquete de Procesamiento, aprendimos sobre algunas aplicaciones que me gusta usar, obtuvimos nuestra configuración de entorno. Entonces, que ahora cuando pasemos a la sección dos que es sólo una introducción al procesamiento y bombo y qué son estas dos cosas y por qué trabajan juntas y cómo son ligeramente diferentes a escribir código y procesamiento y así sucesivamente así sucesivamente. Esa será la siguiente sección pero al menos ahora hemos configurado nuestro entorno exactamente como trabajo. Entonces, a medida que empezamos a escribir código, tenemos algunos de los atajos, tenemos algunos de estos procesos para hacer escribir código un poco más fácil, un poco más eficiente y divertido. Entonces, nos vemos en la siguiente sección Introducción al Procesamiento y el Marco Hype. 6. Introducción: Processing y HYPE: Para el siguiente paso, vamos a hablar de procesamiento y vamos a hablar de escribir código y procesamiento. Todo lo que Sublime texto es, es un entorno de autoría. Se trata de un editor de texto. Es donde realmente escribiremos todo el código que hace lo que sea que queremos hacer. Cuando realmente escribimos el código y lo ejecutamos, lo que sucede es, es que el código se compila luego por procesamiento y algo sucede en pantalla. Entonces, si digo que quiero configurar un lienzo, quiero que el fondo sea rojo y quiero dibujar un cuadrado verde, eso son cosas que en realidad escribirán dentro del editor Sublime Text-to. Cuando realmente hacemos clic en Construir, procesamiento lo va a construir, va a leer esas instrucciones y en realidad mostrar algo en pantalla. Ahora bien, ¿qué es el bombo? El bombo es esa tercera cosa que es, digamos que queremos esa plaza verde y otra y otra vez porque realmente nos encantan los cuadrados verdes. Entonces, podríamos crear algo llamado la clase de plaza verde. Entonces, en lugar de tener que escribir todo el código para hacer este rectángulo, hacerlo verde, ponlo aquí, en realidad escribiremos una línea de código que diga “Plaza verde aquí”. Entonces, es un atajo. Hype es una serie de atajos para hacer acciones más grandes y robustas dentro del procesamiento. 7. Descarga de HYPE: Bienvenidos a la Sección dos. Muy emotivo. Sección dos. Vamos a hablar del marco HYPE. Entonces, estamos trabajando en el procesamiento, pero también trabajo en esta biblioteca externa llamada el framework HYPE, que es una colección de cosas que hacen las cosas. ¿ De acuerdo? Ahora bien, si vas a hypeframework.org, puedes ver el sitio del proyecto aquí. Se pueden ver todos los diferentes ejemplos que he estado publicando, pero este es sólo el sitio para el proyecto. El código fuente real existe arriba en Github. Entonces, verás aquí arriba en la esquina superior izquierda, hay github.com/hype. ¿ De acuerdo? Por lo tanto, puedes ver URL aquí Github.com/hype/hype_processing. Ahora, en los pasos del proyecto aquí en Skillshare, en realidad he puesto una URL diferente. He puesto github.com/hype/hype_processing tree staging. Eso se debe a que la compilación maestra del código no contiene todos los cambios en los que estamos trabajando actualmente. Entonces, si ven justo aquí arriba, dice ramas. Aquí hay una rama llamada puesta en escena y si haces clic en puesta en escena, esta en realidad es la colección más actualizada del código. Nuevamente, la URL está abajo en pasos del proyecto. Ahora, si eres nuevo en codificar por completo, puedes hacer caso omiso de muchas cosas. Vamos a hablar de ello en un poco aquí. Lo único en lo que realmente te interesa es aquí mismo. Dice descargar zip. Entonces, si sigo adelante y hago clic en descargar zip, debes notar que está descargando el archivo zip en tu escritorio. Ahora, ese archivo zip va a contener todo lo que existe, que estás viendo aquí en la página web. Entonces, por ejemplo, tiene una carpeta para documentación en la que estamos trabajando donde estamos documentando algunos de los bits del código fuente. Contiene un archivo de ejemplos. En los ejemplos es donde estoy tomando ciertas cosas que hemos escrito y solo estoy haciendo algunos ejemplos barebone para ayudarte a través del proceso. Java, nuestro código fuente. PDE, nuestro código fuente. Sitio web, ese sitio web real que ves justo aquí, eso es en realidad cuando se actualiza, realidad vive en la carpeta del sitio web, y obviamente hay un montón de otras cosas. ¿ De acuerdo? Una vez que tengas descargado este archivo zip, lo único que te va a interesar 100% para poder hacer todos los ejemplos que vamos a estar haciendo es este único archivo llamado hype.pde. Entonces, hype.pde contiene cada clase individual que está en la biblioteca. Contiene cada cosa que vamos a usar para todos los proyectos que vamos a hacer. Entonces, después de haber descargado este archivo zip, basta con mirar ese hype.pde porque ese es el archivo que vamos a estar usando en cada proyecto que hagamos. Está bien. Voy a terminar este video. Voy a crear uno nuevo donde hablemos algunas cosas adicionales que hay dentro de este archivo zip. Nos vemos en el segundo video. 8. Pasos 2, 3 y 4 del proyecto: De acuerdo, segundo video. Entonces, tenemos el archivo zip descargado. Lo tenemos descomprimido. Aquí, te puedo mostrar el contenido de la carpeta, y de nuevo, ves que replica exactamente lo que estás viendo aquí en GitHub. Ahí está la carpeta de documentación, aquí está la carpeta de ejemplos, así sucesivamente, y así sucesivamente. Nuevamente, esto es lo que nos interesa totalmente, es el hype.pde. Entonces, ahora, en cuanto a los pasos del proyecto que están viendo aquí en la página web de Skillshare, vamos a cubrir en este punto, dos, tres y cuatro. Ahora, en la sección dos de los pasos del proyecto, simplemente dice básicamente, hey, cavar alrededor de esta carpeta de puesta en escena HYPE y simplemente familiarizarse con algunas de las cosas que hay aquí. Dos cosas que son de gran interés: obviamente, el hype.pde, te dije que vamos a usar eso en todos nuestros proyectos, pero luego, esta carpeta ejemplos. Esta carpeta de ejemplos tiene más ejemplos de los que realmente tengo en el sitio web por un par de razones. El sitio web publica los bocetos a Processing.js, por lo que se ejecuta en el objeto Canvas HTML5. No todo aquí está apoyado por Processing.js. Entonces, hay algunos ejemplos que nunca puedo poner en el sitio web porque simplemente no funcionarán en el navegador. Ahora, algunas otras cosas que debes tomar en consideración al mirar esta carpeta de ejemplos, y hablé de ello un poco en el paso del proyecto. Por ejemplo, si voy a Enjambre, te darás cuenta de que te doy, en realidad cambiemos eso. Digamos, HoscilLator, porque sé que HoscilLator tiene muchos ejemplos en él. HoscilLator, verás que hay 14 ejemplos. Por lo general, los primeros, ejemplo uno, es el ejemplo de huesos más desnudos. Significa que no he introducido muchas otras cosas, acabo de montar un ejemplo que simplemente ilustra lo que hace HoscilLator. No obstante, todas estas clases en realidad pueden trabajar juntas. Entonces, por ejemplo, en esta clase, vamos a cubrir un diseño de cuadrícula, donde se puede mezclar un diseño de cuadrícula con ColorPool, con un Oscillator, con HPath. Por lo tanto, se pueden combinar aspectos de HYPE en una sola carpeta. Entonces, el primer ejemplo aquí, ejemplo uno, si en realidad fuera a publicar esto, nuevo, es sólo mostrarte qué es la oscilación. Es una ola, es una forma de describir una ola. A medida que navegues hacia abajo por los proyectos de ejemplo, se van a poner más robustos. Entonces, por ejemplo, esta es sólo 50 líneas de código. Si fuera a saltar al número 14, por ejemplo, se vería el número 14 es 76 líneas de código. No obstante, si en realidad ejecuto esta película, en el caso de esta en particular, en realidad estoy usando 3D. Entonces, estoy oscilando estas cajas 3D. Entonces, solo toma en consideración que la carpeta de ejemplos, generalmente ejemplo uno o los ejemplos hacia arriba, son la expresión más simple de esa clase en particular que estás mirando. A medida que voy abajo, les doy algunas ideas de sugerencia para mezclar y emparejar las clases posibles juntas. Entonces, por todos los medios, echa un vistazo a la carpeta de ejemplos, porque ahí hay un montón de cosas que, de nuevo, no están representadas en la página web. Ahora, una cosa con la que tal vez quieras empezar es esta carpeta en particular que aquí mismo se llama H_BASICS. H_BASICS intenta documentar los fundamentos esenciales para trabajar con HYPE. Entonces, ¿qué es el método encadenamiento? ¿ Cómo dibujo formas? ¿ Cómo defino dónde está una posición de anclaje? ¿ Cómo roto alrededor de un ancla? ¿ Cómo adjunto imágenes? ¿ Cómo adjunto SVG? Entonces, H_BASICS es realmente la carpeta de inicio, donde te estoy dando algunas de las cosas que, oye, fin de realmente ponerte rocking, estas son las cosas que realmente debes digerir primero. Entonces, fuera de la carpeta de ejemplos, hype.pde realmente es el archivo que vamos a usar en todos nuestros bocetos. Ahora, ya verás en el proyecto, los pasos número tres hablan de cómo vamos a crear nuestra estructura de carpetas. Entonces, por ejemplo, podría crear un nuevo documento, y luego, digamos que este documento se llama proyecto 1, y en eso, voy a crear una nueva carpeta llamada build. Dentro de esa carpeta de compilación, voy a copiar hype.pde. Si abriera Sublime Text 2 y cambiara esto a Procesamiento y haga clic en guardar, iría a mi escritorio, iría al proyecto 1, iría a construir, y llamaría a esto build.pde. Ahora bien, no voy a escribir ningún código, pero te estoy mostrando la estructura que dentro de esta carpeta de compilación es tu build.pde y hype.pde. Ahora bien, ¿qué es hype.pde? Voy a hablar un poco del proyecto paso cuatro aquí en un segundo. De qué es hype.pde, de hecho, si intentas abrir esto en Sublime Text 2, notarás que vamos a estar esperando un poco. hype.pde contiene cada línea de código dentro del universo HYPE. Entonces, ¿qué es el universo HYPE? Por ejemplo, si miras la carpeta pde, estas son todas las diferentes clases que tenemos. Ahora, echa un vistazo a esto. ¿ Ver? Todo está en una línea, y en realidad, si solo fueras [inaudible], estarías ahí para siempre. Entonces, hype.pde es en realidad cada uno de estos 53 archivos pde, pero con todos los retornos duros despojados y minificados en una sola línea. Entonces, este es el universo HYPE. Entonces, por ejemplo, digamos, hablamos de HosSillation. Si abres Hoscillator.pde, este es en realidad el código que contiene todas las instrucciones que se ocupa de cualquier tipo de oscilación que te gustaría usar en uno de tus proyectos. Entonces, solo sucede que este único archivo de aquí mismo, que es de 244 líneas de código, es, se todas las pestañas, se quitan todos los retornos duros, y está enterrado en algún lugar de hype.pde. Entonces, de nuevo, solo reiterando, hype.pde es cada uno de estos pdes individuales colocados en un solo archivo. Entonces, a medida que agregamos nuevas clases, agregamos a hype.pde. Quizás quieras seguir revisando al sitio de GitHub, tal vez quieras escuchar en Twitter para ver si anuncio alguna nueva clase que hayamos escrito, porque de ser así, hype.pde se actualizará. Ahora, paso cuatro en la clase Skillshare, JAR versus pde. ¿ Qué rayos significa eso? Hay muchas bibliotecas externas que puedes usar con Processing. El problema es que no se puede usar una biblioteca externa y salir a JavaScript usando Processing.js. No se puede usar ninguna biblioteca externa que esté empaquetada como un archivo JAR, y no se puede emitir a Processing.js, lo que significa, toda esa funcionalidad de poder emitir a HTML5, poder verlo en mi iPhone, poder verlo en un iPad, todo eso se tira por la ventana cuando realmente construyes la biblioteca como un archivo JAR. Entonces, por eso hemos decidido hacer de HYPE un montón de archivos pde. Al hacerlos archivos pde significa que podemos publicar en HTML5, podemos publicar en Processing.js. Ahora, tal vez te estés preguntando, bueno, ¿cómo publico en Processing.js? Entonces, si realmente inicias Processing 2 aquí, notarás que aquí arriba en la esquina superior derecha, dice Java, y ese es el único modo que hay. Pero puedes hacer clic en Agregar modo, y conseguirías este pequeño gestor de modos, y te darás cuenta aquí mismo, el modo JavaScript. Si realmente haces clic en Instalar, se va a descargar el modo JavaScript en Processing 2. Entonces, ahora, si realmente cierro esto, puedo escribir un montón de código, puedo publicar en Java cuando hago clic en Ejecutar. ¿ Sabes qué? Podría tener que reiniciar. Procesando 2, y ahora, tenemos JavaScript. Si realmente haces clic en JavaScript, ahora, realidad podrías abrir tus bocetos y hacer clic en Construir. En realidad empaquetará todos los archivos para su uso en un navegador web. Generará el HTML, escupirá el JavaScript, y ahora, muchos de estos bocetos que hacemos, realidad podemos cargar y ver en un navegador. Entonces, proyecto pasos dos, tres y cuatro, hablamos de mirar el archivo zip, digerir todo el contenido ahí, muchas cosas buenas, muchos buenos ejemplos. Proyecto paso tres, localice hype.pde. Recuerda la estructura de carpetas que vamos a usar porque vamos a usar esa estructura de carpetas en cada uno de nuestros proyectos. JAR versus pde. No quiero usar un archivo JAR, quiero usar pde para que realmente puedas publicar en la web. Ahora, en el siguiente video, vamos a hablar de HYPE, y específicamente, vamos a hablar de qué es Fluid Interface y qué es el encadenamiento del método, porque estos son conceptos que en realidad forman parte de la fundación de HYPE. Entonces, en el siguiente video, vamos a hablar de lo ocurrido en la versión AS3 de HYPE, y lo que ha sucedido en la versión Processing en HYPE. Nos vemos en el siguiente video. 9. Java frente a JavaScript: Cambié de opinión. Antes de pasar a la siguiente sección, solo quiero mostrar muy rápidamente el escenario Java versus JavaScript. Estábamos mirando a HoscilLator y si realmente abres el ejemplo uno, en Sublime Text 2 por ejemplo, aquí está el código. Y si hago clic en “Construir”, en realidad estoy viendo este contenido en Java. De acuerdo, así que esto es Java corriendo justo aquí, de acuerdo. Ahora, si tuviera que tomar ese mismo archivo exacto, ejemplo uno y en realidad abrirlo en el procesamiento dos, vale. Se puede ver a los dos editores aquí, ¿verdad? Estos son ambos idénticos, y de nuevo tengo a Java seleccionado en la esquina superior derecha. Si en realidad me golpearon “Click” y ejecutar esto, vale, fuera de procesar dos. Nuevamente, estos dos son idénticos, los estás ejecutando en el modo de Java. Está bien. No obstante, si ahora cierro esto, y corro aquí al modo y cambio a JavaScript, está bien. Quiero que veas esta carpeta aquí. El hecho de que cambie a JavaScript, agregué un archivo sketch.properties, y cuando en realidad hago clic en “Ejecutar”, lo que notarás es, es que en realidad lo publica en la web. Te darás cuenta de que se ha hecho un nuevo archivo llamado web-export. Contiene el index.html, contiene el archivo PDE que está realizando esta animación, y procesando JS que está interpretando tu archivo PDE para que se ejecute en lienzo en HTML5. Entonces mira, estos dos son absolutamente idénticos. El que se ejecuta en Java y el que se ejecuta en el navegador, el rendimiento es el mismo. Entonces de nuevo, esa es solo una de las razones por las que decidimos no crear Hype usando el formato JAR. Decidimos utilizar el formato PDE para que pudiéramos aprovechar para poder publicar nuestro contenido a JavaScript. De acuerdo, nos vemos en el siguiente video. 10. HYPE AS3 / Paso 5 del proyecto: Lo que quiero hacer ahora es realmente mirar cómo la versión anterior de Hype se estructuró en realidad cuando estás escribiendo código. Ahora, la versión antigua de bombo fue desarrollada para Flash y ActionScript 3. Fue un fantástico proyecto conjunto entre un buen amigo mío Brandon Hall y yo. Realizó el mismo servicio que es, quiero hacer cosas y esas cosas se pueden empaquetar en clases separadas para hacer la vida más fácil. Entonces, va a ser útil ver cómo se construyó la versión antigua de Hype porque te dará alguna idea de las salidas que tomamos cuando fuimos a hacer el puerto de procesamiento. Entonces, imagina por un momento que queremos dibujar una cuadrícula en pantalla. En la versión Hype AS3, podría hacer algo como esto donde diría var NumasSets es un entero igual a 25. Entonces, esa es una variable que representa el número de cosas que quiero tocar en pantalla. Ahora, teníamos un GridLayout en la versión de AS3 y lo bonito del GridLayout es que podrías llamar a GridLayout, pasarle algunos argumentos y que esos argumentos serían información en cómo construir visualmente la cuadrícula en pantalla. Entonces, para hacer eso, podría escribir algo como esto donde diría, var layout es un GridLayout igual a nuevo GridLayout. Entonces, podrías ver en algunos de mis ejemplos, algunos números se pasan a GridLayout. Entonces, podría ser algo así como 50,50,100,100,5. Ahora, probablemente la mayor queja con este código es que no tendrías idea de lo que representaban esos números. No hay ni idea de lo que es 50, 50, 100, 5. En realidad tendrías que abrir la clase GridLayout, mirar la función y luego ver cuáles son esos argumentos y qué establecen. Entonces, eso significaba que en todos los ejemplos, tendría que poner un comentario diciéndole a la gente cuáles eran esos cinco argumentos. Entonces, termina que los argumentos o xStart, yStart , xSpacing, ySpacing y columnas. Ahora, ya que estamos construyendo una cuadrícula en pantalla, los dos primeros argumentos fueron, ¿ dónde quieres que esa grilla en su totalidad exista en pantalla? Entonces, yo diría: “Está bien, bueno, quiero que sean 50 píxeles, empiecen en 50 píxeles en el eje x, comiencen en 50 píxeles en el eje y. Los dos argumentos siguientes, XSpacing e YSpacing definirían el espaciado entre cada una de las celdas de la cuadrícula. Entonces, comenzaría a adjuntar el primer ítem y luego 100 pixeles más tarde adjuntaría el segundo ítem. Ahora, el último argumento son las columnas. Entonces, en este caso, estamos construyendo una cuadrícula que contiene 25 activos, y así si tomas 25 divididos por cinco obtienes cinco. Entonces, sabe que va a hacer una cuadrícula de cinco por cinco al tomar 25 divididos por columnas. Entonces, ese quinto argumento describiría el número de columnas que se encuentran dentro de este grupo. Entonces, creo que mirar esto te da alguna idea de cómo tomamos una salida cuando decidimos hacer el puerto de procesamiento de Hype. Entonces, en el siguiente video, vamos a recoger la misma estructura exacta pero vamos a mostrar cómo es diferente en el proceso importante. 11. Procesamiento de HYPE / Paso 6 del proyecto: De acuerdo, entonces ahora estamos abordando el paso seis en la guía del proyecto, y esto realmente está abordando lo que cambió en el puerto de procesamiento de HYPE. Ahora, la versión HYPE AS3, gran proyecto entre Brandon Hall y yo. No obstante, cuando decidí irme trabajando en Flash como herramienta de desarrollo, y realmente quería pasar al procesamiento, y tener este deseo portar la versión HYPE AS3 al entorno de procesamiento, fue una oportunidad para que realmente aborde algunas de las cosas de cómo se estructuró el código solo para facilitármelo a mí y a otros. Entonces, el puerto de procesamiento es un proyecto entre yo y un caballero maravilloso en Manila, Filipinas, James Cruz. Nuevamente, empezamos a mirar los casos de éxito en la comunidad de programación y estaba ahí cualquier cosa que fuera beneficioso en la comunidad de programación que pudiera hacer que el puerto de procesamiento de HYPE fuera mejor de lo que era antes. Con eso dicho, esta idea de Fluent Interface, y este uso del encadenamiento de Método redefiniría cómo el puerto de procesamiento de HYPE es fundamentalmente diferente. ¿ De acuerdo? De verdad, esta fue una oportunidad para que miráramos a la comunidad jQuery y dijéramos “Sí, este es el camino a seguir”. Ahora, estos enlaces se han proporcionado en los pasos del proyecto para que puedas leer sobre la interfaz fluida, puedes leer sobre el encadenamiento de métodos. Pero, solo veamos lo que hicimos en los días HYPE AS3 y cómo ha cambiado ese código en el puerto de procesamiento. Entonces, digamos que aquí abro un nuevo documento, obviamente voy a establecer el procesamiento como mi idioma y luego solo voy a pegar el código inicial de los días AS3. Var NumasSets 25, var GridLayout, y luego hablamos de esa línea dos, que hay que poner en el comentario para que puedas dar alguna instrucción a cuáles son esos argumentos. Ahora bien, lo que la interfaz fluida y el encadenamiento de métodos nos permite hacer es, en realidad escribir este código un poco más elegantemente. Entonces, digamos sólo que este es el procesamiento HYPE. Está bien. Si tuviera que escribir ese mismo código pero en el puerto de procesamiento HYPE, probablemente haría algo como esto, enteros NumasSets equivale a 25, ¿de acuerdo? Entonces, eso está escrito un poco diferente pero todavía hace lo mismo. Estoy creando una variable que va a representar el número de cosas que quiero dibujar en pantalla. Ahora, si recuerdas, necesitamos llamar a la clase de diseño de cuadrícula. Entonces, voy a seguir adelante y decir, hgridLayout, layout es igual a nuevo HgridLayout, así. Ahora, hablemos de esto. En cualquier momento que estés usando llamadas específicas de HYPE, la mayoría de los métodos van a ir precedidos de un H. Así que, HColorPool, HgridLayout, Hoscillator, por lo que es solo una forma de identificar lo que es el código de procesamiento regular y qué del código de procesamiento específico HYPE. Entonces, aquí estoy creando una variable llamada Layout, estoy lanzando como HgridLayout y estoy diciendo que es un nuevo HgridLayout. Ahora, en este punto, puede que estés pensando, “Oh, sí, Josh va a poner un montón de números ahí”. No, no lo soy. En realidad voy a definir las variables un poco diferente. Entonces, lo que voy a hacer es, es en la siguiente línea voy a decir: “Oye, Layout, solo quiero que sepas que tienes esta variable llamada inicio X y eso va a ser igual a 50”. ¿ De acuerdo? Si fuera a copiar y pegar esto y luego cambiar esto para empezar Y 50, podría decir el espaciado de puntos de diseño, ¿de acuerdo? Arriba en la parte superior, era espaciado X y espaciado Y. En la versión de procesamiento de HYPE solo voy a decir espaciado de puntos de diseño, y luego voy a decir 100 en la X, 100 en la Y, y en el último argumento, voy a seguir adelante y decir: “Hey layout las columnas son cinco”. ¿ De acuerdo? Entonces, este código ahora conceptualmente es un duplicado de lo que va a hacer la versión AS3 en cuanto a llamar a una clase y pasarle algunos argumentos. Ahora, puede que te estés diciendo a ti mismo. “ Wow, ok, eso es mucho más código que el de arriba”. El de arriba solo lo tienes en tres líneas, pero en realidad podemos hacer esto más corto mostrándote qué método es el encadenamiento. Pero, antes de hacer la versión de encadenamiento del método, solo hablemos de algunas cosas. Una es, ya no necesitas poner un comentario porque en realidad estás llamando a lo que es que estás estableciendo. Entonces, estás diciendo: “Oye, diseño punto inicio número X”. Entonces, obviamente, la línea 12 está estableciendo la posición de inicio X. Entonces, estructurar el código de esta manera significa que estás poniendo identificadores a lo que realmente son los números. Lo cual creo, hace que esto sea mucho más útil para principiantes. No sólo eso, sino que se podría decir que se quería definir el inicio X aquí, no tiene que ser este orden rígido arriba. Recuerda, te dije que el primer argumento era siempre X inicio, el segundo argumento fue siempre Y inicio. Entonces, tenía que ser en ese orden. Al desarrollar el código de esta manera, puede especificar en cualquier orden que realmente desee, y termina por que cada clase realmente tiene alguna configuración predeterminada. Entonces, si realmente decidiste no escribir X start, Y start, y realmente ejecutabas el código, en realidad funcionaría porque la clase misma tiene algunos números iniciales para iniciar X y empezar Y. Entonces, en mi opinión, esta es una gran adición nueva a HYPE. Esta idea de ayudar al principiante entender qué son los números asociados a cada clase. Ahora, volvamos a, “Josh, arriba son sólo dos líneas de código y obviamente, esto es mucho más”. El interesante es, es que podemos hacer este método encadenado. Entonces, si quieres, podrías escribir el código de esta manera. No obstante, también se podría escribir el código de esta manera que es, se podría decir, numasSets enteros es igual a 25, y luego se podría decir, HgridLayout equivale a nuevo GridLayout y luego después de hacer la paren abierta cerrando, se podría decir punto inicio X, entonces podrías decir punto inicio Y, luego podrías decir espaciado de puntos, y luego puedes terminarlo con columnas de puntos. Entonces, ese es método encadenar donde estás llamando a un método y luego encadenando cada uno de los argumentos que quieres pasar ese método después de él. Entonces, ahora volvemos a usar dos líneas de código, ¿de acuerdo? Entonces, estás diciendo: “Oye, quiero hacer un diseño, y puntear esto, puntear esto, puntear esto, puntear esto”, y podrías simplemente seguir adelante. Entonces, esta idea de usar método encadenado, de nuevo, podrías poner esto en cualquier orden o podrías hacer espaciado primero, luego iniciar X e iniciar Y, puedes reorganizar cómo los escribes. No es tan rígido como el de arriba. Ahora, en muchos de mis ejemplos, podrías ver algo como esto, donde en realidad empiezo con el código de esta manera, pero en realidad hago esto que es, pondré el punto y coma de cierre en su propia línea al final, y luego podría hacer duro retorno, tab, tab, solo estoy poniendo en retornos duros y pestañas solo para limpiar el código, que el argumento sea solo son un poco más fáciles de leer. No obstante, los tres funcionarán, y los tres están haciendo exactamente lo mismo. Entonces, de nuevo, podrías hacerlo de esta manera, donde llamas a diseño y luego dices argumento de punto de diseño, argumento de punto de diseño, argumento de punto de diseño, o podrías hacer el método encadenando forma de escribirlo, donde estás llamando y luego encadenar los argumentos después. Esto obviamente, es exactamente lo mismo excepto que pongo en retornos duros y pestañas para que pueda simplemente mirar visualmente el código un poco más fácil. Vas a ver como con algunas clases como HoscilLator, realidad puedes especificar muchos argumentos en HoscilLator, y si tiene muchos argumentos, esa línea 20 podría ser realmente larga. Tanto tiempo que quizá no vea lo que hay al final. Entonces, hacer la línea 24 al 30 que encontrarás es lo que hago a menudo, solo porque hace que sea un poco más fácil mirar visualmente todos los argumentos que estoy pasando al HgridLayout. Está bien. En este punto, hemos hecho la sección uno que es configuración del entorno. Ahora estamos terminando la sección dos, que es sólo una introducción a lo que es HYPE para su procesamiento y lo que, nuevo, es toda una biblioteca de cosas que hacen las cosas. Entonces, que si quieres trabajar con color, tenemos una piscina de colores. Si quieres trabajar con rejillas, tenemos un diseño de cuadrícula. Entonces, es una serie de clases que te ayudan a hacer las cosas de forma más rápida y eficiente para que no estés teniendo que escribir este código de nuevo. Ahora, vamos a pasar a la sección tres. La sección tres es, dibujando activos visuales. De hecho, en realidad no vamos a empezar a escribir código real para nuestro proyecto hasta el paso cuatro, donde realmente estamos pintando a la pantalla. Entonces, paso tres es, vamos a dibujar nuestros activos visuales. Entonces, vamos a alternar para dibujar algunas obras de arte. ¿ Cómo preparamos esa obra de arte? Entonces vamos a guardar esa obra de arte a un lado porque cuando vamos a pasar a la sección cuatro pintura a la pantalla, tenemos algunos bancos de obras de arte con las que realmente podemos empezar a pintar. Entonces, sección dos, solo una visión universal general de lo que es HYPE, cómo va a ser fácil de usar, y a continuación pasemos a dibujar algunos activos visuales. Nos vemos en el siguiente apartado. 12. Introducción: Dibujo de recursos visuales: Entonces dibujando. De verdad, esto no es complicado. Es justo cómo preparamos la obra de arte que vamos a hacer. El tipo de programación que hago, el tipo de programación que vamos a hacer juntos es completamente agnóstico de ilustraciones. Entonces, esta es la parte que se pone realmente emocionante porque el programa va a generar aleatoriamente una composición basada en el tipo de obra que crees. Obtuve esto cuando estuve en Malasia, y como pensar en esos, no en toda la composición, pero piensa en éstos como activos individuales que podrían ser los dibujos que hacemos que se poblan en la programación que escribimos . Mira esto, estos dos son de Estambul, Turquía, y mira los patrones de estos guerreros. Puedo hacer todo este dibujo, pero puede que lo rompa en seis activos diferentes. Entonces, a veces sólo tengo que inspirarme en un dibujo pero voy a romper ese dibujo en seis activos abstractos diferentes. Específicamente, voy a estar sacándolos de Illustrator a SVG, que son gráficos vectoriales escalables, porque podemos tirar de esos SVG para procesar bastante bellamente y vamos a usar estos dibujos para generar aleatoriamente composiciones. ¿ Quieres hacer algo con gatitos y motosierras? Gatitos y motosierras. 13. Dibujo de recursos visuales: De acuerdo, bienvenido a la sección tres, Dibujo de Activos Visuales. En esta sección, vamos a hablar de mapeo de ilustraciones a la programación que escribimos. Entonces, este ha sido mi tipo de pensamiento desde hace años y años y años. Hay gente que utiliza sólo código para dibujar los activos visuales. Entonces, por ejemplo, hay un enorme grupo de personas que simplemente dibujan con rectángulos, líneas y elipses y eso está bien. Pero el procesamiento, obviamente, soporta trabajar con imágenes, también soporta trabajar con SVG, Scalable Vector Graphics. Entonces, lo que quiero hacer es realmente dibujar activos base vectorial que voy a mapear en estos programas que vamos a escribir. Entonces, por ejemplo, el diseño de cuadrícula. ¿ Por qué no hacemos una cuadrícula, pero esa cuadrícula es en realidad activos visualmente dibujados a mano? Entonces, ahora mismo estás viendo algunas cosas en pantalla que voy a pasar algún tiempo dibujando. Yo soy un fenómeno total a la hora de cazar estética y contenidos culturales. Podríamos pasar toda esta clase solo mirando cosas que he recogido en todo el mundo. Entonces, por ejemplo, echemos un vistazo a esto. Aquí te dejamos un gramo de libro 4000 Motivos de Flor y Planta. De nuevo, esto se acaba de llenar con diferentes motivos vegetales. Para mí, esto podría ser un inicio de una salida, un inicio de inspiración, o tal vez hay cosas aquí dentro que van a funcionar perfectamente tal como está. Entonces, colecciono muchos libros que estoy constantemente cazando inspiración. Pero a veces, me siento con un cuaderno de bocetos y trabajo ideas en papel. Entonces, hay un motivo floral que acabo de dibujar en papel. A lo mejor me siento y dibujo las plantas de la casa que hay en mi casa. Y de nuevo, busco forma, busco forma, busco textura. A lo mejor me siento y acabo de hacer unas calaveras de azúcar, y así, estas son algunas. En un principio, me tatué pero el tipo inicial de planeación era simplemente bosquejar sobre papel. A veces, solo estoy pensando en formas geométricas. Entonces a veces me siento y solo estoy pensando en algunas formas geométricas. O incluso podrías salir afuera, y esto es de arquitectura, entonces, hay una tasa de toldos de ventana aquí, el número de edificio era 314. Estos son marcos de una ventana, y éste tenía un letrero. En ocasiones, solo estoy obteniendo formas a partir de una visión abstracta de la vida justa a mi alrededor, en el caso de que esto sea arquitectura. Pasé un gran viaje en Estambul, Turquía. Entonces el último proyecto que hice se basó en estos guerreros que terminé comprando en Estambul, y simplemente una especie de re-imaginar algunas de estas formas de estos guerreros. De nuevo, estoy pensando en ellos de manera abstracta. Entonces, puedo dibujar una composición entera, sólo para rasgarla en especie individual de partes abstractas. Entonces, ahora mismo, deberías ver algunas cosas en pantalla. Esto en realidad es de un libro que alguien me envió sabiendo que iba a enloquecer, Ornamento Nacional de Mongolia. Entonces, el escaneo que estás viendo en pantalla es en realidad de este libro, y obviamente, lo he perdido. Este solo son plátanos. Algunas de las cosas que hay aquí, de nuevo, es solo un comienzo interesante para una conversación. Pero es un misterio, es un misterio. Tengo que advertirle, no tengo idea de si esto va a funcionar. Creo que va a funcionar. Ya he hecho esto lo suficiente para saber que creo que esto va a funcionar. Pero muchas veces, me siento y dibujo cosas con la única intención de que lo voy a mapear a un programa, y visualmente no funciona. Entonces, hay ese tipo de juicio y error. Esta página para mí es bastante segura. Es lo que estás viendo en pantalla ahora mismo. Creo que esto va a funcionar bastante bien. Entonces, lo he escaneado a 150 DPI, y ahora voy a pasar por el proceso de dibujarlo. Yo quiero vectorizarlo, y por supuesto, hay muchas herramientas por ahí para crear vectores. Lo creas o no, en realidad voy a dibujar esto usando flash, y hay un montón de razones por las que. En realidad me gusta dibujar en Flash, porque es lo más cercano a la mano alzada que puedo conseguir. Y inicialmente, yo era usuario a mano alzada. Me gusta esta idea de poder dibujar líneas vectoriales y cosas para luego cortar. Entonces, cada vez que una línea realmente se cruza, en realidad puedo esculpir o cortar esas secciones, solo seleccionando y borrando. Entonces, algo que Illustrator durante mucho tiempo no apoyó. Ahora, lo soporta con pintura en vivo, realidad se puede convertir algo en pintura viva y luego se puede pasar por el proceso de esculpir. No obstante, Illustrator también es, para mí, como una herramienta vectorial increíble, casi demasiado increíble. Flash, de muchas maneras, no es increíble. Eso me gusta. A mí me gusta la distorsión que Flash me consigue. Entonces, vas a ver en este siguiente video, probablemente voy a hacer una cosa de lapso de tiempo, o me vas a ver dibujar muy rápido para que veas como vector arriba una de estas piezas. Pero lo que me encanta del flash es eso, voy a usar la herramienta lápiz y voy a usar una tableta Wacom, y las líneas no son perfectas. Se puede ver como voy a dibujar una línea y van a ser mucha distorsión en la línea, y en realidad eso me gusta. A mí me gusta que no sea perfecto, porque le da más de esta sensación de dibujo de mano a ella. Hablé mucho de discos. Todavía tengo un tocadiscos aquí en el estudio, tengo discos colgando aquí arriba. Y en realidad hay una calidez analógica para los registros, ese audio digital simplemente nunca tendrá. Es decir, podemos tener este argumento pero esa es la verdad. A mí me gusta que tengo este proceso realmente técnico para generar la composición con programación, pero es usar activos que no son perfectos. Están usando activos que están dibujados a mano. Si quiero hacer un círculo, veces dibujaré ese círculo a mano, para que ese círculo no sea un círculo perfecto. No me gusta usar la herramienta de lápiz para hacer curvas bezier perfectas, está demasiado limpio para mí. A mí me gusta la distorsión, me gusta que se sacuda la mano, me gusta ese tipo de, es simétrico pero es dibujado a mano, y luego tomar esos activos dibujados a mano y ponerlos en una situación muy prístina y ordenada, como programación. Entonces, siguiente video me voy a pasar a la tableta Wacom. Probablemente no voy a tener audio encendido. Entonces, la pantalla que estás viendo en este momento es una antigua de Wacom, y voy a estar usando eso para dibujar. Además, recojo esto que es genial, y es un guante que está hecho específicamente para trabajar en esta antigüedad, porque esta antigüedad es un monitor y se calienta. Lo que pasará, es que mi mano tenderá a pegarse. Entonces, lo que es bonito es, es que esto me permite hacer curvas sin que tenga que preocuparme de que mi mano se pegue a la pantalla. Entonces, si eres usuario de Wacom, recomiendo encarecidamente el guante, el guante de poder, porque puedes conseguir estas bonitas curvas fluidas sin que tu mano se pegue realmente a la superficie. Ya sea esta antigua o incluso si es solo una tableta Wacom regular, la capacidad de no pegarse a la superficie y hacer este tipo de bonitas curvas, es súper útil. Entonces, recomiendo el guante. Entonces, siguiente video, sin audio, lapso de tiempo, y vamos a elaborar uno de estos activos. Quiero que veas cómo uso Flash para realmente intersectar y esculpir estos dibujos que voy a hacer. Ahora, voy a terminar este video con, deberías estar pensando ¿qué activos visuales quieres usar para mapear a este entorno? Nuevamente, puede ser floral, puede ser orgánica, puede ser geométrica. Obviamente voy a comprimir algunos activos para que los usen, que puedan ver algunos de los dibujos que hago. Se adjuntarán a los pasos del proyecto como descargas de archivos zip. Pero deberías estar pensando : “Josh nos va a enseñar esta programación, y esta programación quiere adjuntar cosas en pantalla, ¿cuáles son las cosas que se están adjuntando?” Van a ser dibujos los que hagas. Y ahí es donde realmente se va a mostrar la individualidad con todas las cosas enviadas de clase, porque la programación va a estar usando tus activos, programación va a estar usando mis activos, así sucesivamente y así sucesivamente. Entonces, cada pieza debe ser única, porque cada uno de ustedes va a estar mapeando diferentes activos en este entorno. Entonces, mírame dibujar, y piensa en, qué vas a estar haciendo para mapear en este entorno. ¿ De acuerdo? Nos vemos en siguiente video. 14. Dibujo de abstracción: Solo quería tomarme un minuto para mostrar esta imagen en pantalla. Aquí te dejamos un ejemplo perfecto de un punto de partida de inspiración que se abstrae. Entonces, por ejemplo, este es ese viaje a Estambul. Entonces, termino redibujando a este tipo, pero tal vez éste se convierta en uno de mis activos visuales que resulta ser parte de su brazo. Observe que no uso las caras. No quiero usar ningún tipo de imágenes que se vuelvan reconocibles, donde vas “Oh, eso es una cara”. Puedo cambiar, pero trato de mantener mis cosas como abstractas para que no sepas inicialmente tal vez lo que estás mirando. Mira esta forma independiente aquí mismo que pasa a ser una selección de este torso. Entonces, a veces se puede tomar un dibujo y romper ese dibujo en seis activos diferentes, o cinco activos diferentes, o lo que sea. Entonces, ten esto en cuenta, que cuando digo buscar imágenes para convertirse en activos, podría ser una imagen. Entonces esa imagen, podrías separarte en archivos SVG independientes separados. Entonces, de nuevo, esto es sólo un ejemplo rápido de cómo un dibujo o dos dibujos se convierten en mi contenido. Está bien. 15. Dibujo de timelapse: - bien. - Está bien. 16. Preparación final de recursos: Está bien. Por lo que acabas de ver el video anterior que fue un lapso de tiempo de dibujo. Deberías estar viendo en pantalla ahora la obra de arte que dibujamos. Ahora bien, podrías haberte dado cuenta en el lapso de tiempo, realidad empecé a bloquear algún color en el dibujo real que hice. Hago esto porque me ayuda a organizar cómo quiero que las cosas se bloqueen en términos de color. Está bien. Entonces, por ejemplo, como tal vez estas formas particulares aquí mismo, quiero que todas sean del mismo color. Entonces, ya he hecho algún bloqueo inicial en escala de grises. Ahora, necesito sacar esto de Flash y en realidad meterlo en Illustrator para que pueda emitirlo a un archivo SVG. Ahora bien, si no estás dibujando en Flash en absoluto, si solo estás dibujando en Illustrator, entonces obviamente puedes saltarte todo este siguiente conjunto de pasos. Pero lo que voy a hacer en realidad es resaltar el dibujo que acabo de hacer en Flash y luego voy a seguir adelante y decir Archivo, Exportar, Exportar Selección, y cuando diga Exportar Selección, va a querer guardar eso como archivo FXG. De acuerdo, y voy a seguir adelante y sólo poner esto en mi escritorio. Ahora, después de haber hecho eso, puedo seguir adelante y minimizar Flash o puedo cerrarlo, y ya verás aquí en mi escritorio, tengo FMLA y tengo este archivo FXG. Ahora, solo sucede que puedes abrir este FXG dentro de Illustrator, y cuando hago eso, puedo ver que se genera toda la información vectorial. Entonces, déjame solo limpiar este documento, déjame ir a las tablas de arte y haré de esto un ancho de 300 y una altura de 300, y simplemente me centraré, intentaré eso otra vez, Josh. Vuelve a intentarlo, una vez más. Déjame centrar esto así. Está bien. Otra vez si, tuviera que hacer clic en Ver esquema, verías que esto es toda la información vectorial. Está bien. Ahora bien, en lo que quiero que se centren en este punto es en realidad la paleta de capas, porque esto es súper importante. Es posible que notes que hay siete capas dentro de Illustrator, y las capas son en realidad rutas compuestas. Si ocultaras cada una de las capas y las miraras cada una de forma independiente, verías que el agrupamiento, ya ha pasado y está agrupado todos los colores individuales que establecí en Flash. Entonces, eso es importante, como puedes ver aquí todas las formas que hice este particular gris oscuro se han agrupado como un solo camino compuesto. Está bien. Ahora, otra cosa de la que debes tomar nota es que la capa superior generalmente siempre son los datos del trazo. Entonces, los rellenos o en realidad los seis inferiores, la parte superior es esta información de trazo. Ahora, en este punto, puedo seguir adelante y hacer clic en “Guardar como” y puedo guardar esto como documento SVG. Entonces, desde el formato, solo tienes que seleccionar el SVG y voy a seguir adelante y poner esto en mi escritorio y hacer clic en “Guardar”. Obtendrás esta paleta de opciones que se abre, realidad puedes ignorar todas esas cosas y solo tienes que hacer clic en “Ok”. Ahora, voy a cerrar este documento y así ahora tengo un documento SVG en mi escritorio. Entonces, ¿qué es SVG? Bueno, en realidad puedes arrastrar esto a Sublime Text 2, y verías muy rápidamente que un documento SVG es en realidad un archivo de texto. Se trata de un archivo de texto que contiene todos los datos de puntos que conformaron la obra de arte en particular que viste en pantalla. Entonces, de nuevo, súper importante señalar que un SVG es un documento de texto. Está bien. Entonces, lo que he hecho es, en esta sección en particular, sólo estamos hablando de dibujar activos visuales. En el siguiente apartado, vamos a hablar de pintar a la pantalla, cómo pintas cosas a la pantalla, y en la quinta sección, vamos a hablar de trabajar con color. Entonces, es realmente un saber secciones que realmente estoy empezando a hablar de código, pero necesito compartir algún código contigo en este momento y en realidad voy a adjuntar un archivo a este video en particular porque en realidad no hemos terminado de elaborar el obra de arte, porque vas a notar que si acabamos de pasar por esos pasos, la metimos en Illustrator, vamos a notar algunos extraños sucesos. Entonces, mira lo que hice aquí. Creé una carpeta en mi escritorio llamada Mongo 1, creé una carpeta llamada Build. Dentro de Build, como mi build PDE y mi bombo PDE y luego he creado otra carpeta llamada datos, y en realidad es en la carpeta de datos que pones tus activos externos. Entonces, en este caso, aquí está Mongo.SVG. Ahora bien, si fuera a abrir este archivo PDE, he escrito algunas cosas. Está bien. He escrito que quiero que el escenario sea 900 por 900, he especificado el fondo, es un gris claro, en realidad he especificado selección de colores que quiero que este archivo use. Aquí está el blanco, hay tres grises, hay dos azules y hay dos naranjas. Este bloque particular de código aquí mismo maneja la carga y la colocación del archivo SVG externo. He dicho que quiero que el peso del trazo sea 0.5, he dicho que quiero que el color del trazo sea negro. No quiero ningún phil, quiero que el punto de anclaje de la obra esté en el centro. He especificado su ubicación para ser anexada en el centro, lo que ancho dividido por dos, altura dividida por dos. Ahora, la obra de arte es pequeña, así que la puse en una escala tres para que solo fuera un poco más grande. Escala uno obviamente siendo 100%, escala tres siendo 300%. Ahora, la línea 19 es donde realmente corremos a través de la obra de arte y ponemos algo de color a solo los phils. Ahora, solo voy a comentar esto porque en realidad quiero ejecutar este archivo y quiero ver lo que pasa. Ahora, cuando ejecutas este archivo, genial, mira hizo exactamente lo que pensaba que iba a hacer cual es, se cargó en el archivo SVG, lo adjuntó al centro de la pantalla, se ve idéntico como lo hace dentro de el archivo Illustrator. Ahora, no es hasta que empecemos a aplicar color aleatorio que empezamos a notar que necesitamos hacer algo más de preparación dentro de Illustrator. Entonces, voy a seguir adelante y volver a poner este comentario sobre el cual es aplicar color aleatorio a sólo los rellenos. Está bien. Ahora, mira lo que pasa cuando ejecuto este archivo en particular. Cuando ejecuto este archivo, se enloquece. Simplemente no puedo entender lo que está pasando, como si estuviera haciendo algún bloqueo raro aquí, algo realmente funky sucedió en esta sección. Algo no está bien. Está bien. Entonces, en realidad voy a cerrar este archivo y volver al Illustrator. Entonces, si entro en Mongo, entro en Build, entro en mi carpeta de datos, ahí está Mongo.SVG y voy a seguir adelante y abrir esta copia de respaldo en Illustrator. Está bien. Ahora, ahí está mi trama. Abramos la Paleta de Capas, y déjame tratar de explicar esto. Cuando esto se exporta a SVG, ese documento SVG contiene toda la información vectorial para todo el arte que estás viendo en pantalla. Entonces si, y no importa, esa información vectorial no importa si has establecido un relleno o establecido un trazo. Establece un peso de trazo, establece un color de trazo, establece un color de relleno. Olvídate de todo eso. Todo lo que contiene son los puntos para dibujar esta obra de arte. Ahora, la parte que está enloqueciendo en este momento es en realidad la capa superior del trazo. El motivo por el que los trazos están enloqueciendo es porque esta capa superior es solo trazos y cuando cargas esto en el procesamiento y dices: “Oye quiero hacer relleno aleatorio”, piensa, “Oh quieres hacer rellenos en todo el vector información.” Entonces, lo que está haciendo es que está tratando de aplicar color de relleno a esta salida de trazo. Entonces, lo que voy a hacer es basura esa capa. Entonces, todo lo que me queda en mis capas es lo que parece ser solo rellenos. Ahora, si sigo adelante y hago clic en Guardar y déjame simplemente mover esto a lado y volvamos a volver a nuestro código y ahora vamos a ejecutarlo, vamos a ver qué pasa. ¡ Boom! Funciona totalmente como se esperaba porque lo que está haciendo es, está aplicando aleatoriamente color a los rellenos. Pero entonces podrías estar diciendo: “Espera un segundo Josh. ¿ Por qué volvieron los trazos?” Bueno, los trazos volvieron porque especificamos los trazos aquí mismo en la línea 11 y en la línea 12. En la línea 11 y en la línea 12 dijiste: “Oye, estos rellenos que tienes, estos rellenos que tienes que no tienen trazo. Sí, quiero golpes en ellos”. Dame un peso de trazo de 0.5, dame un color de trazo de negro. Entonces, a pesar de que la obra de arte en Illustrator es sólo llena. En realidad estoy aplicando un trazo en esos rellenos, dentro de procesamiento. Entonces, fue esa capa superior la que tenía la información de trazos que empezó a enloquecer porque en realidad estaba tratando de aplicar rellenos aleatorios a ese camino compuesto. Entonces, al eliminarlo, vuelvo a donde quería estar. Ahora, podrías notar que también se aplica el color simétricamente en toda la obra de arte. Está bien. Entonces por ejemplo, esto es azul claro, esto es azul claro, esto es azul claro, y ese mismo azul claro exacto está en éste, en éste, y en éste, está bien. Entonces, déjame seguir adelante y cerrar esto y déjame realmente volver a Illustrator. Ahora, déjame ver ese conjunto particular de colores y en realidad es este camino compuesto justo aquí. Entonces, si yo hiciera eso, ahora estamos viendo todas las ilustraciones que obtuvieron el mismo color exacto. De hecho, porque es solo un camino compuesto, en realidad solo aplica, solo piensa que es una pieza de arte. Entonces, en realidad aplicó un color a lo que piensa es solo una pieza de arte. Entonces, mira lo que pasa cuando llego a Object y digo Camino Compuesto y digo Liberar. Libéralo de ser una forma, cuando la liberé de ser una sola forma, mira lo que pasa con la paleta de capas. Se separó del camino compuesto y ahora está tratando cada una de ellas como piezas independientes de arte. Entonces, ahora si encendiera todos mis otros rellenos aquí. Guarda mi documento SVG, vuelve a mi código y haz clic en Ejecutar, mira lo que sucede. Lo que ahora está haciendo es que diga: “Oh, hombre. Este es un montón de formas independientes así que voy a colorearlas cada una de forma independiente. Ahora, para los colores tengo 1, 2, 3, 4, 5, 6, 7, 8. Tengo ocho colores, así que realmente no tengo tantos colores. Entonces, si miras aquí, parece que escogió el mismo color, pero te puedo decir en este momento esto es FFFF y este es F7F7F7, es ligeramente diferente. Mira, hizo estos dos colores diferentes, hizo estos dos colores diferentes porque esa agrupación como un camino compuesto trataba a esta obra de arte como una sola pieza de arte y así, esa sola pieza de arte acaba de obtener una pieza de colorante. Entonces, si cerrara esto y volviera a Illustrator, te imaginas que si seleccionaba todos estos caminos compuestos, y luego fui a Object, Compuesto Path, y Release, de repente tus capas se va a enloquecer. Porque ahora, cada forma es una obra de arte independiente. Ahora, si hago clic en Guardar, volver a este documento y fuera a ejecutarlo de nuevo, no tendrías ninguna simetría de color en absoluto. Porque piensa que todas estas formas son independientes y como todas estas formas son independientes, todas van a colorearse de manera diferente. Está bien. Entonces, realmente súper importante tener en cuenta mientras estás preparando estos activos visuales porque si el grupo es solo camino compuesto, vas a conseguir esta coloración universal. Si los divides a todos en activos separados, entonces obtienes una situación de color no armoniosa porque piensa que cada una de estas formas son diferentes. Ahora, podrías estar diciendo: “Bueno Josh, ¿cómo rompo todas estas cosas y luego cómo aplico, coloreando dos objeto específico?” Entonces, volvamos al ilustrador y veamos algo. Mira esta forma, esta forma, esta forma, esta forma, esto- woah ahi, whoa. Intentemos eso otra vez. Probemos eso otra vez doblada. Ah, rompí mis caminos compuestos. Intenta eso otra vez Josh. Acabo de liberar el Camino Compuesto porque sí deshiciste. Está bien. Entonces, lo que estoy haciendo es seleccionar, así. Entonces ahora, en realidad aquí dentro, puedo simplemente hacerlo así? Sí, ahí vamos, mucho mejor, esto es mucho más fácil. Está bien. Ups. Aquí vamos. En realidad hay dos formas separadas aquí que no estaba consiguiendo. Está bien. Entonces, lo que hice fue, es que uso la Herramienta de Selección solo para seleccionar todas las ilustraciones que me interesan. Entonces, si miramos aquí en la Paleta de Capas, se destacan un montón de cosas. Ahora, todo lo que voy a hacer es agruparlos. Si hago Comando G y agrupar esto todo como una sola pieza de arte. Adelante y haz clic en Guardar , vuelve a mi código y ejecútalo. Ahora notarás que se aplicó un color a las ocho de esas formas. ¿ Verdad? Entonces, naranja, naranja, naranja, naranja, naranja, naranja, naranja, naranja, naranja, naranja, naranja. Entonces, súper importante tomar en consideración mientras estás preparando tus activos visuales, es que si todas las formas son independientes, colorearán de forma independiente. Si comienzas a agrupar las cosas, así por ejemplo, si estuvieras haciendo una cara y las partes internas de los ojos fueran activos separados conseguirías a David Bowie. Te pondrías azul, te pondrías verde, conseguirías a David Bowie. Podría ser bueno. A lo mejor quieres a David Bowie. Si los agrupa, obtendrás el mismo color en ambos ojos. Está bien. Entonces, solo recuerda esto, cuando estés preparando tus activos visuales, que mantengan las cosas separadas, todo el color va a estar separado. Pero debido a que me gusta algo de armonía para mantenerse consistente a través de mi aleatorización, en realidad hago este agrupamiento de formas. Entonces, de esa manera sé que cuando se ejecuta el código y se aplica el color, todos esos van a obtener el mismo color exacto en todos ellos. Esta sección está hecha, en realidad vamos a empezar a escribir algún código ahora. Doloroso pero cierto. Entonces, vamos a pasar a pintar a la pantalla y vamos a empezar a hablar de cómo empezar a escribir algún código simple. No empezaremos a adjuntar SVG justo al principio. Empezaremos con elipses y rectángulos y luego eventualmente, pasaremos a adjuntar SVG. Nos vemos en el siguiente video. 17. Introducción: De la pintura a la pantalla: En la última sección, hablamos de hacer dibujos y preparar esos dibujos. En esta sección en particular, quiero hablar de pintura a pantalla y cómo pintamos objetos a pantalla. Yo vengo de Flash. Pasé como 10 años trabajando en Flash, y es lo suficientemente diferente que debamos pasar una sección hablando de ello. ¿ Cómo dibujamos realmente las cosas a la pantalla porque es muy diferente a cómo solíamos dibujar cosas para pantalla en el entorno Flash? No sólo eso, sino que el procesamiento tiene algunas limitaciones en cuanto a cómo dibujamos las cosas a la pantalla. Entonces, de nuevo, un gran momento para introducir cómo realmente pintamos cosas a pantalla usando el Marco HYPE. Hacer cosas como HRectangle, Hellipse, hShape, hImage. Haciendo algunas cosas en 3D como HBox y HSphere. Entonces, realmente vamos a sumergirnos en cómo hacemos estas cosas y luego cómo las pintamos realmente para pantalla y lo que realmente está pasando cuando estás pintando a pantalla. 18. Fundamentos / Línea y Rectángulo: ¿ Estás listo para rockear? Sí, estoy listo para rockear. Estamos en la sección cuatro, pintando a la pantalla. Aquí es donde sólo vamos a elaborar algunos conceptos básicos, vamos a escribir un poco de código, y vamos a entender cómo funciona el procesamiento, por qué estamos frustrados con algunos aspectos del mismo, e introducir la altura. Entonces, solo escribamos un poco de código básico para los principiantes, para que empieces. Ahora, voy a crear una nueva carpeta. Llamemos a esta carpeta Fundamentos. Dentro de Basics, voy a hacer una nueva carpeta llamada Paso uno. Dentro del Paso uno, voy a hacer una carpeta llamada Build, y luego abriré Sublime Two, voy a cambiar esto para ser, digamos, Guardar, Escritorio, Fundamentos, Paso uno, Construir, y llamemos a esto build.pde. Cuando hago eso, el lado inferior derecho debería cambiar a Procesamiento. Ahora, para empezar, voy a hacer que escribamos cinco archivos diferentes. Entonces, te darás cuenta aquí que, solo tomemos a este tipo, y notemos que, vamos a hacer Básicos, Paso uno, Construir, build.pde. build.pde es donde vamos a escribir todo nuestro código. Vamos a trabajar en cinco expedientes ahora mismo. Entonces, mira lo que voy a hacer. Sólo voy a mantener presionada la tecla Opción, o la tecla Alt, y solo voy a hacer clic y arrastrar, hay paso dos, paso tres, paso cuatro, paso cinco. Vamos a trabajar en cinco archivos diferentes. El bonito es que en cada uno de estos es Build, y build.pde. Entonces, tenemos esta estructura base pasando, lo cual es bonito. Está bien. Entonces, déjame solo tirar esto en la esquina inferior derecha. Sigamos adelante y escribamos nuestro primer archivo de procesamiento. Ahora, esto es como el ejercicio Hello World para cada documento de procesamiento. Lo que vas a hacer es, vas a teclear configuración void, abrir paren, cerrar paren, y simplemente vamos a hacer una línea. Entonces digamos, línea, comenzaremos en 25 en el eje x, 25 en el eje y. Entonces, ese es el primer punto de la línea, y ahora queremos dibujar el segundo punto de la línea, y el segundo punto de la línea será 75 en el eje x, y 75 en el eje y. y coma y terminamos. Entonces, si realmente guardo este documento, y luego presiono Command R to Build, lo que debes notar es que Java comienza, y lo suficientemente seguro, ahí está nuestro primer boceto. Entonces, especificamos los dos primeros puntos, x e y, 25, 25, y el segundo punto 75, 75, y debido a que especificamos línea, simplemente dibujó una línea entre esos dos puntos, que fueron especificados. Está bien. Entonces, bien. Hemos hecho nuestro primer boceto. Entonces, voy a seguir adelante y cerrar este documento, y voy a avanzar en el paso dos. Ve al paso dos, va a abrir build.pde. Encontremos algunas formas de hacer que escribir este código sea un poco más rápido. Entonces, dentro de Sublime Two, puedes escribir S E T, y notarás que la configuración se resalta. Entonces, si solo sigo adelante y presiono Enter, automáticamente escupe todo el código que acabamos de escribir en nuestro archivo anterior. Ahora, cuando escribas setup , te dará dos funciones, configurar y dibujar. La configuración se ejecuta una vez. Es donde configuras toda tu información, como num assets equivale a 100. Es donde especificas todas tus cosas preparatorias como variables, y así sucesivamente y así sucesivamente. Dibujar es tu bucle, eso es lo que corre, y otra vez, y otra vez. Entonces, si quisieras animación, la función de dibujo es donde realmente especificarías cómo deberían animarse las cosas a pantalla. Pero de nuevo, no estamos haciendo ninguna animación todavía. Entonces, vamos a seguir adelante y eliminar la función de sorteo. Ahora, quiero seguir adelante y hacer un rectángulo en este ejercicio. Entonces, adelante y teclea rect. De nuevo, notarás que se inicia automáticamente. Entonces, voy a seguir adelante y presionar Retorno. Observe que la primera variable se resalta, quiere saber x, y, ancho y alto. Entonces, voy a seguir adelante y decir, empieza en 25 en el eje x, tabulador, 25 en el eje y, tabulador, el ancho debe ser 50, tabulador, y la altura debe de 50. ' Ahora, usar estos fragmentos de funcionalidad de atajo dentro del procesamiento, solo significa que podemos escribir código mucho más fácil en lugar de tener que escribir cosas y otra vez, y otra vez. Haga clic en Guardar, comando R para construir, y debe notar que obtiene un rectángulo en el centro de su pantalla. Tiene algunos valores por defecto. Tiene un trazo negro, tiene un relleno blanco, así sucesivamente y así sucesivamente. Está bien. Tomémonos el tiempo ahora para pasar al siguiente video donde empezamos a agregar algunas mejoras deseadas, y algunas frustraciones que encontraremos al agregar esas mejoras, y tal vez obteniendo una visión más grande lo que en realidad es cuando estás pintando a pantalla. Nos vemos en el siguiente video. 19. Fundamentos / Rotación: Está bien. En este video, agreguemos algunas mejoras a nuestros bocetos básicos que estamos haciendo para tener una mejor comprensión de cómo el procesamiento realmente pinta a la pantalla. Entonces en lo básico, paso tres, construir, voy a seguir adelante y abrir build.pde. Ahora, voy a seguir adelante y teclear configuración. Voy a quitar la función de dibujo. Voy a añadir algo nuevo. Voy a cambiar el ancho y la altura de mi boceto. Entonces, voy a seguir adelante y decir, “Tamaño 600 píxeles por 600 píxeles”. Entonces, ahora mi etapa sería de 600 por 600. Ahora, voy a seguir adelante y especificar mi rectángulo, pero esta vez voy a decir, “100 en el eje x, 100 en el eje y, con un ancho de 50 y una altura de 50”. Ahora, si presiono Comando R y construyo mi archivo, de nuevo, debería ver mi boceto de 600 por 600 con el rectángulo en la posición deseada, y el ancho deseado, y la altura deseada. Ahora, fue en este punto que decidí, “Bueno, me gustaría rotar ese rectángulo. A mí me gustaría rotar ese rectángulo 45 grados”. Entonces, no estaba muy seguro de cómo hacer eso. No estaba muy seguro de cómo hablar realmente con el rectángulo y girarlo. De hecho, no lo haces. En realidad no hablas con el rectángulo en absoluto. El rectángulo ni siquiera es un objeto con el que se puede hablar. Entonces, ¿cómo realizo una rotación? Bueno, termina que lo que realmente vas a hacer es rotar toda la etapa del boceto. Entonces, si entrara aquí y escribiera rotar, y especificara 45 grados, y si guardara y ejecutara esto, notaría que ahora falta su rectángulo. Entonces, entonces tuve que hacer un poco más de lectura para descifrar que para poder usar rotar y si querías rotarlo 45 grados, había que especificar ese número en radianes. Entonces si regresara y dijera: “Rotar”, entonces tendrías que llamar a radianes, y en radianes podrías pasar el número 45. Ahora, si guardo y construyo mi película, ahora puedo ver que mi plaza está todo el camino a la izquierda. ¿ Por qué está sucediendo esto? Por lo que de nuevo, me estaba pasando un momento difícil entender cómo pintar cosas específicas. Entonces, necesitaba probar algunas pruebas. Déjame mostrarte las pruebas que terminé realizando para tener una mejor idea de cómo el procesamiento realmente pinta a la pantalla. Entonces, pasemos al paso cuatro. Paso cuatro, construir, build.pde, de nuevo, voy a seguir adelante y escribir configuración. Voy a quitar la función de dibujo, y dentro de la configuración, voy a especificar el tamaño 600 por 600, y voy a seguir adelante y decir: “Rotar radianes, digamos 10”. Entonces, ahora solo estoy girando 10 grados. Ahora, lo que quiero hacer es, es decir un rectángulo, pero esta vez, voy a cambiar el eje x. Voy a decir 400, 100 con un ancho de 50 y una altura de 50. Ahora bien, el experimento que quería realizar fue, ¿qué pasa si tuviera cinco de estos en pantalla? Entonces ya que tengo el uno, voy a seguir adelante y sólo copiar estas dos líneas, y voy a pegar hasta tener cinco. Entonces, ahora tengo cinco instancias de esta rotación y rectángulo, y sólo tenía curiosidad por ver qué iba a pasar. Entonces guardé mi película, construyo, y me sale esto. Entonces, empecé a entender mejor que lo que estaba pasando en este archivo fue, si tomo una hoja de papel es que estaba tomando el escenario, aquí está cero, cero, para ustedes chicos, y estaba girando 10 grados y luego dibujando la plaza . Después estaba girando de nuevo 10 grados y dibujando la siguiente plaza. Fue haciendo eso cinco veces. Entonces, empecé a entender mejor que en realidad estaba girando el mundo, adjuntando la plaza, rotando el mundo, adjuntando la plaza, y empecé a conseguir este tipo de forma. Entonces, pasemos a otra prueba. De nuevo, quiero una mejor idea de lo que está pasando aquí. Sólo por el carajo, sí , volveremos a escribir el código. Voy a seguir adelante y cerrar esto, voy a pasar al paso cinco, construir, build.pde. Nuevamente, voy a seguir adelante y hacer configuración, voy a quitar la función de sorteo. Voy a entrar aquí, y voy a configurar mi talla. Ahora, voy a hacer algo un poco diferente. Lo que quiero hacer diferente es que quiero una representación visual del escenario. Entonces, ¿qué pasaría si tecleara rectángulo y luego dijera que el eje x era cero, el eje y era cero, y luego el ancho era 600 y la altura era 600? Entonces, el ancho y la altura eran del mismo tamaño exacto que el tamaño del escenario. Yo solo quiero probar la película y ver qué pasa. Entonces, lo pruebo y visualmente, parece que ese es el trazo en mis rectángulos. Entonces sí, creo que está funcionando. Creo que tengo un rectángulo que básicamente es del tamaño de mi escenario. Entonces, ¿qué pasaría si tomara esto y lo copiara cinco veces? Dos, tres, cuatro, cinco. Ahora, lo siguiente que quiero hacer es, es que quiero decir que no hay relleno. Yo solo quiero mirar el rectángulo sin relleno, solo un trazo. Entonces, voy a seguir adelante y decir, “No Fill”. Entonces voy a copiar eso, dos, tres, cuatro, cinco. Entonces lo que quiero hacer es mirar esa rotación. Entonces, voy a seguir adelante y decir: “Rota radianes”. Pero esta vez, voy a decir, “10”. Entonces voy a copiar para que lo tenga frente a los cinco de mis rectángulos. Ahora, si sigo adelante y guardo y construyo la película, estás empezando a conseguir una representación visual de lo que está pasando, que es, estoy girando toda la etapa 10 grados porque otra vez, cero, cero sigue siendo el mismo lugar exacto, mi rectángulo es de 600 por 600, y puedo ver que lo que estoy haciendo es, es rotar todo el mundo, adjuntar este rectángulo, girando 10 grados, así sucesivamente y así sucesivamente. Entonces, de hecho, si tuviera que agregar ese trasero cuadrado más pequeño, podría decir algo como esto, podría decir, “El relleno es blanco”, y ese rectángulo que inicialmente teníamos estaba en un eje x de 400, un eje y de 100 con un ancho de 50 y una altura de 50. Ahora si copié ese relleno, y de nuevo, lo pegué cuatro veces más, y luego guardé y construí mi película, ahora puedes ver ese rectángulo inicial, ese es el tamaño del ancho y la altura girando, pero ahora, obtengo una comprensión de todos. Entonces, así es como está creando esa curva. Pasemos al siguiente video y empecemos a arreglar algunas de estas molestias aprendiendo la matriz push y la matriz pop y entendiendo cómo restablecer el escenario después de adjuntar algo para que realmente podamos volver a quizás construir un fila de rectángulos, y esos rectángulos se giran 45 grados. Entonces, quiero arreglar esto. Yo quiero tomar estos cinco, y en realidad ponerlos en fila, y que roten 45 grados. Entonces, nos vemos en el siguiente video. 20. Fundamentos / Matriz / Apilar y desapilar: Entonces, vamos a arreglar algunas de estas molestias en los pasos básicos con el aprendizaje de PushMatrix y PopMatrix. Entonces, voy a seguir adelante y crear una nueva carpeta llamada matriz, y dentro de matriz voy a seguir adelante y hacer un archivo llamado paso uno. Ahora, en este caso, también vamos a hacer cinco expedientes, pero quiero mutar este único archivo a medida que avance. Entonces, ahora mismo, sólo vamos a trabajar en el paso uno y luego copiaremos y haremos cambios a medida que avancemos. Ahora, dentro de un paso uno, voy a hacer una carpeta llamada build. Voy a seguir adelante y comenzar un documento en blanco en Sublime Text 2, y voy a guardar esto en mi matriz de escritorio paso uno build y solo llamaremos a esto build.pde. Adelante y empecemos a escribir el mismo código que hacíamos antes, pero hagamos algunos cambios. Entonces, voy adelante y escribo configuración, voy adelante y elimino el empate. Voy a seguir adelante y especificar tallas 600 por 600. ¿ Y qué es PushMatrix, PopMatrix? Entonces, si recuerdas en la anterior, si estás adjuntando cinco cuadrados, estaba girando al mundo adjuntando la plaza, girando nuevamente al mundo adjuntando la plaza. Lo que hace PushMatrix y PopMatrix es que dice, mira lo que está pasando en pantalla, haz algunas cosas, y cuando termines de hacer esas cosas ponlo de nuevo como nunca se había hecho antes. Restablecer. ¿ De acuerdo? Entonces, eso es lo que hace PushMatrix y PopMatrix. Entonces, mira lo que va a pasar aquí. Voy a seguir adelante y decir PushMatrix. Dame algunos retornos duros y escribe PopMatrix, ¿de acuerdo? Ahora, porque PushMatrix y PopMatrix es recordar lo que está pasando, libera lo que está pasando de nuevo a la forma en que estaba. En realidad me gusta poner otra pestaña dentro de la PushMatrix y PopMatrix para que pueda ver que lo que sea entre esos dos está sucediendo en ese momento y luego se está restableciendo. Entonces, sigamos adelante y pongamos nuestra rotación, sigamos adelante y pongamos nuestros radianes de 45 grados, y sigamos adelante y dibujemos nuestro rectángulo. Pongamos este en un eje X de 100, un eje Y de 100, y un ancho de 50 y una altura de 50, ¿de acuerdo? Ahora, si sigo adelante y presiono el comando R y construyo este archivo, debería estar de vuelta a ese extraño escenario donde mi rectángulo está hasta el lado izquierdo. Ahora bien, si fuera a copiar estas cuatro líneas de código y pegarlas cuatro veces más. Dos, tres, cuatro, cinco. Ahora tengo cinco instancias de giro PushMatrix PopMatrix y rectángulo, pero vamos a cambiar el eje X para cada uno de estos. Entonces, sigamos adelante y digamos que este rectángulo en particular va a estar en un eje X de 200, el siguiente va a ser 300, el siguiente va a ser 400, y el último va a ser 500. Ahora, si pruebo esta película, te darás cuenta de que ahora lo hace abajo de la fila. Está bien. Entonces, PushMatrix y PopMatrix está restableciendo la rotación de nuevo a cero, cero. Perdón, volviendo a poner la rotación a cero. Entonces, lo rotamos 45 grados, adjuntamos el rectángulo, PopMatrix lo restablece de nuevo a cero y luego el proceso vuelve a empezar todo de nuevo donde gira 45 grados, dibuja el nuevo rectángulo, pero esta tiempo a una X de 200. Entonces PopMatrix vuelve a poner la rotación en cero inicia el proceso de nuevo. Entonces, otra vez me confundió en cuanto a por qué estaba haciendo este tipo de patrón. Entonces, en este punto aprendamos algo nuevo. Vamos a seguir adelante y guardar y cerrar esto, y voy a dar este paso uno, mantener pulsada la opción tecla Alt, arrastrar para crear el paso dos y en realidad volver a abrir este archivo, ¿verdad? Entonces, ahora vamos a hacer una mejora a este expediente. Termina eso, si solo dices que el rectángulo está en una X de cero y una Y de cero y en realidad lo hacen por todos ellos, porque lo que queremos hacer es agregar algo nuevo llamado traducir. Lo que hace traducir es, si girar es girar el lienzo, traducir es mover el lienzo. Se está moviendo el lienzo del escenario sobre un eje X y un eje Y. Entonces, si llegara a este PushMatrix podría decir traducir y sólo voy a poner en coordenadas 2D. Voy a decir traducir a 100, 100. Por lo tanto, traduce a un eje X de 100 píxeles sobre 100 píxeles hacia abajo gira el escenario, luego dibuja el cuadrado. Los restablecimientos PopMatrix se traducen de nuevo a cero, cero, los conjuntos giran de nuevo a cero e inicia todo el proceso de nuevo. Entonces, sigamos adelante y copiemos nuestra traducción en cada una de las matrices push y pop, pero en este momento voy a decir traducir a 200, traducir a 300, traducir a 400, y traducir a 500. Película editorial y oh, Dios mío estamos llegando a alguna parte. Entonces, lo que pasó fue que decía que esto es cero, cero, bien. Mueve 100 pixels 100 pixels, pero esto sigue siendo cero, cero, está bien. Girar 45 grados, adjuntar el cuadrado. PopMatrix, ponlo de vuelta a donde empezó. Pero el nuevo dice ir más de 200, abajo 100, girar así sucesivamente y así sucesivamente. Entonces, ahora estamos empezando a conseguir lo que yo quería para empezar visualmente, que era una fila de rectángulos girados 45 grados. De acuerdo, así que eso está bien pero en realidad quiero estas pequeñas formas de diamante aparezcan en el centro del escenario, por lo que el eje Y debería estar en el centro. Entonces voy a seguir adelante y cerrar esto, y de nuevo voy a mantener presionada la tecla de opción. Voy a seguir adelante y arrastrar esto para crear un paso tres y vamos a seguir adelante y reabrir este build.pde. Está bien. Está bien. Tan cool. Yo quiero que el traductor esté a la altura de la película dividida por dos. Eso suena genial. Entonces, vamos a seguir adelante, copiar eso, y pegarlo para cada uno de los traducidos. Adelante y ejecuta tu película. Eso totalmente no parece que sea el centro de la pantalla. Parece que es bajista. Bueno, confirmemos que es bajista. Adelante, y digamos que queremos hacer una línea. Está bien. Adelante, y digamos que la primera de la línea debe estar a cero en la X, y debe estar a la altura dividida por dos, así que eso lo va a poner en el lado izquierdo medio del escenario. Sigamos adelante y digamos que el ancho de la línea debe ser ancho, y su siguiente posición debe ser altura dividida por dos. Está bien. Entonces, que debería trazar una línea en el centro completo de la pantalla. Entonces, seguiré adelante y probaré mi película, y me doy cuenta, oh, sí por supuesto. Cuando dibujas el rectángulo, el rectángulo es cero, cero. Entonces, cuando gira así. Correcto. Está colgando de este punto de rotación cero, cero. De hecho, si tuviera que añadir aquí algunas elipsis, déjame decir simplemente elipse. Ah, puedes teclear a Josh. Prueba eso de nuevo. Digamos que la elipse va a ser la misma que los traductores. Entonces, para la primera elipse digamos 100 de altura dividida por dos, y quiero que el tamaño de la elipse sea de cinco por cinco. Está bien. Entonces ahora, si tuviera que copiar 2,3,4,5, el siguiente traductor está en 200, 300, 400, 500. Pon a prueba la película, prueba el boceto. Yo vengo de Flash man. Pon a prueba la película, prueba el boceto. Entonces, tengo estoy dibujando ese pequeño círculo para representar donde cero, cero está en mi rectángulo. ¿ De acuerdo? Entonces ahora, estoy en un poco de dilema. De hecho, si en realidad fuera a hacer esto, ¿no? Si dijera: “Oye, estoy girando 45 grados divididos por cinco rectángulos, verías que 45 dividido por cinco es nueve. Entonces, si realmente cambio el radio para ser nueve veces uno, nueve veces dos, nueve veces tres, nueve veces cuatro, y nueve veces cinco. Si corrí mi película, en realidad la puedo ver girando a 45 grados. Pude ver ese pivote. Obtengo representación de cómo está girando fuera de cero, cero del rectángulo, ¿verdad? Entonces, está bien. ¡ Oh Dios mío! Tengo que tratar de resolver esto. Entonces, sigamos adelante, guardemos y cerremos esta película. Voy a opción arrastrar paso tres al paso cuatro. Voy a reabrir de nuevo el build.pde. Entonces, me tenía que gustar pensar como, vale, ¿cómo centro el rectángulo? Nuevamente, este soy yo sin saber nada sobre el procesamiento. No había cavado toda la documentación. No conocía todos los trucos. Estaba tratando de resolver esto solo por mi cuenta, ¿de acuerdo? Entonces, genial. Volvamos a poner los radianes a 45 en este ejemplo. Está bien. Lo que necesitaba averiguarlo es, si giro un rectángulo que es 50 por 50, ese no es el tamaño del rectángulo. De hecho, si tomas un rectángulo, y lo rotas 45 grados, ese rectángulo ahora es 70.711 para un ancho y 70.711 para una altura. Ya no es 50 por 50. Entonces, yo estaba como, bien, voy a tomar la altura dividida por dos, y luego necesito restar, ¿verdad? Entonces, estaba poniendo esto entre paréntesis. Yo iba a decir: “Oh, 70.711 dividido por dos. Esa sería la mitad del ancho y la mitad de la altura”. Entonces, si realmente copio esto. Esto es doloroso. Esto es doloroso que estés escribiendo este código conmigo, porque esto es esto es ridículo. Entonces, si fuera entonces para guardar y probar este boceto. Yo estaba como, sí. Ahora tengo esto haciendo lo que necesito que haga, que es que quería tomar estos rectángulos, rotarlos 45 grados, para que se convirtieran en diamantes. Pero luego quería centrarlos, y así es como lo haces. Tengo que decirte, estaba empezando a pensar que el procesamiento era una locura, que iba a pasar un momento realmente difícil como artista visual, solo pensando en cómo iba a hacer las cosas en pantalla. Ahora, guarda y cierra esta película. Guárdalo como paso cinco. Este es el último que vamos a hacer, porque luego cavo alrededor de parte de la documentación, y me di cuenta de que esto sólo era una tuerca. No tuve que hacer esto para nada. Si realmente me deshago de todo esto, todo lo que tenía que hacer era escribir una línea de código para especificar el RectMode. Entonces, si subo a la cima aquí, y digo, RectMode, entonces podrías pasar CENTER en todas las tapas. Entonces, lo que eso significó fue, es que cualquiera que sea un rectángulo que hagas, el punto de anclaje está en realidad en el centro de cualquier anchura y altura especificada. Entonces, si guardaras y probaras este boceto, notarías que obtienes exactamente lo mismo. Está bien. En la próxima serie, quiero hablar de cómo roto esto? Entonces, genial. Tengo esta obra de arte anexando en el centro de la pantalla, a donde quiero que vaya. Pero ¿y si quisiera aplicar alguna animación? Ahora, la razón por la que estoy mostrando la animación como ejemplo, es porque eventualmente, nos vamos a presentar a Hype. Nos vamos a presentar cómo todo este tipo de molestia para mí podría simplificarse usando el Hype Framework. Está bien. Nos vemos en el siguiente video. 21. Fundamentos / Rotación y color: Entonces, la forma en que lo veo es antes de que realmente pasemos a hablar de bombo, hay dos archivos extra que tenemos que hacer para que se pueda ver qué escenarios suceden en un escenario no hiperficado. Entonces, el primero es aplicar la rotación. Entonces, voy a seguir adelante y hacer una nueva carpeta y llamaré a esta carpeta “Rotación”, y dentro de esta carpeta, rotación, solo voy a copiar el paso cinco de matriz. Entonces, voy a dar el paso cinco y sólo copiarlo a rotación de la matriz y a la rotación. Ahora, déjame simplemente cambiar esto al paso uno y puedo seguir adelante y cerrar la carpeta matricial y puedo seguir adelante y abrir esta build.pde. Ahora si ejecuto este boceto aquí, lo que quiero que suceda es alguna rotación de estos cuadrados para que, de nuevo, se pueda ver cómo el procesamiento maneja ciertos aspectos de la pintura a la pantalla. Entonces, sigamos adelante y digamos algo un poco diferente que es de lo que hablé antes de que una configuración funcionalmente se ejecuta una vez. Se trata de una función de dibujo que se ejecuta varias veces, y así que en realidad quiero mover algunas de estas cosas a una función de dibujo. Entonces, si vengo aquí abajo y escribo void draw, abra paren, cierre paren, y lo que voy a copiar es todo desde la elipse, la línea, y el PushMatrix y PopMatrix. Entonces voy a seguir adelante y cortar eso, y ahora mismo verás que lo único que está en configuración es establecer el tamaño y el RectMode. Ahora dentro del sorteo que es un bucle, corre una y otra vez, realidad voy a pegar este PushMatrix, PopMatrix, la creación de la línea, y la creación de estas elipses. Ahora si yo fuera a construir el boceto, te das cuenta de que tal vez no se ve muy diferente porque, de nuevo, aquí no pasa animación. Está bien. Entonces, tengo cinco activos. Entonces, en realidad voy a crear cinco variables. Voy a decir entero r1 para la rotación uno es igual a cero, y voy a seguir adelante y copiar estos dos, tres, cuatro, cinco y cambiar esto a dos, tres, cuatro, y cinco. Ahora, lo que voy a hacer es, es en lugar de rotar radianes 45, en realidad voy a cambiar esto a la variable que configuré arriba. Entonces, voy a decir radianes más más r1. Por lo que eso significa agregar uno al valor de r1. Entonces el cero se convierte en uno, uno se convierte en dos, dos se convierte en tres, tres se convierte en cuatro, y básicamente es un contador, esa cosa siempre está contando ahora. Entonces, si fuera a copiar esto y hacer este plus más r2, más r3, más más más r4, y más más r5. Ahora la rotación, los cinco tienen cinco números diferentes que están contando 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Entonces, si pruebo el boceto, debes notar que está girando, pero lo que pasa es, es que en realidad no estás despejando la pantalla. Entonces en realidad solo estoy pintando la rotación y así a medida que la plaza se mueve, está dejando un residuo de la obra en su posición anterior. Entonces para borrar la pantalla en la función de sorteo, solo voy a decir que el fondo es CCCCCCCC. Entonces, lo que sucede ahí es, cada vez que se ejecuta la función de dibujo, borra el fondo luego dibuja el cuadrado, borra el fondo, dibuja los cuadrados, borra el fondo, dibuja los cuadrados. Entonces ahora, cuando realmente pruebo este boceto, debes notar que parecería que cada una de las casillas está girando por su cuenta. Entonces, hemos movido el contenido fuera de configuración, lo hemos puesto dentro de sorteo. Nos damos cuenta de que si no llamas a fondo en la línea 13, va a dejar un residuo de la obra porque en realidad no estás despejando el fondo. Entonces, de nuevo, estas son cosas en las que pensar mientras vamos hacia adelante. Ahora, hay una especie de último doble-whammy aquí. Voy a seguir adelante y guardar esto, y voy a copiar todo este archivo de rotación a color. Entonces solo lo copio y lo voy a cambiar el nombre a color y voy a seguir adelante y abrir el build PDE. Ahora este es el mismo archivo exacto que la rotación, pero quiero establecer un color aleatorio. Entonces, tengo estos cuadrados y solo quería tener un color de relleno aleatorio. Entonces, dentro de la PushMatrix y la PopMatrix de cada uno de los cinco, en realidad voy a pegar esto, y esto está configurando el color de relleno. Ahora, el relleno es RGB; rojo, verde, azul. Entonces digo que escoja un número aleatorio 255 para el rojo, un número aleatorio 255 para el verde, y un número aleatorio 255 para el azul, así que eso debería darme unos valores RGB aleatorios, eso es RGB es un número del 0-255. Ahora bien, si yo fuera a copiar esto en cada uno de los PushMatrix y PopMatrices, ustedes verían la paja última y final para mí personalmente, cuando pruebo este boceto. En lugar de que yo piense que solo establecería un color, lo que sucede es, es porque la función de dibujo se está ejecutando una y otra vez, asume que se quiere escoger un relleno aleatorio cada vez. Entonces wow, esto fue solo una gran diferencia para mí viniendo del entorno flash porque podías hacer este tipo de cosas en el entorno del flash y en realidad el color de relleno solo se establecería una vez. Nuevamente, entiendo que estos son lenguajes completamente diferentes, pero para mí esta fue la paja final. Realmente necesitaba pensar como cómo podría construir una biblioteca para ayudar a hacer algunas de estas cosas que creo que son complicadas. Entonces, por ejemplo, podrías escoger un color aleatorio dentro de la configuración y luego el sorteo solo accederá a ese color aleatorio que ya estás pre-elegido. Entonces, pasemos al siguiente video donde en realidad empezamos a mirar algún código de bombo y entender cómo podemos tomar las mismas ideas exactas, la misma animación exacta, pero veremos cómo es mucho más simple realmente usar bombo. Nos vemos en el siguiente video. 22. HYPE / Fundamentos: Está bien. Entonces, empecemos con un archivo HYPE. Entonces, todo lo que acabamos de cubrir, despejado de tu mente. Enfriar. Adelante y empecemos un nuevo documento, una nueva carpeta, y voy a llamar a esto Hype_Basics. Dentro de Hype_basics, voy a crear una carpeta llamada paso uno, voy a crear una carpeta llamada build. Ahora, puedes abrir esta carpeta de procesamiento HYPE que descargamos de Staging, porque aquí está hype.pde, que nuevamente contiene toda la biblioteca HYPE. Entonces, voy a la opción arrastrar y copiar eso en Build. Entonces, ahora puedo cerrar eso. Entonces, tengo Hype_basics, paso uno, build y HYPE pde. Entonces, voy a seguir adelante y crear un nuevo archivo llamado build.pde en el escritorio, en Hype_basics, paso uno, build, ahí mismo con mi archivo HYPE pde. Está bien. Entonces, vamos a entender algunas cosas que son un poco diferentes que en el procesamiento. Entonces, sigamos adelante y construyamos nuestros rectángulos visuales como hicimos en el último archivo. Ahora, voy a seguir adelante y decir “void setup” (). No voy a hacer un atajo todavía porque te voy a mostrar algunas diferencias. Lo primero que voy a especificar es el tamaño, 600 por 600, y voy a pasar a la siguiente línea. Ahora, para poder usar una biblioteca externa, necesito inicializar la biblioteca HYPE. Entonces, necesito decirle a Processing que HYPE existe. Yo voy a hacer eso diciendo h.init (esto). Ahora si has descargado otras bibliotecas en el pasado, probablemente estés muy familiarizado con despedir al constructor de una biblioteca. Entonces, ahora mismo, en esta línea cuatro, le estoy diciendo a Processing que tenga en cuenta que la biblioteca HYPE realmente existe. Entonces h.init (esto). Ahora, en lugar de que Processing haga el dibujo, voy a hacer que HYPE haga el dibujo. Entonces, lo que sea que escriba de aquí en adelante, voy a estar diciendo, HYPE. Entonces, al final, necesito decirle a HYPE que realmente pinte la pantalla. Entonces, voy a hacer eso, darme unos duros retornos diciendo h.Drawstage. Es esa línea de ahí mismo la que en realidad va a tomar todas las cosas que hemos empujado en HYPE y realidad poder pintarlo en la pantalla. Por lo que h.Drawstage siempre es típicamente va a ser una de las últimas cosas que hago. Ahora, sigamos adelante y hagamos nuestro primer rectángulo. Entonces, arriba aquí arriba, voy a crear una instancia de HRect, y es una R mayúscula, HRect, voy a decir d1, d es para dibujable. Entonces, hay muchos dibujables dentro de HYPE. Ahí está HRectangle, ahí está Hellipse, ahí está HBox, ahí está HSphere. Esos son todos dibujables de HYPE. Entonces, voy a decir HRect d1, la d es para dibujable. Ahora, dentro de la configuración, voy a decir que d1 es igual a un nuevo HRect. Entonces, en lugar de llamar a Rect, estamos llamando a HRect. Ahora, puedo empezar a hacer algún método encadenado. Puedo decir, oye, d1, quiero que tu talla sea 50. Yo quiero que tu rotación sea de 45. Yo quiero que tu posición de anclaje esté en el centro, para que cuando gira gire, este es el modo Rect, para que gire alrededor del punto central. Hago eso diciendo Anchorat. Anchorat tiene un montón de cosas que podemos pasar. Voy a decir H.CENTER, igual que fue Rect mode center, estoy diciendo ancla en H.CENTER. Ahora bien, ¿dónde quiero poner esta primera plaza? Esa es la ubicación y debajo de la ubicación, voy a decir 100 en el eje x y altura dividida por dos. Está bien. Ahora bien, si a estas alturas guardara y probara esto, notarías que no vemos nada. Entonces, ¿dónde está mi rectángulo? Entonces, te falta una última línea, que es agregar este dibujable a HYPE. Entonces, voy a decir h.Añadir este tipo d1. Entonces, ahora estás agregando este dibujable a HYPE. Entonces, cuando llegamos a la línea 12 y dice h.DrawStage, este dibujable se ha agregado y en realidad puede pintarlo a pantalla. Entonces, al agregar esa línea, si ahora pruebo el boceto, debes notar que el rectángulo está justo ahí en el centro. Ahora, vamos a añadir algunas cosas aquí. Después de H.DrawStage, en realidad voy a copiar y pegar la información de línea y elipse de los archivos anteriores en los que estábamos trabajando. Entonces, dibujando la línea a través del medio y luego poniendo esas cinco elipses. Ahora bien, si yo fuera a ejecutar este archivo, notarías que de hecho está justo en ese centro de la pantalla. Entonces, tamaño, ponlo en 50 por 50. Rotación, no tenía que decir resplandor, sólo podía decir que quiero rotarlo 45 grados. Ancla, estoy especificando dónde está el punto de registro. En este caso, estoy diciendo ancla en H.CENTER. Ubicación, acabo de decir 100 píxeles en la x y la altura dividida por dos. Ahora, si yo fuera a tomar esto y sólo copiar esto cinco veces más, dos, tres, cuatro, cinco, ahora, obviamente tendría que cambiar esto a d2, d3, d4, d5. Entonces, arriba aquí arriba, voy a decir HRect d1. También va a haber un d2, un d3, un d4, y un d5. Entonces, puedo enumerarlos todos en una sola línea. Ahora, puedo empezar a hacer las modificaciones aquí. Puedo decir d2, d2, agregar d2, d3, d3, d3, agregar d3, d4, d4, agregar d4, y d5, d5 y agregar d5. Ahora, la única otra última cosa que tuve que cambiar es la ubicación. Este estaba a los 200, éste a los 300, éste a los 400 y éste a los 500. Está bien. Voy a ejecutar mi boceto y debes notar que es exactamente como el anterior. Entonces, genial. Estamos empezando a aprender un poco sobre HYPE. Estamos inicializando el marco HYPE. Estamos usando los dibujables de HYPE, en este caso HRect. Estamos agregando esos dibujables al universo HYPE. Entonces, en la línea 27, estamos pidiendo al universo HYPE que tome todo lo que sabe, que lo hemos empujado, lo hemos agregado, y en realidad lo pinte al escenario. Entonces, si fuera a guardar esto y cerrarlo y luego hacer un Paso dos y abrir el código aquí, mira lo que voy a hacer aquí. Tengo una clase llamada hRotate. Entonces, recuerda, antes, teníamos que crear un sorteo vacío y teníamos que copiar todo el código en el sorteo. Bueno, voy a tomar un atajo aquí, y voy a decir, hey, hRotar, de nuevo, es un R. mayúscula Llamemos a este r1 para rotar uno, igual a nuevo hRotar, y ¿a quién quiero rotar? ¿ Quién es el blanco? Bueno, en este caso, el objetivo es d1, ese es nuestro HRect, d1. ¿ Qué tipo de velocidad quieres tener? Adelante y solo haz una velocidad de uno. Ahora en este punto, si yo fuera a probar el boceto, notarás que no se gira nada. El motivo por el que nada está girando es porque, nuevo, esto está todo en la configuración. Entonces, si bajara aquí y dijera empate vacío, abra paren, cierre paren, y simplemente copiara las elipses, la línea y el h.DrawStage, eso es todo lo que tengo que copiar, y en realidad pegar esto en el sorteo. Entonces, lo que está pasando es, es que dentro de dibujar el bucle está disparando h.Drawstage una y otra vez. Entonces, realmente está dibujando el universo del bombo una y otra vez. Entonces en este punto, si realmente pruebo el boceto, debes notar que ese primer cuadrado realmente está girando, y está girando una velocidad de uno. Ahora si entonces copié esto, y lo pegué, lo pegué, lo pegué, y lo pegué, y cambiemos esto a r2, r3, r4 y r5, y cambiemos quiénes son los objetivos, d2, d3, d4 y d5. Ahora si pruebo el boceto, debes notar que estamos de vuelta donde empezamos. Ahora, nota algunas cosas. Dentro del sorteo, no tenías que recordar el fondo. En realidad hace eso automáticamente construido por defecto. Aprenderemos un poco más tarde cómo volver a agregar el código para que no se borre el fondo. Por lo tanto, sólo dibuja etapa borra automáticamente el fondo a menos que especifique lo contrario. Ahora si dijera que la velocidad era negativa una, eso obviamente iría por la otra dirección. Entonces ahora, el primero va en sentido contrario a las agujas del reloj y los cuatro siguientes van en sentido horario. No tuve que crear ninguna variable para la velocidad, no tuve que decir plus, más la variable para contar cada rotación, solo manejará la rotación para nosotros. Bueno, genial. Eso significa, éste podría decir que tiene una velocidad de 1.5. Este podría decir que tiene una velocidad de dos. Este podría decir que tiene una velocidad de 2.5, y éste tiene una velocidad de tres. De nuevo, si yo fuera a probar el boceto, notarías que todas las rotaciones de velocidad son diferentes. Pasando a la derecha, voy a salvar esto. Yo lo voy a cerrar. Entonces voy a copiar a un paso tres y reabrir ese PDE construido. Ahora bien, esto es súper importante. No puedo decirte cuánto me encanta esto. Dentro de un flash, podrías crear una obra de arte y tenías este punto de registro, y donde moviste el punto de registro era súper importante porque si el punto de registro estaba aquí, y lo hiciste en rotación, rotaría de esta manera, y si lo tuvieras en el centro, entonces rotaría de esta manera. Entonces, podrías haberte dado cuenta de que dentro del procesamiento por defecto estás haciendo el 00, o estás haciendo el modo rect de centro. No se puede hacer ningún tipo de rotaciones balanceadas, o tal vez el punto está aquí arriba, y esto como columpios alrededor. No se puede hacer eso rápidamente, en realidad hay que escribir un montón de código para apoyar cómo hacer ese tipo de rotaciones. Por lo que a estas alturas, quiero hablar de ancla. Por lo que aquí ancla en siempre tiene una constante, como h.center, h.up, h.left. Si lo cambio a solo anclar, entonces en realidad puedo especificar cualquier X e Y que quiera. Entonces, solo voy a deshacerme de mis H.centers aquí, y vamos a ver qué tipo de diversión podemos tener con ancla. Digamos que el primer ancla es cinco en el eje X, cinco en el eje Y. Digamos que el siguiente es 10 en el eje X, 10 en el eje Y. Digamos que el siguiente es 15 en la X, 15 en la Y. Cuatro, en realidad voy a hacer 25, 25, y la razón por la que voy a hacerlo 25, 25 es porque el tamaño es 50. Entonces, ancla 25, 25 es lo mismo que ancla en H.center. Tomando la división de ancho por dos, la altura divide por dos, 50 dividir por dos, 50 dividir por dos, 50 dividir por dos, 25, 25. El último poco dibujable, quiero hacer algo inusual o quiero decir, vale, genial, aquí está la obra de arte. Yo quiero, en el eje X vengan al medio, por lo que el medio sería 25, y en el eje Y, quiero que sea negativo 25. Entonces en realidad pone el punto aquí arriba. Entonces, voy a decir negativo 25. Adelante y guarda y prueba este boceto, y debes notar que ahora, estamos recibiendo todo tipo de rotaciones fantásticas. Simplemente automágicamente sin tener que escribir ningún código adicional, puedes usar ancla para especificar realmente al igual que los viejos días flash donde está el punto de registro y dónde va a afectar ese punto de registro la posición X e Y de donde se apegan las cosas y obviamente la rotación. Ahora, cosa final que quiero hacer, adelante y cerrar esto, y voy a guardar esto como un paso cuatro. Esta es la última que vamos a hacer en esta serie en particular, y es que quiero agregar color. Entonces si recuerdas, podría decir, de nuevo, podría cambiarlo. Pero esto se está empezando a alargar. Entonces, digamos sólo d1.fill, y luego algo. Entonces, ¿qué quiero hacer con este relleno? Bueno, si recuerdas en el archivo anterior, quería escoger aleatoriamente un azul verde rojo. Entonces, si solo fuera a copiar algún código que ya prehorneé aquí, donde estoy diciendo d1 llenar aleatorio r, g, y b, número del 0-255. Si fuera a pegar eso en cada uno de estos, así que déjame solo copiar y pegar y pegar y pegar y pegar, entonces por supuesto, necesito cambiarlo a d2. Este, necesito cambiar a d3. Este, necesito cambiar a d4, y éste a d5. Debido a que toda esta creación de activos está sucediendo en la configuración, realidad se puede ejecutar el archivo y sólo va a pintar un color. En tanto que, en el anterior, estaba recogiendo el color una y otra vez. Entonces, enorme ventaja. Enorme ventaja de poder usar bombo, y justo en la función de sorteo, solo poniendo ese h.DrawStage, y lo que hagamos en configuración, eso solo se ejecuta una vez, y es que h.DrawStage lo que es en realidad mirando todos los parámetros que configuraste en configurar y haciendo el cómputo. Entonces en este caso, siendo rotación. Ahora, podría hacer algunas otras cosas aquí en el h.init esto. Podría decir.background y podría especificar 666666, un gris oscuro como así, así podría establecer el color de fondo, y luego puedo hacer AutoClear. Un AutoClear es de color azul en valor. Entonces, si dices AutoClear true, y en realidad ejecutas este archivo, lo que AutoClear true está haciendo es borrar el fondo. Entonces si cambiara AutoClear a falso, y en realidad ejecutara mi película, obtendrías ese efecto de pintura. Entonces, vamos a pasar a mirar algunos de los objetos dibujables bombo. Entonces, sólo vamos a hacer un rápido recorrido a través de todos los diferentes tipos de objetos dibujables que puedes usar usando el marco de bombo. Pasando adelante. 23. HYPE / Dibujables: Está bien. Entonces, ahora vamos a pasar a una carpeta llamada objetos de subrayado HYPE, y debes notar que ha sido comprimida y se ha adjuntado a este contenido de video. Si no estoy ganando algún tipo de premio por el número de contenido de video de Skillshare en una clase, voy a estar realmente decepcionado. Hay una sugerencia cuando agrego estos videos que dice: “Haz cada video entre tres y siete minutos”. Perdón, he fallado en ese departamento. Hay muchos dibujables en HYPE, y en realidad no los he agregado todos. Faltan algunos que faltan. Este video tendría tres horas de duración si en realidad escribiéramos todo el código para hablar de todos los diferentes dibujables. Entonces, lo que voy a hacer es, sólo vamos a mirar algunos de los dibujables aquí, y vamos a ver el código, y ustedes pueden estar trabajando uno al lado del otro, y podemos pasar por esto. Ahora, la misma estructura va a estar en cada una de estas carpetas. He tratado de despojarlo a sus fundamentos absolutos. Echemos un vistazo a lo que está pasando aquí. Hay una configuración de vacío. No hay empate vacío. Digo h.init (esto), voy adelante y pongo en un fondo de un gris oscuro. Línea seis dije suave, que a veces hará que los píxeles sean un poco más agradables. Línea 22 h.DrawStage, así que lo que añadamos al universo HYPE, pinta a la pantalla. Ahora, en la línea 8-20, estoy haciendo un for-loop. Un for-loop es algo que ejecuta un número determinado de veces. Entonces, en este caso, he dicho que quiero que este for-loop se ejecute 100 veces. Si no estás familiarizado con la programación, un for-loop es tres pasos básicos, dónde empezar hasta cuándo contar. Entonces, entero i es igual a cero, comienza en cero, corre mientras que i es menor que 100, un i++. Entonces, si recuerdas de antes, agrega uno a i. Entonces, cero se convierte en uno, uno se convierte en dos y esto sigue contando hasta que llega a los 100. Entonces, cuando llegue a los 100, este for-loop se detiene. Ahora, dentro de este for-loop, estamos creando un rectángulo, un HRect. Entonces, eso significaría que vamos a estar adjuntando 100 HRects a la pantalla. Entonces, veamos algunos de los parámetros que hemos pasado. Dije que quiero que el StrokeWeight sea uno. Dije que quiero que el color del trazo sea FF3300, bonito naranja oscuro. Yo quiero que el relleno sea 111111, bonito gris oscuro. Yo quiero que el tamaño sea un número aleatorio. Entonces, ten en cuenta que solo estamos pasando un número por tamaño, así que eso significa que va a ser una caja perfecta. El ancho y la altura están obteniendo el mismo número exacto. Pero, he dicho al azar 25 coma 125. Eso es un rango, lo que significa que va a escoger un número entre 25 y 125, y cualquiera que sea el número que escoja, le da eso al ancho y la altura. Gire, le pido que escoja un aleatorio 360 grados. Para la ubicación, random.width random.height. Ahora aún no hemos cubierto esto, ancho es igual a 600 y la altura es igual a 600. Por lo tanto, sólo puede especificar con los tamaños aquí arriba, y este tamaño puede entonces llamarse como ancho y alto en todo el resto de su documento. Anchorat (H.center) por lo que, estamos ajustando ese punto de registro al centro. Después de que terminemos, decimos h.add (d), d siendo dibujable. Es un atajo para dibujable. Entonces, si fuera a probar este boceto, debes notar que hay 100 HRects añadidos al escenario. A todos se les da un rango entre 25 y 125. Tienen una rotación aleatoria. Entonces, ahora, tal vez estás empezando a ver algunos de estos pensamientos previos y conversación que tuve sobre la aleatoriedad. No sé si esto necesariamente es guapo o no. De hecho, es simplemente aleatorio pero, es aleatorio con un rango. No se puso demasiado pequeño porque no fue más pequeño que 25 por 25, y no se hizo demasiado grande porque no fue más grande que 125 por 125. Entonces, si puedo agregar aleatoriedad pero tener límites en ella, generalmente, mejores serán los resultados. Entonces, genial. Nos gusta ese. Echemos un vistazo al siguiente HRect y veamos qué está pasando en este archivo en particular. Este, he cambiado el color de relleno para tener un alfa de 200. Entonces, alfa es un número entre cero y 255. Entonces, dije que quiero que el relleno sea esta coma gris oscuro y luego alfa. Notarás que el alfa aquí está, puedes ver algunos de los trazos de los rectángulos que en realidad están detrás. HRect también soporta el redondeo de los bordes. Entonces, podrías notar en la línea nueve dije, .redondeo y luego pongo en un radio de 10, por lo que mis rectángulos en realidad tienen radio de esquina de 10. Muy bonito. Pasando al siguiente. Si tuviéramos que ver este, cambié de talla aquí porque, si el tamaño está pasado un número, entonces lo aplica a ancho y alto. Aquí, estoy aleatorizando el ancho y estoy aleatorizando la altura. Entonces, en este caso, HRect se convierte en una serie de rectángulos en lugar de cuadrados perfectos. Por lo que notarás que estamos recibiendo un montón de rectángulos en pantalla en lugar un montón de cuadrados perfectos como en el paso uno y en el paso dos. HelLipse, no muy diferente a HRectangle. Nuevamente, especificas un tamaño. Ese tamaño es el radio del círculo. Entonces, muy similar a HRect excepto que estamos haciendo círculos en lugar de rectángulos. En el paso dos, creo que en lugar de hacer círculos perfectos, cambié el tamaño para ser el ancho, un conjunto aleatorio de números, y la altura para ser un conjunto aleatorio de números. Entonces, de nuevo, si prueban esto, deberíamos estar recibiendo algunos óvalos. En el paso uno, rotación, al azar 360 no hice porque no se puede ver un círculo girado aleatoriamente. Pero, en el paso dos, porque estos son óvalos, puedo hacer esa rotación aleatoria 360, y puedo rotar óvalos alrededor. Ahora, también está H.Path. H.path es donde se pueden hacer cosas como polígonos. En H.path podemos hacer estrellas, podemos hacer triángulos. Entonces, no vamos a mirar todos estos. Quiero que los mires a todos pero, si fueras a ejecutar un polígono, por ejemplo, notarás que puedo conseguir cosas como octágonos y hexágonos, y así sucesivamente y demás especificando que es un polígono y luego cuántos lados tiene ese polígono. Entonces, en el caso de éste, he dicho: “Oye, H.path es un polígono y ese polígono tiene cinco lados”, y así me sale un polígono de cinco lados. Por supuesto, en el polígono dos, lo aleatorizo. Yo digo: “Oye, polígono aleatoriza entre tres y nueve”. Entonces, cuando ejecutes este archivo, obtendrás de todo, desde triángulos, hasta octágonos, hasta hexágonos, y así sucesivamente y así sucesivamente. Entonces, jalando. Estrella. Lo creas o no, es una estrella. Star tiene dos argumentos, profundidad y bordes. Entonces, si fueras a correr esto, creo que ésta termina siendo como una estrella tradicional de cinco lados perfecta. Entonces, cada camino también puede hacer estrellas. Por supuesto, hay un montón de triángulos diferentes que podemos tener. Ahí hay isósceles, hay ángulos rectos, así sucesivamente y así sucesivamente. Entonces, aquí digo que quiero un triángulo, quiero que ese triángulo sea isósceles, y quiero que apunte hacia la cima. Entonces, mira a través de H.path y mira todos los diferentes tipos de formas que realmente podemos hacer ahí dentro. Ahora, pasemos a HBox y HSphere. HBox todavía estamos trabajando, pero lo bonito es que hBox es una forma tridimensional, así que podrías notar un poco de diferencia es que en el tamaño aquí, tuve que decirle que usara P3D. Por defecto, utiliza matrices y vectores P2D, bidimensionales. Por lo que en la línea cuatro, necesito especificar que quiero usar coordenadas tridimensionales. También tengo que decirle a HYPE que estoy usando coordenadas tridimensionales, así que podrías notar digo en la línea cinco, h.init y luego sí utilizo 3DTrue, por lo que así alterna HYPE para usar coordenadas 3D en lugar de coordenadas 2D. Línea 11, 12, y 13, ya que es una caja, tengo que especificar su profundidad, tengo que especificar su anchura, tengo que especificar su altura. Y de nuevo, pongo aquí un montón de números aleatorios. Entonces, si realmente ejecutas este boceto, notarás que en realidad estamos recibiendo un montón de cajas tridimensionales en el espacio. Está bien, muy guay. Hice un paso 2 para HBox. ¿ Qué hice por esto? Hice rotación X, rotación Y, y rotación Z, que me pareció bastante guay. Entonces en realidad puedes crear una caja y luego empezar a cambiar el eje en el que está girado, X, Y, y Z, y así pensé composicionalmente que eso empezó a ponerse bastante interesante. También puse ese alfa en el relleno para que pudieras ver algunas de las otras formas que están sucediendo detrás de la caja. De acuerdo, Esfera, todavía no estoy vendida en Esfera. Es realmente lento cuando se hace animación. Mira, encendí el trazo de esta Esfera y deberías conseguir algo que se vea así. Sigo trabajando con Sphere. Todavía estoy tratando de hacer algo divertido aquí. Ese paso 2, probablemente hice la rotación X, rotación Y, y rotación Z, así que si vas adelante y corres esto, solo va a girar el eje de estas esferas. Entonces en algunos de ellos, podrías ver los fondos o las tapas de la Esfera, otra vez composicionalmente, es interesante. Ahora, los dos últimos que queremos ver es h.Image, y h.Image , paso 1, hay una carpeta de compilación y también hay una carpeta de datos, y dentro de la carpeta de datos, acabo de poner un poco de JPEG que hice por mi amigo Joel aquí. Ahora, si miras el build.pde, podrías notar que digo: “Está bien, genial, estoy usando la imagen H ”, y entonces en realidad entre comillas especifico qué imagen ir a conseguir. No tienes que especificar la carpeta de datos, solo sabe automáticamente para obtenerla. Podrías notar en las líneas uno a siete, si quisiera publicar esto para procesar JS, tienes que tener esta línea de código para que precargue las imágenes para usarlas dentro del navegador y JavaScript. Y si ejecuto esto, esto solo debería adjuntar un 100 de esas imágenes en pantalla. Entonces, hay un montón de ellos ahí. Nuevamente, en el paso 2, agregué algo de rotación, agregué algo de alfa a las imágenes. Muchas veces, creo que en Java, se vuelve un poco pixelado. Se puede ver que la imagen se vuelve un poco masticada. Curiosamente, esto no sucede en la versión de JavaScript, pero en la versión de Java, como que obtienes la escalera pisando las imágenes. Ahora bien, el último que más quiero que digáis porque se relaciona con esta clase, es HShape. HShape va a tener una carpeta de datos, pero dentro de esa carpeta de datos va a ser SVG. Entonces vamos a tomar nuestros activos que dibujamos y usarlos en estas series de bocetos. Entonces, echa un vistazo. HShape D, dibujable, línea nueve, D es igual a nueva hShape, “Hey, carga en este archivo SVG. Y podrías notar que hay algunas cosas que pasé aquí, como enable style false que es no usar el estilo que utilicé en Illustrator, realidad mátalo, porque voy a especificar el estilo aquí en el procesamiento. Entonces, enable style false mata el estilo y me permite establecerlo aquí. Peso del trazo 1, una bonita naranja para el trazo, un gris oscuro para el relleno, así sucesivamente y así sucesivamente. Ahora, cuando ejecuto este boceto, debes notar que ahora estoy pintando con ese archivo SVG que hice en Illustrator. Entonces aquí es donde empieza a ponerse realmente emocionante, donde vamos a tomar algunos de estos dibujos que hacemos y mapearlos a estos entornos. Ahora bien, este boceto de muestra es como uno bueno porque puedes ver cómo se van a mezclar las cosas en pantalla. Caso en punto, mira el paso 2, donde si miras los datos, SVG, es enorme. Se trata de un archivo SVG muy grande, y es muy complejo en las formas que utiliza. Entonces, cuando realmente abres build.pde y realmente ejecutas este boceto, en realidad no se ve tan bien. Tengo que recordarles que si estamos generando una composición compleja, si la obra es compleja, entonces eso es doble complejo, y el doble complejo no se ven tan bien todo el tiempo. En realidad, cuanto más simples sean mis formularios, mejores resultarán estos resultados, así que ten cuidado con hacer que tu obra sea demasiado detallada. En este caso, esto no funciona tan caliente. Echemos un vistazo al paso 3. El paso 3 son algunos de esos dibujos que hice en la tableta Wacom. De hecho, hice un montón de ellos, así que te voy a dar un montón de este tipo de archivos SVG de muestra para que juegues con ellos. Entonces, un buen SVG aquí. Ahora, dentro de este build.pde, podrías notar, no mates el estilo, manténgalo como si estuviera dentro de Illustrator. Haz algo de rotación aleatoria, haz algo de tamaño aleatorio, solo tienes que seguir adelante y tirarlos por la pantalla y veamos qué pasa. Entonces, voy a ejecutar este boceto y tuve que bajar el bucle for a 20 porque la ilustración era tan detallada, vas a conseguir este error como acabo de recibir, que es que estoy tratando de dibujar 20 de estos archivos SVG y porque estoy tratando de hacer 20 de ellos, básicamente se me acaba la memoria. Dice: “Whoah, amigo, estás tratando de crear 20 cosas que tienen demasiada información vectorial”. Entonces, te da algunas instrucciones de cómo realmente aumentar la memoria dentro de las preferencias. Ahora, déjame simplemente dejar estos y en lugar de entrar y cambiar las preferencias de memoria, sólo voy a cambiar mi bucle de cuatro a cinco, así que sólo va a adjuntar cinco piezas de arte. Mi esperanza es que esto se ejecute. De acuerdo, para que veas que adjuntó estos archivos SVG al escritorio, y de nuevo, es sólo llevarlo- adjuntarlos al escritorio, oh Dios mío, estoy hablando tan rápido y mi cerebro va tan rápido que podría decir que te quería para afeitarse una jirafa. Por favor, sal al Serengeti y afeita una jirafa. ¿Dónde estábamos? Vamos a seguir adelante. De acuerdo, paso 4. Paso 4, pongo en ese habilitador de estilo. Déjenme derribar esto al cuatro bucle siendo 10. Esperemos que no me quede sin memoria y se pueda ver aquí habilitando el estilo, podría entrar y poner un relleno, poner alguna información de trazo, y estoy empezando a conseguir esta composición, pero podrías notar que cuando hago esto en la configuración y especifico un relleno, solo un relleno universal que se llena en todo el conjunto de ilustraciones, pero esto en realidad es un montón de cosas individuales. Entonces, lo que hice fue, es a pesar de que estoy saltando adelante, la siguiente sección va a ser sobre trabajar con color, si realmente vas al paso 5, solo te mostré un ejemplo de lo que pasa cuando tienes especificó algunos colores y luego pedir la obra de arte que comiencen aleatoriamente a escoger colores para los rellenos. Ahora cuando haces eso, empiezas a conseguir algo que visualmente va a parecer mucho más interesante, así que en lugar de aplicar un color, está corriendo por aquí y está coloreando todas esas agrupaciones individualmente, como cubrimos en la otra sección. Está bien, genial. Ahora de nuevo, incluso saltando más adelante, avanzando hacia el tiempo, paso 6. En realidad sólo quería mostrar cómo importaste procesamiento PDF, cómo dices que quieres capturar y grabar lo que se renderiza en pantalla, y si presiono la tecla S en mi teclado, captura todo lo que se dibujó. Entonces, si fuera a ejecutar esta película, presione la tecla S, en realidad generaría un PDF, y este archivo PDF realmente se puede abrir en Illustrator. Entonces, ahora tengo un ambiente para escribir código, adjuntar algunas ilustraciones, y luego devolver esa composición aleatoria a Illustrator, y obviamente en las próximas secciones, descubriremos cómo hacer todo tipo de diferentes estilizados y demás. Está bien. Wow, mucho que cubrir en esta sección, sobre cómo pintar a pantalla, cómo HYPE te ayuda a pintar para cribar mucho más fácil de lo que creo que hace el procesamiento. En el siguiente apartado, vamos a retroceder un poco y hablar de color. Conceptualmente, vamos a hablar de color y luego vamos a hablar aplicar color a algunos nuevos bocetos que creamos. Entonces, color. Nos vemos en el siguiente apartado. 24. Introducción: Trabajo con el color: Color. Muy importante. Tenemos que hablar de color. ¿ Sabes por qué tenemos que hablar de color? Porque apestas de color. No conozco mejor manera de decirlo. La gente es terrible en el color, y mi objetivo es conseguir que la gente no sea mala en el color. El color es super, súper importante para mí. No sólo eso, sino que tengo algunos secretos para trabajar con el color. Nuevamente, la metáfora que uso muchas veces es una caja de lápices de colores. Vamos a escribir código que diga: “Oye, acabamos de pasar todo este tiempo dibujando esta obra de arte. Oye, pasamos todo este tiempo ejecutando este programa, y ahora acabamos de definir esta caja de lápices de colores”. Esta caja de lápices de colores tiene todos los colores con los que se nos permite colorear. Entonces, lo que sucederá es que, cuando realmente ejecutemos nuestro archivo, elegirá aleatoriamente del banco de activos que hemos dibujado, generará al azar cosas en pantalla, y luego accederá a esta caja de crayones y decir: “Oye, mi trabajo es colorear aleatoriamente las cosas en pantalla, pero sólo puedo usar los colores que se han especificado en esta caja de lápices de colores”. Ahora bien, esa idea puede parecer simple. En el primer ejercicio que hagamos, será muy sencillo. Literalmente configurarás esta caja de lápices de colores, y elegirá aleatoriamente de los lápices de colores, y coloreará las cosas en la pantalla. Pero entonces podemos empezar a meternos en cosas como el color esperando. Al igual, ¿cómo esperamos más colores que otros? Podemos hacerlo con un solo color y en realidad podemos hacerlo con múltiples colores. Lo que significa que, cuando las cosas se generan en pantalla, podemos forzar una estética cromática específica y la composición. Entonces, eso es trabajar con algo llamado pool de colores. Pero entonces tenemos otro truco llamado pixel colorista. Colorista de píxeles, nos permite realmente tomar fotografías y despojar el color de una fotografía. Tengo que nombrar drop Eric Nowitzki, porque es uno de los primeros tipos que vieron hacerlo. Donde salía y en realidad filmaba fotografías, las desdibujaba, y luego utilizaba realmente la información de color de esa fotografía para poblar el color que vamos a pintar en pantalla. El tercer paso, es una clase llamada cada campo de color. Lo que cada campo de color nos permite hacer, es en realidad configurar puntos de color en el espacio. Entonces, como estamos generando aleatoriamente una composición, si quisiera que fuera verde en la parte superior, y luego amarillo en el medio, y luego azul en la parte inferior, podríamos usar cada campo de color para realmente crear esa transición de color. Entonces, vamos a pasar mucho tiempo en el color, porque creo que es algo súper impresionante por el que nos obsesionemos. Creo que va a resuenar en el trabajo que creas y finalmente, puedes decirle a todos tus amigos que no chupas de color. 25. The Color Thief's: Oye, estamos en la Sección cinco que está trabajando con el color. Se puso la camiseta de mi compañero maestro de Skillshare John Conteno. ¿ Sientes el poder? ¿Por dónde empezar? Color. Súper, súper importante, estoy obsesionada con ello. Me encanta el color hasta el punto siempre estoy buscando y cazando inspiración de forma, siempre estoy cazando el color. Ahora, en el pasado, esto era todo. Solíamos ser diseñadores de impresión y tendrías tu libro de Pantone y pasarías por ahí y te encontrarías, pero siempre estás buscando un color a la vez, pero aquí es donde empezamos a conseguir color. Hay muchos lugares para la inspiración del color, por ejemplo, Kuler, podrías ir a Kuler. Kuler es agradable. Te voy a mostrar algunos trucos para hackear con Kuler. Mi problema con Kuler es que solo son cinco colores, y en algunos casos, eso es genial empezar con esos cinco colores, pero siempre busco una gama de colores, una gama mucho más amplia, sobre todo a la hora de agregar estos colores programáticamente, lo que vas a encontrar es que, si estuviera generando aleatoriamente un montón de ilustraciones en pantalla y solo usara cinco colores, terminaría luciendo muy plana. Entonces, lo que quiero hacer es que quiero conseguir una gama mucho mayor de colores. Entonces, la pregunta es, ¿de dónde viene el color? ¿ Dónde puedo buscar inspiración de color? Bueno, termina que la mayoría de las veces es de fotografías. Si fuera a abrir un navegador, por ejemplo, y digamos que fui a Google y tecleé en Beach y Ocean, tal vez, y haga clic en “Imágenes”, podría correr a través esta selección de imágenes para buscar color. Por ejemplo, como este, si me gusta esto, si buscaba este tipo de blues con este tipo de color arena y tal vez ese ponche de amarillo, entonces este podría ser un gran lugar para robar color. Bueno, como sucede es que paso mucho tiempo en Flickr mirando lo que hacen los amigos. Se trata de algunos amigos míos, Kozyndan, y son ávidos buceadores y siempre están publicando estas fotos simplemente increíbles desde el agua. Terminé viendo éste y me asusté. Yo estaba como, “Wow, eso tiene algunos azules realmente increíbles. Tiene este gran oro y transita hacia este increíble color chocolate rico”. Entonces, ¿cómo puedo usar esto como punto para robar color? Adelante y saquemos esa imagen de Flickr y la abramos aquí en Photoshop. Ahora, de nuevo, aquí está la imagen. Pasan muchas cosas realmente buenas y esto es un JPEG, y como es un JPEG, soporta millones de colores, por lo que la información de color aquí es masiva. Esta idea de tomar la Herramienta Cuentagotas y seleccionar un color y luego, “Oh, ¿me gusta eso o quiero ir un más silenciado?” Esto me llevaría para siempre correr a través de esta fotografía y encontrar color. Bueno, tengo algunos trucos. Lo que voy a hacer, es que voy a subir y decir “Guardar para Web”. Cuando dices Guardar para Web, obtienes esta bonita ventana abierta aquí, y la cosa es que si estuvieras en JPEG, notarías que la tabla de colores está en blanco, y de nuevo, es porque el JPEG y el PNG pueden soportar millones de colores. Pero podría haber visto que si realmente guardas esto como GIF, reducirás esta imagen a una tabla de colores y esa tabla de colores puede tener hasta 256 colores en ella. Ahora bien, si seleccioné “GIF32 Dithered”, lo que notarás es que la tabla de colores otra vez, reducida hasta el top 32 colores promediaron en toda la pieza. No obstante, tengo un poco de problema con el dithering, y lo que es el dithering, es que va a dispersar los píxeles alrededor para que tu ojo realmente los mezcle un poco mejor en pantalla. No obstante, si vine aquí y le dije “GIF 32 No Dithered”, entonces voy a conseguir apenas charcos de color mucho más grandes. Ahora, lo bonito es que mientras estoy en este Guardar para Web, y mientras estoy viendo esta tabla de colores, puedo decir: “Oye, ¿sabes qué? De verdad no quiero este color oscuro, déjame seguir adelante y cagarlo”. Entonces, en realidad puedo empezar a quitar tal vez algunos de los colores que no me interesan. Entonces, de nuevo, esto es bastante bueno. En realidad veo uno justo aquí. Esto no es un verde pardo arenoso muy bueno, así que puedo usar la herramienta cuentagotas para seleccionarlo realmente. Destaca en mi mesa de colores y puedo seguir adelante y despilfatearla. A lo mejor no estoy tan loco por este color y puedo seleccionar este y puedo seguir adelante y tirarlo a la basura. Entonces, puedo seguir adelante y empezar a pasar y hacer alguna edición inicial quitando algunos de los colores tal vez que realmente no me interesen tanto. De acuerdo, entonces lo que voy a hacer es que sólo voy a dar clic en “Guardar” y en realidad voy a poner esto en mi escritorio y sólo voy a llamar a este Color1.gif. Ahora, la cosa es que lo que podrías haber visto es que esta fotografía tiene algunas divisiones muy claras, sobre todo, esta sección de aquí, hay una división muy clara entre el algas y el azul, ¿verdad? Entonces, una cosa que normalmente haré, ahorré ese GIF, pero subiré a filtrar y diré “Desenfocar”, y diré “desenfoque gaussiano”, y seguiré adelante y lanzaré un desenfoque gaussiano como 10. Ahora lo que se hace es que sólo está mezclado. Todos los colores. Entonces ahora, no hay ese borde duro entre un color y otro color. En realidad, todos los colores se mezclan juntos. Lo que encontrarás es, es que si realmente lo guardo para Web otra vez, y a veces conservará los datos de la tabla de colores de la imagen anterior. Entonces, siempre hago un punto para dar click en jpeg, muéstrame todos los millones de colores y luego repick GIF 32 No Dither. Cuando hago eso, mira estas bonitas piscinas grandes de color volvió a recoger la tabla de colores aquí. De nuevo, podría tomar la herramienta cuentagotas y deshacerme de este color en particular. De nuevo, podría entrar y editar tal vez algunos de estos colores que sé que realmente no estoy sintiendo. Entonces, guardo uno que es la foto exactamente como se pretendía, y hago la segunda donde hago este desenfoque gaussiano. Entonces, voy a guardar esto como color2.gif. En este punto, puedes seguir adelante y cerrar la imagen que tienes, y puedes seguir adelante y cerrar Photoshop. Ahora, lo que solía hacer es que solía tener una aplicación Web, donde irías a una URL y decía: “Oye, ¿por qué no me das un GIF y miraré toda la información de color que hay ahí dentro y la escupo en código”. Yo usé esto por años y años y años y terminé dando una clase en Aspen, Colorado, en el Anderson Ranch Art Complex y uno de mis alumnos fue este tipo realmente genial Michael Swenson. Michael dijo: “Oye, ¿te importa si tomo ese concepto y realmente lo empaqueté como una aplicación independiente?” Esa app debe adjuntarse a este video. De lo que es, es la herramienta de recolección de color. Entonces, cuando lanzas esto, puedes ver puedes decir cargar imagen y tienes algunos otros valores aquí. Todo lo que voy a hacer es dar clic en cargar imagen y vamos a seguir adelante y simplemente cargar en el primer color1.gif y dar clic en Abrir. Se podría notar que lo que se hace es, en realidad se extrae los colores de este GIF. Ahora, puedes ordenar. Se puede decir: “Está bien, muéstramelo en HSL. Muéstrame en HSV. Muéstrame en laboratorio”. A mí me gusta el laboratorio porque lo ordena, me actualizaré más tarde muchas gracias. Entonces, me gusta el laboratorio para la clasificación. Ahora, hay algunos colores aquí que no quiero, y tal vez ahora que los puedo ver un poco mejor en lugar de ese chip de muestra en Photoshop. Lo que voy a hacer es, voy a mantener presionada la tecla Ctrl y en realidad puedo empezar a editar algunos de los colores que conozco que no quiero. Cuando los edite, en realidad esto empieza a organizarse. Ahora, digamos que solo quería ver el blues, realidad puedes mover las muestras y en realidad podría empezar a mirar el blues todo en una fila para tener una idea de cómo se están mezclando estos colores. ¿ Yo quiero quitar algunos de ellos Así que aquí, sólo estoy moviendo estos cachorros sobre. Cuando hago eso, ahora tengo una sensación mucho mejor de, oh, bien. De verdad no quiero ese color, no quiero ese color. Estos dos de aquí tienen un poco demasiado verde en ellos por lo que realmente no están gelificando con algunos de los otros. Entonces, podría quitarme eso y quitarlo. Por lo que ahora, empiezo a conseguir un poco mejor armonía con esos blues. Ahora, digamos que sólo quiero tirar una arena. Entonces, podría escoger estos dos colores de arena, y digamos que quiero esta serie de naranjas. Entonces de nuevo, podría quitar algunos de estos marrones que realmente no creo que estén funcionando, y conforme edito en realidad las muestras se hacen más grandes. Entonces, me ayudan a organizar un poco mejor lo que está pasando. Entonces, genial, ya terminamos. Gran paleta. Tengo uno, dos, tres, cuatro, cinco, seis, siete, ocho, nueve, 10, 11, 12, 13, 14, 15 colores eso es genial. Entonces, en lugar de usar más cool y tener cinco, en realidad tengo 10 colores extra aquí lo cual es genial. Ahora, si estuviera haciendo animación, en realidad podrías hacer clic en usar vista de enjambre, así que en realidad podría mirar y ver cómo sería si estos colores se movieran por la pantalla y tuvieran algún desvanecido para ellos. Puedes hacer clic en usar GridView para volver a mirar esto en una cuadrícula. En realidad, estos colores se están mezclando bastante bien. Entonces, lo que quiero hacer es hacer clic en Ver lista de colores, y obtendrás este pequeño resultado aquí. Digamos que voy adelante y empiezo un nuevo documento en Sublime Text dos y en realidad puedo hacer clic en Ver para su procesamiento. Si hago clic en Ver para procesamiento, en realidad escupe todos los colores como hexadecimales. Podrías guardarlo como un archivo ASE que luego podrías importar de nuevo a Photoshop o Illustrator, o puedo copiar datos al portapapeles. Entonces, voy a seguir adelante y copiar los datos al portapapeles, seguir adelante y hacer clic en Pegar y ahora tengo todos esos colores extraídos de esa fotografía y listos para su uso en código. Entonces, puedo guardar esto en mi escritorio como colores.text. Simplemente pondremos esto en el escritorio. Entonces, ahora, en realidad estoy empezando a guardar algunos de los colores. Ahora bien, si cierro esto y en realidad cierro la herramienta Selección de colores y en realidad la relanzo. Si fuera a importar en esa segunda foto, ahí hay que actualizar. Debes actualizar. Estás insistiendo en que actualices de inmediato. Entonces, te dejaré actualizar porque tienes que actualizar. No hay duda de que estás actualizando. Se actualizó. Herramienta de recorte. Cargar imagen. Apuntemos a la segunda. A veces con el segundo, con ese desenfoque gaussiano, los colores son en realidad en muchos casos, puede ser un poco más armonioso porque de nuevo, no tienes esas duras divisiones entre colores, tienes una gradación sutil agradable entre los colores. Entonces, a veces si quiero que los colores simplemente transiten un poco mejor, otra vez ese desenfoque gaussiano, como se podría ver, a veces hace un mejor trabajo. Entonces, guau. Gran herramienta para extraer color de las imágenes. Entonces, empecemos un nuevo video y te mostraré un pequeño truco sobre cómo seguir usando esta técnica pero en conjunto con cooler. Nos vemos siguiente video 26. Ampliación de Kuler: Está bien. Entonces, ¿cómo podemos usar a Kuler tal vez como un lugar para tomar cinco colores y expandirlo a algo más grande? Entonces, por ejemplo, veamos el set justo aquí arriba en la parte superior. En realidad no está mal. Son dos buenos blues, dos buenos greens, así sucesivamente y demás. Entonces, lo que voy a hacer es ir a captura de pantalla. En realidad sólo voy a tomar una pequeña captura de pantalla de estos colores y luego puedo seguir adelante y cerrar el navegador y tengo las muestras aquí mismo en mi escritorio. Ahora, déjame seguir adelante y abrir esto en Photoshop y de nuevo, puedo ver los colores son. Ahora, lo que voy a hacer es que quiero tomar este conjunto limitado de colores y en realidad expandirlo a algo un poco más grande. Entonces, digamos que voy a hacer un nuevo documento y voy a decir que este documento es de 600 por 200. 600 píxeles de ancho, 200 píxeles de alto y boom! Podemos ir así. Ahora, lo que voy a hacer es que voy a escoger ese azul y luego voy a mantener presionada la tecla Opción y seleccionar ese azul oscuro. Entonces, ahora tengo ambos colores sucediendo en mi negocio de muestras de color thingamajig. Entonces, lo que voy a hacer es, es cambiar a esta nueva imagen que creé y en realidad voy a seguir adelante y hacer un gradiente, y cuando hago un gradiente, puedo ver aquí arriba en la parte superior voy de un color más claro al más oscuro. Entonces, solo voy a mantener presionada la tecla Mayús y sólo voy a arrastrar de un extremo a otro extremo, y así ahora he creado un gradiente. Y por supuesto, puedo decir, “Guardar para web”, y puedo seguir adelante y decir: “Me gustaría un gif por favor”. ¿ Y cuántos colores te gustaría pasar de la luz a la oscuridad? Entonces, digamos que quería seis azules. Podrías venir aquí a Colors y solo decir: “¡Oye! Dame seis”, y mira eso. Empiezas a obtener el movimiento del color más claro al color oscuro en seis pasos. Entonces. Voy a seguir adelante y dar clic en Guardar. Vamos a seguir adelante y llamar a esto Azul y seguir adelante y guardarlo en mi escritorio. Genial. Volvamos a la imagen y hagamos lo mismo con los greens. Entonces, voy a hacer clic en el verde más claro, mantener pulsada Opción y hacer clic en el verde oscuro , volver a mi imagen aquí, seguir adelante y volver a hacer la herramienta de gradiente, y simplemente seguir adelante y dibujar ese verde. De nuevo, voy a hacer Guardar para Web. A lo mejor no quiero seis esta vez. A lo mejor sólo quiero cuatro, así que cuatro pasos de la luz a la oscuridad. Puedo seguir adelante y guardar esto en pantalla como green.gif. De acuerdo, y voy a seguir adelante y volver a cambiar a nuestra imagen aquí y podría probar algunas otras cosas, como ¿cómo se ve cuando cambias de este verde claro a este verde oscuro? ¿ Qué tipo de color va a producir eso? Y si sigo adelante y creo el gradiente y sigo adelante y hago Guardar para Web, de nuevo, tal vez podría cambiar esto a ocho colores y puedo empezar a ver esa transición del color más claro al más oscuro. Entonces, déjame simplemente guardar esto como Trans para la transición, quién sabe. Está bien. Entonces, ahora que ya lo hemos hecho, puedo seguir adelante y cerrar todas las imágenes que tengo. Ahora, creo que esto es solo blanco. ¿ Verdad? No, no es solo blanco. A ver lo que están haciendo. Entonces, hagamos esto. adelante y tomemos estas nuevas imágenes que acabo de crear y en realidad las reabramos en Photoshop otra vez, ¿de acuerdo? ¡ Ah! Yo no quería hacer eso. Continuar colocando archivos adicionales? No, gracias. Perdón por eso. Puedes hacer clic en Abrir, y déjame hacer clic en el Azul, el Verde y el Trans y hacer clic en Ok. Está bien. Entonces, ahora de nuevo este documento aquí mismo es de 600 por 200. Entonces, lo que podría querer hacer es crear un nuevo documento que sea 600 por 800. ¿ De acuerdo? Y déjame seguir adelante y agarrar ese azul y pegarlo aquí arriba, arriba en la parte superior. Déjame seguir adelante y agarrar este verde y pegarlo arriba en la parte superior y vamos a seguir adelante y agarrar el trans. A lo mejor queremos usar eso y simplemente seguir adelante y pegar eso ahí. Enfriar. Déjame ir al color de fondo porque esto en realidad no es blanco y déjame llenar el fondo con ese color. Ahora, aquí tengo cinco arriba, cuatro en el medio y ocho en el fondo y luego mi color blanquecino aquí. Entonces, ahora que tengo todo esto compilado en una especie de chip maestro, realidad podría seguir adelante y decir 32 No Dither y sólo va a encontrar todos los colores que hay en esto. No hay 32, estos son todos los colores que pudo encontrar. ¿ Verdad? Entonces, entonces puedo seguir adelante y hacer clic en master.gif. ¿Todo bien? Entonces, ahora tengo un gif que contiene todos estos colores que he extraído de Kuler. ¿ Todo bien? Entonces, déjame seguir adelante y cerrar el resto de estos perritos, y ahora, puedo seguir adelante y lanzar la Herramienta Colorpicking. Puedo seguir adelante y decir Load Image. Puedo seguir adelante y apuntar a master.gif. Nuevamente, quería hacer 32 colores pero no son 32 colores por lo que genera un montón de estos negros. Puedo seguir adelante y mantener presionada la tecla Opción y otra vez, lo siento la tecla Control, y quitar estos colores extra que no pudimos encontrar. ¿ Todo bien? ¡Wow! Sí. Estos dos de aquí al final o no trabajando para mí. Voy a seguir adelante y quitarle eso. Entonces, hay alguna edición adicional. Estos dos colores están algo bien, pero son las transiciones entre este verde y el azul. ¿ Quién sabe? A lo mejor lo estoy sintiendo, quizá no lo esté. Pero el punto es que puedes ir a Kuler. Puedes comenzar con cinco colores iniciales y luego empezar a hacer algunos gradientes sobre ellos para realmente tomar esos cinco colores base y expandirlos a una lista mucho más grande. De nuevo, podrías venir aquí y decir Ver lista de colores. Se podría decir View For processing, Copy To Portapapeles. Podría venir aquí a mi archivo de texto y pagar algunos colores nuevos en este documento. Entonces, literalmente empiezo a construir estas tablas de color a partir de imágenes. Puedo tomar una imagen que encuentre y simplemente seguir refinando las paletas, refinando las paletas. Tendré archivos de texto que quizá tengan 10 o 20 agrupaciones diferentes de colores que termino intercambiando dentro y fuera de programas que sean correctos. Impresionante. Gran truco. Internet alto-cinco. Pon la mano en el monitor. Entonces, ¿ahora qué hacemos con esto? Hemos robado estos colores de las fotografías. Encontramos estas formas realmente geniales de compilar tablas de color. Ahora, vamos a pasar a tomar estos colores y ponerlos en nuestra programación. Entonces, ahora cuando estos activos se generan aleatoriamente en pantalla, les estamos pidiendo que escojan un color de esta tabla de colores. Nos vemos en el siguiente video. 27. HColorPool: Está bien. Entonces, en Hype tenemos tres formas diferentes de lidiar con el color. En este video, vamos a estar empezando con HColorPool. Ahora, lo que he hecho es, se puede ver aquí en pantalla que estoy usando el ejemplo en H drawables el Hype_objects.zip, uno de los dibujables es HRect. Aquí puedes ver paso uno, construir, build.pde. Ahora, en este archivo en particular, estamos ejecutando nuestra configuración. Estamos ejecutando un for-loop que va a correr un número conjunto de veces y sólo los estamos agregando al escenario. Estamos haciendo algo de aleatorización para el tamaño, para la rotación, y para la ubicación. Entonces, si pruebas esta película, debes notar que simplemente arroja al azar un montón de cosas en pantalla. Entonces, lo que quiero hacer en este punto es usar esto como punto de partida. Entonces, voy a crear una nueva carpeta aquí llamada HColorPool. Abriré esta carpeta y en HColorPool, solo voy a agarrar este paso uno de HRect y arrastrarlo a ColorPool. Entonces, déjame simplemente poner eso ahí. Por lo que de nuevo, carpeta llamada HColorPool dentro de ella, paso uno, construir, build.pde. Nuevamente, cuando ejecuto el boceto, debes notar que solo está generando aleatoriamente un montón de cuadrados en pantalla. Entonces, vamos a tenerlo para que los rellenos obtengan algún tipo de color aleatorio. Ahora, para hacer esto, arriba aquí arriba, solo voy a escribir hColorPool y voy a llamarlo colores. Por lo que de nuevo, esta es una clase dentro de Hype por trabajar con color. Entonces, sigamos adelante y agreguemos algunos colores a esta piscina de colores. Entonces aquí abajo diría, “Colores iguales a nuevo HColorPool ();” para terminar la línea. Ahora, aquí adentro es donde voy a poner algunos colores. Entonces, ahora mismo, solo por el carajo, voy a poner cuatro grises y me gusta definir colores como hexadecimales como los viste saliendo de la herramienta de recolección de color. Entonces, vamos a hacer un blanco. Entonces, diré FFFFFF, hagamos una luz, incluso como un gris blanco claro F7F7F7 y hagamos otro gris claro, ECECEC, y luego hagamos un 333333 gris oscuro. Entonces, los tres primeros son muy claros; blancos a un gris muy claro y luego ese cuarto es en realidad un gris oscuro. Ahora, voy a poner dos blues. Entonces, diré 009a58 y también pondré otro azul, 00616f. Para rematarlo, voy a poner en dos colores naranja FF3300 y FF6600. Entonces, impresionante. Tenemos ocho colores en nuestra piscina para colorear y de nuevo, tratarlo como una caja de lápices de colores. Se va a subir ahí, al azar escoger uno de esos colores y los vamos a pintar al relleno. Entonces, hagamos un par de cambios. Ahora mismo, nuestro trazo en realidad es de este color naranja, así que en realidad voy a cambiar el trazo a negro. Entonces, voy a decir 000000 y ahora para llenar en lugar de realmente poner un color, mira lo que voy a hacer voy a crear un poco de espacio aquí. Entonces voy a decir: “Oye, colores. Yo quiero.getColor ()”. Ahora, lo que eso va a hacer es esa línea cuando va a establecer el relleno, en realidad va a subir a la línea nueve, va a elegir al azar uno de esos colores y agregarlo al color de relleno. Ahora bien, si sigo adelante y pruebo este boceto, debes notar que todo debería estar funcionando como se esperaba, hizo un trazo negro y aleatoriamente está recogiendo colores del pool de colores. Ahora, lo interesante es que cada uno de estos colores tiene igual probabilidad de ser elegido. Entonces, cada color obtiene una de cada ocho posibilidades de ser escogido. Entonces, lo que quiero hacer es agregar esta idea de color esperando. ¿ Cómo se agrega peso a colores específicos más que otros? Entonces, déjame mostrarte cómo hacer eso. Voy a seguir adelante y cerrar este archivo, guardar y cerrar este documento. En HColorPool para el paso uno, voy a seguir adelante y duplicar esto a un paso dos. Ahora, sigamos adelante y abramos de nuevo este archivo y en cambio, lo que voy a hacer es, voy a sacar los colores fuera de la piscina de colores. Voy a seguir adelante y poner el punto y coma final de línea, dados unos retornos duros a la baja. Lo que puedo hacer es, es que puedo decir, “Está bien, crea una piscina de colores y agregaré los colores manualmente y te diré cuántos de ellos quiero almacenar”. Entonces, permítanme darles un ejemplo. Puedo decir.add y dentro de.add podría decir FFFFFF y podría seguir haciendo esto, vamos a escoger algunos colores nuevos. Hagamos EC, C3 o blues y nuestras naranjas. Entonces, cambiemos esto por ECECECEC. Cambiemos este por CCCCCC, cambiemos éste por 333333, cambiemos esto por aquel azul 0095a8, cambiemos éste por 00616f. Entonces por supuesto hay dos naranjas; FF3300 y FF6600. Ahora, se escribe un poco diferente pero en realidad me gusta hacer el color de esta manera porque puedo especificar la importancia de ciertos colores sobre otros. Nuevamente, si tuviera que probar el boceto debería parecer absolutamente idéntico en el sentido de que escogió aleatoriamente colores fuera de la piscina de colores. Ahora, en el pasado, solía hacer algunas cosas bastante divertidas donde diría, agregar blanco, blanco, blanco, blanco, blanco, blanco, blanco, blanco, blanco, blanco, blanco. Yo lo haría para que hubiera más instancias del color blanco que estos otros colores. Entonces, cuando al azar iría a escoger, encajar escogió este se pondría blanco y si cogió al azar y yo conseguí éste, se pondría blanco, y si al azar escogió éste sería gris oscuro. Entonces, solo estaba agregando más instancias de un color con el fin de decir que quería que escogiera más de éstos que otro. Ahora, en la piscina de color hay en realidad un atajo para hacer eso. Entonces, si especificas el pool de colores de esta manera, si dices. add, puedes decir FFFFFF, y luego puedes hacer coma y luego especificar cuántos de ellos quieres. Entonces, en el caso de esto, he dicho que quiero 20 de blanco. Entonces, si esto fuera para escoger al azar, si escogiera los números del 0 al 19, en realidad sabría que se está poniendo color, ese color del blanco. Entonces ahora, si pruebo mi boceto, blanco debe ser el color predominante a lo largo de esta pieza que de hecho es. Entonces, puedo empezar ahora a especificar qué colores quiero mostrar más que otros. Entonces, por ejemplo, si me deshiciera de esto y entonces solo diría como, vale, genial. Quiero 15 naranja oscuro y cinco naranja claro, y pruebo el boceto, nuevamente debes ver que el naranja está dominando predominantemente este boceto. Entonces, al especificar pool de colores de esta manera, en realidad podría etiquetar qué colores deberían suceder más que otros. Entonces, yo diría en este boceto final, realidad hice algo como esto donde diría, había nueve de éstos, había nueve de éstos, y había nueve de éstos. Con para los tres, acabo de hacer tres de ellos y para el blues, puse dos. Entonces, se puede ver que he especificado mucho más de estos colores grises más claros y luego sólo unos grises oscuros y luego dos de los azules sobre el naranja. Entonces, si pruebo el boceto, deberías volver a ver eso, te dan mucho de este gris claro pasando, un poco del azul, y luego la naranja. Porque no lo especificé, un número es obviamente el más raro de los colores. Entonces, realmente gran truco para usar pool de colores para tomar esos colores que sacamos la herramienta de recolección de colores y para pesarlos, para especificar qué colores están sucediendo más que otros. Ahora, en el siguiente video, vamos a pasar al segundo tipo de clase de color que es Pixel Colorist. Entonces, en este punto, te invitaría a agarrar algunas imágenes, robar algunos colores, ejecutarlos a través de la herramienta de recolección de colores, y usar pool de colores para tener aleatoriamente tu obra de arte coloreada por los colores que extrajo en esas fotografías. De acuerdo, el siguiente video es Pixel Colorist. Nos vemos ahí. 28. HPixelColorist: En este video, vamos a cubrir trabajando con HPixelColorist y realmente me encanta esta clase. Es un truco que aprendí de Eric Nowitski. Es usar una fotografía y la disposición de color, y flujo, y posicionamiento de color en una fotografía como mapa para robar el color y tirar a la obra de arte. Voy a seguir adelante y crear una nueva carpeta llamada, HPixelColorist y literalmente voy a empezar de nuevo igual que lo hice con HColorPool. Voy a seguir adelante y abrir objetos HYPE, voy a Hrec y volver a copiar el paso uno. Dejemos sola piscina de color. Está hecho así que empecemos de nuevo. De nuevo, si abro el paso uno, abro build, abro build_pde, pruebo el boceto. Deberías ver solo un arreglo de puntajes. Ahora, lo que quiero hacer con PixelColorist es usar un activo externo así que en cualquier momento tengamos que usar un activo externo dentro de la carpeta build, voy a crear una nueva carpeta llamada datos y dentro de esta carpeta es donde de nuevo, vas a poner cualquier tipo de activo externo. Un jpeg, una tipografía, un SVG así sucesivamente y así sucesivamente. Si paso a Photoshop, puedes ver aquí tengo esa foto de algas, tengo un desenfoque gaussiano de 10 en él por lo que los colores son un poco machacados y voy a seguir adelante y decir: “Guardar para web, jpeg, máximo”, y solo lo voy a guardar justo en mi escritorio. Puedo minimizar Photoshop, tengo la imagen aquí en mi escritorio y voy a seguir adelante y arrastrarla a la carpeta de datos. Para este primer ejemplo, quiero cargar la fotografía al fondo para que podamos tener una idea de lo que está pasando. Para hacer eso sólo voy a hacer un pequeño atajo aquí. Voy a decir, “h.add”, y en h.add, voy a decir, “Nueva HImage”, y dentro de hImage, voy a decir “kelp.jpg”. Si pruebo el boceto, debería ir a esa carpeta de datos, debería ir al jpeg y en realidad carga ese jpeg en el fondo por lo que ahora puedo verlo recogiendo a través de los rectángulos. Los rectángulos son un poco grandes. Hagámoslos un poco más pequeños cambiando el tamaño a aleatorio, de 25 a 75. Ahora, la plaza va a ser un poco más pequeña. Ahora, voy a subir a la cima y voy a decir, “HPixelColorist”, y lo llamaremos colores, igual que hicimos en HColorPool. Entonces voy a escribir una línea aquí que diga: “De acuerdo colores, eres igual a un nuevo HPixelColorist y deberías ir a buscar kelp.jpg para información de color”. Otra cosa que también puedo hacer es especificar lo que quiero que color. Entonces en este caso voy a decir, “FillOnly”. Por lo que sólo va a ser colorear los rellenos y no los trazos. Si bajara a mi bucle de cuatro aquí, diferencia de ColorPool, no vamos a usar getColor en nuestro primer ejemplo. De hecho, voy a seguir adelante y mantener el trazo de uno, voy a cambiar el color del trazo a negro 000000 y como dice, “Solo relleno”, en realidad puedo quitar esta línea o realmente especificar el color de relleno. Eso es porque aquí abajo en la línea 23, voy a decir, “Hey colores, quiero que le apliquen color a D”, por lo que la línea 23 va a correr por todas las D que se crearon aquí, va a subir a línea 11 y mira el jpeg y tira del color en el FillOnly”. Ahora obtenemos una mejor representación de lo que realmente está pasando aquí y todo está atado al ancla. Si esta es la obra de arte y la varilla de anclaje está en el centro, cuando se posiciona aleatoriamente en pantalla, ese ancla tiene un eje X específico y eje Y, por lo que 100,100. Lo que pasa es en la línea 23 cuando ApplyColor dispara, sube hasta HPixelColorist, va al jpeg llamado kelp, va a la posición X de una posición 100, Y de 100, mira ese solo píxel que es residiendo en 100 a 100 y dice: “Oh, esto es lo que es el color”, y luego tira ese color al relleno. Entonces es hacer que cada vez que una de estas cosas se aleatoriza en nuestra pantalla. Está mirando las mismas coordenadas exactas en la imagen y tirando del color hacia el relleno. Sigamos adelante y cerremos esto y trabajemos aquí algunas construcciones extra. Entonces, voy a la opción arrastrar el paso uno a un paso dos y voy a seguir adelante y abrir build_pde y en este ejemplo, sólo voy a eliminar la línea nueve. En la primera, te muestro la imagen de fondo pero honestamente realmente no necesitamos verla. Voy a volver a cambiar mi talla a 1.5 y voy a ejecutar mi boceto. Entonces, estoy usando la imagen para la información de color pero en realidad no necesito ver la imagen. Yo sólo lo hice en el primer ejemplo para que podamos obtener una representación de cómo su posición está agarrando el mismo color en esa posición. Pero honestamente, en realidad no necesitamos ver la fotografía de fondo. Adelante y hagamos un paso tres, y si hacemos un paso tres sigamos adelante y abrimos build_pde y en el caso de éste, quiero cambiar esto de FillOnly a StrokeOnly. Cambiemos el StrokeWeight a ser tres y no necesito especificar el color del trazo pero voy a especificar un color de relleno y cambiaré el color de relleno a un gris oscuro, 111111. Ahora bien, si pruebo el boceto, esa línea nueve sólo debería estar aplicando la coloración a los trazos. Voy a seguir adelante y cerrar este archivo y voy a dar el paso tres y copiarlo a un paso cuatro y voy a abrir build_pde y en el caso de éste, voy a decir FillandStroke. Mantendremos el StrokeWeight a las tres pero puedo seguir adelante y quitar esta convocatoria para FillColor. Ahora bien, si ejecuto este boceto, realmente no se puede decir que en realidad un relleno y un trazo se está coloreando al mismo tiempo. Si de hecho pongo aquí una pequeña línea de código si dijera, “Alpha (100)", y luego corrió el boceto, verías que de hecho un relleno se está coloreando y un trazo se está poniendo coloreado y solo poniendo ese alfa (100) sí nos da la sensación que hay dos cosas separadas que se están poniendo de color. Con eso dicho, tal vez debería hacer otro ejemplo como un paso cinco y ese será el último que hago aquí. Entonces sigamos adelante y copiemos este paso cuatro a un paso cinco. Voy a seguir adelante y abrir aquí el build_pde y en el caso de éste, voy a cambiar un poco el código. En lugar de llamar a FillandStroke, solo voy a pasarle el jpeg para colorear, y en lugar de llamar a la línea 21 al ApplyColor, voy a seguir adelante y eliminar eso. Voy a seguir adelante y mantener el StrokeWeight de tres pero vamos a deshacernos del alfa y digamos: “Oye, quiero hacer algo con el trazo y oye, quiero hacer algo con el relleno”. Ahora, en el caso de este archivo, quiero que agarra el color y lo ponga en el trazo y quería agarrar el color y ponerlo en el relleno pero con el relleno, quiero aplicar alfa. Por lo que no quiero aplicar alfa a ambos, solo quiero aplicar alfa al relleno. Ahora, al igual que un HColorPool, puedo decir, “Colors.getColor”, y voy a copiar esto y pegarlo en el relleno. Ahora, GetColor en el ejemplo de HColorPool, estaba subiendo a la matriz de colores al azar escogiendo uno y tirándolo hacia abajo. Lo que tenemos que hacer aquí es GetColor en el caso de HPixelColorist ya que necesita conocer una coordenada X y una coordenada Y para que pueda buscar eso arriba en el jpeg. Voy a hacer eso diciendo, “GetColor”, pero luego consigue el eje d.x y consigue el eje d.y. Entonces, estoy poniendo ese d.x y ese d.y y me olvidé de poner una coma. Entonces d.x, d.y. voy a hacer lo mismo para el relleno. Voy a decir d.x, d.y excepto en el relleno, voy a decir: “Quiero que el alfa sea 100”. Entonces digo, “colores.get colour () ", y dentro de eso estoy diciendo, “Consigue d.x, consigue d.y”, y luego fuera de esta función llama, digo, “100 para el alfa”. Mira lo que pasa cuando ejecuto este boceto. Cuando corro esto, de repente, todos los colores son iguales. El motivo por el que todos los colores son iguales es porque d.x y d.y en realidad aún no tienen ubicación. El lugar no está establecido hasta la línea 19. Entonces en este momento, solo está regresando 00 que pasa a ser del mismo color. Entonces, Si tuviera que tomar esta línea 19 justo aquí donde realmente estoy configurando la ubicación aleatoria, el eje x e y aleatorio, y en realidad mover eso para ser lo primero para que establezca primero la ubicación aleatoria. Cuando d.x y d.y son despedidos en las líneas 16 y 17 ahora, ahora son únicos x y singulares y Así que ahora cuando ejecuto este boceto, debes notar que todos los colores ahora son únicos pero solo el relleno está consiguiendo alfa y el derrame cerebral no lo es. HPixelColorist otra vez otra herramienta realmente genial para muestrear colores fuera de una imagen, y otra vez esa imagen no tiene por qué ser una fotografía. Podrías abrir Photoshop ahora mismo, empezar a hacer gradientes, empezar a hacer piscinas de color. “ Quiero rosa aquí, quiero verde aquí”, y luego cuando generamos aleatoriamente nuestra composición, en realidad hay una estructura a lo que está sucediendo color sabio en pantalla porque hemos definido el robo del color de este particular fotografía. ColorPool, realmente genial. Especificando la caja d