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 de lápices de colores, agarrando para esas cajas crayones. HpixelColorist robando de una imagen. Entonces, ahora mismo, quiero que pasemos al siguiente video el cual va a estar usando una nueva clase llamada ColorField y ColorField nos permitirá definir gradientes radiales de color en el espacio. Cosas buenas. Vea el siguiente video. 29. HColorField: Entonces, la clase final de color con la que vamos a trabajar es HColorField. Ahora, el campo HColor probablemente sea mejor descrito como lo que estás viendo en pantalla en este momento. Es una forma para nosotros de especificar un punto y luego adjuntar un gradiente radial a ese punto. Lo que va a pasar es, si al azar adjunto ilustraciones si algo sucede aquí arriba en estas esquinas exteriores, entonces se va a poner de color negro. A medida que empieza a abrirse camino hacia el interior, va a pasar de rojo oscuro a rojo medio al rojo brillante en el medio. Ahora, lo divertido de esta clase en particular es, si yo pusiera esto por aquí y luego si creara una copia y pusiera la copia por aquí, notarías que no hay interacción entre estos dos puntos. Entonces, si cambiara esto a un azul por ejemplo, nuevo las ilustraciones se pondrían de color azul aquí. a poco transitaría a un azul oscuro. Eventualmente regresaría negro aquí en el centro y luego se abriría paso en hacer rojo. Entonces, lo bonito es que, si cambiara el tamaño de este gradiente radial, entonces cambiemos esto a 600 por 600 y déjame cambiar éste a 600 por 600. Observe lo que está pasando ahora. Tan pronto como los dos colores realmente comienzan a superponerse, se mezclan morado en el medio. Entonces, cada campo de color va a hacer exactamente lo mismo. Se pueden especificar puntos en el espacio, especificar qué color existe en el centro absoluto, especificar el radio de ese gradiente radial y si se superponen los gradientes radiales, entonces qué va a suceder es en realidad va a empezar a mezclar los colores en pantalla. Por lo que de nuevo, nos pondríamos amarillos en este punto. Empezaría a transitar a una naranja, eventualmente encontraría su camino a un rojo, así sucesivamente y así sucesivamente. Enfriar. Entonces, sigamos adelante y hagamos una nueva carpeta en pantalla llamada cada campo de color. lo adivinaste, vamos a volver a meternos en objetos de bombo y vamos a ir directo a HRect y volver a copiar el paso 1. Amor a partir de cero. Ahora, sigamos adelante y abrimos campo hColor, paso 1, construir, build.pde, y solo para reiterar, generando aleatoriamente un montón de cajas en pantalla. Entonces, sigamos adelante y subamos hasta la cima aquí y digamos que HColorField es colores es como lo llamaremos y vamos a ver qué voy a hacer aquí. Digamos, vamos a deshacernos del StrokeWeight y digamos que no hay NoStroke. Entonces, sólo vamos a estar coloreando campos. Ahora, el color de relleno que quiero poner en negro, 000000 y vas a ver por qué aquí muy pronto. Ahora, sigamos adelante y añadamos nuestro color. Entonces, voy a seguir adelante y decir, “colores = nuevo HColorField ();” final de línea. Ahora, lo que voy a hacer aquí es, con hColorField, hay que especificar cuál es el ancho y la altura del campo. Ahora, en este caso, quiero que el ancho y la altura solo sean del mismo tamaño que el boceto. Entonces, podría escribir 600, 600 o simplemente puedo hacer ancho, altura. ¿Todo bien? En realidad voy a encadenar en un color aquí. Entonces, porque no quiero que esto sea una larga línea, el semi colon me voy a dar un duro retorno para bajarlo unas líneas y usar tab para venir. Entonces, sigamos adelante y agreguemos una naranja. Entonces, voy a seguir adelante y decir, AddPoint. En el punto, yo quiero, así que tengo mi lienzo y quiero señalar estar en el centro exacto de la pantalla. Entonces, para llegar al centro, voy a seguir adelante y decir, “ancho dividido por 2, altura dividida por 2”. Entonces, los primeros argumentos son la posición del punto. Se puede poner en 100, 150, se puede poner en ancho dividir por 2, altura dividida por 2. Ahora, el tercer argumento es el color que quieres usar. Entonces voy a seguir adelante y usar naranja. Entonces, voy a decir FF3300 y luego, el cuarto argumento es el radio del gradiente. Entonces, voy a decir 0.3. Ahora, al igual que Pixel Colorist, puedes especificar qué se está coloreando. Entonces, voy a seguir adelante y decir, FillOnly (), así. Ahora de nuevo, también como Pixel Colorist, voy a seguir adelante y añadir colores.ApplyColor al d. Ok. Entonces, entonces de nuevo, eso debería correr a través de todos los ds generados aleatoriamente que son HRect y deben mapear a ColorField. Entonces de nuevo, es muy similar a un Colorist de Pixel porque se trata de que color esté en una determinada ubicación en el espacio. Entonces, el FF3300 definitivo se ubica en un eje x e y de ancho dividido por 2, altura dividida por 2. Entonces poco a poco se gradúa. Ahora, probemos el boceto y veamos qué obtenemos. Está bien. Entonces, conseguimos esa naranja justo en el centro y luego poco a poco se gradúa pero gradiente hacia fuera a negro. Se gradúa a negro porque dijimos en la línea 18 que el color de relleno era de 000000. Entonces, si por ejemplo iba a cambiar esto a blanco; FFFFFF, veamos qué pasa. En el centro de la pantalla, obtendríamos el naranja y luego pasaría lentamente a blanco. Entonces, eso es lo bonito de ColorField es que estás especificando un campo de color pero si cae fuera de ese campo de color, entonces está en transición a lo que dijiste el color de relleno base era, en este caso en la línea 18, Ya he dicho que a todo color era FFFFFF. Por lo que de nuevo, comienza en naranja y luego lentamente transita hacia el blanco. Ahora, voy a volver al negro aquí. De nuevo, puedes hacer eso con cualquier color. Podría decir un azul, podría decir 0000FF. De nuevo, si pruebo mi movei me pondría esa naranja en el medio y entonces pasaría lentamente a azul. ¿ Puedo conseguir un aleluya? Es buena cosa, esto es bueno. Eso se ve bien. ¿Eres feliz? Bastante feliz. Impresionante. Volvamos al negro, 000000. Volver al negro, eso definitivamente es una referencia ACD. Enfriar, guardar, cerrar, deja hacer un paso dos opción arrastrar. Paso dos y reabrir construir PDE. Ahora, en el paso dos agreguemos dos puntos de color, pero pongamos uno a la izquierda y otro a la derecha. Entonces, para el de la izquierda aquí, sólo voy a decir que el eje x es cero. Entonces, la x, x va a ser cero pero la altura sigue siendo, altura dividida por dos, por lo que va a estar en el centro. Entonces voy a copiar esta línea y la voy a pegar. En este solo voy a decir que su posición es de ancho. Entonces, ahora es el ancho del lienzo. Cambiemos esto a un azul, 0095a8. Pero mira lo que voy a hacer, voy a mantener el radio en el punto tres. Voy a seguir adelante y probar aquí. Nuevamente, al igual que ese ejemplo en Illustrator, tengo naranja pasando a la izquierda, tengo ese azul azulado pasando a la derecha, pero como los colores no interactúan entre sí, ese centro sigue siendo recogiendo el negro. Entonces, voy a seguir adelante y guardar y cerrar eso. Voy a guardar el paso dos a un paso tres y voy a seguir adelante y abrir construir PDE. Entonces en este ejemplo, todo lo que voy a hacer es cambiar el radio. Entonces, digamos que digo 0.5 y 0.5. Ahora, eso debería ser lo suficientemente grande donde ambos colores realmente interactúan entre sí. Entonces, si pruebo este boceto, debes notar que obtienes el naranja a la izquierda, el azul azulado a la derecha, y luego otra vez como esos colores empiezan a interactuar entre sí, obtenemos un área gris aquí en el centro . Ahora, hagamos una última construcción aquí. Entonces, guardaré y cerraré esto. Déjame ahorrar, esto es un build four y abrir construir PDE. Entonces, déjame solo hacer esto. Entonces, sabemos que esto es naranja. Oh, Dios mío. Josh eres increíble. Eso es ortografía, naranja. Esto es un azulado, y vamos a seguir adelante y añadir dos colores más. Entonces tengo uno a la izquierda, uno a la derecha, hagamos uno en la parte superior y otro en la inferior. Hagamos este color amarillo en la parte superior y haremos este color verde en la parte inferior. Ahora, yo quiero decir con dividido por dos, y la altura es cero, y el color es FFFF00. Entonces, ese es el ancho dividido por dos. Entonces, está en el punto central del ancho, pero cero en la Y. Así que consigue el de abajo, voy a decir, ancho dividido por dos y altura. Digamos que este color es 00FF00. Ahora, mira esto. Tengo 0.5, 0.5, 0.5, 0.5, 0.5, esos radios son grandes. Entonces, si pruebo el boceto aquí, debes notar que todo se está mezclando. Entonces, tal vez tengo demasiado amarillo pasando, demasiado verde pasando, y solo quiero bajarlos. Entonces, puedo cambiar el radio. Puedo decir que es 0.3 para el amarillo, 0.3 para el verde. Entonces realmente, mi naranja y azulado son los radios más grandes y mis amarillos y verdes son radios más pequeños. Ahora otra vez, si pruebo aquí este boceto. Entonces, ahora me estoy dando una sensación de eso. Veo un radio más pequeño para el verde, un radio más pequeño para el amarillo. Enfriar. Yo quiero cambiar esto un poco más, quiero decir, llenar y acariciar. Quiero copiar el relleno y pegarlo. En lugar de decir sin trazo, voy a decir, el color del trazo es negro. Añadamos también un peso de trazo de dos, y hagamos el relleno con un Alpha de 100. Entonces ahora, cuando guardo y pruebo este boceto, he especificado estos puntos de color. Estoy coloreando tanto el trazo como el relleno, pero sólo el relleno realmente está consiguiendo este Alpha. Entonces, técnica realmente genial para poner color en el espacio. Me encanta usar esto con el connect en el Leap Motion. Literalmente puedes poner puntos de color en el espacio. Entonces, si estoy usando el Movimiento Salto por ejemplo, y estoy pintando con la mano, en realidad puedo mapear colores a ciertos cuadrantes. Entonces, podrías haber visto algunos videos que he posteado donde vengo a la derecha y pinta de azul, vengo a la izquierda pinta de naranja, vengo a la parte superior, amarillo, abajo, el verde. Entonces, me gusta mucho usar campo de color para mapear colores en el espacio. Entonces, tenemos tres clases de color realmente geniales. Tenemos cada alberca de color, solo estamos haciendo un pequeño recapitulación aquí. Tenemos cada piscina de color donde estamos diciendo: “Oye, caja de lápices de colores. Estos son los lápices de colores. Escoge estos crayones. Estos son los únicos lápices de colores que puedes usar”. Tenemos pixel colorista que está tomando muestras de información de color de una fotografía, pero luego también tenemos campo de color especificando gradientes radiales en el espacio, y de nuevo, obtenemos esta bonita mezcla hermosa sucediendo. Entonces ahora en este punto, terminamos con la sección cinco, trabajando con color. Ahora vamos a pasar a las secciones seis y siete que son diseños. Entonces, nos estamos acercando tanto en cuanto a tener todo este proceso y estructura en su lugar. Estamos dibujando algunos activos visuales y entregándolos a SVG. Estamos trabajando con el color, así que vamos a poner el color hacia un lado. Entonces vamos a pasar a cada diseño de cuadrícula y diseño de forma, donde realmente estamos unidos. Mira, esto es simplemente aleatorio. Simplemente estamos adjuntando al azar ilustraciones en pantalla, pero ¿por qué no tenemos esta ilustración adjunta basada en un patrón, o en base a un diseño específico, y ambos de estos diseños nos ayudarán a hacerlo. Entonces, casi tenemos todas las piezas del rompecabezas en su lugar. Vamos a dibujar activos visuales, trabajar con un banco de color que arrancamos, y luego a trabajar con diseños para generar algún patrón en pantalla. Entonces, me estoy emocionando porque nos estamos acercando a la magia oscura. Llegando muy cerca de la magia oscura. Nos vemos en el siguiente apartado. 30. Introducción: HGridLayout: Permítanme darles un ejemplo. Estoy en Linz, Austria y estoy cenando con unos amigos. Uno de los chicos con los que estoy cenando, su trabajo en foto fue en realidad programar el cabello en Sulley en Monster's Incorporated y estábamos hablando de aleatoriedad. La aleatoriedad por su cuenta, no es particularmente bonita. De hecho, si realmente fueras a aleatorizar el cabello de Sulley en Monster's Incorporated, el cabello estaría yendo en todas direcciones y no habría ningún tipo de patrón ni elegancia en él. Dentro del marco de bombo, tenemos varias clases para generar realmente layout, generando layout aleatorio. ¿ De acuerdo? Entonces, para esta sección en particular, vamos a cubrir cada diseño de cuadrícula. Entonces, su único propósito es alinear las cosas en una cuadrícula. Entonces, tal vez estés pensando en ti mismo, “¿Por qué estaríamos usando un diseño de cuadrícula para ayudarnos con la aleatoriedad, un diseño de cuadrícula parece muy estructurado?”. Sí, lo es. Pero donde empezaremos a mutar es, ¿cómo rotaron los objetos al azar dentro de la celda de la cuadrícula? ¿ Cómo escalan aleatoriamente dentro de los confines de la cuadrícula? Creo que lo que encontrarán mucho a esa conversación que tuve con el caballero que programó el cabello de Sulley en Monster's Incorporated, estamos empezando con una estructura base y estamos aleatorizando fuera de esa estructura base. Encontrarás que mucha de esas cosas, va a ser más estéticamente agradable, porque creo que como humanos, porque creo que como humanos nos gusta la aleatoriedad, no nos gusta el caos, nos gusta que las cosas se ordenen, nos gustan las listas nos gustan los imanes en nuestro refrigerador y cada línea tiene un artículo que necesitamos comprar en el abarrotes. Nos gusta la estructura. Nos gusta que las cosas se organicen. Entonces, ¿cómo podemos aleatorizar esa organización? 31. HDrawablePool + HRect: Está bien. Bienvenido a la sección 6, que es el diseño H-Grid. Ahora antes de que realmente empecemos a sumergirnos en los diseños, hay una última cosa que quiero compartir contigo, y ese es este código que ves arriba en pantalla. En este momento este código arriba en pantalla está usando un bucle de cuatro. Cuatro bucle ejecuta un número establecido de veces y está adjuntando este activo. Ahora el problema con este código es que solo estás adjuntando una cosa. En la línea nueve, dice, D es igual a nuevo HRect y ese es el único activo con el que realmente estamos pintando. Pero ¿y si quiero hacer esta idea donde tengo múltiples activos? Estoy asumiendo que vamos a dibujar un montón de diferentes piezas de arte y mapear un montón de diferentes piezas de arte en esta composición. momento, este código sólo soporta una cosa, HRect. Entonces, para solucionar esto antes de entrar en los diseños, vamos a cubrir algo llamado HDrawablePool y lo que hace HDrawablePool es muy similar a un bucle de cuatro. Nos permite ejecutar algo un número determinado de veces, pero también nos permite especificar los activos artísticos que se están utilizando. Entonces, en lugar de solo una cosa, en realidad podríamos apuntar a cinco SVG diferentes o un HRect y un H-loop. Por lo que podemos apuntar a una gran cantidad de activos diferentes en HDrawablePool. Ahora HDrawablePool tiene muchas otras funcionalidades como si estuviéramos haciendo animación puedes hacer cosas como el reciclaje de activos que es realmente genial para la memoria, puedes adjuntar algo a la pantalla, liberar algo de la pantalla. Por lo que HDrawablePool tiene mucha funcionalidad, pero solo la vamos a usar muy básicamente y vamos a trabajar a través de un pequeño archivo de paso aquí y vamos a tener una idea de ello. Entonces, mantengamos esto arriba en pantalla sólo para que podamos ver aquí las sutiles diferencias. Entonces, voy a crear una nueva carpeta llamada HDrawablePool, y voy a seguir adelante y abrir esta carpeta y obviamente dentro de HDrawablePool quiero crear una carpeta llamada Paso 1, y dentro de ahí voy a crear una carpeta llamado Build, y dentro de Build estoy teniendo un PDE build y una copia de hype PDE. Ahora, este build PDE estoy literalmente copiando este que ves en pantalla en este momento. Entonces, voy a seguir adelante y abrir esto y sólo voy a eliminar algunos de los bits aquí. Entonces, a la izquierda tenemos usando un bucle de cuatro, la derecha vamos a usar HDrawablePool. Ahora ya verás hago configuración nula, configuro el tamaño h.Init esto, establecí un color de fondo como un liso en la línea diez sí sé que quiero hacer h.DrawStage. Entonces, sigamos adelante y empecemos a escribir algún código de pool. Entonces hDrawablePool y solo llamaremos a esta alberca, y luego lo que voy a hacer es decir pool es igual nuevo HDrawablePool y aquí es donde especificas cuántos activos quieres pintar. Entonces aquí en el bucle cuatro dijimos 100 así en la línea ocho voy a decir HDrawablePool. Vas a dibujar 100 activos. Ahora, algo de esto se va a poner un poco abstracto, pero déjame sólo escribir el código y vamos a resolver esto. Entonces, sigamos adelante y agreguemos el bit que en realidad especifica la obra que se está utilizando y creando esa obra y solicitando que esa obra de arte se pinte. Entonces, voy a seguir adelante y decir pool.auto agregar dos etapas. Ahora aquí pondría un punto y coma, y luego por supuesto puedo encadenar muchos eventos. Pero vamos a encadenar tanto que voy a seguir adelante y hacer lo que he estado haciendo en todos los archivos lo cual es bajar ese punto y coma unas líneas y simplemente empezaremos a agregar un montón de cosas que típicamente encadenaríamos solo a todas en la cuerda. Pero esto se va a poner así de largo. Entonces lo primero que quiero hacer es solo decir.add y. add es donde especifico con qué voy a estar pintando. Entonces, digamos sólo en este caso nuevo HRect. Es R mayúscula como así. Entonces esa es una de las cosas con las que me gustaría pintar es un HRect. Ahora me voy a tirar a otros bits de código aquí. Voy a decir, “On Create”, y luego voy a decir, “solicita todo”. Está bien. Ahora, es el on create que voy a sacar mucho código aquí mismo así que quédate conmigo, pero estas son las tres cosas fundamentales con las que estamos trabajando cuando estamos diciendo auto add to stage. Uno, ¿con quién estamos pintando? Entonces dije, “.add HRect”. Solicito todo básicamente dice dame todos 100 de ellos. Entonces, es esta petición todo lo que básicamente va a disparar todas las 100 cosas todas a la vez igual que hace este cuatro bucle. Cuatro bucle ejecuta todas las 100 cosas a la vez. Más tarde si estuviéramos haciendo animación no usarías request todo lo que podías hacer un temporizador y luego en realidad podrías acelerar la creación de los activos con algún tipo de temporizador. Pero en este momento sólo queremos tirar todo a la pantalla. Entonces, voy a decir solicitar todo. Ahora cuando soliciten todos los incendios y se va a disparar sabes 100 veces es esto en crear. Eso es lo que le pasa a cada cosa individual que se dibuja en pantalla. Entonces piensa que en crear se va a ejecutar un 100 veces. Entonces, es en el on create que quiero especificar básicamente este código aquí desde la línea 17 hasta la línea 11 como el tipo de cosas que las propiedades que se establecen en un HRect. Ahora voy a decir que esto en crear sí tiene un poco de estructura de código y déjame simplemente vaciar eso. Entonces, el on crear aquí esto voy a empujar este cerrar paren por unos cuantos espacios, y déjame solo resolver algunos del código que tengo que escribir aquí. Entonces, el on create en realidad va a ser un nuevo HCallBack y luego la devolución de llamada va a tener alguna información dentro de ella, y voy a decir algo como correr vacío público y objeto OBJ. Y corchete abierto cierre corchete. Ahora en este vacío público, voy a decir algo como HDrawable. D es igual a HDrawable- tan cerca Josh, tan cerca OBJ. Entonces, es esta line14 ahora así que lo que pasa es que un 100 veces esto en crear se está disparando y dentro de esto en crear tenemos esta devolución de llamada. Esta devolución de llamada crea una instancia de nuestro dibujable llamado D, y estamos diciendo: “Oye, D es igual a este objeto dibujable que has especificado aquí en la línea 10 que pasa a ser un nuevo HRect”. Ahora que tenemos este elenco como D podemos empezar a usar el mismo código exacto que hicimos aquí. Entonces, en realidad puedo tomar esto un poco de código aquí y otra vez darme un poco de retornos duros y en realidad pegarlo y yo diría d y entonces estás ajustando peso de trazo así sucesivamente punto y coma para terminar la línea. Ahora, es un poco más de código que solo usar un bucle de cuatro, pero hay muchas otras mejoras que podemos hacer si estructuramos todo de esta manera. Ahora, solo ejecutemos este boceto y veamos qué pasa. Entonces, voy a seguir adelante y guardar esto. Voy a seguir adelante y ejecutar el boceto y debería parecer absolutamente idéntico al ejemplo de cuatro bucle. Entonces, podrías estar diciendo como bien Josh lo realmente quiero usar una piscina tú no estoy del todo seguro, la respuesta es sí, y la razón por la cual es porque puedes empezar a hacer cosas como esta donde este.add es donde estás especificando con qué se está pintando. Entonces, ¿por qué no solo copio eso pego otro para otro HRect, pero en este HRect hago algo como redondeo y digo que el redondeo es 10. Entonces en este momento este pool está dibujando un 100 ítems, pero al azar va a escoger uno de estos dos HRect ya sea un HRect sin redondeo o un HRect con redondeo. Entonces, si yo fuera a probar este boceto, si miras en pantalla aquí, verías que en el caso de esto usó el HRect sin las esquinas redondeadas y éste con las esquinas redondeadas. Ahora la otra razón por la que realmente me gusta usar HDrawablePool es igual que la piscina de color. En realidad podemos esperar estos activos que se van a utilizar. Entonces por ejemplo si quisiera tener más HRects sin redondear. Podría subir aquí y decir coma 20 y eso significaría que hay 20 instancias del HRect que no tiene redondeo. Entonces, si yo fuera a probar aquí este boceto, debes notar que las esquinas cuadradas deben ser la mayoría, pero bajas y he aquí abajo sí tenemos uno que tiene la esquina redondeada. Entonces, prefiero usar esto porque podemos usar el mismo tipo exacto de espera de activos en este entorno. Ahora en el siguiente video, voy a dar este paso más allá y en realidad apuntarle esto a SVG. Entonces sigamos adelante y cerremos este video, pasemos al siguiente y tomaré la misma funcionalidad exacta de HDrawablePool, pero lo ataremos a nuestros activos SVG, ¿de acuerdo? 32. HDrawablePool + HShape 1: Realmente se está uniendo en este punto. Vamos a trabajar con HDrawablePool y adjuntarle algunos activos de SVG. Entonces, aquí hay seis activos SVG usando algunos triángulos bonitos. Aquí está el número 2 aquí el número 3, aquí el número 4, aquí el número 5, y aquí el número 6. Entonces, solo funcionó algunas formas realmente básicas. Debe tener en cuenta que, esta ilustración es de 50 píxeles por 50 píxeles. Entonces, estos pequeños bocetos en sí lo son, estos pequeños activos vectoriales son diminutos. Son 50 por 50. Ahora, lo que voy a hacer es, aquí los tengo en mi escritorio, aquí tengo esta carpeta llamada HDrawablePool. Voy a seguir adelante y dar el paso uno que acabamos de completar, y tomar esto y jalarlo en un paso dos. Voy a entrar en Build y voy a crear una nueva carpeta llamada Data. Dentro de la carpeta Datos, voy a poner estos activos externos. Voy a seguir adelante y arrastrar SVG de uno a seis, y volcarlo en esa carpeta Data. Ahora, sigamos adelante y abramos, construyamos PDE y empecemos a hacer algunos ajustes aquí. El primero es, aquí solo estamos trabajando con HWrecked. En cambio, quiero trabajar con estos activos SVG. Entonces, sigamos adelante y solo modifiquemos esto para decir, nuevo hShape y puedes especificar svg1.svg. No quiero hacer ningún activo esperando todavía, por lo que esa línea debería verse así. Ahora, hay seis de ellos, así que sigamos adelante y copiemos y dos, tres, cuatro, cinco, seis y modificamos esto a dos, tres, cuatro, cinco, seis. Entonces, ahora cada alberca dibujable se ha especificado seis activos externos SVG en los que pintar con. Impresionante. Voy a hacer algunos ajustes más aquí. Voy a cambiar HDrawable a H forma una H forma Obj. Ahora, no voy a cambiar nada. Voy a mantener todo como estaba con una pista, donde voy a mantener el peso del trazo uno, el trazo y el color naranja, el relleno un gris oscuro, el tamaño, al azar 25 a 125, no muy seguro cómo que va a funcionar, rotar aleatorio 360, ubicación ancho aleatorio, altura aleatoria. Ahora, si ejecuto este boceto, ahora debes notar que HDrawablePool ahora está pintando con estos activos SVG. Entonces, ahora lo que sea que dibuje, en cualquier herramienta basada en vectores que desee, puede comenzar a generar estos archivos SVG y agregarlos al pool HDrawable, y al igual que el pool de colores, cada uno de estos activos SVG tiene uno en seis posibilidades de que se pinten. Ahora, notarás que ninguno de los estilos surtió efecto y la razón de eso es porque no agregamos esta línea de código, donde dijimos: “Habilita el estilo y conviértalo a falso”. lo tanto, por favor anula el estilo en Illustrator y aplica este estilo abajo. Golpe de naranja y relleno de gris oscuro. Adelante y ejecuta este archivo y ahora deberíamos estar anulando el estilo dentro de Illustrator y usando lo que aquí se especifica. Ahora bien, si ese es el caso, quiero añadir algunas cosas más. He encontrado que usando cosas como StrokeJoin de Round y usando StrokeCap de Round, tienden a darme mejores resultados para lo que estoy viendo en pantalla y posteriormente cuando realmente devuelvo esto a un vector basado en al final de esta clase. Entonces, en cualquier momento que estoy trabajando con SVG, típicamente configuro mi Join y Caps para redondear. Ahora, sigamos adelante y añadamos algo de esa coloración aleatoria, por ejemplo, ¿verdad? Entonces, tenemos HDDrawablePool funcionando, tenemos escogiendo aleatoriamente algunos de nuestros seis activos SVG, sigamos adelante y añadamos algunos colores. Arriba en la parte superior, colores HColorPool. Voy a copiar los colores que hicimos antes, que eran estos blancos, estos grises claros, este gris oscuro, dos azules, y dos naranjas. Quiero cambiar el color del trazo para que sea negro 000000, y no quiero especificar un relleno porque voy a tener un pool de colores que haga eso por mí. Entonces, puedo bajar aquí, y puedo decir d.randomColors, y luego, puedo decir hey colores.fill solo así. Ahora, en este punto, debería poder ejecutar el boceto, error de sintaxis, falta de punto y coma. Sí, eso es absolutamente cierto, línea 34, boom fin de línea. Vuelve a intentarlo Josh. Corre. Súper. Entonces, ahora se puede ver. Oh Dios mío. Se está uniendo totalmente, ¿verdad? HDrawablePool es el pegamento. Es esa cosa que va a atar todas estas piezas juntas. Entonces, las líneas 13 a 18 hablando con un montón de activos externos. Línea nueve especificando algunos colores, línea 34 estableciendo esos colores, relleno solamente. Pero, lo que me encanta de HDrawablePool es que puedes hacer activo esperando igual que hicimos en HColorPool. Entonces, por ejemplo, este activo de aquí es SVG6. A mí me encanta. Entonces, podemos venir aquí y decir, hey SVG6, dame 20 de esos. Ahora, cuando en realidad ejecuto el sketch, vas a conseguir más SVG6 adjunto a pantalla que los otros cinco ¿verdad? Entonces, esto es clave porque, muchas veces dibujaré un montón de cosas y una es el punto focal. Al igual que uno simplemente funciona composicionalmente realmente, muy bien. Haré este tipo de espera, para poder precisar que ese activo se pintará más que los demás. El otro tipo de apoyo, pero tal vez no quiero que sean el foco. Entonces, es esa línea 18, donde realmente puedo especificar cuántas instancias de ese SVG se agrega, me permite controlar la cantidad de cosas que estamos viendo en pantalla. Entonces, impresionante. Voy a cerrar esto. Vamos a salvar esto. En el siguiente video, voy a hacer un paso tres, y les voy a mostrar algunos nuevos activos de SVG que incluso hacen más compleja esta composición. En cuanto terminemos eso, pasaremos a organizar esto. Porque, ahora mismo solo estamos aleatorizando el ancho, aleatorizando la altura, y eso es solo tirar cosas por la pantalla. ¿ Cómo podemos usar una clase como el diseño de cuadrícula para realmente organizar esto en una estructura? Genial. Nos vemos siguiente video. 33. HDrawablePool + HShape 2: Muy bien, adorno nacional mongol. Escaneamos esta página, increíble, montón de cosas realmente bonitas por ahí. Bueno, probablemente viste ese lapso de tiempo donde dibujé bien uno de ellos en realidad, dibujé seis de ellos y aquí están, así que aquí y acabo de nombrarlos como mongo1.svg, aquí está mongo2.svg, mongo3, mongo4, mongo5, y mongo6. Debes tomar nota que toda esta obra es de 300 píxeles por 300 píxeles, ¿de acuerdo? Ahora bien, esta obra es obviamente mucho más detallada que los primeros svgs que acabamos de utilizar en el último video. Ahora, voy a seguir adelante y cerrar estos fuera de Illustrator, aquí están en mi escritorio, voy adelante y guardo nuestro paso tres, entra en construir, entra en datos y voy a quitar estos svg1 a seis y voy a para seguir adelante y volcar en mi mongo1 a través de seis. Entonces voy a abrir mi build_pde y puedo cambiar esto a mongo1 y voy a hacer los ajustes aquí en el resto de ellos. Entonces tenemos mongo2, tres, cuatro, cinco, seis. En el caso de esto, voy a despegar la ponderación. Entonces, de nuevo, todos tienen una probabilidad uno de cada seis de ser dibujado. Ahora, cada vez que uso algo que es súper detallado, estoy un poco nervioso por la línea 11 que dice: “Oye, dibuja 100 cosas”. Podría chocar el procesamiento, podría obtener un error que dice que se queda sin memoria porque eso son muchas cosas. Entonces, intentemos cambiar esto para decir 10 activos solo para empezar. Ahora, la otra cosa que quiero cambiar es aquí abajo en el tamaño, recuerda la ilustración es de 300 píxeles por 300 píxeles dentro de llustrator. Entonces, tal vez quiero decir que el tamaño aleatorio podría ser algo así como 50 por 50 a 300. Entonces, sé que en un máximo, es su tamaño original en 300 por 300 y como mínimo sería de 50 por 50, eso puede funcionar, eso podría no funcionar. Nuevamente, solo probemos el boceto para ver. Creo que todo es bueno con universo, sigamos adelante y ejecutemos este boceto y veamos qué pasa. Entonces, en este punto puedo empezar a jugar con el tamaño. Entonces, en este caso tal vez 50 es demasiado pequeño, mira a este pequeñito justo por aquí apenas lo puedes ver, así que puedo empezar a hacer cosas ahora como, bueno 150 serían la mitad de su tamaño original y tal vez quiero ir desnuda, a lo mejor quiero ir 400 o tal vez 150 creo que es demasiado pequeño, tal vez 200, 400, así que de esa manera 300 es el medio de la carretera, vamos 100 píxeles menos y 100 píxeles más. Si volviera a ejecutar el boceto, podría ver cómo se mezclan las cosas en pantalla. Entonces, cool corrió con 10, probablemente pueda subir esto, así que vengamos aquí y digamos que la piscina tiene 50 activos svg, adelante y ejecútelo y deberíamos ver la pantalla mezclándose mucho más que antes. Tan cool, en este punto, realmente siento que estoy terminado con HDrawablePool, estamos empezando a pegar estas ideas juntas usando HDrawablePool para especificar con cuántos activos dibujamos, dot add con quién estamos dibujando, ¿ tienen algún peso o precedente sobre algunos de los otros bienes? Tenemos cada piscina de colores aquí, así que las cosas se están coloreando aleatoriamente. Es ahora en este punto que quiero alejarme de algo de esta sencillamente aleatoriedad en pantalla y empezar a estructurarlo un poco más. Entonces, el siguiente video, vamos a implementar cada diseño de cuadrícula en RhDrawablePool y empezar a organizar algunos de los activos en pantalla y ver qué variaciones podemos llegar a. Siguiente video, HgridLayout. Nos vemos ahí. 34. HGridLayout: Entonces, toda esta sección nos lleva a este punto, tirando de HgridLayout. Por lo que de nuevo, todas estas piezas del rompecabezas están cayendo en su lugar. Entonces, voy a crear una nueva carpeta en mi escritorio llamada HgridLayout y voy a ir al ejemplo de HDrawablePool, paso 2. El ejemplo del paso 2 es usar los activos SVG de 50 pixel por 50 pixel que son de naturaleza triángulo. Entonces, déjame copiar este paso 2 a HgridLayout y déjame renombrar esto como paso 1 y voy a abrir build.pde y de nuevo, tengo mis seis activos SVG dentro de la carpeta de datos. Ahora, aquí está el código. Aquí, voy a hacer algunos ajustes aquí. Una es, voy a sacar el 20 de SVG seis. Entonces, al eliminar eso, cada uno de los activos tiene una probabilidad uno de cada seis de ser dibujado. Ahora, estoy tras el.add, me voy a dar algunos retornos duros y simplemente voy a decir que DrawablePool tiene un layout adherido a él y el tipo de maquetación que le ha adjuntado es un nuevo HGridLayout. Ahora, hay algunas cosas que necesitamos especificar cuál es; ¿por dónde quieres que empiece esta cuadrícula? Entonces, voy a seguir adelante y decir, StartX es cero y voy a decir que Starty es cero. Ahora, el siguiente argumento es porque es una cuadrícula y porque una cuadrícula está formada por celdas y filas y columnas, ¿cuál es el espaciado entre cada una de esas celdas? Entonces, voy a seguir adelante y decir, espaciado y voy a decir, 50,50 porque nuestra ilustración es de 50 píxeles por 50 píxeles, así que eso debería construir una cuadrícula perfecta donde cada celda esté 50 píxeles de distancia de otra y misma bajando a la siguiente fila. Ahora, porque es una cuadrícula, hay filas, hay columnas pero en realidad solo necesitas decirle cuáles son las columnas y en este caso, voy a decir 11. Ahora, la única razón por la que tienes que especificar columnas es porque HDrawablePool tiene una serie de activos que se están dibujando. Así que 100 divididos por 11 te dirían cuántas filas va a tener la cuadrícula. Entonces, no hay necesidad de especificar filas, solo necesitamos especificar cuántas columnas queremos. ¿Todo bien? Ahora, hay algunas cosas que necesito cambiar abajo en D. Por ejemplo, no quiero especificar un tamaño porque la ilustración es de 50 por 50, solo adjuntemos 50 por 50. Entonces, voy a seguir adelante y borrar esa línea. Estoy construyendo una cuadrícula aquí, no quiero ver rotación todavía y lo último es, es esta última línea de.location. Si elimina.location esa fue la línea que aleatorizó todos los activos en pantalla, si elimina eso entonces el diseño tiene prioridad en HDrawablePool. Entonces ahora, en cualquier momento que estos se pongan creados, este diseño y todas las instrucciones para la estructura de esa cuadrícula se verán empujados a la creación de D, que es nuestra HShape. Ahora, veamos qué pasa. Entonces, voy a seguir adelante y ejecutar este boceto y debes notar algunas cosas. Una es, es nuestra grilla termina justo aquí. Ahora, la razón por la que la grilla termina justo ahí es porque sólo dijimos que el HDrawablePool era de 100. Entonces, si realmente viniera aquí y dijera, bueno, ¿qué es 11 veces 11? Eso sería 121. Entonces, si ahora ejecuto mi boceto, debes notar que es una cuadrícula perfecta, 11 filas, y 11 columnas. Entonces, 11 veces 11, la alberca dibujable debe ser de 121 activos con el fin de hacer una rejilla perfecta. Ahora, porque en la línea 38 dijimos, h.center que afecta a StartX, Starty. Entonces, ya que la obra de arte es de 50 píxeles por 50 píxeles, si el anclaje en H.center es el centro, entonces eso significa que el punto central está en 25,25. Entonces, de ahí que si nos StartX, Starty a 0,0 entonces eso significaría que la obra es 25,25 negativa en la X y negativa en la Y, así que lo tenemos colgando de este lado aquí. Entonces, en realidad lo que voy a hacer es, por el momento, sólo voy a comentar H.center. Ahora, si comento H.center y ejecuto mi boceto, ahora la cuadrícula debe comenzar en 0,0. Ahora, porque esto es 50 por 50, tenemos un poco de espacio extra donde podría poner otra fila y otro conjunto de columnas porque mi boceto aquí es 600 por 600, pero en cambio, voy a cambiar StartX, Starty para ser 25,25. Ahora, al hacer 25,25, sólo significa que esta es la posición inicial del eje X y del eje Y. Entonces, ahora consigo esta rejilla que está flotando en el espacio aquí. Ahora, porque mi obra de arte es de 50 por 50, vamos a hacer algunas pruebas aquí. Vamos a fingir por un momento que StartX era cero y StartY era cero y se podría decir que el espaciado era 55 por 55 y eso significaría que hay un buffer de cinco píxeles entre cada una de las celdas, para que pueda espaciarlas. O se podría decir que el espaciado es 50 en la X y 60 en la Y. Entonces, eso significaría que están perfectamente bien en cada fila pero luego hay un espaciado de 10 píxeles entre cada fila. Entonces, espaciado y StartX y StartY es donde puedo empezar a cambiar algunos de estos argumentos para cambiar la estructura de mi cuadrícula. Digamos esto por ejemplo, digamos que dije 25 para la X y 25 para la Y. Eso significaría que cada celda se superpone 25 píxeles sobre la anterior. Entonces, tal vez esa superposición podría ser interesante, quién sabe. Entonces, volvamos a donde quiero que esté que es StartX 25 y Starty 25 y hagamos el espaciado 50 y el espaciado 50 y sigamos adelante y ejecutemos nuestra película. Ahora, cuando ejecutamos nuestra película, de nuevo, conseguimos que esta bonita y hermosa grilla suceda. Ahora, solo a partir de esta estructura base, puedo empezar a ahorrar los pasos de un montón de maneras diferentes y simplemente modificar para ver qué pasa. Entonces, echa un vistazo a esto. Vamos a seguir adelante y guardar y cerrar esto y voy a dar el paso 1 y guardarlo como paso 2. Si abro el build.pde, podría decir: “Oye, por un momento, no quiero ver SVG del uno al cinco”. Entonces, déjame solo comentar esos fuera y solo estoy pintando con SVG seis. Adelante y corro mi película y de nuevo debería construir mi cuadrícula de 121 activos pero estoy viendo perfectamente SVG seis en todo el camino. Está bien, bien. Pero, ¿qué pasaría si rotara al azar? Cada una de estas células individuales por 90 grados. A ver qué pasa. Voy a hacer ese dicho. Rotar, ¿verdad? Entonces en la rotación, voy a decir enteros, así que ese es un número entero, y luego voy a decir aleatorio (4) veces 90, ¿verdad? Entonces al azar (4) me va a dar cero, uno, dos, tres, ¿verdad? Cero veces 90 es cero, 90, 180, 270. Entonces, obtengo las cuatro rotaciones de esta obra. Ahora, cuando roten aleatoriamente, déjame seguir adelante y ejecutar este boceto y ver qué tipo de resultados obtenemos. Ahora, mira lo que pasó. Está bien. El motivo por el que esto sucedió es porque la línea 38, comentamos fuera.Anchorat (H.CENTER), lo que significa que- no tengo un pedazo de papel. De acuerdo, eso significa que estamos girando el papel desde aquí estamos, desde cero, cero y luego lo estamos girando 90 grados y luego girándolo 90 grados, ¿verdad? Entonces, en este caso, tal vez eso.Anchorat (H.CENTER) es exactamente lo que buscamos pero comentemos la rotación y volvamos a poner el.Anchorat (H.CENTER). Ahora, cuando ejecuto este boceto, porque lo he centrado, he estropeado mi inicio X y inicio Y, porque lo he compensado de nuevo por 25 píxeles en la X y 25 píxeles en la Y diciendo. Anchorat (H.CENTER). Entonces para arreglar eso, el inicio X debe ser 50 y el inicio Y debe ser 50. Si hago eso, debería poner la cuadrícula bonita y centrada de nuevo en el medio de la pantalla con un poco de buffer alrededor del exterior. Enfriar. Ahora, esta rotación va a parecer mucho más interesante porque ahora está girando alrededor de ese punto medio y ahora, cuando en realidad ejecuto mi boceto, empiezas a ver algunos patrones realmente bonitos empezando a emerger de esta obra de arte, ¿verdad? Muy cool. Entonces, de nuevo, sólo puedo empezar a mutar esto de tantas maneras diferentes. De acuerdo, usa este SVG con estos números, usa este SVG con estos números y apenas empieza a mutar, mutar, mutar. Entonces, hagamos otra cosa. Voy a seguir adelante y cerrar esto y voy a salvar esto, y voy a sacar un paso tres aquí. En el paso tres, intentemos aleatorizar el tamaño, ¿verdad? Entonces, la obra de arte siempre es de 50 por 50, entonces ¿qué pasaría si fuera a aleatorizar y hacer el tamaño de la obra en incrementos de 50. Ahora, eso se vería algo como esto, donde dirías.tamaño, vale. Ahora, quiero que empiece en 50 píxeles más algo, vale, y en esto algo es donde pongo entero, digamos aleatorio (2) veces 50. Enfriar. Entonces, al azar (2) va a volver a cero o a uno. Cero veces 50 es cero y, pero no se puede tener un tamaño de cero, porque no se vería nada en él. Entonces por eso hago este 50 plus al final. Entonces, cero aleatorio veces 50 es cero, más 50 es 50. Enfriar. Entonces, sabemos en el nivel más pequeño, va a ser 50 por 50. Al azar una vez 50 es 50. Cincuenta más 50 es 100. Por lo que ahora esta línea 40. Trabaja conmigo aquí, amame, abracame. Esta línea 40 de aquí mismo o va a escoger un aleatorio 50 por 50 o al azar 100 por 100. Enfriar. Ahora, cuando dirijo mi pelicula. Película. Deja de decir película. Cuando ejecuto este boceto, ahora empieza a mutar en algo mucho más interesante porque en realidad estoy aleatorizando el tamaño del activo ya sea de 50 por 50 o 100 por 100, y cuando se superponen, todo esto, echa un vistazo a esto, esto termina siendo 100 por 100 pero debido a que matemáticamente creé estas líneas usando una cuadrícula dentro de Illustrator a pesar de que estoy escalando hacia arriba por dos, las líneas en realidad coincidirán, lo cual es impresionante. Ahora bien, si dijera que quería que fuera aleatorio (4), eso significaría que estoy recibiendo cuatro tallas, 50 por 50, 100 por 100, 150 por 150, y 200 por 200. De nuevo, si subía aquí y lo descomento para que estuviera usando los seis de los activos, eso sólo significaría que esta obra de arte se va a poner incluso más extraña. ¿ De acuerdo? Al igual que así. Ahora mismo, todo está girando alrededor de ese punto central, y así que solo recuerda que si comento ese Anchorat, entonces esa rotación es un barrido mucho diferente y si es un barrido mucho diferente, entonces tal vez eso vaya a funcionar para mí mejor en pantalla. Entonces, este tipo de ideas es algo con lo que he estado jugando bastante, y en realidad quiero mostrarte una URL aquí donde tengo mi página de un Pinterest. En mi página de Pinterest, he estado agregando todo mi archivo de diseño, y aquí hay un pequeño proyecto llamado la Red Social. El Social Grid soy yo tomando esta sola idea, este código que tienes justo aquí, ¿verdad? Entonces, déjame solo encontrarlo, bingo! Eso es SVG seis con la rotación aleatoria 90 grados. Entonces, tomé este motor y muté todos los parámetros para tratar ver cuántos tipos diferentes de arreglos de rejilla se me ocurrió, ¿verdad? Entonces, algunas eran muy básicas y luego otras me aleatorizaría la rotación, la escala y empezaría a conseguir estos patrones realmente, realmente fascinantes. Lo que es bonito de la serie es que, todo esto en este momento es solo blanco y negro, no hay ningún color en absoluto agregado a estos documentos y solo agregando color, solo agregamos una capa entera otra a la complejidad de estos patrones. Entonces, vi que algunos de ustedes son diseñadores textiles, ¿no? Entonces, esto debería ser plátanos. Significa que puedes trabajar en Illustrator, tipo de pequeñas texturas y luego usar HgridLayout para construir esta estructura pero aleatorizar dentro de la estructura. Nuevamente, en el caso de este archivo en particular, lo único que estoy aleatorizando es su rotación aleatoria y su tamaño aleatorio pero estoy permitiendo que el diseño realmente estructure la obra en pantalla en un sistema muy rígido, un sistema de cuadrícula. De nuevo, si has aprovechado la oportunidad para mirar mi página web, ojalá, algunos de ustedes han estado viendo las cosas que he estado haciendo con Libs Elliot en Toronto, Canadá donde, de nuevo, está tomando este archivo que tienes en este momento y generando aleatoriamente estas rejillas y luego usando esta información de cuadrícula para realmente hacer edredones y ella está cosiendo a mano estos edredones donde es justo, mente soplada, lo cual es increíble. Está bien. Por lo que cada diseño de cuadrícula. Realmente gran ejemplo aquí mismo, así que ojalá descargues el archivo zip, mutarás algunos de estos pasos y descubrirás qué tipo de patrones puedes crear cambiando algunos de estos números. Además de eso, puedes empezar a hacer tus propios activos visuales dentro de Illustrator y conseguir un sinfín de diferentes cosas que suceden. Por ejemplo, aquí hay un conjunto perfecto de cosas que se encuentra debajo de cosas que hice por- oh, aquí estaba una portada de libro que hice, Aim High, Keep Moving. Nuevamente, eso es usar el mismo sistema exacto donde estoy usando el diseño de cuadrícula y solo un nuevo conjunto diferente de geometría y mapeo que a una cuadrícula que es super cool. Después hubo otra que hice. Déjame sólo tratar de encontrarlo. Déjame ir a mis tablas y quiero buscar Orbit. Ahí vamos. ¿ Qué pasa cuando se mezclan en algunas formas circulares? Está bien. Nuevamente, esto está usando HgridLayout. Entonces, estoy súper emocionada de ver qué tipo de activos que dibujas dentro de Illustrator y qué pasa cuando empiezas a mapearlos para llegar a este tipo de arreglos. Ahora, esta sección está terminada. Vamos a pasar a la sección siete que es HShapelayout y vas a perder porque HShapelayout es increíble. Entonces, nos vemos en el siguiente apartado. 35. Introducción: HShapeLayout: Te voy a mostrar un montón de ejemplos usando esta siguiente estética. Este es el diseño en forma de H y me encanta la capa en forma de H. Digamos, dibujo un ramo de flores, ¿verdad? Entonces, dibujo un ramo de flores independientes y luego lo que puedo hacer es que en realidad podría hacer otro activo que es mi mano. Entonces, lo que hace el diseño de forma es que mira el dibujo y si golpea un píxel transparente, vuelve a intentarlo. Entonces, digamos que dibujo seis flores y digamos que escribimos un programa que diga, quiero dibujar 10 mil flores. Lo que pasará es que empezará a picar aleatoriamente hasta que me golpee la mano. Entonces, toda mi mano en realidad estará conformada por todas esas pequeñas flores independientes que hicimos, y en realidad puedo empezar a definir estas formas aleatorias en mi lienzo y cada vez que se ejecute el programa, va a di: “Oh, tengo estas formas. Tengo estos bancos de activos”. Se dan instrucciones sobre qué tipos de bancos de activos se apegan a qué tipo de formularios. Lo creas o no, toda esta impresión se genera en realidad a partir de este guerrero. Se puede ver que tiene un pequeño cinturón aquí y si miras el patrón que se genera a lo largo de este cinturón, eso es realmente justo aquí. Se puede ver que esa forma de cinturón sucede justo en esta cosa de arriba aquí. Aquí, se vuelve a aleatorizar. Se puede ver el cinturón. De lo que te queda ya no es el material fuente original. Ya no es este guerrero. Es esta amalgamación de abstracción que para mí, aquí es donde estoy encontrando belleza en tomar algo familiar y remezclar de una manera donde se convierte en algo completamente diferente. 36. HShapeLayout: Muy bien, Sección Siete. Tanto impresionante, apenas puedo contenerme. Me encanta este próximo proyecto. Esto es lo que voy a hacer. Acabamos de cubrir cada disposición de cuadrícula, Sección Seis. Si voy a HgridLayout, y voy al paso uno, y voy a construir, y voy a build_pde, y corro esta película, construye una cuadrícula. Entonces, vamos a trabajar fuera de este expediente. Entonces, voy a crear una nueva carpeta llamada HShapeLayout, y dentro de hShapeLayout, voy a copiar este paso uno. Entonces, HShapelayout, estoy copiando el paso uno, y sigamos adelante y abramos este build_pde aquí. Entonces, algunas cosas buenas. Ahora bien, ¿qué hace HShapelayout? Se trata de plátanos. Lo que voy a hacer es mirar mi película, mi película es 600 por 600. Entonces, voy a rockear a Photoshop y voy a crear un nuevo documento que es 600 por 600. Ahí está, y me voy a llevar la Herramienta Tipo y he escogido Georgia Bold en el punto 400, y sólo voy a escribir: “Hola”. Voy a seleccionar esto y centrarlo así. Ahora, lo que voy a hacer es, puedes ver tengo dos capas aquí dentro de Photoshop, voy a esconder la capa de fondo. Entonces, es transparente, y tengo este tipo que está pasando el rato. Lo que voy a hacer es Guardar para Web, y bajo Guardar para Web, voy a venir a PNG-24. Ahora, lo bonito del PNG-24 es que apoya la transparencia, y así se puede ver que consigo mi pequeña chequera en segundo plano porque PNG puede manejar la transparencia. Voy a guardar esto en mi escritorio como shapeMap.png. ¿ Enfriar? Enfriar. Hecho. Ahora, voy a minimizar esto porque vamos a volver a esta ciencia. Ahora, estoy dentro de la carpeta llamada HShapeLayout. Yo estoy dentro del paso uno. Yo estoy dentro de build, y hay una carpeta llamada Data y ahí es donde ponemos todos nuestros activos externos. Entonces, voy a copiar o voy a mover shapeMap.png a la carpeta Datos. Ahora bien, este es algún negocio malvado. Voy a editar este build_pde. El primero es que no quiero dibujar con todas estas formas. De hecho, solo quiero dibujar con svg5, y svg5 pasa a ser un triángulo. Entonces, hay sgv5, un bonito triángulo hermoso. Entonces, sólo vamos a dibujar con ese triángulo para empezar. Voy a modificar algunas cosas aquí dentro. Todavía no vamos a hacer maquetación, sólo un segundo. Vamos a habilitar el Estilo (falso). En realidad no quiero tener un derrame cerebral. No quiero tener un derrame cerebral, soy demasiado joven. Soy demasiado joven. NoStroke, mi siguiente clase, ¿cómo hacer humor nerd? Ancla en H.CENTER, me gusta eso, y voy a poner algunas otras cosas pero voy a esperar. Ahora bien, ¿qué hace ShapeLayout? Bueno, lo que puedes hacer es, puedes decir que el diseño es igual a nuevo HShapeLayout. Ahora, hay que pasar un argumento de.target. HShapelayout quiere saber, ¿qué estoy usando? ¿ Qué estoy usando como forma? Aquí estoy siendo vaga por la razón. Ahora, quiero definir cuál es la forma y así, digo, .target (). Voy a seguir adelante y poner ese paréntesis de cierre en su propia línea y eso es porque voy a tabular por aquí, y decir que el objetivo de forma es un nuevo hImage y dentro de nuevo hImage voy a decir el nombre de nuestro PNG, así que ShapeMap. png. Ahora, sigamos adelante y cambiemos aquí arriba en la parte superior, HDrawablePool a 100. Estoy realmente emocionado por esto. Lo que va a pasar es que HShapeLayout supere el objetivo, y el objetivo es la forma a la que los activos deben adherirse. Entonces, si fuera a guardar y ejecutar este boceto, lo que sucede en el caso del diseño de formas es, eso es raro, ¿qué está haciendo? Bueno, está mirando tu imagen, está eligiendo aleatoriamente una posición, y si ese píxel es transparente, vuelve a elegir. De hecho, sigue escogiendo un espacio en la imagen hasta que en realidad golpea píxeles no transparentes. Si golpea píxeles no transparentes, entonces la obra de arte en realidad se adhiere a ella. Por lo que ojalá en algún lugar, las mentes están explotando. Porque significa que dentro de Photoshop ahora, en realidad puedo usar gesto, y forma, y escribir, y puedo dibujar formas. Puedo dibujar lo que quiera, y las ilustraciones se pegarán a píxeles no transparentes. Entonces, vaca santa, hagamos algunas ediciones aquí. Pool es igual a HDrawablePool (2000), quiero adjuntar 2,000 piezas de arte. Ahora, nuestra obra de arte es de 50 píxeles por 50 píxeles, así que quiero bajarla un poco. Entonces, lo quiero más pequeño para que realmente puedas verlo pegarse al tipo. Entonces, voy a decir.size y dentro de el.size, sigamos adelante y pongamos entero y aleatorio. Digamos que en un mínimo, son 10 píxeles por 10 píxeles, y un máximo de 30 píxeles por 30 píxeles. Añadamos también una rotación aleatoria. Entonces, voy a seguir adelante y poner un giro aquí, y voy a decir (int) aleatorio (360). ¿ Estás listo? Aquí vamos. Adelante y ejecuta el boceto y ahora 2,000 de svg5 se pega a cualquier forma que hagas dentro de Photoshop. Por lo que esperemos ahora, estás empezando a entender las posibilidades de cómo hago mucho de mi impresión generativa. Ya sabes muchas veces, voy a decir, “Bueno, bien, quiero este tipo de forma aquí y al azar quiero generar un montón de cosas justo en esta área”, y el diseño de formas pegará mis activos aleatorios a esa zona. Entonces, echa un vistazo a esto. Guardemos esto, cerrémoslo, sigamos adelante y guardemos un paso dos. Dentro del paso dos, voy a abrir build.pde. Voy a cambiar de nuevo a Photoshop aquí. Puedo seguir adelante y cerrar esto. En realidad, en el paso dos, construir , datos, voy a reabrir shapeMap.png. Entonces, si tengo esto abierto, solo echa un vistazo a esto, puedo borrar esto. Probemos algunas cosas, pongamos un cuadrado ahí, pongamos aquí un rectángulo, cambiemos a la herramienta de elipse y dibujemos un círculo. Entonces, solo estoy definiendo algunas formas. Ahora, si fuera a, nuevo, guardar esto como PNG, y esta vez pongámoslo dentro de ShapeLayout, paso dos, construir, y datos. Entonces estoy sobrescribiendo shapeMap.png, reemplazar, reemplazar. Acceda al texto subline dos, guarde y ejecute el boceto. Cierto, se pega a esos activos. De nuevo, incluso podrías entrar aquí con un Paintbrush si quisieras, y podrías hacer este tipo de negocios. Guarda como PNG, sobrescribir, shapeMap.png, vuelve a cambiar al texto subline dos, adelante y construye tu boceto, y de nuevo, ahora verás que en realidad está mapeando a esa forma. Entonces, ShapeMap es simplemente brillante porque si empiezas a mirar algunas de las cosas que he estado haciendo, así que vayamos a mi página de Pinterest, y veamos algo. Echemos un vistazo a este tipo de aquí. Haremos este morado aquí. Entonces, si miras esto, mira estos pequeños círculos blancos. ¿ Te das cuenta de que ninguno de los círculos blancos está aquí abajo? ¿Por qué es eso? Bueno, eso es porque definí un ShapeMap justo en esta área, así como esto, y dije: “Oh, bien escucha. Yo sólo quiero que los círculos se adhieran a esta zona”. Entonces, cuando ejecuto la película, obtendría al azar círculos dentro de esas posiciones. Entonces ahora, puedo empezar a definir formas en mi código, y decir: “Está bien, quiero cosas mapeadas a estas formas”. De nuevo, sigo empoderando la grandeza del azar pero está controlada. Es un escenario controlado estoy definiendo qué va a dónde y todo eso. De verdad, espero que realmente vayas a disfrutar de esta clase, porque HShapelayout es divertido. Entonces, en este punto, puedes tomar este código que he cerrado y adjuntado a esta lección y puedes volver a usar Photoshop para definir cualquier forma. El tema a recordar es que HShapeLayout está buscando píxeles no transparentes. Entonces, si un píxel es transparente, va a seguir recogiendo hasta que encuentre un píxel no transparente. Si golpea un píxel no transparente, entonces la obra de arte en realidad se pegará a esa forma. Entonces, súper emocionante. Genial. Pasemos a la Sección Ocho y hablemos de cómo vamos a tomar los archivos HgridLayout, los archivos HShapeLayout, y cómo vamos a exportarlos a algunos activos con los que podamos trabajar. ¿ Son imágenes basadas en pixel? ¿ Son imágenes basadas en vectores? Entonces, pasaremos a eso en la última sección, y luego hablaremos de algunos pensamientos finales. Está bien, nos vemos en la siguiente sección. 37. Introducción: Archivos de salida: Entonces, ahora estás en la etapa final de este proceso. Entonces, en este punto, lo que quiero hacer es sacar este contenido de la pantalla y volver a algún formato con el que pueda trabajar. Echemos un vistazo a esta composición por ejemplo. Nuevamente, generado aleatoriamente, pero devuelto a un sistema basado en vectores. Yo quería que esta zona fuera muy, muy tranquila. Entonces, todos estos pequeños círculos diminutos que se generaron aleatoriamente en esta sección, pude eliminar. Ahora, mira el número ocho, si miras directamente hacia abajo, hay un círculo que está perfectamente alineado en el centro con el ocho. ¿ Eso sucedió al azar? No, Josh puso eso ahí. Ese círculo probablemente se generó por aquí y yo muy deliberadamente lo moví directamente debajo de los ocho. Entonces, mientras que el 90 por ciento de esto se genera aleatoriamente, 10 por ciento estoy entrando y en realidad limpiando cosas, moviendo cosas alrededor. Mi esperanza es, es que estés lo suficientemente cómodo con el ilustrador, que te gustaría volver a entrar en este entorno basado en vectores, para que puedas hacer este tipo de edición obsesiva compulsiva. Digo TOC. Estamos saliendo. Estaban saliendo. 38. letsRender / incorrecto: Esto es todo. Sección ocho, salida de ellos archivos. Entonces, guau, tenemos todo esto en su lugar. Hemos dibujado nuestros activos visuales. Hemos aprendido sobre cómo pintarlos a la pantalla. Hemos aprendido a robar colores de las fotografías y meter eso en nuestro trabajo. Hemos aprendido a adjuntar estos activos externos en un diseño de cuadrícula. Hemos aprendido a adjuntar estos activos a una forma. Ahora bien, ¿cómo lo sacamos del procesamiento? Ahí está pienso en cuatro videos que me quedan por hacer. Empecemos con el primero. Entonces, voy a hacer una nueva carpeta llamada LetsRender. Está bien. Dentro de LetsRender, voy a ir a HgridLayout, y voy a ir al paso 1, y voy a abrir build.pde, y sólo voy a mostrarles este archivo. Este es el que está usando HgridLayout. Ahora bien, este código que vamos a escribir va a funcionar en todo. Entonces, cool, veo esta cuadrícula en pantalla, quiero, quiero tomarla. Ahora, lo que voy a hacer es que voy a copiar el paso 1 fuera de HgridLayout y lo voy a copiar a LetsRender. Ahora, sigamos adelante y abramos este build.pde, y por qué no hacemos lo que el sitio web de procesamiento nos dice que debemos hacer. Lo que dice es, bueno, bien, si la línea 47 es donde estamos dibujando el escenario, estamos pintando el escenario, vamos a ahorrar lo que está pasando. Entonces, si fueras a ir al sitio web de procesamiento , diría SaveFrame. En SaveFrame, hay tantos formatos de imagen diferentes que podrías pasar aquí. Por ejemplo, podría decir render.jpg. Ahora, si guardo y construyo este boceto, mira lo que le pasa a mi carpeta. Veo lo que pasa en pantalla, y en mi carpeta, escupe render.jpg. Ahora, puedo seguir adelante y cerrar el boceto, puedo abrir el JPEG dentro de Photoshop, y seguro comprobar que hacia fuera, se renderizó lo que veo en pantalla. Ahora, es un JPEG y JPEG le tiene algo de compresión. Si realmente comienzas a acercar aquí, JPEG no es nuestro amigo. Entonces, es demasiado masticable Chewbacca para Josh Davis. Entonces, eso no me gusta. Entonces, voy a cerrar esto fuera de Photoshop, y voy a volver atrás y voy a cambiar esto. Podría decir render.png, podría ahorrar, podría construir nuestro boceto. Debes notar que escupe un render.png dentro de tu carpeta de compilación. Puedo seguir adelante y cerrar este boceto. Podría abrir este render.png dentro de Photoshop y mucho mejor. No es un formato comprimido, no obtenemos ningún tipo de ese extraño negocio de artefactos JPEG, así que todo es bueno con el universo. A mí me gusta PNG, PNG es agradable. Pero hay algunas cosas que realmente no me gustan, lo cual es ¿no sería genial si fuera transparente? ¿ De verdad tenemos que renderizar el fondo? Ahora mismo, esto es plano. ¿ Y si quisiera renderizar esto y simplemente renderizarlo como un PNG transparente? Como se puede ver justo fuera de la puerta , en realidad no hace eso. Ahora, solo para mostrarte si realmente no querías ninguna compresión en absoluto y quieres solo archivos crudos, claro, podrías decir render.tif y eso escupirá un archivo TIFF. También podrías hacer TARGA, y por supuesto si renderizas tu boceto, verás que también escupe un archivo TARGA encendido. Entonces, esto está bien, pero falta en algunas áreas. Entonces, lo que realmente me gustaría hacer es ampliar en esto de alguna manera. Entonces, lo que voy a hacer en este punto es detener este video, sigamos adelante y empecemos uno nuevo, pero esta vez vamos a tratar de hacer las cosas un poco mejor. Salida dos, siguiente video. 39. letsRender / mejor: Está bien. Entonces, ahora, quiero hacer algo de salida más avanzado. Entonces, vamos a dar este paso uno y sólo voy a copiar el paso uno a un paso dos. Está bien. Dentro del paso dos, dentro de construir, voy a seguir adelante y solo basura estas imágenes existentes que se copiaron y voy a abrir build.pde. Ahora, voy a hacer algunos cambios. Ahora mismo, sólo hemos estado usando setup, está bien. Lo que quiero hacer es darme algunos retornos duros aquí para subir estas cosas. Voy a deshacerme de este SaveFrame, y ahora mismo, acabamos de estar en la configuración. Bueno, como resulta, me gustaría introducir un empate vacío, ¿de acuerdo? En el sorteo vacío, quiero copiar este h.DrawStage en él, bien. Ahora bien, si recuerdas de antes, un empate es un bucle. Corre una y otra vez y otra vez. Bueno, podemos cancelar eso diciendo NoLoop. NoLoop básicamente ejecutará la función de sorteo una vez y luego la apagará, ¿de acuerdo? Entonces, NoLoop va a apagar esa función de sorteo después de que se ejecute una vez. Ahora, quiero introducir una nueva función así llamada void SaveHires. Lo que quiero hacer es justo antes de llamar a NoLoop es que quiero llamar a SaveHires, ¿de acuerdo? Al llamar a esta función, voy a pasarle un entero, ¿verdad? Todo esto tendrá sentido aquí en un momento. Voy a pasarle uno, ¿de acuerdo? Aquí abajo en la función, voy a decir: “Oh, Dios mío, hay un número entrando”. Está bien, así que déjame decir int, y luego llamaremos a este ScaleFactor, ¿de acuerdo? Entonces, int ScaleFactor. Ahora, lo que voy a hacer es escribir un poco de código que me permita hacer algunas cosas por encima y más allá del paso que uno hace. Voy a seguir adelante y decir PGraphics, y llamaremos a esto contrataciones es igual a CreateGraphics, ¿de acuerdo? Dentro de CreateGraphics, voy a decir tiempos de ancho ScaleFactor y luego voy a decir tiempos de altura ScaleFactor y luego voy a pasarle un renderizador. Entonces, voy a decir JAVA2D. Enfriar. Entonces, estoy creando un PGraphics que es ancho veces el ScaleFactor y altura veces el ScaleFactor, pero lo estoy pasando uno. Entonces, si subes a la cima aquí, nuestro boceto es de 600 por 600, entonces 600 veces 1 es 600 para el ancho, y 600 veces 1 para la altura es de 600, ¿verdad? Entonces, esperemos, vas a poder ver aquí, podrás pasar un número para renderizar el tamaño de la imagen que deseas en base a algún ScaleFactor. Entonces, si dijera SaveHires dos, en lugar de que renderizara un gráfico que es 600 por 600, en realidad renderizaría nuestro gráfico 1200 por 1200. Entonces, puedo renderizar una versión de res más alta que lo que realmente estás viendo en pantalla. En pantalla, todavía verás el 600 por 600 pero en nuestra carpeta, estaremos emitiendo esa imagen a 1200 1200 si SaveHires se pasó el número dos, pero llegaremos ahí. Ahora, después de definir este PGraphics, solo voy a seguir adelante y decir BeginRecord y después de BeginRecord, tienes que endRecord así. Dentro del BeginRecord, voy a pasarle este PGraphics de contrataciones, ¿de acuerdo? Entonces voy a decir que los contratados deben escalar lo que venga como el ScaleFactor, ¿de acuerdo? Entonces, estamos escalando la obra de arte en base a nuestro ScaleFactor aquí pero de nuevo, ahora mismo, es solo una así que va a tener el mismo tamaño exacto que nuestro escenario, ancho y altura. Entonces voy a poner aquí un poco de declaración if-else. Entonces, déjame solo hacer si y luego déjame definir una otra y tabular estos así. Dentro del if, voy a decir si contrata igual a nulo, entonces debería hacer h.DrawStage, ¿de acuerdo? Ahora, si contrataciones no es igual a nulo, voy a decir h.Stage entonces voy a despedir a nuestro pequeño chico interno, PaintAll, y dentro de PaintAll, necesito pasarle alguna información. Entonces, dentro de PaintAll, necesito pasarlo el PGraphics. También quiere saber si está usando 3D o no. Ahora mismo, esto sigue en desarrollo porque queremos ver si podemos renderizar espacio tridimensional a un gráfico bidimensional, pero esto es un trabajo en curso. Entonces el tercer argumento es el Alfa que viene, ¿de acuerdo? Dentro de PaintAll, nuestro PGraphics en realidad se llama contrataciones. No estamos usando 3D así que es un valor booleano, solo voy a decir falso, y para Alpha, solo voy a pasar un valor de uno, ¿de acuerdo? Ahora, tenemos nuestro EndRecord y después de que terminemos de grabar, ahora voy a renderizar la imagen. Otra vez, JPG, no nuestro amigo. Te podría gustar si quieres un objetivo pero quiero llegar a PNG. Entonces, voy a ir a decir contratos.guardar y dentro de la guardar, voy a decir por favor guárdalo en render.png, ¿de acuerdo? Ahora, estoy cavando esto, así que vamos a ver qué pasa aquí. Voy a seguir adelante y ahorrar y voy a construir el boceto. Ojalá no tengamos ningún error. Nosotros no. Boom. Se ejecuta y podemos ver que rinde aquí el render.png dentro de nuestra carpeta. Entonces, por lo que puedo decir, sigamos adelante y abramos este png, se ve idéntico al paso uno. Sí, lo es, ¿de acuerdo? Es absolutamente idéntico. No obstante, en realidad hay alguna funcionalidad oculta aquí. Echa un vistazo a esto. Esto realmente representó una imagen de 600 píxeles por 600 píxeles. Entonces, si elimino este PNG y pido esta llamada de función para guardar contrataciones con un factor de escala de dos, si guardas y construyes tu boceto, lo que está pasando en este punto es que lo muestra 600 por 600, ¿de acuerdo? Pero si yo cerrara esto y de hecho miro al PNG, te darías cuenta de que en realidad ha sido arrojado a 1200 por 1200. Entonces, si vengo aquí al tamaño de la imagen, puedo ver que las dimensiones se renderizaron en 1200, 1200. Entonces, ahora puedo renderizar esta imagen de cualquier tamaño que quiera a pesar de lo que estamos viendo cuando construimos el boceto. Entonces, ser capaz de renderizar a un tamaño mucho más grande es algo que creo que es extremadamente útil. Ahora, hay otro poquito aquí y ese es el tema de la transparencia, ¿no? Es un PNG, así que voy a volver aquí, voy a borrar este PNG, y termina que arriba aquí arriba, estoy configurando el color de fondo en un gris oscuro, 20, 20, 20. Bueno, lo tienes. En realidad puedes pasar a segundo plano y decir H.CLEAR. H.CLEAR sería un fondo transparente. Entonces, si guardo y construyo este boceto, debería verlo renderizar en pantalla. Ahora, obviamente ya no estoy viendo el fondo de 20, 20, 20 pero si en realidad cierro este boceto y vengo a renderizar PNG y abrir esto dentro de Photoshop, en realidad ha renderizado esto con transparencia. Entonces, ahora, puedo meter un montón de cosas diferentes en Photoshop y colocarlas una encima de la otra, puedo establecer un color de fondo diferente, puedo empezar a modificar esto de una manera que creo que es un poco más robusto que el paso uno. Entonces, estoy realmente emocionada con esto, ¿de acuerdo? Ahora, en el siguiente video, vamos a hacer un paso tres, ¿verdad? En el paso tres, volvamos a devolver esta salida a los datos vectoriales. Entonces, salida tres, nos vemos ahí. 40. letsRender / MÁXIMO: Está bien. Estamos en LetsRender y vamos a rockear un paso tres. Paso tres para mí es todo, es el santo grial de renderers. Si estamos usando activos basados en vectores, entonces quiero volver a una salida basada en vectores. Entonces, pongamos en práctica eso. Voy a dar el paso dos y en realidad voy a copiarlo a un paso tres. Voy a abrir la carpeta Build. Voy a eliminar render.png y seguir adelante y abrir build.pde. Ahora, voy a modificar parte del código hacia abajo en la parte inferior, pero antes de hacerlo, hay algunas cosas que quiero hacer arriba en la parte superior. El primero es, es que si vas a volver a renderizar a un formato basado en vectores, en realidad necesitas importar una biblioteca para poder hacer eso. Lo que vamos a hacer es, está arriba en la parte superior, simplemente vamos a escribir processing.pdf.*;. Entonces, esto es importar la Biblioteca PDF del procesamiento para que, nuevo, podamos trabajar en vector y volver a salir como vector. Ahora, lo segundo que quiero cambiar es la línea ocho, donde dice H.CLEAR. Ya no estoy trabajando con un PNG transparente, esto está basado en vectores, así que estoy bien para ver el fondo en este punto. Entonces, en realidad voy a volver a poner el fondo a nuestro gris oscuro del 202020. Desplazándose hacia abajo hasta el fondo, vamos a hacer algunos cambios aquí. Obviamente, ya no quiero llamar a esto SaveHires, quiero llamar a este SaveVector. En los SaveHires, pasábamos en un factor de escala. Este es vector y debido a que es vector, no importa si ese archivo vectorial es del tamaño de un sello postal o es del tamaño del Taj Mahal. Es vector, puedes escalarlo a cualquier tamaño deseable que desees. Entonces, no necesitamos pasar en un factor de escala, solo podemos decir disparar esta función llamada SaveVector. Entonces, sigamos adelante y actualicemos la función aquí abajo a SaveVector. Nuevamente, puedo matar este argumento por factor de escala y ahora voy a modificar nuestros PGraphics y, lugar de usar contrataciones porque, de nuevo, a mí eso me parece un poco específico que estés renderizando una versión de res más alta que tal vez lo que veas en pantalla, sigamos adelante y cambiemos esto a pGraphics tmp. PGraphics temp es igual a nulo. Ahora, lo siguiente que voy a hacer es decir que tmp es igual a BeginRecord, y dentro del BeginRecord voy a decir, quiero que grabes pero en realidad quiero que grabes a PDF. Entonces, vamos a estar dando salida a un documento PDF. Ahora, el segundo argumento es el nombre del archivo. Entonces, solo diremos render.pdf. Ahora bien, no necesito estas líneas en 60 y 61, así que puedo seguir adelante y eliminarlas porque de nuevo, se relacionaron con la salida basada en píxeles, así que puedo eliminar. Esta afirmación if y else solo modifica un poco porque cambiamos el nombre a tmp, así que voy a decir si tmp es igual a null y aquí abajo en lo demás, h.stage () .paintAll y de nuevo estamos pasando en este nuevo tipo de tmp. Ahora, sí necesitamos tener un registro final pero no necesitamos los alquiles.save (“render.png”) porque el formato de archivo en el que estamos guardando, nuevo, está definido aquí en esta línea 59. Ahora bien, si todo va bien, debería poder guardar y construir el boceto y cuando construyo el boceto, debería ver en pantalla 600 píxeles por 600 píxeles exactamente como se esperaba, pero en mi carpeta, veo un render.pdf. Voy a seguir adelante y abrir este render.pdf dentro de Illustrator. Entonces, aquí estamos dentro de Illustrator, puedo abrir la paleta Capas y, oh veo, automáticamente crea una máscara de recorte. Entonces, si sigo adelante y abro esto, deberías notar que probablemente haya un camino de recorte arriba en la parte superior, podrías eliminar ese camino de recorte si quisieras, podrías desagrupar todo esto y, oh Dios mío, estamos volver a un formato vectorial. Puedes subir aquí y hacer clic en Ver, Esquema, podríamos bailar en este punto porque aquí es donde está. Si estamos usando activos basados en vectores, volvamos a generar activos basados en vectores porque ahora, todo esto es editable. Si no me gustaba que fuera un azul , carajo lo quería que fuera una naranja, puedo modificarla. Donde es mucho más difícil de modificar si estamos renderizando el PNG. Entonces, en el ejemplo del paso dos, porque estamos renderizando a una imagen basada en píxeles, mejor te guste lo que ves porque es mucho más difícil editar ese archivo una vez que se ha renderizado y lo has abierto en Photoshop, pero si estamos renderizando a vector, puedo entrar aquí y hacer todo tipo de cambios. Entonces, si no me gustó el peso del trazo, pude seleccionar el peso del trazo de uno de los vectores aquí, veo que está seleccionado el trazo negro y podría venir a seleccionar mismo color de trazo, y si quisiera podría cambiar el trazo a cinco si eso es lo que buscaba. Entonces, me gusta esta idea de trabajar con activos basados en vectores haciendo algún tipo de generación aleatoria en lugar de procesamiento, pero luego la capacidad de renderizarlo de nuevo a una composición basada vector-b para que pueda empezar a hacer alguna edición dentro de Illustrator. Adelante y cerremos este video, te voy a mostrar un último video en cuanto a hacer algo de edición. Nos vemos en el paso cuatro. 41. letsRender / ediciones finales: Porque esto es todo. En realidad no conozco esa canción. Pero esto es, esto es todo. Yo quiero mostrarte algo más. Voy a abrir HgridLayout. En HgridLayout específicamente, voy a abrir el paso tres. Mira este, éste es el donde aleatorizamos la rotación, y aleatorizamos el tamaño, y se ve así. Ahora bien, no hice un comentario antes porque realmente quería abordarlo aquí. Porque estás aleatorizando el tamaño, ¿notas que el peso del trazo ha cambiado a lo largo del documento? Al igual que aquí, donde hizo 50 por 50, el peso del trazo se parece a uno, y aquí, donde el trazo pesa bastante grande, se ha vuelto mucho más grueso porque el trazo en realidad se está escalando con la ilustración ya que estás adjuntando ella a un tamaño más alto. Ahora, ¿me importa? A lo mejor no inicialmente, pero definitivamente quiero editar esto en Illustrator. Entonces, te voy a mostrar unos últimos trucos aquí. Ahora bien, este es HgridLayout, y este es el paso tres, pero ya tenemos un paso tres dentro de LetsRender. Entonces, voy a copiar esto a mi escritorio así, y luego, puedo cerrar esta carpeta, y en realidad voy a cambiar esto a un paso cuatro, y luego, voy a arrastrar el paso cuatro a la carpeta LetsRender. Ahora, quiero abrir el paso tres, y también quiero abrir el paso cuatro, y la razón por la que quiero hacer eso es para que pueda simplemente copiar y pegar mi tipo de negocio aparezca en la parte superior ese PDF procesamiento de importación. Sí, por favor. Voy a pegar eso, y luego abajo aquí abajo, tengo esta hermosa, digamos, función vectorial. Entonces, voy a copiar justo a esa función guardar vector, y luego, voy a venir aquí, y voy a pegar donde diga etapa h.Draw. Entonces, genial. Ya puedo cerrar este paso tres. Entonces, estoy en el paso cuatro, y todo lo que he hecho es agregar el renderizado a un PDF. Entonces, si guardo y construyo mi boceto, de nuevo, debería ver algo en pantalla, y también veo que salió un render.pdf. Entonces, lo que quiero hacer es solo mostrarte algunas cosas en realidad en Illustrator. Entonces, voy a cerrar mi boceto, y voy a seguir adelante y cerrar el build PDE, y voy a abrir este render dentro de Illustrator. Ahora, todo se ve bien. Si vienes a ver contorno, sí, seguro, es todo vector, eso es impresionante. Sí hace esa máscara de recorte, así que voy a abrir mis capas, y lo suficientemente seguro, ahí está el camino de recorte ahí mismo, y voy a seguir adelante y decir, borrar ruta de recorte. Cuando hago eso, este tipo se abre, voy a seleccionar todo y hacer clic en desagrupar. Entonces ahora, solo estoy mirando a los vectores y toda su maravillosa belleza. Ahora, lo que voy a hacer es presionar la A en el teclado, que es el tipo de flecha de subselección justo aquí, y voy a seleccionar el trazo, y voy a decir seleccionar el mismo color de trazo. Ahora, eso va a correr y va a encontrar todos mis trazos porque todos mis trazos tienen el mismo color exacto. De nuevo, si hago comando H para ocultar la selección y vengo a acariciar aquí, verás que el peso está en blanco porque hay tantos trazos diferentes que han sucedido por los cambios de tamaño. Entonces, podría venir aquí y decir que quiero que el trazo sea uno, entonces, que arregle la forma en que esto se ve dentro de Illustrator. Ahora, quiero mostrarte otro pequeño truco que termino haciendo en mi trabajo, y no se lo digas a nadie porque este es nuestro secreto. Me encanta esta paleta que es la paleta de apariencia, y apuesto a que la mayoría de ustedes ni siquiera saben que esta paleta existe. Me encanta la paleta de apariencia porque lo que puedes hacer con la paleta de apariencia es mientras los trazos siguen seleccionados, puedo ver aquí, cool , hey, tienes trazos seleccionados. Están usando un punto sin relleno. Bueno, en realidad se puede seleccionar la capa de trazo y en realidad duplicarla. Entonces, lo duplicaré aquí mismo, y así ahora, tengo dos trazos que en realidad están justo encima uno del otro. Ambos, un peso de trazo de uno y en este de abajo. Voy a ponerlo a un peso de trazo de tres. Entonces, de repente, te das cuenta de que todas las líneas se vuelven más gruesas en pantalla. Bueno, la razón por la que me gusta la paleta de apariencia es porque podría tomar esta paleta de apariencia en conjunto con la transparencia y puedo decir: “Oye, quiero que la transparencia de los trazos que son tres sea del 20 por ciento”. Te darías cuenta de que, si realmente abrieras este pequeño toggle aquí, te mostraría que el trazo realmente está sucediendo en tres puntos con una opacidad del 20 por ciento, pero el trazo en un momento no es ninguna transparencia en absoluto. Ahora, si fueras a acercar, te darías cuenta de que se acaba de poner bonito y difuso, y lo hago en cada una de mis impresiones porque cuando esto realmente imprime en papel en una de mis impresoras de amplio formato aquí, solo teniendo ese 20 por ciento Alpha a ambos lados del trazo, solo suaviza la obra de arte de una manera hermosa. Ahora, quiero mostrarles otro truco antes de que terminemos este negocio. Nuevamente, también en Illustrator y esa es la paleta de muestras. Entonces, voy a venir a muestras aquí, y puedo decir añadir colores usados. Entonces, si hago clic en eso, debería correr a través de mi documento y en realidad agregar todos los colores que se están enfriando aquí dentro de mi documento. Ahora, lo que quiero hacer es con las muestras, en realidad quiero seleccionarlas y convertirlas en un grupo, nuevo grupo de colores. Entonces, aquí abajo en la parte inferior, hago clic en la carpeta pequeña y grupo de colores y digo, bien. Entonces, eso se ha tomado esos colores y los está agrupando en un bonito grupo de colores aquí. Ahora, la razón por la que quiero hacer eso es porque en realidad puedes seleccionar todo dentro de tu archivo de Illustrator, y la mayoría de la gente no tiene idea de lo que hace este pequeño botón aquí mismo. Dice recolor obras de arte. Entonces, haces clic en este pequeño botón, recolorea las ilustraciones y en realidad tira hacia arriba esta pequeña paleta aquí, y cualquier muestra que añadas a esta paleta de muestras, se agregan automáticamente a esta cosa de grupos de colores. Entonces, en realidad voy a seleccionar eso, y podría venir aquí y solo decir: “Oye, no escales el tiempo como hacerlo exacto”. Pero la razón por la que me gusta esta paleta es porque me gusta el color aleatorio, y termina ahí que hay este pequeño botón justo aquí que dice cambiar aleatoriamente el orden del color, y puedo sentarme ahí y ir, oh, sí, oh, sí . Puedo presionar este botón todo el día. Lo que está haciendo es que está corriendo por mi obra de arte y simplemente rehufflando los colores alrededor. Entonces, es solo un paso extra de mí poder ofrecer muchas variaciones diferentes a mis clientes estableciendo algunos colores iniciales, pero tal vez usando este truco y dando salida esta composición una tonelada de maneras diferentes pero con diferentes arreglos de color. Ahora, de repente, alguien dice, "Oh, sí. Pero ¿podemos cambiar uno de los colores?” En realidad puedes construir un conjunto de colores completamente nuevo, y puedes recolorear toda esta obra usando un grupo de muestras de color completamente nuevo. Entonces, esos son dos pequeños secretos que me encanta compartir con Illustrators, es esta recoloración de colores y luego ese trazo, poner dos encima uno del otro y tener el de abajo, tener un poco de transparencia a ello, para que ablanda los bordes. Está bien. Oh, Dios mío. Nos hemos embarcado en un viaje de trasero pateado. Algunos traseros fueron pateados. Podía sentirlo. Podía sentir que se patearon muchos traseros, y estoy tan emocionado que decidiste pasar tu tiempo con mi loco. No puedo esperar a ver qué hacen ustedes y chicas. Creo que aquí hay muchas técnicas que, de nuevo, que lo que quiero seguir conduciendo a casa es que al código no le importa qué colores uses, ni qué activos artísticos uses. Puedes hacer un conjunto de dibujos totalmente nuevo con motosierras y gatitos, y podrías mapear esta composición aquí mismo con sierras de tren y gatitos. El código es completamente agnóstico de obras de arte. Estamos especificando qué activos se deben utilizar. Entonces eso significa que al final de este viaje, el trabajo que creas, y el trabajo que compartes con todos nosotros que hemos tomado esta clase va a ser completamente único para ti, y la razón por la que va ser único para ti es porque te atraen diferentes colores a los que somos el resto de nosotros. Te impulsan a formas diferentes a las que somos el resto de nosotros e incluso usando estos sencillos bloques de construcción, hay un número infinito de posibilidades que deberían golpear nuestra galería, y me emociona ver que eso suceda. Genial. Espero que esta sea una de muchas clases. Me encantaría hacer otra clase sobre animación, y me encantaría hacer una tercera clase sobre hardware como el Leap Motion y el Connect. Entonces, si disfrutaste de esta clase, dile a esa gente de Skillshare que soy la mejor maestra que has tenido en toda tu vida y que estamos saliendo. Estamos saliendo. Gracias. Golpearme en Twitter. Golpearme en Facebook. Me gusta el correo electrónico. Leí correo electrónico. Gracias otra vez. Gracias por tomar esta clase. Nos vemos más tarde. 42. Unas palabras de despedida...: Hemos llegado a este gran final de salida. Aquí es donde estoy realmente emocionado de ver lo que ustedes hacen, porque ojalá, ustedes hayan visto en este punto, sus dibujos son sus dibujos, sus opciones de color son sus opciones de color, y es esa salida la que es aleatoriamente ocurriendo dentro de estas clases de diseño. Al igual que las cosas que te muestro son completamente únicas para mí, y es impulsada por tomar este viaje yendo a Estambul, está lejos de la computadora, ¿verdad? Ahí es donde está esta magia. No está frente a la computadora, se trata de hacer un viaje a Estambul, y caminar por el Gran Bazar, y encontrar estos dibujos, y tener este momento de, “puedo tomar este dibujo y me puede hacerlo mío. Puedo hacerlo mío redibujándolo y abstrayéndolo, una manera que esta programación informática va a utilizar para generar esa emoción en pantalla”. Entonces, se va a poblar de colores que pude haber experimentado en ese viaje. Hago un giro, y veo mosaicos con ciertos colores, y tomo una foto de esos colores, y voy a extraer los colores de esa fotografía. Entonces, toda esta salida está completamente impulsada por esas elecciones iniciales que tomas, lo que significa que todo este trabajo que vas a estar vomitando a esta clase es específico para ti. Es específico de las imágenes por las que te atraen, ya sea floral u orgánica. Tengo mi fase de flor. A lo mejor, vas a tener tu fase de flor. Entonces dibujé demasiadas flores y me mudé a la geometría. Tenía que ir matemático. Entonces, este tipo de estética que te atraen van a definir tu salida. Tu salida, de nuevo, completamente única para ti. Entonces, estoy súper emocionada porque deberías estar deslumbrándonos a todos con tu genialidad. ¿Puedo conseguir un aleluya? 43. hexGrid / Randy Steward: Oye. Entonces, pensé que tomaría el tiempo agregar una sección nueve llamada Inspiraciones del Proyecto, donde tomaría cosas que veo que ustedes están publicando en la galería de estudiantes, y tal vez les mostraría algunas cosas que haría. Sí. Entonces, aquí hay un post que hizo Randy, y está haciendo estos hexágonos, y solo mirando estos hexágonos, pensé que te mostraría cómo combinar muchas piscinas diferentes con muchos diseños de cuadrícula diferentes. Entonces, adjunto a este video, va a haber un archivo hexGrid.zip, y veamos, lo había desglosado en seis pasos. Entonces, veamos el paso uno. paso uno es obviamente, tengo un PDE build, tengo PDE de altura, tengo una carpeta de datos, y dentro de la carpeta de datos tengo hexagonal SVG. Si pasamos a ilustrador, se puede ver que acabo de hacer un hexágono muy simple aquí, y también este arte es un ancho de 50 y una altura de 50. Correcto. Entonces, cada uno de estos pequeños hexágonos es de 50 por 50. Está bien. Entonces, déjame mostrarte abriendo este build PDE aquí algunos trucos. Entonces, lo primero es que, déjame solo hacer el tamaño de la fuente un poco más grande. Está bien. Es que he compactado el código HDrawablePool. De acuerdo, y ya verás por qué, porque de nuevo vamos a sumar seis piscinas diferentes aquí. Está bien. Entonces, arriba en la parte superior dije dp1 para alberca dibujable uno. Dije que quiero dibujar 88 artículos. En la línea 10, he especificado que quiero usar un hexágono hexagon.svg. En la línea 11, he creado un diseño de cuadrícula, y he dicho, Vale quiero que empieces el 27 en el eje x-40 en el eje y este espaciado es 78, el espaciado Y es 51 y las columnas son ocho. De acuerdo, y en este en particular, digo bien, vamos a matar el estilo que viene de ilustrador, vamos a matar el trazo, y vamos a añadir un relleno de gris oscuro, y poner el punto de anclaje en el centro. Está bien. Ahora, entonces es un pool usando hexágono SVG, y si ejecuto esto, notarás que construye una cuadrícula así. Ahora, te darás cuenta de que los números que he llegado me permiten escribir, para poner una nueva cuadrícula dentro del espaciado, eso es lo que es el espaciado, sus 78 píxeles porque está alineado de una manera para que pueda poner otro hexágono aquí. Pero este hexágono, obviamente está en un inicio x diferente, y en un inicio y diferente, porque no está alineado con esta cuadrícula en particular. Está bien. Entonces, pasemos a HGrid dos, y en HGrid dos arriba en la parte superior, cambio cada alberca dibujable, digamos que voy a tener una piscina dibujable uno, y una piscina dibujable dos. En alberca dibujable dos, digo bien, quiero 70 artículos, sigo usando hexágono SVG, pero notarás que tengo un inicio diferente x tengo un inicio diferente y, pero el espaciado sigue siendo de 78 por 51, y el columna es siete. En el caso de este SVG hexágono, es idéntico al de arriba a excepción de un conjunto el color de relleno a ese naranja oscuro. Está bien. Entonces, ahora tenemos dos piscinas dibujables usando el SVG hexágono. Entonces, si construyo el archivo, ahora tengo una segunda cuadrícula y usando un segundo pool dibujable con un diseño diferente, pero soy capaz de ponerlo de tal manera que llene el espaciado entre la primera cuadrícula que creamos. Está bien. Ahora, vamos a extender esto un poco más allá. Entonces, en la construcción tres, he dicho bien, bueno, quiero hacer un colorista H pixel. Está bien. Entonces, echa un vistazo a esto. Digo H alberca dibujable, voy a añadir una tercera, pero ahora voy a añadir un colorista de pixel, ¿verdad? Yo quiero robarle color en realidad a un gradiente Jpeg. Está bien. Entonces, ahí está nuestro hexágono y dentro de Photoshop, creé una imagen que 600 por 600, e hice un gradiente que pasó de blanco a negro. Está bien. Entonces, si miráramos la piscina dibujable tres, nuevo es idéntica a la piscina dibujable dos excepto, pues cambié algunas cosas. Dije que quiero que el tamaño sea 40 por 40 en lugar de su predeterminado 50 por 50, y luego en la línea 36, dije, hey tomemos este gradiente de pool de colores, y aplicemos color solo al relleno. Entonces, ahora cuando pruebo esta película, ahora tengo una tercera cuadrícula que está en la parte superior de la segunda cuadrícula, pero usando cada colorista de píxel para pasar de blanco arriba en la parte superior, hacia el negro, hacia la parte inferior. Correcto. Entonces, ahora tengo tres albercas dibujables, tres rejillas, y de nuevo puedo continuar este tipo de apilamiento. Entonces, abramos HexGrid cuatro, y claro que ahora estoy agregando un cuarto pool dibujable. Pero esta vez, agrego H color pool, y en H color pool, tengo los colores que básicamente hemos estado trabajando en todas nuestras construcciones de muestra. Entonces, algunos grises y dos azules, y dos naranjas, así sucesivamente y demás. Ahora, aquí abajo al fondo, copio exactamente lo mismo de la alberca trabable. Entonces, copio pool dibujable tres, renombrarlo como alberca dibujable cuatro, nuevo es 70 hexágono SVG, pero cambié el tamaño para ser 20 en lugar de 40, y luego digo, en lugar de CP uno, aplico color digo CP2 aplicar color. Ahora bien, esto debería poner una cuarta cuadrícula encima de la tercera que está encima de la segunda cuadrícula, y obtenemos algo como esto. Está bien. Entonces, ahora podemos ver que está recogiendo colores aleatoriamente en esa cuarta cuadrícula. Ahora, tenemos esta cuadrícula, la primera que recreamos que sigue siendo gris. Entonces, ¿por qué no duplicamos lo mismo pero tal vez lo invertimos? Está bien. Entonces, sigamos adelante y abramos H rejilla cinco, y una cuadrícula H cinco arriba en la parte superior, creo una piscina dibujable cinco, y en la Pool cinco dibujable, realidad copio alberca dibujable uno. ¿ Verdad? Porque dos, tres y cuatro están apilados uno encima del otro. Yo quiero que cinco sean apilados encima de uno. Nuevamente, cambié el tamaño a 40, y hago el CP2 que es la piscina de color H. Entonces, si fuera a ejecutar este archivo, debería poner la piscina dibujable cinco encima de la piscina dibujable uno, que se puede ver aquí en esta fila es escoger aleatoriamente colores fuera de la piscina de colores. Correcto. Entonces, lo hemos invertido que esta pila. Ahora, sumemos la última cuadrícula. Si vas a H grid seis, y te abres construir PDE, por supuesto arriba en la parte superior, he creado una alberca dibujable seis, alberca dibujable seis es solo una copia de alberca dibujable cinco, pero he cambiado el tamaño a 25, y en realidad he usado el colorista pixel gradiente aplicar color. Está bien. Entonces, ahora, piscina dibujable seis está encima de la piscina dibujable cinco, y la piscina dibujable cinco está encima de la piscina dibujable uno. Entonces, básicamente solo estamos haciendo apilamiento de cuadrícula. Está bien. Entonces, ahora si miramos, podemos ver que tenemos algunos hexágonos que van desde el color blanco hasta el color oscuro. Está bien. Entonces, al usar esta estructura, en realidad podemos apilar muchas piscinas dibujables todas usando el mismo SVG hexágono, pero solo usando un diseño diferente con diferentes parámetros, y así podemos conseguir que esta capa se apile. Ahora, en qué creo que va a quedar bien. Déjame sólo ir a la URL aquí. Skillshare. Ahora, lo que creo que se va a quedar bien en el archivo de Randy en lugar de usar un SVG, si estuviera usando todas estas mutaciones diferentes de SVG, Correcto. Entonces este archivo realmente tomaría este nuevo patrón textural, que creo que sería el principiante. Está bien, voy a acabar con esto. Voy a seguir siendo totalmente inspirada en las cosas que ustedes están publicando, y tengo algunas otras ideas para algunos otros videos de remix de inspiración de proyectos que publicaré bajo esta sección. Muy bien, nos vemos después. 44. hypnoWheel / Luke L: Está bien. Pensé que grabaría. Hola, ¿cómo estás? ¿Cómo va la clase? ¿ Bien? Pensé que haríamos otro tutorial para la sección nueve, que es inspiraciones de proyectos. A éste, Luke L, le gusta mucho algunas de las imágenes con las que se está inventando aquí. Pero pensé que rompería este y mostraría algunas posibilidades con él. Entonces, he creado una nueva carpeta en mi escritorio llamada HypnoWheel. Acabo de usar el proyecto de Luke como una especie de punto de partida, pero en realidad voy a recrear los vectores un poco diferente y hablaremos a través de él. Ahora, lo bonito es que puedes hacer clic en el enlace de Luke aquí mismo, y en realidad puedes ver este archivo en particular funcionando. Tiene algunas cosas que tal vez haría un poco diferente. Entonces, pensé que tal vez haríamos lo mismo que antes, descomponer algunos pasos, mostrar algunas posibilidades, e ir desde ahí. Ahora, en el expediente de Luke, solo sigamos adelante y cerremos esto. En el expediente de Luke, sus activos SVG son en realidad rellenos. En realidad no usaría rellenos. Yo usaría trazos. Permítanme explicar por qué. Entonces, si paso a Illustrator, puedes ver aquí que he recreado los activos, pero en lugar de usar rellenos, en realidad estoy usando trazos. Acabo de hacer cuatro SVG. El arte es de 100 por 100. Simplemente tomé un círculo y lo dividí en un montón de subsecciones. Entonces, de nuevo, importante recordar que la obra de arte es de 100 por 100. De nuevo, tengo cuatro SVG de muestra aquí. Entonces, primero, estamos viendo Construir uno. Este pequeño proyecto va a tener cinco pasos diferentes, y voy a exhibir algunas características diferentes. Entonces, solo hablemos de algunas de las cosas que hace Luke en su expediente, y cómo lo abordaría en mi archivo, y también añadirle algunas características. Entonces, Luke, también estoy hablando a ti específicamente y a otras personas que sólo están escuchando. Lo primero es que en lugar de, en tu archivo particular, copias blanco un montón de veces, no olvides que en pool de colores que puedes agregar ponderación de color especificando el color, luego especificando cuántas instancias de ese color que quieras. Entonces, en lugar de copiar y pegar blanco, blanco, blanco, blanco, blanco, blanco, blanco, blanco, blanco, blanco, blanco, en realidad puedes definir tu pool de colores de esta manera. De nuevo, aquí puedes ver he dicho: “Está bien, quiero un gris oscuro”. Un gris medio me dan seis de ellos, un gris más claro me dan cuatro de ellos, y un gris más claro me dan dos de ellos. Entonces, de nuevo, puedo enfocarme en la ponderación del color de esta manera. Ahora, he agregado algunas otras cosas a este archivo. Aquí están mis cuatro SVG. Nuevamente, recuerda que son golpes, no rellenos. ¿Por qué es eso? Bueno, lo primero de lo que quiero hablar es usar la escala en contraposición al tamaño. Ahora, en algunos de los ejemplos que hemos hecho a lo largo de este curso, ha estado estableciendo tamaño. Establecer tamaño es cuando estás ajustando como, vale, quiero que el ancho sea 100, y quiero que el alto sea 100, o quiero que el ancho sea este y el alto sea aquello. Lo que la escala hace es, escala se basa en el tamaño original de la obra proveniente de Illustrator. Entonces, estoy diciendo sacando esta obra de arte de Illustrator. Esa obra de arte en Illustrator ya tiene un conjunto de ancho y altura. Lo que quiero hacer es cambiar escala. Escala es un porcentaje. Entonces, 0.5 sería 50 por ciento más pequeño. Una escala de dos sería 200 por ciento más grande. Entonces, de nuevo, revisa este archivo donde estoy usando escala en oposición al tamaño. Entonces, en la línea 38, digo: “Bueno, está bien, quiero establecer una escala aleatoria”. Digo en la base, debería ser uno y luego escoger un número aleatorio 16 y saltar en incrementos de 0.3. Verás qué hace esto en un momento. Dentro del dibujable, habilita el estilo falso. Entonces, puse el ancla en el centro. Lo adjunto al centro de la pantalla. Entonces, en lugar de usar el tamaño de punto, estoy usando escala de puntos y pasando en esa escala aleatoria que configuré en la línea 38. Ahora, no estoy usando rellenos. Entonces, voy adelante y digo que no llene. Lo que hago es jugar con el trazo. Ahora, una de las preguntas que hiciste es, ¿cómo puedo adjuntar algo pero tener todo para ser del mismo peso? Entonces, de nuevo, es por eso que querría usar stroke en lugar de fill porque se puede ver en la línea 47, puedo decir StrokeWeight, empezar con una base de 10, pero luego multiplicado uno dividido por RansScale. Entonces, lo que sucede es que, medida que la obra se escala hacia arriba, escala el StrokeWeight hacia abajo. Entonces, de esa manera, parece que el StrokeWeight es en realidad el mismo peso sin importar cuál sea el tamaño, ya sea en el más pequeño del centro o en el más grande del exterior. Línea 51, establecí un RandomColor y en las líneas 55 a 57, establecí un RandomSpeed para hRotate. Aquí, estoy diciendo que si las púas aleatorias son cero, dele una velocidad de uno. Ahora, solo sigamos adelante y probemos este boceto para que veas lo que está pasando aquí. Entonces, como puedes ver, en realidad parece que el StrokeWeight es el mismo, y eso es porque como estoy escalando el SVG hacia arriba, en realidad estoy escalando dinámicamente el peso de los trazos hacia abajo. Entonces, todos parecen tener el mismo StrokeWeight. No olvides en las líneas 48 y 49, puedes especificar lo que quieres que sean los StrokeJoin y StrokeCap. Entonces, puedes ver aquí estoy recibiendo gorras redondeadas. Ahora, he añadido algunas otras características realmente geniales aquí. El último apartado de la clase es en realidad cómo salen. Entonces, pensé que tal vez querrías dar salida a este archivo en particular. Entonces, se puede ver arriba en la parte superior, he puesto en el importprocessing.pdf. También puse dos toggles aquí, uno para pausar y otro para grabar. Si realmente te desplazas hacia abajo hasta la parte inferior, copio y pego nuestra misma función vectorial, que de nuevo está en la última sección de la clase, y luego pongo una tecla de vacío para hacer un par de cosas. barra espaciadora se pausará y se reiniciará, la tecla más avanzará a la siguiente iteración de la animación y al presionar la tecla R se renderizaría en PDF. Si ejecuto este boceto una vez más lo que verías es que puedo presionar la barra espaciadora y en realidad pausa la animación, puedo volver a presionar la barra espaciadora, reinicia la animación, puedo presionar la barra espaciadora para pausarlo y luego puedo presionar la tecla más en mi teclado y en realidad avanzar la iteración de la animación por uno. Entonces realmente puedo empezar a mirar esta animación y decir “De acuerdo, déjame presionar esto unas cuantas veces hasta llegar a algo que me gusta”, y entonces por supuesto, si presiono la tecla R en realidad lo renderizará. Si pongo esto a un lado verás que se renderiza un documento PDF que obviamente puedo abrir dentro de illustrator y toda la información vectorial está ahí y todo se ve bien. Ese es el archivo uno. Si pasamos al archivo dos, todo lo que he hecho en el archivo dos se dice que quiero que el join y cap en realidad sea cuadrado, así que esto empieza a parecerse un poco más tu animación porque no estoy redondeando las tapas, estoy cuadrando tapas. Pasemos a construir tres. En la construcción tres, he agregado un poco más de funcionalidad aquí, que es, ¿y si al azar el peso base? Entonces, ya verás en la línea 39 elijo un peso base aleatorio para el trazo y cuando en realidad configuro el peso del trazo en establecer los tiempos de peso base y el escalado dinámico, así que en lugar de que parezca que todo es el mismo peso, si realmente ejecutas este archivo, en realidad estoy aleatorizando el peso base y creo que empieza a parecer un poco más interesante. Simplemente pasa que lo que estoy viendo en pantalla en este momento, no estoy loco por el color. Entonces, pensé que introduciría la capacidad de aleatorizar algo del color. Si bajas a presionar teclas, notarás que agregué una nueva pulsación de teclas para la letra C, C obviamente siendo color. Lo bueno de ool es que puedo hacer este tipo de charla aquí mismo que es para mientras encuentras dibujables dentro de alberca. Entonces, este for loop ahora iterará sobre la piscina y encontrará todos los dibujables que hemos establecido dentro de pool. Entonces dije, “Cool”, hDrawable temp dentro de pool y luego creo un nuevo hShape d y lo configuro al objeto de temp y luego refire el trazo de colores aleatorios. Entonces si fuera a probar el boceto, hacer correr esta cosa, otra vez, si no me gustaban los colores podría en realidad presionar la tecla C y realidad volvería a aleatorizar los colores en pantalla para mí. Ahora, de nuevo lo puedo pausar. Sólo tienes que saber que en la línea 101 hay redibujar, y redibujar va a redibujar todo y lamentablemente también va a redibujar la animación HRotate corriendo. Entonces, si en realidad presionas ahora la tecla C, no solo volverá a aleatorizar, sino que también está avanzando la animación HRotate por uno. Entonces, solo ten precaución de que C aleatorice el color, pero también se va a volver a ejecutar HRotate. nuevo, si presiono R realmente podría renderizar eso, ahora puedo ir a construir tres, y verás que puedo abrir esto en Illustrator, y estoy renderizando una obra de arte de pieza bastante bonita. Echemos un vistazo a construir cuatro. En realidad comento el uso del activo uno, dos y cuatro. Solo estoy usando SVG3. El motivo por el que solo estoy usando SVG3 es porque voy a introducir algo nuevo y sé que esto empieza a meterse en la animación y mi Hope es que voy a hacer una clase de bombo de habiliza sobre animación, pero lo que tengo hecho aquí es que en realidad he cambiado la animación de HRotate e introducido HoscilLator. HoscilLator es realmente agradable porque en realidad está dibujando con una función de onda, y en este caso, estoy usando una onda de signos. Entonces, lo que estoy haciendo aquí es decir “Quiero un Hoscillator y lo que quiero oscilar es en realidad la rotación. Entonces, quiero oscilar de -180 grados a +180 grados”. Preciso un tamaño y especifico una frecuencia de la onda. Si tuviera que probar este boceto usando HoscilLator en lugar de hRotate, puedo empezar a obtener algunas animaciones de onda realmente interesantes al usar eso a diferencia de HRotate, y de nuevo, puedo ejecutar esto y pausarlo, y de supuesto, puedo renderizarlo. Ahora construye cinco, que es la última, lo bonito de la bomba es que en realidad se puede apilar el comportamiento. Entonces, en este caso, estoy apilando dos HoscilLators, uno que está haciendo rotación y otro que está haciendo escala. Entonces aquí se puede ver en las líneas 67 a 74, les presento un nuevo Hoscillator donde estoy cambiando la escala de la obra de arte de 0.25-1.5. Si yo fuera a probar el boceto, comenzarías a ver que el sistema ahora se ve así. Entonces estas son solo un montón de cosas diferentes, un montón de características diferentes que están en bombo que, nuevo, aunque esté haciendo impresión estática, puedo ejecutar un comportamiento como este y “Vale, déjame cambiar los colores hasta que consiga algo que me gusta” y luego cuando presionamos la tecla más para avanzar a la siguiente iteración de la animación, “Cool, me gusta eso ahí mismo” y termino renderizándolo y tal vez lo uso en un póster y uso estas formas para detipear a lo largo de las formas, las posibilidades son infinitas. Sigue publicando nuevos proyectos en la galería de estudiantes y seguiré haciendo este tipo de videos. Espero que te diviertas. Nos vemos más tarde. 45. Procesamiento 3 + biblioteca HYPE/actualización: Para grabar un pequeño video rápido de una actualización. Cuando por primera vez hice estos cursos hace unos cuatro años, Procesar 2 era la cosa. En conjunto con el uso de Processing 2, HYPE, y cómo describí HYPE en todas estas clases, también fue un archivo.pde. Entonces, en estas tres clases, tenías un hype.PDE. hype.pde contenía toda la biblioteca HYPE. Eso también significaba que podrías usar cosas como procesar JS en ese momento. Pero ahora, mucho ha cambiado. Es cuatro años después. Procesar JS realmente ya no es una cosa mucho, pero P5 JS es lo nuevo, lo nuevo. Por supuesto, tenemos Procesamiento 3. Bueno, ya que estaba haciendo más sobre una base de aplicación, y realmente no usando más el navegador, en realidad actualizamos HYPE a una biblioteca de procesamiento adecuada. Entonces, lo que he hecho es, he pasado por todas estas clases que antes había hecho hace cuatro años usando HYPE pde y Processing 2, y las he actualizado para que estuvieran usando Processing 3 e HYPE, el adecuado biblioteca de procesamiento. Entonces, solo quería mostrarte muy rápido, si pasas a github.com/hype, verás que hay HYPE Processing justo aquí. Este es el Master_Repo. No obstante, solo quiero mostrarte que si haces clic en sucursales y dentro de ramas hay lib_staging. Lib_Staging es siempre la más actual. Es donde estamos empujando más cosas, más cambios, haciendo ajustes. Siempre es el trabajo en proceso antes de que realmente sea empujado a Maestro. Entonces, porque queremos lo nuevo, nuevo, lo secreto nuevo, nuevo, sigamos adelante y vayamos a lib_staging y solo vas a hacer clic en este botón verde que dice “clonar o descargar”, y luego vas a decir “descargar zip”. Ahora, lo que esto está haciendo es descargar toda la biblioteca HYPE incluyendo el código fuente y todo. Pero, queremos usarlo dentro de procesamiento. Entonces, notarás que si vas a tu archivo de documentos, Procesamiento, hay una carpeta llamada Bibliotecas, y en el caso de este ejemplo en particular, mi carpeta está vacía. Entonces, voy a descomprimir el zip que acabo de descargar, y debería conseguir a este tipo. Lo que esto tiene es que tiene referencia y ejemplos y recursos. Realmente lo único que hay que mirar es la carpeta Distribución. El reparto significa que esta es la compilación actual que puedes empujar dentro de tu carpeta Bibliotecas de procesamiento de documentos. Entonces, entra en Distribución, y notarás que hay HYPE.jar y HYPE.zip. Adelante y descomprima HYPE.zip, y creará esta carpeta llamada HYPE, y solo vas a arrastrar esa carpeta a tu carpeta Bibliotecas de procesamiento. Entonces, dentro de este HYPE, deberías tener ejemplo, biblioteca, referencia, y fuente. Si miras ejemplos como, “Oh, Dios mío aquí hay un montón de ejemplos”. Ahora bien, si lanzáramos el procesamiento del IDE, te darías cuenta de que si vinieras, probablemente me va a decir que actualice. No. Sí. No. Vayamos a la biblioteca de importación de bocetos. Mira deberías ver a HYPE ahí. Entonces, ahora HYPE es una biblioteca de procesamiento adecuada. Entonces, la pregunta es, ¿eso significa que puedo usar esto en un navegador? No, no puedes usar esto en un navegador. Si querías enviar tus cosas a JavaScript, no sugiero usar este entorno en absoluto, adelante y mira el proyecto P5 JS que está sucediendo que se está procesando para el navegador en JavaScript. Pero, si quieres actualizar todos estos archivos de clase que he hecho en los últimos dos años, me mudé al sistema ahora. Donde vas a estar usando Processing 3 y luego estás usando HYPE, la biblioteca de procesamiento. Entonces, genial. Entonces, conseguimos esto dentro de procesamiento y solo por el carajo, si fuera a dejar esto a un lado y aquí están algunas de estas clases de Skillshare y Gumroad en las que he estado trabajando, y te darás cuenta si voy a Programming Graphics 1, Ahora he incluido en este zip todas las actualizaciones de este código para usar Processing 3 y para usar HYPE, la biblioteca. Entonces, si vas a, digamos que Drawing Visual Assets, y tú ibas a ir y mirar dentro de la carpeta, notarás que ahora hype.pde se elimina por completo de todos los proyectos. Si haces click en buildpde, notarás arriba en la parte superior aquí que tenemos una nueva estructura, que es ahora que es una biblioteca de procesamiento adecuado, tienes que importar HYPE como biblioteca externa. Entonces, arriba en la parte superior, se puede ver he dicho hype.Asterisk de importación, lo que significa cargado en. Si quieres usar otras cosas, así que si solo estás importando HYPE, obtienes los huesos desnudos que se necesitan para poder usar HYPE con Processing 3. Si quieres cosas extra como, “Oye, estoy usando un pool de colores o estoy usando un diseño de cuadrícula”, entonces también tienes que importar manualmente la clase que maneja lo que sea que estés tratando de usar. Lo mejor que se puede hacer es entrar en ejemplos y decir: “Oye quiero usar un oscilador”. Entonces, si miras el oscilador, te darás cuenta oh, tengo que importar oscilador. Eso significa que esto mantiene muy delgada la biblioteca HYPE. tanto que antes con hype.pde estabas importando todo, aunque no lo estuvieras usando todo. Entonces, esto es lean, esto es medio, es mucho más eficiente como una biblioteca de procesamiento adecuada. Se importan las clases con las que se quiere hablar. Entonces de nuevo, mira la carpeta ejemplos, te mostrará cómo estructurar las cosas. Además de eso, si miras este archivo zip, verás que todos los archivos están ahí igual que antes, pero todos se han actualizado para soportar esta nueva estructura. Voy a hacer eso para todas las clases, y obviamente voy a usar esta estructura para todas las clases nuevas en adelante. Esperanza que eso ayude. Chatea pronto.