Programación de gráficos II: animación de arte generativo

1. Avance: Hola. Yo soy Joshua Davis. Yo soy el Director de Media Arts aquí en la hermosa Sabrosa donde uso mucho de este código que vas a aprender en esta clase para crear experiencias físicas dinámicas interactivas. Esta clase es obviamente una excelente extensión de la primera clase que impartí, programación de gráficos e introducción al arte generativo, pero, específicamente usando una biblioteca que he creado llamada Hype Framework. Ahora, eso nos lleva a la segunda clase que es programación de gráficos animación de arte generativo. Entonces ahora, vamos a tomar todas estas cosas que aprendimos en la primera clase, aún usando Hype Framework, aún usando procesamiento, sentados encima de Java, pero ahora, realmente vamos a aprender a animar las cosas en pantalla 2-dimensionalmente y 3-dimensional. Yo estoy fuera. 2. Unidad 1, video 1: ¿ Qué? ¿De qué se trataba eso? Deberíamos empezar esta fiesta. ¿ Qué dices? Sí. ¿ Queremos que empiece esta fiesta? Sí. Empecemos esta fiesta. Sí. 3. Unidad 1, video 2: Bienvenido de nuevo. Segunda clase. Increíble. Tengo a todos ustedes para agradecer por tomar la primera clase, para incluso hacer posible esta segunda clase. Ni siquiera voy a dudar. Voy a lanzar una enorme advertencia ahora mismo. Enorme advertencia, y es decir, esta clase es increíble. No obstante, si solo has tomado esta clase y no tomaste mi primera clase, que es, te daré un enlace a ella pero es Programación Gráfica e Introducción al Arte Generativo. Si no has tomado esa clase, esta clase va a fallar miserablemente, y eso es porque en esa primera clase, te presenté al Hype Framework, que es una biblioteca en la que trabajamos que hace todas las cosas que estamos aprendiendo posibles. Entonces, aprendes todo eso en primera clase, ¿verdad? que aprendas a usar Sublime Text 2 en conjunto con el procesamiento, y estamos aprovechando esta biblioteca que nos ayuda a esbozar las cosas más rápidamente. Entonces, esa es la enorme advertencia. El enorme aviso es que si estás tomando esta clase y no has tomado mi primera clase, el primer video, cuando empecemos a cubrir HGirate, no vas a saber de qué estamos hablando. Entonces es mejor que pausas esta clase y en realidad te lleves la primera. Es decir, no te habrás cortado a velocidad sobre toda la funcionalidad que el Hype Framework te permite hacer. Está bien. Entonces, esto es Programación Gráficos Dos: Animación de Arte Generativo. Ahora, no me malinterpreten. Me encantó esa primera clase pero aquí es donde, en mi opinión, pasa la diversión. Creo que la diversión pasa aquí porque vas a ver cuando nos metemos en muchos de los archivos posteriores, resultados inesperados. Hoscillator, increíble. Hará cosas que simplemente no creías. Entonces, paso mucho tiempo ajustando pequeños aspectos de los programas para descubrir cosas a las que nunca supe que pudiera llegar. Entonces, amar a la primera clase. Esta clase es fantástica porque básicamente estamos cubriendo la animación. Entonces, vamos a ver muchas de las cosas que cubrimos en la primera clase en cuanto a usar albercas y adjuntar cosas en pantalla. Pero ahora, vamos a meternos en los comportamientos de Hype que sólo se ocupan de mover cosas. Está bien. Entonces, voy a envolver este video. Si pasas a la siguiente, solo haremos una introducción rápida a algunas de las cosas que aprenderás además de ver dónde están muchas de estas clases de animación dentro la carpeta Hype Framework que que has descargado previamente para GitHub. Nos vemos en el siguiente video. 4. Unidad 1, video 2: Entonces, solo quería tomarme un poco de tiempo solo haciendo una visión general del marco de bombo que descargaste fuera de GitHub. Si realmente abres la carpeta de puesta en escena de procesamiento de bombo , de nuevo, solo un refresco rápido, hay una carpeta llamada pde, y dentro de la carpeta pde está todas las clases que actualmente están disponibles dentro de bombo. puedes ver tengo algunas que se destacan que en realidad vamos a cubrir. Por ejemplo, hFollow, Hoscillator, HRANDOMTrigger, HGirate, HsWarm, hTimer, HTween. Se trata de animar cosas sobre mover cosas alrededor o mover cosas sobre la base de un sistema como HSWarm. No olvides que dentro de los ejemplos siempre hay toneladas de ejemplos, en realidad hay una carpeta HTween, en realidad hay una carpeta HSwarm. No obstante, los archivos que realmente han hecho para esta clase trato de desviarme de estos ejemplos para que pueda conseguir un poco más en profundidad a algunas de las clases y tal vez exhibir algunas cosas nuevas que en realidad no he publicado del todo dos ejemplos todavía. Entonces, si bien hay ejemplos para algunas de las cosas que vamos a aprender dentro de la carpeta de ejemplos, gran parte del contenido que realmente vamos a aprender en esta clase no está en línea. Entonces, tú no eres de cinco, nos gusta la exclusividad. La mayoría de estas cosas que voy a estar trabajando contigo en esta clase es la mayor parte de las cosas que ha sido este proyecto que he estado haciendo en Tumblr. Entonces, si realmente vas a pre-station.tumblr.com, este es este experimento el cual es que me he dado algunas reglas. Yo he dicho: “Está bien, sólo tiene que incluir animación, cada clip tiene 30 segundos de largo, yo por alguna razón me di la restricción del mismo tiene que ser blanco y negro así que en realidad no estoy usando ningún color en este proyecto, y cool. Tengo unos 50 años así que archivos en de animaciones que he estado compartiendo en Tumblr”. Entonces, si solo te mostrara algunas de estas piezas, estas son solo algunos de los estudios abstractos con los que he estado jugueteando usando bombo y otra vez publicando en Tumblr. Entonces, vamos a trabajar a través de algunos de estos y hablar de cómo se hacen algunos de estos, y luego vamos a meternos en cómo dar salida a esto. Al igual que la primera clase podemos realmente seguir salida a esto para imprimir si realmente decidimos hacerlo, pero no vamos a gastar mucho tiempo dando salida a esto para imprimir. Vamos a hablar de sacar esto para la animación. Entonces, te mostraré cómo meter esto en un formato de película, cómo ponerlo en un mp4, algún software que uso para ayudarme con este proceso. Nuestro último proyecto va a ser muy dinámico como este, va a ser divertido, va a ser emocionante ya que uno se ve realmente genial reflejado. Ahora, la mayoría de estas cosas por en realidad han utilizado en el nuevo video musical fantasma Graham, así que mi video musical codirigido para el fantasma Graham llamó enamorarse de un equipo realmente increíble y talentoso dirigido por Timothy Cicenty. Te voy a mostrar cómo he tomado muchos de estos programas, los utilizo para el video musical, y de nuevo, ahora podemos ponerle esto a una película, algunos de ustedes quizá quieran hacer clips más cortos y darles salida a Gif animado, lo sé Tumblr ama el Gif animado, pero he estado haciendo estas rasgaduras de 30 segundos, así que MP4 ha sido el formato al que he ido. Entonces, echa un vistazo a la playstation.tumblr.site que te voy a dar un sabor de todas estas pequeñas animaciones diferentes que he estado haciendo exclusivamente con las cosas que realmente vamos a aprender en esta clase. Refresca con el procesamiento de bombo, puesta en escena, mira la carpeta pde o mira la carpeta de ejemplos, de nuevo, hay algunas cosas ahí dentro que no vamos a cubrir en esta clase. Entonces, eso termina esta primera sección la cual es sólo una visión general, que es solo introducciones, dándote un sabor de algunas de las cosas que vamos a cubrir en esta clase. En el siguiente apartado vamos a cubrir cada rotación. Entonces, vamos a volver a empezar muy lento y poco a poco vamos a construir estos archivos. Esta es una clase intermedia lo que significa que todos empiezan lo más básico que puedo en el principio mismo, cuando lleguemos a HoscilLator y combos, estoy bastante seguro de que te habré arrancado el alma y tus ojos estarán sangrando. Se va a complicar, pero te voy a guiar por esos pasos de crear estos sistemas complejos con pasos muy sencillos. Así que respira hondo, camina esto conmigo, te prometo que será divertido, pero se va a complicar y para algunos de ustedes gente procesadora intermedia por ahí. Esperemos que esta sea la clase que has estado buscando, para ustedes gente que es nueva en el procesamiento, te quiero, estoy tan contenta de que estén en este viaje con nosotros, pero voy a agarrar la mano, caminar esto despacio. Está bien. Al siguiente video, hRotar. 5. Introducción a HRotate y Anchor: Aquí estamos en la primera sección, HRotate y Ancla. Entonces, cubrimos un poco el anclaje en la primera clase, que fue esta idea de tener un objeto y poder especificar un punto de anclaje particular para ese objeto. En esta sección, eso va a funcionar muy bien con hRotate porque hRotate nos va a permitir pivote un objeto alrededor de ese anclaje de rotación. Entonces, vamos a ver todos los aspectos de HRotate. Tenemos la capacidad de especificar algunas constantes para el anclaje, ¿no? Entonces, hay nueve posiciones posibles, centro, superior izquierda, inferior derecha, por ejemplo, o podemos trabajar con ancla, donde especificamos una posición X e Y, y esa posición de anclaje va a funcionar en conjunto con hGirate . Ahora, HRotate quiere saber algunas cosas. Quiere saber quién está girando y a qué velocidad debe rotar ese objeto en particular. La velocidad se puede desglosar en dos eventos. Se pueden utilizar grados o radianes. Entonces, puedes decir: “Está bien. Yo quiero que algo rote positivo dos grados cada vez, o quiero algo para girar dos grados negativos”. Entonces, podemos especificar si algo gira en sentido horario o antihorario. 6. Unidad 2, video 1: Está bien. Preparémonos para la magia. Esta es la primera sección en la que vamos a empezar a cubrir código. Esta sección es HGirar y anclar. Adjunto a este video, debería haber un archivo zip que vas a descargar. Ese archivo zip va a incluir todos los ejemplos de HRotate y ancla. Entonces si descargas el zip y lo descomprimiste, notarás que hay 10 ejemplos dentro de esta carpeta. De nuevo, vamos a empezar de manera muy sencilla. Entonces, seguiremos agregando a estos archivos para ver qué tipos de resultados obtenemos. Entonces si vas adelante y miras el ejemplo uno, EX 1, te darás cuenta de que hay un build.pde y hay hype.pde. Nuevamente, hype.pde es una versión minificada de cada clase que está dentro de la carpeta pde que descargaste de GitHub. Por lo que hype.pde contiene todo el universo HYPE. Por lo que nunca debes tener que abrir ese documento en particular. Vamos a estar abriendo build.pde. Ahora bien, si lo abres, deberías ver este código aquí. Simplemente vamos a caminar, como refresco, vamos a caminar a través de lo que esto hace. Entonces, lo ejecutaremos y luego agregaremos HRotate. Ahora, cada archivo de procesamiento tiene dos funciones. Notarás que la primera aquí es configurada. Eso es de nuevo nuestro constructor. Se ejecuta una vez. Entonces es donde ponemos toda nuestra información de configuración. Entonces, nuestra función de sorteo es el bucle. Es lo que corre una y otra vez. Ahora bien, habrías notado en la primera clase quizá no hayamos usado nunca la función de sorteo o este h.DrawStage, que si recuerdas pinta la pantalla siempre estaba dentro de la configuración. Entonces queríamos hacer algunas cosas y luego simplemente pintar la pantalla, pero sólo necesitábamos pintar la pantalla una vez. Porque estamos animando, en realidad vamos a mover el h.DrawStage a la función de sorteo para que se ejecute una y otra vez. Entonces, solo veamos lo que estamos haciendo aquí. Desde una perspectiva de configuración, nuestras películas van a ser de un ancho y una altura de 640. Seguimos adelante y agregamos el constructor de HYPE, h.init (esto). ¿ Recuerdas eso desde la primera clase? Vamos a establecer un fondo. El color va a ser un gris oscuro de 20, 20, 20. Voy a seguir adelante y decir suave. Ahora quiero adjuntar algo a la pantalla. Entonces voy a adjuntar un HRect. Entonces aparecen en la parte superior. Dije HRect r1, para el rectángulo uno. Aquí abajo en las líneas 8 a 13, voy a agregar algo de información sobre ese rectángulo en particular. Por ejemplo, ¿cuál es el tamaño del rectángulo? Bueno, yo quiero que sea un cuadrado, eso es un 100 por 100. Pero también me gustaría esquinas redondeadas con un redondeo de 10. Ahora, en la línea nueve, estamos diciendo: “Está bien, quiero agregar este rectángulo a H, H siendo HYPE, que HYPE sepa que este rectángulo existe y se suma el rectángulo, para que cuando se ejecute la etapa H.draw, tenga información sobre r1. Ahora bien, ¿dónde queremos adjuntar este rectángulo? Digo ubicación, .loc. Voy a decir ancho dividido por 2, altura dividida por 2, lo que significa que va a poner ese rectángulo en el centro de nuestra pantalla. Línea 11, no quiero ningún derrame cerebral. Línea 12, un relleno, un bonito color naranja. Ahora, ten en cuenta que no estamos cubriendo el ancla para nada en este punto. Si recuerdas desde la primera clase, si no especificas ancla, entonces estás girando fuera de 0, 0, ¿verdad? Por lo que lo pone en la esquina superior izquierda. Ahora, muévete hacia abajo al empate. Vamos a hacer un bucle h.DrawStage ahora está dibujando una y otra vez y otra vez. Entonces, en las líneas 22 y 23, acabo de poner algún código de procesamiento para visualizar dónde está el ancla. Entonces te darás cuenta, dije: “Oye, no hagas ningún relleno para que mate el relleno de naranja arriba en la línea 12. Dame un peso de trazo de 2 y dame un color de trazo de un azul azulado, 0095A8.” Entonces, de nuevo sólo usando algún código básico de procesamiento, acabo de decir: “Quiero hacer una elipse. La posición x e y de la elipse es, bueno, ¿cuál es la posición x e y de r1?” lo que notan dije que la x es r1.x parenth abierto cerrar parenth. Por lo que obtiene la posición x de r1, y luego obtiene la posición de r1 en el eje y y el ancho y la altura de esa elipse es de 4 por 4. Ahora, te darás cuenta de que tengo este código aquí mismo comentado porque aún no estamos listos para ello. Pero si sigo adelante y pruebo el boceto, deberías ver que efectivamente nos dio un archivo que 640 por 640, el color de fondo es gris. Se adjuntó nuestro rectángulo. Lo hizo alrededor de las esquinas. Es naranja. Hemos agregado ese pequeño punto azul justo en el centro para que sepamos dónde está el punto de anclaje. Por lo que notarás que ese punto está en el centro exacto de ancho dividido por 2, altura dividida por 2, y que la obra cuelga de la parte inferior derecha porque esa esquina superior izquierda es el punto de anclaje, es el registro. Ahora, créanlo o no esto es una animación. La función de empate en la línea 19 está disparando una y otra vez, pero lo que está pasando es que ninguna posición ha cambiado. Entonces no se está moviendo es posición x o posición y o escala o rotación, pero en realidad está pintando esa cosa rápidamente una y otra vez. Simplemente sucede que está en la ubicación exacta previamente. Por lo que ocurre una animación. Esto es muy conceptual. No hay un bucle sucediendo pero nada está cambiando visualmente en la pantalla. Es sólo volver a pintar todo en la ubicación exacta una y otra vez. Ahora, quiero rotar esta cosa. Girar cosas y procesar para mí siempre ha sido un poco torpe porque grados versus radianes, ¿dónde está el punto de anclaje? ¿ En qué estoy girando? Tan honestamente, espero que si estás queriendo rotar las cosas, te va a encantar usar HYPE para rotar las cosas porque solo creo que es un poco más fácil que tener que hacer una matriz push, una matriz pop y luego rotar con eso y bla bla bla. Entonces sigamos adelante y descomentemos los contornos 15 y 16. Esto es solo un ejemplo de cómo puedes usar HRotate. En realidad, este código se va a conseguir un poco más sencillo a medida que avanzamos pero vamos a dar pasos de bebé aquí. Entonces en la línea 15, simplemente digo que quiero hacer un HRotate y lo voy a llamar hr1. Por lo que hRotate1. Se trata de una nueva HRotate. Entonces la línea 15 dice: “Está bien. Enfriar. Hype, te has agregado un comportamiento de rotación, pero necesito saber algunas cosas”. El material que necesita saber es a quién está girando y una velocidad. Ahora, la velocidad se pone un poco complicado porque ese puede ser un número positivo o negativo. Positivo ser en sentido horario, un número negativo en sentido contrario a las agujas del reloj. Entonces mira la línea 16. Yo digo: “Oye, Hrotate1, tu objetivo es ese rectángulo, r1. Entonces ese es el tipo que quieres rotar. Tu velocidad es 2”. Observe que no tengo que especificar radianes. Sólo le estoy dando un número. Ahora, como sucede, HYPE por defecto hace grados. Entonces si realmente ejecuto este archivo, ahora notarás que el rectángulo está girando dos grados a la vez. Por lo que de nuevo, la velocidad puede ser un número positivo. Es una carroza. Entonces si quisieras realmente frenar esto, podrías decir 0.5 y podrías ejecutarlo y notarías que se ralentiza. Podrías cambiar esto por un dos negativo y eso simplemente iría en sentido contrario a las agujas del reloj. Entonces ahí vamos, hemos animado algo. Estamos girando nuestro rectángulo alrededor de un punto de anclaje. Ahora, voy a seguir adelante y cerrar ese archivo y voy a mirar nuestra carpeta aquí en el ejemplo dos. Nuevamente, en el ejemplo dos, sólo hay un build.pde y un hype.pde. Ahora, si abres el ejemplo dos, código sigue siendo básicamente el mismo. Yo solo quiero demostrar que si te pasa a ser un amante de los radianes, en realidad puedes hacer.Speedrad, en lugar de .speed. Entonces. La velocidad va a hacer grados, .Speedrad te va a dar esa rotación en radianes. Entonces en el ejemplo dos, esto es lo único que es diferente es especificar SpeedRad en lugar de velocidad. Entonces esa es la única diferencia en el ejemplo dos. De nuevo, si eres amante de usar radianes como negativo 2 Pi dividido por 90, entonces por supuesto puedes hacerlo de esa manera. Entonces ese es el ejemplo dos. Por último, en este video, solo quiero hablar del ejemplo tres antes de pasar al siguiente video. Nuevamente, en el ejemplo tres, sólo hay un build.pde y hype.pde. En el ejemplo tres, se puede ver aquí ya sea en el ejemplo uno o en el ejemplo dos creando una rotación, se crearon dos líneas de código. Tenías que crear una instancia de HRotate y luego decirle objetivo y velocidad. Pero de nuevo, quiero hacer las cosas rápidamente. Quiero poder esbozar mis ideas rápidamente sin tener que alboroto por escribir mucho código. Por lo que en realidad es un archivo tres que es mi favorito porque usa la cantidad más mínima de código. En este caso, todo lo que tienes que hacer es decir una línea de código. Nuevamente, así es como me gusta hacerlo. Línea 21 solo puedes decir: “Hey Hype, quiero hacer un nuevo HRotate”. HRotate se pueden pasar dos argumentos. El primero es el objetivo, el segundo es la velocidad. Por lo que la línea 21 es el cambio en el archivo tres de los archivos uno y dos. Está simplificando dos líneas de código hasta una línea de código. Nuevamente, con sólo ejecutar el boceto, notarás que todavía obtenemos la rotación. Seguimos girando alrededor de ese punto de anclaje, pero estoy escribiendo menos código. Al final del día, quiero escribir menos código. Quiero obtener resultados y escribir menos código. Entonces línea 21, nueva hGirar, r1, el objetivo, 0.5, la velocidad. De nuevo, puedes entrar aquí y hacer este un número negativo y luego se animará en sentido antihorario. Ahora, esto termina este video. Realmente no hemos hecho trato con el ancla en absoluto. Entonces en el siguiente video, vamos a ver el siguiente lapso de archivos HRotate que hablan de las diferentes cosas flexibles que podemos hacer con ancla. Entonces nos vemos en el siguiente video. 7. Unidad 2, video 2: Está bien. Entonces, en este video, quiero trabajar a través de los próximos cuatro archivos, que va a ser el ejemplo cuatro, cinco, seis, y siete, porque todos están agrupados porque van a tratar con ancla, verás aquí en un momento. Entonces, veamos el ejemplo cuatro y pasemos por lo que he configurado aquí. En lugar de rotar un rectángulo, en realidad voy a rotar tres. Entonces, solo veamos algunos de los ajustes. Arriba en la parte superior, tenemos HRect r1, r2, r3, ya que vamos a adjuntar tres rectángulos, y todo lo que hice básicamente fue copiar y pegar un rectángulo dos veces más, e hice algunos ajustes leves. Entonces, r1, r2, r3 solo copias, y lo único que se ha cambiado es que los colores van a hacer una gradación de naranjas. Entonces, tienes una naranja oscura, naranja mediana, y una naranja clara. Entonces obviamente estoy cambiando su ubicación. Entonces, ya que tengo tres rectángulos y quiero que el medio esté en el centro de la pantalla, si nos fijamos en d2, ubicación dice ancho dividido por dos altura dividida por dos. Entonces, sabemos que r2 va a estar en el centro de la pantalla. Ahora, si miras r1, acabo de decir, oye, ancho dividido por dos, altura dividida por dos. Pero cuando haces ese ancho dividido por dos, sólo restar 160. Entonces, inicia en el centro y luego mueve 160 píxeles fuera del centro. Por supuesto, r3 es más 160. Entonces, si nos fijamos en la ubicación para r3, es ancho dividido por dos más 160. Ahora, la razón por la que puse tres rectángulos en esta pieza es para que realmente pudiéramos empezar a explorar las diferentes facetas del uso del anclaje. Ahora, cubrimos esto un poco en la primera clase, pero de nuevo este es un buen refresco. Echemos un vistazo a las líneas 29 a 31. Tenemos tres HRotate separados, y de nuevo se puede llamar a múltiples HRotate. Entonces, lo que pasa es que básicamente estoy registrando tres comportamientos de rotación y especificando diferentes objetivos. Entonces, la primera hRotate va a apuntar a r1, la segunda instancia de hRotate r2, la tercera instancia de hRotate r3. Ahora, si miramos dentro de nuestro sorteo, acabo de agregar de nuevo un poco más de código de procesamiento para especificar dónde está el punto de anclaje de rotación. Entonces, sigamos adelante y probemos este boceto y veamos qué pasa. Entonces, tenemos tres rectángulos. Los tenemos moviéndose a diferentes velocidades de rotación porque hemos registrado tres HRotates diferentes. De nuevo, estamos mirando aquí el punto de anclaje. Entonces, si no se especifica ningún ancla, de nuevo, tenemos ese 00 y los tres de estos tipos se están moviendo. Genial. Entonces, ahora tomemos esto y simplemente guardarlo un par de veces más y empecemos a explorar trabajando con anclas. Entonces, con eso, voy a ir al ejemplo cinco. Yo sólo voy a tirar esto por aquí en la pantalla. Está bien. Entonces, si abres ahora ejemplo cinco, este es un duplicado del ejemplo cuatro excepto que hemos agregado un sistema de anclaje. Está bien. Entonces, si miras r1, r2, y r3, puedes ver que hemos puesto en lo que se llama constante. Entonces, esta es una constante de Hype, y vamos a explorar constantes aquí en un poco. El constante aquí es H.CENTER. Entonces, estamos diciendo que el rectángulo es de 100 por 100, entonces, en las líneas 10, en las líneas 18, y en las líneas 26, estamos diciendo genial, encontrar el punto central basado en el ancho y la altura del objeto. Entonces, como los rectángulos son 100 por 100, que Anchorat H.CENTER termina siendo 50-50, y vamos a seguir adelante y probar este boceto y hay que ver que todavía estamos recibiendo la rotación, pero de hecho hemos cambiado donde se produce el anclaje de rotación. Entonces, ahora, de nuevo nuestros pequeños puntos azules son representaciones de los anclajes no han cambiado, se puede ver que siguen en las mismas posiciones exactas. Pero ahora, estamos consiguiendo esta bonita rotación de esta manera porque hemos pedido a Anchorat que sea H.CENTER. Ahora bien, si quisieras podrías abrir la carpeta HYPE Processing, y si realmente entraras en pde, verías que hay un HConstants.pde. Si realmente abrieras esto, verías muchas de las constantes disponibles que están dentro de Hype. Tenemos cosas como izquierda, derecha, centro, colores. Entonces, puedes ver aquí tenemos centro, y por supuesto está poblado con algunos números predeterminados, pero esos se anulan en función del tamaño de tus activos. Entonces, echa un vistazo a esto. Tenemos otras constantes como arriba a la izquierda, arriba a la derecha, abajo a la izquierda, abajo a la derecha, así sucesivamente y así sucesivamente. Entonces, este h.constants.pde es agradable porque puedes mirar a través de esto y ver todos los diferentes tipos de constantes que hemos borrado por dentro de altura. Entonces, centro, genial. Tenemos ese punto de pivote central. Ahora, sigamos adelante y pasemos al ejemplo seis porque va a empezar a explorar algunas de estas otras constantes que tenemos dentro del marco Hype. Entonces, de nuevo, el ejemplo seis es el mismo que cuatro y cinco, acabamos de cambiar las constantes Anchorat. Entonces, mira r1. En este, en la línea diez, dijimos bueno, bien quiero anchoRat pero esta vez hagamos centro-top. Entonces, si tuviéramos una obra de arte, iría a la parte superior pero entonces se centraría en el ancho de ese objeto. r2, simplemente haciendo de nuevo H.CENTER, r3, buscando ver qué haría abajo a la derecha. Entonces ahora, si probamos este boceto, estamos empezando a mirar los diferentes tipos de puntos de anclaje disponibles que tenemos. Ahora, el único que realmente se ve diferente es r1 porque has dicho centro-top. Es difícil ver que ese realmente r3 es abajo derecho porque se ve muy similar a ningún anchoRat todo lo que es 00. Entonces, hay que tener en cuenta que a veces algunos de estos anclajes, quienes sabrían que eso en realidad es de abajo derecho porque se ve muy similar a una rotación de 00. Entonces, estas constantes sí existen, no representa necesariamente en pantalla, que hey no es 00 es en realidad estamos anclando en la parte inferior derecha. Lo verías visualmente anclado en la parte inferior derecha si en realidad estuviéramos girando tal vez alguna obra de arte que hicimos un ilustrador, o una tipografía y para que pudieras ver que cómo estaba girando alrededor ese ancla no estaba en la parte superior de la letra a pero tal vez la parte inferior derecha de la letra a, si estuviéramos haciendo algo con tipo. Ahora bien, Anchorat es agradable, pero empezamos a meternos en algunas cosas mucho más interesantes cuando solo usas ancla. Entonces, Anchorat siempre quiere ser alimentado de una constante, ancla quiere saber coordenadas. Entonces, voy a seguir adelante y cerrar el ejemplo seis y voy a pasar a nuestro último ejemplo para este video que es el ejemplo siete. Ahora, cuando abres el ejemplo siete, como habrías adivinado es lo mismo que cuatro, cinco, y, seis excepto en lugar de usar Anchorat, estamos usando ancla. Ahora bien, me gusta mantenerme en ancla porque me gusta poder meterme con los números y ver diferentes tipos de resultados. Ahora, el ancla permite especificar cualquier coordenada x e y. Entonces, de nuevo, si miramos aquí en la línea 10, en la línea 18, y en la línea 26, se puede especificar cualquier posición x e y como punto de anclaje para la rotación, y aquí es donde realmente brilla Hype. Para hacer esto en Procesamiento solo regular, se vuelve un poco más difícil tener realmente un objeto rotar alrededor de una posición de anclaje especificada tan fácilmente como lo es con el uso de Hype. Ahora, veamos r1 y r2 y r3. Todos sabemos que la obra de arte es de 100 por 100. Entonces, si miramos a r1, veamos la primera posición de anclaje. Hemos dicho que la x es 50 y que la y es 25. Entonces, lo que eso nos diría es que si esta es nuestra obra que sabemos que la exposición es el medio. Porque 50 es la mitad de 100, para que sepamos que en el eje x es la mitad de la distancia. Pero el y ahora tiene 25, lo que significa que acaba de caer 25 píxeles desde arriba. Si miramos a r2, podemos ver que su x también es 50, pero es y es negativo 25 lo que significa en realidad que el punto de anclaje está fuera de la ilustración y ligeramente por encima de ella 25 píxeles. r3, de nuevo un poco inusual, la posición de anclaje es cero para la x pero 150 para la y. entonces, también está fuera de la obra. Ahora, sigamos adelante y probemos este boceto, y empezaremos a ver estos diferentes tipos de rotaciones. Entonces de nuevo, realmente me pasa a favorecer el ancla, porque a medida que empiezo a mover cosas o animar cosas en pantalla, tiendo a estar más sorprendido cuando estoy usando ancla y sobre todo cuando estoy usando ancla con números que están fuera de la obra de arte. Entonces, la obra de arte está barriendo y tal. Entonces, esto termina este video donde realmente hemos cubierto estos cuatro archivos que nos presentan para anclar y Anchorat. El último video va a cubrir los últimos tres archivos y la sección que solo muestra algunos ajustes y posibilidades con el uso de HRotate. También probablemente presentaremos algunas cosas que no vamos a cubrir hasta algunas secciones más pero creo que es agradable mostrar algunas cosas que están por venir. Entonces, recuerda que ancla no es solo con rotación es con cualquier comportamiento. Su con HTween, su Hoscillator. Entonces, el ancla se vuelve súper importante a medida que empezamos a mover las cosas en pantalla, porque realmente dictará el tipo de animación que estamos viendo. ¿ Es algo que se fija y se arremolina alrededor de un punto central o sí obtenemos estos movimientos de barrido porque en realidad hemos puesto el ancla fuera de la obra de arte. Entonces, ten esto en cuenta a medida que empiezas a probar tus propios ajustes cuando estás animando cosas que ancla pueden ser esta cosa que puedes probar muchos números diferentes y obtendremos muchos resultados animados diferentes. Está bien. Quedan tres archivos más. Nos vemos en siguiente video. 8. Unidad 2, video 3: De acuerdo, entonces vamos a cubrir los últimos tres archivos en la sección de HRotate. Solo hay algunos trucos. Simplemente me encantan algunas de estas características aquí. Entonces, empecemos con el ejemplo ocho. ejemplo ocho cubre la idea de anidar, y qué sucede si un objeto está anidado dentro de otro objeto, pero ese objeto principal tiene asignado un HRotate. Entonces, me encanta esto, y este es un truco tan grande que puedes usar aquí. Entonces, vamos a descomponer el ejemplo ocho. Yo quiero dibujar dos rectángulos. Entonces, tengo r1 y tengo r2. R1 es un 100 por 100. Tiene un ancla de 50 negativos. Entonces, sabemos que la obra de arte va a estar centrada. Pero, ¿por qué la posición va a ser negativa a 50 píxeles de la obra de arte por encima de ella, de acuerdo? También podemos ver que r1 tiene un color de naranja. Aquí está la parte importante. Mira esto, aquí mismo, la línea 9 es h.add (r). Entonces estamos sumando al escenario, estamos diciendo bombo que estamos agregando este rectángulo llamado r1. Ahora sólo olvidemos de r2 por un segundo porque aquí abajo en la línea 23, se puede ver lo tengo comentado pero dice nuevo hRotate (r1), así que sabemos justo de este bloque de código que la rotación se va a aplicar a r1. Ahora voy a presentar r2. R2 tiene algunos ajustes ligeramente diferentes. En primer lugar, la obra de arte es de sólo 50 por 50 por lo que es un rectángulo más pequeño y se puede ver que tiene un punto de anclaje diferente. Tiene un ancla de 25 que por supuesto es la mitad de 50, que sepamos que va a estar centrado pero es negativo 25 fuera de su Y. Así que sabemos que es de 25 píxeles arriba. Aquí se puede ver por el relleno que es un también un tono de azulado. Ahora la línea 17 es la magia. Línea 17, ¿agregamos r2 a H? ¡ No! En realidad vamos a poner el rectángulo r2 dentro del rectángulo r1. Entonces puedes ver ahí en la línea 17 estamos diciendo r1.add (r2) y así si fuera a probar este boceto lo que verías son dos rectángulos. Pero lo que no sabes visualmente al menos todavía es que r2 está en realidad dentro de r1, pero como se agrega más adelante segundo sí reside por encima de él. Por lo que sí tiene una mayor profundidad porque lo agregamos en segundo lugar. Pero si pudieras pensar en r1 como justo este objeto que tiene espacio infinito, termina por que r2 está dentro de r1 pero flotando por encima de él. Ahora la mejor analogía con la que tal vez se me podría llegar es como agrupar en Photoshop o Illustrator. Entonces si tuvieras dos capas, podrías agruparlas en una carpeta o algo así. Entonces si realmente movieras esa carpeta, moverías todos los activos que estaban en esa agrupación en particular. Ahora la razón por la que esto es impresionante es porque si descomento la línea 23 y digo rotar r1 como habrías adivinado, en realidad gira r2. Entonces el simple hecho de que estoy aplicando un HRotate a un activo pero luego invirtiendo otro activo dentro de ese activo, sí va a rotar con él. Entonces, me gusta esta idea de anidar porque hace que mi código sea un poco más delgado porque solo necesito especificar una HRotate y r2 está justo dentro de r1 así que no olvides que puedes hacer este tipo de anidación. Entonces, en cualquier momento que H.add, es agregar ese objeto al escenario. Pero luego una vez que se haya agregado un objeto, puedes empezar a hacer anidación. Al igual que en los archivos anteriores, teníamos un r1, r2, r3, podías agregar r1 a H y luego r2 podría estar en r1, r3 podría estar en r1, r3 podría estar en r2. Puedes hacer cualquier tipo de anidación multinivel así. Nuevamente sólo necesitamos una HRotate porque los otros objetos están dentro de ella por lo que por supuesto se rotan como grupo. Bastante asesino. Algo en lo que pensar. Pasemos al ejemplo nueve. Ahora abre el ejemplo nueve y voy a introducir algunas cosas. Nuevamente, me gusta mostrar un adelanto de cosas que han llegado. Aquí abajo, en la parte inferior, vas a ver que vamos a mostrarle a HoscilLator. HoscilLator no cubrimos hasta unas pocas secciones más pero de nuevo es solo el poder de lo impresionante. Te lo mostraré. Entonces, vamos a trabajar este fuera. El primero es que antes de llegar a Hoscillator solo veamos algunos de los cambios que han ocurrido. Primero es que pongo un auto clear false así esto es algo que no creo que realmente cubrimos en la primera clase porque de nuevo no estábamos animando nada. Pero si draw está corriendo una y otra vez, si es un bucle, auto clear true es default lo que significa que si no especificas auto clear, es cierto por defecto, lo que significa que borraré el fondo antes de pintar algo otra vez. Entonces, en el caso de todos los demás archivos que hemos mostrado, parece un solo objeto que se ha estado moviendo por sí mismo y no ha estado dejando ningún residuo, porque en realidad hemos estado despejando la pantalla antes de pintar el pantalla. Bueno, al cambiar el constructor de hypes para decir auto clear false estamos diciendo, hey hombre no despejes la pantalla solo sigue pintando esa cosa para siempre y para siempre y nunca y no limpie la pantalla para nada y ya veremos qué hace eso. Algunos otros cambios. Agregamos un trazo y el trazo en los tres es de color naranja oscuro y agregamos un relleno. El relleno es del mismo color que el fondo y tiene diferentes posiciones de anclaje. Entonces, 50,150 para r1, 50, 200 para r2, y 50, 250 para R3. Entonces, aquí hay un par de diferentes parámetros de rotación de edad aquí. Entonces, positivo uno, positivo dos, y negativo tres. Entonces, solo sigamos adelante y miremos lo que hace este auto clear false. Si ejecuto este boceto aquí mismo, verás que no estamos despejando la pantalla antes de volver a pintar la pantalla. Entonces, de nuevo, el claro automático es verdadero por defecto en bombo si no lo especifica. Entonces, en cualquiera de los otros archivos que hemos visto, siempre se borra la pantalla antes de que se pinte la pantalla. Bueno, ahora digo, no hagas eso para nada. ¿ Por qué no sigues pintando esa cosa mientras va por ahí? Entonces, ahora empieza a ponerse interesante porque aquí sólo estoy usando una simple rotación y estamos pintando el rastro de esta cosa a medida que se mueve alrededor de su rotación. Entonces, diversión. Bueno, sigamos adelante y cerremos esto y miremos esto he añadido un pequeño oscilador H y no voy a entrar en gran detalle sobre cada oscilador hasta más adelante en la sección cuando cubramos esa sección. Pero, mira lo que sucede cuando ejecuto este boceto con tres osciladores, y todo lo que el oscilador le está haciendo a estos tres rectángulos está cambiando la escala. Entonces, va a estar oscilando la escala hacia arriba y hacia abajo. Entonces, voy a seguir adelante y ejecutar este boceto y se puede ver que consigo la rotación alrededor de su ancla, y estoy dejando un rastro porque estoy diciendo AutoClear falso, pero oscilador está oscilando la escala hacia arriba y hacia abajo en base a algunos ajustes. Entonces, se puede ver solo a partir de esta simple cantidad de código, podemos empezar a obtener algunos patrones bastante interesantes y obviamente esto es solo un rectángulo si ponemos algún svg o algún otro activo, se puede empezar a imaginar cómo estoy teniendo un apogeo en Tumblr con estas cosas, creando este tipo de pequeñas animaciones en Tumblr. Con el solo uso de estas propiedades muy simples. Nuestro ejemplo nueve, un adelanto de lo impresionante por venir. Tenemos un último archivo aquí. Yo sólo quería mostrar svg giratorio. Entonces, en los otros archivos, sólo estábamos girando algunos rectángulos. Si fuera a abrir la carpeta ejemplos 10, podía ver que tengo una falla de datos, así que correcto, hay un build.pde, hay hype.pde, pero ahora hay una carpeta de datos y dentro de esa carpeta de datos, tengo dos svgs. Tengo un engranaje pequeño y tengo un engranaje grande. Entonces, acabo de hacer estos en Illustrator y los arrojé como activos svg. Lo que quiero hacer es, es animar esos engranajes. Entonces, échale un vistazo. Yo, básicamente, esta es la adición de la obra de arte y la rotación de la obra. Entonces, se puede ver aquí. Digo, quiero importar un svg. Por favor ve a buscar el engranaje pequeño. Quiero habilitar el estilo falso. Entonces, si recuerdas de la primera clase que mata a cualquiera de la coloración que se especificó dentro de Illustrator, no anclé en el centro, porque quiero que ese engranaje gire alrededor de su punto central. Le di una ubicación a 223 en la x, 413 en la y, y lo conseguí como naranja oscuro y luego mira lo que hice aquí. Dije: “H rota, oye, quiero rotar svg1 negativo 0.5”. Entonces, esta siguiente cuadra aquí, he dicho: “Está bien, svg2, ve a buscar el gran svg”. Nuevamente, habilite stylus false, nuevo, quiero un centro. Estoy poniendo esto en un x e y de 690 a 60 y el relleno es una naranja mediana, y he dicho hRotar svg2 0.3333. Ahora, cuando en realidad ejecuto este boceto, se vería que tengo una animación de estos dos engranajes girando uno contra el otro. Todo esto está usando es hRotate. Lo bonito es que si solo muevo esto a un lado aquí y solo voy a abrir un nuevo navegador porque HYPE no es un archivo jar. Yo solo quiero mostrarles aquí que si voy a movabletype.com, se puede ver que en realidad publiqué esto a JavaScript. Entonces, esa es en realidad la animación que se está ejecutando aquí en el fondo del sitio web de tipo móvil. Soy capaz de crear esa animación usando lienzo. Entonces, abrí esto en procesamiento, cambié el modo a JavaScript, y en realidad generé esto usando procesamiento JS, lo que hace un lienzo y ahora estás viendo esa animación en lienzo. Entonces, mira estas 29 líneas de código. Pude producir esta animación para este sitio web en unos, creo, 11 minutos y eso es lo que HYPE es genial haciendo, me está ayudando a prototipos y bosquejar ideas muy rápidamente sin tener que escribir mucho código. Entonces, pude usar HYPE para tirar de las formas y usar HRotate para animar esos engranajes entre sí que se sentarían bellamente en segundo plano, y de nuevo esto se ejecuta en tabletas y en la mayoría de los navegadores modernos. Impresionante. Esto concluye la HRotate y una sección de anclaje. Ahora vamos a pasar a la siguiente serie de videos que trata cada lienzo y cómo pintar a algo que no sea sólo el escenario. Entonces, ver en el siguiente apartado. 9. Introducción a HCanvas: Ahora, genial. Hemos rotado algo, pero ese objeto que en realidad hemos girado en esa sección anterior así como la primera clase, todo quedó pintado en el escenario. Entonces, necesitamos un respaldo por un segundo y ahora vamos a cubrir HCanvas. ¿ Qué es HCanvas? HCanvas está procesando gráficos P. Entonces, piénsalo como estás creando una imagen y en realidad vamos a pintar a esa imagen. Ahora, ¿por qué es eso mejor que pintar al escenario. Bueno, podemos apilar múltiples Hlienzos uno encima del otro. Entonces, al igual que Photoshop o Illustrator, podemos usar HCanvas para hacer estratificación, ¿verdad? Entonces, podemos tener ciertas cosas pintadas en un plano inferior y ciertas cosas pintadas en un plano superior. Entonces, el otro beneficio de tener este tipo de capas de lona es pensar en si estuviéramos pintando a escenificar y tenemos algún tipo de comportamiento como desvanecerse o desenfocarse. Ese desvanecimiento o desdibujamiento le pasaría a cada cosa que se estaba pintando en el escenario. Entonces, otro beneficio de usar HCanvas es que podemos especificar tipos de decoloración o desdibujamiento para que solo sucedan en una capa por lienzo. Entonces, por ejemplo, puede suceder una animación en nuestra capa superior que no tenga ningún tipo de desvanecimiento en absoluto, pero podríamos tener un comportamiento de enjambre en la parte inferior que queríamos dejar senderos. Entonces, en esta sección, vas a ver que usar HCanvas tiene mayores beneficios que simplemente pintar directamente al escenario. 10. Unidad 3, video 1: Está bien. Ahora estamos en HCanvas. Nuevamente, adjunto a la sección se encuentra un archivo zip para cada lienzo, y hay seis archivos de ejemplo en esta carpeta. Ahora, en primera clase y hasta este punto, hemos estado pintando objetos en el escenario. Sí, así que hemos estado diciendo h.add y lo que pasa es, es que cualquier objeto con el que pasamos a estar pintando ya sean dibujables como elipses o rectángulos, o si son imágenes, o caminos o SVG, todo ese contenido ha estado pintando en el escenario. Entonces, en algunos escenarios esto no sería favorable. Averigüemos cuáles son esos escenarios. Entonces, veamos el primer ejemplo. El primer ejemplo es como un ejemplos de Hrotate. Parece que estamos adjuntando un HRect llamado R1. R1 es un cuadrado que es de 100 por 100. Tiene alrededor de 10. Cuenta con ancla de 50 y 125. El lugar es el medio de la pantalla con divide por dos, altura dividida por dos. Este rectángulo no tiene trazo, y es un color de relleno de naranja. Se puede ver que tenemos un Hrotate, y está girando R1 y está girando a una velocidad de dos grados cada vez. Ahora, notarás en la línea cinco que estoy configurando AutoClear false. Entonces, no quiero que limpie la pantalla, quiero que siga pintando los senderos. Ahora, mira lo que pasa cuando ejecutamos este boceto. Notarás que arranca el rectángulo, y voila. Porque estamos haciendo AutoClear false, pinta el rectángulo alrededor de la rotación y obviamente una vez que hace un giro completo de 360 grados, no tienes ni idea de que en realidad está sucediendo aquí una animación. Pero de hecho, hay uno que las cajas lentamente está haciendo una rotación alrededor de ese camino. Entonces, ¿y si quisiera desvanecer esto? ¿ Y si quisiera que esa caja dejara un rastro, pero luego poco a poco se desvanece ese rastro en el fondo? Ahora, te voy a mostrar un truco no-bombo para hacer eso. Probablemente lo verás en muchos bocetos de procesamiento. Entonces, el ejemplo uno es un problema que necesitamos arreglar. Entonces, pasemos al ejemplo dos. Ahora bien, si entras en el ejemplo dos, notarás que es esta copia de un ejemplo uno, sin embargo, he hecho algo un poco complicado en el sorteo. De nuevo, podría verse esto en otros bocetos de procesamiento, pero tiene algunas limitaciones. Ahora, el truco está dentro del sorteo, antes de pintar ese rectángulo moviéndose en una rotación, estoy diciendo bien, quiero crear un relleno, y ese relleno es de 20, 20, 20, mismo color exacto que el fondo, pero en lugar de que el alfa sea 255, el alfa es sólo 10. Entonces estamos creando un relleno, mismo color que el fondo, pero tiene un alfa de 10. Ahora, mira la línea 21. Aquí está el pequeño truco divertido que la gente ha estado usando, que es, que si tuviéramos el escenario y que si hiciéramos un rectángulo del mismo tamaño exacto del escenario, pero ese rectángulo tenía ese relleno de 20, 20, 20 en un alfa de 10, y se pintaron encima del escenario? Entonces se dibujaría el rectángulo, luego el bucle volvería a correr. Entonces, está golpeando constantemente este enorme rectángulo, del mismo tamaño que el fondo, pero con un relleno y un alfa de 20. Por lo que al hacer eso una y otra vez, parecería quemar el rastro de fondo. No obstante, si has usado este truco ya sabes lo que va a pasar a continuación, que es, tiene un poco de limitación. Entonces si probamos el boceto, verías que, sí, hecho empieza a quemarlo, pero debido a que el relleno es sólo un alfa de 10, por alguna razón el procesamiento no lo construye lo suficiente para quemarlo realmente de vuelta hasta el fondo. Entonces, podrías notar que en realidad ha dejado un fantasma verde de un círculo, en realidad no lo quema completamente lejos al fondo. Entonces, un poco de limitación ahí. Entonces quiero conseguir este efecto, pero no quiero que ese residuo quede en segundo plano. Entonces, en esta sección quiero mantener corto el video así que voy a parar aquí mismo, luego pasaremos al ejemplo tres que va a usar este concepto de lienzo. Entonces voy a parar el video aquí, pasaremos al siguiente y me meteré en las tuercas y pernos de usar cada lienzo. Nos vemos en el siguiente video. 11. Unidad 3, video 2: Está bien. Estamos en el ejemplo 3 que va a ilustrar esta idea de HCanvas. Ahora, cada lienzo dentro de procesamiento es un gráfico P lo que básicamente significa que es una imagen. Lo que quiero hacer es pintar a esa imagen, no al escenario. Está bien. Entonces, una buena analogía sería como Photoshop. Cuando inicias Photoshop y comienzas a hacer algunas ilustraciones, normalmente tienes una capa en el archivo de tu capa y esa capa se llama fondo. Y tú dices, quiero una nueva capa, y eso agrega una nueva capa encima y luego comienzas a hacer ilustraciones dentro de esa cosa, y no tiene nada que ver con el fondo. Entonces, mismo concepto exacto que es, tenemos nuestro escenario y vamos a añadir cada lienzo por encima del escenario y vamos a estar pintando a eso. Ya verás en algunos de estos archivos posteriores que tiene tremendas ventajas. Entonces, echemos un vistazo a este expediente. Arriba aquí arriba, ves hCanva c1, lona uno, y lo verás aquí en líneas, bueno más importante, solo quiero señalar en la línea 6. Te darás cuenta de que eliminé AutoClear (false), ¿verdad? Si vuelvo al ejemplo 1 por ejemplo, verás que configuro AutoClear (false). Entonces, eliminé AutoClear (false) de la línea 6 porque ese es el escenario y no voy a estar pintando al escenario. Entonces, puedes seguir adelante y despejar el escenario porque lo único que le voy a pintar es este lienzo. Está bien. Por lo tanto, notarás que he eliminado AutoClear (false) de la línea 6. Ahora, las líneas 9 y 10 son nuevas. Dice, “c1 = nuevo HCanvas” y aquí es donde ponemos el AutoClear (false). Yo quiero esa imagen a la que estamos pintando, no quiero aclarar eso antes de volver a pintar. Entonces, ahora estoy dejando los senderos en la lona. Mira la línea 10, estás diciendo, “h.add (c1)”. Entonces, tienes tu escenario y luego por encima de tu escenario, estás agregando este HCanvas. Ahora, sigamos adelante y miremos el acoplamiento del rectángulo. Entonces, aquí está nuestro rectángulo y notarás que es más o menos lo mismo del ejemplo 1, ejemplo 2 excepto la línea 13. línea 13 dice que no agregues esto al escenario H, agrega esto a este lienzo que acabamos de crear llamado c1. Entonces, ¿recuerdas ese ejemplo de anidación que hicimos en HRotate? Mismo concepto exacto. Entonces, tenemos nuestro escenario, tenemos nuestro lienzo y en realidad estamos pintando el rectángulo en el HCanvas, ¿verdad? Entonces estamos anidando. Está bien. Entonces de nuevo, no h.add (r1), es c1.add (r1). Está bien. Nuevamente, estamos haciendo un poco de rotación en r1 y en el sorteo solo estamos pintando h.Drawstage. Ahora, mira lo que pasa. Ahora bien, podrías notar que a mi archivo le falta una cosa, luego el zip y yo lo estoy haciendo por una razón. ¡ Ver pasar! ¡ Qué Josh! Película de prueba. Ahora, ahora mismo. Está bien. Ejecuta el boceto y mira, se ve exactamente como el archivo 1 en el sentido de que no se está desvaneciendo en absoluto, ¿verdad? No se está quemando. Pero de nuevo, tenemos nuestro escenario, tenemos nuestro lienzo, y tenemos nuestro rectángulo que está girando dentro del lienzo. Ahora, todo lo que tengo que hacer, otra vez lo ves en tu expediente, aquí arriba, puedo poner fade y luego pasar un número. En este caso quiero desvanecerme un cuatro. Entonces, si sigo adelante y ejecuto este boceto ahora, ya verás que básicamente está haciendo lo hizo el ejemplo 2 excepto por su perfecto desvanecimiento de píxel, que en realidad no deja atrás a ese fantasma verde en este archivo. Entonces, impresionante. Está bien. Entonces esperemos entiendas lo que está pasando aquí es que nuestro escenario está sosteniendo nuestro HCanvas y nuestro HCanvas es lo que está sosteniendo nuestro rectángulo y al poner en este fundido cuatro, estamos quemando esta cosa. Entonces, obviamente, el número más bajo que puedes poner es un desvanecimiento de uno y eso sería despacio, correcto. Entonces, eso poco a poco quemaría eso. De hecho, tan lento que no tiene oportunidad de quemarlo antes de que vuelva a empezar el bucle. Ahora, déjame volver a poner esto a cuatro para que imite el tuyo. Entonces, utilicé esta analogía de Photoshop y aquí es donde realmente brilla HCanvas porque veamos otro problema que encontraríamos si no estuviéramos usando HCanvas. Está bien. Entonces, voy a pasar al ejemplo 4. Ahora, el ejemplo 4 ha eliminado de nuevo HCanvas. Yo lo saqué porque quiero plantear otro problema que es, si tenemos tres activos, ¿verdad? Entonces si acabamos de desnatar esto muy rápido, verías que esto es un imitador del ejemplo 2 excepto ejemplo 2 solo estamos pintando una cosa y en el ejemplo 4 estamos pintando tres cosas, ¿verdad? Entonces, tengo tres llamadas para hacer un HRect. Tengo r1, r2 y r3, y de nuevo los estoy girando. De nuevo, te estoy mostrando ese truco de solo crear un relleno con un alfa de 10 y luego pintar un rectángulo muy grande encima de él. Ahora, la razón por la que estoy mostrando esto de nuevo es porque si ejecuto este archivo, de nuevo, te darás cuenta de que no lo quema a la perfección y estamos consiguiendo ese fantasma pero estamos consiguiendo ese fantasma en tres colores diferentes ahora porque nuevo, no se puede quemar perfectamente a la pantalla trasera. Entonces, genial. Esto ahora muestra esta idea de, oh Dios mío, ¿y si estoy pintando tres cosas? ¿ Cómo es que el lienzo sea el amante que siempre he deseado? Porque como esa analogía de Photoshop, puedo tener 3 Hlienzos, y puedo pedirle a cada uno de estos tres rectángulos que pinten a su propio HCanvas por separado. Si están pintando a su propio HCanvas separado, podemos hacer todo tipo de efectos diferentes en esos cada lienzos, como, “Hey, auto-clear true, no pintes los senderos”. O bien, “Haz de éste un desvanecido de cuatro y haz de éste un desvanecido de ocho”. Entonces, literalmente pienso en cada lienzo como capas y Photoshop, y puedo aplicar diferentes tratamientos a esos lienzos. Entonces, sigamos adelante y cerremos este archivo, y veamos el arreglo en el ejemplo 5. Entonces, en el ejemplo 5, arreglo, vuelvo al ejemplo tres, pero con el ejemplo de la estructura de cuatro. Entonces, quiero pintar tres cosas. Ahora, echa un vistazo a esto. Arriba en la parte superior, tengo cada lienzo c1, c2, c3, lona uno, lona dos, lona tres. Te darás cuenta de que configuré los lienzos en las líneas nueve a 11 donde digo: “Vale, c1 es un HCanvas, c2 es un HCanvas, y c3 es un HCanvas, pero les voy a dar diferentes ajustes. El lienzo c1 va a auto claro verdadero, por lo que no va a pintar senderos. El c2 va a hacer un fade de ocho, y el c_3 va a hacer un fade de dos. Entonces, de nuevo es como configurar tres capas en la parte superior del escenario y darles diferentes propiedades de filtro de animación. Sí. Ahora, mira las líneas 13 a 15. Este es el orden en que se apilan. Entonces, tienes escenario, luego c1, luego c2, luego c3. Entonces, esa es la capa de orden, porque ese es el orden que los pongo en el código. Entonces, etapas primero, c1, luego c2, luego c3. Disculpe. Ahora, cada uno de los r1, r2 y r3, van a hablar con su c1, c2, c3s. Entonces, en la línea 18, c1, r1, línea 25, c2 a r2, línea 32, c3 a r3. Entonces, cada rectángulo está pintando a su propio lienzo separado. De nuevo, tenemos nuestras rotaciones aquí dentro, y en el sorteo sólo le estamos pidiendo que dibuje un escenario. Impresionante. Vamos a ejecutarlo. Entonces, voy a seguir adelante y correr esto, y notarás que obtenemos exactamente lo que habíamos anticipado, es crear tres capas, tres lienzos pintando nuestros rectángulos a cada uno de esos lienzos y tener un mirada diferente, algo que no podías lograr y procesar con solo hacer eso. Un truco de burnout de rectángulo dentro del sorteo, porque lo aplicaría a los tres. Entonces, el ejemplo cinco realmente empieza a, creo que pista ahora de todas estas grandes cosas que podemos hacer usando HCanvas, que es, “Oh, Dios mío, voy a pensar en HCanvas como capas, y tal vez en una capa tengo tipo y no quiero eso tipo para dejar senderos, pero luego tengo esta otra capa que podría tener alguna animación que está dejando senderos”. Entonces, comienzas a pensar en cada lienzo como capas como en Photoshop y solo estás aplicando diferentes efectos a cada uno de esos Hlienzos. Entonces, entonces pensé, sólo les daría un último expediente antes de terminar la sección que es el ejemplo seis. ejemplo seis sólo va a poner estos tres rectángulos uno encima del otro. Entonces, si vas al ejemplo seis, notarás que realmente lo único que ha cambiado, y éste en particular, es echar un vistazo a los fundidos que pongo en un fundido dos, un fundido cuatro, y un fade ocho para cada uno de los lienzos. Pero ahora, mira lo que hice en las líneas 13 a 15, invertí el orden en el que se apegan. Entonces, dije: “Oye, quiero el escenario, luego quiero el lienzo 3, luego lienzo 2, y luego lienzo 1”. Entonces, he cambiado el orden de apilamiento porque eso se relaciona con el desvanecido. c3 se va a quemar mucho más lento, así que en realidad lo quiero en el fondo. c2 se va a quemar un poco más rápido, lo quiero en el medio, y c1 en realidad se va a quemar el más rápido con un desvanecimiento de ocho, y en realidad quiero eso encima. Entonces, en realidad he invertido el orden de apilamiento de las capas. Lo último que hice fue en la línea 19, en la línea 26 y en la línea 33, sólo los tengo todos en medio del lienzo. Entonces, es con dividido por dos, altura dividida por dos. Cuando realmente ejecutas esto, porque son tres colores diferentes, y porque están en tres lienzos diferentes, y porque se están quemando a tres velocidades diferentes, crea esto realmente bonito gradiente. Entonces, puedes hacer estos trucos donde estamos usando HCanvas conceptualmente como crear capas, y podemos tratar cada una de esas capas con diferentes efectos como, por favor borra el fondo, o no borres el fondo, seguir adelante y añadir un desvanecido. Impresionante. Vamos a usar mucho HCanvas, porque de nuevo, cuando pienso en la creación de animación, quiero una capa de cosas en niveles inciertos, y HCanvas nos permite hacer eso. Entonces, de nuevo, nada está pasando en el escenario, todo está sucediendo en estas capas de HCanvas. ¡ Dulce! Eso termina este apartado. Vamos a usar HCanvas una tonelada en el resto de las secciones. A continuación, vamos a pasar a HFollow, que en este punto, rotación realmente no ha tenido ninguna entrada. Cada lienzo no tenía ninguna entrada. Entonces, HFollow es el siguiente comportamiento de animación que utiliza la entrada del ratón. Entonces, va a seguir por donde hacemos movimientos del ratón. Entonces, envolviendo cada lienzo, te veré en un HFollow. 12. Introducción a HFollow: Entonces, en esta sección vamos a estar cubriendo H-follow, okay.H-follow va a estar usando en estos ejemplos el mouse como entrada. Entonces, en algunas de las secciones posteriores vamos a estar aprendiendo sobre comportamientos y comportamientos podrían correr de forma independiente, pero en este caso particular H-follow realmente va a usar el ratón como entrada. Entonces, a medida que empecemos a mover nuestro ratón a través de la pantalla o en realidad ejecutar gesto, tendremos algo que en realidad sigue ese movimiento de gesto. Ahora, H-follow tiene un montón de parámetros diferentes que en realidad podemos aplicar a esto. Entonces, por ejemplo, si pinto un objeto en pantalla y luego digo que quiero que este objeto siga H-, es una relación uno-a-uno lo que significa en todas partes que mueva mi ratón, ese objeto está pegado a esa posición particular del ratón. Pero, en realidad podemos extender este comportamiento introduciendo algunos argumentos más. Entonces, puedo decir cosas como esta H-follow tiene una facilidad o un resorte a ella, y si dijera que H-follow tiene flexibilización, conforme muevo mi ratón el objeto haría una transición lenta al ratón. Entonces, a medida que me movía sería una especie de poco a poco se quedaría atrás. Entonces, conseguirías este lindo movimiento suave. Si implemento un resorte, obtienes elasticidad o bandas de goma. Entonces, podría empezar a mover mi ratón alrededor y el objeto realmente goma banda alrededor de ese movimiento del ratón en particular. Entonces, con el final de esta sección en particular vamos a aprender a mover el ratón, ejecutar gesto, que es una gran combinación con el colorista de píxeles, ¿verdad? Entonces, este último archivo en el que vamos a trabajar, en realidad vamos a cargar en una fotografía y en realidad podemos mover el ratón mucho como un pincel y en realidad recoger el color de una fotografía. Entonces, Será una manera interesante de realmente hacer un retrato de alguien porque usarías esa información de retrato de esa fotografía y usando H-follow para ejecutarte como un pincel personalizado. 13. Unidad 4, video 1: Hola. Bienvenido a HFollow. Ahora, en el primer par de ejemplos, hemos usado animación que no fue impulsada por ninguna entrada. Entonces, con HFollow, vamos a cubrir cómo usar el ratón para conducir realmente la entrada. Entonces, ejecutaremos gesto y algo seguirá a nuestro ratón. Ahora bien, si descargas el archivo zip que está asociado a este video, debes descomprimir eso, abrirlo y ver que hay seis archivos asociados a HFollow. Ahora, tengo el ejemplo uno abierto ahora mismo y te darás cuenta de que, tengo algunos comentarios agregados a este archivo para que puedas ver algunas de las funcionalidades de HFollow, algunos de los argumentos que soporta así como aprender a registrarse anular el registro, agregar o eliminar un comportamiento. Entonces, si eres un programador intermedio al procesamiento, solo estoy exhibiendo algunos de los conjuntos de características de HFollow. Está bien. Entonces, desglosemos este primer expediente. Se puede ver aquí arriba en la parte superior, estoy creando una instancia de hFollow llamada mf para mouse follow. Tengo r1, HRect donde auto clear no está presente aquí así que sabemos que eso va a estar despejando el fondo. Tenemos nuestro rectángulo, es un 100 por 100 con un cuarto de radio de 40. No estamos aplicando ningún trazo a r1. El relleno va a ser un tono claro de gris ECECEC. El lugar para iniciar está en el centro del lienzo, con división por dos, altura dividida por dos. El punto de anclaje va a estar en el centro y simplemente voy a girar este rectángulo 45 grados. Entonces, al girar a 45 grados, debería parecer un diamante. Adelante y agrego r1 al escenario y luego aquí mismo especifico seguimiento del mouse. Entonces, digo seguir el ratón, eres un nuevo hFollow y el objetivo es r1. Por supuesto, evite dibujar simplemente como h.DrawStage. Ahora, si ejecuto este boceto, notarás que básicamente es una proporción de 1 a 1. Entonces, dondequiera que vaya el ratón, el r1 está pegado a esa posición. Entonces, no hay latencia. Simplemente muevo esto y donde quiera que vaya va. Entonces básicamente, hFollow es una manera, como atajo para hacer la posición x e y del ratón. Ahora, tal vez estés mirando estos comentarios y te des cuenta, oh, está bien, aquí hay algunas otras características. Entonces, pensé que soplaría esas características dos ejemplos separados. Entonces, sigamos adelante y veamos el ejemplo dos. Ahora, lo único que es diferente en el ejemplo dos es aplicar algo de “facilidad” a este seguimiento. Entonces, si nos fijamos en la línea 21 aquí, tenemos un mouse follow es un nuevo hFollow. El objetivo sigue siendo r1 pero hemos añadido una facilidad de 0.1. Entonces, no va a ser una proporción de 1 a 1 de donde está el ratón. En realidad se va a facilitar en posición. Entonces, si ejecuto este boceto, debes notar que a medida que mueves tu ratón, r1 está persiguiendo al ratón pero sí tiene algo de flexibilización al mismo. Entonces, no es una relación de 1 a 1 sino que lentamente se anima a su lugar. Ahora, hay otro argumento además de la facilidad, así que si seguimos adelante y cerramos el boceto y miramos el ejemplo tres, lo único que es diferente en el ejemplo tres es que hemos agregado el atributo de la primavera. Entonces, queremos conseguir algo de elasticidad yendo aquí. Entonces, ya verás que todavía tengo facilidad a 0.1 pero he aplicado algún resorte a este hFollow y esa primavera está haciendo 0.95. De nuevo, si ejecutamos este boceto aquí, veremos que no es una relación de 1 a 1. En realidad sí facilidad al ratón pero también tiene esta elasticidad. Entonces, es bastante divertido si terminas haciendo los círculos aquí. Obtienes estos bonitos patrones elásticos. Ahora, con esto, se podía ver que este podría ser un sistema bastante bueno para hacer pinceles. Podría usar esto como pincel y alguien podría ejecutar gesto y algún tipo de pintura podría suceder. Entonces, sigamos adelante y cerremos esto y miremos el ejemplo cuatro y el ejemplo cuatro solo dice, bien, bueno, tratemos esto como si fuera un pincel. Entonces, lo primero que quiero que note es en la línea siete, dijimos AutoClear (false). Entonces, como realmente movemos gesto, va a salir del camino porque no está despejando el fondo antes de que vuelva a pintar el rectángulo. También he agregado un HColorPool y proporcionado algunos colores. Entonces, aquí en la línea 10, creo el nuevo HColorPool y luego especifico algunos colores dentro de esa alberca. Echemos un vistazo a r1 porque r1 sí ajustó un poco. En las tres primeras versiones, realmente no estábamos haciendo nada con el trazo. Aquí puedes ver lo he dicho, bueno, quiero hacer el peso del trazo también y quiero hacer del relleno un gris muy oscuro; 111111. Entonces, ese es el cambio aquí y r1 está agregando un peso de trazo y en realidad cambiando el relleno de ese EC al 11. De nuevo, el seguimiento del ratón no ha cambiado. Parece que frené la flexibilización. Entonces, la flexibilización es de 0.05 y el resorte todavía va a ser realmente elástico a ese 0.95. Ahora, el cambio aquí está en línea 30 Dije, vale, ya que esto se ejecuta, quiero actualizar el trazo de r1 para obtener aleatoriamente un color fuera de las líneas de la matriz de colores de diez. Entonces, a diferencia de los 30, va a ser escogiendo al azar uno de estos colores. Ahora, si ejecuto el boceto ahora, nuevo deberías ver que está escogiendo aleatoriamente un color de trazo. Pero conforme empecé a mover mi ratón, estoy dejando el camino de donde viajó este ratón elástico. Por lo que de nuevo, puedo pensar en esto como un pincel mientras muevo la posición de mi ratón en la pantalla. Entonces, vamos a sumar a esto. Entonces, pensé, bueno, bien eso es bonito que estemos escogiendo color aleatorio pero si nos fijamos en el ejemplo cinco, ejemplo cinco dice, bueno, vamos a obtener el color en realidad de una imagen. Entonces, si nos fijamos en el ejemplo cinco, realidad hay una carpeta de datos y dentro de esa carpeta de datos, es este JPEG que tomé en Sintra Portugal. Vamos a usar HPixelColorist para realmente robar el color de este JPEG. Entonces, si nos fijamos en la línea tres aquí, en lugar de usar pool de colores, estamos usando HPixelColorist y luego en las líneas 10 a 14, he especificado la imagen que debe usar HPixelColorist que es, Hey, ve a por esto sintra.jpeg y se puede ver también estoy pasando por el argumento de que sólo quiero aplicar la coloración al relleno. No al trazo, no al relleno y trazo sino solo al relleno. Está bien. Entonces, echemos un vistazo a r1 HRect. El único ajuste real que hice aquí fue que agregué un color de trazo de negro y puse un alfa de 150. Entonces, el trazo no va a ser sólido 255 negro, va a ser un poco de Alfa a ella. Actualizando el dibujo hacia abajo en la línea 35 aquí, se puede ver que estamos diciendo colores.applycolortor_1 y como el color se especifica solo relleno, en realidad sólo va a actualizar los rellenos. Entonces, si sigo adelante y ejecuto este boceto, ahora tengo una forma de usar un pincel pero en realidad estoy tomando muestras la información de color del JPEG proporcionado. Entonces, la posición X e Y de mi ratón está robando la posición x e y en el JPEG y mirando el color del píxel en esa posición x e y específica. Entonces, este es un truco que muchos de nosotros hemos visto usar a Eric Netsky, donde tiene estos sistemas que en realidad están pintando y tomando muestras del color a partir de fotografías que toma. Entonces, hasta este punto, hemos hecho cinco exámenes pero quizá te hayas dado cuenta de que no presentamos a nuestro buen amigo HCanvas. Entonces, pensé que agregaría un ejemplo seis y dentro de ejemplos seis, tengo ocho agregados HCanvas c1 en las líneas 11 a 12. Digo, oye, quiero hacer un HCanvas, el auto claro es falso en el HCanvas. Entonces, lo quité de la línea ocho lo moví aquí abajo para que no esté auto despejando el HCanvas y puse ese precioso desvanecimiento de cuatro y luego h.addC1 y luego si miras hacia abajo en la línea 25, estoy diciendo en lugar de h.Add estoy diciendo por favor agregar r1 al lienzo C1. Aparte de eso, todo lo demás sigue siendo igual. Si vas adelante y ejecutas el boceto, debería verse exactamente como build 5. A excepción de que tenemos ese hermoso pixel perfecto desvanecimiento del gesto usando nuestro buen amigo HCanvas. Impresionante. Entonces, ahora estamos empezando a mirar algunos más de estos comportamientos. Esta es bonita porque es gesto. Podemos empezar a construir pinceles y no importa si estamos usando un HRect para el pincel o usando SVG. Entonces, aquí te damos una oportunidad perfecta para tomar algunas de las ilustraciones que dibujamos en la primera clase y en realidad podrías usar tu SVG como reemplazo a este HRect para que puedas empezar a construir ahora estos pinceles personalizados usando HFollow. Ahora, la siguiente sección, esto es como un avance perfecto. HRotate acaba de correr por su cuenta y el mouse HFollow requirió que escucharas el ratón y moveras el ratón. la siguiente sección, vamos a hablar de temporizador así que cómo empiezo a hacer las cosas en base a un tempo. Entonces, cada temporizador me permitiría pintar cosas o introducir cosas basadas en un tempo. Por supuesto, si tengo algo que es un tempo constante, probablemente también quisiera mostrar HRANDOMTrigger y HRANDOMTrigger, como dice timer, quiero disparar cosas , quiero introducir cosas, pero no quiero hacerlo en un tempo muy constante. Yo quiero aleatorizar ese tempo. Entonces, eso es lo que es HRANDOMTrigger. Entonces, esto termina un HFollow. Pasemos a los temporizadores. Nos vemos en el siguiente apartado. 14. Introducción a HTimer y HRandomTrigger: Entonces, con HTimer, básicamente tenemos un pulso constante de acciones. Está basado en un tempo. Entonces, si establezco un intervalo por cada 1,000 milisegundos, eso significaría que tengo una acción que se está activando cada segundo. También tengo la capacidad de establecer algo así como ciclos num, que es cuántas veces quiero que se ejecute este tempo. Entonces, cuando sucede ese pulso, básicamente tengo una devolución de llamada. Entonces, trabajaremos en un archivo que use HTimer para pintar cosas de manera muy constante en pantalla. Entonces, mientras HTimer usa un pulso constante para crear algo, un buen compañero de eso es HRANDOMTrigger, y HRANDOMTrigger se basa en un tempo aleatorio. Entonces, hay un porcentaje de probabilidad variable. Entonces, por ejemplo, si dijera que quería un gatillo aleatorio pero escribí algo como 1/15, eso significaría que disparador aleatorio tiene una probabilidad 1 en 15 de ser creado. Entonces, todavía estás creando un tempo pero no es un tempo constante, es offset un poco basado en un porcentaje aleatorio. Entonces, podrías conseguir bop, bop bop bop, bop, bop, bop. Entonces, seguimos creando con tempo, pero no es un tempo constante como se usaba anteriormente en HTimer. 15. Unidad 5, video 1: Está bien. En esta sección, vamos a cubrir los temporizadores. HTimer, que como mencioné antes, va a disparar algo basado en un pulso y cada gatillo aleatorio que va a desencadenar aleatoriamente un pulso basado en el azar, la probabilidad. Entonces, en este video, realidad vamos a adjuntar a este video, deberías ver que en realidad hay un archivo zip. Si descargas ese archivo zip, debería haber nueve archivos en ese zip. Los primeros siete tratan con HTimer y luego hay dos ahí dentro que tratan con HranDomTrigger. En este video en particular, vamos a cubrir los primeros cuatro ejemplos en HTimer. Ahora, sigamos adelante y abramos el ejemplo uno, que es HTimer uno. En este ejemplo en particular, en realidad, nada se pinta en pantalla. En realidad sólo vamos a imprimir una salida a la ventana de salida aquí dentro de Sublime Text 2 que sólo va a decir Hola Mundo y un contador. Entonces, echemos un vistazo al temporizador. Tiene algunos argumentos por los que probablemente queremos correr. El primero es aparecer en la parte superior. Yo digo que HTimer es un temporizador. Olvídate de mostrador por un momento. pasa nada mucho en cuanto a tamaño, fondo, lo que no, pero aquí en las líneas nueve a 20, realidad especifico el temporizador. Entonces, digo, timer equivale a un nuevo HTimer y de nuevo, veamos algunos de los argumentos de timer aquí. El primero es NumCycles. Ahora bien, si realmente no tienes esta línea, entonces el temporizador se ejecuta indefinidamente. Se va a correr hasta que en realidad cierres la película. En este caso, les estoy mostrando que sólo quiero que el temporizador realmente dispare 10 veces. Uno, dos, tres, cuatro, cinco, seis, siete, ocho, nueve, 10 y luego se apaga. Ahora bien, si esto va a correr 10 veces, ¿cuál es el intervalo entre cada vez que se despide? Entonces, se puede ver aquí en la línea 11, hemos especificado un intervalo y en realidad es en milisegundos. Entonces, en este caso, se va a disparar cada 500 milisegundos o aproximadamente cada medio segundo. Ahora bien, ¿qué pasa cuando se dispara el temporizador? Esa es en realidad nuestra devolución de llamada. Entonces, verás aquí dentro de la devolución de llamada, de nuevo, solo voy a imprimir en la ventana de salida en la parte inferior de Sublime Text 2. Yo sólo voy a decir hola, mundo y luego contador, cuántas veces esto realmente disparó para que pueda probar que realmente sí se apaga después de que NumCycles llegue a 10. Entonces, para contar, aquí arriba en la parte superior, digo que contador es igual a uno y luego en la línea 15 estoy diciendo, vale, imprime “hola, mundo” más sea cual sea el valor del contador. Entonces después de que haya hecho con eso solo digo, plus, más contador. plus, plus contador dice agregar uno en el valor de contador. Entonces, uno más uno se convierte en dos. Dos más uno se convierte en tres. Tres más uno se convierte en cuatro, y así sucesivamente. Entonces, sigamos adelante y probemos este boceto, y de nuevo, no deberíamos ver nada en el escenario pero debes notar dentro de la ventana de salida que en realidad sí dice hola, mundo 10 veces, de una a 10 y luego te darás cuenta de que en realidad se detiene. Entonces, de nuevo, HTimer nos permite ejecutar algo basado en un pulso y usando el argumento de NumCycles, lo puedo decir cuando realmente quiero que se apaguen. Vas a ver un poco más tarde esto vendría muy útil con albercas. Porque si digo que quiero dibujar 100 cosas, tal vez quiero que este temporizador se apaga después de que haya mostrado todos los 100 objetos. Genial. Entonces, voy a seguir adelante y cerrar ese archivo y voy a pasar a construir dos. Ahora, construye dos, voy a empezar a hacer algunas cosas, visual en pantalla. Entonces, solo pasemos por este archivo y veamos qué tenemos pasando aquí. Entonces, arriba arriba, de nuevo, tenemos nuestro HTimer, tenemos nuestro HRect, y de nuevo nada pasa mucho con el fondo. Si nos fijamos en r1, líneas de nueve a 15, parece que estamos haciendo un rectángulo, otra vez, ese rectángulo es de 100 por 100 con Radio de esquina de 10. Lo estoy agregando al escenario, h.Añadir ubicación. Ahora, veamos la ubicación aquí. Location dice: “Oye, quiero que elijas un lugar al azar en pantalla. Entonces, digo, entero aleatorio con una altura aleatoria entera. Eso básicamente significa que va a recoger un número entre cero y 640, pero porque envolvió un int frente a ello significa que va a ser un número entero por lo que no va a recoger decimales. Entonces, voy a conseguir 1, 45, 122, etcétera. Este HRect no tiene derrame cerebral. Tiene un relleno de naranja, FF3300 y de nuevo, roté 45 grados. Ahora, antes de que lleguemos al temporizador, sólo entendemos que tenemos nuestro escenario y solo va a escoger al azar algún punto y va a pintar el rectángulo. Ahora, lo que estoy haciendo en temporizador es que voy a estar rerandomizando la posición de r1. Entonces, si miras aquí, como en el primer archivo, no hay NumCycles, lo que significa que quiero que esto se ejecute infinitamente. Entonces, si miras construir dos aquí no hay NumCycles, lo que significa que este temporizador sólo se va a ejecutar hasta que realmente cierremos la película. El intervalo es cada 250 milisegundos, por lo que un cuarto de segundo. El callback solo dice: “Oye, r1. Deseo restablecer tu ubicación anchura aleatoria, altura aleatoria. Entonces ahora si probamos el boceto, que debes ver en pantalla aquí es que cada 250 milisegundos, un pulso muy rápido, se está volviendo a erandomizando la ubicación de r1. Entonces, de nuevo, no estamos tratando con pool en este punto, sólo tenemos un activo y en base a un tempo aquí, 250 milisegundos, estamos volviendo a erandomizando la ubicación de este rectángulo. Genial. Pasemos a construir tres. Ahora, construir tres, de nuevo voy a introducir algunas cosas nuevas pero realmente es sólo una copia de dos. El primero es que voy a añadir una piscina de colores. Entonces, aquí arriba en la parte superior te das cuenta pongo unos colores HColorPool y acabo de agregar algunos colores aquí en la línea 10. Ahora, la línea 17 es un poco de edición. En lugar de pasarlo un color digo, hey colores, dame un color aleatorio desde arriba. Entonces, línea 17 se va aleatoriamente a escoger uno de los colores dentro de nuestro HColorPool. Ahora, añadí otra cosa aquí, es que quería realmente aleatorizar el tamaño. Entonces dije, bien el tamaño debe ser al azar tres más 25. Entonces, si miras eso, por ejemplo, tres veces 25, eso va a escoger un número aleatorio cero, uno, dos. Entonces, cero veces 25 es cero, una vez 25 es 25, y dos veces 25 es 50. Entonces, sabemos que esta aleatorización nos va a dar los números cero, 25, y 50. Pero mira, después de que escoja este aleatorio, en realidad le suma 25. Entonces, qué número estamos recibiendo en realidad es un tamaño de 25, un tamaño de 50, y un tamaño de 75. Entonces, solo estamos aleatorizando estos tres números; 25, 50 y 75. Entonces, de nuevo, no hay NumCycles, esto va a correr infinitamente. El intervalo ahora es de 50 milisegundos, por lo que va a suceder muy rápidamente. Nuevamente, sólo es hablar con r1. En la línea 28, digo que sí, quiero aleatorizar la ubicación. Pero entonces digo, oye, yo también quiero volver a elegir un nuevo color de la HColorPool, y hey vamos a elegir una nueva talla otra vez, y de nuevo, esa talla o va a ser 25, 50, o 75. Ahora, esto es lo que quiero que noten es que el auto clear en realidad está configurado en falso. Ahora, finjamos por un momento que eso no está ahí, si en realidad lo corté. Si realmente pruebo el boceto aquí, de nuevo, noto que es r1, sólo estamos moviendo ese activo pero estamos volviendo a erandomizando su posición, estamos volviendo a erandomizando el color de relleno, y estamos volviendo a erandomizando el tamaño. Pero de nuevo, la razón por la que puse en ese auto claro un falso es porque no quiero que despeje el fondo. Entonces, si esto funciona ahora, notarás que parece que está pintando un número infinito de rectángulos pero en realidad, sólo está pintando el uno y simplemente cambiando su ubicación, cambiando su color de relleno, y cambiando su tamaño. Pero como decimos auto clear false, en realidad no borra la pantalla. Entonces, esto eventualmente llenará toda la etapa. Genial. Por lo que probablemente puedas averiguar en este punto qué voy a hacer con el ejemplo cuatro. Entonces, sigamos adelante y cerremos esto y pasemos a HTimer cuatro y seguro, lo primero que debiste esperar fue que íbamos a agregar HCanvas. Vamos a volver a erandomizar este rectángulo pero dentro de un lienzo para que realmente podamos desvanecerlo. Entonces, miren las líneas ocho. Nuevamente, tomé el auto clear true fuera del escenario y lo agregué a los objetos de lienzo. Entonces puedes ver aquí c1 es un nuevo HCanvas, auto clear false, y va a hacer un fundido de dos y agregamos nuestro c1 HCanvas a H, el escenario. De nuevo, mira aquí en la línea 17, en lugar de hacer h.Add r1, hacemos c1.add r1. Entonces, en realidad estamos pintando el rectángulo dentro del HCanvas. Aparte de eso, todo el código se mantiene sin cambios. adelante y guardemos y probemos este boceto, y debes notar que está ejecutando la misma animación en tres pero nuestro hermoso HCanvas está quemando lentamente los rectángulos. Impresionante. Entonces, voy a terminar este video aquí. Vamos a pasar al siguiente video. El siguiente video, vamos a tratar con HTimer cinco, seis, y siete. Pero al menos en este punto, estás entendiendo que HTimer es una forma para nosotros de adjuntar algo pero basado en un pulso constante. Cuando pasemos a HTimer cinco, vamos a empezar a hablar de piscinas como lo hicimos en la primera clase. Entonces, terminemos aquí y nos vemos en el siguiente video. 16. Unidad 5, video 2: Está bien. Estoy súper emocionado por estos próximos tres archivos. El motivo por el que realmente me encantan estos próximos tres archivos es que siento relacionan tan estrechamente estructura-sabia con los archivos que hicimos en primera clase. Entonces, hay algunas cosas aquí que podrás copiar y pegar desde esa primera clase y realmente conseguir cosas animando. Entonces, echemos un vistazo a HTimer5. Nuevamente, HTimer5 realmente empieza a usar la estructura que hicimos en la primera clase. En el sentido de que finalmente, estamos saludando a HDrawablePool. Entonces, este archivo muy similar a los primeros con algunas ligeras ediciones aquí. Ahora, HDrawablePool alberca arriba en la parte superior. Eso es genial, y voy a destacar todas estas cosas aquí mismo que son las líneas nueve a 33. Antes incluso de que pasemos por este código, solo quiero decir lo que falta. Lo que falta es lo que estaría en la línea 34, que es o en realidad, estaría entre las líneas 32 y 33. Sería eso.SolicitudAll. Entonces, en esa primera clase, cuando llamaste a esa requestAll, decías: “Dame todo lo que hay en la piscina. Pintarlo en pantalla porque estamos haciendo impresión y necesito todo ahora mismo”. Entonces, lo primero que debes notar es que se ha ido. El motivo por el que eso se ha ido es porque se trata una clase de animación y queremos animar nuestra obra de arte sobre. Entonces, todavía vamos a usar Pool. Incluso podemos usar Pool en conjunto con un diseño de cuadrícula o diseño de forma o lo que sea que hicieras con la primera clase. Pero si quita esa requestAll y corta en este temporizador, realidad podría animar sus cuadrículas encendidas. Entonces, lo primero que debes notar es que la llamada a RequestAll en realidad se le ha quitado. Ahora, sigamos adelante y miremos esta alberca que tenemos aquí. En la línea nueve, digo que pool es nuevo HDrawablePool y, oye, quiero pintar cien cosas. Dice pool.AutoaddToStage para que sepamos que va a pintar sobre el escenario. Bueno, ¿qué estamos pintando? Bueno, estamos pintando a nuestro buen amigo, HRect, y tiene un cuarto de radio de redondeo de 10. Tenemos una llamada a un colorista. No estoy seguro si cubrimos esto en la primera clase pudiendo hacer el atajo en lugar de decir un HColorPool, HDrawablePool se puede llamar un método colorista. Dentro del método colorista, estoy creando un nuevo HColorPool y pasando los colores, y especificando que solo quiero que coloren los rellenos. Ahora, tal vez recuerdes desde la primera clase, tienes aquí este método OnCreate, y este método OnCreate es lo que le pasa a cada HRect individual a todos un centenar de nuestros HRects que se crean en pantalla. Entonces, yo digo: “Está bien, genial. HDrawable, ¿qué quiero hacer con este dibujable?” El Dibujable siendo el HRect. Por qué, yo diría, “Está bien, quiero StrokeWeight a cuatro. Yo quiero que el trazo sea negro y quiero que el Alfa sea 75 en lugar de 255. Al igual que los primeros cuatro archivos, la ubicación es de ancho aleatorio, altura aleatoria. Estoy girando la rotación 45 grados. Nuevamente, estoy haciendo un tamaño aleatorio aquí así que el tamaño va a ser 50, 100, y 150 porque estamos haciendo aleatorio tres veces 50, más 50, y el ancla en es H.CENTER. Entonces, estas líneas aquí mismo, nueve a 33, es montar la alberca y ¿qué quieres hacer con cada uno de los elementos individuales dentro de esa alberca? Pero otra vez, RequestAll se ha ido. Entonces, ¿qué hacemos aquí? Bueno, tenemos nuestro temporizador. Si miras nuestro temporizador aquí, estoy diciendo: “Bueno, quiero animar cada uno de estos 100 objetos en lugar de solo verlos todos a la vez”. Entonces, mira la línea 36, NumCycles. NumCycles es Pool.NumActive. NumActive va a estar contando cuántas cosas se pintan en la pantalla a la vez, hasta llegar a cien. Entonces, Pool.numActive es una forma para que sepamos si hemos adjuntado a la pantalla todos nuestros 100 activos. Si lo tenemos todos los 100 activos en la pantalla, entonces este NumCycles va a apagar el temporizador. El intervalo es cada 100 milisegundos y cuando este temporizador dispara cada 100 milisegundos, ¿qué vamos a hacer? Esa es nuestra devolución de llamada. Dentro de nuestra devolución de llamada, estamos diciendo: “Hey pool, quiero solicitar a uno de tus tíos”. Cuando dices pool.request , sube a la alberca. Dice: “Hey cool, estás pidiendo el primero, te puedo dar cien en crear”, y dispara el OnCreate. Entonces, este temporizador sigue haciendo una pool.request hasta llegar hasta cien. Una vez que lleguemos hasta cien, el NumCycles va a apagar el temporizador y pool.request no disparará la 101ª vez. Sólo disparará cien veces. El sorteo, sólo tiene un h.DrawStage. Impresionante. Adelante y ejecutas este boceto, y lo que va a pasar va a animar. Este no es el mismo rectángulo, se trata de un centenar de rectángulos diferentes. Entonces ahí es donde varía desde el primero, bueno, hTimer4, por ejemplo. En HTimer4, apenas nos movíamos alrededor de un artículo. Aquí, lo que estamos viendo en pantalla son 100 artículos separados. Entonces, como dije, puedes tomar algo de este código y en realidad cortar las cosas del temporizador, pegarlas en los archivos que hicimos en la primera clase y en realidad podrías tener tus cuadrículas animadas porque ya no estás diciendo requestAll, en realidad estás usando un temporizador para animar la obra de arte, un poco a la vez. Estelar. Ahora, déjame decirte por qué esto es estelar, es porque mira lo que pasa cuando vamos a HTimer seis. Ahora, vamos a fregar a través de algunas de las cosas que ha cambiado. Por lo que cinco y seis son copias unas de otras con algunas ediciones. Htimer seis, tenemos nuestro HCanvas, eso es genial. Entonces, tenemos un lienzo ahí dentro, se puede ver en las líneas 11 y 12, agregamos el lienzo al escenario, tal y como esperaba, AutoClear es falso y Josh ha hecho un desvanecido a cinco. Entonces, de nuevo, va a quemar esa animación. Perdón, solo estoy poniendo una edición muy rápida porque me di cuenta de que me salté algo y esa es la línea 17. línea 17, de nuevo, es una nueva adición, que está en el archivo anterior de HTimer cuatro, dijimos Pool.AutoAddToStage, lo que significó que los activos de HRectangle se sumaron al escenario. Pero debido a que HTimer six en realidad tiene un HCanvas, mira la edición en la línea 17, yo digo: “Oye, Pool.Autoparent en c1.” Entonces ese código se cambia porque no queremos poner los HRectAngles en el escenario, realidad queremos ponerlos anidados dentro del padre de c1. De acuerdo, edición rápida, de vuelta a lo que sea que le dijera a continuación. Aparte de eso, no mucho es diferente excepto la línea 35. Mira eso. Entonces, si el OnCreate está creando 100 HRectAngles únicos, la línea 35 crea un HGirate único con cada activo individual. Entonces, lo que eso significa es, es que ahora hay 100 rectángulos en pantalla, todos se animan por separado, y tienen su propio HRotate único. Mira lo que hice aquí, acabo de poner un poco al azar. Yo dije: “Oye, dame un rango, de dos negativos a dos positivos”. Entonces, algunos van a girar en sentido horario y otros van a girar en sentido contrario a las agujas del reloj pero ese giro en sentido horario y antihorario no irá más que dos grados positivos o negativos dos grados. Ahora, ¿conseguiremos algunos ceros? Sí, lo que significará que algunos de los activos no rotan en absoluto. Eso es totalmente posible. Entonces, prueba el boceto y mira lo que pasa. HTimer, cada 100 milisegundos está solicitando un nuevo HRectangle fuera del HDrawablePool. Adjunta el HRectangle y luego une un HRotate con ese activo. Algo que olvidé mencionar es, déjame simplemente cerrar esto aquí, en realidad sí cambié el ancla. Pongo ese negativo 25 para que tuvieras esa obra de arte. Por lo que el pivote está sucediendo negativo 25 por encima del HRectangle. Entonces, echa un vistazo a esto. Por ejemplo, si cambio el intervalo a 1,000, eso sería cada segundo. Si probara el boceto aquí, notarías que hay uno, hay dos, tres, cuatro, cinco, seis, siete, ocho, nueve. Ves, está pasando en un tempo y va a hacer esto hasta que los 100 rectángulos queden pintados de la piscina. Pero de nuevo, y esto empieza a hacer alusión a la sección de combos, que es, oh Dios mío, el temporizador está introduciendo los elementos a la pantalla pero a medida que se introducen, estamos creando un HRotate único con cada activo único. Entonces, todos estos se están animando por separado y están consiguiendo su propio HRotate único, que es hermoso. Es un archivo hermoso. Ahora, claro, voy a hacer lo que hice en algunos de estos otros escenarios de peek peek, que es mirar a HTimer 7. HTimer siete es una copia de HTimer seis, pero no pude evitar poner ese código de Hoscillator y ese código de Hoscillator otra vez, va a estar cambiando la escala. Entonces otra vez, aquí cambié la piscina. Solo estoy adjuntando 50 artículos esta vez en lugar de 100. El redondeo es de 40 en este. Oscillator va a ser escala oscilante. Entonces de nuevo, vamos a cubrir oscilador, no voy a descomponer esto pero lo bueno es que va a ser oscilante- HTimer va a estar adjuntando un activo único, dándole a ese activo único un hRotate, y un HoscilLator único. Entonces, no voy a perder más de tu tiempo aquí. Corre esto y ahora estamos obteniendo los HRotates únicos y también estamos obteniendo los HoscilLators únicos en cada uno de los 58 rectángulos individuales. Lo creas o no, puedes abrir este archivo en conjunto con uno que hiciste en la primera clase, y créanlo o no esas rejillas que hiciste usando HgridLayout, puedes lanzar un HRotate y un Hoscillator, y tus cuadrículas comenzarán a animarse. Entonces, terminemos con lo de HTimer, vamos a pasar a HranDomTrigger. Pero yo diría a estas alturas, intenta detener este archivo y volver a algo de ese trabajo que hicimos en primera clase, y sí, sacando esa solicitud todo, poniendo un temporizador para agregar cada uno de tus activos uno por uno. Intenta copiar y pegar el HRotate y Hoscillator y en realidad ver cómo tus rejillas cobran vida. Está bien, este video está hecho, te veré en el siguiente, que es gatillo HRandom. Nos vemos más tarde. 17. Unidad 5, video 3: De acuerdo, este video no debería ser demasiado largo porque es solo una actualización de lo que ya hemos cubierto en HTimer. Por lo que nuevamente para reiterar, cada temporizador está usando un tempo consistente para crear cosas. Entonces, disparador aleatorio solo nos ayuda a compensar ese tempo literal. Entonces, sigamos adelante y miremos a HRANDOMTrigger uno, y de nuevo, debería sentirse muy similar a las cosas que acabamos de crear usando timer. Entonces, vamos a descomponer esto. Aquí arriba en la parte superior tengo hrandomTrigger es un temporizador aleatorio, y el código tal vez un estructurado un poco diferente en el sentido de que como si me miro déjame jalar arriba construir cuatro aquí por un segundo. Entonces, si nos fijamos en HTimer cuatro, teníamos este bloque de código justo aquí el cual creó una instancia del temporizador y luego proporcionó cuál era el intervalo y la devolución de llamada. Entonces, si miramos a HRANDOMTrigger, realmente es solo una devolución de llamada, y lo que quiero que miremos ahora es la línea 14. Entonces, la línea 14 dice: “De acuerdo, quiero crear una instancia de este HRANDOMTrigger, y voy a proporcionarles un número que represente la oportunidad”. Ahora antes de hablar de casualidad, de nuevo, línea 14 es como escribiría esto porque quiero escribir a no ser. No obstante, la línea 15 es en realidad la misma que la anterior. Se puede decir, está bien, quiero crear un nuevo HRANDOMTrigger y luego podrías encadenar una.chance y luego presentar el número de oportunidad dentro de ahí. Entonces, me gusta 14 porque obviamente está escribiendo menos. Ahora, veamos al azar. Entonces, el azar tiene que ser descrito de esta manera. IF/15, así que esencialmente, estoy diciendo que hay uno en 15 probabilidades de que el gatillo aleatorio se vaya a disparar. Entonces, una gran analogía es que si cortas un montón de números, del cero al 14, y los cortas en pedazos de papel separados y pones todos esos trozos de papel en un sombrero, y te metes en ese sombrero y agarraste un número, si fuera cero, entonces se dispararía la devolución de llamada. Si no es cero, entonces el trozo de papel vuelve en el sombrero y comienzas y vuelves a elegir de forma aleatoria otra vez. Entonces porque solo hay 15 pedazos de papel, tienes una de cada 15 posibilidades de sacar realmente un cero. Si sacas un cero, entonces las líneas 25 a 31, ese call-back va a devolver verdadero y se va a disparar. Ahora, si miras la línea 28 aquí, de nuevo, es muy similar a lo que hicimos en HTimer, todo lo que estoy haciendo es re-posicionar la ubicación de nuestro rectángulo R1h, que es ancho aleatorio y altura aleatoria en algún lugar de la pantalla. Entonces, hablemos de nuevo un poco de casualidad porque podrías notar que hemos introducido esta F. Para gatillo aleatorio, cuando estás especificando chance, tienes que pasar ese número como flotador, así que eso es lo que pasando ahí, en realidad estoy poniendo ese trailing F detrás del número para que pasando el sufijo de F es diciéndole al compilador que el número que entra es un flotador. Por lo que de nuevo, tengo una de cada 15 posibilidades de ser dibujada. Ahora, sigamos adelante y probemos este boceto, y de nuevo, sólo estamos cambiando la ubicación de r1, pero podrías notar que el movimiento es errático. Esto me gusta porque de nuevo, HTimer siempre nos va a dar ese tempo consistente, y yo quería algo que no se sintiera, “Oh, aquí hay un ritmo, quiero romper ese ritmo”. Entonces de nuevo, tiene una probabilidad de uno de cada 15 de ser dibujado, así que si no te hubieras dado cuenta, obviamente podrías pasar en una F dividida por dos y eso tendría un 50 por ciento de probabilidad de ser empatado. Entonces, cuanto más grande hagas ese número, más lento va a tener tu oportunidad aleatoria de disparar realmente. Entonces uno de cada 15, me gusta este patrón no repetitivo y le tiene una agradable sensación. Entonces, en lugar de construir una tonelada de archivos con esto, si nos fijamos en HRANDOMTrigger dos, realmente es nuestro archivo HTimer siete. Tiene HCanvas, tiene nuestro ColorPool, tiene un DrawablePool, pero en lugar de usar HTimer, tenemos HRANDOMTrigger. De nuevo, puedes ver que pongo un temporizador aleatorio aquí, uno en 30 oportunidad de ser creado, y de nuevo, esta es la devolución de llamada para dibujar realmente del DrawablePool. Entonces de nuevo, notarás que el “Solicitar todo” no está ahí, y aquí mismo en las líneas 45 a 51 es mi temporizador aleatorio, por lo que tiene una probabilidad de uno en 30 de hacer realmente una solicitud de devolución de piscina. Ahora, probablemente debería mencionar que esto obviamente no tiene como HTimer siete tiene, si abro este archivo notarás que aquí hay un num ciclos, así que sabemos que este temporizador en realidad va a apagarse después de que llegue, en este caso, 50 objetos. Entonces, disparador aleatorio no tiene ese argumento, lo que pasa es que ese pool.request, eventualmente llega hasta 50, y luego disparador aleatorio en realidad sigue disparando, pero es decir, “Hey Pool, ¿ puedo tener uno?” Pool simplemente sigue negándolo porque los 50 artículos han sido creados en pantalla. Entonces si en realidad vuelvo a ejecutar esto, es solo una forma de escalonar aleatoriamente el tempo de esta animación. Si realmente ejecutaste HTimer siete junto a HranDomTrigger dos, notarías que el ritmo de la animación en realidad está escalonado, que en HTimer siete notarías que hay un ritmo consistente a estas cosas oscilando en pantalla porque fueron creados en un tempo. tanto que, HranDomTrigger dos, porque está llamando aleatoriamente a las cosas en pantalla, en realidad notarás que la estética general de la animación parece más caótica que HTimer siete. Entonces, eso termina esta sección sobre temporizadores, y por supuesto, este es un segway perfecto para cubrir cada interpolación y sumergirse más en callback porque ahora queremos usar estas dos cosas para empezar a mover las cosas en pantalla y tenerlas pasar a ciertas posiciones y así sucesivamente y así sucesivamente. Por lo que esto termina esta sección, nos vemos en cada interpolación y cada devolución de llamada. Nos vemos más tarde. 18. Introducción a HTween y HCallback: Por lo que después de cubrir los temporizadores, probablemente tenga mucho sentido pasar a esta siguiente sección que es HTween y HCallback. HTween básicamente está moviendo un objeto de una ubicación a otra, por lo que del punto A al punto B. Algunos argumentos que utiliza HTween es objetivo, ¿a quién nos estamos moviendo? Propiedad, ¿qué tipo de propiedad estamos interpolando? No sólo podemos interpolar de un lugar a otro sino que podríamos interpolar de cero Alfa a Alfa completo. Podríamos interpolar 0 rotación a rotación de 360 grados. Podemos interpolar escala pequeña a escala mayor. Entonces, HTween quiere saber con qué propiedad estamos intermetiendo en realidad. Tenemos cosas como inicio y fin; cuál es la posición de inicio cuál es la posición final. ¿ Hay flexibilización y primavera? Al igual que hablamos en HFollow. ¿ Es ese un movimiento constante o tiene algún tipo de rebote o elasticidad a él? Ahora, ya verás en estos primeros ejemplos, HTween, vamos a mover algo del punto A al punto B. Pero quizá queramos hablar de HCallback, ahora HCallBack es algo que realmente escribimos en la primera clase pero no entramos en mucha discusión al respecto. HCallback es una forma para que sepamos si hemos llegado a nuestro destino. Entonces, por ejemplo, si estoy usando HTween para pasar del punto A al punto B, tal vez quiera saber cuándo ha llegado al punto B, así que vamos a usar HCallback en conjunto con HTWeens para que el objeto se mueva de una ubicación a una nueva ubicación, y una vez que llegue a ese lugar, HCallback dirá: “Oye, has llegado a tu destino”. Ahora bien, ¿por qué es eso importante? Porque en un archivo de mutación que vamos a crear, vamos a usar HTween y HCallback para básicamente crear un bucle. Entonces, animaremos del punto A al punto B, cuando llegue al punto B, HCallback nos hará saber que ha llegado a su destino y luego tendremos que volver a A. Así que, sólo iremos de A a B, B a A, A a B y continua. Por lo que HTween, muy emocionante porque ahora estamos empezando a mover las cosas en pantalla. Pero de nuevo, recuerda que la interpolación no es sólo necesariamente posicionar. Vamos a interpolar todo tipo de cosas como Alfa, escala y rotación. 19. Unidad 6, video 1: ¡ Wow! De acuerdo, aquí es donde se va a poner pesada estrella oscura. Va a haber muchos más ejemplos pasando ahora, y probablemente voy a dividir muchos de estos archivos en muchos videos separados. Entonces, estas últimas secciones, HTween, HSwarm, combos Hoscillator, aquí es donde se pone pesado. Hombre, espero que disfrutes de este proceso porque aquí es donde realmente empieza a producir algunos resultados realmente hermosos. Estamos en HTween. Ahora, HTween simplemente se está moviendo de un estado a otro estado. Probablemente debería prefacio que adjunto a este video en algún lugar es el archivo zip. Dentro de ese archivo zip, verás que hay 13 ejemplos, y lo que es bonito es que si miras el ejemplo 5, 12, y 13, le he adjuntado un 3D porque en realidad vamos a empezar a hablar de mover cosas en tres dimensiones. Entonces, ya verás he empezado a etiquetar algunos de los archivos donde estoy introduciendo algunos aspectos clave. En este video, quiero cubrir el ejemplo uno y el ejemplo dos, solo mantendremos estos videos tan dulces como pueda e intentaremos no hacerlos 13 minutos como todos los demás videos. HTween, se está moviendo de un estado a otro estado, y estoy usando ese lenguaje muy específicamente porque no necesariamente significa ubicación, pasar de una posición a otra posición. En el caso de estos primeros archivos, vamos a estar moviendo de una posición a otra, pero la interpolación puede ser rotación, puede ser escala, puede ser Alfa, etcétera. Entonces, vamos a descomponer lentamente estos dos primeros archivos aquí. Entonces, arriba en la parte superior, tengo, como era de esperar, nuestro r1, nuestro HRectangle. Ahora, voy a saltarme algunas cosas. Pasemos a las líneas 12 a 18. De nuevo, sólo estamos revisando aquí. Tenemos un rectángulo que es un 100 por 100, redondeo de 10, lo estamos agregando al escenario, el ancla está en el centro, la ubicación tiene una variable de StartX. Hablaremos de eso en un segundo. El arte no tiene ningún trazo, y tiene un relleno de ese ff3300 naranja oscuro. Ahora, volvamos a subir a la cima. Porque he agregado algunas cosas aquí, básicamente quiero animar el rectángulo de la posición A a la posición B. Entonces, vamos a hacer eso usando HTween. Entonces, arriba en la parte superior, ya ves tengo httween t1, tween uno. En las líneas cuatro y cinco, tengo la posición StartX, que va a ser un eje x de 160, y tengo la posición EndX. Yo quiero que se anime a 480 píxeles en la pantalla, así que posición de inicio, posición final. Entonces, ahora la línea 15 probablemente tiene un poco de sentido porque estás diciendo, “Heym quiero establecer la posición inicial de este rectángulo”, que es un eje x de 160, StartX, y un eje y de, sólo ponme en medio de la pantalla, altura dividida por dos. Antes de hablar de la interpolación, bajemos aquí a la función de sorteo y al igual que en los ejemplos de rotación, puse un poco de código de procesamiento para que pudiera ver los dos puntos. Entonces, puedes ver aquí dije, sin relleno, peso de trazo es de dos, el trazo es de color azulado y creé dos elipses, y las elipses son, StartX, altura dividida por dos, EndX, altura dividida por dos. Entonces, tengo dos pequeños puntitos que me muestran visualmente dónde está la posición inicial y dónde está la posición final. Ahora, hablemos de la interpolación. Entonces, yo digo: “Está bien, t1, entween uno, necesitas saber algunas cosas”, y las dos primeras son obviamente las más importantes. Ellos son, ¿quién es el blanco y cuál es la propiedad? Entonces, el objetivo es r1 que es nuestro HRect. Estamos diciendo que HRect es el activo que queremos mover y su dicho: “Vale, ¿cuál es la propiedad?” De nuevo, si miras el código aquí, podría tener eso en su propia línea separada, podrías romperlo de esa manera. Por lo general, pongo esos dos justo detrás uno del otro para que pueda ver quién está consiguiendo la acción y cuál es la propiedad de la acción. En este caso, H.location, por lo que Josh está moviendo cosas de una posición a otra posición, pero esa propiedad podría ser h.alpha, h.scale, h.Rotar, constantes, así sucesivamente. Lo vamos a estar moviendo de, “Sí, no sabes ahora lo estamos moviendo?” ¡ Mierda santa! En ocasiones, mi boca se mueve más rápido que mi cerebro, y estoy trabajando a través de esto, trabajando a través de este tema. Hola, la ubicación de los inmuebles, voy a estar moviéndola de una posición a otra. ¿ Puedo conseguir un aleluya? Está bien. Echemos un vistazo a la siguiente propiedad aquí, .start. Ahora bien, creo que si miras el htween.PDE, principio y fin siempre va a ser una posición x, y, o z. Entonces, en este caso, el.start es StartX. Entonces, ese eje x de 160, y esa posición final va a ser altura dividida por dos. Nuestra posición final va a ser EndX y altura dividida por dos, y de nuevo, te darás cuenta aquí en la línea 26, solo he especificado facilidad que es de 0.05. Ahora, cuando pruebo este boceto, veamos qué pasa. De nuevo, esto se va a disparar de inmediato. Entonces, voy a seguir adelante y correr esto y muy rápido, deberías ver boom, se movió del punto A al punto B y luego se detuvo. No he especificado que haga nada diferente, por lo que la acción se lleva a cabo de inmediato. Entonces, de nuevo, debes notar que se movió de esa primera posición a esa segunda posición y se alivió a esa posición. Entonces, construir dos, lo único que he hecho en build dos se acaba de mostrar que en el ejemplo dos, es que se puede agregar elasticidad igual que hicimos en algunos de los archivos anteriores. Entonces, en este caso, he dicho que la facilidad es de 0.05 y que el resorte es elástico, por lo que es de 0.95. Entonces, si prueba este boceto en particular, debes notar que goma bandas en posición. Entonces, cuando pruebes esto, inmediatamente se va a empezar a ir y se goma bandas en esa posición final. Tratemos de mantenerlos cortos, intentaré que mi boca funcione en sincronía con mi cerebro, y te veré en el siguiente video. 20. Unidad 6, video 2: Está bien. En este video, vamos a cubrir los ejemplos tres y cuatro. Para este ejemplo tres, realmente quiero trabajar a través de toda la estructura aquí porque ahora voy a usar HTween en conjunto con devoluciones de llamada para mover nuestro activo de posición A a la posición B y luego cuando haya llegado en la posición B, quiero volver a moverlo a la posición A y luego iniciar este bucle. Por lo que pasará de A a B, B a A, A a B así sucesivamente y así sucesivamente. De acuerdo, así que tomemos un tiempo para revisar este código y solo desglosar todo. Entonces, arriba en la cima tenemos nuestro r1 y tenemos nuestro t1, ¿verdad? Entonces tenemos nuestro rectángulo y tenemos nuestra interween inicial y la interween va a estar moviendo ese rectángulo alrededor en pantalla. Ahora tengo, en la línea 3 aquí, HCallback y aquí es donde realmente quiero asegurarme de que todo el mundo entienda lo que está pasando aquí. Ahora, no olvidemos que cuando pruebes esta película, se inicia la interween y así se va a pasar de A a B. Lo que quiero que pase es callback para iniciar nuestro bucle. Entonces sabemos que al segundo que empiece la película, ya se va a iniciar de A a B. Así que miren mis devoluciones de llamada aquí. Tengo Tweendone1 y Tweendone2. Ahora, solo conceptualmente, inicia la película, se mueve de A a B. Entonces, lo que quiero que haga Tweendone1 es que me saber que ha llegado a B y quiero volver a moverla a A. Así que Tweendone1 va a ser la animación de B a A. Entonces obviamente, si va de B a A, quiero que TweenDone2 me diga, hey has llegado de vuelta a A, ahora volvamos a volver a B. Así que TweendOne2 va de A a B. De acuerdo. Pasemos a lo siguiente aquí. Josh le encantan los PVectores. Me encantan los PVectores. pVectores son una forma de empaquetar una posición en el espacio. Entonces, un PVector puede ser bidimensional o puede ser tridimensional. En este caso, es un punto bidimensional. Dos dimensiones sólo siendo un punto X y un punto Y. Pero los PVectores también pueden ser un xy y una z. Entonces, qué mejor manera de configurar son nuestro punto A y nuestro punto B que usar un PVector. Entonces eso es un cambio con respecto al ejemplo uno y dos. Entonces, ya he dicho, bien déjame justo, antes de pensar en esto, tengo que recordar que mi talla es 640 por 640. Entonces, porque solo estoy moviendo la x, tengo que recordar que el eje y era altura dividida por 2 pero la altura dividida por 2, 640 dividida por 2, es 320. Entonces, si miras aquí, para mi PVector dije, hey tu primer punto es 160 en el eje x y 320 en el eje y, y la posición correcta es 480 en el eje x y 320 en el eje y. Por lo que de nuevo, me encantan los PVectors. Son solo una manera realmente genial de empaquetar puntos en el espacio. Así que echa un vistazo, nuestro r1, nuestro HRect. Nuevamente es un 100 por 100. Tiene redondeo de 10. H.Añadir lo estamos agregando al escenario. Nuestro Anchorat es la posición central, pero mira la actualización a 16. Entonces, el 16 puedo decir, hey tu ubicación inicial, esa primera posición, es subir a ese pVector y dame la x, entonces pt1.x que obviamente devuelve 160. El pt1.y devuelve el 320. Entonces, estoy usando, en la línea 16, el PVector para agarrar el eje x y el eje y. De nuevo, tiene NoStroke y es un relleno de naranja oscuro. Está bien. Ahora, me voy a desplazar un poco hacia abajo aquí. Voy a saltar todo el camino hacia abajo y sólo mostrar que el empate es igual que en el ejemplo uno y dos donde está haciendo empate etapa y estamos creando y procesando esos dos pequeños puntos de elipse para que podamos ver punto A y punto B. De acuerdo. Toma una respiración profunda, trabaja conmigo aquí. Está bien. Mira las líneas 21 a 29. Esta es la interween y nuevamente recuerden, la interween comienza instantáneamente. Se va a pasar del punto A al Punto B. Entonces, si miramos aquí decimos, t1 es un nuevo HTween, nuevo el objetivo es nuestro r1 HRect, la propiedad es ubicación. Oye, mira aquí los argumentos de inicio y fin. El inicio es iniciar en pt1.x, iniciar en pt.1.y, terminar en pt2.x, y terminar en pt2.y. Nuevamente, nuestra facilidad es 0.5 Y tener un poco de primavera pero he bajado un poco la elasticidad, así que en lugar de 0.95 como está en uno y dos, llevo a un 0.7. Está bien. Cuando la película inicia estos incendios, mira. Ve, inicia interween de izquierda a derecha. Entonces, si no tuviera ningún otro código escrito aquí, se movería de la posición A posición B. ¿De acuerdo? Ahora, necesito una devolución de llamada para saber que he llegado a la posición B. Si recuerdas esto es Tweendone1, por lo que ha llegado a la posición correcta. Volvamos a la izquierda. Entonces, echa un vistazo. Digo Tweendone1 es una nueva devolución de llamada, y lo que estoy diciendo aquí es hey tween one, entiendo que has llegado a la posición B, la segunda posición todo el camino a la derecha. Si has llegado a la posición B, quiero que disparen algo diferente. Sigue siendo la misma interween pero te voy a dar alguna información nueva y la nueva información es una nueva.start en un nuevo.end. Entonces ahora está diciendo, bueno tu inicio. Si tengo razón, es la posición correcta que estás aquí en el ahora mismo. Está bien. Entonces, el inicio es pt2.x y pt2.y y la posición final está de vuelta al principio. Volver a pt1.x y pt1.y. Ahora, mira este siguiente bloque de código aquí. Aquí es donde se crea el link, y el link es quiero registrar esta interween y quiero una nueva devolución de llamada cuando llego de vuelta a la nueva posición. Por lo que empieza en ese pVector pt2, va a terminar en el pt1 pVector y cuando llegue de vuelta a pt1, de repente hemos agregado algo de información aquí. Oh Dios mío, la programación quiere saber cuándo he llegado de vuelta a esa ubicación original. Qué nueva devolución de llamada al fuego. Entonces, cuando vuelva a la posición inicial, va a disparar el callback Tweendone2. Está bien. Entonces aquí está el enlace. Entonces ahora si miramos el código 43 al 53, solo estamos configurando la animación de A de vuelta a B otra vez. Correcto. Entonces, si lo miras una vez que ha llegado de vuelta a la posición izquierda, quiero volver a la derecha ahora, que así estoy creando un bucle que va y va como el globo ocular de un Cylon. Tienes que ser un super nerd para realmente apreciar eso. Acabo de lanzar un comentario Cylon a esta discusión. Es el amor, es el amor que compartimos. Está bien. Entonces, Tweendone2, echa un vistazo. Acabo de revertir el inicio y el final de nuevo. Yo digo, oh porquería estamos de vuelta a la izquierda, ¿verdad? Entonces el inicio es nuestro pt1.x e y, y sí queremos volver a la posición B que es un pt2.x e y Entonces aquí está el bucle infinito. Digo, adivina qué, si registro esto y una vez que llegues a esa nueva posición final adelante y dispara Tweendone1. Entonces, ahora en este punto, deberías darte cuenta de que estos dos simplemente se están llamando de ida y vuelta otra vez. Entonces, cuando se hace uno llama a dos, cuando dos se hacen sólo llama a uno de nuevo. Entonces ahora, estas cosas están funcionando en tándem. Ahora, entiendes que uno está disparando dos, y dos está disparando uno pero echa un vistazo a la línea 55. Si no tenía esto, si comento esto fuera, ¿qué va a pasar? Bueno, mira esto. Voy a ejecutar mi boceto y arranca la película y boom va de la posición A a la posición B, porque recuerda, sólo voy a cerrar esto aquí por un segundo, recuerda que cuando pruebes tu película t1 se pone en marcha. Se inicia, corre, se mueve de la posición A a la posición B. Así que ahora, ojalá, entiendas que TweendOne1 y TweenDone2 están configurados pero nunca hacemos que las cosas rueden, ¿verdad? Entonces, ahora mira la línea 55. En la línea 55 aquí y en la parte inferior solo digo, hey después de haber configurado estos dos escenarios solo quiero decirle a la tween 1 que debe registrarse y volver a llamar, una vez callback tweendone1 y luego eso inicia el bucle. Vale. Si no tenía esto, sólo se mudó de A a B porque nunca le pedimos que nos dijera cuándo llegó a B. línea 55 es eso, hey avísame cuando hayas llegado a B porque quiero decirte que hagas algo. Está bien. Entonces es esa línea 55 que arranca, se mueve de A, va a B. Tan pronto como llega a B le decimos que siga adelante e inicie el Tweendone1, que luego dispara dos, que luego dispara uno, que luego dispara dos, que luego dispara dos, que luego dispara dos, que entonces dispara 1 así sucesivamente y así sucesivamente. Entonces. Ahora en este punto, puedes ejecutar este boceto y ahora tenemos una animación infinita donde va de A a B. Tan pronto como llega a B, vuelve a A, y así sucesivamente y así sucesivamente. Está bien. Entonces ahora, ojalá, realmente hayas digerido cómo estamos usando callback para crear este disparador sin fin, pero el gatillo solo se va a disparar, la devolución de llamada solo se va a disparar cuando se haya asentado en su destino, y en este caso el destino es una posición x, una ubicación. Está bien. Vamos a cerrar esto. Pasemos al ejemplo 4. El motivo por el que quiero avanzar en el ejemplo 4 es porque quería hacer un ligero ajuste y ese ajuste es en el ejemplo 3, lo único que realmente cambiamos fue por dónde estoy empezando y por dónde estoy terminando. Lo que pasó fue en el ejemplo 3, solo estoy volviendo aquí por un segundo, es que especificamos estas facilidad y el resorte que es 0.05 y 0.7. Pero notarás que en Tweendone1 y TweenDone2, no especificamos facilidad ni primavera así que porque no hablamos con ella, solo sigue reciclando lo que inicialmente se estableció. Está bien. Entonces, solo quería mostrar la posibilidad en cuatro de que esto es lo que inicialmente se establece pero entonces realmente puedes modificarlo. Entonces, echemos un vistazo a Tweendone1 que se está moviendo de B de vuelta a A. Lo que hice fue cambiar la facilidad y la primavera. Dije, hey quédate ese 0.05 pero puedes darme esa elasticidad de 0.95. Entonces, cuando pase de B a A va a ser muy elástico, pero una vez que Tweendone2 se dispara, échale un vistazo. Cambié la facilidad y el resorte a 0.05 por la facilidad pero no hagas ningún springing. Entonces sólo va a ser una animación lenta hacia atrás y luego va a rebotar, y luego una animación lenta hacia atrás, y luego va a rebotar. Entonces, sigamos adelante y ejecutemos el boceto, y de nuevo, deberías notar que rebota de B a A, luego es un movimiento lento hacia atrás, y luego vuelve a ser A. Entonces, puedes modificar la intersección entre tus diferentes devoluciones de llamada. Entonces, esto es estelar. Esto es genial. Está bien. Voy a envolver este video en particular y en el siguiente, sólo vamos a digerir el ejemplo 5 que está introduciendo usando coordenadas 3D en lugar de coordenadas bidimensionales. Nos vemos en el siguiente video. 21. Unidad 6, video 3: Está bien. Este es el video por ejemplo cinco 3D. Es muy similar al ejemplo cuatro, pero solo quería hacer una introducción muy ligera a trabajar con coordenadas 3D. Nuevamente, este video sólo va a ser este ejemplo. Entonces, de nuevo, vamos a quedarnos con esto dulce. Echa un vistazo. Esto es lo que es diferente es, nuevo, como expliqué antes, un PVector puede ser un punto 2D o puede ser un punto tridimensional. Entonces, en el caso aquí, he agregado una coordenada z a nuestro PVector. Entonces, en lugar de pasar de una posición a otra, de izquierda a derecha, quiero mover algo hacia atrás y adelante. Entonces, veamos el PVector. Tanto pt1 como pt2 tienen las mismas coordenadas x e y. Entonces, va a ser el medio de la pantalla, 320 para la x, 320 para la y, que es 640 dividido por dos, o ancho dividido por dos, y altura dividida por dos. Entonces, sabemos que la plaza va a estar en el centro de la pantalla. Lo que es diferente aquí es la coordenada z, que, de nuevo, cero es para el plano z, para la posición posterior, digo, negativo 400, y para el frente es positivo 100. Entonces, el cambio aquí para el PVector es hacer x e y ambos 320, y cambiar la coordenada z. Entonces, negativo 400 para la primera posición y positivo 100 para la posición delantera. Echemos un vistazo a la línea 16. Es la ubicación de inicio es x, y, y z. Entonces, estás hablando con ese pVector y obteniendo la x, obteniendo la y, y consiguiendo la z Vamos adelante y desplázate por aquí y veamos la intersección. Nuevamente, he actualizado la posición de inicio y fin para incluir esas coordenadas x, y y z Ahora, otra cosa que me olvidé totalmente, me dieron una copia de seguridad, porque esto es muy importante, que es que necesitas decirle a procesamiento que estás usando 3D coordenadas, y necesito decirle a Hype que estoy usando coordenadas 3D. Entonces, mira aquí la línea nueve. En la línea nueve, he dicho que el ancho y alto de la película es de 640 por 640, y que quiero usar P3D. Entonces, quiero usar el sistema de coordenadas 3D de procesamiento. Si no puse esto, p-vector va a tener un problema con usted tratando de especificar la coordenada z, porque no especificó que el renderizador para su procesamiento debería ser un sistema de coordenadas 3D en absoluto. Entonces, va a arrojar algunos errores. Ahora, todo el código inicial en Hype por defecto piensa que estás haciendo coordenadas bidimensionales. Entonces, necesito decirle a Hype que sepa que en realidad estamos cambiando a un sistema de coordenadas 3D también. Entonces, si miras aquí en la línea 10, tengo que poner este argumento diciendo use 3D true. Entonces, le digo a Hype que, “Oye, cuando empieces a correr por tus clases, pasa a los métodos que incluyen el eje z, otras palabras también devolverá errores. El bombo dirá: “Oye, hombre, ¿qué hace este negocio z del que estás hablando?” Entonces, necesito decirle a Processing que estoy usando un sistema de coordenadas 3D y necesito decirle a Hype que estoy usando un sistema de coordenadas 3D. Muy importante. No puedo creer que casi se me olvidó hablar de eso. Está bien. Entonces, aparte de eso, tu TweenDone1 y tu TweenDone2, la única actualización real aquí es que estás empezando los extremos están usando esa coordenada z del PVector. De nuevo, tengo algunos ajustes para facilitar en primavera. Ahora, en mi expediente, he comentado por un segundo la línea 62. Porque solo quería mostrarles que si prueban este boceto aquí, realidad está moviendo el eje z de ese rectángulo hacia atrás en el espacio y hacia adelante en el espacio. No obstante, cuando escribí por primera vez este ejemplo pensé, ¿cómo sabes que eso es una animación z? ¿ Cómo va alguien mirando esto? ¿ Cómo pudo ser eso escala? No tengo idea de que eso es en realidad z, eso podría simplemente estar cambiando la escala del rectángulo de una escala más pequeña a una escala más grande. Entonces, agregué esta línea 62, y, déjame simplemente descomentarla aquí. línea 62 solo está tratando con la función de cámara de Processing, que he agregado el MouseX, para que en realidad pudieras mover el ratón y simplemente obtener una representación de que esta cosa realmente se está moviendo en el espacio tridimensional. Entonces, no voy a mentir trabajar con la cámara es una locura. Me ha llevado algún tiempo descifrar todos los diferentes argumentos que soporta la cámara. Si acaba de ejecutar su boceto ahora, debe notar que, sí, realidad se está moviendo eso en el espacio tridimensional. Entonces, si realmente muevo la posición de mi ratón aquí, en realidad puedo cambiar el ángulo de la cámara, y en realidad ver que nuestro rectángulo de hecho se está moviendo en el espacio tridimensional. Entonces, genial. Creo que ahora voy a terminar el ejemplo cinco. Vamos a pasar al siguiente video que va a digerir el ejemplo seis y el ejemplo siete, y luego eventualmente volveremos a jugar con 3D porque es bastante divertido. Pero, esto es sólo una introducción muy rápida al uso de coordenadas 3D con PVector, pero de nuevo, realmente miren las líneas nueve y 10. Tienes que decirle a Processing que estás usando un sistema de coordenadas 3D, tienes que decirle a Hype que estás usando el sistema de coordenadas 3D, otras palabras no es trabajoso. Nos vemos en el siguiente video. 22. Mira la unidad 6, video 4: ¿ Cómo va todo el mundo aguantando? No voy a hacer que te sientas seguro, porque sólo va a empeorar. Simplemente va a empeorar, pero de gran manera. Va a ser doloroso de una manera muy agradable. Estamos ahora en el ejemplo seis y el ejemplo siete. En este video, voy a caminar por estas dos cosas. Ahora, en el ejemplo seis, lo que quería mostrarles es el apilamiento de comportamientos. En realidad puedo llamar a dos preadolescentes que se van a interpolar a propiedades individuales. Mientras las propiedades estén separadas, no se pelearán entre sí. Entonces, subamos a lo alto aquí y miremos lo que se ha cambiado. Entonces, de esto es de lo que estoy hablando, estamos empezando con una animación simple y sólo vamos a mutarla, hacerla un poco más compleja. Ahora bien, esto no es usar 3D. En realidad estamos volviendo al ejemplo cuatro y sumando al ejemplo cuatro. Ahora, el ejemplo cuatro es ese bucle A a B, B a A. Simplemente ha estado moviendo la posición X, de ida y vuelta. Yo quiero que ahora también rote. Entonces, va a pasar de la posición A a la B, pero también va a estar ejecutando una rotación. Entonces, subamos hasta arriba aquí y veamos algunos ajustes. Entonces, lo primero es que seguimos moviendo un HRect, todavía tenemos nuestro r1, pero ahora tengo una interpolación uno y una interpolación dos. Entonces, un t1 y un t2. Sabemos que t1 es la interpolación de ubicación, y t2 va a ser la interpolación de rotación. Entonces, ahora necesito un nuevo conjunto de callbacks. Entonces, te darás cuenta en la línea tres, vamos a mantener nuestro TweendOne1 y nuestro TweenDone2, pero ahora he agregado la devolución de llamada para, RotateDone1 y RotateDone2. Entonces, sabemos que cuando esto comience, va a iniciar una rotación de A a B, rotar fecha, rotar, girar fecha, rotar tus fechas, rotar todas tus fechas. Nunca te cases, gira tus fechas. Ya lo has oído aquí, de Josh Davis. Voy a estar bien. Intentemos eso otra vez. Girar. Puedo decirte que en el pasado, cuando solía enseñar en la Escuela de Artes Visuales, era como el 2003 cuando empecé a enseñar por primera vez. La gente traería sus archivos en discos Zip. Discos zip. Tienes que tener mucho cuidado con eso. Tenía más que unos cuantos resbalones. Simplemente dejaré que trabajes esa. Cada devolución de llamada, RotaDone1 y RotaDone2. Entonces, RotaDone1 está girando de B de vuelta a A, igual que Tweendone1, y RotateDone2 es A de vuelta a B de nuevo. Ahora, pongo ahí el vector P. Entonces, notarás que pt1 y pt2 son 160,320, 480,320, eso no ha modificado. Adelante y miremos lo que tenemos aquí. Aquí está nuestro r1. Debido a que el código se está volviendo un poco más largo, aprovecho el método encadenamiento y HYPE. Entonces, solo puedo cadena eso todo en una sola línea. Entonces, a medida que empiezo a escribir más código, y mis programas empiezan a ponerse un poco más robustos, aprovecho el método encadenado, y solo lo tengo todo en una línea lugar de romperlo a múltiples líneas como lo hice en archivos anteriores. Hago lo mismo con nuestro t1. Ahora, sigamos adelante y veamos este bloque de código aquí mismo, que es del 17 al 31. Eso se ha mantenido sin cambios. Eso es configurar la interpolación uno, pasar de A a B, B a A, las callbacks, todo. Eso es exactamente como fue en el ejemplo cuatro. Lo nuevo ahora son las interpolaciones rotatorias. Entonces, lo que he hecho aquí es, he dicho, t2 es un nuevo HTween. También va a estar apuntando a r1, pero la propiedad es rotación. Entonces, t1 está tratando con la ubicación, t2 está tratando con la rotación. Mira el inicio. Comienza en cero, termina en 180 grados. Entonces, gire 180 grados. Tengo facilidad y tengo un resorte para esa rotación. De nuevo, también tengo algunas callbacks aquí. Entonces, cuando se haga girar uno, va a pasar de 180 de vuelta a cero. Cuando su espalda a cero, uno llama a dos. Dos entonces dice: “Oh, vamos a crear ese bucle. Vayamos de cero de nuevo a 180 de nuevo”. Cuando está a 180, uno dispara dos. Entonces, no diferente a la configuración rt1. Es una copia. Mira la línea 50. Registro t2, y digo: “Oye, entiendo que vas a disparar de cero a 180, una vez que llegues a 180, adelante y dispara ese rotaDone1 para que puedas ir uno, dos y dos a uno e iniciar ese bucle”. Entonces, cuando pruebo el boceto, debes notar que tengo dos preadolescentes trabajando en tándem. Están haciendo diferentes propiedades. Puedes tener tanto Htweens como quieras siempre y cuando no intenten despedir la misma propiedad. Entonces, t1 está haciendo ubicación y t2 está haciendo rotación. Nuevamente, puedo apilar múltiples Htweens siempre y cuando estén abordando diferentes propiedades. Cerremos esto y pasemos al ejemplo siete. Ahora, el ejemplo siete es una copia del ejemplo seis. Pero, ¿recuerdas de vuelta en Hrotate, mostré que podías anidar un cuadrado en otro cuadrado, y mientras eso sucediera, todo estaba bien con el universo. Sólo te voy a mostrar eso una vez más. Entonces, búscalo aquí arriba. Lo único diferente en el ejemplo siete, es que ahora tengo tres rectángulos. Tengo un r1, un r2, y un r3. Sigamos adelante y miremos las líneas 14 a 21. Yo digo, “r1, eres 100 por 100, y eres una naranja oscura”. Entonces, yo digo: “Oye, r2, tienes 50 por 50, tienes un redondeo de cinco, y quiero agregarte, r2, dentro de r1”. Entonces, ya empezamos la anidación. Te darás cuenta de que tampoco especifico una ubicación. Si no especifico ubicación, simplemente se adhiere a cero, cero. Adelante y mira r3. R3 es de 25 píxeles por 25 píxeles. Es una plaza perfecta. No tiene redondeo en absoluto, y r1 es donde estoy colocando r3. Entonces, r3 se coloca dentro de r1. Aparte de eso, nada más ha cambiado. Entonces, si realmente ejecutas este archivo, notarás que la animación sigue yendo de A a B, y B a A y sigue ejecutando esa segunda interpolación de usar rotación. Pero, como se puede ver, se lo hace a los tres objetos porque todo se está aplicando a r1, simplemente sucede que r2 y r3 están anidados dentro de r1. Entonces, como esas dos formas están anidadas dentro de r1, ellas también obtendrán las mismas animaciones. Entonces, ahora deberías estar pensando : “Oh Dios mío, puedo trabajar en Illustrator. Puedo empezar a dibujar un montón de activos, activos visuales. Puedo agruparlos. Puedo empezar a hacer muchas cosas diferentes, y siempre y cuando se aniden en un activo con el que se asocian los preadolescentes, esa obra de arte sólo va a venir conmigo”. Entonces, genial. Simplemente mostrándote algunas de las posibilidades de estos trucos que utilizo en HYPE. Esto termina el ejemplo seis y siete. Sigamos adelante y cerremos esto, y el siguiente video sólo va a tratar con el ejemplo ocho. Nos vemos en el siguiente expediente. 23. Unidad 6, video 5: Diversión. Ahora estamos en un ejemplo ocho, y de nuevo, solo quiero seguir tomando estas ideas, seguir tomando estos conceptos y simplemente haciéndolos un poco más y más robustos. Entonces, genial. ejemplo ocho va a mostrar una animación a cuatro posiciones diferentes. Entonces, es una extensión bastante buena de algunos de los otros archivos que hemos estado haciendo donde acaba de ir de A-B. ¿ Y si vamos de A a B a C a D y luego de vuelta a A otra vez? Entonces de nuevo, esto va a animar nuestro rectángulo a cuatro posiciones diferentes en pantalla, y va a configurar un bucle. Entonces, genial, estoy haciendo cuatro puntos ahora. Entonces arriba en el ejemplo ocho tenemos PVector uno, dos, tres y cuatro. Te darás cuenta de que pongo aquí algunos comentarios que primero defino la parte superior izquierda, luego la parte superior derecha, luego la inferior derecha, luego la inferior izquierda. Entonces, si estás pensando en esto en cuanto a animación uno va a ir a dos, dos va a ir a tres, tres va a ir a cuatro, cuatro va a volver a uno. Entonces, eso significaría que necesito cuatro callbacks cb1, cb2, cb3 y cb4. Nuevamente, solo recuerda aquí que cb1 es un callback de ir de la posición uno a la posición dos, cb2 va de dos a tres, cb3 va de tres a cuatro y cb4 va cuatro de vuelta a uno, y luego de nuevo vamos crear un bucle aquí. Por lo que el HRectangle realmente no ha cambiado mucho, se está conectando a esa primera coordenada pt1 pt1.x y pt1.y. Ahora la línea 19, eso va a disparar, y va a disparar desde la posición inicial del PVector uno hasta la posición PVector dos. Entonces cuando esto inicialmente se pone en marcha, va a pasar de la posición uno a la posición dos, que sepas que después de esto inicialmente arranca en realidad está pasando el rato en la posición de dos. Ahora, voy a desplazarme hacia abajo hasta la parte inferior aquí, mira, he actualizado el sorteo para incluir antes diferentes posiciones para nuestro PVector para que podamos ver dónde están en pantalla. Nuevamente, echemos un vistazo a la línea 45. línea 45 se asume que la interpolación ya se ha movido de arriba a izquierda hacia arriba derecha. Entonces, ahora estamos en la segunda posición, por lo que notarás que vuelvo a llamar cb2. Entonces, en realidad estoy llamando de vuelta las líneas 27-31. No voy a volver a llamar cb1 porque cb1 es de uno a dos, y eso en realidad ya ocurrió cuando la interpolación se inició inicialmente. Entonces, le estoy diciendo que llame de nuevo cb2. Nuevamente, cb1, cb2, cb3, cb4, estas son solo todas copias unas de otras, lo único que ha cambiado es el pVector para inicio y fin, y volviendo a llamar a la devolución de llamada apropiada. Entonces, se pone en marcha, se mueve de la posición uno a la posición dos, aquí abajo en la línea 45 dice: “Oh hey, cool, ya has movido tu sentado en la posición dos, vamos adelante y disparemos la devolución de llamada de la posición dos”. Por lo que cb2 dispara, pasa de dos posiciones a tres posiciones tan pronto como llega esa posición dispara cb3. Cb3 dice: “Oh genial, voy de tres a cuatro, vamos a disparar callback cuatro”. devolución de llamada cuatro dice: “Oh genial, voy cuatro atrás a uno”, y dispara cb1. Cb1 entonces dice: “Oh, justo en marcha voy de una posición a dos posiciones, vamos adelante y fuego cb2", boom, el bucle ha creado. Entonces, adelante y prueba el boceto. Nuevamente, debes ver que tenemos una animación infinita de pasar a cuatro posiciones diferentes en pantalla. Entonces de nuevo, siempre y cuando estés creando tu interpolación puedes crear todos estos escenarios para callbacks y cuando esas callbacks se disparan simplemente te estás moviendo a un nuevo inicio y fin. Entonces, voy a mantener corto este video, vamos a pasar al ejemplo nueve. Ejemplo nueve otra vez es una gran extensión de esto es que es, “Hey Josh, ¿y si no quiero un bucle? ¿ Y si no quiero seguir animando dos, cuatro secciones diferentes? ¿ Y si quiero que se vaya a uno a dos, de dos a tres, tres a cuatro, de cuatro a uno, uno al centro, y luego se levante y luego se detenga?” Entonces, el ejemplo nueve va a ilustrar esa funcionalidad. Entonces, nos vemos en el siguiente video. 24. Unidad 6, video 6: De acuerdo, estamos en el Ejemplo 9 y otra vez El Ejemplo 9 no es muy diferente al Ejemplo 8 excepto por eso, no es un bucle. Se va a ejecutar algunas preadolescentes y en cuanto hayamos llegado a la última interpolación, este programa va a apagarse, ¿verdad? Entonces, Ejemplo 8, sólo se mantuvo en bucle en las cuatro coordenadas. Ejemplo 9, quiero ir de uno a dos, de dos a tres, de tres a cuatro, cuatro atrás a uno. Una, entonces quise ir al centro y después de que llegue al centro, quiero que se escale hacia ti. Después de que se haga escalar hacia ti, simplemente puede dejar de hacer más interpolación. Entonces, esto es un poco agradable porque puede ser una intro-animación, pero no tiene que bucle. Yo sólo quería ejecutar una secuencia tan pronto como se haga esa secuencia, puede apagarse. Entonces, echemos un vistazo a lo que es un poco diferente en el Ejemplo 9. El primero es la línea dos, tenemos dos HTWeens, tenemos t1 y t2. T1 es la interpolación que va a tratar con mover nuestras ubicaciones de activos. Por lo que sabemos que t1 está usando la propiedad de localizaciones, por lo que vamos a usar eso para movernos en pantalla. Es este HTween de t2 que vamos a escalar el activo hacia ti. Entonces, se va a tratar con la propiedad de H.Scale, ¿de acuerdo? Ahora, sigamos adelante y miremos las líneas cuatro a ocho, he añadido un quinto PVector y esa es la capacidad de moverse al centro de la pantalla que noten que pVector pt5 es 320 por 320, así que va a animar al centro de la pantalla. Ahora, veamos la línea 10, aquí es donde tenemos nuestras callbacks. Nuevamente, el Ejemplo 8 tenía cb1, cb2, cb3, y cb4, pero ahora necesito una devolución de llamada para moverme al centro de la pantalla, que es CBCenter, call back center y necesito una devolución de llamada para luego animar hacia ti que es CBScale, ¿de acuerdo? Entonces, tenemos seis callbacks en la línea 10. Está bien. Moviéndose a la derecha son r1, HRect que en realidad no ha cambiado, es exactamente lo mismo que lo era en el Ejemplo 8. Mira la línea 20, la línea 20 no ha cambiado. Es igual que en el Ejemplo 8 también, y esa es la iniciación de la tween moviéndose de la posición uno a la posición dos para que sepamos que cuando iniciemos nuestra película, es esta línea 20 la que va a iniciar del punto uno a punto dos. Entonces, ahora va a estar colgando en la coordenada superior derecha, ¿de acuerdo? Ahora, voy a desplazarme aquí abajo y mirar la parte inferior, solo sé que he añadido una quinta elipse de procesamiento para mostrar dónde está ese punto central. Ahora, tenemos una representación visual de los cinco puntos, siendo el quinto ahora el centro de la pantalla. De acuerdo, echemos un vistazo a los callbacks. Se podría notar que cb1 ha sido comentado y esto es por una buena razón. Cb1 es lo que creó ese bucle, ¿verdad? Entonces el programa inicia, se mueve de uno a dos, luego cb2 pasó de dos a tres, luego pasó de tres a cuatro, luego pasó de cuatro a uno, y luego en cuanto volvió a uno, cb1 volvió a disparar a la posición dos, ¿verdad? Entonces, inició ese bucle. Entonces, en realidad he comentado cb1 porque adivina qué, en realidad no lo usamos, porque cb1 es lo que creó ese bucle y no queremos un bucle. Entonces, en realidad, cb1 no se está utilizando en este boceto en particular. Está bien, así que vamos a descomponerlo. Probamos la película, cuando la probamos, línea 20 dispara y se mueve de la posición uno a la posición dos, ¿de acuerdo? Echemos un vistazo a la línea 59, la línea 59 dice: “Cuando realmente disparas y te mueves a la posición dos, ¿ puedes por favor avisarme cuando hayas llegado al destino de la posición dos y cuando lo tengas, por favor dispara la devolución de llamada cb2 .” Entonces, incendia cb2. Cb2 dice: “Está bien, estoy empezando a las dos, ahora voy a las tres”. Cuando llega a tres, dispara cb3, cb3 luego dice: “Genial, estoy en la posición inferior derecha, voy a moverme a la posición inferior izquierda”, por lo que se mueve a la posición inferior izquierda, luego dispara cb4, cb4 dice entonces, “Impresionante, estoy en la posición inferior izquierda, quiero animar de nuevo a la primera posición”. Entonces pasa de PVector 4 a PVector 1, ¿de acuerdo? Ahora, aquí está el cambio, en ocho, cb4 habría disparado nuevamente a cb1 que luego habría ido uno a dos y luego boom tienes el bucle. Aquí es donde está ese descanso, cb4 ahora dice: “Cuando vas de la posición cuatro a la posición uno, quiero que vuelvas a llamar a CBCenter”, ¿de acuerdo? Por lo que de repente, ha llegado de nuevo a la posición uno y CBCenter dispara. Entonces miramos la devolución de llamada para CBCenter y dice: “Oye, necesito ir de la posición uno a pVector 5 que es el centro de la pantalla”. Ahora, son las líneas 46 a 50 que van de la posición uno a la posición cinco, se desliza hacia el centro del escenario, ¿de acuerdo? Ahora, en cuanto ha movido su ubicación de la parte superior izquierda al centro, dice: “Oye, quiero que sepas que he llegado a la ubicación del centro y en cuanto llegues a la ubicación del centro, Yo quiero que despidan llamada de nuevo CBScale”, ¿verdad? Estamos listos para iniciar la escala hacia ustedes. Ahora, veamos CBScale. CbScale dice: “Hey Tween 1, la tween que ha estado tratando con todas las localizaciones, ya no te necesito, ya no estoy moviendo ninguna posición y así como ya no estoy moviendo ninguna posición, puedes decir Tween 1 para darse de baja”. Por lo que notarás en la línea 54, Tween 1 muere una vida feliz y contenta. Ha animado todas las ubicaciones a las que necesitábamos ir. Ya no lo necesitamos. Por lo que la línea 54 de la devolución de llamada CBScale simplemente le dice a Tween 1 que hemos terminado con ella. Ya no estamos moviendo más posiciones. Ahora es en línea 55 que configuramos nuestra nueva tween y nuestra nueva tween se está moviendo hacia ti en el espacio, así que notarás que dice: “Oye Tween 2, eres una tween de nueva edad. El objetivo es que nuestra única persona que nos hemos estado moviendo pero la propiedad esta vez es escala. Yo quiero que empieces en una escala del 100 por ciento y quiero que la terminen escala del 300 por ciento”. Entonces, se va a hacer un 300 por ciento más grande o hacia ti y la facilidad es de 0.09 y la primavera es de 0.9. Entonces, avanza y prueba este boceto y observa lo que pasa. Va de uno a dos, dos a tres, tres a cuatro, cuatro a uno, uno a punto central, y luego escala hacia ti y notarás que en realidad se ha detenido. Entonces, ejecutó nuestras prepollas para su ubicación, una vez que llegó al centro, inició la tween para escalar, y luego una vez que llegó a su posición final, notarás que no hay devolución de llamada. Nunca le pedí que me avisara cuando llegue, es una escala del 300 por ciento. Por lo que la animación se detiene. Adelante y vamos a correr esto una vez más. Nuevamente, notarás que corre todas las prepollas para la ubicación, llega al centro, brota hacia ti, y ya terminamos. De acuerdo, esto termina el video por Ejemplo 9. El siguiente video va a mirar el Ejemplo 10 y el Ejemplo 11 y hacer algunas cosas divertidas con pixel colorista y te va a encantar. Nos vemos en el siguiente video. 25. Unidad 6, video 7: Está bien. En este video, vamos a estar trabajando en el ejemplo 10 y el ejemplo 11. Ahora, los ejemplos 10 y 11 son en realidad copias del ejemplo ocho. Yo quiero volver a sólo ese bucle de ella corriendo una y otra vez. ejemplo nueve fue genial. Simplemente te muestra cómo ejecutar un montón de animaciones y luego parar, pero para 10 y 11 quiero mantener ese bucle en marcha. Entonces, los ejemplos 10 y 11 son copias del ejemplo ocho. Ahora, veamos lo que ha cambiado en el ejemplo 10. El primero es la línea uno, tenemos a nuestro buen amigo HPixelColorist, y si sigo adelante y navego a la carpeta del ejemplo 10, notarás que hay una carpeta de datos y dentro de esa carpeta de datos está este jpg. Entonces, quiero que el HTween mueva nuestro rectángulo, pero quiero que pruebe el color de este jpg usando HPixelColorist. Entonces, veamos la línea 15, línea 15, AutoClear (falso), ¿verdad? Entonces, no voy a despejar la pantalla antes de empezar a pintar de nuevo el rectángulo, así que va a dejar un rastro detrás de él. línea 18, está creando una instancia de nuestro HPixelColorist, y así dice: “Oye, entra en esa carpeta de datos, adelante y mira color.jpg”. Vamos a estar lidiando con el relleno, vamos a estar cambiando el relleno de r1 por el color que esté pasando en color.jpg. Si miras r1, lo único que ha modificado aquí es que he agregado rotación 45 grados. Entonces, en lugar de ser un cuadrado, se gira 45 grados, por lo que es una especie de forma de diamante. Ahora, nada ha cambiado con nuestro Tween, se va a animar a las cuatro ubicaciones diferentes. Entonces, el Tween va a pasar de uno a dos, dos a tres, tres a cuatro, cuatro a uno, tan pronto como regrese a uno, vuelve a disparar a la posición dos y así ha comenzado el bucle. Entonces, eso no ha cambiado del ejemplo ocho. Ahora, sigamos adelante y miremos nuestra función de sorteo y lo único que he agregado aquí como actualización es el color.ApplyColor a r1. Entonces, si ejecutamos este boceto, notarás que corre las cuatro esquinas, pero como corre las cuatro esquinas y como esa posición x e y del rectángulo se está actualizando, está tomando muestras del color del color.jpg dentro de la carpeta de datos, ¿verdad? Entonces, está usando su x e y como una mirada hasta la x e y del jpg y está tomando muestras del color a partir de ahí. Entonces, asesino, realmente me encanta esto. Ahora, sigamos adelante y cerremos esto y pasemos al Ejemplo 11. Ya sabes que me encanta darte estos pequeños peeks de agregar cosas. un vistazo, agregamos algunos osciladores y agrego dos osciladores aquí. De nuevo, estoy siendo maravillosamente vaga sobre el oscilador porque aún no estamos en esa sección pero de nuevo, estoy mojando tu apetito a lo impresionante que es cada oscilador. Añado un oscilador para la rotación, por lo que va a oscilar de 180 negativo a 180 positivo. También va a oscilar su escala de 0.2 a una. Entonces, del 20 por ciento su tamaño al 100 por ciento su tamaño. También te darás cuenta de que hice una pequeña actualización aquí al rectángulo, me escapé de usar ancla en h.center a un ancla de 50, negativo 50. Entonces, de nuevo aquí está tu obra de arte, está centrada en el eje x, pero el eje y está a 50 píxeles del arte, por lo que el pivote va a tener este tipo de movimiento hacia él. Aparte de eso, de nuevo nada ha cambiado en el sorteo, acabo de quitar la visualización de los cuatro puntos. Entonces, en el sorteo, sólo estamos actualizando el color y sólo estamos pintando la pantalla. Entonces, en este punto, si pruebo este boceto, solo estoy mostrando lo impresionante que es el oscilador. Lo creas o no, se está moviendo, la Tween se mueve de arriba izquierda a derecha superior a abajo derecha a abajo derecha izquierda a superior izquierda. Todavía se está moviendo a esas ubicaciones usando HTween, pero el oscilador está cambiando su rotación y cambiando su escala, que empecemos a conseguir algo un poco más visualmente interesante. Porque en la línea 15 estamos haciendo ese AutoClear (falso), simplemente estamos dejando un camino. Nuevamente, porque estamos usando HPixelColorist, estamos tomando muestras del color de nuestro jpg oculto dentro de nuestra carpeta de datos. Está bien. Voy a cerrar este video y vamos a terminar esta sección con hacer un último video que es el ejemplo 12 y el ejemplo 3d. Lo siento. Ejemplo 12 y ejemplo 13 que usaban 3D. Entonces, el mismo sistema exacto pero en realidad usando algunos aspectos 3D al boceto. Entonces, gracias por quedarse conmigo. Pasemos al último video y sigamos pateando traseros y tomando nombres. Nos vemos en el siguiente video. 26. Unidad 6, video 8: Está bien. Este es el último video de esta sección. Me encantan algunas de las capacidades 3D de Hype. Simplemente estoy disfrutando de mudarme a sistemas 3D. Pasé muchos, muchos años en sistemas 2D y apenas estoy volado al meterme en primitivas 3D y coordenadas 3D. Simplemente estoy realmente, realmente disfrutándolo. Si miras a mi Tumblr muy rápidamente, me pasé a hacer formas 3D. Han sido plátanos por decir lo menos. Entonces, veamos el ejemplo 12. ejemplo 12, de nuevo, es algunas cosas 3D. Entonces veamos qué ha cambiado. ejemplo 12 y el ejemplo 13 son solo continuaciones de 10 y 11. Bueno, más específicamente es una extensión de 11. Entonces, 12 realmente como copia de 11 en el sentido de que aún mantuve ahí esos osciladores. Ahora, hasta este punto, a pesar de que introdujimos 3D en el ejemplo cinco, todavía estaba usando Interact. Interact es un dibujable bidimensional, ¿verdad? No es un dibujable tridimensional. Entonces, sigamos adelante y veamos lo que es diferente en el ejemplo 12. Bueno, primero tenemos que abordar las líneas 14 y 15 que es tan pronto como te mueves a un entorno 3D, necesitas informarle al procesamiento cambiando el renderizador. Por lo que notarás en la línea 14, he dicho que el renderizador debe ser P3D para que estés diciendo procesamiento que estás tratando con un sistema 3D. También significa que en la línea 15, tengo que decirle a Hype que también me estoy moviendo al 3D. Te darás cuenta en la línea 15, digo que usar 3D es cierto. AutoClear sigue siendo falso por lo que no va a despejar la pantalla, va a seguir pintando senderos. Ahora, mantuve ahí el oscilador. De hecho, nada realmente cambia en cuanto al código, excepto que he cambiado, bueno, volvamos a la línea tres, en realidad. Notarás que r1, en realidad, ya no es un HRack. En realidad se ha convertido en un HBox. HBox me permite definir un dibujable 3D. Seguimos trabajando en HBox. Hay algunas cosas que tienen que pasar, pero sí tienes acceso a HBox así como a HSphere. Entonces la línea tres, en lugar de HRack, en realidad es un HBox. Sigamos adelante y miremos la línea 20 a 27. Entonces estoy diciendo que r1 es en realidad un nuevo HBox, ya no un HRack. Hablemos de esto por un segundo. Es esta línea 22 donde estoy diciendo que el tamaño es 100. Eso significa que está haciendo una caja que es un ancho de 100, una altura de 100, y una profundidad de 100. Entonces, está haciendo un cubo perfecto 100 por 100 por 100. Aparte de eso no muy diferente. Bueno, eso no es del todo cierto. Creo que he cambiado el oscilador aquí. Si miras estoy haciendo un oscilador para rotación y estoy haciendo un oscilador para el eje Z. Entonces, ahora me voy a llevar este cubo y lo voy a estar moviendo hacia ti y lejos de ti. El asunto de Tween, sigue siendo el mismo. Entonces, cuando en realidad ejecuté este boceto, ahora te darás cuenta de que sigue corriendo las posiciones. Entonces, sigue corriendo las cuatro coordenadas, pero el dibujable es en realidad un cubo tridimensional ahora. No es un piso. No es un rectángulo plano. En realidad es un dibujable 3D. También notarás que es un cubo perfecto. Entonces, lo hice de nuevo, es 100 por 100. Deberías notar que en realidad está haciendo algo de sombreado. El motivo por el que está haciendo algo de sombreado es, bueno, tal vez antes de hablar de sombreado, note que todavía está tomando muestras del color de color.jpegs. Por lo que sigue usando HPixel Colorist para probar el color, pero es posible que notes que los colores en realidad cambiaron un poco. Eso es porque una vez que realmente te metes a trabajar con 3D, puedes empezar a configurar luces. Entonces, sólo voy a cerrar esto por un segundo. Voy a moverme todo el camino hasta el fondo. Observe que en realidad configuré algunas luces puntuales. Yo instalé tres luces. Yo monté una luz naranja, una luz azulada, y una luz blanca. Las luces quieren saber básicamente el color. Entonces, te darás cuenta cuando mires una luz, esto es rojo, esto es verde, esto es azul. Por lo tanto, se especifica un valor RGV. Después, especificas dónde está esa luz en el espacio. Entonces, según este punto, como he dicho que el eje X de la luz está en cero, el eje Y es altura dividida por dos, y la posición Z es negativa 100. Por lo que esa luz en realidad está en el lado izquierdo centrado pero de vuelta en negativo 100. Entonces armé una luz verde azulada. Entonces instalo una luz blanca. El claro azulado es en realidad ancho. Entonces, está todo el camino en el lado derecho y altura dividida por dos, lo que está en el centro, pero sólo está en un 50 negativo en el eje Z. El blanco luz tengo ancho dividido por dos, así que está en el centro. Pero su posición Y está a solo 100 píxeles de la parte superior y su posición Z es de 150. Entonces, la luz blanca está en realidad por encima de todo para que esté lanzando una luz blanca en las caras frontales del cubo. Entonces, una vez que empecemos a meternos en el uso del 3D, podemos empezar a hacer estas coordenadas de iluminación lo cual es realmente divertido. Puedes cambiar los valores de RGV en esto y lanzar diferentes luces en tu cubo. Ahí puedes empezar a manipular el color. Entonces, no sólo se está consiguiendo el color de HPixel Colorist del JPEG, sino que también tenemos estas luces que están lanzando sus propias luces individuales en los cubos, lo cual es justo, esta cosa es hermosa. Me hipnotizan estas cosas. Puedo empezar a ajustar este archivo. De verdad, la mutación y la investigación sobre esto para mí es interminable. Siempre puedo pensar en diferentes formas de ajustar algunas de las cosas de este archivo. Cerremos este y pasemos al ejemplo 13. ejemplo 13 tiene realmente sólo un cambio menor en él. Cambié las luces puntuales para usar básicamente gris y blanco. No uso naranja y azulado como lo hice en las dos primeras luces. Entonces, ya verás aquí solo estoy haciendo un gris claro 204, 204, 204. Sigo usando ese blanco de 255, 255, 255. Por lo que de nuevo, he cambiado un poco la iluminación para ser un poco más brillante y no para realmente lanzar un color en el HPixel Colorist. El segundo que cambié es, si miras el hBox, en el ejemplo 12 era un cubo perfecto por lo que tenía un ancho de 100, una altura de 100, y una profundidad de 100. Por lo que era una plaza perfecta. Era un cubo perfecto. Mira lo que he cambiado en el ejemplo 13. Sigo creando un HBox, pero mira lo que hago en la línea 26. Yo digo: “Oye, solo quiero hacerte saber que en realidad no eres un cubo perfecto. Tu profundidad en realidad es de 500 píxeles. Tu ancho es de solo 50 píxeles, y tu altura es de solo 100 píxeles. Entonces, ahora estoy haciendo un rectángulo alargado en lugar de un cubo perfecto. Entonces ahora, cuando ejecute este archivo, notarás que este boceto está usando ese rectángulo alargado en lugar de usar un cubo perfecto. Entonces de nuevo, puedo hacer un HBox, pero no necesito que en realidad sea un cubo perfecto. Puedo empezar a ajustar profundidad, anchura y altura, y básicamente hacer cualquier tipo de forma que quiera. También debes notar que, de nuevo, la luz puntual solo está usando grises y blanco. Entonces, no estoy compensando el color que se está despojando de HPixel Colorist. Esto es genial. Esto realmente empieza a envolver HTween. Vamos a pasar a HSwarm que es un sistema de comportamiento, pero yo diría, tomaría un descanso y empezaría a pensar, nuevo, algunas de las ilustraciones que creamos en primera clase. Podríamos estar animando a SVG. A lo mejor quieres realmente jugar con estos 3- archivos y ver esto es como spin art. Esto es como si estuviera tropezando con acid spin art. Josh Davis, estoy enloqueciendo. Se puede. A lo mejor es un buen momento para enloquecer, ¿verdad? Entonces, tómate un descanso y experimenta con algunas de estas cosas. De nuevo, estamos usando HTween solo para animar esas cuatro coordenadas. Oscillator se está ocupando de estas otras cosas. Genial. Con esto se termina este apartado. Nos vamos a pasar a HSwarm que es tratar con un comportamiento como sistema en el que nos metemos y creo que realmente disfrutarás. Nos vemos en el siguiente apartado. 27. Introducción a HSwarm: Entonces, ahora estamos empezando a entrar en los aspectos más robustos del uso de comportamientos HYPE. Cuando estábamos usando HFollow, estábamos usando la entrada del mouse, estábamos usando gesto para mover las cosas en pantalla. Cuando nos mudamos a HTimer, estábamos animando cosas basadas en tempo. Pero he empaquetado algunos comportamientos que hacen cosas mucho más robustas. Entonces por ejemplo, en HTween había que especificar cuál era la acción de animación, el punto A al punto B, pero tenemos muchos otros comportamientos que existen en HYPE que ejecutan animaciones mucho más salvajes. El primero que vamos a cubrir es HsWarm. Entonces, la mejor manera de pensar en HSwarm es un comportamiento de insectos. Imagina luciérnagas volando alrededor de tu patio trasero en verano. HsWarm te va a dar ese tipo de sentimiento, ese tipo de movimiento. Ahora HSwarm utiliza algunos argumentos interesantes. El primero es que vamos a especificar cuál es mi destino. Entonces, en este primer archivo que probablemente crearemos, el destino va a ser el centro de la pantalla. Entonces, ya al enjambre se le han dado instrucciones de dónde quiere tratar de llegar, en este caso, al centro de la pantalla. No obstante, estamos usando algunos comportamientos más como rotación, velocidad, giro es, entonces ¿cuántos grados gira este insecto ya que está tratando de llegar a ese destino? Y ya verás en un par de otras mutaciones vamos a usar twitch, y twitch es lo que golpea a ese insecto fuera de curso. Entonces, en estos primeros archivos, si establecemos el destino en el centro de la pantalla, y después de configurar todos los parámetros de rotación y velocidad y demás, debes notar que el objeto está girando alrededor de ese destino porque no puede llegar del todo a él, ¿verdad? Se trata de enjambre a ese destino, pero en realidad nunca llega a ese destino por estas variables que ponemos en su lugar. Ahora, ese comportamiento va a ser muy uniforme. No es hasta que introduzcamos, en otro archivo, twitch donde en realidad empezamos a dejar de lado estas cosas. Conforme los noqueamos fuera de curso, cada una de estas pequeñas piezas de arte que estaban creando en pantalla dará la percepción de que tienen un comportamiento independiente, una mente independiente propia porque van a vagar por toda la pantalla, pero todos ellos siguen tratando de llegar a ese destino fijo en el centro. 28. Unidad 7, video 1: Está bien. Bienvenido a HSwarm. En esta sección, estaremos cubriendo un comportamiento que es un sistema. Entonces, básicamente, vas a configurar un sistema, registrar un montón de objetos a ese sistema, y este sistema de comportamiento luego controla todos los activos que se crean. Entonces, deberías ver en HSwarm tenemos siete archivos y vamos a correr a través de los tres primeros, ejemplo uno, ejemplo dos y ejemplo tres. Adelante y empecemos nuestro desglose del ejemplo uno. Entonces, el ejemplo uno de nuevo es muy similar a algunas cosas que cubrimos en HTimer en el sentido de que estamos usando un temporizador en conjunto con una piscina. Está bien. Entonces, vamos a digerir esos aspectos de este expediente. Tengo una alberca HDrawable, tengo un HTimer, podemos ver aquí que tenemos una alberca HDrawable que va a dibujar 40 activos, se van a sumar a esta etapa, vamos a estar pintando un rectángulo que tiene un redondeo de cuatro, y el tamaño es sólo un ancho de 18 y una altura de seis. Tenemos un colorista con una piscina HColor y algunos colores aleatorios aquí dentro, y sabemos que sólo se va a aplicar a fillonly. Está bien. Desplazándose hacia abajo hasta abajo aquí, tenemos un temporizador porque queremos tambalearse cuando estas cosas se presenten en pantalla. Entonces, en lugar de hacer una solicitud todo, estamos usando un temporizador para generar nuestros rectángulos. línea 44 tiene un NumCycles, por lo que sabemos que este temporizador en particular sólo va a funcionar 40 veces y luego se apaga. Sabemos que va a disparar la devolución de llamada cada 250 milisegundos, y cuando esa llamada se dispara, simplemente le va a pedir a la piscina que solicite un artículo. Entonces, tenemos pool.request. Ahora bien, esto es un enjambre. Entonces, si solo miras aquí abajo en la parte inferior con el sorteo, tengo h.DrawStage, y luego estoy haciendo alguna otra sintaxis de procesamiento para representación. Entonces, solo quiero mostrarles aquí que estoy haciendo dos elipses. El primer elipse, voy a poner hacia la parte superior y en realidad le diré color a ese azulado, y luego voy a poner uno en el centro de la pantalla, y voy a colorear ese naranja oscuro. El motivo por el que elegí dos colores es porque un punto va a representar el nacimiento de los objetos, y el otro punto va a representar el punto que el enjambre está tratando de enjambre alrededor. Está bien. Entonces, tengo dos elipses a dos colores alternos. Ahora, cuando miramos el OnCreate aquí, y seguimos adelante y miramos nuestro HRectangle que es nuestro Drawable, no estamos aplicando ningún trazo. Estamos agregando una ubicación y esa ubicación es el primer punto. Entonces, mira, ancho dividido por dos, así que va a ser el centro de la pantalla, pero luego van a estar a 100 píxeles de la parte superior. Si miras aquí abajo en la línea 60, ese es el mismo punto exacto, ancho dividido por dos, 100 píxeles de arriba. Entonces, esto representaría la posición en la que nacen los activos, y el anclaje es H.CENTER. Entonces, hemos cubierto todo lo que no es HSwarm, para que podamos ver lo que está pasando aquí. Ahora, cubramos enjambre. Enjambre es un comportamiento, pero lo más importante es un sistema, ¿verdad? Se trata de un sistema que va a controlar todas las cosas en pantalla. Entonces, al menos antes incluso de ejecutar este archivo, tenemos un entendimiento de que cada 250 milisegundos, va a estar creando un rectángulo en la posición que establecemos deseable. Está bien. Entonces, veamos aquí el enjambre. Pero en la línea uno, ves he dicho HSwarm, lo vamos a llamar enjambre, y luego en las líneas 10-15, creo una instancia de ese HSwarm. Entonces, dije, el enjambre es un nuevo HSwarm. Déjame decirte algunas cosas que necesitas saber. El primero es, quiero agregar un gol, y el objetivo es, ancho dividido por dos, altura dividida por dos. Entonces, el objetivo al que estás tratando de llegar es el centro de la pantalla. Entonces, enjambre se va a enjambrar con siempre ese deseo de tratar de llegar al centro de la pantalla. Ahora, necesitamos darle una velocidad al enjambre. Entonces, en este caso, he dicho bien, el enjambre del objeto debería tener una velocidad de cuatro. Ahora, ya verás que tenemos TurneASE. Entonces, ¿cuántos grados de rotación hace para tratar de llegar al centro de la pantalla? Entonces, en este caso, he dicho 0.025f. Entonces, es un flotador. Está bien. También tengo argumento aquí para twitch, y notarás que twitch está establecido en cero. Entonces, con este archivo en particular, en realidad no está aplicando ningún twitch, que cubriremos en el ejemplo tres. Entonces, ahora mismo, nada de contracción. Entonces, las líneas 10-15 configuran este comportamiento de enjambre, y el comportamiento de enjambre es un sistema. Ahora, lo que necesito hacer es registrar los objetos en el sistema. Entonces, vas a notar aquí en la línea 37, ya que estoy creando activos, ya que el temporizador está disparando cada 250 milisegundos y como está disparando el OnCreate para cada uno de esos activos individuales, línea 37 dice: “Hey enjambre, Te quiero dar otro jugador en el sistema. Entonces, solo digo, Swarm.AddTarget (d), d siendo nuestro HRect dibujable. Entonces, ahora el enjambre le está registrando activos, y en este caso va a registrar 40 de ellos. Ahora bien, si sigo adelante y pruebo este boceto, empezamos a ver el comportamiento del enjambre. Entonces, cada 250 milisegundos, se está creando un activo, están naciendo a ese ancho dividido por dos, y100, y los pone en movimiento. Está bien. Ahora, es ponerlos en movimiento, pero aquí, permítanme simplemente cerrar esto y subir a la cima aquí y volver a ejecutar esto, esa manera podemos mirar al enjambre mientras está corriendo. El objetivo es este ancho por aquí dividido por dos, altura dividida por dos. Entonces, estos tipos están tratando de llegar a la ubicación del centro. Las otras cosas que tenemos que mirar es, vale, genial. Hay una velocidad asociada a estos objetos. Entonces, ahora mismo estamos viendo una velocidad de cuatro, y luego tenemos TurneASE. Entonces, ese TurneASE es grados que está girando para tratar de llegar a ancho dividido por dos, altura dividida por dos, ese gol. Pero, porque hay una velocidad y porque hay una rotación, se puede ver que caen en un círculo perfecto. Porque basados en la velocidad y en base a la TurneASE, en realidad nunca llegan a la meta. De nuevo, es como, piensa en conducir tu auto, solo puedes girar tanto el volante, y si estabas en un estacionamiento y pones una lata de refresco en medio del estacionamiento, y tenías el pie en cuatro millas por hora para la velocidad, y giraste la rueda, nunca vas a llegar a la lata. Simplemente vas a estar básicamente haciendo círculos alrededor de esa lata. Entonces, volver a mirar esas dos variables dicta cómo se va a comportar este sistema. Ahora, voy a ejecutarlo una vez más porque esto va a prepararnos cómo pasamos al ejemplo dos, que es, ver la animación del baño. Entonces, ten en cuenta que siempre están disparando hacia el lado derecho, y todos están cayendo en este patrón perfecto. Entonces, yo quería tambalear eso un poco. Entonces, sigamos adelante y cerremos esto y pasemos al ejemplo dos. Ahora, en el ejemplo dos, hago sólo un pequeño ajuste que es, quiero aleatorizar cómo esas cosas salen de su posición de baño. Entonces, si miras el ejemplo dos, todo lo que quiero que hagas es desplazarte hacia abajo y mirar el método OnCreate. Te darás cuenta aquí que pongo algunas cosas extra. Una es, acabo de decir que la rotación de flotación es igual al azar (TWO_PI). Entonces, puse en esta variable de rotación, y luego hice un pequeño ajuste a nuestro HDrawable d. en la línea 35, dije, vale, bueno el radio de rotación debería ser cualquier rotación disparada en la línea 30. También sólo quiero hacer un rápido movimiento de hDrawable d para ser coseno rotación veces diez para la x, y rotación sinusoidal veces diez para la yAhora , sólo con esa pequeña adición en este ejemplo particular, veamos lo que pasa. Te darás cuenta de que cuando los activos empiezan a crearse, se disparan como fuegos artificiales. En lugar de que sean tirados constantemente hacia la derecha, en realidad estoy distribuyendo aleatoriamente cómo se echan estas cosas. El problema con este archivo ahora mismo, es que no hay twitch, y como no hay twitch, otra vez, no importa cómo tire estas cosas, van a caer en esta rotación circular. Lo bueno de éste en particular es esto, que tienes algunos que van sentido horario y tienes otros que van en sentido contrario a las agujas del reloj, mientras que en el ejemplo uno, siempre iban en sentido horario. Entonces, al menos con la adición de este código en el ejemplo dos, sí tenemos algunos activos yendo en sentido horario y algunos en sentido contrario a las agujas del reloj. Está bien. Sigamos adelante y cerremos esto y voy a seguir adelante y pasar al ejemplo tres. El único cambio dentro del ejemplo tres es, y yo diría que el ejemplo tres es en realidad una copia del ejemplo uno, me deshice de ese tipo de fuegos artificiales de tirar comportamiento en el ejemplo tres sólo porque quiero mantener las cosas simplificadas. En el ejemplo tres, todo lo que hice fue agregar este twitch. En realidad, cambié la velocidad para ser cinco, el TurneASE ahora es 0.05, pero mira este twitch, twitch es 20. Aquí es donde es solo esta pequeña variable la que realmente pone en marcha la emoción en este comportamiento en particular, que es, lo que el twitch va a hacer es dejarlo fuera de curso. Entonces, si está implementando cierta velocidad y está implementando un cierto TurneASE, todo lo que hace twitch es básicamente lo deja fuera de curso. Entonces, de nuevo, imagina tratar de conducir tu auto para llegar a una lata de refresco sentada en medio de la carretera, pero da la casualidad de que hay otros autos que en realidad te están golpeando, dejándote fuera de curso. Entonces, eso es lo que es el twitch. Twitch se está desviando del camino, simplemente golpeándolos por supuesto un poco. Ahora, y de nuevo, ese es el único cambio aquí en el ejemplo tres. Mira lo que sucede cuando ejecutamos este boceto. Empezamos a conseguir este comportamiento orgánico realmente hermoso porque ahora parece que cada uno de estos tiene una mente propia. Entonces, podrías haber visto en el video de intro al que referencié, es como un comportamiento de insectos y realmente toma ese tipo de estética porque, como enjambre está corriendo y como todos están usando una velocidad de cinco, y sí todos están usando TurneASE de 0.05, cada uno está recibiendo aleatoriamente un golpe de twitch a ellos. Entonces, en cuanto eso se implementa, todo este sistema parece asumir todas estas cosas parecen estar actuando de forma independiente, pero realmente están obsesionados con llegar al centro de la pantalla. Entonces, esto termina los ejemplos uno dos y tres. En el siguiente video, vamos a cubrir las adiciones en ejemplos de cuatro a siete. Nos vemos en el siguiente video. 29. Unidad 7, video 2: De acuerdo, este es el video final de esta sección. Vamos a trabajar en los ejemplos cuatro, cinco, seis y siete. Se trata de mutaciones, solo para mostrar algunas mejoras que se pueden aplicar a estos archivos. Entonces, sigamos adelante y veamos el ejemplo cuatro y algunos de los ejemplos, algunos de los ajustes que he hecho es mirar la línea siete. Dije auto claro falso. Entonces, ahora mismo va a empezar a dejar senderos en pantalla. El otro ajuste que hice es mirar la línea 11. En los archivos anteriores el objetivo del anuncio era ancho dividido por dos, altura dividida por dos. Aquí solo estoy diciendo h.mouse. Entonces, H.mouse va a devolver la posición x e y del ratón a medida que actualice, así que es otro consejo a lo que hicimos en H.Follow, que es usando gesto. Entonces, ahora el objetivo es dondequiera que esté el ratón. Aparte de eso, el código es exactamente el mismo con otro pequeño ajuste menor aquí que está en la línea 31 para tamaño, acabo de aleatorizar el tamaño de los h.recs que se crean. Entonces para el ancho está haciendo aleatorio 10, 20 y para la altura está haciendo al azar dos, seis. Ahora bien, si sigo adelante y ejecuto este boceto, debes notar que si vuelvo a poner mi ratón aquí en el centro, hay 40 activos en este dibujable, el temporizador cada 250 milisegundos está disparando, y son todo lo que son tratando de llegar a mi ratón. Entonces, si realmente muevo el ratón aquí arriba hacia la esquina superior derecha, el objetivo del enjambre se ha alterado, por lo que ahora puedo empezar a ejecutar gesto y el enjambre está constantemente tratando de perseguir la ubicación de mi ratón. Entonces, solo recuerda que ese gol no siempre tiene que ser un punto fijo. En este caso en realidad puede ser un punto que se está moviendo, en el caso de este es h.mouse. Está bien, así que hagamos algunas otras mejoras. Esto obviamente está usando colorista y un HColorPool así que, pensé que tal vez probaría algunas otras cosas que si nos fijamos en el ejemplo cinco, lo cubrimos en primera clase pero hasta ahora realmente no he hablado de ello hasta ahora que es HColorField. Si recuerdas, HColorField te permite crear puntos de color de gradiente. Entonces, aquí puedes ver que estoy agregando un punto de azul y agregando un punto de rosa. Entonces, estoy usando HColorField para definir piscinas de color y también si recuerdas, si esas piscinas de color se superponen, en realidad mezclan nuevos colores donde realmente se produce la superposición. Entonces, el único cambio en este es la adición de deshacerse de, notarás que ya se ha ido, colorista HColorPool falta en esta sección en particular. Ahora estoy usando en la línea uno aquí hColorField, y de nuevo en las líneas 11 a 17, estoy especificando dos colores, un azul y un rosa y diciendo que sólo se deben aplicar a un relleno. Ahora, hay un par de cosas si recuerdas con los colores de píxel que tenemos que hacer, es que tienes que establecer un relleno con campo de color y se puede pensar en el campo de color es como ser un tinte. Nuevamente, no sé si recuerdas esa conversación que tuvimos en primera clase. Pero quiero color saturado completo así que en realidad voy a poner el relleno en negro,000000. Ahora, porque estoy usando h.mouse, y porque estoy moviendo el ratón y el enjambre está siguiendo el gesto, necesito estar constantemente actualizando los activos que están dentro de enjambre. Entonces, veamos aquí abajo la función de sorteo, y notarás que tengo un poco de for-loop. Ahora, un for-loop es algo de nuevo, que ejecuta un número determinado de veces. Entonces, lo que quiero hacer es bucle sobre los 40 activos que están en la pantalla, y actualizar cada uno de esos 40 activos actualizar sus colores. Entonces, digo para HDrawable d dentro de alberca. Entonces ahora sé que este for-loop va a correr 40 veces. Cuando hago eso, solo digo que quiero hablar con el campo de color. Entonces, digo colores.ApplyColor y lo estoy aplicando de nuevo a d.fill y de nuevo, el d.fill es un bloque. Ahora, si vuelvo a ejecutar este boceto, notarás que se inicia un enjambre deberías poder mover tu ratón, ellos correrán a tu ratón y conforme te muevas, realidad estás actualizando el color de relleno con esto con este campo de color . Entonces, si sólo me moví a esta posición correcta, estoy obteniendo la saturación completa del azul y otra vez, te darás cuenta cuando empiezo a moverme al medio, me sale este morado porque ahí es donde los dos campos de color se están mezclando en realidad. Si me muevo aquí a la extrema izquierda, entonces claro que voy a conseguir el más brillante del rosa. Debido a que es un gradiente, nuevo a medida que empiezas a alejarte, podrás empezar a ver el gradiente a medida que se mueve hacia fuera. Entonces, si entro en esta posición, probablemente me acercaré a ese negro lo más posible. Entonces, de nuevo esto está usando hColorField. Entonces, en el ejemplo cuatro, estábamos usando HColorPool y el ejemplo cinco, estábamos usando HColorField, así que por supuesto si pasas al ejemplo seis, quiero hacer PixelColorist. Entonces, si nos fijamos en HPixelColorist tenemos nuestro color jpg. Entonces, solo sigamos adelante y miremos la línea uno. Estoy diciendo colores HPixelColorist en las líneas 11 a 15, estoy diciendo hey entra en la carpeta de datos y encuentra este color.jpg. Aparte de eso, el código sigue siendo absolutamente el mismo excepto por aquí abajo en la parte inferior dentro del sorteo, hice un poco de ajuste el cual dije: “Genial, necesito recorrer todos los activos de la alberca y necesito actualizar su color, colores.applyColor” pero nota estoy diciendo d.alpha 50 así que en realidad estoy cambiando la transparencia alfa de los HRectángulos dentro del sistema de enjambre. Entonces, si en realidad ejecuto este boceto, te darás cuenta de que está tomando muestras del color pero de nuevo, tengo este alfa de 50 por lo que puedo empezar a tenerlos tipo de crear nuevos colores a medida que se atropellan entre sí. Si me quedara en una sección, obviamente el enjambre acumularía suficiente esa zona en particular se saturaría bastante con el color que se está muestreando del jpg. Ahora, pasando al último archivo que es el ejemplo siete, sabías que éste venía, está agregando HCanvas así que arriba en la parte superior dije hCanvas c1, nuevo esto es solo repetición, tanta repetición en programación. Líneas 12 a 13 creando un hCanvas auto clear false. Nuevamente, observe que el falso AutoClear se ha eliminado de la línea nueve, se ha agregado a HCanvas con un precioso desvanecido de dos y nuestro lienzo C1 se está agregando al escenario. Entonces, porque hice eso, noten que necesitaba hacer un ajuste a la línea 25. Entonces, en lugar de agregarlo al escenario, digo pool.Autoparent y luego pasarlo el lienzo. Entonces, ahora cada uno de estos 40 HRects se están dibujando sobre el lienzo en contraposición al escenario. Ahora, de nuevo el resto del código no ha sido modificado. El for-loop hacia abajo en la parte inferior, me quité el alfa y luego sólo dije d.fill in y pegado en ese color de negro. Entonces, ahora cuando ejecuto este boceto, esto representa para mí la belleza de todos los elementos trabajando en tándem. Entonces tengo un enjambre realmente agradable pasando, tengo en recoger el color de HPixelColorist de ese jpg sentado en el archivo de datos, pero estamos usando el poder de HCanvas para quemar lentamente el rastro del para que no llene completamente la pantalla, me permite explorar áreas del boceto y luego hacer que los senderos se desvanecen en el fondo. De acuerdo, así que esto termina explorando HSwarm y otra vez, Dios odio seguir diciendo las mismas cosas una y otra vez y otra vez pero de nuevo, esto es sólo usar un HRect. Esto puede usar cualquiera de los SVG que hiciste. Ahí es donde entra la experimentación. Estoy tratando de mantener el código lo más genérico posible para que puedas empezar a : “Bueno, ¿y si pongo una imagen en lugar de eso?” o, “¿Y si uso SVG con eso?” Se puede empezar a mezclar y emparejar algunas de estas cosas que aprendimos haciendo este tipo de mutaciones de las que estoy hablando. Nuevamente, esto es cosas que hago a diario, es llegar con estas ideas, tratar de escribir el código es genéricamente lo más posible para que pueda empezar a explorar todas estas mutaciones diferentes. ¿ Cómo se ve esto cuando pones algunos de tus activos de SVG ahí? Asumo que vas a estar publicando algunos videos dentro de la sección final del proyecto que eso nos mostrará exactamente cómo se ve. Entonces, me emociona ver qué hacen ustedes con el sistema en particular. De acuerdo, vamos a pasar a las dos últimas grandes secciones de código, y vamos a pasar a HoscilLator a continuación. Aquí la parte donde al hacer clic en Hoscillator te asustaste ligeramente porque sí, hay 23 ejemplos en la sección HoscilLator. Yo estoy saliendo oscilador de edad, estoy enamorado de Hoscillator y obviamente verás por qué a medida que nos movemos por esa progresión. Entonces, HSwarm, ha sido fantástico. Te veré en la siguiente sección Hoscillator. 30. Introducción a HOscillator: Ahora mismo, has llegado a la sección, esa es mi absoluta favorita y esa es Hoscillator. Porque HoscilLator es tan simple, y tan hermoso, y tan sorprendente. Hay tantas mutaciones que vamos a hacer con Hoscillator. Eso, no vas a dormir, no vas a dormir por un mes. Porque vas a estar pensando en todas estas diferentes formas, de combinar HoscilLator para crear estas imposibles animaciones inesperadas. Ahora, HoscilLator es solo un patrón de onda, y en realidad tenemos cuatro ondas diferentes con las que puedes trabajar. Ahí hay una onda sinusoidal, que es esa hermosa curva. Probablemente sea la que más usaremos. Tenemos una onda cuadrada, tenemos una onda de sierra y tenemos una onda triángulo. Ahora, vamos a ver algunos de los parámetros del Hoscillator. Nuevamente, como Enjambre, quiere conocer a un blanco, a quién estamos aplicando esta ola. También quiere conocer propiedad, al igual que lo hizo HTween, en esa sección anterior. ¿ Cuáles son algunas cosas que realmente podemos oscilar? Bueno, podríamos oscilar otra vez, Alfa, podríamos oscilar escala, podríamos oscilar rotación, podemos oscilar posición. Quiere saber cosas como rango. Entonces, ¿como cuál es el rango de oscilación? Podría ser, si lo estuviéramos aplicando a la rotación, podría ser, positivo 180 grados a negativo 180 grados. Entonces tendríamos esta cosa, como un péndulo, yendo de ida y vuelta. Oscilador tiene frecuencia, entonces ¿cuál es la amplitud de la onda? ¿ Está en una onda ondulante lenta? ¿ O es muy errático? También tenemos una propiedad de paso actual, y paso actual, es lo que nos permite compensar esa ola, a través de diferentes cosas que estamos pintando en pantalla. Entonces, en la primera clase, aprendimos cosas como GridLayout. Bueno, GridLayout y Hoscillator trabajan muy bien juntos? Porque, podemos disenar las cosas en pantalla, y luego tener que suceden oscilaciones a través de todos esos elementos en la cuadrícula. Ahora, vamos a aplicar HoscilLator a la animación bidimensional. Donde realmente se ponen los plátanos, es cuando realmente aplicamos HoscilLator a una animación tridimensional. Podemos oscilar cosas como, el espacio Z, así como, haremos una muestra donde realmente estamos usando HBox, lo que nos permite hacer un cubo tridimensional, y en realidad podemos oscilar cómo gira esa caja en tres- espacio dimensional. Entonces HoscilLator, si no es tu favorito, ya no estamos saliendo. Es sólo así de sencillo. Si no te gusta esta sección, estoy rompiendo contigo. 31. Unidad 8, video 1: Cada oscilador. Eres mi mejor amigo. Cada oscilador hace que todo sea hermoso. Ni siquiera puedo expresar cuánto amo a HoscilLator. Es probablemente lo más sorprendente con lo que he experimentado en mi vida, en el sentido de que, te mezclas como unas cuantas cosas y es como “¿Qué?” Yo soy como, “Sí”. Es como, “¿qué?” Es una locura. A mí me encanta. Veintitrés ejemplos, hombre. Me volví loco. De verdad me encanta esta clase. Entonces, adjunto a este video obviamente se encuentra un archivo zip. Abre eso, vas a ver 23 ejemplos. En este primer video, vamos a caminar por los primeros seis. Entonces otra vez, adelante y descarga ese zip, descomprimirlo, deberías estar mirándolo y aquí está. Ahora, sigamos adelante y veamos el ejemplo uno. ejemplo uno no contiene un HoscilLator. De hecho, lo que sí contiene es código que hicimos en la primera clase usando a nuestro hermoso amigo, HgridLayout. Entonces, solo caminemos por esta cuadrícula que vamos a crear y luego en el ejemplo dos, empezaremos a explorar la oscilación. Ahora, antes de entrar en el código de bombo, solo quiero saltar todo el camino hacia abajo y de nuevo, solo exhibir algún código de procesamiento. Entonces, si miras aquí, estoy creando un trazo de un gris claro, CCCCCC, y luego estoy creando una línea, y estoy creando una línea desde el primer punto es cero, altura dividida por dos. Por lo que está centrado en el eje y y el otro punto es ancho por alto dividido por dos. Entonces, básicamente estamos haciendo una línea horizontal. De nuevo, quiero ver esa línea del horizonte porque una vez que entramos en la oscilación, quería ver cómo la oscilación afecta a esa línea base. Entonces, sigamos adelante y revisemos esto. Arriba en la parte superior tenemos un HDrawablePool. El pool va a adjuntar 90 activos. Parece que estamos adjuntando un rectángulo de nuevo pero echa un vistazo al tamaño, el lateral es de sólo seis píxeles por seis píxeles. El redondeo de los bordes es de dos, está anclado en el centro y no hay trazo. Se cuenta con un colorista con un HColorPool con algunos colores aleatorios consiguiendo aplicar solo para llenar. Te darás cuenta, de nuevo, sólo voy a saltarme algunas cosas. Mira hacia abajo en la parte inferior, sí, el retorno de RequestAll. Observe que no estamos usando un temporizador para construir esta grilla, quiero todos los 90 activos todos a la vez. Echemos un vistazo al diseño aquí. Entonces, tenemos un HgridLayout. Se va a iniciar en un eje x de nueve y altura dividida por dos. Entonces, se va a unir en esa línea del horizonte central. Debido a que nuestro HRect es de seis píxeles por seis píxeles, observe que el espaciado es de siete píxeles. Entonces, bueno, déjame volver a eso porque podrías notar que hay cero para la y ¿Por qué es eso? Porque hay 90 activos en las columnas lo que significa, estamos usando el diseño de cuadrícula para construir una fila de activos y esos activos son de seis píxeles por seis píxeles pero como el espaciado es de siete, hay un canalón de un píxel entre cada uno de los Hrectángulos. Ya que solo estamos construyendo una fila, realmente no hay razón para poner ningún número para el espaciado y. Entonces, sigamos adelante y probemos este boceto y de nuevo, deberías ver que tenemos 90 rectángulos todos construidos en una fila, y está perfectamente centrado en esa línea del horizonte que definimos hacia abajo en el sorteo. Tan genial, así que ahora, tengo esta fila de activos a la que quiero aplicar alguna oscilación. Entonces, al menos con este archivo, se puede ver cómo estamos adjuntando este material en pantalla antes de aplicar oscilación. Voy a seguir adelante y cerrar eso y voy a seguir adelante y avanzar al archivo dos. Ahora, dentro del archivo dos, voy a añadir un oscilador a cada uno de esos rectángulos. Entonces, si me desplazo hacia abajo hasta la parte inferior aquí, notarás que hay una RequestAll. RequestAll se va a disparar en crear para todos los 90 activos todos a la vez y lo pasa es que crea rDrawable d. aplica el layout al d. Pero entonces, crea un oscilador para cada uno de nuestros HRectangles. Entonces, echemos un vistazo a algunas de las propiedades que entran en Hoscillator y de nuevo, esta es la primera vez que lo estamos cubriendo porque lo desnatamos en algunos de los ejemplos anteriores arriba. Asesino. Lo primero que quiere saber es quién demonios estoy oscilando. Entonces, estamos creando una nueva instancia de un HoscilLator y lo estamos pasando nuestro HDrawable de d Lo segundo que quiere saber es la propiedad que está oscilando. Estamos empezando a ver un patrón aquí muy similar al HTWin. HTWin quería saber quién soy yo hermanando y cuál es la propiedad. Entonces, como viste en algunos de esos ejemplos anteriores, sí, puedes apilar al infierno de HoscilLators, y mientras no luchen contra la misma propiedad, todos funcionarán de forma independiente. Ahora, lo que es importante notar aquí es que en la línea 33, he dicho que lo que me gustaría oscilar es la propiedad y. Entonces, eso debe significar que voy a mover cosas arriba y abajo en el eje y. Ahora, después de haber especificado la propiedad, quiere saber: “Bueno, ¿qué estoy oscilando? ¿ Cuál es el rango de oscilación?” Entonces, por ejemplo, si la propiedad h.alpha, el rango podría ser algo de 0 a 255. Por lo que oscilaría de no visible, cero, hasta total visible, 255, y continuaría esta oscilación de cero a 255. Entonces mira lo que pasa en este expediente, he dicho que quiero que oscile de un rango de 10 a 50. Ahora, necesita saber algunas otras cosas, necesita saber, bueno, qué tan rápido debe ir. Entonces, como enjambre, hay una variable de velocidad, y lo otro que quiere saber es la frecuencia. Entonces, vamos a explorar bastante la frecuencia. Frecuencia, ¿está en una onda lenta o es una onda muy errática? Entonces, en este, he dicho que la frecuencia también tiene. Ahora bien, este archivo es en realidad un fracaso y la razón por la que es un fracaso es porque estoy ilustrando por primera vez lo que pasa cuando se pasa una propiedad de y con un rango de 10 a 50. Ahora, mira lo que pasa cuando pruebo la película. Cuando pruebo el boceto, empieza a oscilar, pero notarás que toda la obra acaba de saltar a la cima del escenario. Bueno, ¿por qué es eso? Bueno, la razón por la que hice eso es porque eso es lo que le dijiste que hiciera. Dijiste que querías mover esta fila de ilustraciones de un rango de 10 en la y a 50 en la y Entonces, a pesar de que el diseño de cuadrícula hizo una ubicación inicial de altura dividida por dos, lo que en el caso del ejemplo uno donde lo creó a lo largo de esta línea del horizonte, sí lo hizo durante una fracción de milisegundo hasta que el oscilador pateó. En cuanto el oscilador dio una patada, dijo “Oh sí, genial. ¿ Quieres que pase de un eje y de 10 a un eje y de 50?” Entonces, de repente, toda esa fila saltó hasta la cima y empezó a oscilar entre una y de 10 y una y de 50. Entonces, podrías imaginar que puedes jugar con esto si dijeras que el rango era cero y el rango máximo en esto era 640, entonces de repente verías que la oscilación va desde la parte superior de la pantalla hasta el fondo de la pantalla, porque estás especificando posiciones absolutas de oscilación que es de cero a 640. Entonces, en el caso del archivo anterior, el archivo zip que tienes, está haciendo un rango de 10 a 50. Entonces, esto plantea un problema donde dices “Bueno, sí. Realmente no quería eso, quería que oscilara fuera de esa línea del horizonte”. Bueno, en lugar de tratar de resolver esto, si lo hicieras de la manera difícil, dirías: “Está bien. Bueno, el rango es la altura dividida por dos menos 100, y entonces el rango máximo es algo así como la altura dividida por dos más 100”. Entonces si ejecutaste este boceto, te darías cuenta como: “Oh, está bien. Genial, eso es lo que quería usar, empezar en esa línea del horizonte y luego oscilar fuera de esa línea del horizonte”. No obstante, este es un largo camino de hacerlo y de nuevo, me gusta hacer las cosas fáciles. Entonces, voy a quitarle esto, volviendo al rango de 10 y a un rango de 50. Ahora, esto realmente sólo se aplica a cuando estás estableciendo una propiedad de like x o y, que puedes hacer el siguiente conjunto de truco, que es ir adelante y ir al ejemplo tres, y notarás que ya hemos considerado que lo harías probablemente quieran oscilar fuera de una posición ya establecida. Entonces, notarás que en la línea 34, hay valor relativo y luego lo pasas, es valor relativo. Entonces, solo pensemos en esto aquí por un segundo, diseño está diciendo: “Voy a adjuntar la obra de arte, altura dividida por dos”. Entonces, lo une en esa línea del horizonte central. Una vez que llega al oscilador, estás diciendo: “Oye, quiero oscilar estos dibujables, quiero oscilar el eje y, pero hazme un favor en la mente donde se creó inicialmente esa obra”. En este caso, el valor relativo es d.y, que es la altura dividida por dos, es esa línea inicial del horizonte en el centro de la pantalla. Entonces, rango se convierte en un rango fuera del valor relativo. Entonces, aquí acabo de decir “Hombre, donde sea que tengas eso apegado, que es d.y, haz menos 100 off de d.y, y haz positivo 100 off de d.y Así que, de nuevo no tienes que preocuparte como, “Oh, ¿qué hago yo tipo con el fin de encontrar esa línea del horizonte? Simplemente puedes decir valor relativo, y de nuevo, esto es específicamente si estás trabajando con el eje x, el eje y, el eje z, valor relativo es probablemente algo que vas a usar. Entonces, está usando rango basado en este valor base. Entonces, ahora, de nuevo cuando ejecuto este boceto aquí, notarás que ahora está pensando en esa línea inicial del horizonte, ese layout utilizado, que de nuevo es ubicación de inicio, altura dividida por dos aquí en la línea 21. Entonces, el valor relativo es pensar que está adjuntando la obra a la altura dividida por dos. Entonces el rango simplemente está oscilando fuera de ese número base. ¿ Lo tienes? Bien. Entonces, lo siguiente que podrías notar es, “Josh, esto no es lo que esperaba, pensé que esto era una ola”. Técnicamente, es una ola pero está aplicando una ola a todos los activos exactamente al mismo tiempo. Entonces, lo que probablemente queremos hacer es crear un pequeño desplazamiento para que aún usen la onda pero solo compensen cada uno de los HRectángulos solo siempre tan ligeramente para que realmente sí tengamos ese patrón de onda. Entonces, sigamos adelante y veamos el ejemplo cuatro. ejemplo cuatro hace es introducir esta idea del paso actual, así que piense en esto como un desplazamiento. Lo que estoy haciendo es, es decir, “Está bien, paso actual es la piscina.CurrentIndex”. Entonces, el primer bloque pasa uno al paso actual, el segundo bloque pasa al paso actual. Entonces, ya que el paso actual está consiguiendo su propio número único, estamos usando ese número único como un desplazamiento en la ola, así que realmente es esta línea 38 en el ejemplo cuatro, que acaba de convertirse en la magia. Mira lo que sucede cuando probamos el boceto. Eso es probablemente lo que esperabas, que es, estamos usando esta ola, estamos usando esta oscilación, pero no es hasta que realmente pusimos en un offset de los activos en pantalla, que en realidad empezamos a conseguir una ola patrón aquí. Entonces, línea 38, paso actual, pool.CurrentIndex. Ahora, genial. Empecemos a hacer algunos ajustes. Entonces, voy a seguir adelante y cerrar boceto cuatro, y voy a pasar al boceto número cinco. Lo único que cambié en el boceto número cinco es que he cambiado la frecuencia, así que podrías notar aquí, la velocidad es una y la frecuencia es cinco. En tanto que en la anterior, la frecuencia fue de dos. Entonces, ya que la frecuencia era menor, era una onda ondulante suave agradable. Ahora bien, si cambio la frecuencia a cinco, eso significaría que esta onda va a ser mucho más disruptiva, y en realidad cuanto más alto hagas ese número, más disruptiva será la onda. Pero ten en cuenta que con esa frecuencia, parece que en realidad se ha acelerado el movimiento de esa ola. Entonces, quiero mostrarles un pequeño truco que es, si tengo una velocidad de uno y tengo una frecuencia específica, me hace empezar a pensar en esa línea 38, este paso actual. Este paso actual me hace pensar, bueno, es pasar por uno cada vez, así que uno es uno, dos son dos, tres son tres, cuatro son cuatro, y así sucesivamente. Pero si sólo puedo aumentar los pasos como un número mayor, ¿cómo afectaría eso realmente a esta ola? Entonces, voy a seguir adelante y cerrar eso. Voy a seguir adelante y ver el ejemplo seis, y el ejemplo seis tiene las líneas 37 y 38 modificadas. La frecuencia en realidad bajé de nuevo a dos porque en realidad me gustó el movimiento de esa ola. Yo sólo quería más ondas en el movimiento, pero no necesariamente cambiar la velocidad de la onda fija. Entonces, echa un vistazo. En la línea 38, acabo de decir, en lugar de hacer uno es uno, dos es dos, tres es tres, ¿por qué no el paso actual sea pool.CurrentIndex veces seis. Entonces, en realidad estoy multiplicando un número en el índice actual. Entonces, de esa manera, los pasos entre cada uno de los activos no es un solo salto cada vez. Entonces ahora, cuando ejecute este boceto, notarás que la velocidad y la frecuencia en realidad es lo que me gustó, pero he cambiado los pasos en el paso actual para que en realidad presente más ondas en el patrón de oscilación. Sí, genial. Está bien. Voy a cerrar este video ahora porque por alguna razón, estoy fallando miserablemente. Estoy tratando de mantenerlos cortos. Entonces, vamos a envolver este y pasemos a los siguientes cuatro archivos que va a ser ejemplo siete sinusoidal, ejemplo ocho cuadrado, ejemplo nueve triángulo y ejemplo diez sierra. 32. Unidad 8, video 2: Está bien. Este video probablemente va a ser mucho más corto porque realmente quiero mostrar los cuatro tipos diferentes de ondas que realmente tenemos dentro de bombo. Entonces, si fuera a ejecutar rápidamente build seven, notarás que por defecto, cada oscilador siempre está usando una onda sinusoidal bien. Entonces ves que solo consigues estas curvas realmente hermosas, con una onda sinusoidal. Ahora, hay algunos ajustes que hice en este expediente que vamos a hacer en estos cuatro y es que cambio de propiedad. Entonces, si miras aquí, estoy cambiando H.Altura. Entonces, si recuerdas cuando adjuntamos la ilustración a través de esta cuadrícula, cada uno de los rectángulos H es de 6 píxeles x 6 píxeles y lo que estoy oscilando en estos archivos es que estoy estirando solo la altura de la propiedad, bien. Entonces, si miras la línea 33 estoy diciendo propiedad H.Height, y luego si miras el rango, aquí no necesito usar valor relativo porque solo voy a decirle a qué números quiero ir. Entonces, en este caso estoy diciendo, “Hey quiero que el rango sea 6, que es lo que se crea inicialmente a la derecha, aquí mismo en la línea 11”, HRect 6 píxeles x 6 píxeles, para el rectángulo H. Aquí estoy diciendo, bien quiero que el rango sea de 6-200 píxeles. Observe que la velocidad es 1 la frecuencia es 3, y de nuevo, escaloné un poco el paso actual diciendo pool.CurrentIndex veces 3. Entonces, cuando corres el ejemplo siete, estás viendo que esa hermosa onda sinusoidal se está aplicando para estirar la altura de ese rectángulo H. Está bien. Ahora de nuevo, hay cuatro osciladores disponibles dentro de un bombo, por defecto, onda sinusoidal. Si vas adelante y saltas a ocho, en realidad puedes cambiar la forma de onda a un cuadrado. Entonces, aquí tengo onda forma un h.cuadrado y éste es extraño. Esto en realidad es una ola, pero la onda está abajo o arriba, correcto. No es una onda sinusoidal, no hay pendiente ni curva a esta onda. Sigue siendo una ola, pero en realidad solo estás obteniendo el rango bajo y el rango superior mediante el uso de cuadrado. Entonces, te darás cuenta aquí puedes decir forma de onda y luego h.cuadrado. Si saltamos al ejemplo nueve, notarás que tenemos forma de onda de h.triángulo. Está bien. Entonces, de nuevo no es una onda sinusoidal, no son curvas, pero en realidad estamos usando un triángulo hacia arriba y un triángulo hacia abajo. Entonces, de nuevo este es otro tipo de forma de onda que puedes usar dentro del oscilador H, siendo h.triángulo. El final que tenemos está dentro del ejemplo 10, que es una onda de sierra. Entonces, si miras aquí en la línea 37, tenemos la forma de onda de H.saw, y si vas adelante y ejecutas este boceto, la onda de sierra básicamente se acumula hasta llegar a su rango máximo y luego cae todo el camino hasta su rango mínimo. Entonces esta es una ola de sierra. Entonces si bien tengo estas muestras para mostrarte el diferente tipo de formas de onda que se pueden usar dentro del oscilador H, onda sinusoidal es la más sexy. Entonces, en realidad del resto de estos archivos solo voy a estar usando la onda sinusoidal predeterminada porque en mi opinión es la más hermosa. Está bien. Eso termina este video. En el siguiente video, vamos a cubrir los ejemplos del 11 al 15. Nos vemos en el siguiente video. 33. Unidad 8, video 3: Está bien. En este video, vamos a cubrir ejemplos, del 11 al 15. Aquí es donde la oscilación realmente comienza a presentar algunas de las sorpresas visualmente. Menos cosas que nunca esperé inicialmente, y de ahí, comenzó nuestra aventura amorosa de toda la vida. Sigamos adelante y miremos el ejemplo 11 y solo digamos parte del contenido que está sucediendo aquí. En primer lugar, es un poco de salida. Me deshice del pool de objetos, y HDrawablePool, y el diseño de cuadrícula. Yo solo quiero usar un for-loop porque realidad solo voy a adjuntar todo en la misma posición exacta. Entonces, solo empecemos a descomponer este código aquí. Primero es que tengo un for-loop, y este for-loop va a correr 40 veces, y cada una de las 40 veces que voy a adjuntar nuestro HRect de r1. Si nos fijamos en r1, digo: “Hey eres un HRectangle, tu redondeo es 20, tu talla es escala de inicio”. Volveremos a esto en un segundo. No va a tener un derrame cerebral. El relleno va a conseguir un color aleatorio fuera de r HColorPool aparecer en la parte superior. El lugar va a ser ancho dividido por dos, altura dividida por dos. Entonces, sé que cada uno de estos 48 Hrectángulos se va a unir directamente en el centro de la pantalla. El agregado ancla es H.CENTER. Nuevamente, súper importante porque en este primer archivo, vamos a empezar a trabajar con rotación para pivote, y también notarás que especifico una rotación de 45 grados. Entonces, en lugar de que sea un cuadrado, va a girar 45 grados y ser una forma de diamante, y H.add (r1) para nuestro rectángulo. Retrocedamos y miremos este negocio de escala de inicio que tenemos en marcha. Aquí arriba en la parte superior, te darás cuenta en las líneas cuatro y cinco, tengo una escala de inicio de 450 y un desplazamiento de escala de 10. No es hasta que bajas a la línea 37 que ves que después de que se ejecuta por primera vez y une el primer HRectangle a 450 para el tamaño, StartScale comienza a disminuir de tamaño en 10. Entonces, si miras aquí mismo, dice: “StartScale -= ScaleOffset”. Entonces, eso significa en la línea 37, va de 450 a 440, luego a 430, luego a 420, luego a 410. Entonces, la StartScale está disminuyendo lentamente en tamaño. Ahora, te darás cuenta que tengo comentado a HoscilLator, y eso es porque si realmente ejecutamos este boceto, verás que sí, de hecho, ese for-loop adjuntó 40 cosas, al azar agarró un color en la piscina de colores. Se adjuntó ese primero a 450 píxeles para el ancho y la altura. Entonces, el siguiente está en 440, el siguiente fue en 430, y así sucesivamente. Cada rectángulo comenzó a disminuir en diez píxeles cada vez. Entonces ahora, obtenemos esta cosa realmente hermosa de espiral de tronco de árbol cortado. Genial. Ahora, sigamos adelante y pongamos en nuestro Hoscillator. Entonces, solo sigamos adelante y miremos a nuestro Hoscillator. Dije que el objetivo obviamente es r1. El inmueble va a ser h.Rotación, y el valor relativo va a ser de 45 grados, que es esa rotación inicial que fijamos en la línea 23. Mira el rango. El rango es negativo 20 positivo 20. Entonces, tuvimos este cuadrado, giró 45 grados y ahora está girando negativo 20, positivo 20 de ese valor relativo inicial de 45 grados. También debes notar que nuestra velocidad es de 0.4, nuestra frecuencia es de ocho. Entonces, ese es un número mayor que los archivos anteriores, y el paso actual es i Entonces, solo estoy paso por uno cada vez. Te das cuenta de que i es nuestro entero aquí arriba en el for-loop. Entonces, CurrentStep es cero y luego uno, y luego dos, y luego tres, y luego cuatro, y así sucesivamente. Entonces, sigamos adelante y ejecutemos el boceto. Ahora verás que la oscilación está girando, está oscilando la rotación de estos Hrectángulos entre 20 negativo y 20 positivo. Pero de nuevo, porque el paso actual es yo, están un poco compensados. Ahora, podrías estar preguntando, “Whoa, ¿por qué no hiciste como yo veces un número como lo hiciste en el anterior?” Bueno, si hago eso, si digo yo veces tres, por ejemplo, mi opinión es que la rotación de la misma es demasiado disruptiva y realmente pierdes, en mi opinión, la lentitud y la belleza de cuando solo estás usando i. si digo yo veces tres, por ejemplo, mi opinión es que la rotación de la misma es demasiado disruptiva y realmente pierdes, en mi opinión, la lentitud y la belleza de cuando solo estás usando i. mal. Eso es elegante pero prefiero, para este archivo en particular, solo hacer i. ralentiza tu roll baby, ralentiza tu rollo. Eso es exactamente lo que vamos a hacer. Trae eso de nuevo a i Cada cosa es solo pisando una y otra vez, el movimiento de la oscilación es igual de elegante. Está bien. Vamos a ampliar esta idea. Aquí es donde simplemente va realmente extraño, es cuando se empieza a apilar osciladores. Nuevamente, siempre y cuando no luchen contra la misma propiedad, se produce magia. Entonces, sigamos adelante y miremos el ejemplo 12, y en el ejemplo 12, acabo de copiar 11 a 12, y entonces esta es la única modificación que hice, es que agregué un nuevo HoscilLator también dirigido a r1. Pero esta vez, la propiedad es escala. Lo estoy teniendo escalado entre 50 por ciento su tamaño original al 150 por ciento su tamaño original. Recuerda que la escala se basa en el tamaño original de la obra. Si recuerdas, el tamaño original comienza en 450 y comienza a declinar en diez cada vez. Entonces, seguimos pensando en el tamaño de la obra en la que se creó, pero estamos escalando un porcentaje basado en el tamaño original de la obra desde arriba. Genial. Entonces, del 50 por ciento al 150 por ciento, note que la velocidad sigue siendo de 0.4, la frecuencia es de ocho, CurrentStep sigue siendo alta. Ahora, mira lo que pasa cuando pruebas este boceto. Ahora, estamos apilando dos osciladores que están trabajando obviamente juntos. Realmente empieza a simular este tipo de sensación 3D pero no lo es. Es decir, de verdad, esto es sólo obra de arte bidimensional. Todavía quedan 40 de ellos simplemente apilados uno encima del otro pero la oscilación, en este caso particular, realmente empieza a engañar a mis ojos porque empieza a sentir 3D cuando en realidad no lo es. Está bien. Pasemos a otra mutación. Quiero seguir mutando este conjunto base. Entonces, paso al ejemplo 13 y lo único que está en el ejemplo 13 es un nuevo Hosillator de H.Y. Entonces, voy a mover la posición Y de nuestro HRectangle con un rango de oscilación fuera del eje Y. Entonces, echa un vistazo. Consiguió una propiedad, H.Y, el valor relativo es, no sé, ¿dónde fuiste creado originalmente? Bueno, donde se creó originalmente fue la altura dividida por dos. Entonces, sólo se puede decir r1.y, y eso va a buscar el número que se configuró aquí en ubicación de altura dividida por dos. Ahora, está usando eso como rango relativo. Entonces, va a oscilar negativo 50 fuera de ese medio, y positivo 50 fuera de ese medio. Nuevamente, la velocidad es de 0.4, la frecuencia es de ocho, y nuevamente el paso actual sigue siendo i. Adelante y prueba ese boceto y ahora tenemos escala de rotación e Y, otra vez, todo oscilando en tándem, y se puede ver apenas empezando a hacer estas mutaciones, hombre, el cielo es el límite. Empiezo a pensar bien, ¿cuántas formas diferentes puedo cambiar esto para obtener resultados diferentes? Para mí, eso es parte del viaje es tratar de descifrar esta afinación fina para averiguar qué tipo de comportamientos de animación empiezan a crear estéticamente. Observe que la velocidad y la frecuencia son de 0.4 y ocho para todos estos y como que he hecho eso a propósito. Pasemos a construir 14. Construir 14, de nuevo, sólo introducir un nuevo HoscilLator pero esta vez, para el eje X. Entonces, acabo de copiar el oscilador Y y lo he renombrado a propiedad H.X. Por supuesto, el valor relativo va a ser r1.x, que obviamente desde arriba, recupera ancho dividido por dos. Nuevamente, el centro de la pantalla. Nuevamente, el rango al igual que Y es negativo 50 y positivo 50 para la oscilación. La velocidad sigue siendo 0.4, la frecuencia sigue siendo ocho, y el paso actual sigue siendo i Así que ahora, cuando pruebo este boceto, de nuevo ahora, tengo cuatro osciladores todos trabajando en tándem. Ahora, aquí, notarás que debido a que los cuatro de estos osciladores están usando la misma velocidad, la misma frecuencia que realmente sí crea un patrón. Observe que va de la parte superior izquierda a la inferior derecha. Es hacer esta animación. Eso se debe a que el oscilador para X y el oscilador para Y tienen la misma velocidad y la misma frecuencia. Entonces, claro, van a caer en ritmo porque están usando los mismos números. Entonces, es en este punto que quiero hablar del ejemplo 15, porque el ejemplo 15 va a ser de interrumpir este ritmo. Entonces, si cerramos esto y pasamos al ejemplo 15, lo único que hay que mirar es cómo cambié algunos de los ajustes. Entonces, mira la rotación. La rotación va más grande ahora. Se va de 45 a 45. El velocidad es de 0.4, la frecuencia es de 10, pero el paso sigue siendo i Escala está haciendo de dos a ocho. Entonces, es diferente a lo que hizo la rotación, y agregué este i veces dos para que la escala esté sucediendo más errática en la oscilación que antes. Mira la oscilación Y, dije, “75 a 75 mientras que la X es de 50 a 50”. Pero mira cómo la velocidad es de 0.5 para la X, velocidad es de 0.5 para la Y. Pero bajo esta Y, dijo que la frecuencia es de cinco pero debajo de la X, dije que la frecuencia es de ocho y que el paso actual era i por dos. Entonces, al interrumpir todos los números, cuando realmente ejecutas este boceto, realidad no cae en ritmo. Te vas a poner cierta estática pero no está cayendo en esa parte superior izquierda, en la parte superior derecha. En realidad es serpenteando así, y puede bajar. Entonces, eso va a suceder interrumpiendo los números en cada uno de los osciladores. Entonces, ahora, cada oscilador verdaderamente está actuando independiente. Nuevamente, es increíble lo mucho que esto simula algo que se ve tridimensional cuando no lo es. Esto es bidimensional y solo estoy usando escala para engañar a tus ojos para que piensen que esta es una forma 3D. De acuerdo, vamos a explorar la siguiente serie de ejemplos. Entonces, voy a cerrar este video y vamos a pasar a los ejemplos 16 y 17. 34. Unidad 8, video 4: Está bien. Para este video, vamos a estar viendo los ejemplos 16 y 17, y 16 y 17 es cuando esto empieza a aludir al tipo de cosas con las que constantemente estoy retocando para encontrar resultados diferentes. Entonces, 16 es una continuación de los expedientes que acabamos de hacer en 11 y 15. Pero pasé algún tiempo ajustando algunas de las variables. Una es que estamos adjuntando 100 cosas en pantalla. Está bien. Entonces la longitud o la cantidad de cosas que creas obviamente va a tener un efecto directo a la oscilación. Entonces, agrega más y más cosas a lo que se adjunta en la pantalla. Eso obviamente va a cambiar lo que sucede con la oscilación. Entonces, en este caso, estoy agregando 100 cosas en pantalla aquí. Otra cosa que también es importante recordar es que el ancla va a jugar un papel enorme en la oscilación, sobre todo cuando se trata de rotación, porque veamos la línea 19. Dije, bueno, el ancla es de 50. Pero, de nuevo, es ese negativo 50, para que esté fuera de la obra de arte. Entonces, la oscilación ahora está sucediendo fuera de este punto de pivote. Entonces, la rotación ahora va de 180 negativo a 180 positivo. Tengo una velocidad de 1, una frecuencia de 4. Tengo una oscilación para escala que va del 25 por ciento su tamaño original al 100 por ciento su tamaño original con la velocidad de 1 y una frecuencia de 4, y el paso actual siendo I veces 3. Entonces va a haber más pulsos dentro de esa oscilación particular. Tengo un oscilador para Y que va un número mucho mayor que antes. Va negativo 150 a positivo 150, y para la X, también estoy haciendo negativo 150 y positivo 150. A pesar de que ambos usaron una velocidad de 0.5, notarás que la Y está usando una frecuencia de 2 y la X está usando una frecuencia de 1. Entonces, sólo cambiando las frecuencias en estos dos, significa, de nuevo, que van a caerse de repetición. Entonces, sigamos adelante y ejecutemos este boceto y veamos cómo han cambiado los resultados. Entonces, he hecho la báscula un poco más ajustada al solo pasar del 25 por ciento al 100 por ciento. Pero debido a que hice la oscilación Y y la oscilación X un número mucho mayor, como el negativo 150 y el positivo 150, el rango de movimiento es mucho mayor. Nuevamente, porque hemos cambiado el punto de anclaje para ser ese negativo 50, eso afecta directamente nuestra oscilación para rotación que va negativa 180 positivo 180. Es este tipo de experimentación o mutación de archivo lo que, ¿qué puedo cambiar a continuación para producir qué siguiente? Entonces, termino guardando estos archivos como tantas iteraciones solo tratando de descubrir este tipo de movimientos fantásticos. De nuevo, me encanta cómo se ve 3D aunque solo sea un truco de ojo. Está bien. Echemos un vistazo a Build 17 porque, como te imaginas, siempre tengo un bucle de vuelta a cosas que hemos hecho anteriormente. Entonces, claro, voy a presentar cada lienzo. Entonces, notarás que hay un lienzo H, ahí está nuestro C1, ahí está la adición de nuestro lienzo. Auto clear se ha movido al lienzo. Está usando un fundido de 2, y estamos agregando el lienzo al escenario, línea 25. Nuevamente, la obra de arte se está anexando a nuestro lienzo C1. Entonces, otro pequeño cambio que hice aquí es que hice un poco de relleno, e hice esto conseguir color. Entonces, se está consiguiendo color aleatorio fuera de esta alberca de color H. Pero estoy haciendo una semilla aquí. Así que lo hice yo veces 250 y solo tipo de crea este interesante banding. Entonces, aparte de eso, bueno, parece que volé mucho más el rango. Vamos a revisar aquí. La rotación sigue siendo de 180 a 180. La escala sigue siendo del 25 al 100. Pero sin embargo hice la amplia gama 300,300. Hice la gama X 300, 300 también. Entonces, adelante y ejecuta este archivo, y de nuevo, debes notar que empieza a hacer esta bonita franja de color haciendo una semilla dentro de esa llamada get color. Hace este tipo de grupos interesantes. Porque estoy usando lienzo H y un desvanecido, esta cosa se quema lentamente. Entonces, de nuevo, solo me encuentro constantemente haciendo mutaciones para ver qué diferentes tipos de patrones y animaciones obtengo. El juego que se puede apegar a este tipo de cosas es infinito. Me encuentro constantemente tratando de descubrir qué tipos de estética puedo sacar de algo tan simple como apilando osciladores. Está bien. Voy a cerrar este video. El siguiente, sólo vamos a estar viendo el ejemplo 18. 35. Unidad 8, video 5: Está bien. Este es el ejemplo 18, y volví a pensar el ejemplo 18, sólo trataría de mantenerme realmente corto y dulce. Se trata de algunas mutaciones inesperadas más. Entonces, hasta este punto, habíamos estado usando HRect en esta oscilación. Yo sólo quería mostrar lo que pasaría cuando empieces a hacer alguna varianza. Entonces, echemos un vistazo a lo que he hecho con el ejemplo 18. Lo primero que notarás es que HCanvas sigue aquí, eso se traslada de antes. Te darás cuenta de que el lienzo está haciendo un AutoClear (falso), pero también te das cuenta de que no quiero hacer ningún desvanecimiento, quiero que deje rastros atrás y que los guarde indefinidamente. Ahora, sigamos adelante y veamos nuestra creación de un d dibujable, en la línea 16 a 25. Entonces, en este caso, voy a hacer un HPath. HPath nos permite hacer todo tipo de cosas diferentes como; triángulos, y polígonos, y estrellas, y en este caso, voy a usar HPath para definir una forma de estrella. Entonces, si miras aquí en la línea 16, tenemos HPath d, d siendo un atajo para dibujable. Nuevamente, estamos especificando una estrella, es una estrella de cinco puntas con algunos argumentos de 0.4 y una rotación de 90 negativo. Nuevamente, el tamaño de las estrellas es de 200. En el archivo anterior, estábamos obteniendo colores al azar pero para relleno, esta vez voy a conseguir aleatoriamente colores pero para trazo. Entonces, aquí estoy configurando nuevamente el color del trazo usando esta semilla aleatoria, i veces 250, solo para conseguir algunos patrones interesantes. El relleno, en realidad voy a hacer negro y también pongo el fondo a negro en este boceto también. El Anchorat es H.CENTER y nuevamente su ubicación inicial es anchura dividida por dos, altura dividida por dos. Agregando el dibujable a nuestro amigo HCanvas aquí, y aquí están las oscilaciones. Entonces, de nuevo, estoy apilando osciladores como el archivo anterior. Entonces, veamos qué tenemos aquí, tenemos una oscilación para rotación, pasando de 180 negativo a 180 positivo, con una velocidad de uno y una frecuencia de 0.5. Entonces, parece que esa rotación se ralentizó un poco con una frecuencia de 0.5. Tenemos nuestra oscilación de escala, y parece que va a estar haciendo una velocidad de dos y una frecuencia de cuatro para 25 por ciento su tamaño original y 100 por ciento su tamaño original. También tenemos algunos osciladores X e Y aquí y parece que ambos van de 500 negativo a 500 positivo, pero la Y tiene una velocidad de uno y una frecuencia de 0.7, mientras que la X tiene una velocidad de dos y una frecuencia de 0.5. Entonces, sigamos adelante y ejecutemos este boceto para ver qué pasa. Entonces, es realmente interesante la textura de tela que esto termina creando, porque estoy usando una estrella como forma inicial, y porque esa estrella tiene un cierto patrón para ella. Obviamente como oscila y estoy dejando el residuo de que corre a través de la pantalla, realmente empieza a crear estos hermosos, interesantes patrones de tela. Entonces, de nuevo podemos emparejar esto con formas SVG como dibujar Illustrator o en este caso usar H.path. Entonces, de nuevo llego a mantener este video sencillo. De nuevo, puedo ver esto por días porque solo soy ese tipo de tipo. Entonces, voy a cerrar este ejemplo 18, y voy a pasar a un video que sólo funciona con el ejemplo 19. 36. Unidad 8, video 6: Está bien. Aquí estamos en el ejemplo 19. Ejemplo 19, acercarnos seriamente a lo que hicimos en la primera clase que estamos usando alberca H-drawable, estamos usando un diseño de cuadrícula. Genial. Entonces, muéstrame cómo oscilar cosas en base a un diseño de cuadrícula. Entonces, solo desglosemos el diseño aquí. Tenemos un HDrawablePool. Parece que en la línea ocho estoy adjuntando 49 cosas. Parece que tengo aquí un colorista que va a escoger algunos colores aleatorios, y luego por supuesto, tengo un diseño de cuadrícula. Ese diseño de cuadrícula está consiguiendo un inicio x, un inicio y, un espaciado, y algunas columnas, y las columnas son siete porque voy a hacer una cuadrícula siete por siete de activos, de ahí 49 objetos en el hDrawablePool. Sigamos adelante y miremos el mismo fondo aquí, que son los sorteos, sólo haciendo el h.Drawstage. Sí, estamos haciendo solicitud todo, dame el diseño de cuadrícula por favor, al instante todo a la vez. Entonces si te desplazas hasta arriba aquí, puedes ver que estoy usando H-path para aleatorizar un montón de estrellas. Entonces, hice algunas cosas como, en la línea 27, quiero aleatorizar algunos aspectos de las estrellas. Entonces, en la línea 27 dije, bueno vamos al azar los bordes, dame un número entre cinco y 10, y para una profundidad aleatoria, dame un número entre 0.25 y 0.75. Entonces, entonces creo este H-path y ya verás aquí, puse la estrella y la proporcioné con los bordes aleatorios y la profundidad aleatoria. Cada una de estas estrellas va a ser un tamaño de 64, no va a haber trazo, está anclada en el centro, y también va a conseguir una rotación aleatoria. Entonces, notarás que la rotación es aleatoria de 360 grados. Ahora bien, podrías notar en mi archivo, he comentado los osciladores y eso es porque, solo quiero ejecutar este boceto para que podamos ver visualmente lo que se está dibujando en pantalla. Genial. A siete por siete cuadrícula de estrellas aleatorias, y de nuevo en este caso, las estrellas, me fue mucho más fácil crearlas como H-paths, pero no hay razón para que estos no pudieran ser activos SVG que hiciste en Illustrator, si quisieras hacer un manojo de estrellas como esta. Pero como quería aleatorizar las estrellas, era mucho más fácil para mí hacerlo con código que hacerlo en Illustrator. Entonces, grat. Ahí está nuestra grilla. Ahora, quiero oscilar esa cuadrícula, pero quiero oscilar esa fantasía de cuadrícula. Entonces, veamos un pequeño ajuste aquí. En realidad agregué 3D a este archivo. Entonces, créanlo o no, ejemplo 19 va a usar algunas oscilaciones 3D. Entonces, aviso en la línea cuatro, tengo que especificar el procesamiento que quiero usar el renderizador P3D. Aviso en la línea cinco, he agregado el uso 3D true. De nuevo, porque quiero hacer algunas oscilaciones tridimensionales. Ahora, estas estrellas son planas. Correcto, y solo están pasando el rato así, directo a nosotros. Está bien. Si te desplazas hacia abajo a lo que he hecho por oscilación aquí, otra vez en mi archivo está comentado, porque quiero mostrarte estos cada uno a la vez. Las tres de estas oscilaciones se ocupan de transformaciones 3D. Entonces, solo hagamos el de abajo que probablemente tenga más sentido, que está oscilando el eje z. Entonces, de nuevo el eje z va a venir hacia nosotros y lejos de nosotros, y te darás cuenta de que es un rango muy pequeño. Sólo va negativo 50 y positivo 50. El velocidad es de dos, la frecuencia es una, pero tambaleo el paso actual haciendo el índice actual por ocho. Ahora, con esa oscilación encendida, voy a ejecutar este boceto aquí, y deberían ver que estamos oscilando las coordenadas z de las estrellas. Entonces, esto es de lo que estaba hablando antes donde estaba simulando 3D usando escala. Aquí, no estoy usando escala en absoluto, realidad estoy moviendo esto en el espacio tridimensional. Pero nunca lo sabrías, porque z se ve muy similar a la escala. Correcto. Simplemente viene hacia ti y lejos de ti. Entonces, veamos algunas de estas otras oscilaciones que tengo aquí. Para mirarlos de forma independiente, sólo voy a comentar esto otra vez. Descomentemos este oscilador que es rotación y, y notarás que es 45 en lo negativo, 45 en lo positivo y velocidad, frecuencia, y corrientes y así sucesivamente. Eso nos va a dar este movimiento. Entonces, voy a estar girando los objetos planos de esta manera. Entonces, mira lo que pasa cuando pruebo este boceto. Ahora estoy aplicando una oscilación a este pivote. Correcto. Entonces, a pesar de que sigue siendo un objeto bidimensional plano, realidad puedo pivotar ese objeto bidimensional en coordenadas tridimensionales como esta. Está bien. Entonces, obtengo un lindo movimiento como este. De nuevo, realmente puedes meterte con esto si haces negativo 180 a positivo 180. Eso es bastante hilarante. Correcto. Porque va a dar la vuelta a la estrella por completo. Entonces, obtienes estos bonitos patrones centelleantes, bastante divertidos. Está bien. Pongamos eso de nuevo a los números que fue, que es negativo 45 y positivo 45. Yo quiero comentar ese oscilador, y voy a descomentar este oscilador que está usando rotación z. Entonces, la primera fue la rotación y, ésta es la rotación z, y yo también lo he dicho al negativo 45 positivo, pero una velocidad diferente, pero una frecuencia similar a la rotación. Entonces, sigamos adelante y miremos esta oscilación, y notemos que me está dando este pivote, muy similar a las rotaciones ordinarias. Entonces, tienes y que es así, tienes x que es así, y z dame ese pivote de esta manera. Ahora, la magia sucede cuando enciendes todos estos. Cuando los enciendes, vas a conseguir magia oscura, rotación y, rotación z, y oscilación en el eje z. Está bien. Entonces, ahora tengo mi grilla, pero ahora estoy apilar las tres de estas oscilaciones para darme este movimiento. Entonces, aquí hay un bonito pequeño retoque, al usar la oscilación en un espacio 3D que es solo súper plátanos. Está bien. Cerremos este expediente, y vamos a pasar al siguiente. Simplemente nos vamos a centrar en el ejemplo 20, haciendo buenos progresos. 37. Unidad 8, video 7: Este video trata con el ejemplo 20. Y tú dices: “Josh Davis, ¿por qué sigues hablando de SVG? Muéstranos un ejemplo que utiliza SVG”. Entonces, el ejemplo 20 hace justamente eso -de hecho, en realidad saqué este archivo de una clase que hicimos en la primera clase anterior- en el sentido de que tengo un diseño de cuadrícula y estoy aleatorizando algunos activos SVG. Entonces, echemos un vistazo a la construcción 20. El gran cambio aquí, obviamente, es que estoy agregando un montón de formas SVG. Comenté uno y seis solo por el carajo de ello. Este solo usa SVG2, SVG3, SVG4, y SVG5. Entonces, si miras el HDrawablePool, vamos a adjuntar 144 SVG. Tenemos un diseño aquí y dentro del OnCreate, está adjuntando nuestro SVG, es EnableStyle false, está matando el trazo en el SVG, está aplicando una rotación aleatoria de 90 grados y también le pido que agarren algo aleatorio colores de nuestro HColorPool enumerados anteriormente. Ahora, echa un vistazo a esto. Aquí, tengo dos HoscilLators apilados, y si en realidad los comento y solo ejecuto este archivo, solo veamos qué conseguimos aquí. Podrían haber recordado esto desde la primera clase donde solo estoy creando un patrón al aleatorizar estos SVG. Ahora mismo notarás que en la línea 36, tengo el tamaño comentado porque si realmente pongo el tamaño ahí dentro donde estoy aleatorizando 50, 100, 150, 200 para talla, si realmente ejecuto esto, se va para darnos este tipo de, sí, eso es genial, se ve impresionante. Enfriar. Ahora, quiero oscilar esto de alguna manera. Pero, solo por el carajo, voy a comentar esa posición del tamaño para que acabemos de volver a esta grilla aquí y solo veamos qué pasa cuando oscilamos esta cuadrícula. Entonces, sigamos adelante y hagamos esta primera oscilación. Por supuesto, está apuntando a nuestro dibujable, está aplicando rotación, va de 180 negativo a 180 positivo. Mira la velocidad, 0.05, eso es realmente bonito y lento, y la frecuencia es de cinco, y observa que el índice de pasos actual solo está pisando incrementos de uno. Entonces, mira lo que pasa cuando pruebo el boceto aquí, te darás cuenta de que, nuevo, estamos corriendo lentamente esa oscilación de 180 a 180 a través de la cuadrícula. Entonces, de nuevo, presenta aquí un patrón totalmente nuevo con sólo aplicar esta oscilación. Entonces, eso es divertido. Ahora, permítanme descomentar esta oscilación por escala. Entonces, mira lo que hice para escala aquí. Yo dije: “De acuerdo quiero que oscile escala pero quiero que el rango pase del 100 por ciento al 500 por ciento”. Entonces, eso se va a poner bastante grande. Nuevamente, la velocidad es de 0.05, eso es bonito y lento. Pero la frecuencia es un poco más abrupta en el sentido de que estamos usando una frecuencia de siete y el paso actual está usando el índice actual por tres. Adelante y ejecutemos este archivo. Nuevamente, ahora estamos obteniendo una oscilación de escala en conjunto con una oscilación de rotación. Esto son solo triángulos, literalmente es solo usando triángulos, SVG que hice dentro de Illustrator pero, de nuevo, este tipo de mezcla comienza a producir estos resultados realmente elegantes. Debido a que la escala se basa en el tamaño original de las obras de arte, notarás que, de nuevo, la obra aquí es de 50 por 50 por lo que la escala sólo se está aplicando a cada uno de esos activos que son de 50 por 50. Es cuando descomentas el ajuste de tamaño que las cosas se van a poner un poco más aleatorias porque ahora estás aleatorizando el tamaño de los activos en esa cuadrícula. Esto es divertido porque conseguirás estos momentos de formas más pequeñas pero luego obtienes estas lindas formas grandes, barredoras porque ese es el elemento de aleatorio absoluto en esta pieza, eso es lo único en el sistema que es realmente asombroso en el sentido de que si cierro esto y lo vuelvo a ejecutar, voy a conseguir algo diferente. Si tienes la línea 36 comentada, vas a empezar a ver una especie de estética donde como al implementar esa aleatorización de tamaño, obtendré algo diferente prácticamente cada vez. Entonces, ejemplo 20 solo mostrando lo que sucede cuando empezamos a oscilar algunos de nuestros archivos SVG. Voy a cerrar éste. En el siguiente video vamos a estar trabajando con el ejemplo 21 y el ejemplo 22. Nos vemos en el siguiente video. 38. Unidad 8, video 8: Se trata de los ejemplos 21 y 22. Espero que vayas a disfrutar de estos dos próximos porque realmente me encanta ahora la adición de experimentar con objetos 3D. Entonces, por supuesto, el ejemplo 21 y 22 van a estar usando a nuestro amigo HBox. Entonces, antes de haber estado experimentando con un montón de cosas diferentes como HRect, y HShape y SVG y HPath. Entonces, pensé que me tomaría el tiempo para mostrar usando dibujables 3D. Entonces, sigamos adelante y disecemos, construyamos 21 aquí. Entonces, arriba en la parte superior, he dicho que el tamaño de caja es de 150 y verás abajo cuando llamemos a esta variable, este tamaño de caja se va a usar para el ancho, para la altura y la profundidad. Entonces, el tamaño de la caja es de 150. Por supuesto, tengo que hacer ajustes a la línea cinco y seis para usar P3D y usar 3D true. Vamos a dibujar 100 artículos. Vamos a utilizar HBox como el dibujable. Tenemos un layout, es un layout de cuadrícula, va a comenzar en 125 negativo en la x, 125 negativo en la Y, el espaciado va a ser de 100 píxeles entre cada caja, y las columnas son de 10. Y así, está haciendo la cuadrícula 10 por 10. Si vas adelante y miras el OnCreate, aquí está estamos creando nuestro HBox y te darás cuenta de que acabo de hacer un pequeño atajo, dije que la profundidad es tamaño de caja, el ancho es tamaño de caja, y la altura es tamaño de caja. Lo puse de esta manera porque si no quisieras usar el tamaño de caja variable arriba, podrías poner tres números separados aquí para cambiar realmente el tamaño del rectángulo, si no quisieras usar un cubo perfecto. No va a haber derrame cerebral en estas cajas. un vistazo, puse la profundidad Z inicial de las casillas en 500 negativo. Entonces, estoy construyendo esta gran cuadrícula pero luego la estoy dejando caer vuelta en el espacio, negativo 500 píxeles. Ahora, voy a saltar por encima de los osciladores, voy a bajar hasta el fondo y notar que estoy creando unas luces puntuales. Entonces, estoy instalando unas luces en la escena y puedes ver aquí tengo tres colores; tengo un naranja, un azulado y un amarillo. Nuevamente como refresco, una luz puntual, los tres primeros argumentos quieren saber rojo, verde, azul, y luego las últimas tres posiciones son eje X, eje Y, y eje Z. Entonces, aquí es donde estoy poniendo esa luz en el espacio. Ahora bien, si subo a los osciladores y en realidad los comento y si ejecuto este boceto, deberías ver que estoy construyendo una cuadrícula de cajas. No sólo es una cuadrícula de cajas, sino que también se obtiene una representación de las luces puntuales. Se puede ver que aquí está nuestra luz puntual naranja a 300 negativo, aquí está nuestro punto azul encienden un azulado, a 300 negativo, y luego hay un amarillo sentado en la parte superior en negativo, bueno en realidad está por debajo, no está arriba, en negativo 400, eso es amarillo. Ahora, en este caso, miren los osciladores aquí, para la oscilación todo lo que estoy haciendo es oscilando rotación x, rotación y, y rotación z son las únicas cosas que estoy girando aquí. Entonces, si piensas en esta caja, debería empezar a hacer este movimiento porque estoy oscilando la caja en tres ejes diferentes. Adelante y prueba este boceto y es simplemente hermoso. Entonces, estoy construyendo esta cuadrícula de cajas y estoy usando oscilación de rotación X, Y, y Z para crear este patrón realmente hermoso con estos cubos 3D. De nuevo puedes ir a las líneas 29, 30 y 31 y en realidad cambiar la profundidad, el ancho, la altura, a cualquier número que quieras, y obtendrás algunos resultados bastante sorprendentes. Déjame probar aquí una prueba, si dije que la profundidad de las cajas, tamaño de caja por tres, veamos qué hace eso. ¿ Quién sabe? Está bien. Esperemos que puedas ver la profundidad de la tasa de caja en ese punto, sí. Entonces, puedes empezar a ajustar estos números y de nuevo vas a ver algo diferente aquí en esta animación. Genial. Entonces, ese es el ejemplo 21, pasemos al ejemplo 22 y éste fue solo yo tenía esta corazonada de que se iba a comportar de cierta manera pero no estaba del todo seguro. Estaba pensando en la película original Tron y el personaje en Tron tenía que creo que se llamaba bit or byte o RAM. No puedo recordar, hace tanto tiempo que vi al Tron original, pero tenía esta forma que sólo decía sí o no. Pensé, wow me pregunto si podría tomar este mismo sistema y realmente conseguir ese efecto? En realidad se puede. Entonces, si avanzas a construir 22, aquí está realmente el único ajuste que es, dije que el diseño debería comenzar por ancho dividido por dos, altura dividida por dos, pero el espaciado era cero y cero. Entonces, si nos fijamos en HDrawablePool, realidad estoy haciendo 50 cajas todas en la misma ubicación, que es el centro de la pantalla. Entonces, estoy adjuntando 50 cajas todas a ancho dividido por dos, altura dividida por dos y de nuevo parece que el tamaño de caja aquí es de 500. Tengo una rotación X, una rotación Y, una rotación Z y luego añadí un cuarto oscilador para escala. Entonces, voy a estar con las 50 de estas cajas, no sólo voy a estar rotándolas todas encima de la otra, también voy a estar encogiéndolas y expandiéndolas. Otra vez si pruebas este boceto, esto fue como una corazonada de que esto iba a ser de aspecto genial pero no tenía ni idea hasta que realmente lo probé. Entonces otra vez, otra mutación donde sólo estoy tomando un montón de cajas y apilándolas todas encima de la otra sobre la anchura dividida por dos, altura dividida por dos, y otra vez, ya ves me dan estos patrones realmente hermosos dentro de este sistema. Este video cierra los ejemplos 21 y 22. Vamos a pasar a la última de esta sección que es el ejemplo 23, que está usando una forma que hice en ilustrador y solo un pequeño truco detrás de eso. Entonces, nos vemos en el siguiente video. 39. Unidad 8, video 9: Nosotros lo logramos. Llegamos al último archivo en HoscilLator, pero de ninguna manera seguiré fechando constantemente cada oscilador porque, nuevo, me podría sorprender continuamente. Este es el ejemplo 23. El ejemplo 23 me hizo pensar en lo que había hecho en 3D para cada caja era algunas cosas que podía hacer, que podía probar. Entonces, esto iba a usar un SVG, y si en realidad entras a la carpeta Data y miras al SVG, eso es todo. Es un anillo. Entonces, hice esta obra de arte en Illustrator, hice este anillo, pero lo que realmente me interesaba es noquear el centro. Entonces, literalmente es como un anillo y la parte central es en realidad transparente, está noqueada. Yo sólo pensé, me pregunto, basado en ese último archivo, si pongo un montón de anillos uno encima del otro y que si empezara a oscilar esos anillos, sería capaz de ver a través este espacio central y poder ver algunos de los otros anillos debajo de ellos? La respuesta es que es increíble. Entonces, echemos un vistazo a Build 23. Lo primero que quiero señalar es que hice ese truco como lo hicimos antes donde tomamos cada rectángulo y tuvimos un tamaño de inicio y luego tuvimos una serie de pasos que bajaron, hice lo mismo aquí con el anillo. Entonces, te darás cuenta aquí arriba en la parte superior, tengo dos variables, tengo una flauta de una escala de anillo 600 y un entero de anillo pasos cinco. De acuerdo, claro, tengo P3D como renderizador y uso 3D en mi configuración de bombo. Voy a adjuntar 153 anillos, y de nuevo, aquí estoy usando HShape y voy a conseguir ese ring.svg, y al igual que el último archivo, el diseño es ancho dividido por dos, altura dividida por dos, sin espaciado. Entonces, apilar todos los 150 anillos uno encima del otro. Pero como lo hice con ese archivo anterior, echa un vistazo con el tamaño. Dije que el tamaño es RingScale. Entonces, sabemos que el primer anillo que se crea va a ser 600 por 600 y de nuevo es aquí en la línea 42 que hago escala de anillo igual a escala anillo menos pasos de anillo y así la escala de anillo comienza a disminuir de tamaño. Ahora, voy a seguir adelante y comentar los osciladores y sólo veamos lo que está pasando aquí. Ya he dicho que hShape dibujable aquí, d. voy a habilitar el estilo, no va a haber trazo, y al azar estoy agarrando un relleno de nuestro HColorPool, y de nuevo, estoy haciendo eso i veces 250, que es una semilla aleatoria. Entonces, se va a crear este interesante banding. El tamaño es el RingScale, el ancla es el centro. Entonces, eso es algo importante, y el eje z para este es sólo cero. Entonces, voy a seguir adelante y probar el boceto aquí y debería ver un montón de anillos declinando tamaño a medida que bajan. Pero de nuevo, lo interesante es que estos no son un montón de círculos, son un montón de anillos con el medio noqueado. Entonces, si empiezo a oscilar estos, ¿qué tipo de resultados voy a obtener? Entonces, sigamos adelante y veamos algunos de estos osciladores. Por supuesto que voy a descomentar primero la de abajo porque estoy haciendo una oscilación entre 50 por ciento y 100 por ciento la velocidad es de 0.3, la frecuencia es de cinco. Sigamos adelante y veamos qué hace, y se puede ver que es sólo una agradable oscilación lenta de la escala. Ahora, sólo tengo que hacer las tres porque por qué no golpearte con una tonelada de ladrillos. Nuevamente, rotación x, rotación y, rotación z, y el rango es negativo de 360 a 360 positivo para estos. Si sigo adelante y pruebo esto, de nuevo, lo que es fascinante de esto es mediante el uso de SVG y haciendo un anillo al tener el medio noqueado, puedo ver a través de ese knockout del ring y empieza a crear estos patrones interesantes. Entonces, puedes imaginar que estoy realmente ansioso por tomar este ejemplo en particular aquí mismo y proporcionarle un montón de SVG diferentes para ver qué tipo de diferentes patrones visuales y resultados obtengo porque eso es realmente divertido. De acuerdo, esto cierra la sección de Hoscillator. Ahora vamos a pasar a Combos. Combos realmente te va a guiar a través de un proceso. Te va a recorrer con una idea que tuve, la ejecución de esa idea y viendo cómo la muté lentamente. También verás que- son 20 ejemplos, por lo que va a ser igual de robusto como esta sección. Entonces, nos vemos en la siguiente sección de Combos. 40. Introducción a la combinación de comportamientos: Ahora, antes de entrar en la salida real quería tomar una sección donde hablo de Combinar Comportamientos. Ahora, aquí es donde se empieza a crear súper animaciones. Mientras un comportamiento de animación no luche por la misma propiedad, dos comportamientos pueden trabajar juntos para hacer un comportamiento completamente nuevo. Entonces, por ejemplo, puedo usar la interween H para mover algo alrededor en pantalla, puedo usar el oscilador H para animar realmente la escala de ese objeto hacia arriba y hacia abajo. Entonces, mientras la interween H esté tratando con la ubicación y el oscilador H esté lidiando con la escala, esos dos comportamientos en realidad pueden juntarse para crear un nuevo super comportamiento. Entonces pensé que tomaría la sección para trabajar algunos de mis combos favoritos de mezclar comportamientos juntos otra vez siempre y cuando no intenten pelear por la misma propiedad. Podemos usar muchas de estas conductas que hemos aprendido en clase para crear estas nuevas súper animaciones locas. 41. Unidad 9, video 1: De acuerdo, entonces estamos en esta última sección antes de que realmente empecemos a entrar en salida. Este es hardcore. Aquí va a haber muchos videos y vamos a trabajar a través de todos estos 20 pasos pero hay algunas veces en las que voy y doy charlas en conferencias de diseño realmente trato de mostrar proceso. Esto es lo último, esto realmente está empezando con una idea y dejando que esa idea se despliegue por sí misma. Entonces, en lugar de que estos sean archivos separados, ejemplo 1 todo el camino hasta el ejemplo 20, esto es una continuación de una sola idea. Entonces otra vez, hazte una taza de café, ponte unas zapatillas acogedoras porque realmente vamos a digerir esto. Ahora sigamos adelante y empecemos con el ejemplo 1 y todo esto va a empezar con un cubo. Las cosas que vamos a cubrir dentro de este ejemplo en particular, eventualmente me voy a doblar en Hype, específicamente en HBox. Pero ahora mismo quería explorar algunas cosas que nunca había explorado realmente todavía y que estaba usando forma de inicio y vértice. Lo que quiero hacer es simplemente diseccionar realmente los dos primeros ejemplos en este momento. Echemos un vistazo a la línea uno. Voy a estar haciendo una caja y esa caja va a ser un ancho de 100, una altura de 100, y una profundidad de 100. Y entonces tengo tres funciones aquí en mi boceto. Tengo nuestra configuración, tengo nuestro sorteo, y tengo una función llamada build cube. Ahora solo veamos primero la configuración. El primero es muy mínimo. Sólo digo que el tamaño es 640 por 640. Se va a seguir adelante y usar el renderizador P3D y a continuación voy a disparar hypes constructor. El fondo va a ser 20-20-20 y por supuesto queremos despertar todas las posibilidades 3D de bombo por lo que hay que decir use 3D true. Ahora sigamos adelante y miremos el sorteo. En el sorteo, voy a decir: “Está bien, sigamos adelante y hagamos h.Drawstage y quiero construir este cubo”. Ahora te darás cuenta en las líneas 12 y 15 estoy usando push matrix y pop matrix, que de nuevo con push matrix y pop matrix lo que sea que haya entre esas dos matrices llama. Va a hacer algunas cosas y luego volver a encajar a su configuración original. Entonces, solo veamos lo que estamos haciendo y es simplemente realmente simple. El primero es que quiero traducir al centro del escenario por lo que te darás cuenta digo traducir ancho dividido por dos, altura dividida por dos y la Z que voy a mantener en cero. Por lo que ahora ha movido la matriz al centro de la pantalla. Ya verás que voy a disparar la función de cubo de construcción y cuando dispare cubo de construcción, nota que no ha pasado ningún argumento. Aquí está la función de construir cubo y si me desplazo aquí abajo está toda la función aquí. Te darás cuenta que estoy haciendo una forma de inicio en la línea 19 al final de hacer una forma de extremo. Ahora lo que estoy haciendo es construir un cubo manualmente poniendo todos los diferentes vértices para definir cada una de las caras. Entonces podrías notar aquí que si mirás- tengo la cara frontal así que la parte delantera del cubo, tengo la parte trasera del cubo, tengo la parte inferior del cubo, tengo la parte superior del cubo, tengo la lado derecho del cubo, y el lado izquierdo del cubo. Por lo que cada una de estas cuatro llamadas de vértices es para cada una de las caras que conforman este cubo en particular que estamos creando. Ahora podrías estar diciendo: “Bueno, Josh, ¿por qué no estás usando sólo HBox? ¿ Por qué lo haces así?” Bueno, lo estoy haciendo de esta manera porque HBox aún no soporta la capacidad de mapear texturas a este cubo. Y esa es realmente la idea que desató todo esto fue que quería poder experimentar con la idea de mapear texturas a una caja y ni siquiera había definido realmente qué diablos era una textura. Y verás a medida que avanzamos aquí eso va a asumir una respuesta fascinante. Entonces echemos un vistazo a cada vértice aquí. Te darás cuenta de que estoy llamando al tamaño de caja para los tres primeros atributos porque si realmente buscas una referencia de procesamiento para vértice, si realmente estuvieras pasando a cinco argumentos estás haciendo la coordenada x, la coordenada y, la coordenada z y luego los dos últimos números aquí son soportes para el- el primero es U y el segundo es V y esos representan un flotador. El coordenada horizontal para el mapeo de texturas es este cuarto argumento y el quinto argumento es la coordenada vertical flotante para el mapeo de texturas. Por lo que estos dos de aquí están tratando con coordenadas horizontales y verticales para el mapeo de texturas y como actualmente existe HBox no soporta el mapeo de texturas. Será en el futuro pero ahora mismo de nuevo estoy pensando en una idea y quiero explorarla. Entonces, ¿qué pasa cuando ejecutamos este boceto en particular? Realmente no hay ninguna animación sucediendo en absoluto por lo que esto debería ser interesante. Adelante y corro el boceto aquí y es 640 por 640 y dibuja un cubo pero nunca sabrías que es un cubo porque ese cubo está perfectamente en el centro y de nuevo el ancho, la altura, y la profundidad son todos 100 por 100 para que puedas en realidad ver la tridimensionalidad en este cubo en particular. Entonces, yo estaba como bien bien necesito abordar esto. Voy a tomar el ejemplo 1, y genial, voy a guardarlo como ejemplo 2. Ahora vamos al ejemplo 2 y lo que quería hacer un ejemplo 2 fue usar HoscilLator. Toda esta sección se trata de combos. Vamos a empezar a comboizar todas estas cosas diferentes para llegar a algún resultado final. Entonces, pensé bien bien voy a añadir un oscilador a este cubo pero decidí que lo iba a hacer de una manera que sería única cual es el oscilador no está dentro de un bucle de cuatro, no está dentro de una piscina dibujable. Entonces, ¿cómo creo instancias de oscilador para luego adjuntarlas a este cubo que he creado en pantalla? Entonces, veamos el ejemplo dos. Ahora tengo arriba en la parte superior añadí un oscilador para RX, RY, y RZ que sería rotación X, rotación Y, y rotación Z. Y así mi objetivo es tomar ese cubo y tenerlo girando así usando HoscilLator. Ahora, sigamos adelante y miremos las líneas 10 a 26. Entonces, dentro de mi configuración dije, hey quiero configurar estos osciladores así que digo, “RX es un nuevo HoscilLator”. Va a pasar de 360 negativo a 360 positivo, 0.1 para la velocidad, cinco para la frecuencia. Ahora acabo de copiar eso dos veces más para poder configurar mi oscilador Y de rotación, y mi oscilador Z de rotación. Ahora una cosa que podrías notar es wow No he especificado propiedad y no he especificado objetivo así que este es un oscilador súper genérico que solo está sentado en configuración. Y cuando se dispara h.drawstage, cada oscilador sólo va a estar escupiendo algunos números de oscilación completamente ausentes de a quién se les va a aplicar o de la propiedad a la que se van a fijar. Por lo que estos son solo osciladores totalmente genéricos. No tienen idea de quién y no tienen idea en qué propiedad se van a poner. Entonces, veamos ahora nuestro cubo de construcción. Nuestro cubo de compilación no ha cambiado así que solo quiero que sepas que todo ese código abajo, esa caja, nada se ha alterado en este código. Entonces el único cambio está aquí dentro del sorteo. Lo que quiero hacer es que quiero sacar los siguientes valores brutos de ese RX, ese RY, y RZ. Entonces dentro de sorteo digo, hey RX HoscilLator dame tu próximo valor crudo porque entiendo que estás oscilando algunos números completamente ausentes de quién o a qué propiedad pero eso está bien solo dame esos crudos números. Entonces puedo decir rx.nextdraw, ry.nextdraw, y rz.nextdraw. Ahora sigamos adelante y miremos aquí nuestra matriz de empuje y nuestra matriz pop. El traductor sigue siendo absolutamente el mismo. Bueno, estoy traduciendo al centro del ancho del lienzo dividido por dos, altura dividida por dos. Se puede ver aquí en la línea 43 Todavía estoy usando cubo construido pero ahora estoy usando procesamiento rotar X, rotar Y, y girar Z y porque la rotación y el procesamiento quiere conocer radianes, llamo a la función radianes y dentro de la función radianes Estoy diciendo hey ve a obtener el valor actual de RX, ve a obtener el valor actual de RY, y ve a obtener el valor actual de RZ. Ahora pasa algo emocionante. Voy a seguir adelante y probar mi boceto y deberías ver que ese cubo está en el centro de la pantalla. No he especificado ningún derrame cerebral. No he especificado ningún relleno. Por lo que solo hace trazo negro por defecto y relleno blanco por defecto. Pero ahora tengo tres osciladores que son valores oscilantes sin estar apegados a un objetivo o a una propiedad. Entonces, solo estoy obteniendo los números brutos de estas oscilaciones y solo aplicándolos para rotar X, rotar Y, y girar Z. Genial. Ahora me estoy metiendo en algún lugar interesante. Ahora, la razón por la que he hecho este ejercicio es para pasar al ejemplo 3 y conseguir una textura mapeada a este cubo. Entonces, voy a seguir adelante y cerrar este video. En el siguiente video, vamos a retomar mirando el ejemplo 3. 42. Unidad 9, video 2: Ejemplo tres. Este video sólo va a mostrar este ejemplo. Es el inicio de algo hermoso. Adelante y veamos el ejemplo tres, y notarás que dentro de la carpeta de datos, hay algunos JPEG. Entonces, había elaborado algunas obras de arte dentro de Illustrator. Esto es de sólo 200 píxeles por 200 píxeles. He sacado estos de Illustrator a JPEG. Entonces, si miras dentro de la carpeta Data, notarás que hay cinco JPEG que solo tienen unas líneas de 45 grados en ellas y la textura cinco tiene un tablero de ajedrez, ¿de acuerdo? Entonces, quiero mirar mapeando una textura a este cubo. Entonces, sigamos adelante y veamos lo que se agrega aquí en el ejemplo tres. Echemos un vistazo a la línea cuatro. Ahora, estoy leyendo la documentación de procesamiento, y la documentación dice que se puede usar una PImage como textura. Entonces, pensé: “Está bien, déjame revisar esto”. Entonces, arriba en la parte superior tecleamos pImage, y luego acabo de hacer “tex” para la textura. En la línea 11 dije: “Está bien, T-E-X, tex es igual a la imagen de carga y luego ve a buscar “tex1.jpg”. Otra cosa que notarás sobre el uso texturas en objetos 3D es que necesitas establecer un modo de textura. En este caso, utilicé el modo de textura normal. Entonces, en la línea 12, agrego el modo de textura normal. Ahora, nuestros osciladores siguen siendo los mismos. Nuestro sorteo sigue siendo el mismo. Entonces, nada ha cambiado dentro de nuestro sorteo aquí. Seguimos aplicando oscilación para rotar X, rotar Y, y girar Z. La última adición aquí es establecer algunas cosas en el cubo. Entonces, lo primero es que, quería establecer un peso de trazo en un trazo. Entonces, te darás cuenta aquí en el cubo, en cada uno de los vértices que se crean, digo que el peso del trazo es de cuatro y que el color es negro, cero, cero, cero, cero, cero, cero. Entonces, dentro de la forma de inicio y forma final, agrego textura y luego señalo a tex que configuramos arriba. Ahora, es en este punto que si realmente guardas y ejecutas este boceto, notarás que está usando tex1.jpg como textura en cada una de las superficies del vértice y me acabo de enloquecer. Yo sólo pensé: “Wow, esto ha abierto toda una idea de posibilidades y quiero tratar de mutar este archivo y ver, ¿qué puedo hacer con este sistema? Entonces, por ejemplo, si subía aquí y cambiara esto a tex5, ese sería el patrón de tablero de ajedrez. De nuevo, si ejecuto este boceto, verás que está adjuntando el JPEG tablero de ajedrez, y lo está mapeando perfectamente a la superficie. Es increíble. Ahora, aquí dentro de BuildCube, ¿verdad? Podría probar algunas cosas. Podría comentar esto y solo podría decir, “NoStroke”, y si dijera “NoStroke”, entonces no vas a conseguir esa línea negra, solo estás consiguiendo la textura pero contra la textura que está bien. Si traigo de vuelta este trazo y digamos que quería esa naranja oscura, podría decir FF3300, podría guardar y ejecutar este boceto. De nuevo, solo estaría creando un peso de trazo alrededor de esta caja en particular, ¿verdad? Entonces, estoy probando estas pruebas para ver qué tipos diferentes de cosas se me ocurren. Ahora, sólo voy a volver a poner esto a negro. Volver al negro. ACDC ¿alguien? Volver al negro. Está bien. Entonces, aquí está con ese bonito trazo grueso de cuatro negros. Yo sólo pensé que añadía un bonito tipo de sombreado a eso. Está bien. Entonces, claro, quiero pensar: “Bueno, está bien. ¿ Qué hago a continuación con esto? Entonces, lo que quiero hacer a continuación es cerrar este video y luego el siguiente, vamos a cubrir los ejemplos cuatro y cinco porque sólo quiero ver cómo va a seguir evolucionando este archivo. Entonces, sigamos adelante y cerremos esto y pasaremos al ejemplo cuatro y al ejemplo cinco. 43. Unidad 9, video 3: Está bien. Entonces, en este video, notarás que estamos en el ejemplo cuatro y el ejemplo cinco. También podría notar que la carpeta tiene las letras MOV al final de la misma. Porque la curiosidad tenía que ver si esto era posible. Empecé a pensar bien, ¿qué es una textura? ¿ Es una textura un JPEG? ¿ Puede una textura ser una película de tiempo rápido? ¿ Puede una textura ser algo más que hago generalmente dentro de procesamiento como enjambre, como puedo usar un comportamiento de enjambre como textura? Empecé a tener preguntas sobre, ¿qué era posible usar como textura? Entonces, te darás cuenta de que el ejemplo cuatro y el ejemplo cinco tratan, ¿cómo configuro una película como textura? Ahora, veamos el ejemplo cuatro y voy a entrar a la carpeta de compilación y voy a entrar a la carpeta de datos, y tengo un MP4 ahí dentro. Si fuera a correr este MP4, verías que es otro pequeño experimento que había publicado en Tumblr. Se trata de un video de 30 segundos de como una pequeña ráfaga de confeti. De nuevo, esto era algo que fue scripted usando procesamiento y Hype y yo lo habíamos renderizado como una película. Me preguntaba, ¿podría usar esto como textura? Entonces, ¿podría tomar ese cubo y realmente reproducir una película a través de la superficie de mi cubo? Por supuesto, después de algunas excavaciones, me he dado cuenta de que sí la respuesta era de hecho sí que en realidad podrías mapear una película como textura. Entonces, veamos el ejemplo cuatro y veamos qué ha cambiado. Entonces, podrías notar que en la línea tres, estoy importando processing.video, y la razón por la que estoy importando processing.video es porque quiero poder cargar en una película, quiero poder bucear una película, quiero ser capaz de reproducir una película. Para ello, tengo que importar processing.video. Ahora, en la línea cuatro, verás que en lugar de usar una imagen P, estoy usando una película. ¿ De acuerdo? Entonces, no voy a estar mapeando un JPEG. Voy a estar mapeando una película. Entonces, por supuesto tex necesita actualizar línea cuatro Película tex. Ahora, sigamos adelante y miremos las líneas 12 a 14 y verás que tex ahora no es cargar imagen. Cargar imagen, trabajar aquí Josh, cargar imágenes, sí correcto. Entonces, en el ejemplo cuatro, estoy diciendo que tex es en realidad una nueva Película. Entonces especificando qué MP4 puedes usar película, obviamente yo uso MP4 porque están comprimidos y diminutos lo cual es bueno. Entonces, la película que estoy cargando es ese burst.mp4 dentro de mi carpeta de datos. Ahora, verás en la línea 13 que mi película tiene sólo 30 segundos de duración, así que solo quiero que se haga un bucle continuo. Entonces, ya verás en la línea 13, estoy diciendo tex.loop. Línea 14 TextureMode en realidad sigue siendo Normal. Ahora, empiezas a desplazarte aquí abajo y lo creas o no este código no ha cambiado. Todavía se puede decir en la línea 57 que la textura es tex, pero hay que añadir una última cosa y eso es el procesamiento de cola para empezar realmente a reproducir esta película. Entonces, si te desplazas todo el camino hasta el fondo, notarás que aquí hay una nueva función que dice vacío MovieEvent Movie m, m.read. Entonces, ahora mismo eso va a empezar a tocar nuestra película. Ahora, sigamos adelante y teje este boceto aquí y debes notar que nuestro cubo realmente está tocando ese MP4 en la superficie de cada uno de los vértices aquí. Entonces, realmente fascinado por esta idea de recursión derecha. Usando código para generar una película y luego esa película termino mapeando como una textura de nuevo dentro de este código. Entonces, nuevamente esto abre tantas posibilidades diferentes de poder crear algunos objetos tridimensionales dentro del procesamiento para luego empezar a mapear cosas diferentes como texturas. Entonces, genial y ejemplo tres, sabemos que podemos cargar cualquier tipo de imagen en esta caja. Con el ejemplo cuatro, podemos ver que en realidad podemos jugar una Película a través de esta caja. Ahora, sigamos adelante y cerremos esto y solo miremos el ejemplo cinco porque acabo de hacer un pequeño ajuste al ejemplo cinco. En el ejemplo cinco, si miras hacia abajo el cubo de construcción aquí, podrías notar que me deshice de la cara posterior, inferior, superior, derecha e izquierda. Eso es porque sólo quería demostrar que no tiene que ser un objeto tridimensional, puede ser solo un avión en el que juega. Entonces, notarás que acabo de guardar el vértice para la cara frontal y luego solo pongo algunos números aleatorios solo para hacer bien una forma rara. Entonces, en lugar de hacer tamaño de caja, se puede ver aquí hice veces 1.5 veces tres veces cinco o dos o dividir por dos. Acabo de poner algunos números falseos. Entonces, que yo pudiera probar, bueno, ¿y si la película no es una plaza? ¿ Y si se trata de una forma impar? Suficientemente con el modo de textura normal, se puede ver que todavía hace un gran trabajo de mapear esa película como textura a éstos a este vértice a pesar los vértices que se están creando no son un perfecto cuadrado o un rectángulo perfecto. En realidad es una forma rara así. Está bien. Entonces, voy a cerrar este video ahora que es de nuevo el cuatro y cinco de ejemplo. Vamos a pasar al ejemplo seis porque de nuevo quiero seguir explorando como bien ¿qué hago a continuación? ¿ Cuál es la siguiente cosa que quiero probar con este código? Entonces, nos vemos en el siguiente video. 44. Unidad 9, video 4: Estamos en el ejemplo seis, y tengo que retroceder un poco. Yo solo pensé, vale, en el ejemplo tres, cargué en una sola imagen, y cargé esa imagen en la configuración. Entonces, acabo de decir tex y cargué en esa imagen. Entonces, en el sorteo, acabo de decir: “Oye, usa esta imagen única en todas las superficies del cubo”. Entonces, llegué a pensar : “Bueno, y si aleatorizo eso”. El Cubo tiene seis superficies. Entonces, tiene cuatro lados y tiene una parte superior y una inferior. Entonces, hay seis superficies posibles que podría mapear las cosas. En el Ejemplo tres, sólo estaba tomando una cosa y mapeándola a las seis superficies. Entonces, entonces pensé: “Bueno, ¿qué pasaría si aleatorizara las imágenes que se mapean a cada una de las superficies?” Ahora, lo divertido de procesar es que tienes un set up y tienes un empate. Ese sorteo va a atropellar una y otra vez y una y otra y otra vez. No podía, en el sorteo, solo decir: “Oye, ve a conseguir una textura”, porque cada vez que esa cosa se corría, elegiría aleatoriamente una nueva textura para esa superficie. Eso no es lo que quería hacer. Lo que quería hacer era simplemente escoger seis imágenes aleatorias, recordarlas y luego mapearlas a los seis lados diferentes, y cuando esa cosa se mueva, tendría la textura preescogida. Entonces, esta es la parte extraña del procesamiento es que si quieres hacer esta aleatorización, lo que tendrás que hacer es dentro de la configuración, tienes que preescoger cosas. Almacena lo que prepick, para que cuando el sorteo corre sea ciclista por esas cosas que fueron preelegidas. ¿Estás conmigo? Está bien. Entonces, tengo cinco texturas que puedo agarrar. Entonces, lo primero que quiero hacer es mirar cargando en todas esas texturas. Ahora primero, veamos la línea número cinco. línea número cinco va a ser una lista de todas las texturas disponibles para elegir. Termina que son cinco: Uno, dos, tres, cuatro, cinco. Entonces, en la línea cinco digo: “Array una lista. Esta va a ser lista de texto que es nuestra lista de texturas”. Ahora, ahora voy a saltar a las líneas 13 a 24. Ahora, veamos esto. En las líneas 13 a 17 , cargo en nuestras cinco imágenes. Entonces digo: “pImage t1, t2, t3, t4, t5. Oye, hombre, ve a buscar texto1. Ve a buscar texto2. Ve a buscar texto3. Ve a buscar texto4. Ve a buscar texto5. Encargan esos mamones”. Ahora que he cargado para procesar esas cinco imágenes, quiero empujarlas a la matriz. Entonces, veamos las líneas 19 a 24. En la línea 19 digo, TexList arriba en la línea cinco. Solo quiero hacerte saber que eres una nueva lista de array, y ahora te voy a empujar algunas cosas. Entonces digo: “TexliXt. Agregar t1.” Entonces, de repente, si miro la primera entrada en la lista de texto, va a igualar t1. T1 es tex1.jpeg. Entonces agrego t2 y agrego t3, agrego t4, así sucesivamente y demás. Entonces, si estoy escribiendo eso, si fuera así, TexList se vería algo así donde sería tex1.jpg. Sería tex2.jpg. Entonces, sería la lista de las cinco imágenes. Entonces, TexList es ahora las cinco de nuestras imágenes disponibles que acabamos de cargar. Es una lista de ellos. Genial. Entonces, ¿qué quiero hacer ahora? Lo que quiero hacer ahora es preescoger algunas imágenes aleatorias. Ahora, antes de que pueda hacer eso, veamos la línea seis. línea seis es una nueva matriz de PImages. Van a ser las imágenes que preelegí antes de tiempo. Entonces, veamos nuestro cubo. Nuestro cubo es de seis superficies, cuatro a los lados, una superior y una inferior. Entonces, lo que quiero hacer es escoger al azar seis imágenes. Lo siento. Sí, escoge al azar seis imágenes y mapearlas a cada seis de nuestras superficies. Entonces, lo que necesito hacer ahora es preescoger aleatoriamente de nuestros cinco JPEG disponibles. Entonces, veamos esto for loop. Este for loop necesita ejecutar un número establecido de veces. Lo que necesita para correr es PickedTex.length. ¿ Para cuántos artículos estamos recogiendo? Cuál es la longitud. El largo es que si miramos a PickedTex eso está aquí en la línea seis, hemos dicho aquí que son seis artículos, así que si de hecho fuera a rastrear esto aquí mismo, devolverá seis. Entonces, este for loop va a correr seis veces. Eso es genial porque hay seis superficies. Está bien. Entonces ahora, es esta línea aquí la que nos permite obtener aleatoriamente una imagen y agregarla a esta nueva matriz. Entonces, dice: “Está bien, esto se está ejecutando sexta vez. Yo quiero seguir adelante y preescoger la primera imagen que vas a usar”. Entonces, PickedTex se va a recoger el subítem cero. Dice: “De acuerdo, déjame ir a mi lista de texto y déjame conseguir un número”. ¿ Qué número quieres? Ahora, la mejor manera de verlo es que esto sería recoger el número uno. Esto sería recoger el número dos. Esto sería recoger el número tres. Este sería el número cuatro. Este sería el número cinco. Entonces, imagina por un momento que tenemos un sombrero. Tomamos cinco pedazos de papel. Escribimos uno, dos, tres, cuatro, cinco sobre ellos, y tomamos los pedazos de papel y los ponemos en el sombrero. Entonces, te repartiré el sombrero y digo: “Escucha, hay seis superficies a este cubo. Por favor, escoge un número”. Te metes en el sombrero y agarras un trozo de papel, y lo sacas y vas a T3. T3 es tex3.jpg. Entonces para la primera superficie que en realidad sería la cara frontal, voy a recoger tex3. Ahora, pones el trozo de papel de nuevo en el sombrero. Sacudo el sombrero y digo: “Está bien, sigue adelante”. Básicamente estás sacando un número del sombrero seis veces. Entonces, eso es lo que hace este bloque de código aquí mismo. Dice, quiero escoger aleatoriamente una de estas cinco imágenes para las seis de las superficies. Entonces, probemos algo aquí. Este video va a ser largo. Sólo digo. Josh, ¿por qué nos lastimaste? Echa un vistazo a esto. Voy a imprimir uno y sigamos adelante e imprimimos PickedTex. Entonces voy a imprimir el array PickedTex. Ahora, voy a seguir adelante y ejecutar esto. Por supuesto, vas a ver la animación corre aquí. Voy a moverme a un costado. Yo sólo quiero mirar esto aquí mismo. Mira esto. Eligía un pImage uno aquí. Parece que el objeto fue asignado 2f2a5869. Recogió 5126db0. Esa es una diferente. Por lo que escogió uno diferente para ese servicio. Recogió 512 de nuevo. Parece que recogió 2f2. Este escogió 7cb. Ojalá escupiera los números pero no lo hace. El punto es que seleccionamos aleatoriamente los pedazos de papel fuera del sombrero. Entonces, lo bonito es que este cuatro bucle prerecoge cuál de las cinco imágenes vamos a mapear a cada una de las seis superficies diferentes. Ahora bien, TextureMode (normal) eso no ha cambiado. Nuestro Hoscillator que no ha cambiado. Nuestra matriz pop PushMatrix que no ha cambiado. Pero ahora, mira cómo ha cambiado BuildCube. Ahora bien, si nos fijamos en el ejemplo tres, por ejemplo, teníamos una BeginShape y una EndShape. Entre esa BeginShape y esa EndShape, llamamos a todos estos vértices diferentes para todas las caras diferentes. Pero cuando haces eso y luego llamas a textura, va a usar textura esa imagen para las seis superficies. Entonces, solo es mapear una imagen a las seis superficies. Yo no quería que eso pasara. Lo que quería que pasara aquí fue mapear una textura diferente a cada superficie. Entonces, lo que tengo que hacer es realmente hacer un BeginShape y EndShape para cada una de las caras individuales de nuestro cubo. Si hago una BeginShape y EndShape para cada cara individual de nuestro cubo, se me permite llamar a una textura independiente para esa cara. Mierda santa, hombre. Es como dibujar un ejemplo seis y ya me duele el cerebro. Confía en mí, me duele también. Entonces, estamos en esto juntos. Pero de nuevo, nota que la actualización es que ahora estoy haciendo una BeginShape, EndShape, una textura independiente para cada una de las caras. Entonces, si PickedTex es una matriz de cada una de las seis imágenes diferentes que elegimos del sombrero, podría decir: “Oye, quiero ir a esta matriz. ¿ Puedes decirme qué imagen escogiste en selección cero?” Me da una imagen. Yo podría decir: “Oye, para el backface, ¿ puedes ir a la matriz y decirme qué imagen escogió para uno, qué escogió para dos, qué escogió para tres, qué escogió para cuatro, y qué lo hizo recogido por cinco”. Porque recuerden, la programación la mayor parte del tiempo comienza en cero. Entonces, son seis texturas diferentes, cero, uno, dos, tres, cuatro, cinco, seis. Lo siento. Cero, uno, dos, tres, cuatro, cinco, que serían seis ítems en la matriz. Ahora, por favor, no me lastimes. Adelante y ejecutemos este boceto. Nuevamente, ahora cuando miro esto voy, “Wow, ok, eso está bien porque ahora estoy construyendo este cubo, pero ahora cada superficie está sacando aleatoriamente su propia imagen de la carpeta de datos”. Entonces, estoy bien, puedo ver mi tablero de ajedrez. Parece que escogió esa línea realmente gruesa de 45 grados en realidad un montón de veces. Ahora bien, si cierro esto y en realidad vuelvo a ejecutar este boceto, conseguiría algo diferente. Algunas líneas gruesas, algunas líneas medianas, algunas líneas delgadas y en esa no conseguí ningún tablero de ajedrez en absoluto. Entonces otra vez, porque al azar prepicking las imágenes dentro de la configuración, puedo atropellar esto una y otra vez y otra vez y voy a conseguir un mapeo único diferente cada vez. Yo solo pensé, “Wow, eso se ve muy divertido”. Ahora, sé que este archivo duele, pero ahora está empezando a ponerse emocionante porque lo que pasa ahora cuando empezamos a agregar un montón de estos cubos, y esa fue mi próxima idea, que es que no quiero un cubo, Yo quiero dibujar un montón de ellos. Entonces, sigamos adelante y cerremos este archivo de video y vamos a pasar al siguiente que va a cubrir los ejemplos siete y ocho donde exploro esta idea de dibujar múltiples cubos. 45. Unidad 9, video 5: Hola. Estamos en el ejemplo siete y me complace que no haya llevado un Baseball vuelta a su pantalla porque el último archivo realmente le ha dado un dolor de cabeza a algunos de ustedes. Entonces, gracias por acompañarme al siguiente video. Entonces, quiero dibujar un montón de cubos, ¿de acuerdo? Veamos el problema que tenemos que arreglar, que es, tengo este lienzo y en los archivos anteriores, el cubo se estaba dibujando en el centro exacto. Yo quería dibujar un montón de cubos, pero ¿cómo iba a aleatorizar sus posiciones? No sólo quería aleatorizar sus posiciones, sino que quería aleatorizarlas fuera de ese punto central. Entonces, sería genial si pudiera decir: “Oye, quiero hacer 10 cajas y quiero aleatorizar la posición de esas 10 cajas, pero quiero aleatorizarlas fuera de ese punto central”. Entonces, hay un problema, es que quiero dibujar 10 cajas, pero necesito escoger aleatoriamente un lugar para ellas. Está bien. Entonces, veamos las líneas ocho y nueve. Ahora, en cualquier momento que estés haciendo algo de aleatorización o algunos escenarios preseleccionados, tienes que guardarlos antes de tiempo. Tienes que configurarlos, tienes que elegir al azar las cosas y configurar porque draw va a acceder a esos atributos preseleccionados y simplemente seguir usándolos una y otra vez. No se puede aleatorizar en el sorteo. Si aleatorizas en el sorteo, de repente tus cubos se van a mover por todas partes de la pantalla y no quiero que lo estén moviendo a todas partes de la pantalla. ¡ Ah, escoges sqween! ¿ A qué hora es? Seguro que son como las 04:00 de la mañana. Bien, estoy bien gracias. No se puede bajar al azar en el empate porque de repente todas estas cosas se estarían moviendo por todo el lugar. Necesito escoger aleatoriamente sus posiciones en la configuración una vez y luego hacer que se queden ahí. Entonces, este siempre ha sido el gran enigma para mí con el procesamiento, es que el sorteo se acaba de ejecutar en fresco cada vez y así no se puede recoger al azar cosas en el sorteo porque las cosas se pueden mover. Entonces, llegué a preescoger mi aleatorización. Entonces, mira la línea ocho. Sé que ahora quiero pintar 10 cubos, no sólo uno, quiero pintar 10. En esos diez, quiero escoger aleatoriamente una ubicación. Entonces, notarás que la línea nueve son hermosas amigas p-vector, ¿verdad? Un p-vector es un hermoso sistema de coordenadas y debido a que es 3D, voy a escoger una x, y y z para mi p-vector. Ahora, línea nueve digo “De acuerdo, necesito elegir al azar una ubicación inicialmente y luego guardarla”. ¿ Cuántas entradas hay en esta matriz? Cubos num, 10. Entonces, vas a dibujar diez cubos, necesito que escojas al azar diez localizaciones. Entonces, notarás ubicación escogida es igual nuevo p-vector y luego el número de veces que necesito para escoger algo, que en este caso es de 10. Impresionante. Entonces, líneas 29-32, ahí es donde prepick mis texturas. Ahora son las líneas 34-41 donde estoy aleatorizando mis posiciones. Ahora, echemos un vistazo a esto. Este for-loop se va a ejecutar ¿cuántas veces? Diez, porque queremos pintar 10 cubos. Está bien. En la línea 36, configuré un p-vector temporal. Entonces, digo, PT para Point es un nuevo p-vector y digo, “Hey PT-X debe ser igual a ancho dividido por dos”. Entonces, ve al centro de la pantalla, más escoge un número aleatorio, negativo 200 a positivo 200. Entonces, va a la mitad de la pantalla y al azar va a ir negativo 200 a positivo 200 fuera de ella al azar en algún lugar dentro de ese rango, y eso es solo por el ancho. P t.y va a hacer exactamente lo mismo excepto que va altura dividida por dos más aleatorio negativo 200 a positivo 200, lo que ahora está escogiendo un rango fuera de altura dividido por dos. Ahora, yo también quiero hacer eso en la z. Entonces, digo que el número de puntos z debe ser negativo 100 a positivo 100, ¿verdad? Entonces, estoy escogiendo un rango entre aquí. Entonces digo: “Oye, array, adelante y toma este p-vector que acabo de configurar aleatoriamente”. De acuerdo, entonces ahora tengo una matriz de 10 p-vectores y si mirara cada vector p individual, tendría un x, y y z únicos, pero que x, y y z se basa en esta aleatorización de ancho dividido por dos, altura dividida por dos. Genial. Entonces, ahora he preelegido un montón de 10 localizaciones aleatorias fuera del centro de la pantalla. Ahora, sigamos adelante y veamos nuestra función de sorteo porque nuestra función de sorteo se actualizó en lugar de tener solo una matriz push, cubo de construcción de matriz pop, solo uno. Mira, está anidado dentro de un for-loop. Entonces, ahora, este for-loop se va a ejecutar ¿cuántas veces? Diez veces. Entonces, ahora sé que estoy disparando cubo de construcción. Diez veces, ¿de acuerdo? Ahora, voy a decir, genial vamos a traducir a esa ubicación aleatoria X, esa ubicación aleatoria Y, y esa ubicación aleatoria Z para uno de los cubos. Entonces, se mueve a dondequiera que esté esa ubicación aleatoria y también notarás que pone en la rotación X, la rotación Y, la oscilación Z y construye el cubo. Ahora, el bucle for luego se ejecuta por segunda vez y une el segundo cubo en una ubicación aleatoria así sucesivamente y así sucesivamente. La función buildcube no ha cambiado, es exactamente la misma que antes. Entonces, si ahora ejecutamos este boceto debería construir 10 cubos para nosotros. Te darás cuenta de que esencialmente son 10 copias del mismo cubo. Porque notarás que todos tienen las mismas superficies. No estoy aleatorizando cada uno de los cubos individuales. Obviamente, podría pero la razón por la que no lo hice en esta es porque sí me gusta que las cosas sean familiares. Si estoy haciendo algo de aleatorización o si tengo algunas cosas aleatorias sucediendo en mi archivo, sí quiero algunas cosas que sean consistentes. Entonces, de repente puedes mirar esto y decir: “Oh, básicamente es un cubo y los patrones que se le asignaron se copiaron 10 veces”. Entonces, hay una familiaridad con esto porque está reciclando los mismos patrones en todas las 10 de estas superficies. Ahora, por supuesto, si cerrara este documento y lo volviera a ejecutar, obtendríamos otras 10 posiciones únicas. Entonces, yo estaba como, Muy bien, esto es divertido. El problema sin embargo, yo diría que quiero modificar sobre esto es deshacer que se traduzcan en el eje Z del negativo 100 a un positivo 100, pero aún así los bloques son grandes. A mí me gustaría hacer una varianza en las cajas. Entonces, eso nos va a dejar pasar al siguiente ejemplo, que es el ejemplo ocho. Te darás cuenta en el ejemplo ocho he dicho, oh, hombre tengo que escoger al azar una báscula ahora. Entonces, permítanme configurar las instrucciones para escoger aleatoriamente una báscula. Entonces, mira las líneas de tres a cuatro van aleatoriamente a escoger una textura, línea seis está escogiendo aleatoriamente una ubicación. Ahora necesito empezar a agregar algo de información para elegir aleatoriamente un tamaño de escala. Entonces, dije bien, déjame escoger una escala mínima y una escala máxima. Entonces, puedes ver que aquí creé dos carrozas. Siendo la escala mínima una caja, 40 por 40 y la escala máxima siendo una caja 100 por 100. Entonces, entonces dije: “Está bien, pues déjame crear una matriz de escalas elegidas al azar”. Entonces, dije: “Está bien va a ser un flotador, va a ser un tamaño de caja y también, va a ser como ubicación donde estoy recogiendo al azar 10 tallas”. Entonces, el tamaño de caja es igual a nuevo flotador y le paso el número asociado a cubos entumecidos que, por supuesto, es 10. Entonces, dentro de este bucle completo ahora, está la edición. Que es oh, aquí es donde estoy escogiendo aleatoriamente la ubicación, probablemente quiera escoger al azar una báscula ahora. Entonces, yo digo: “Está bien tamaño de caja, estoy listo para empezar a escoger una báscula para ti”. Entonces, notarás que tengo aleatorio aquí y aleatorio es organizar para escala de min a max. Entonces, ahora sé que cada tamaño de caja va a ser de algún tamaño entre 40, pero no menor que 40, y un 100 pero no mayor que 100. Entonces, ahora estoy escogiendo aleatoriamente 10 tamaños aleatorios para usar en mi caja. Los osciladores permanecen sin cambios. Mi bucle completo se ajusta cada vez tan ligeramente. Porque, ahora lo que necesito hacer es cuando realmente construyo cubo, necesito poder acceder a qué tamaño aleatorio realmente fue recogido. Entonces, vamos a echar un vistazo a esto. Se puede ver eso en línea 82, digo: “Oye, construye cubo. Te voy a dar la variable I.” Entonces, yo igual a cero, luego uno, luego dos, luego tres, luego cuatro, luego cinco, luego seis, luego siete, luego ocho, y luego nueve. Entonces, sé que estoy pasando de cero a nueve a la función buildcube. Ahora, si bajas a la línea 87, verás que estoy aceptando me en BuildCube. Entonces, BuildCube se ejecuta y BuildCube dice: “Oye, entiendo que me estás dando un número, dime cuál es ese número”. Ese número se acaba de asignar al entero I, acaba de reciclar el mismo nombre exacto de la variable. Ahora, la razón por la que hago eso es porque digo bien, cuando construyes este cubo necesitas ir a lista de matriz BoxSize y acceder al primer tamaño cero. Vamos a fingir que escogió 62. Entonces, ahora la caja está diciendo: “Está bien, palabra fresca 62 para cada una de las caras”. Entonces este bucle de cuatro se ejecuta por segunda vez, luego pasa BuildCube y el subelemento uno. Uno se pasa a BuildCube, sube a la matriz BoxSize y dice: “Oye, ¿qué escogió ahora para el BoxSize”. Entonces, ahora estoy aleatorizando el tamaño de las cajas. Entonces, si sigo adelante y guardo y pruebo este boceto, ahora notarás que ahora soy capaz de lanzar muchos BoxSize únicos. Entonces, sigo aleatorizando la Z, pero ahora estoy aleatorizando los tamaños dentro de esa Z. Entonces, ahora puedo conseguir algunas cajas más pequeñas y puedo conseguir algunas cajas más grandes y estaba bastante contento con eso. Estamos llegando a algún lugar. De nuevo, sólo estamos mutando lentamente esta idea y vamos a ver dónde decidimos evolucionar esto a continuación. Entonces, sigamos adelante y terminemos este video. En el siguiente apartado vamos a estar cubriendo los ejemplos del nueve al 11. 46. Unidad 9, video 6: Entonces en este video vamos a cubrir los ejemplos 9, 10, y 11. Nuevamente, esto era parte de mi, me pregunto cara. Entonces llegué a pensar en el ejemplo nueve, pensé: “Está bien, he mapeado JPEG, he mapeado archivos de películas”. Te darás cuenta de que en la carpeta zip, ejemplo 9, 10 y 11, tienen un PNG adherido a ella. Simplemente pensé: “Me pregunto si puedo usar un PNG porque un PNG soporta transparencia y me pregunto si eso afecta el mapeo a este conjunto de cubos”. Entonces si entras en el ejemplo, 9.PNG y miras la carpeta de datos, hay cuatro PNG que salí aquí. Dondequiera que fuera blanco en realidad hice transparente. Entonces cuando salí esto de Illustrator, lo único que realmente tiene algún color es el negro, el blanco es en realidad transparente. Entonces pensé: “De acuerdo, en el ejemplo nueve, ¿qué pasa cuando acabo de hacer esta modificación aquí mismo en las líneas 18 a 21 y en realidad cambié el activo de un JPEG a un PNG?” Pensé: “¿Qué pasaría si me dieran un cubo y tengo transparencia, podría ver a través de la transparencia a las formas en las otras caras del cubo?” Entonces con eso dicho, sigamos adelante y probemos este boceto aquí y veamos qué pasa. Entonces ahora estamos construyendo, creo que hice un pequeño ajuste aquí en la línea 6. Dije que el número de cubos era en realidad 20 en lugar de 10. Si miras, sí, en realidad puedes ver a través de la transparencia del PNG y ver algunas de las texturas que son a través de la transparencia. Ahora bien, no es 100 por ciento perfecto, si realmente miras verás algunos fallos donde algunos de los PNG realmente desaparecen. Pero con todo, yo estaba como, “Oh, wow. Eso funciona bien”. Entonces desde ahí pensé: “Bueno, está bien, sólo veamos probar algo”. Voy a desplazarme hacia abajo hasta la parte inferior aquí y aquí está esa función BuildCube. Pensé: “Bueno, está bien, estoy construyendo estas seis superficies diferentes para hacer este cubo”. Entonces pensé: “¿Qué pasaría si mientras estaba construyendo el cubo, en realidad, para cada uno de los seis lados, creé dos caras. Por lo que habría dos caras para el frente, dos caras para la espalda, dos caras para la parte superior, dos caras para la parte inferior, y así sucesivamente. Ahora, sigamos adelante y miremos el ejemplo 10 porque pensé que tal vez pueda usar esta transparencia PNG a mi ventaja, que es si nos fijamos en el ejemplo 10, lo que he hecho es que he introducido un HColorPool. Línea dos colores HColorPool, igual que todo lo demás, igual que elegí una ubicación, y al igual que un tamaño de caja, voy a pre-escoger seis colores para la superficie del cubo. En la línea 21 se puede ver aquí tengo el HColorPool y algunos colores aleatorios en ella. Ahora, aquí está el bucle de cuatro donde estoy escogiendo aleatoriamente las texturas de los PNG. Además de escoger un PNG para una cara, pensé : “Si estoy usando dos caras para una superficie, lo que haré es, es escoger un color para una de las superficies, y luego escogeré un PNG que se sentará encima de ese color”. Entonces línea 36, estoy escogiendo una textura y en la línea 39, estoy pre-recogiendo un color aleatorio. Ahora, debido a que el código se está haciendo largo, si realmente miras aquí abajo en BuildCube, he acortado todo a una línea solo para que simplemente no fuera una tremenda cantidad de código. Ahora, aquí es donde estoy seleccionando dos superficies para cada cara. Entonces en como 98 digo, finjamos que sólo estamos haciendo el frente ahora, que somos. En la línea 98 digo: “Hey, vamos a seleccionar ese color que pre-escogimos y vamos a fingir que es naranja”. Por lo que recoge naranja y lo une a esa forma de inicio, esa forma final, y esos vértices. Eso está todo en la línea 99. Entonces en la línea 100 digo: “Está bien, genial. Mata el relleno”, y en la línea 101 digo: “Genial, hagamos que la siguiente superficie sea la misma información exacta, pero ahora está sentado encima de la que tiene el color”. Entonces pensé: “Esto será genial”, porque es como conceptualmente, es un cubo dentro de un cubo, pero el cubo interior está recogiendo colores aleatoriamente, el cubo exterior está desollado la superficie con esos PNG transparentes y porque esos PNG transparentes son transparentes, podrás ver a través del cubo externo hasta el cubo interior que en realidad tiene la selección aleatoria de color porque solo estoy metiendo. Ahora si ejecutas este boceto, eso es exactamente lo que pasa es que tienes un cubo dentro un cubo porque cada cara es dos comienzan en formas. El primero, estamos escogiendo aleatoriamente un color, el segundo es que estamos poniendo el PNG encima de él. Entonces, en realidad estás mirando a través de la transparencia al color en la caja interior. Ahora, aquí parece que acaba de recoger un montón de grises y una naranja. Si realmente vuelvo a ejecutar este boceto veamos si puedo conseguir una mejor mezcla. Entonces ahora, parece que tengo unos grises, tengo un azul azulado, y parece que también tengo una superficie naranja. Entonces pensé que esto era como la siguiente evolución lógica fue “Wow, tal vez pueda usar PNG para usar la transparencia a mi favor para mirar otro cubo en el interior que está consiguiendo un relleno sólido”. Ahora si estás pensando como mi loco cerebro, podrías averiguar qué vamos a hacer en la construcción 11. En el ejemplo 11, pensé: “Sí, tengo que usar HPixelColorist”. Por lo que notarás dentro de la carpeta de datos hay este color.JPeg y si miramos el código del ejemplo 11, he sacado HColorPool y he agregado HPixelColorist. Nuevamente, en la línea 14 esto se mantiene sin cambios en el ejemplo 11, seguimos escogiendo un color. En la línea 21 hemos actualizado de usar HColorPool a HPixelColorist. Entonces vamos a ver qué tenemos que hacer aquí que está justo aquí en el bucle de cuatro ya que es pre-pick la ubicación, pre-pick la báscula, también estoy diciendo: “Oye, ¿me puedes hacer un favor y pre-escoger el color, pero el color que quiero que obtengas es acceder al HPixelColorist, conseguir el color, y te voy a dar esta coordenada X y esta coordenada Y que es pt.x y pt.y”. Ahora bien, si recuerdas pt.x y pt.y es nuestra selección de ubicación aleatoria. Entonces digo: “Escoge una ubicación aleatoria sea cual sea la ubicación que sea. Mira también las coordenadas X e Y en el JPEG, encuentra el píxel en esa posición particular, y tira de eso en el cubo”. Entonces si bajas a la función BuildCube el código no ha cambiado. Sigue siendo lo mismo del ejemplo 10, pero ahora cuando pruebo este boceto, de nuevo, seguimos haciendo ese cubo dentro de un concepto de cubo, excepción de que está robando el color de nuestro color.JPG. Entonces otra vez, qué gran manera de usar PNG a nuestra ventaja. Déjame correr esto una vez más y ver si podemos conseguir algunas escalas aleatorias diferentes. Eso se iba a hacer un poco más pequeño alrededor de las cajas de ahí. Pero de nuevo, está tomando muestras del color de HPixelColorist. De acuerdo, vamos a terminar este video. A continuación, sólo vamos a pasar tiempo en el ejemplo 12. 47. Unidad 9, video 7: Genial. Ahora estamos en el ejemplo 12 y qué vamos a hacer por ejemplo 12. Entonces, llegué a pensar, pensé, no sé si necesariamente me gusta la oscilación de cada cubo individual. Pensé que me preguntaba qué pasaría si tomara la oscilación y la usara en todo el racimo de cubos. Entonces, en lugar de cada cubo individual dándome oscilación RotateX, RotateY, y RotateZ. ¿ Y si uso esa oscilación para mover todo el racimo de cubos. Entonces, sigamos adelante y miremos la línea seis nuestros NumCubes es 20 así que vamos a generar aleatoriamente 20 cubos en este cluster. Es posible que solo quieras echar un vistazo a que en la línea es 39 a 41, mi aleatorización es más grande. Ahora es negativo 300 del centro y positivo 300 del centro para el eje x. Negativo 300, positivo 300 para el eje y, y también negativo 300, positivo 300 para el eje z. Está bien. Ahora, nuestros osciladores permanecen sin cambios. Siguen siendo iguales aquí. De acuerdo, pero lo que he hecho es editar el push y PopMatrix. Ahora, veamos qué ha cambiado aquí. De hecho, voy a volver a construir 11 para que se pueda ver cómo inicialmente tuvimos la configuración PushMatrix, PopMatrix. Se iba a traducir al lugar aleatorio. Después iba a hacer girar x, rotar y, rotar z para cada cubo individual, construir el cubo y luego vuelve a sacar los ajustes. Está bien. Entonces, 12 toma un poco de un papel diferente en el sentido de que, realidad necesito mostrarte otra cosa que, es si miras pt.x, pt.y, y pt.z en la construcción 11, recuerda esta ubicación aleatoria tuvo que encontrar el centro de la pantalla primero y luego aleatorizada fuera de ese centro de la pantalla. Entonces, observe que el pt.x era ancho dividido por dos más un rango aleatorio, altura dividida por dos más un rango aleatorio, y nuevamente la z solo fue negativa 100, positiva 100. En 12 esperemos, notaste que el ancho dividido por dos se ha ido y la altura dividida por dos se ha ido. Está bien. Ahora, el motivo de eso es la ubicación escogida. Yo sólo quería escoger un número aleatorio basado en un min y un max, y de nuevo el min y el max aquí es solo negativo 300, positivo 300. Entonces, está bien, veamos este PushMatrix y PopMatrix. Está bien. La línea 75 dice: “Oye, pasemos a la posición central”, por lo que se traduce en ancho dividido por dos altura dividida por dos. Entonces, muévete al centro y luego dice bien, “Hagamos rotaTex, rotaTey, y rotaTez no en el bucle for”, lo está haciendo fuera del bucle for y como lo está haciendo fuera del bucle for, va a realizar esa traducción de RotateX, RotateY, RotateZ a todo el entorno. Está bien. Entonces, traduce RotateX, RotateY, RotateZ entonces llega al bucle for que corre, en este caso, 20 veces. El bucle for corre 20 veces, une los cubos y dice: “Sí, pero estos cubos necesitan moverse aleatoriamente en la x, al azar en la y y y al azar en la z”. Está bien. Entonces, tenemos un nuevo empuje anidado y Pomatrix que está tratando con el cubo individual y ese cubo individual dice: “Está bien. Puedo ir negativo 300, positivo 300, negativo 300, positivo 300, negativo 300, positivo 300, positivo 300, etc., y así sucesivamente. Está bien. Entonces construye el cubo. Entonces, moviendo el RotateX, Y, y Z fuera del bucle for y poniéndolo en un primer push inicial y PopMatrix, luego dentro corriendo el bucle for y haciendo su otro push individual y PopMatrix para cada cubo individual, que ahora significa que estamos usando las Oscilaciones H para mover los 20 cubos a la vez. Está bien. Entonces, todo lo demás abajo se mantiene sin cambios. Podría notar que sólo build 10 y build 11 están usando los PNG transparentes han vuelto a los JPEG en este archivo. Entonces, no estoy usando los PNG transparentes, y no estoy haciendo la caja dentro de una cosa de caja. Eso fue sólo en los expedientes 10 y 11. Entonces, me lo he quitado aquí en la construcción 12. En la construcción 12, solo estoy construyendo mi caja y adjuntando texturas aleatorias a cada una de las superficies. Está bien. Entonces, sigamos adelante y ejecutemos este boceto en particular y lo que deberías ver es que ahora estoy usando la oscilación, no estoy girando cada cubo individual, estoy girando toda la masa ahora. Yo solo pensé, “Wow, vale eso es bastante increíble”. Realmente disfruté eso. Entonces, voy a seguir adelante y voy a mantener corto este video. En el siguiente video voy a pasar a los ejemplos 13 y 14 porque me golpea otra idea que podría adelantar la forma en que esto se ve estéticamente. Entonces, lo que quiero que se den cuenta ahora mismo es que estamos girando toda la selección de 20 cubos, pero ten en cuenta que no se rotan todos los cubos. Entonces, todos básicamente están enfrentando la misma dirección. Entonces, pensé, necesito aleatorizar eso. Entonces, cerremos este video y pasemos a los ejemplos 13 y 14. 48. Unidad 9, video 8: Estamos en los ejemplos 13 y 14 ahora. Entonces, ahora mismo, estoy en el ejemplo 13 y otra vez, solo pensé que necesito abordar este tema de rotación, el hecho de que los 20 cubos compartieran la misma no-rotación. Entonces, como te imaginas, si quiero rotar los cubos al azar, al menos fijo, y luego girar todo el clúster, tengo un pre-pick rotaciones aleatorias. Entonces, sigamos adelante y busquemos aquí en la línea 13. Preelijo aleatoriamente una textura. Preelijo aleatoriamente una ubicación. Preelijo aleatoriamente un tamaño basado en un min y un max. Si vas a rotar algo al azar, necesitas preescoger una rotación aleatoria escogida. Entonces, creo aquí un PVector llamado PickedRotation, y también es NumCubes, lo que significa que va a tener 20 rotaciones preelegidas. Está bien. Entonces, veamos las líneas 49 a 51. Lo que quiero pre-pick es una rotación X, Y, y Z para cada cubo. Entonces, no solo estoy haciendo una rotación. Estoy haciendo rotación de los tres planos: una X rota, una Y rota, y una Z. Entonces, en la línea 50, yo digo: “Está bien. Bueno, yo quiero un PVector. Voy a llamar a este pVector pr para rotación escogida”, y voy a decir, “Está bien. Para la X, haz entero aleatorio 360", que me va a dar un número entre cero y 360, “y para la Y, dame un 360 aleatorio, y para la Z, dame un 360 aleatorio”. Una vez que escojas al azar estas tres rotaciones, toma ese PVector y guárdelo en nuestra lista de matriz de rotaciones recogidas. Entonces, ahora en las líneas 49 a 51, hemos escogido aleatoriamente una rotación para el cubo. Ahora, te metes en el sorteo aquí, y aquí está nuestro empuje y nuestra matriz pop. Ahora, de nuevo, las líneas 81 a 84, eso es tratar con todo el clúster, y luego verás que es la adición de las líneas 90 a 92, donde digo: “Está bien, ahora estás escogiendo cubos individuales, traduce aleatorio X, aleatorio Y, aleatorio Z. Además, rota a tu aleatorio rota X, gira Y, y gira Z.” Entonces, ahora cada cubo está recogiendo su, estoy asignando lo que preelegí para la rotación para la rotación X, rotar Y, y girar Z. estelar, nada más es diferente. Build cube sigue siendo el mismo. Ahora, mira cómo acaba de implementar esa rotación aleatoria preescogida, mira cómo cambia el clúster. Entonces, voy a seguir adelante y ejecutar este boceto. Notarás ahora que la disposición de los bloques es mucho más interesante porque ahora, no todos son la misma no-rotación. Ahora, todas son una rotaciones diferentes, pero luego las estoy moviendo a todas como un cúmulo y simplemente estéticamente, pensé: “¡Guau! Esto es visualmente mucho más interesante. Déjame volver a ejecutar el boceto para ver qué tipo de configuración aleatoria obtengo”. Nuevamente, ahora estoy creando este realmente hermoso cúmulo de cubos, pero el hecho de que roten aleatoriamente significa que algunos tocarán a algunos de los otros, y yo solo pensé, “Wow! Eso se ve bastante bien”. Nuevamente, estoy usando oscilación para mover el clúster en su conjunto. Entonces, estoy sentado con este tipo un rato, y luego llegué a pensar qué pasaría si agregara rotación de nuevo a los cubos individuales. Entonces, solo me hizo pensar, “Bueno, está bien. Podría tener oscilador oscilando todo el cúmulo. Pero entonces, ¿qué pasaría si los cubos individuales se activaran mientras el oscilador estaba moviendo el cúmulo en su conjunto?” Pero no estaba seguro de que quisiera pasar y crear un conjunto completamente nuevo de osciladores. Entonces, pensé: “Déjame guardar esto a un Build 14 y probar algo”. Entonces, sigamos adelante y pasemos a Construir 14. Build 14 es casi idéntico a Build 13, pero implementé un pequeño truco dentro de este boceto, y ese truco está dentro de la función de dibujo. Esto es todo lo que hice, fue esta pequeña edición aquí mismo. Yo sólo dije: “¿Qué pasaría si justo dentro de la rotación X y rotara Y, y si restara el FrameCount de la película?” Ahora, FrameCount siempre está contando uno, dos, tres, cuatro, cinco, seis. Al segundo que inicias tu película, FrameCount siempre está corriendo. Pensé: “Bueno, ¿y si roto X menos el FrameCount, y qué pasa si roté Y más el FrameCount?” Entonces, no estoy creando todo un nuevo conjunto de oscilaciones. Solo estoy ajustando esta rotación X e Y menos o más lo que sea que sea el FrameCount de la película. De nuevo, no estaba del todo seguro de qué iba a hacer esto hasta que ejecutara el boceto. En cuanto ejecuto el boceto, estaba bastante feliz. Ahora, podrías crear todo un nuevo conjunto de osciladores si quisieras. Podríamos aplicar un conjunto secundario de oscilación para cada cubo individual, y luego la oscilación principal haciendo el clúster principal. Pero pensé, visualmente, este menos Frame Count y plus Frame Count abordaba el problema sin escribir un montón de código nuevo. Entonces, pensé: “¡Guau! Esto es realmente hermoso”. De nuevo, puedo atropellar esto una y otra vez, y nos hacemos diferentes. Ahí vamos. Entonces, ahora escogí algunos cubos más pequeños. Entonces, tienes la oscilación principal que está girando lentamente esta cosa alrededor, y el Frame Count girando cada una de las cajas individuales. Ahora, una cosa que deberías estar pensando ahora mismo es: “¡Oh, Dios mío! A lo mejor soy nuevo en el procesamiento, y mucho de este código ahora acaba de llegar demasiado, demasiado rápido”. Independientemente de eso, puedo subir a la cima, y me doy cuenta de que estoy mapeando JPEG a este entorno. Entonces, puedo saltar a Photoshop o Illustrator, hacer algunos activos nuevos, y en realidad puedo mapearlos a este entorno y ver qué tipo de patrones obtengo. Entonces, puedes cambiar mi obra de arte por algo diferente. Entonces, estoy viendo esto, y solo estoy pensando que esto es genial. Tuve una experiencia realmente buena con este sistema. Produce algo que es un poco interesante. Pero en el fondo de mi mente, todavía me preguntaba qué define una textura, y esta sección se llama combos. Pensé cómo podría tomar esta cosa increíble aquí mismo y combarla con algo más que ya hemos cubierto en esta clase. Entonces, lo primero que me vino a la mente fue, ¿qué pasaría si hiciera un comportamiento de enjambre y mapeara el comportamiento de enjambre a la superficie de cada cubo? ¿ Eso sería posible? Entonces, lo que vamos a hacer ahora es, he escrito una pequeña nota aquí, que es tomar un descanso. Entonces, nos vamos a tomar un descanso. Estamos hasta el ejemplo 14, pero quiero detener este código que hemos hecho, y quiero hacer un pequeño archivo lateral e ilustrar lo que estamos haciendo en este archivo lateral, luego tomar este archivo lateral y fusionarlo en lo que vemos ahora mismo. Entonces, ¿cómo puedo trabajar en un enjambre que eventualmente mapearé a la superficie de esta animación de cubo? Cosas emocionantes. Terminemos este video, y nos vemos en el siguiente. Un pequeño descanso. Pasando al ejemplo 50. 49. Unidad 9, video 9: Está bien. Nos estamos tomando un descanso. Este archivo es un descanso, un poco de descanso, porque me pregunto en mi mente, ¿puedo usar HCanvas para una textura? Se podría mapear HCanvas a la superficie del cubo? Tengo el mapeo de JPEG, tengo el mapeo de PNG, tengo el mapeo de QuickTime Movies. ¿ Por qué no podría mapear un HCanvas a ese cubo? Creo que podemos hacerlo. Entonces, pensé, bueno, vale tomemos un descanso aquí, veamos el archivo 15. Expediente 15, ejemplo 15, te darás cuenta de que dice Enjambre y eso es porque quiero hacer un comportamiento de Enjambre. Ahora bien, si miro el ejemplo 15 y miro la carpeta de datos, tengo aquí a nuestro buen amigo color.jpg. Entonces, pensé que está bien, voy a usar esta información de color para mi Enjambre. Echemos un vistazo a esto. Tengo un HCanvas, HPixelColorist, tengo HsWarm, tengo HDrawablePool y tengo un HTimer. Entonces, vamos a combinar todas estas cosas juntas en un HCanvas porque en el fondo de mi mente, estoy pensando que voy a usar un HCanvas en la superficie del cubo. Observe el tamaño de mi película, es 1280 por 640. Ahora, lo he hecho a propósito para que cuando ejecutemos este archivo, me permita demostrar lo que está sucediendo visualmente. Ahora, 1280 es 640 veces dos. En la línea 12, creo una instancia de HPixelColorist y digo ir a buscar nuestro color.jpg. Yo solo quiero que sepas que vamos a estar aplicándolo al FillOnly. Ahora, mira las líneas 14 a 16, estoy creando un HCanvas pero nota el cambio. El cambio aquí es, que si no especificas ningún argumento dentro de HCanvas entonces simplemente adopta el ancho y la altura. Yo quiero hacer un HCanvas que solo sea 640 por 640, así que en la línea 14, digo que c1 es un nuevo HCanvas, 640 píxeles a 640 píxeles, AutoClear es falso y el desvanecido es uno, así que vamos a conseguir esa grabación lenta. Entonces ignora la línea 15, finge que ni siquiera la ves. Línea 16, h.Añadir (c1). En la línea 18, estoy agregando la imagen de color.jpg, y estoy poniendo su ubicación en un eje x de 640 y en este momento estoy hablando a través del código pero cuando lo ejecutemos, vas a estar como, “Oh, vale, yo consigo lo que está haciendo”. Estoy creando un HDrawablePool y vamos a dibujar 20 de ellos. Vamos a engendrar estas cosas en nuestro c1 Canvas, así que estamos pintando nuestros HRectAngles en c1. Tenemos un onCreate, nota que no hay requestAll y no hay requestAll porque estamos usando un temporizador para adjuntar cada uno de los artículos a nuestro Enjambre cada 250 milisegundos. Ahora, en nuestro OnCreate, puse esas cosas que habíamos hecho en un archivo anterior de Enjambre que era como fuegos artificiales, dispararon en diferentes posiciones. Yo quiero usar eso en este. Entonces, yo hago rotación de flotación = aleatorio (TWO_PI), el tamaño del Drawable aquí es de 100 píxeles por dos píxeles, no hay trazo. El lugar es 320 en la X y 320 en la Y. Así que de nuevo, si toda nuestra película es de 1280 por 64 entonces sólo estoy haciendo el punto Enjambre en el lado izquierdo de la pantalla, 320 por 320. Voy adelante y meto en esa cosa que pongo en el Enjambre anterior donde estoy haciendo los radianes de rotación a la rotación y el movimiento, Cosine tiempos de rotación 10 y tiempos de rotación sinusoidal 10 y el Anchorat está en h.centro. También estoy haciendo los Colors.applyColor de un HPixelColorist que está agarrando color de color.jpg. Malvado. Ahora, estoy creando un HSwarm y agregando D a ese HSwarm y estoy diciendo: “Oye, aquí están las propiedades que quiero que tengas”. El objetivo al que estás tratando de llegar es de 320 por 320, que también pasa a ser el punto de parto, tu velocidad es de 15, tu TurneASE es de 0.02, y tu twitch es de cinco. Ahora, aquí abajo en la parte inferior tengo un pequeño bucle de cuatro y estoy diciendo que recorremos todos los activos de la piscina y actualicemos su color a partir de los colores de HPixel. Entonces, a medida que el Enjambre empieza a moverse, está actualizando el color a medida que se mueve a través de este color.jpeg. Entonces, probemos este boceto y veamos qué intento ilustrar aquí. Enfriar. Entonces, la razón por la que hice este archivo de esta manera es para que en el lado derecho, se pueda ver sólo el color.jpg y yo estoy diciendo: “Mira, estoy cargando en este color.jpg y estoy usando su información de color para actualizar el Enjambre que se ve a la izquierda. Ahora, el Enjambre que ves a la izquierda, notarás que en realidad es un HCanvas. Entonces, hay un HCanvas que es 640 píxeles por 640 píxeles ahí mismo en ese lado izquierdo. El Enjambre está corriendo y está actualizando el color pero lo que estamos viendo a la izquierda es un HCanvas. Entonces ahora, quiero saber después de este maravilloso pequeño descanso que hemos tomado, ¿puedo usar este HCanvas que vemos aquí en el lado izquierdo, puedo usar este HCanvas para las seis superficies del cubo? Voy a enloquecer si funciona. Entonces, vamos a cerrar este ejemplo, pasemos al siguiente video donde vamos a hablar sobre el Ejemplo 16 y el Ejemplo 17. 50. Unidad 9, video 10: Está a punto de bajar ahora mismo, ejemplo 16 y ejemplo 17. Aquí es donde estoy tomando el ejemplo 15 y viendo si puedo fusionarlo con el ejemplo 14. Entonces, el ejemplo 16 es una fusión de esos dos archivos. Aquí va a haber mucho código, pero con suerte, has visto este inicio fácil y progresivamente se vuelve más complejo. Ojalá, a pesar de que es mucho código, has entendido los pasos que nos llevaron a este punto. Entonces, veamos el ejemplo 16. Le he hecho algunas cosas a este archivo, hay algunas pistas visuales y tendrá sentido cuando lo ejecutemos. Encima, solo copio y pegué todas esas cosas que acabamos de hacer en el ejemplo anterior 15. El Lienzo, el PixelColorist, el Enjambre, el Pool Dibujable, y el Temporizador. Si miras la configuración, he copiado y pegado todas las cosas del ejemplo 15, que es agregar el HPixelColorist, agregar el Canvas-One. Ya ves aquí, solo dice nuevo HCanvas. Toma un aviso, línea 19, este expediente vuelve a 640 por 640. Entonces, estamos de vuelta en nuestro tamaño de lona más pequeño, ya no estamos en 1280. Estamos de vuelta en 640 por 640. Línea 25, mantuve lo mismo. Acabo de decir, hagámoslo un HCanvas y ese lienzo es 640 por 640. Auto clear es falso, el desvanecido es uno. Ignora la línea 26, no la ves. Estoy agregando lienzo a bombo. El modo de textura es normal. Después agregué todo el código para la piscina en el temporizador. Entonces, la alberca sigue siendo la misma que en el ejemplo 15. Estamos dibujando 20 activos, está usando un HRectangle, está haciendo esa cosa de rotación de fuegos artificiales radianes. Estamos agregando un HSwarm al igual que hicimos en el ejemplo 15 y el Timer todavía va a disparar a estas cosas 250 milisegundos. Ahora, el resto del código son todos nuestros productos pre-pick. Entonces, si nos fijamos en este bucle de cuatro, eso es de antes, eso es del ejemplo 14. Donde estoy pre-escogiendo una ubicación aleatoria, pre-picking una escala aleatoria, pre-picking una rotación aleatoria para x, y y z Nuestros osciladores se han mantenido sin cambios desde el ejemplo dos. Ahora, veamos el sorteo. El sorteo, agregué ese pequeño bucle de cuatro para recorrer el pool y reget el color de cada PixelColorist en ese color.jpeg. Esta matriz push y pop sigue siendo la misma. Esto se mantiene sin cambios con respecto al ejemplo 14. Lo que es diferente es la función BuildCube y mira qué ciencia hice aquí. Dije por la textura, en lugar de tex, T-E-X, en lugar de ir a un conjunto de imágenes, acabo de decir: “Ve al lienzo y agarra los gráficos de él”. Eso lo he hecho por todas las caras. Entonces, notarás que la textura es c1.graphics para las seis superficies del cubo. Ahora voy a correr la película y te vas a dar cuenta de alguna maravilla pero está ahí por una razón y te lo explicaré. Cuando lo ejecuto, he dejado el HCanvas de C1 de fondo ahí. Entonces, puedes verlo corriendo pero luego también puedes ver que efectivamente está mapeando ese comportamiento de enjambre a las seis superficies del cubo. Entonces, tengo el comportamiento de enjambre sentado de fondo, se podía ver en movimiento y se puede ver que en realidad se está actualizando en las superficies. Entonces, eso es sólo una señal visual. Un momento santo de porquería, esta maldita cosa ha funcionado. Entonces, voy a seguir adelante y cerrar esto y voy a arreglarlo en el ejemplo 17. Entonces, si vas al ejemplo 17, lo único que es diferente es esta línea 26 aquí mismo, donde creo el HCanvas 640 por 640. Añado el HCanvas en la línea 27 pero en la línea 26 digo: “¿Se puede mover el lienzo como eje X como negativo 10,000. Al igual que básicamente, aléjate de mí. No quiero verlo. Yo lo necesito, está ahí, le estoy pintando, lo voy a usar como textura pero moverlo hacia fuera de pantalla para que no lo vea”. Entonces, ahí está nuestra línea 26, que es mover la exposición C1 Canvas negativa 10,000 píxeles. Entonces, ahora cuando realmente ejecutas tu boceto aquí, todo lo que estás viendo es que los cubos y el comportamiento del enjambre se mapean a las seis superficies de ese cubo. ¿ Puedo conseguir un aleluya? ¿ Puedo conseguir un amén? Entonces ahora, yo estoy como, “¡Oh Dios mío! El cielo es ahora el límite”. Ahora bien, si piensas en esto, cualquier cosa que hayamos aprendido en esta clase, interpolación, la rotación, el comportamiento de enjambre, siempre y cuando lo estemos pintando a un HCanvas, en realidad podemos mapear ese HCanvas como textura sobre este superficie. Ahora, podrías haberte dado cuenta de que lo único que estamos viendo ahora son estos cubos transparentes y si querías podrías venir aquí a la función BuildCube entonces te darás cuenta, mira la línea 146. Yo comenté esta línea 146 pero veamos esto. Si comento la línea 147 que no es trazo, no relleno y realmente pongo la línea 146 atrás, que es un peso de trazo de uno y un color de trazo de gris, en realidad puedes ejecutar este boceto ahora. De hecho, aquí vamos a hacer esto un poco más grande. Hagamos de esto un peso de trazo de cuatro. No sé si el trazo de ese color gris va a ser un n, eso funciona bien. Entonces, se puede ver que las cajas, se puede ver su rotación y se obtiene este patrón realmente interesante del enjambre corriendo por la superficie de ese cubo que es hermoso. Ahora, voy a volver a poner esto a la forma en que lo teníamos. Entonces, voy a comentar la línea 146. Voy a volver a poner 147. De nuevo, es increíble. En realidad estoy usando todo este entorno para realmente ocultar el clúster de cubos. En realidad no me interesa ver quizá los cubos pero me interesa más la abstracción del comportamiento de enjambre que se mapeen a los cubos y ahí está donde está la magia. Ahora, voy a terminar este archivo y literalmente nos quedan tres videos. Va a haber uno por ejemplo 18, uno por ejemplo 19 y otro por ejemplo 20. El propósito para estos próximos archivos era otra vez yo sólo iba, “me pregunto”. Lo que me pregunto fue, te voy a dar una pequeña pista, es subir aquí y mirar la línea 20. línea 20 es el escenario y notarás que el fondo es de apenas 20-20-20. No fue hasta que probé esto dijo: “¿Qué pasaría si no despejara auto el escenario?” Si no despejara auto el escenario, dejaría senderos, ¿no? Entonces, guardé este archivo, corrí este boceto, y conseguí esto. Entonces, pensé que necesitamos hacer algunos nuevos archivos. Adelante y terminemos este video y vamos a pasar al ejemplo18. 51. Unidad 9, video 11: Ejemplo 18. Estamos bajando a los últimos videos aquí, y chico hace este proceso, esta experimentación de lo que ifs, y me pregunto qué pasaría si hago x, y, y z Toma un giro extraño, y como mencioné en el último video, todo lo que tenía que hacer, fue agregar ese AutoClear (falso) al escenario principal, que es, “Hey tienes estos cubos moviéndose. ¿ Por qué no los pintamos y vemos qué pasa?” Está bien. Entonces, agregué ese AutoClear (false). La otra cosa que cambié es, es que cambié HDrawablePool para ser solo un activo. Entonces, ahora, sólo hay un comportamiento de enjambre que se está mapeando a cada una de las seis caras porque pensé que 20 eran demasiados. Sobre todo porque conseguirías esas rotaciones en el exterior, crearía este anillo, y de nuevo hacía que los cubos fueran demasiado visibles. Me gusta esta idea de usar este clúster 3D totalmente loco, pero escóndelo de una manera que si la gente viera los archivos, tal vez ni siquiera reconocieran que estaba usando cubos 3D para hacer esto en primer lugar. Entonces, para marcar eso hacia abajo, cambio HDrawablePool por ser uno. En este archivo 18, esos son los únicos cambios, ya que agrego este AutoClear (false) y dejo caer el pool abajo a uno. Entonces, sigamos adelante y ejecutemos este boceto y ahora al soltar el enjambre a un activo, el cúmulo de cubos casi se ha desvanecido. Correcto. Ya ves, tienes este sistema de pintura, pero es difícil identificar realmente cómo es esto la pintura. Correcto. ¿No es eso asombroso? ¿ Habrías pensado alguna vez que cuando empezamos esto por primera vez, atrás en el ejemplo uno en el uso de estos cubos tridimensionales, que llegaríamos a un ejemplo 18 donde escondo el sistema que en realidad está generando estos patrones? ¿ Lo sabrías? ¿Sabrías incluso que esto fue generado por un montón de cubos tridimensionales? Ahora, oh hombre eso fue realmente bonito. Entonces, estoy pensando en esto y creo que esto necesitaba algunos ajustes. Una es, sentí que tal vez debería haber algunos momentos de calma. A lo mejor el enjambre corre demasiado rápido. A lo mejor necesito cambiar la velocidad o la rotación es, que tengamos estos momentos, y entonces tal vez simplemente no se pueda resolver lo suficientemente rápido, y así hay una pausa, y luego vuelve, y luego lo ves deslizar. Otra cosa que es interesante en este archivo en particular, es que no estamos usando ninguna luz. No estamos usando ninguna luz puntual. Entonces, estamos obteniendo el color al 100 por ciento de saturación, y al agregar una luz puntual significaría que si tuviera esta caja que tenía seis superficies, y se giró ligeramente así, y si tuviera una luz puntual por aquí, ese significaría que el comportamiento del enjambre obtendría la luz en esta superficie, pero comenzaría a oscurecerse en esta superficie. Entonces, pensé que al usar luces puntuales en este entorno, realmente podría empezar a controlar el sombreado de este entorno. Porque ahora mismo es muy plano, muy psicodélico, pero quiero agregar algo más de rango tonal, y creo que eso es precioso, creo, lo juro por Dios, esto es lo que hago. Se me ocurre ideas locas, batshit, nueces, y codifico estas cosas y me siento aquí como, es increíble. Eso es lo que hago. Eso es lo que hago. Simplemente me siento por ahí tratando de sorprenderme. Hilarante. Está bien. Cerremos esto, eso también se ve muy bien, pero se ha ido. Cerremos este archivo y pasemos al ejemplo 19 en el siguiente video. 52. Unidad 9, video 12: Estamos en el ejemplo 19, y voy a implementar algunas de esas sugerencias que mencioné en el video anterior. Entonces, si vuelvo al ejemplo 18, veamos algunas cosas aquí. El número de cubos es de 20, la escala min y max es de 40 y 120. Si miramos al enjambre la velocidad es de 15, la facilidad de giro es de 0.02 y el twitch es de cinco. Hagamos algunos ajustes. Si pasas al ejemplo 19, muevo cubos num a 13. Pensé que 20 es simplemente demasiados. Necesito estos momentos de espacio. Entonces, muevo el número de cubos hacia abajo a 13. También aumento la escala máxima, por lo que notarás que la escala min ahora es de 50 y la escala máxima ahora es de 150. También cambié el tamaño del lienzo, 900 por 900. Quería un área de visión más grande para pintar en lugar de 640 por 640. No obstante, eso no afecta al lienzo H. El lienzo H puede quedarse en 640 por 640. Entonces, no importa lo que cambiemos el ancho y la altura del lienzo principal ya que, mientras el enjambre y el lienzo H sigan pegando a ese 640, todo va a salir genial. Está bien. Abajo en el enjambre, facilidad de giro se ha marcado hacia abajo. Entonces, en lugar de 0.02, ahora es 0.01, así que es un poco más lento, ¿de acuerdo? Entonces pensé, bueno, la otra cosa que probablemente quiera actualizar es la X aleatoria y la Y. en el ejemplo 18, es negativo 300, positivo 300 para X e Y. En 19, lo estoy haciendo 400 en el negativo y 400 en el positivo. Entonces, ahora cada uno de los cubos puede salir un poco más, ¿verdad? Eso tiene sentido porque nuestro lienzo ahora es 900 por 900, por lo que abriéndolos, solo significa que el clúster va a estar un poco más espaciado. Cada alberca dibujable sigue siendo una, por lo que todavía tenemos una sucediendo dentro de nuestro enjambre. El siguiente actualización es un punto de luz. Entonces, observe que al agregar una luz puntual, ahora está consiguiendo algo de sombreado en los objetos tridimensionales. ¿ De acuerdo? Entonces, nuevamente mira esta luz puntual, es una luz blanca 255, 255, 255. El posicionamiento de la luz está en el centro exacto, ancho dividido por dos, altura dividida por dos, y la he jalado un poco hacia arriba al eje Z de 100. Ahora bien, si un cubo fuera así, eso significaría que la luz está brillando perfectamente en esta superficie. Entonces, verías el color que se está muestreando de cada colorista de píxel en toda su gloria del arco iris. No obstante, si el cubo estuviera en esta posición, la luz estaría golpeando esa superficie y habría algún sombreado por cada uno de los lados de estas superficies. Entonces, no estarías recibiendo el color de cada colorista de píxel en su saturación 100 por ciento brillante. En realidad comenzaría a oscurecerse. Ahora, imagina que está moviendo todo el clúster, así que incluso va a empeorar, ¿verdad? Entonces, a medida que todo el clúster empieza a girar, algunas cosas van a llegar al frente y algunas cosas van a estar todo el camino por aquí atrás, y probablemente van a ir hasta el negro. ¿ De acuerdo? Esto va a funcionar en realidad a nuestro favor porque va a parecer que es una carrera, ¿verdad? Entonces, algo se moverá al frente, pintará una gran franja de color, y luego como la cosa gira alrededor y algunas de estas sombras más oscuras en los cubos va a ser de color negro en el enjambre, realidad lo haría comenzará a borrarse. Se verá como si estuviera borrando. Adelante y ejecutemos el boceto y veamos exactamente de qué estoy hablando. Entonces, ahora en realidad empezamos a conseguir algún rango tonal, y mira esto, ya ves ahora el enjambre está en realidad presentando un poco de negro, porque esa luz puntual no está golpeando esa superficie justo desde el frente. Porque cambiamos la facilidad de giro a 0.01, mira esto, tenemos como un momento de calma y solo estamos esperando. Estamos a la espera de que el enjambre se resuelva de nuevo a una posición para pintar algo. Eso podría suceder rápidamente, y eso podría llevar algún tiempo. Porque tenemos un twitch de cinco, técnicamente esto lo está noqueando, por supuesto, así que no vemos nada. Ahora, entra a la vista. Entonces, hace este bonito golpe y luego desaparece, ¿verdad? Entonces, el enjambre se encuentra a través de él y luego se mueve. De nuevo, estamos consiguiendo ese rango tonal porque estamos usando luz puntual. Espero que estés enloqueciendo ahora mismo. No viste venir esto. Whoa, hermosa. No tienes - la mayoría de la gente- shh, es nuestro secreto. Es nuestro secreto no le digas a nadie la magia detrás de esta porquería de Mago de Oz. ¿ Todo bien? Porque he cambiado ese enjambre de esa manera, consigo estos momentos de calma y realmente soy capaz de mirar esto y esperar el siguiente golpe y ver qué formas va a crear. Pero aquí está lo interesante, porque estás mapeando el mismo enjambre a las seis superficies, ahí está la familiaridad. ¿ Verdad? Entonces, a pesar de que tienes 13 cubos y esos 13 cubos se están moviendo, todos están mapeando el mismo comportamiento que una textura. Entonces, cuando se desliza en verde, se desliza en verde en los 13 de estos cubos. Si se desliza de color rosa, se desliza de color rosa sobre los 13. Entonces, de repente empiezas a notar, oh, espera un minuto, está haciendo algo en diferentes lugares de la pantalla, pero todos estallan del mismo color al mismo tiempo. Hay algo en la animación que parece familiar en todos ellos, ¿verdad? Entonces, creo que para mí es lo que constantemente trato de hacer cuando estoy haciendo estas cosas, que es, ¿cómo puedo programar sorpresa, verdad? Yo quiero que me sorprenda. Yo quiero correr algo. Esto está tomando demasiado tiempo, ¿verdad? Yo me he dado por vencido en esa. Voy a cerrarlo y quiero volver a ejecutarlo, porque quiero volver a sorprenderme. Quiero usar la aleatoriedad para generar la sorpresa, pero quiero que se sienta que hay alguna familiaridad para que no se sienta totalmente aleatorio, como, saber definitivamente hay algo en juego aquí. Nuevamente, puedes ejecutar esto un número infinito de veces y obtendrás un número infinito de composiciones. Ahora, podría ser que el enjambre es solo que está tardando demasiado tiempo. ¿ Todo bien? Entonces, claro, estas pausas son demasiado largas. Entonces, si cierro esto, podría subir a enjambre aquí y digamos que le pongo facilidad de giro de nuevo a 0.02. Eso significaría que hace un mejor trabajo de volver a la vista, ¿verdad? Entonces, mira esto, nos dan unos lindos remolinos, oh, mira que ya está demasiado ocupado. Ves, es afinación fina, vale, genial. Ahí está, no, está respaldando otra vez. Mira, quiero unos momentos para vivir con esto antes de que vuelva a pintar, lo que significa, voy a tener que descifrar el número de oro para esa facilidad de giro, que me dé este movimiento, pero me da tiempo suficiente para apreciarlo antes de que pinte de nuevo. No sé cuál es ese número dorado. Podría ser 0.015, ¿de acuerdo? Entonces, tratemos de hacerlo más que solo uno, tal vez 0.015. De nuevo, me gusta ese negro que se cruza y empieza a borrarse un poco. Pero con suerte, estás asombrado de que estemos usando cubos para hacer esto. De acuerdo, esta es buena. Voy a mantenerlo en esto. Cerremos este video y vamos a pasar al último, que es el ejemplo 20. 53. Unidad 9, video 13: Está bien. Aquí está el último expediente de esta sección. Algunas cosas en las que pensar, si miras el ejemplo 20 y miras en la carpeta de datos, he cambiado color.jpeg. Esta es una fotografía tomada por mis amigos Cosy y Dan que hacen mucho buceo, y esto es de un tiro bajo el agua y es de algas. Lo que hice fue abrir esta imagen de algas dentro de Photoshop, aplicé un desenfoque gaussiano para que como no quería desenfocar un poco la imagen. Entonces, me desmayé con como un desenfoque gaussiano de como 10 o algo así. Entonces le aplicé algo de ruido, se puede ver que en realidad está quizá un poco pixelado. Después usé la herramienta de afilar, para afilar ese ruido. Entonces obtienes este tipo de granulado borroso fotón, y pensé que la granulosidad recogería tal vez realmente agradable y h pixel colorista. Por lo que note, que en este proyecto de ley 20 hay una nueva imagen de la que estamos tomando muestras de color. Está bien. ¿Qué ha cambiado en este archivo aparte de un nuevo jpeg? Bueno, modifiqué un poco a TurneASE, así que estoy haciendo 0.017 otra vez tratando de encontrar ese tipo de número dorado. Aparte de eso creo que prácticamente todo ha permanecido igual, salvo que cambié las luces puntuales. Entonces, en el ejemplo 19, la luz puntual estaba directamente en el centro. Ahora, he añadido dos luces, ambas luces son blancas pero están brillando por los lados. Entonces, si nos fijamos en las líneas 112 y 113, 255, 255, 255 así las luces son blancas. Pero el primero es cero en la altura del eje X dividido por dos en el eje Z de 100 por lo que la luz está brillando en el lado izquierdo. Entonces la línea 113 es la exposición es la altura de ancho dividido por dos. Entonces, tengo dos luces blancas ahora brillando a ambos lados del escenario. Ahora bien, ¿recuerdas cómo dije antes que sólo necesitaba frenar un poco las cosas? Bueno, hay un pequeño truco. Lo que he hecho aquí en la línea 22 es que he frenado la velocidad de tramas de procesamiento. Creo que por defecto la velocidad de fotogramas es de 60. Entonces, aquí estoy reduciendo la velocidad de fotogramas de procesamiento a una velocidad de fotogramas de 30. Entonces, he cortado el tempo de todo lo que se mueve a la mitad. ¿ Todo bien? Aparte de eso creo que todo lo demás sigue igual. Adelante y probemos el boceto y veamos qué obtenemos. Entonces, se puede ver que se ralentiza un poco. Se está tomando un poco más de tiempo para dibujar estas curvas y de nuevo es el muestreo del nuevo jpeg así que estamos consiguiendo unos bonitos colores chocolate y menta, un poco de pausa aquí y luego boom entra con la miel dorada. Chip de chocolate de menta y miel, ese es el nombre de esta pieza. Entonces puedo ver esto por días, y vas a conseguir algo diferente, ¿verdad? Porque hay tantos eventos aleatorios sucediendo que se va a desplegar para ti dinámicamente igual que se está desarrollando para mí en este momento. Entonces, esto realmente termina esta sección que está tratando llegar a una idea y realmente explorar el proceso de esa idea pero realmente se trata de combos, se trata de combinaciones, se trata de tomar todas estas cosas que hemos aprendido y tratando de que trabajen juntos para crear esta súper sorpresa. No tenía ni idea al final de esto, no tenía ni idea de por qué nos embarcamos en este viaje que iba a llegar a este tipo de estructura de pintura. Poco sabía que iba a trabajar todo este entorno 3D para tratar de ocultarlo de ti. No sé si hubiera descubierto esto, si no estuviera dispuesto a recorrer el camino y de eso se trata, es andar por el camino probando cosas ¿qué pasa si cambias este número? ¿ Qué pasa si cambias ese número? ¿ Y si tratas de mapear esta cosa a eso? ¿ Y si intentamos cambiar a un SVG en lugar de cada rectángulo? ¿ Y si ahora está moviendo un triángulo? Aún no lo has hecho, tal vez eso es lo que haces, tal vez tomas uno de tus dibujos que hiciste en primera clase y lo estás mapeando al comportamiento Enjambre en lugar de en la línea 33 usando cada rectángulo. Es que siempre cuestionando qué si, qué si, qué si, qué si, que yo pasara sobre estos felices accidentes porque eso es lo que son estos, estos son felices accidentes explorativos. Está bien. Echemos un vistazo a todo lo que tenemos yendo por nosotros. Cubrimos hRotate, cubrimos HCanvas, cubrimos HFollow, cubrimos HTimers, HTween, HSwarm, Hoscillator, y luego ejecutamos un proceso de combinación. Tenemos una última sección, y así es como diablos saco esto, entonces cómo tomo esta cosa que estoy haciendo. Oh, mira eso, oh aquí viene la menta, aquí viene la menta en la parte superior de mi chocolate y miel. Es una menta fresca. ¿ Cómo sacamos esto? Yo quiero publicar esto en Vimeo maldita sea. O quiero hacer un Gif animado. Entonces, el siguiente apartado, va a tratar con la salida. ¿ Cómo renderizamos esto a una secuencia de imágenes? Hemos aprendido muchas maneras realmente fantásticas de, oh Dios mío eso es bonito, eso también es bueno. Siento que este video pudiera ser de seis horas, literalmente podría ver esto por seis horas. Entonces, pasemos a la siguiente sección que es de salida pero no sólo quiero que pruebes cosas con algunas de las cosas que hicimos en la clase anterior, pero constantemente quiero que siempre te estés preguntando qué si, porque qué pasa si significa que vas a tomar algunos de estos archivos y hacer tus propias mutaciones, y eso es lo que va a pasar en la sección de proyectos de esta clase. ¿ Eso qué pasa si? Y esto es lo que hice y eso qué si y esto es lo que hice, y pongo esta imagen con este tipo de información de color y mira cómo cambió. Siempre hay esa experimentación que va a revelar lo inesperado. Está bien. Pasando a la salida. Nos vemos en el siguiente apartado. 54. Introducción a la salida: Y ahora estás en la sección final de la salida, y para mí esto es envolver todo lo que hemos aprendido en esta clase y sacarlo en algo que podamos usar en el mundo. Entonces, lo que va a pasar es que en realidad vamos a renderizar estas animaciones a secuencia de imagen.. Correcto. Entonces, aprenderemos sobre cómo escribir el código para crear una carpeta y en realidad empezaremos a generar cada fotograma de esta animación, que estamos haciendo generativamente a una secuencia de imágenes, y esta sección también me permite mostrar algunas herramientas externas que en realidad uso con el único propósito de crear salida. Entonces, vamos a usar un pequeño programa de script de manzana para apuntar a esta secuencia de imágenes y en realidad construir una película de tiempo rápido. Genial! Una vez que lo tengamos en la película quicktime ¿qué otras aplicaciones utilizo para moverlo a MP4? Porque nuestro archivo de película va a ser un poco grande. Entonces, en realidad quiero mover mis archivos de un formato de película a MP4, y voy a usar un programa totalmente separado para crear eso. ¿ Cómo puedo usar algunas otras herramientas para realmente reflejar o crear un caleidoscopio de la animación que acabamos de crear? Otra cosa por la que estoy súper loca es la reflexión. ¿ Cómo podemos conseguir esta salida en gif, en el formato gif animado? Entonces la salida va a básicamente sólo mirar todos estos comportamientos que hemos pasado todo este hermoso tiempo creando juntos y ponerlo en un formato que podemos publicar en línea y de nuevo para mí ha sido Tumblr. He estado creando estas animaciones de 30 segundos que habían estado dando salida a tumblr. Entonces, ¿cómo tomamos estas animaciones generativas y las metemos en un formato que podamos publicar a tumblr o podemos usar en un video musical? Al igual que lo hice para el gram fantasma. Entonces te mostraré cómo creé algunas de estas animaciones de gram fantasma que se usaron en el video musical. Entonces, salida dulce amargo pero bienvenido al final. 55. Unidad 10, video 1: Perdón. Esto es todo. ¿ Dónde diablos estamos? Estamos en salida, y esto es todo. Esta es la magia que has estado esperando. Si descargas el zip que está asociado a este archivo, lo que hice fue, es que entré en combos y tomé el ejemplo 14 el cual solo pensé que era un boceto hermoso para que nosotros renderizáramos. Tenemos animación, ahora quiero sacarla. Entonces, ahora mismo tengo el ejemplo 14 abierto, y lo que quiero hacer, es cada vez que se ejecuta la función de dibujo, básicamente quiero pintar la pantalla, y luego capturar esa imagen. Está bien. Entonces, si miras el ejemplo 14 dentro de combos, vas a ver que en la línea 99 es la línea que me interesa. Ahora, déjame solo comentar esto, y déjame ejecutarlo para que veas cómo se ve el ejemplo 14. Es este tipo lo que es, es simplemente bonito. Está bien. Entonces, quiero dar salida eso a una secuencia de imágenes. Ahora, en el caso de mi proyecto Tumblr, una de las restricciones es que va a ser una animación de 30 segundos. Entonces, si estoy compilando una animación de 30 segundos a 30 fotogramas por segundo, entonces sabría que quiero 900 imágenes, y así que veamos esta línea. En realidad son dos acciones aquí, y aquí está la primera, que es que quiero guardar el marco, y así, dentro de marco guardado, he hecho algo único que es, digo que subas a un directorio, crear una carpeta llamada frames, y ahora empezar a guardar una secuencia de tiffs, y estos signos de libra van a ser reemplazados por el recuento de fotogramas. Entonces, de repente, el primer expediente va a ser 000000001, y luego dos, y luego tres. Por lo que va a ahorrar una secuencia de tiffs. Ahora, mientras eso está pasando, tengo un poco condicional aquí que dice, si el conteo de fotogramas ha llegado a 900, entonces sé que tengo 900 tiffs que puedo compilar en una película a 30 fotogramas por segundo serían de 30 segundos de animación. Si llega a un conteo de fotogramas de 900, en realidad va a salir del programa. Entonces, todo el boceto colapsará. Está bien. Entonces, déjame solo hacer esto aquí mismo que es, voy a traer esta carpeta. Permítanme sólo posicionar esto a la izquierda, y permítanme posicionar esto aquí arriba. Entonces, aquí está ese ejemplo 14, y dentro de ahí está mi build.pde. Está bien. Entonces, ahora tengo este código aquí sin comentarios. Entonces, sigamos adelante y ejecutemos esto y el boceto. Mira. Acaba de crear una carpeta de marcos, y si realmente abrieras esa carpeta frames, verías esto crecer ahora mismo 253 elementos, 300 elementos. Entonces, como esta animación se está ejecutando, está capturando la animación a un tiff, y eventualmente, esto va a acumular hasta 900 imágenes. El conteo de cuadros va a llegar a 900, y va a apagar esta animación, así como así. Entonces, en realidad salió de este boceto, y se puede ver ahora tengo 900 imágenes dentro de esta carpeta llamada frames. Entonces, si fuera a destacar el primer tiff, ahí está. En realidad puedo hacer clic en la flecha hacia abajo, y ves que me estoy moviendo a través de la secuencia de las imágenes, y de hecho ha renderizado cada una de estas tiffs fuera. Ahora, puedes renderizar cualquier tipo de imagen; jpeg, png. A mí me gustan las tiffs, porque las tiffs están sin comprimir. Son archivos crujientes, crujientes. Correcto. Entonces, no tengo que preocuparme. Si voy a un jpeg, me preocupa tal vez conseguir algo de compresión jpeg. Entonces, tiendo a gustarme emitir mis imágenes como tiffs, esa manera cuando estoy construyendo una película, la claridad de los activos que se están capturando son lo mejor que puedan ser. Entonces, tiff es lo que uso. Aquí puedes ver dentro del buscador que cada una de estas tiffs es de 1.2 megs. Entonces, dependiendo de la duración del video, vas a empezar a comer aparte espacio del disco duro en realidad bastante rápido. Está bien. Entonces, ahora hemos agregado la última pieza de código para la salida. En el siguiente video, solo te voy a mostrar un pequeño truco que uso para compilar esto a una película de QuickTime, y luego publicarlo a un mp4. Está bien. Nos vemos en el siguiente video. 56. Unidad 10, video 2: Pensé que tomaría este último video aquí solo para compartir un par de trucos que utilizo al preparar algunas secuencias. En el último video, rendimos 900 tips. Aquí están todos estos consejos y de nuevo, ahora es una animación. Usuarios de PC, lo siento probablemente no voy a ser mucha ayuda en un PC porque obviamente uso un Mac en las dos recomendaciones. Este es el software de Mac. No estoy seguro si hay versiones de PC o no. El primero es que vas a buscar en Google esta palabra aquí mismo, Sequimago. Seguro. De nuevo, vas a buscar en Google esto. Esto es para Macintosh y esto es sólo un gran pequeño programa que me gusta usar para tomar estos consejos y en realidad compilarlos en películas de QuickTime. Entonces, ya he descargado. Este es un guión de Apple. Ya he descargado este script de Apple y en realidad está sentado en mi carpeta de aplicaciones y sucede que lo he arrastrado a mi barra de tareas, en mi barra de búsqueda aquí. Porque siempre estoy construyendo películas para que puedas ver aquí mismo Aplicaciones Sequimago. Mira cómo funciona. Entonces, lo que hago es entrar a una carpeta, en este caso, tengo 900 imágenes y solo voy a hacer selecto todo. Entonces, todo lo que voy a hacer es, cuando tenga seleccionadas todas estas 900 imágenes, en realidad voy a arrastrarlas hasta este pequeño guión de Apple. Una vez que suelte, se va a abrir este cuadro de diálogo y dice, bien por favor nombra esta película que quieras crear. Entonces, solo llamemos a esto renderizado. Entonces voy a seguir adelante y hacer clic en guardar y luego obtienes una nueva ventana que diga, escucha necesitas seleccionar el cronometraje para esta secuencia de imágenes. Puedes hacer fotogramas por segundo o segundos por fotograma. Ahora, sé que quiero hacer 30 fotogramas por segundo porque por eso rendericé 900 imágenes. Entonces, hago clic en este botón central aquí, marcos por segundo. Dice, por favor ingrese un cuadro deseado por segundo. Yo sólo voy a seguir adelante y entrar 30. Voy a seguir adelante y hacer clic en Entrar y luego los creadores de este guión de Apple querían saber como, “Oye, ¿querías que ordenáramos las imágenes por nombres de archivo antes de procesarlas?” Voy a seguir adelante y decir que no porque ya es una secuencia de imágenes. Eso lo he hecho por ti, así que no necesito que hagas esto por mí. Entonces, voy a seguir adelante y dar clic en no. Al hacer clic en no, notarás que tu cursor cambió a este pequeño ícono aquí. Aquí está el archivo rendered.MOV que actualmente se está escribiendo y te darás cuenta aquí dentro de mi dock, el script de Apple se está ejecutando de hecho. Ahora bien, este proceso de render va a estar realmente determinado por la cantidad de RAM que tienes y demás. He notado que cuando hago una secuencia de imagen de 900 fotogramas como esta, lleva unos segundos. Esto quizá tardará de 30 a 40 segundos en renderizar esta película pero eso es porque esta máquina en particular, está hecha. Entonces, tardó alrededor de 30 segundos. Esta máquina en particular tiene 32 gigs de RAM. Mi laptop solo tiene alrededor de 8 gigs de RAM y a veces una película renderizado podría tardar de 15 a 30 minutos. He visto a algunos tomar hasta dos horas, tres horas. Entonces, realmente varía en cuanto tiempo se tarda en construir estas películas de QuickTime. Voy a cerrar eso. Entonces, esto es lo que hace este script de Apple es en realidad giros, y no sabía cuánto tiempo tardaba así que en realidad hice uno pre-renderizado de Betty Crocker pero claramente no lo necesitamos. De nuevo, puedo seguir adelante y hacer clic en este archivo MOV y lo suficientemente seguro es QuickTime player. Puedes seguir adelante y jugarla. Está corriendo 30 cuadros por segundo. Se ve exactamente como nuestro boceto a excepción de esto es video renderizado. Esto obviamente no va a ser aleatorio. Es sólo una reproducción de un momento aleatorio. Ahora bien, este es un archivo MOV y si en realidad selecciono este archivo MOV y hago clic en info en él, se puede ver que esta película es bastante grande. A pesar de que es de 30 aquí duración, se puede ver que son sólo 30 fotogramas por segundo, esta película renderizado es de 98.7 megs. Me parece un poco grande. Entonces, en realidad quiero renderizar esto en un MP4. Entonces, esta es la segunda pieza de software que me gusta mucho usar que solo me ayuda a arrancar películas a otros formatos y ese es este tipo de aquí, iSkySoft Video Converter que tengo aquí mismo. Si sigo adelante y lanzo eso, dice que puedo arrastrar cualquier película a esta área y emitirla a cualquier otro formato. Nuevamente, puedes explorar todos estos formatos diferentes que esto también puede renderizar. Si agarro esta película de QuickTime, en realidad puedo dejarla ahí mismo. Ya tengo MP4 seleccionado y mira esto. Dice que el material fuente es de 640 por 640, 30 cuadros por segundo. Son 98.7 megs. Sólo quiero que sepas que todavía va a ser 640 por 640. Todavía van a ser 30 segundos pero van a ser 7.6 megs. Entonces, sigo adelante y hago clic en convertir. Se tarda dos segundos frioleros. Ya está terminado. Te dice: “¡Felicidades! Has rendido un MP4”. Adelante y haga clic bien. Puedo hacer info en este MP4 y seguro, no es 7.6 megs. Es 25.2. Mientes, software. Mientes. Pero no es 98 y estoy bastante contento por eso. Entonces ahora, si solo dejo esto a un lado aquí, te darás cuenta de que aquí están los dos archivos uno al lado del otro. MP4 de nuevo, se ve muy parecido al QuickTime así que Josh está contento y termina siendo el MP4 que termino compartiendo en Tumblr cuando estoy listo para publicar esto o a Vimeo o a cualquier servicio de video que utilices. Hay otra cosa que me gusta mucho de este convertidor de video iSkySoft. Hay otra razón por la que me gusta y eso es porque tiene esta función de espejado. A mí me gusta mucho la reflexión. Podrías hacer algún espejado caleidoscópico y estoy seguro de la aplicación de edición de video de tu elección, ya sea sus Aftereffects o Premiere o lo que sea que otras personas usen, pero de nuevo esto es simplemente agradable y fácil. Si miras aquí, si tomo este video que arrastré, notarás que justo aquí a la derecha hay un lápiz y si hago clic en este lápiz, me da algunas opciones de edición como puedo recortar, ajustar, agregar algunos efectos, marca de agua, subtítulo, así sucesivamente y así sucesivamente. Entonces, en realidad quiero ir a efecto y si hago clic en efecto, te darás cuenta aquí mismo es espejo y todo lo que hace es solo toma tu archivo de video y lo refleja. Eso está bien pero no sé si así es exactamente como lo hubiera hecho. Enfriar. En realidad puedes hacer clic en ajustar. Si haces clic en ajustar, notarás que tienes la capacidad de girar 90 grados. Entonces, en realidad podría cambiar la rotación para llegar a algo que tal vez me guste o tengo la opción de intercambiar verticalmente e intercambiar horizontalmente para que en realidad pueda hacer clic en estas herramientas aquí mismo para ver si consigo una reflexión que me pensar es lo más óptimo. Una vez que hayas terminado, déjame ver si puedo darle la vuelta a esto. Eso es bastante bueno. Voy a ir click hecho. Voy a seguir adelante y hacer clic en convertir. Te darás cuenta de que tarda unos segundos para que esta cosa se renderice pero en realidad está renderizando un nuevo MP4 así que el primero fue un MP4, el segundo es dos MP4 y así ahora realmente puedo dejar esta aplicación en esta cosa aquí a un costado. Tengo un MP4 que es el render original de mi pieza y el segundo muestra el reflejado. Simplemente me gusta usar esa herramienta porque me permite tratar muy rápidamente de usar posibilidades de reflexión. Si miras algunas de las piezas que están en Tumblr, he usado esto y abusado de esto. Lo he usado más que en una ocasión. Estos son dos programas que uso para ayudar a construir mis películas de QuickTime y renderizarlas a MP4 y luego probar algunas posibilidades como la reflexión. Está bien. Hemos llegado a la última película y esto ha sido fantástico. Espero que esto sea sólo el inicio de su viaje. Como siempre, como el primero, constantemente voy a estar mirando los proyectos que ustedes someten. Esperemos que vayas a intentar agregar algunas cosas que hiciste de la clase anterior. Esperemos que algunos de estos archivos te hayan inspirado a probar nuevas mutaciones y por favor publique todo lo que puedas dentro de la sección de proyectos porque me inspira tanto como inspira a algunos de los otros alumnos que toman esta clase. Al igual que la primera, nunca se sabe, me podría descarrilar totalmente por algo que publicas y puede haga una nueva sección como lo hice en la primera y ofrezca algunas mutaciones nuevas y te acompañe por esas. Pero eso sólo va a pasar cuando me inspires la porquería. Entonces, por favor que eso suceda. Me alegra decir que en realidad va a haber una tercera clase. Los maravillosos peeps sobre SkillShare están sumamente interesados en una tercera clase que va a ser hardware. En hardware, voy a empezar a cubrir algunas cosas como usar el Leap Motion para que realmente puedas pintar con los dedos. Probablemente nos adentraremos en los pasos de cómo usar un Microsoft Connect. También haremos algunas cosas con Webcam, usando la diferenciación de fotogramas para hacer algunas visualaciones maravillosas con Webcam. Probablemente nos pondremos en hacer algunas cosas con audio también. Si me has estado siguiendo en Twitter, he estado haciendo algunas cosas realmente divertidas con mínima detección. Entonces, espero que esa tercera clase solo encapsará cosas que usan cosas externas como entrada, ya sea sonido, micrófono, Webcam, Connect, Leap Motion. Entonces, habrá una tercera clase cuando encuentre otro conjunto de momentos para compilar una clase usando hardware. Entonces, Twitter, estoy en ello. Correo electrónico, me encanta. Por favor envíenme algunos comentarios y realmente espero que hayan disfrutado de esta clase y vamos a festejar pronto. Cuídate. 57. Processing 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, y eso también significaba que podrías usar cosas como Processing.js en ese momento. Pero ahora mucho ha cambiado, son cuatro años después, Processing.js realmente ya no es una cosa mucho pero p5.Js es el nuevo nuevo. Por supuesto, tenemos Procesamiento 3. Bueno, ya que estaba haciendo más sobre una base de aplicación y realmente ya no usando el navegador. En realidad actualizamos HYPE a una biblioteca de Procesamiento adecuada. Entonces, lo que he hecho es, es que 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 repo maestro. No obstante, solo quiero mostrarte que si haces clic en Sucursales, y dentro de Sucursales, hay puesta en escena lib. escena de Lib siempre es 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 se empuja a dominar. Entonces, porque queremos lo nuevo nuevo, lo secreto nuevo nuevo, vamos adelante voy a lib puesta en escena y tú 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. 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 esta guía. 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 medio de distribución, 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 comprima HYPE.zip, y creará esta carpeta llamada HYPE y solo vas a arrastrar esa carpeta a tu carpeta de Bibliotecas de procesamiento. Entonces, dentro de este HYPE debes 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 Procesando el 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, no deberías ver a HYPE ahí. Por lo que 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 quieres que emita tus cosas a JavaScript, no sugiero usar este entorno ni seguir adelante y mirar el proyecto p5.Js que está sucediendo, que es 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 Processing. Entonces, genial. Entonces, conseguimos esto dentro de Processing y solo por el carajo, si fuera a dejar esto a un lado y aquí están algunas de las clases de Skillshare y Gumroad en las que he estado trabajando. Te darás cuenta, si voy a Programming Graphics 001, 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, Dibujar Activos Visuales 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 build.pde, notarás arriba en la parte superior aquí que tenemos una nueva estructura, que es ahora que tiene una biblioteca de Procesamiento adecuada, tienes que importar HYPE como biblioteca externa. Entonces, en la parte superior, se puede ver he dicho hype.Asterix 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 una piscina 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 un ejemplo y decir: “Oye, quiero usar un oscilador”. Entonces, si miras osciladores te darás cuenta, “Oh, tengo que importar oscilador”. Eso significa que esto mantiene muy delgada la biblioteca HYPE, mientras que antes con hype.pde importarás todo aunque lo estuvieras usando todo. Entonces, esto es lean, esto es medio, es mucho más eficiente como una biblioteca de Procesamiento adecuada, importas las clases con las que quieres 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. Espero que esto ayude. Chatea pronto. 58. Más clases creativas en Skillshare: