Arte de código: aprenderás codificación creativa para generar imágenes con JavaScript

1. Introducción: Oye, bienvenidos al curso de producto, codificación creativa, arte generado, o como se llame, ¿qué son? Bueno, probablemente sea el territorio más inexplorado de esta época. ¿Por qué? Porque una vez que aprendes a crear arte con codificación, en realidad no hay límite. Esto se puede hacer. Esto, e incluso esto. No tienes los límites de los programas de efectos visuales. Es la combinación de lado técnico y diseño. La mejor parte, todo lo que necesitamos saber son conceptos básicos de JavaScript y HTML, lenguaje y las formas de crear. Utilizaremos algoritmos JavaScript en este curso. Porque hoy en día, JavaScript está en todas partes. Tendrás la oportunidad de hacer que tu proyecto interactivo con otras tecnologías cuando uses JavaScript, ¿ como qué? Así. Este fue un clip de la universidad. Crearemos partículas que escuches música y te comportas de manera diferente. Después de aprender este tipo, puedes usar entrada de audio en cualquier efecto que desees. Te sorprenderás cuando veas lo fácil que es hacer estas animaciones. Si ya conoces un lenguaje de programación, eso es una gran ventaja. ¿Bien? Bien, estas son muy buenas animaciones. ¿Qué puedo usarlos realmente? Depende de ti. Puedes crear tu propia colección NFT, subir a tu sitio web, ponerlos en tu portafolio, o simplemente hacerlos por diversión. grandes agencias ya están usando el poder del frío, la oscuridad, y muy pocas personas saben cómo usarlo. Únete a nosotros y aprende a dibujar con código antes de que sea demasiado tarde. 2. Antes de comenzar: Hey chicos, antes que nada, quería hablar de las herramientas que vamos a utilizar en este curso. Puedes descargarlas para seguir estas indicaciones. No tenga en cuenta que no son requeridos. Porque hoy en día hay muchas formas de hacer lo mismo, ¿verdad? Por ejemplo, usaré VS Code como ID, pero por supuesto puedes usar otros IDE, como Atom o Sublime Text o cualquier idea que quieras. Pero para los que quieran progresar exactamente de la misma manera conmigo, pueden descargar código VS aquí. Entonces el seguro de que instalas la versión correcta. Por ejemplo, estoy usando la versión interna de VS Code porque estoy usando un solo chip, puedes descargar la versión correcta desde su sitio oficial. Pero también estoy usando el sistema operativo macOS que usaré total ahora para crear carpetas, archivos. Por lo que podrías hacer los mismos pasos manualmente también. Porque al final sólo estamos creando carpetas y archivos, dejando especial desde la terminal. Para que pudieras hacer eso manualmente. Pero creo que pueden usar la línea de comando será una mejor opción para mí. Por lo que sugiero que los uses durante el curso. Muy bien, para macOS, usuarios, acaba de pulsar Command Space para abrir la búsqueda de Spotlight. Y tipo terminal. Aquí. Haga clic en Entrar. Entonces tu terminal está todo bombeado y estás listo para ir. ¿ De acuerdo? Para los usuarios de Windows, puede usar la línea de comandos, solo cobra por CMD. Abre tu línea de comando. Podrías usar eso para ambos sistemas operativos. Puedo sugerir hipertónico. Has hecho ir híbrido que ES, y descargado para tu sistema. Es lo mismo al final, pero la hipertensión sola tiene más personalizaciones y carta UI. Quiero señalar una cosa más para los usuarios de Windows. Es decir, algunos comandos no son iguales entre estos sistemas operativos. Utilizaremos mayormente para crear carpetas y tocar para crear archivos. Ok. Creo que el néctar es para sistemas operativos de robots, por lo que también es utilizable a mediados de marzo. tacto puede no ser, por lo que no se reconoce en Windows. Entonces cada vez que escribo touch command, puedes usar echo. Entonces, por ejemplo, digo, digamos que voy al escritorio. También podría usar el comando cd. Moverse por las carpetas. Cuando digo cd dot, dot regresa y digo CD porque lo son, así que vamos a crear un nuevo archivo en el escritorio llamado js. Podemos hacer esto revés usando comentario de compromiso, periodo, este expediente. Pero si no puedes hacerlo en Windows, solo puedes decir pruebas de laboratorio Eco. Este es el formato de parche equivalente. Ya que estoy usando macOS en este curso. Si algún comando no funciona en Windows, puedes comprobar desde Google la versión equivalente. Si no puede encontrar. No dudes en preguntarme si estás listo. Empecemos en el siguiente video. 3. Cómo empezar (Partículas): Sin línea de comentarios. Entra en el escritorio. O donde quieras crear tu carpeta. Voy a crear una nueva carpeta proyectos, y entraré en la carpeta de proyectos. Y aquí quiero crear dos nuevos archivos. Uno para HTML, y lo llamaré index.html. Mientras estoy para JavaScript, index.js. De acuerdo, así que ahora déjame traer aquí mi carpeta. Hemos creado dos archivos. Vamos a abrirlo con nosotros como frío en un segundo. ¿ De acuerdo? Entonces estos son los nuevos archivos que hemos creado. Así que abre index.HTML e index js también. En index.HTML, quiero escribir HTML, y quiero elegir éste, HTML5, porque queremos que complete de forma automática las plantillas HTML5. Entonces cuando hago clic en Enter, se puede ver que crea el cuerpo de la cabeza. Y así queremos crear una nueva columna Azteca en el cuerpo. Porque vamos a utilizar eso para nuestros visuales. Quiero dar una identificación para eso, Carlos. Carlos. Y también todos vamos a crear un script mecanografiado porque usaremos JavaScript. Y vamos a darnos force index js para que pueda entender que estamos llamando a funciones JavaScript desde este archivo. Así que guárdalo. En el índice js. Queremos conseguir ese objeto lienzo. Y luego conseguiremos su contexto y escribiremos todo usando ese objeto contextual. Para ello, usaremos el ID de los colores. Por lo que voy a crear una nueva variable llamada comas. Y podemos usar documentar ese elemento por función ID. Y si pasas aquí el DNI de mi lienzo, eso lo controlará. Es lo mismo. Esto nos puede traer la Cola de HTML5. Y entonces podemos conseguirlo contextos. Y quiero llamarlo CTX. Por simplicidad, escribiremos CTX muchas veces. Por eso voy a usar un atajo aquí. Para que podamos conseguir colas, aún no contextos. Los contextos funcionan así. Queremos conseguir context 2D para que podamos asignarlo a CTX para utilizar el objeto contextual. Entonces déjame simplemente bloquear TTX en la consola para que podamos entender mejor. De acuerdo, ahora mismo, voy a guardar esto y también deberíamos abrir el índice HTML en un navegador. Haz eso. Puedes hacerlo abriendo este índice HTML con Google Chrome. ¿ De acuerdo? Ahora he abierto esto. Esta es una pestaña de Chrome y acabaré de hacer esto para ver tanto el código como el resultado al mismo tiempo. Y en Chrome, haga clic con el botón derecho y diga Inspeccionar para abrir las herramientas de desarrollador. Aquí, quiero abrir consola. Por lo que en este momento acabamos de iniciar sesión el CTX y vamos a revisar qué es. Entonces este es un objeto de Carlos. Por lo que podemos ver algunas propiedades de ctx. Por ejemplo, el estilo de relleno, que se establece en negro en este momento. O fuente, que es de diez píxeles, sans serif, o ancho de línea, que es uno. Por defecto. No podemos ver funciones aquí porque vienen de herencia característica de JavaScript. Entonces si abro prototipo, se pueden ver algunas funciones que podemos usar. Por ejemplo, arco, vamos a utilizar para dibujar circuitos. Déjame sólo destrozar. Usaremos o actuaremos para dibujar rectángulos. ¿ De acuerdo? Bristol, lo usaremos para restaurar nuestro comercio o rotar el lienzo. Muy bien, entonces este es objeto CTX, y a partir de ahora usaremos mayormente ctx para cada acción en JavaScript. De acuerdo, así que vamos a seguir adelante y dibujar un rectángulo básico. En primer lugar, queremos empezar con los textos C, el gamepad. Esto es sólo decirle al navegador que estoy empezando a dibujar algo. Se puede ver esa función aquí. Y luego quiero dibujar un rectángulo. Y este rectángulo, se pueden ver las propiedades exponenciales, cosa correcta. Necesitamos x, y, ancho y alto. Bueno, voy a dar 100 por cada uno de ellos para este ejemplo. Por último, necesitamos especificar si queremos llenar este rectángulo. Queremos acariciar este rectángulo solo para resaltar los bordes. Permítanme solo comentar esta línea por ahora. Estamos llenando. Entonces cuando digo esto solo por archivo, no pasa nada porque este no es un servidor en vivo. Tenemos que refrescarnos. Y estoy haciendo esto presionando Comando R. Necesitas refrescar el navegador. Refrescar. Podemos ver nuestro rectángulo. Y si optamos por golpearme refrescar, nuevo, se verá así. Deberías preguntar aquí, ¿dónde está la línea de fondo? ¿ Verdad? No tenemos el lado inferior del rectángulo. Entonces permítanme explicar por qué sucedió esto. En primer lugar, acabamos de crear un Canvas, pero no sabíamos el tamaño del lienzo. En realidad. Permítanme simplemente hacer que el fondo de la amenaza de las vacas se ordene. Podemos ver nuestro Lienzo, refrescar la página. Por lo que esperamos que la vaca tenga que ser de pantalla completa. Pero lo contrario está justo aquí. Por defecto, no es pantalla completa. Por lo que aquí deberíamos especificar la columna era con y altura de comercio. Por lo que voy a decir Carlos peso, y acabaré de asignar ruta interna de Windows. Entonces de todos modos, está dentro del navegador, por lo que el área blanca. ¿ De acuerdo? Entonces es sólo de este lado a este lado. ¿ De acuerdo? Y para la altura, también podemos usar cuando no hay altura interior. Y puedes pensar en tu cabeza así también. Por lo que a veces puedes tener aquí URL y barra de navegación superior. Entonces la altura interior no contiene esa parte. Es sólo el área blanca. Cuando guardo esto y refresco la página, se puede ver que la Commonwealth está ahora con el mismo tamaño de nuestro ancho y alto interior. Pero hay un pequeño problema. Nuevamente. Eso es este byte regiones en la parte superior, izquierda e inferior. Entonces vamos a quitárselos también. Entonces deberíamos usar CSS solo para redimensionar el converse. No quiero escribir todo en línea, así que voy a crear un nuevo archivo CSS solo para esto. Así que déjame simplemente eliminar eso. Y también podemos añadir un enlace en la etiqueta head. Así que hagamos un índice CSS y guardemos este archivo. Por lo que aquí deberíamos crear un nuevo archivo que es índice CSS. Deberíamos llamarlos mi columna era etiqueta así. Entonces en este momento si actualizo la página, verás que no hay CSS. Ok. Porque acabamos de eliminar el color de fondo. Así que déjame simplemente hacerlo azul nuevo para que podamos entender si nuestro código está funcionando. ¿ De acuerdo? Sí, está funcionando. Entonces lo que quiero hacer aquí es primero, primer lugar, quiero poner posición a absoluta. Ok. Entonces porque no tenemos nada aquí, ningún padre e hijo o cualquier componente para renderlo. Entonces por eso sólo hay comercio. Por lo que podemos establecer su posición a absoluta y solo podemos forzar los valores superior e izquierdo a 0. ¿De acuerdo? Además, vamos, vamos a simplemente establecer anchura y altura también. Entonces lo es, estamos 100 seguros de que nuestro lienzo es totalmente lazos entre nuestro navegador. Ok. Esto es genial. Una cosa más quiero hablar de su rápido cambio. Simplemente eliminemos el color de fondo aquí. Sólo quieres probar. Entonces una cosa más, quiero hablar esto cuando haga alguna diferencia. Cuando cambio algo cada vez, debería entrar en el navegador y refrescar la página. Entonces estoy haciendo esto presionando Comando R. Si eres usuario de Windows, puedes usar Control R. Pero esta no es una forma eficiente. En cada cambio, no debes presionar los botones Refresh. Por eso quiero hablar de una extensión en código VS. Entonces si estás usando Sublime Text o en casa, hay algunas extensiones similares como esta. Por lo que solo debes buscar Live Server. Esto es muy común. En la primera línea, se puede ver un show o extensión en vivo es decir, que se ha descargado por aproximadamente 20 millones de veces. Así que adelante e instala esto. De acuerdo, ya instalé. Y luego en tu archivo HTML, haz clic en algún lugar, haz clic derecho. Y digamos simplemente abrir con Live Server. De acuerdo, Ryan, hazlo tú. Es sólo ducha iniciada en puerto 55 ceros, ceros. Entonces este es un servidor en vivo ahora, lo que significa que hacemos el cambio. Se acaba de refrescar auto. De acuerdo, cuando guardé el archivo, esto ya ha cambiado. Ya no necesitamos refrescarnos cada vez. 4. 2EventListers: Muy bien chicos, hagamos algo. Por lo que quiero hablar de oyentes de eventos, que es una herramienta realmente útil o arte interactivo en JavaScript. Entonces vamos a rastrear el evento click y dibujar un rectángulo sobre el carbón fue ¿por qué se nos hace clic? De acuerdo, así que primero vayamos a la nieve al comercio. Hay una función incorporada en durante el verano. Y aquí puedes escribir, puedes escribir el tipo del evento. Estamos buscando un evento click. Por lo que voy a decir click. Y para el segundo parámetro, esta es una función de devolución de llamada. Deberías usar una función que lo que quieres hacer corrió la Commonwealth es cobrar. ¿ Está bien? Por lo que escribiremos algunas declaraciones en estas líneas. Y estas líneas se ejecutarán en click. Entonces primero, simplemente bloqueemos el evento en sí. Entonces podemos hacer e como parámetro aquí, y solo puedes usar esa función. Entonces primero, sólo cierra la e para ver de qué se trata. Sólo voy a salvar esto. Y también eliminemos esta línea. De acuerdo, así que nuestra consola está clara. Y cuando hago clic en alguna parte, hay un candado y es tipo de evento puntero. Entonces vamos a abrirla. Hay muchas, muchas propiedades aquí. Pero si baja, puedes ver x e y propiedad. Para que si digo consola log up x dot y guárdalo. Por lo que cuando hago clic en solucionador, se puede ver podemos conseguir la posición x e y de esa ubicación. ¿ De acuerdo? Que es una gran herramienta porque podemos usar para que podamos usar ese punto para dibujar un rectángulo. En lugar de registrarme esto, solo usaré. Por lo que sólo podemos mover estas líneas, por cierto, sosteniendo la opción Alt y usando las teclas de flecha, puedes mover líneas como esta. Y si aquí, en lugar de durante 100, podemos decir e dot x dot y Así que vamos a hacer esto más pequeño, tal vez diez. Y simplemente hazlo sentir. Ok. Entonces cuando digo o cuando hago clic en Carlos, puede ver que sólo dibujamos un rectángulo. Dondequiera que pinchemos. Está bien, esto es genial. Vamos más lejos y cambien tu renta el centro. En lugar de hacer clic, quiero usar la luna de Mar. ¿ De acuerdo? Y salva esto. Por lo que esta vez, cuando haga clic en algún lugar, también rastreará el evento del mouse para que podamos hacer con nuestro ratón. Entonces esta función se llama muchas, muchas veces. Permítanme simplemente, vamos a anotar los valores x e y. Así que guarde esto. Para que puedas ver que está registrado muchas, muchas veces porque estamos moviendo el ratón y el oyente de eventos rastrea malvavisco. Así que cada vez que muevo mi ratón, solo crea un nuevo rectángulo. Y simplemente bloquea la x e y. real es, esto es algo como esto es algo así como pincel, ¿verdad? Para que podamos dibujar lo que queramos. 5. 3Arco: Bien, chicos, ya podemos dibujar rectángulos. Veamos cómo podemos dibujar círculos. Para dibujar círculos, usaremos métodos de arco CTX. Y quiero hablar de cómo funciona esto a detalle. Considera estos parámetros. En la sección de parámetros, se puede ver x, y, que es habitual Radio, que será el radio del círculo, ángulo de inicio, ángulo. Voy a explicar qué son ellos Justo ahora y un parámetro opcional boleon al final No es necesario dar parámetros opcionales. Es sólo para decidir si quieres empezar a dibujar el círculo en el sentido de las agujas del reloj o lo contrario. Bien. Ahora entenderás mejor. Considera un plano de coordenadas, y aquí tenemos un punto cero. Se puede pensar en trigonometría. Cuando llamamos a la función arc, comenzará desde cero, y está empezando a dibujar círculo así. Si le das un ángulo final de 90, simplemente dibujas un arco, no un círculo completo. También puede definir el ángulo de inicio y el ángulo final. Porque esta función no es para dibujar círculos siempre. También podrías dibujar arco Así que en el código, intentemos dibujar un círculo. Entonces solo voy a comentar estas líneas y guardarla para que tengamos unas comas claras Ahora bien, si damos 100 y cien para los valores x e y, 50 para el radio, cero para el ángulo inicial, y digamos ángulo de 360 para dibujar un círculo completo. Voy a guardar esta actualización. Entonces también deberíamos decir comenzar pat campo CTX. Guarda esto y podrás ver el círculo. Cambiémoslo a uno 80. Se puede ver de nuevo un círculo completo. Cambiemos el ángulo a 90. Por qué sucede esto porque estos parámetros no están esperando grados. En cambio, está esperando resplandor. Por eso aquí deberíamos usar ese Pi por dos para un círculo completo o ese Pi para un semicírculo. También podrías usar algunos convertidores de grados a resplandor. O podrías escribir tu propio convertidor. Escribamos función grado a resplandor. Esto puede ser una función de flecha. Lo siento, así. La fórmula para eso es grado I grado dividido por uno 80 veces Pi. Guardemos esto y movamos también nuestra función arriba. Entonces ya podemos usar grados. Llama a esa función que acabamos de escribir y digamos una 80 y guardarla. Esto es lo mismo otra vez. Vamos a probar 270. Se puede ver o 90. Tenga en cuenta que esto no es llenar el área de esa parte. Esto está destinado a dibujar arco. Digamos trazo, y ahora es más significativo, creo. Cuando digo uno 80, es medio círculo o así. Todo bien. Podríamos decir 360 para un círculo completo también. Bien. 6. 4Atoms: Ahora que también sabemos dibujar un círculo, dirígete a este video donde comenzaremos a dibujar cosas emocionantes. Entonces comencemos. En primer lugar, en este video, crearemos más de un artículo. Entonces vamos a crear círculos, y quiero usar una clase en este tiempo porque usaremos esa clase para generar muchos átomos. Quiero empezar a declarar con clase átomo. Se necesita un constructor, Esto generará átomos y son básicamente pequeños círculos. Por eso necesitamos valores x e y en el constructor. que x sea igual a x e y igual a y Para radio, quiero hacer que el radio sea aleatorio 10-0, pero no quiero que sea cero porque no será visible Agreguemos dos o también podríamos hacer este ocho. Es 2-10. declararemos velocidad velocidad en la dirección x , también puede ser aleatoria, pero esto es demasiado. Hagámoslo cuatro. Si declaramos una velocidad como esta, 0-4, siempre van a ir a la derecha. Para que un círculo vaya a la izquierda, necesita una velocidad negativa porque es valor x así que disminuye cuando va a la izquierda. Por eso sólo voy a decir menos dos. El resultado será entre menos dos y más dos y hará lo mismo por y también. Terminamos con constructor. También vamos a crear un método de actualización. Entonces este método de actualización se llamará en cada fotograma, y debería actualizar el valor x de los átomos, y debería actualizar el valor x usando la variable speed x, y también hacer lo mismo para y también. Pero solo estamos definiendo algunas variables, la velocidad del círculo, es el radio x e y, pero aún no dibujamos nada. Para ello, necesitamos dibujar función. Entonces el átomo puede dibujarse a sí mismo. Recuerda cómo dibujamos. Decimos CTX comenzar PT, antes que nada, y luego podemos decir CT x r aquí podemos dar x valor Podemos dar el valor y, y también podemos dar radio desde el constructor. El ángulo de inicio debe ser cero como siempre. Puedo dar ese Pi por dos para el ángulo final porque siempre queremos un círculo completo. También uso la función aquí. Vamos a guardar esto. Todavía no hay nada en las brasas porque no creamos ningún átomo Nosotros solo lo declaramos, así que la computadora mantiene la clase atom en la memoria, pero no se usa en este momento Sigamos adelante y usemos la clase átomo. Encima de todo, quiero crear una matriz de átomos, que será una matriz vacía para comenzar. Entonces agreguemos un oyente de eventos, para que cuando hagamos clic en alguna parte, los átomos se puedan generar en ese punto Entonces voy a llamar como oyente de eventos. El oyente de eventos escuchará el evento de clic. Y para la función de devolución de llamada, pasaré el evento Para que podamos acceder a los valores x e y del punto clicado Dentro del oyente de eventos, quiero usar un bucle for aquí Voy a usar el atajo. En cuatro bucle. Cambiemos el índice con, así es más legible, creo. Quiero crear 20 átomos. Especificemos el límite, y luego eliminemos estas líneas. Lo que queremos hacer aquí es empujar a los átomos, un nuevo átomo, ¿verdad? Entonces declaremos también su valor x e y con el evento que acabamos de usar. Bien. Voy a salvar esto. Cuando hago clic en alguna parte, todavía no pasa nada. Pero sólo para comprobarlo. Si estas líneas están funcionando, podemos agregar un registro aquí. Digamos hola. Cuando hago clic en alguna parte, ves que registra hola 20 veces. Cuando vuelvo a hacer clic, 20 más, y así sucesivamente. Estas líneas están funcionando. Aún no vemos nada porque no usamos la función. Si usamos la función draw aquí, también podría dibujar. Pero lo que quiero hacer aquí es mostrarte una función de animación. Así podremos crear una nueva función de animación como esta. Aquí, utilizaremos el marco de animación de solicitud. Esta función es realmente fácil de entender. Esta función simplemente llamará a una función que se pasa. Si pasamos aquí animar, para que vuelva a llamarse a sí mismo, crearíamos un bucle, y este es un bucle infinito, y eso es lo que queremos exactamente Porque sea lo que escribamos en el medio, se les llamará infinitamente Porque en esta línea, volverá a llamar a animar y va desde el principio y ejecuta los códigos y luego vuelve otra vez y así sucesivamente Lo que queremos añadir aquí es un sorteo de los átomos. Entonces usaré átomos y usaré para cada uno, que iterará sobre cada elemento en la matriz de átomos Entonces podemos pasar un parámetro, que será el objeto de iteración Átomo. Aquí, el átomo iterará sobre la matriz de átomos para que podamos usar la función draw aquí Con estas líneas, simplemente dibujamos cada átomo en los átomos. Después del sorteo, también quiero llamar a función de actualización porque aumentaremos la velocidad. Aumentaremos la x con la velocidad o disminuiremos los valores x e y. La función de animación se llamará muchas veces y siempre actualizaremos la x e y, y volveremos a dibujar para que podamos ver la animación ahora mismo. Yo lo digo Cuando hago clic, todavía nada en los comas. Deberíamos agregar una cosa más. Acabamos de crear la función de animación, pero nunca la llamamos. Sólo llamémoslo. Ahora cuando hacemos clic, finalmente, se puede ver el resultado. Dondequiera que hagas clic, se generan 20 átomos, y ellos simplemente se esparcen aleatoriamente. La velocidad, el radio son aleatorios. Y podemos ver una animación porque usamos request animation frame. Así que permítanme refrescar la página y volver a ver. Este ya es un gran proyecto para comenzar que haremos mejores visuales en el futuro 7. 5DestroyAndBlur: Actualmente, los átomos no están siendo destruidos en algún momento. Este no es un buen enfoque para los problemas de desempeño. Simplemente se mueven infinitamente, pero no serán destruidos en algún momento También, creo que si haces átomos más pequeños en cada cuadro, y pueden ser si pueden ser destruidos en algún momento, así pueden hacerse cada vez más pequeños en cada cuadro. Será un mejor efecto visual. Tratemos de implementar esa lógica. Primero intentaré cambiar la función de actualización de la clase átomo. Esta actualización sólo va a cambiar la velocidad para que también podamos actualizar el tamaño del átomo. Podríamos usar el mismo método. Aquí, también podría actualizar el radio, pero solo quiero crear un nuevo método de actualización y llamaré a esta velocidad de actualización en términos de flexibilidad, ya sabes, en el futuro, tal vez solo podamos querer actualizar la velocidad dos veces y no queremos actualizar el tamaño. Y así es solo por flexibilidad. Voy a crear un nuevo método de actualización de tamaño. En este método, voy a disminuir el radio. Probemos 0.1. En cada fotograma, vamos a disminuir el radio, cuando llamamos método de tamaño de actualización. Sigamos adelante y probemos este tamaño de actualización, y también cambiemos esto para actualizar la velocidad. Guarde esto. Veamos qué tenemos. Ahora, esto es solo déjame abrir la consola. Tenemos un problema al no ejecutar arco el radio proporcionado es negativo. Simplemente estamos disminuyendo el radio, y en algún momento, será negativo y como no podemos tener un radio negativo, la consola solo da una advertencia. Entonces lo que podemos hacer aquí es eliminar los átomos que tienen un valor de radio negativo. Si hacemos eso, también manejaremos el problema de rendimiento porque una vez que eliminemos un átomo, ya no tenemos que pensarlo más. Entonces en ese cuatro cada uno donde iteramos sobre átomos, podríamos verificar el radio de los átomos, y si es menor que 0.3, deberíamos eliminar el átomo Los átomos solo se almacenan en la matriz de átomos si podemos eliminar de la matriz de átomos, estamos bien. No creamos nuevas variables ni ningún tipo de almacenamiento de datos. Sólo los estamos reteniendo en átomos. Hay una manera de. muchas formas de eliminar átomos para eliminar un elemento de la matriz. Vamos a utilizar el método de empalme aquí. Diré átomos que empalme necesita un número aquí, que será el índice del elemento que queremos eliminar. Para lograrlo, en realidad, primero debemos cambiar los cuatro cada función aquí. Voy a agregar un nuevo índice de parámetros aquí, y cuatro cada uno ya está listo para darnos el valor de índice del bucle. Puedes ver aquí, puedes dar un parámetro de valor y también índice y también podríamos darle al top lo que no necesitamos en este momento. Si escribimos aquí índice, solo podemos usar index aquí también. Y debemos proporcionar un recuento de eliminaciones. Entonces solo queremos eliminar un elemento. Entonces esto está bien. Creo que en este momento solo estamos borrando átomos que tienen un radio inferior a 0.3. Digamos e intentemos. Ahora, no tenemos ningún error. Se convierte en una bonita animación estelar. Entonces puedes ver el efecto los círculos apenas están disminuyendo, apenas se están haciendo más pequeños y en algún momento, cuando tienen un radio inferior a 0.3, se destruyen a sí mismos para que estemos bien. No tenemos nada en la memoria después de la animación. Bien. Entonces esto es muy eficiente. Todo bien. Pero hagamos que este efecto sea más fresco. Entonces solo voy a cambiar este click a Mamu y ver qué pasa A lo mejor esto es demasiado. Solo estamos creando artículos, y nuestro coma está lleno porque no los estamos borrando de la escena. ¿Qué podemos hacer al respecto? Quiero hablar de un concepto ahora mismo. Guardar contexto y restauración de contexto. Entonces estos bloques son solo, ya sabes, se explican por sí mismos. Solo están guardando el contexto, todos los ajustes del contexto, por ejemplo, el estilo de relleno, o, ya sabes, línea con todo lo demás, es solo un punto de guardado aquí. Y cuando cambiamos algo entre ellos, podemos cambiar el estilo de relleno podemos cambiar el estilo de relleno a rojo. Entonces cuando lo cambiamos entre estas dos líneas, por ejemplo, en esta línea, estilo de relleno era negro. Cuando decimos restaurar, simplemente vuelve atrás. Por lo que vuelve a ser negro en la línea 27. Todo bien. Entonces podemos hacer cualquier cambio, lo que queremos hacer, y luego podemos simplemente restaurarlo que haga que todo el ajuste vuelva a esta línea a este punto. Entonces quiero agregar los bloques aquí y quiero cambiar el estilo de relleno. Vamos a probar el rojo, bien. Y quiero dibujar un rectángulo. Voy a usar relleno para todo el cas. En cada bucle de animación, dibujaremos un rectángulo en todas las coas Para ello, debemos dar valores de conva y Cas Digamos esto. Simplemente estamos dibujando el rectángulo rojo en cada fotograma para que no podamos ver nada. Bien. Entonces no tiene sentido hacer esto, obviamente. Pero si cambiamos este rojo a algún valor RGB. Entonces nuestro fondo era blanco. Entonces digamos 2505, 2505, 2505, y esto es para establecer un Entonces esto es similar a escribir solo blanco. Pero esta vez, quiero añadir también Alfa, que es la opacidad Esta A significa Alfa. Aquí, quiero agregar un Alfa al 0.2. ángulo directo tendrá una opacidad de 0.2, lo que nos dará un bonito efecto Cuando digo esto, cuando muevo el, ves, déjame cerrar también la consola. Entonces puedes ver ese bonito efecto azul, ¿verdad? Y nuestras partículas simplemente se mueven con un bonito efecto tráiler, y están siendo destruidas en algún momento cuando se vuelven realmente pequeñas. 8. 6SkyAndStars: Hemos creado un bonito efecto visual que escucha el movimiento de masas. Y si queremos, el código genera los átomos por defecto. Entonces, ¿y si no queremos escuchar el evento del mouse? Pero en cambio, queríamos crear automáticamente átomos conocían. Por lo que voy a comentar estas líneas aquí. Y en el botón, quiero crear una nueva función. ¿ De acuerdo? Entonces vamos, llamemos a esta función generar átomos. Y volveré a usar la función de flecha. ¿ De acuerdo? Entonces para ti, por ejemplo, para crear átomos, solo podemos usar la misma lógica aquí. Basta con empujar átomos en la matriz, ¿verdad? Entonces porque entonces tenemos una función de animación, dibujará, actualizará velocidad, actualiza tamaño, y hace todo. Por lo que deberíamos primero empujar a los átomos. Por lo que voy a decir átomos ese arbusto. Queremos valores aleatorios. Entonces esta expresión aquí, como saben, crea un valor aleatorio entre, si tecleo tu décima, entre 010, ¿verdad? Pero no quiero ningún valor estático aquí. En cambio, podemos usar como sweet. Por lo que los átomos se pueden generar en cualquier parte del Comercio. Y haz lo mismo por Y también. Esta vez altura de comas. ¿ De acuerdo? Y entonces solo podemos decir solicitar marco de animación y llamar a la misma función aquí porque queríamos ser un bucle. ¿ De acuerdo? Ahora si llamo generar átomos y guardo este archivo. Así que lo siento, no lo hicimos. Acabamos de dar valores x e y. Luego llamamos a la clase. Por lo que agregaré Mu átomo al principio y el paréntesis al final. Lo guardo de nuevo. Para que puedas ver ahora hemos generado un átomos de materias aleatorias en cualquier parte del lienzo. Vale, así que esto se ve bien, pero hagámoslo mejor. Creo que si hacemos el fondo negro y hacemos átomos más pequeños y blancos, se verá como cielo. Vale, entonces, ¿qué tal probar eso? Deberíamos cambiar esta línea. Sólo voy a comentar porque no quiero perder esto. Pero esta vez queremos que sea negro. Por lo que voy a dar 0 por valores RGB. Déjame guardarlo. Nuestro lienzo es negro en este momento. No podemos ver los átomos correctamente porque deberíamos cambiar su FillStyle a blanco. Donde realmente dibujamos átomos. Justo antes de dibujar. Podemos decir TTX, estilo TTX a blanco. Por lo que en este momento se ve mucho mejor. Y también son demasiado grandes. Quiero que sean más pequeños. Entonces tal vez podamos cambiar el radio aquí. Así que probemos algo también. En lugar de, en lugar de ocho. Ahora, hay más pequeños y se ven como estrellas en el cielo. Así es como se puede crear un cielo o un efecto de espacio con JavaScript. 9. 7ParabolicMovement: Es realmente fácil crear átomos aleatorios. Pero, ¿y si queremos crear átomos en ubicaciones específicas? Y también queremos moverlos de una manera que queramos precisar. ¿ De acuerdo? Entonces para hacer eso, solo voy a crear un nuevo punto de objeto JavaScript. Debería tener dos valores básicos, x e y. así que aquí, en lugar de valores aleatorios, solo quiero usar el punto X, punto Y. así que permítanme guardar esto. Entonces si di 500 aquí, se puede ver ahí en el punto específico, vale. O si quieres algo específico en algo que el medio, por supuesto, podríamos decir Carlos ancho dividido por dos. Altura dividida por dos. Entonces está exactamente en el centro. ¿ De acuerdo? Entonces sigamos adelante y movamos esto en columnas. Entonces lo que queremos hacer aquí es cambiar el punto x Si cambio de punto x, si lo aumento con uno en cada fotograma de animación, irá a la derecha. Déjame guardarlo. Para que puedas ver sólo va bien. Si también cambiamos la y, ahora reframe, irá abajo y escribirá. En algún momento, saldrá fuera del lienzo. De acuerdo, entonces, ¿cómo hacemos que rebote entre algunos puntos que podemos usar para meterlos aquí. Porque la función cos x va entre uno y menos uno, mientras que los grados están aumentando. ¿ De acuerdo? Entonces si usas coseno para aumentar el punto x, irá a la derecha. Y luego en algún momento se volverá atrás y empezará a ir y a la izquierda. Bien, utilicemos esto en nuestro código. En realidad empecemos x e y desde 0. A lo mejor podemos usar coseno aquí. Deberíamos hacer radianes, de nuevo, no grados, pero quiero simplemente convertir de grados a radianes. Y también asignaré una nueva variable. Empezará desde 0 y va a estar aumentando en cada fotograma para que nuestro coseno simplemente se vaya y se vuelva atrás. Entonces vamos a usar esa variable aquí, grado. Y recuerda la fórmula para convertir a radianes. Dividirlo por 180 veces Pi. ¿ De acuerdo? Por lo que quiero generar átomos desde el centro de las columnas. Por eso solo agregaré Carlos ancho. Divide por dos más, y también aquí cos altura dividida por dos más. De nuevo, ahora si digo, se puede ver sólo de repente sólo va verano. Ahora veo que es porque acabamos de hacer un error tipográfico aquí. Debería ser así. Cuando lo guardamos. Se puede ver que se generan en el centro del lienzo, pero estamos aumentando punto x o disminuyendo en cada fotograma. Pero nada cambió. Esto está sucediendo porque el rango del punto x está entre 011, por lo que no afecta mucho. Por eso quiero multiplicar ese valor aquí. Digamos cientos. Y también por qué? Digamos 200 de nuevo. Ahora se puede ver que sólo está girando entre estos routers. Entonces 1 x es uno. Estará a la derecha. Si es menos uno, aquí es gasa a la izquierda. Entonces, lo que podemos hacer también, podemos hacer que ese movimiento sea parabólico también. Entonces en este momento no hacemos mucho por y si decimos siempre uno. Así que sólo lo estamos cambiando. Para que eso no cambie. Pero recuerda fórmula de parábola. Así que déjame abrir. Esto es sólo la parábola básica, y es igual a x cuadrado. Entonces vamos a implementar esto en nuestro código, que es y es igual a 2 x veces x ¿Qué crees que va a pasar? Nuestra forma, apenas comenzaremos a dibujar una parábola. Déjame simplemente guardarlo. Se puede ver el resultado y usar esa lógica. Y a la abuela, puedes dibujar todo. Tú quieres. Un círculo ocho, un símbolo del infinito, error. 10. Cómo empezar (efecto de píxel): En esta sección, vamos a crear un bonito efecto de pixel usando JavaScript Vanilla. Entonces al final de esta sección, podrás usar este efecto de píxel en imágenes PNG de error. Entonces si estás listo, abre tu línea de comando y podemos empezar. En las secciones anteriores. Recuerda que creamos una nueva carpeta de proyectos en escritorio. Por lo que voy a entrar en la carpeta de proyectos. Voy a crear aquí una nueva carpeta con respecto a este proyecto. Y lo llamaré efecto pixel y entraré a esa carpeta. Entonces aquí, lo que necesitamos son en realidad tres teléfonos. Así que como siempre, índice HTML. Por lo que voy a decir toca index.HTML para crearlo. Y también toca index.js y también para CSS, style.css. Bien, ahora hemos creado nuestros archivos. Vamos a abrir. 11. Configurar el proyecto: Podemos abrir el proyecto con código VS usando terminal también. Entonces en tu línea de comando, si solo dices puntos espaciados atrapados, si tu shell de comandos ya está instalado, los comandos, esto abrirá el código VS usando tu directorio aquí. Entonces si está diciendo algo así como comando no encontrado, déjame en la pantalla, solo puedes entrar en VS Code y presionar Comando V o Control V en Windows. Y aquí escriba comando shell. Entonces ya que estoy usando la versión interna de VS Code, porque estoy usando una versión brazos seis a cuatro para el silicio de Apple. Dice llamados internos, pero, pero normalmente, se puede ver aquí dice instalado llamado comando en pet. Entonces, si estás usando insiders, debes instalar éste. Si está utilizando la versión normal solo VS Code. Para que puedas revisarlo aquí. Deberías ver aquí instalar, instalar frío. Y una vez que hagas eso, una vez, una vez que hagas clic en eso, instalará ese comando. Y luego puedes escuchar, usa este comando. Ya que estoy usando dentro de esta versión para mí, se llama insiders. ¿ De acuerdo? Y abrirá el proyecto en VS Code para mí. Muy bien, así que empecemos con el índice HTML. Como siempre, usaremos plantilla HTML5. Aquí. Podemos decir efecto pixel para el título. Y entonces como siempre, debemos crear nuestras columnas. Voy a dar mi código era como id sin hogar También deberíamos crear una etiqueta de script dada la fuente de index js. Por último, también vamos a vincular nuestro archivo CSS con un enlace. ¿ De acuerdo? Entonces todo está listo en HTML. Vamos a entrar, en CSS. Por lo que aquí quiero elegir todo. Es por eso que usaré asterix y estableceré margen 0, padding, 0, caja-dimensionamiento, border-box. Esto permitirá algunos ajustes. Se puede investigar por ello. Es un tema CSS que no discutiré en este momento. Hagamos el fondo negro. Y luego podemos llamar a nuestro Cosmos usando Ivy Tech. Y vamos a poner alguna frontera. Un px blanco sólido. Y también estableció su posición en absoluta porque no tenemos nada más. No tenemos algo relativo para que podamos arreglarlo en el centro de la pantalla haciendo valores superiores e izquierdos. Hay muchas, muchas alternativas. Hacer esto en todos los sentidos funcionará. Entonces, por fin, queremos traducir los colores, mi menos 50%. Por lo que estas líneas sólo harán que los colores simplemente traerán al Congreso en el Centro en cada resolución. De acuerdo, solo voy a guardar CSS y terminamos con HTML y CSS. Ya podemos abrir el archivo JavaScript. Entonces es como siempre, primero debemos crear los autos usando elemento por ID. Pase el DNI de mi auto fue. Y también vamos a crear nuestro CTX está en ese contexto. Goody. Muy bien. Ahora, lo que quiero hacer es mover algunas imágenes PNG a esta carpeta y usar esa imagen también. Te proporcionaré esta imagen es de la sección de recursos. Para que puedas descargarlas y usar exactamente las mismas imágenes conmigo. O puedes elegir tus propias imágenes PNG en tu propio proyecto. Así que déjame traer mis fotos. De acuerdo, entonces tenemos tres y fotos PNG. En este momento. Ahora que lo hemos hecho en el sistema de archivos local, ahora podemos acceder a él. Voy a crear una nueva variable, que será cuál, y será un objeto de clase de imagen para que ahora podamos cambiar su fuente para que digamos. Empecemos con Kerry. De acuerdo, entonces este es el nombre del archivo en la misma carpeta. Por eso no necesitamos ninguna barra y puntos, nada más. Podemos simplemente pasar su nombre porque están en la misma jerarquía, ¿verdad? También. Entonces ahora que tenemos la fuente de la imagen, en realidad podemos llamarla. Por lo que podemos decir Mucho de imagen. Por lo que esto se llamará cuando la imagen ya esté registrada. Por lo que podemos decir, podemos decir función aquí. Y todo lo que escribiremos. Estas líneas se llamarán después de que se cargue la imagen. ¿De acuerdo? Si no lo dijiste, si no utilizaste no son propiedad de imagen. Podríamos empezar a codificar antes del proceso de carga. Por lo que eso causará algunos errores. De acuerdo, Entonces esta es la forma más segura usar la imagen con JavaScript. ¿ Está bien? Entonces cuando se carga, lo que queremos hacer es fijar el ancho de Carlos a ese ancho de imagen y también la altura de Carlos a esa imagen. Ahora, podemos dibujar la imagen usando la función de imagen CTX. Entonces para el primer parámetro, se debe dar la imagen misma. Por lo que voy a decir Imagen y estoy empezando x y empezando y debe ser 0. Por último, podemos hacer comercio con altura Carlos o los puntos finales. Así que cuando guardo esto, también vamos a entrar en el archivo HTML. Haga clic con el botón derecho en él y abra con Live Server. Y si no viste esa sección donde instalamos servidor en vivo, es realmente fácil. Deberías entrar en las extensiones aquí. Podemos teclear Live Server y solo puedes instalar éste. Se trata de 20 Melianos. Tiene unos 20 minutos de descarga. Por lo que es seguro de usar. Una vez que lo instale, puede hacer clic derecho en el archivo HTML y decir Abrir con servidor en vivo. 12. 3getImageData: La entrada se abrirá en su navegador predeterminado. Voy a hacer, voy a usar Chrome. Así que déjame simplemente apilar de esta manera como código para que podamos verlos a ambos simultáneamente. Muy bien, estamos listos para irnos. Por lo que ahora podemos dibujar la imagen en el auto era, lo que significa que también podemos usar la función ImageData para nuestra imagen. Así que déjame ver a dx. Permítanme simplemente explicar get imageData función. Por lo que debemos dar x, y, ancho y alto. Sish. Como dibujar un rectángulo. Y lo que esta función hace es obtener realmente los datos de la imagen. El objeto que regresa será un error. Así que en realidad déjame sólo ImageData. De acuerdo, vamos a registrarnos para decirlo y entenderlo fácilmente. Por lo que voy a abrir la imagen de la consola que se puede ver. Contamos con un objeto de datos. De acuerdo, Así que en realidad vamos a iniciar sesión, registramos los datos en sí. Entonces es una matriz. Tiene que muchos artículos. 2 mil millones, tal vez 2 millones. Me visto. Y si abres por dentro, puedes ver Es sólo un tipo de sujeción de una matriz. Así que en realidad es una sola matriz. No es un colchón. No hay. Entonces parece que hay tres elementos dentro de una matriz, pero es solo, ya sabes, esto es solo Herramientas de Desarrollador, muy fuera de apuntalar cosas. Pero es normalmente, es una matriz 1D, por lo que están justo uno al lado del otro para cada número. Y puedes revisar esto. Comienza a partir de 0. Y si abres la segunda sección escondida 400, el índice está aumentando continuamente. ¿ Está bien? Entonces, ¿cuáles son estos ceros? ¿ Significado? Funciona así. Ya sabes, valores RGB, ¿verdad? R significa rojo. G significa verde, B significa azul, y a significa alfa. Por lo que podemos identificar cada píxel en la vaca estaba usando este color. Bueno. Por lo que tendremos un número entre 0 y Dos, 55 por cada uno de ellos. Y eso mostrará cuán poderoso de ese color en esa imagen. Entonces como en este ejemplo, permítanme ampliar esta pestaña. De acuerdo, entonces en este ejemplo, digamos que nuestro primer píxel está justo aquí. Y el valor rojo de ese pixel es 0, porque aquí no hay renta. Todo es negro, ¿verdad? El azul también es 0. El verde también es 0. Lo siento, verde. El azul también es 0 y alfa también es 0 porque no es transparente, ¿verdad? No hay un pastoso. No hay brillos en ese píxel. Pero déjame encontrar algo en el medio. Sólo estoy eligiendo aleatoriamente. Tan raro y espero poder encontrar a alguien no negro. No debería ser tan duro. Entonces deberíamos buscar sin embargo. Vale, lo encontramos en este píxel. No sé dónde está ahora mismo. Pero sabemos que el valor rojo es 217, valor verde es 10928, valor azul es 166, y el alfa es 25. ¿ De acuerdo? Por lo que ahora se puede entender que tenemos. Valores Rgba para todos los píxeles en las columnas. Lo cual es genial porque podemos usar esos valores para hacer todo lo que queramos. Para que podamos dibujar la imagen en el lado opuesto. Podemos obtener sus colores y usarlos de diferentes maneras. O podemos crear un efecto de lluvia de píxeles, lo que haremos. ¿ De acuerdo? Entonces si es lo suficientemente claro, espero que no haya explicado las cosas. Podemos continuar ahora mismo. Entonces ahora que tenemos ImageData, en realidad podemos separar los valores rojo, verde y azul, ¿verdad? Podemos mantenerlos en diferentes estructuras de datos. ¿ De acuerdo? Podemos calcular algo de brillo con el uso de esos ingresos. Para que puedas entender mejor cuando tecleo. Así que empecemos con un bucle for. Cambiaré índice a i Así que deberíamos bucle a datos de imagen, datos que carecían, ¿verdad? Entonces déjame volver a abrir la consola. Supongo que no debería cerrarlo. Vale, entonces tenemos dos millones. Dos millones. Sí, tenemos alrededor de 2 millones de elementos y debemos recorrer a través de ellos. Entonces en esto for loop, quiero identificar valores rojos, verdes y azules. Rojo será ImageData. Los datos. Y recordaremos los rojos son, el primero es rojo y luego verde, azul, Alpha. Y el cuarto, en realidad el quinto vuelve a ser rojo. Y entonces éste vuelve a ser rojo. Éste es rojo otra vez. Entonces podemos decir que yo por cuatro veces, podemos conseguir todo el valor rojo recto. Primero. En la primera iteración será 0. El segundo iteración será cuatro. Para que podamos conseguir todos los valores rojos. Entonces voy a hacer lo mismo por el verde también, pero esta vez solo puedes otro paréntesis aquí. Y podemos decir más uno, porque esta vez vamos a conseguir 159 y así sucesivamente. Entonces sigamos adelante y hagamos esto también por el azul. Debe ser más dos. Y con valores rojos, verdes y azules, solo podemos crear una nueva variable de brillo. Entonces es justo, será útil para ese efecto. ¿ De acuerdo? Por lo que solo queremos usar un promedio de variables rojas, verdes y azules. Entonces lo haré, acabaré de obtener la suma de los tres valores y dividir por tres para obtener el promedio. Por lo que podemos asignarlo a los iluminadores. ¿ Verdad? Y luego vamos a crear una nueva matriz. En la parte superior de todo. Lo llamaré matriz de brightnesses, una matriz vacía. Y vamos a empujar el valor de brillo en esa matriz. Muy bien, entonces, ¿cuál será la longitud de la matriz de brillo? Será lo mismo con los píxeles en nuestras columnas, ¿verdad? Entonces solo obtenemos valores rojos, verdes y azules de cada uno de los píxeles. Y obtenemos el promedio de ellos. Y llamamos a ese valor al brillo, y lo empujaremos hacia el brillo, Eric. ¿ De acuerdo? Entonces si recuerdas, nuestro resultado no será coloreado. Posteriormente. Podemos hacer esto con color también, pero en el primer paso, solo queremos valor de brillo y lo usaremos. Muy bien, vamos a continuar. Generemos partículas Tarzán o este efecto. Voy a usar un nuevo for-loop para eso. Nuevamente, volveré a utilizar yo. Y digamos que esta vez voy a dar estática 10 mil por límite del bucle for. Ahora, este bucle iterará 10 mil veces y deberíamos simplemente empujar. En realidad primero deberíamos crear matriz de partículas. Entonces ahora lo que queremos hacer es empujar partículas o una partícula 10 mil veces nueva, ¿verdad? Entonces, pero no tenemos ninguna partícula en este momento. No creamos ninguna clase. Así que primero hagamos eso. Simplemente dejaremos un comentario aquí. Entonces deberíamos, deberíamos poder decir aquí nueva partícula. ¿ De acuerdo? Y entonces lo descomentaremos una vez que tengamos esa partícula, clase de partícula, lo siento. 13. 4CreateParticleClase: Muy bien chicos, es hora de crear clase de partículas para nuestro efecto de partícula. En la parte superior. A lo mejor aquí podemos decir partícula de clase. Y estamos acostumbrados a esa sintaxis, ¿verdad? Ya hemos usado esto antes. Por lo que acabaré de llamar a su constructor. Y no necesitamos dar ningún parámetro en realidad porque podemos hacerlo por defecto. Entonces, como siempre, tenemos valor X, que puede ser aleatorio. Y el rango será entre 0 y Carl mosfet, ¿verdad? Entonces, um, algunos de ustedes tal vez pierdan la math.Sección aleatoria en el inicio del curso. Entonces este valor devolverá un valor aleatorio entre 0 y columnas con, ok, así que si decimos justo aquí, esto devolverá un valor aleatorio entre 010. Por lo que podemos decir comercio con aquí. Devolverá algún valor x entre. Vamos a cerrar la consola ahora mismo. Algún valor x aleatorio entre el campus dentro del cosmos. Y hagamos lo mismo por Y también. Pero queremos, queremos que nuestras partículas comiencen en lo alto de las columnas. Esta vez no queremos ninguna aleatoriedad. Por eso voy a decir 0 por cada partícula. Por lo que comenzará aleatoriamente en la dirección x, pero comenzará en la cima cada vez. También me llaman brillo, porque usaremos brillo. Recuerda aquí, solo lo calculamos. Simplemente lo haré 0 por defecto, pero lo cambiaremos más adelante. ¿ De acuerdo? También deben tener una velocidad porque caerán con una velocidad aleatoria. Entonces algo así como tres obras. Y también serán círculos. Por eso necesitan un radio. Y quiero que cada partícula sea en diferentes tamaños. Es por eso que hagamos sus valores de radio entre. Entonces no quiero que empiece a partir de 0. Por lo que sólo voy a añadir uno aquí. Por lo que este valor estará entre 1.52. ¿ De acuerdo? Por lo que sostuvimos la parte constructora. Es hora de estampillas atadas para actualizar la función. En la función de actualización, ya se sabe qué función de actualización es cuatro. Se llamará en cada fotograma, correcto, con nuestra función de animación. Y escribiremos la función de animación más adelante. Pero la función de actualización se llamará en cada fotograma. Por lo que sea que reescribimos entre la función de actualización, estas líneas serán llamadas continuamente en cada fotograma. Entonces lo que queremos hacer correr continuamente para aumentar los valores y de las partículas para que puedan caer. Por lo que queremos aumentarlos usando la velocidad de las partículas, que también será aleatoria. Así que en realidad vamos a añadir aquí. No quiero que esto sea 0 porque será 0. No se caerán, simplemente se quedarán pegados a ese píxel. Por lo que sólo agregaré 0.1 solo para estar seguro de que están cayendo. Muy bien, podemos seguir adelante. Y así las partículas simplemente caerán continuamente. Y en algún momento vendrán al lado inferior de las columnas, ¿verdad? Entonces cuando lo hagan, deberíamos simplemente, en realidad, hay dos formas en que podemos destruirlos o podemos cambiar su valor y a 0 de nuevo, que comiencen desde el principio. Utilizaré la segunda vía en este proyecto. Por lo que voy a decir si este punto y es más grande. Que o igual a yo era altura, lo que significa que están a punto de salir del lienzo. Hagamos y 0 de nuevo para que empiece desde el principio. Y también quiero cambiar su x que se posicionen al azar, de nuevo. Barro, al azar. Y nuestro límite es conversar con cualquier cosa. Entonces esto tiene sentido, ¿verdad? Es sólo pura lógica. ¿ De acuerdo? Sólo voy a decir esto. Continuemos con nuestra función de sorteo. En realidad, antes de dibujar función, quiero hablar del brillo porque aquí es donde usamos el brillo. En la función de actualización. Cambiaremos el brillo de la partícula en cada fotograma con el valor que obtenemos de la imagen real. Así que recuerda esta matriz de brillo, solo una enorme matriz, pero es 1D. Entonces es justo, tiene tal vez más de 2 millones de elementos. Y podemos conseguir el punto exacto para nuestro práctico. Entonces, ¿cómo haces eso? Diré este brillo de puntos. Y podemos llamar brillo. Aquí. Deberíamos usar el valor x e y de la partícula. Deberíamos usar muy hábilmente para que coincidan con su posición en el error de brillo. Vale, así que piensa en eso. ¿ Cómo podemos usar valores x e y de nuestra partícula? Que coincida con el iluminar el centro. Y esto también proviene de los datos de la imagen. Pero hay una pequeña diferencia entre ellos. Aquí tenemos valores x e y de las columnas. Entonces es un colchón, que es martes, ¿verdad? Pero aquí solo tenemos una, la matriz. Entonces de alguna manera necesitamos mapear estos valores x e y a este brillo. Explicaré esta parte usando un pase de diapositivas. 14. 5Mapping2d1d: Estas son nuestras columnas. Tenemos los valores x en horizontal, tenemos los valores y en vertical. Y esta es la matriz de brillo que usamos. Por lo que compraron tus regalos lo mismo. Los píxeles en el cosmos. Pero hay un poco de diferencia. Uno de ellos está en 2D, mientras que el otro es 1D. Entonces con el uso de valores x e y, podemos representar un píxel en dos dimensiones. Porque usamos valores x e y. Pero en matriz de brillo, es lineal. Sólo tenemos una dimensión. Por lo que aquí se puede ver el reflejo de los brightnesses array en coordenadas x e y. Por lo que estos valores representa el índice está fuera de la encuesta iluminada en el Canvas. Podemos utilizar la fórmula para acceder al índice de la encuesta brillante utilizando valores x e y de los píxeles. Entonces digamos que queremos acceder al décimo elemento y pixel. Entonces, pero no sabemos qué píxel está en la matriz de brillo. Sólo sabemos que x es dos y y es dos. Entonces vamos a usar la fórmula. Nos dará diez. Y eso funciona porque solo estamos multiplicando y valor con el recuento de filas. Tiene sentido, ¿verdad? Entonces solo agregamos x. ¿De acuerdo? Entonces veamos otro ejemplo. Si queremos acceder al virus X4 seis píxeles, la fórmula nos dará 44. Entonces usaremos esta fórmula en nuestro código. Se verá así. Por cierto, solo usamos Math.floor en el código porque los valores x e y son valores flotados generados aleatoriamente. Entonces como son fluidos, no son enteros. Pero lo haremos, necesitamos números enteros. Por eso usaremos Math.Floor en la cancha. 15. 6UseTheFormula: Vamos a usar esa fórmula en nuestro código. Entonces voy a decir Math.Floor, este punto y menos una veces comas. Pero por ahora, puedo ampliar esta ventana más mod piso nuevo, esa x. ¿De acuerdo? Así que aún no vemos unas animaciones porque no creamos nuestra función de animación. Pero sé paciente. Estamos a punto de hacer eso. 16. 7DrawFunction: También creamos el método de sorteo, que es realmente fácil, y lo hicimos antes. Entonces aquí digo empate. Realmente debería empezar a dibujar, comenzará almohadillas. Y podemos decir FillStyle, blanco. Por cierto, puedes cambiar esta línea con el color que quieras. O en el futuro, posible que deseemos cambiar esta línea con el color de la imagen para que los píxeles también se coloreen. Por lo que queremos dibujar un círculo usando x, y, radio 0, y el círculo completo. Por eso usaré math.pi veces dos. Por lo que ya explicamos cuáles son estos parámetros y cómo dibujar un círculo en las secciones anteriores. Y por último, debemos decir CTX, miedo. Muy bien, déjame guardar esto, pero no estamos llamando condujo funcionándolo. Por eso no vemos animaciones. 17. 8CompleteTheEffect: Vayamos hasta el final. Aquí podemos crear función animada. Entonces quiero que sea una función de flecha. Y lo primero en la función de animación, queremos cambiar la opacidad de las comunes. Podemos hacerlo mediante el uso de la propiedad alfa global del CTX. Y vamos a ponerlo en 0.05. También cambia FillStyle a negro. ¿ De acuerdo? Y queremos dibujar un rectángulo, replantear con esa opacidad y color negro. Entonces por eso voy a dar comercio con y altura comercial. Para que ese rectángulo cubre toda la zona. ¿ De acuerdo? Para que puedan ver lo que estamos haciendo aquí, ¿verdad? Sólo estamos dibujando un azulado y salida como 005 rectángulo alfa, lo que nos dará bonito efecto de desenfoque de las partículas. Y estamos dibujando un rectángulo que cubre todas las cámaras para que no tengamos que preocuparnos por todas las partículas individualmente, pero solo estamos dibujando un gran rectángulo en su lugar. ¿ Está bien? Y por supuesto queremos dibujar una actualización de partículas en la función animar. Entonces para eso, utilizaré para cada entidad. Así que llamemos matriz de partículas. Para cada uno. Vamos a iterar sobre partículas. Por cada partícula quiero actualizar. Y yo quiero. Y entre ellos. Cambiemos también el alfa global de nuevo. Por lo que perderemos el brillo de las partículas aquí. Entonces parte matriz de brillo, solo lo asignamos a las partículas para que cada partícula tenga un brillo diferente según el pixel de esa ubicación. ¿ Verdad? Así que utilicemos ese brillo entre la actualización y el sorteo. Vamos a cambiar las partículas alfa globales ¿verdad? Al final de la animación. También llamaré a solicitar marco de animación como de costumbre. Muy bien, entonces llamemos a la función animate y guardemos este archivo. No vemos ninguna partícula. Eso es porque no empujamos partículas en matriz de partículas. En este for-loop. No generamos porque esto es sólo comentarios. Entonces las partículas se arrastra que deberíamos decir empujan una nueva partícula y esto debería estar bien. Cuando digo Espere, no volvemos a ver nada. Vale, esto es raro. Oh, hay una, sólo veo una partícula. Así que tal vez nuestro desayuno sea demasiado para dibujar. Multiplicemos este valor con un pequeño número. Bien, ahora tenemos nuestras partículas. Están respondiendo a la imagen, que es genial. Pero solo quiero aumentar esto un poco. Esto no está mal. A lo mejor deberíamos seguir disminuyendo. Sí, esto es mucho mejor. Entonces ahora lo que hicimos aquí es cambiar el alfa global con el brillo que acabamos de calcular. Al tomar el promedio de los valores rojo, verde, azul de ese píxel en la imagen original. Y estos valores dieron fue el brillo o ese píxel. Y usamos ese brillo en nuestro efecto pixel. Espero que hayan disfrutado de este efecto. Y lo que es emocionante aquí es que podemos usar este efecto a partir de ahora en cualquier imagen que queramos. ¿De acuerdo? Por lo que también te proporciono el muro o en archivo PNG en el Udemy. Por lo que basta con cambiar aquí también alrededor para aplicar ese efecto en esta imagen. 18. 9addRGBColors: Creo que esto ya es un gran efecto. Pero si quieres usar los colores originales en lugar de blanco y negro, podemos hacerlo fácilmente. Así que abramos nuestro código. Un arco. Quiero crear una nueva matriz RGB. ¿ Está bien? Entonces usaremos matriz RGB como brightnesses array. Cada iteración de esto para bucle, queremos empujar también valores rojos, verdes y azules en una matriz. Y lo usaremos más adelante. Entonces aquí también empujaré en matriz RGB. Entonces usaré literales de cadena JavaScript. Creo que ese es el nombre de la técnica aquí. Así que acaba de poner una espalda con espalda aquí. Y ahora podemos combinar textos, texto con los objetos JavaScript como este. Y volverá como ***** al final. Entonces así, voy a decir signo de dólar con el padre. Esto es Carla parántesis. Ahora puedes escribir rojo aquí, y luego solo puedes seguir escribiendo hestink. Por lo que queremos decir RGB, rojo y rojo viene de aquí. Valor rojo, sea lo que sea. Entonces queremos importar verde también. Por fin estoy azul y cierro el paréntesis. Entonces esto se ve bien. También podríamos hacerlo así. Es lo mismo. Paréntesis Rgb más rojo, más coma, más espacio, más verde, y así sucesivamente. Entonces creo que esto es muy legible. Por eso usé de esa manera. ¿ De acuerdo? Por lo que en este momento tenemos matriz RGB de cada pixel. Y dentro de esa matriz tendrá cadenas, que está parado para los valores RGB. Y si vas abajo, decimos CTX FillStyle negro y no éste. TTX FillStyle blanco. En lugar de cultivar partículas blancas. Podemos hacer con los valores RGB que acabamos de detener. Aquí. Deberíamos usar la misma lógica con la matriz de brillo, porque esta nuevamente es una matriz 1D que contiene los valores RGB de las cámaras enteras. Entonces digamos matriz RGB. Entonces usaré lo mismo. En realidad, sólo vamos a copiarlo. Cierra esta sección. Sólo copiemos esto y peguemos aquí. Vale, digamos esto. Veamos el resultado aquí. En realidad, funciona. Así que déjame abrir la imagen original. Es correcto. Por eso se generan nuestras partículas. ¿ Verdad? Vamos a probar el curry. Curry tiene más colores, ¿ verdad? Vamos a probar el curry. Muy bien, genial. Ahora nuestras partículas están en el color exacto de ese píxel. Esto también es genial. Así que vamos a cambiar un Morton y vamos a terminar. Al principio. Cuando guardo esta actualización, ves la imagen del código, ¿verdad? Así que vamos, simplemente eliminémoslo porque nuestras partículas se dibujarán. Entonces lo vimos porque aquí sólo dibujamos la imagen. Entonces para obtener ImageData, debemos dibujar la imagen. No podemos eliminar la escoria, pero lo que podemos hacer en su lugar, después de obtener los datos de la imagen, no necesitamos conservar la imagen. En contraste. Sólo podemos decir claro rect, a partir de 00 todo el camino hasta calmarnos qué? Nuestros signos. Entonces cuando guardo esto, no vemos nada al principio y las partículas comenzarán a dibujarlo. De acuerdo, sólo refrescar otra vez. Aquí no vemos nada, pero las partículas lo dibujan, vale, Así que esto es genial. Creo que es el estado final de este efecto. Espero que hayas disfrutado. Creo que esto será este un efecto útil para tu frío. Nuestro viaje. 19. 1NodeAndNPM: Si aún no has instalado Node JS, sigue adelante y descárgalo desde. Para que puedas descargar no sillas de esta URL. Y debes elegir la versión que acuerdo a tu sistema operativo. Para los usuarios de CPU L1, tenga la seguridad de que está descargando los brazos seis a cuatro versión. O si estás usando Windows, solo puedes instalarlo aquí. Entonces deberías completar el proceso de configuración. Después de instalar, es posible que desee comprobar si el nodo está instalado completamente mediante el comando. Entonces para hacer eso, abriré un terminal de línea de comandos en Mac. Puede utilizar las ventanas de PowerShell. ¿ Está bien? Ver si el nodo está instalado, podemos usar el comando naught dash V. O esto es similar a la versión de dash dash naught. Por lo que nos muestra la versión de node.js. O también puedes comprobar si npm está instalado porque usaremos npm, que es un gestor de paquetes para NodeJS, y descargaremos Bibliotecas usando MPM. ¿ Está bien? Ten la seguridad de que Node y NPM instalados y podrás ver las versiones de ellas para que estemos bien para ir. 20. 2InstallCanvasSketch: Ahora que tenemos instalado y PM, ya podemos instalar la biblioteca Karma Sketch que usaremos en Google. Empecemos por común con Sketch e ingresemos a esa página de detalles. Entonces este es el creador del boceto del comercio. Puedes ver la biblioteca aquí. Utilizaremos esta biblioteca para que puedas consultar la documentación y ejemplos desde aquí abajo. Si vas abajo, puedes ver una guía de instalación para el boceto de comercio. Por lo que ya descargamos el MPN. Podemos usar este comando. Copia este comentario aquí, y vuelve a terminal o PowerShell, ya sea que estemos usando macOS o Windows, lista dash g al final lo hace global. Entonces no lo descargamos localmente en una carpeta, pero estamos descargando globalmente. Entonces presiona Enter y espera el proceso de descarga. Entonces si tienes problemas como yo, errores en la terminal, es sólo el zapato de permiso. ¿ Está bien? Por lo que sólo se puede decir sudo al principio y luego pegar el comando es lo que es, va a resolver ese problema. De acuerdo, solo escribe sudo al principio y luego presiona Enter. Muy bien, así que ahora descargamos la biblioteca Sketch también. En este momento, quiero hablar los comentarios terminales sólo un poquito. Solo quiero que conozcas comandos que debes saber seguir. Muy bien, así que antes que nada, puedes entrar en un directorio usando el comentario cd. Digamos cd Desktop. Y ahora estamos en el escritorio. Puede crear una nueva carpeta usando vectores. Entonces lo llamaré boceto. Acabamos de crear una carpeta de boceto en el escritorio y luego entramos en esa carpeta de boceto. Por cierto, se puede ver que si escribo SK y presiono Tab, solo autocompleta, ¿verdad? Porque solo hay una carpeta que comienza con s k, mi escritorio. Y así es como entraría en ese directorio. Si quieres volver, solo puedes decir cd dot dot dot. Entonces estamos en el escritorio. Nuevamente. Vamos a bosquejar en Scouts, podemos conseguir una lista de carpetas y archivos con solo escribir ls. Por lo que actualmente no tenemos nada en la carpeta Sketch. Por eso no conseguimos nada. Así que vamos a crear una nueva pila de prueba. Así que el comando touch crea un archivo. Muy bien. Ahora si escribes ls, puedes ver la prueba JS que acabamos de crear. Si hubieras creado al jazz y tipo ls, puedes ver eso también. Por lo que Alice debería, deberías ver la lista de los expedientes. Muestra todos los archivos de una carpeta. De acuerdo, estos son los comandos básicos, línea de comandos que usaremos. Entonces creamos nuestra carpeta. Vamos a crear nuestro primer proyecto de boceto. Por cierto, sólo para visualizarlo fácilmente, quiero traer mi carpeta en esa pantalla para que puedas verla simultáneamente. Los archivos de esa carpeta. En realidad no los necesitamos. Simplemente los eliminaré. Ahora podemos crear nuestro proyecto de sketch karma. Así que vamos a revisar. Vuelve a otra vez, la parte superior. Tenemos el comando para crear tu proyecto. También abriéndolo en el navegador. Refresca el tablero abierto. Así que vamos a pegarlo. Vamos a copiar y pegar aquí. Y pulse Enter. Verás que el archivo que acabo de crear. Y también hemos abierto el proyecto en el navegador. Entonces este es un servidor en vivo, lo que significa que se puede ver en terminal, el servidor que se ejecuta en esta URL. Si copia esta URL en algún navegador, puede ver el boceto. 21. 3CanvasSketch: Ahora podemos ver nuestras visuales en el navegador. Pero antes de eso, volvamos a entrar a la carpeta. Se puede ver que crea tres archivos. Bajo carpeta. Escribiremos el código en sketch js. Entonces vamos a abrirlo. Simplemente moveré el archivo en la pantalla. Entonces permítanme explicar estas líneas. La primera línea, este no es sólo término importante. Por lo que esta línea es sólo requiere, requiriendo biblioteca de comas Sketch que acabamos de descargar. Y mantiene el resultado de la biblioteca en la variable de boceto de lienzo. Muy bien, para que podamos usar boceto de color de la biblioteca. Y debajo de eso, hay configuraciones. Settings es solo un objeto JavaScript que se pasará como parámetro de Commerce get function aquí. que esa biblioteca sepa cómo, cómo comportarse con la configuración que acabamos de ajustar. Entonces digamos que quiero cambiar la dimensión. Puedo hacerlo aquí. Entonces digamos por ahora, queremos la Mancomunidad en forma de A4. Ves que está en forma de cuatro. O también podríamos cambiar la orientación de los colores. Como paisaje. Por ejemplo. Lo haces, ya ves, solo lo rotas los colores. ¿ De acuerdo? Entonces el objeto de configuración es para configuraciones generales que puedes ajustar. Para más detalles. Siempre puedes consultar la página de GitHub. Muy bien, aquí en la documentación, también verá más ejemplos. Vamos a seguir adelante y hablar de esta función. Entonces esta es una función de flecha que devuelve otra función. Este contexto, usaremos cada vez que queramos dibujar algo. Y podemos conseguir el peso, también la altura del lienzo también usando estos parámetros. También podríamos añadir algunos parámetros aquí, pero esto es suficiente por ahora. Muy bien. Entonces, vale, suficiente para la parte teórica. Entrémonos en acción y dibujemos un rectángulo básico. Entonces escribiremos la mayor parte de nuestro código aquí abajo. Vale, En primer lugar, deberíamos cambiar FillStyle para que mezcla porque antes era blanco. Quieres dibujar algo. Primero debemos decir comenzar camino. Para que JavaScript sepa que estamos empezando a dibujar. ¿ De acuerdo? Y luego podemos llamar contextos que rect función para dibujar un rectángulo. Por lo que debes hacer x, y, ancho, y alto saborear. Y voy a dar todos ellos son cientos. Por fin estoy aquí. Si digo contextos que se llenan, simplemente sentimos el área del rectángulo. O podríamos simplemente decir trazo para simplemente resaltar los bordes del rectángulo. Entonces veamos la diferencia. Ahora. Déjame escribir primero campo. Entonces lo guardaré. Y cuando un segundo, sí, se puede ver que también actualiza automáticamente el navegador porque es un servidor en vivo. Entonces ya no necesitamos refrescarnos. Muy bien, esa es una bonita característica del boceto del karma. Voy a usar la pantalla como esta ordenada. Podemos escribir simultáneamente el código y ver el resultado. Entonces escribimos píldora aquí. Ves que esa zona está llena. Y si solo lo haces trazo, puedes ver que ahora es un rectángulo vacío. Muy bien. Por lo que uno de los beneficios del boceto del comercio es que puedes tomar una captura de pantalla de los visuales. Tú lo creas. Podemos hacerlo simplemente presionando Comando S en macOS y control como en Windows. Entonces esto es divertido. Digamos que sólo queremos decir nuestra práctica. Y simplemente presionaré Comando S. Y de nuevo, si estás usando Windows, por favor presiona Control S. Y una vez que hagas eso, solo toma una captura de pantalla de las columnas. Y el resultado solo entra en la carpeta de descargas en tu computadora. Entonces este es el resultado. Es sólo un PNG de, pero simplemente lo llamamos. También podríamos por supuesto tomar una captura como esta de la imagen que ya conoces, es justo, esta simplemente no es la mejor práctica, es más rápida y más fácil. Por eso me gusta esa característica del boceto comunista. 22. 4PracticaRectángulos: En este video, tenemos un nuevo reto. Trataremos de dibujar esta imagen usando boceto de Como. Por lo que hay 12 rectángulos uno al lado del otro con un 100 píxeles. Yep. Empecemos a tratar de dibujar esa visión con boceto de coma. Entonces, antes que nada, necesitamos crear un rectángulo, ¿verdad? Usaremos una función de relleno. ¿ De acuerdo? Y además, queremos cambiar las dimensiones del rectángulo para que sea más largo. Tratemos de cambiar la altura. No queremos un rectángulo horizontal, por lo que tal vez deberíamos disminuir el ancho. ¿ De acuerdo? Pero este no es un buen enfoque. Acabamos de dar rodillos estáticos a anchura y altura. Este no es un buen tipo de pincel porque si cambias el tamaño de la pantalla, rectángulo no es sensible. ¿ Está bien? Entonces, ¿y si cambiamos las dimensiones? Así que cambiemos la dimensión de los comas. La cantidad de píxeles en las cámaras es mucho más. Entonces mi rectángulo se vuelve mucho más pequeño. Entonces los objetos no pueden ser dinámicos de esta manera. ¿ Está bien? Pero lo que podemos hacer es declarar una nueva variable. Eso será, este puede ser el por ciento de tiempo de los comunes. Ok. Copiemos esta línea. Y también por la altura, lo llamaré altura destrozada, cumplir con el tiempo por ciento de cardiomiocitos. Pero debería ser tal vez, no lo sé. Probemos 0 también. Vamos a usar vectores y función de altura vectorial. ¿ De acuerdo? Por lo que ahora es receptivo. Muy bien. Este es un mejor enfoque. Pero nuestro rectángulo sigue tomando, vamos adelante y hagamos el rectángulo más delgado. Tal vez 01. Esto es demasiado. Vamos a probar 05. No está mal. ¿ Qué tal 0? Está bien, esto es genial. Hemos creado un rectángulo, pero lo que necesitamos es 12. A menudo. En lugar de crear 12 rectángulos manualmente, podemos usar para bucle. Aquí. Corremos para crear objetos Ralph. Entonces vamos a especificar el límite del bucle for 12th y aumento escrito con uno en cada iteración. Entonces debemos mover estas líneas en esa forma, ¿verdad? Entonces debemos comenzar pad en cada iteración y debes dibujar un rectángulo en cada iteración. Y también debemos llenarlos también. Así que déjame guardar este archivo. En este momento tenemos dos rectángulos, pero todos están uno encima del otro. Muy bien, por eso solo vemos un rectángulo. Así que déjame simplemente separarlos. Entonces deberíamos cambiar el valor x, ¿verdad? En cada iteración. Entonces intentemos cambiar el valor x. Por lo que deberíamos, podemos hacer la multiplicación con IA. Por lo que la IA aumenta en cada iteración, y eso dará una brecha de 100. Ahora podemos ver que muchos de rectángulos, pero necesitamos unos carnívoros más grandes. Entonces esto es genial. Si no puedes morir deben ser de 12 rectángulos. 12345678910. Duro. ¿Está bien? Y también hay un espacio de 100 píxeles entre cada uno del rectángulo, ¿verdad? Porque aumentamos el valor I en cada iteración. Y lo multiplicamos con las manos. Hay una brecha de 100. 23. 5CanvasTranslate: Antes de la siguiente forma, quiero hablar de algunas funciones. Primero, hablemos de Carlos translate. Entonces este es nuestro Lienzo. Al principio. Tenemos un punto de origen, que es 00. Entonces en ese estado, si escribimos el código a la izquierda, los pads de juego, y el rectángulo básico, que comienza en 0054, altura escrita. Dibujará una forma como esta. Entonces veremos tarde a Charles. Las vacas mediante el uso de colores traducen función. Se manejan parámetros para x y para y. funcionará así. Así mu peine era punto de origen es 100100. Muy bien, sólo estamos traduciendo en el curso. Por lo que nuestro nuevo origen se convierte en los puntos de traducción. Para que no lo veas en el navegador. Pero bajo el capó, funciona así. Entonces este estado después de innumerables traducen tu campo, di millones de pad y dibuja un nuevo rectángulo a 0. Dibujará ese rectángulo sobre el nuevo origen. ¿ Está bien? Pero de nuevo, no lo vemos en el navegador. Apenas vemos estos dos rectángulos. Si el código es como a la izquierda. Muy bien. Entonces al final solo estamos traduciendo la vaca solo la estaba cambiando y comenzando el origen en un nuevo punto de traducción. Muy bien, así que vamos a verlo en el código. Vamos a intentarlo. Entonces, antes que nada, solo quiero cambiar el estilo de relleno. Debe ser negro. Entonces digamos que se convirtió en pad. Dibujemos el primer rectángulo del 0.0054 con 54 bytes. Contextos llenan. Verás que tenemos un rectángulo, el origen. Entonces queremos traducir al punto en Hollywood. Entonces en este punto, si decimos dejar el cambio, está bien, porque solo les traducimos 12 estaño de plomo. Así que de nuevo, copia y pega estas líneas y guárdela. Ahora se puede ver, pesar de que decimos dibujar desde el origen, comienza aquí. ¿Verdad? Este es el resultado. 24. 6CanvasRotar: Último video, vemos cómo podemos traducir los colores. Entonces veamos cómo podemos rotar la pérdida de carbón en este ejemplo. Entonces estamos en este estado y nos vamos a traducir. ¿ Y si también lo rotamos a Colón? Entonces en función de rotación, usamos math.pi dividido por un AD porque expande radianes, no grados. Para convertir de grados a radianes, utilizamos esa fórmula. Entonces tengo que traducir. Si rotamos, el auto se giró así. Entonces nuestro nuevo rectángulo debería ser algo como esto. Porque rotamos el lienzo y dibujamos el rectángulo después de esa rotación. Muy bien, intentemos eso en nuestro ejemplo. Vuelve con el editor. Entonces aquí, después de la traducción, solo quiero rotar el contexto también. Por lo que quiero rotarlo a grados. Pero recuerda esto, espero radianes no grados. Por lo que deberíamos convertirlo. Y la función es que usaremos Pi dividido por 180. Hay algunas funciones de bibliotecas como boceto de coma que hace este término, esta conversión automáticamente. Lo usaremos más adelante. Pero por ahora, solo ten la seguridad que estás convirtiendo de grados a radianes. ¿ Está bien? Entonces cuando lo guarde, verás que el segundo rectángulo ha girado. 25. 7SaveRestore: Pero todo lo que ha creado después de esta rotación afectó. Entonces hay un problema. Porque simplemente rotamos los colores. Tal vez no quiera rotar todo lo demás después de esa línea, ¿verdad? Debe haber una manera de restaurar los colores, ¿ verdad? Y hay. Para que puedas usar el bloque guardar y restaurar. Entonces cada vez que solo quieres tener un puesto de control, un punto de ahorro, puedes decir contexto, diría yo. Entonces. Acabo de agregar aquí antes de traducir y antes de rotar. Queremos decir, porque sólo queremos ir a la fase inicial, digamos. Entonces después de decir contextos, Dr. restore, sólo podemos crear un nuevo rectángulo. Esta vez. Hagámoslo ahí. Tomaremos 70. Y verás que dice, está creado en el origen inicial de los colores. Por lo que regresamos al primer estado. ¿ De acuerdo? Así que intentemos, intentemos decir el punto después de traducir. Esta vez, volveremos a la fase que después de la traducción, pero antes de la rotación. Por lo que no vamos a tener ninguna rotación. Pero partimos de cientos y cientos. Déjame guardarlo. Entonces ya ves que ahora es sólo en realidad déjame simplemente cambiar el estilo de relleno. Tourette ordenados podemos ver fácilmente. Entonces esto es simplemente no gira, sino que parte de un 100100 porque solo decimos punto aquí. Y mientras lo restauramos, solo se remonta. En esa etapa. 26. 8aleatorización: Quiero hablar de los randoms por un tiempo. Codificación creativa. Los números aleatorios son bastante prácticos. Los usamos para generar patrones aleatorios, objetos, y también animaciones. Entonces en JavaScript, hay un método incorporado para generar números aleatorios. Por ahora. No son ese número aleatorio. Por ahora. Sólo vamos a registrarlo a lo colosal. Guárdalo. Y en el navegador, si haces clic derecho y dices que estaba empacado. Aquí, entra en la consola. Se puede ver el resultado. Por lo que sólo da un número aleatorio entre 01. Entonces cada vez que digo este archivo JavaScript, el número aleatorio cambiará. Y podemos ver que va a estar por ahí, será entre 01, ¿verdad? Entonces si quieres algo entre 010, solo podemos multiplicar este valor con diez, entonces la salida se ampliará a diez, ¿verdad? Entonces así es como podemos generar números aleatorios. Vamos a usar un número aleatorio en un ejemplo. Así que vamos a crear unos rectángulos aleatorios. Entonces lo haré, como siempre, empezaré con camino iniciado y hacia abajo. En realidad primero, cambiemos el estilo de relleno para chantajearme. Y también quiero cambiar el ancho de línea 20 pixeles. Por lo que ahora podemos usar para crear rectángulos como este. Déjame solo, sí, este momento, solo quiero hacer que el valor x e y sea aleatorio. Por lo que voy a decir que no los amenacen aquí. Y podemos multiplicarlo con nervios de archivo de alquitrán. Entonces puede ser entre 0500 y también para y Así que vamos a ver, cada vez que digo los rectángulos cambian de posición y es absoluto al azar, no tenemos idea de dónde se regenerará. ¿Está bien? También podríamos usarlos en números para anchura y altura del rectángulo. Entonces lo es, Es rectángulo completamente aleatorio mediante el uso de fan de matemáticas. Así que vamos a seguir adelante y crear sólo un solo rectángulo, pero no tiene de ellos. Entonces para hacer eso, crearé un nuevo for-loop, los rectángulos del Townsend. Sólo voy a mover este aquí. Así que quizá no sintamos por accidente cerebrovascular. Y también lo haré simplemente, acabaré de hacer Carlos talla para valores x e y, pero disminuiré los valores de ancho y alto. Así que sólo ahorremos y veamos el resultado. En este punto, cada vez que guardes el archivo, la imagen cambiará. Porque usamos números aleatorios. Si quieres un resultado más rápido, puedes simplemente comentar línea con resultado. O también podrías hacer que el ancho de línea sea aleatorio también. Tal vez sea entre 05. 27. 9AnimationBounce: Menos que o igual a 0, también optó por la velocidad. Entonces eso significa que este es el 0.4 y, y empieza aquí, empieza aquí. Entonces para y, si es igual a 0, en ese punto, solo deberían hacer la velocidad en la dirección opuesta. Así que sólo voy a salvar esto. Y hagamos cinco la velocidad para verla rápidamente. ¿ De acuerdo? Sí, funciona. Entonces esta voluntad, este es un bucle infinito porque nuestra función de retorno se está llamando infinitamente. Y el balón apenas rebotará entre estos dos lados. 28. 10CircleClass: En este video, vamos a crear un proyecto real usando boceto de color. Entonces al final, el proyecto final se verá así. Por lo que verás un video que discutiremos sobre la animación usando boceto en color. De acuerdo, si todo estaba listo, adelante y abre tu línea de comando. Y comenzaremos a crear un nuevo proyecto de boceto. Yo lo llamaré Proyecto cálido. Js, dash, dash, dash, dash, dash abierto. Por lo que sólo se abre en un navegador. Y déjame solo sacar la carpeta también. Entonces en bocetos, tenemos proyecto one dot js. Aquí. Tenemos una columna nueva o boceto presente. Y este esquema ya se explica en videos anteriores, por lo que podemos empezar a escribir código para hacer nuestro proyecto. Entonces, antes que nada, lo que queremos hacer es crear algunos círculos, ¿verdad? Por lo que quiero crear una clase de círculo porque vamos a crear múltiples atajos. Entonces tal vez cientos de círculos. Es por eso que primero creemos una clase como las clases de Eric. Porque necesita un constructor. Círculo necesita valores x, y, y radio para ser creados. Y luego diré que este punto x es igual a x, este punto y es igual a y, this.radius es igual a dos radio. Y estas líneas simplemente haciendo los actos de las columnas del círculo desde el parámetro cuando es turno de tiempo. ¿ De acuerdo? Ahora sólo podemos causar mi sarco. Sarco. Y te daré 100100 para valores x e y, como aquí, 50 por el radio del círculo. ¿ De acuerdo? Entonces en este punto, si digo, no se puede ver nada en el navegador porque creamos el círculo. Pero en realidad no hay nada que condujera el círculo en la columna estaba justo donde no usaron Honorlock. No usamos entidad de accidente cerebrovascular. Entonces para hacerlo. También necesitamos un método de la clase círculo, y llamaré a este método condujo. ¿ De acuerdo? Drone necesita tomar un parámetro de contexto. Utilizará el contexto para iniciar camino. Noche lo hicimos en videos anteriores a cambio. Y luego dibujará el círculo usando arco. Entonces en este momento podemos usar el valor x del círculo, y valor fuera del círculo. Radio del círculo. Ahora quiero que el ángulo de inicio sea predeterminado 0. ¿ De acuerdo? Porque nunca queremos medio círculo. Siempre queremos círculo completo. Por eso también voy a señalar que pi veces 2 por defecto. ¿ Está bien? Y luego finalmente, digamos un golpe de contexto. Así que guarde esto. Y aún creo que está en el navegador porque aún no llamamos a draw. Entonces mi círculo que condujo Mientras llamamos a la función de caída y la guardamos, sigue siendo el trabajo destacado. Es porque le damos al contexto militar previo en la función de empate. ¿ De acuerdo? En este momento se puede ver que el círculo está aquí. A lo mejor podríamos hacer ese relleno solo para verlo fácilmente. También debemos cambiar contextos dot FillStyle a negro. Ahora nuestro círculo está aquí. De acuerdo, pero el primer golpe, y sólo quiero cambiarlo Lima. Hagámoslo ocho. Razonable en este momento. Muy bien, así que creamos nuestro primer círculo usando clase de círculo. En el siguiente video, crearemos múltiples círculos y los mantendremos matriz de círculos. Y entonces podemos empezar a iterar en círculos. 29. 11GenerateCircles: Chicos, ahora es el momento de crear círculos. Solo queríamos crear los círculos IRA por una vez todas. Por eso no lo voy a implementar a cambio. Porque a esto se le llamará muchas veces. C cambiará la configuración de la animación. Ahí es donde llamaré círculos. Matriz de círculos. Voy a crear círculos aquí. Y entonces necesitamos un bucle, simplemente demasiado aparente. A 100 círculos en delta emparejado. Entonces en cada iteración, empujaré un nuevo círculo hacia la NRA. Y déjame simplemente expandir esta pestaña. Entonces quiero valores aleatorios para x, y, y radio. Bueno, vale, sólo voy a decir tiempos aleatorios r, que es 2048. Utilizaré ese valor para el radio x y alfa y. Lo haré simplemente, no sé, tal vez 20 sea un gran límite para ello. Muy bien. Estamos empujando un 100 círculos en la encuesta del círculo y sus propiedades están completas, corrieron. Muy bien, así que vamos a salvar esto. No podemos verlos todavía porque no llamamos Joel función de círculos. Entonces aquí, en lugar de crear un círculo, solo usemos círculos para cada función. Cada uno itera en cada elemento de matriz de círculos. Por lo que sólo podemos decir círculo. Podemos decir círculo que condujo contexto para. Cuando lo guardo, se puede ver a la derecha, los círculos generados al azar están en nuestro Lienzo. Entonces cada vez que digo, cada vez que refresco la página, se generan los círculos. 30. 12AnimateCirlces: Ahora que hemos creado nuestros círculos, es hora de movernos hoy. Haremos eso mediante el uso de la animación de boceto Como. Daremos a cada círculo una velocidad, direcciones x e y. Así que sigamos adelante y lo hagamos de nuevo. Función Constructor. No necesitamos ningún parámetro porque vamos a generar la velocidad por defecto. Entonces voy a decir esto, nota velocity x en este pensamiento así como por qué estos se perdieron ante Alice, ser al azar también. Por eso llamaré match en la función multiplicada antes. Por lo que ese valor será 04. Pero estos círculos también deberían ir a la izquierda. A veces. Queremos un valor entre menos 22. Entonces para hacer eso, solo diremos menos dos con el resultado. Por lo que acabamos de cambiar la Altcoin. La expresión aquí devuelve un número entre menos 22. También diré por valor Y. ¿ Está bien? Entonces cada uno del círculo tiene una velocidad en x e y, donde son números completamente aleatorios. Vamos a dar la bienvenida. Solo quieres que siguiente paso es crear una nueva función de movimiento. En la clase de círculo, llamaré una nueva función. Y este bajo estado de ánimo trastornos. Cuando un descuento sobre cómo hacemos eso es simplemente cambiar el valor x del círculo con la velocidad x Por lo que estamos agregando dx recaída a la posición en cada fotograma porque llamaremos al pequeño función a cambio y ejecutarme habilitar la propiedad de animación. El retorno se llamará marco ovalado. Entonces la función de movimiento se llamará un fuselaje, y x será cambio en un reframe. También haz esto por y. perfecto. Por lo que ahora nuestro círculo de clases ya es justo, deberíamos simplemente mover la función y la declaración de retorno justo aquí, después de dibujar el círculo, también queremos movernos. Este bucle estaría iterando en cada círculo. Entonces al escribir esta línea se moverá en cada fotograma. Pero recuerda innovar en la emoción. Acabas de cambiar la configuración. Así. No quiero simplemente decir, genial. Los círculos se están moviendo al azar. 31. 13BounceCircles: Los círculos se están moviendo, lo cual es genial. Pero queriendo aviso aquí que se van fuera del lienzo. Entonces en algún momento terminaremos con círculos. Lo que quieres en cambio es mantenerlos dentro de las cámaras. Así que vamos a escribir algún código que los círculos rebotarán en las bolas. Necesitamos una función equilibrada. En la función balanceada, comprobaremos los círculos x valor, y lo compararemos con el ancho. Por lo que necesitamos una declaración if aquí. Si esta x menor o igual a 0, eso significa que vamos a ir lado izquierdo del lienzo, o este punto x es mayor que la raíz. Recuerda que no podemos acceder a ancho del comercio desde dentro de la clase. Sólo voy a crear un parámetro para eso. Entonces si la X es menor que 0 o más grande que un whit, el círculo rebotará, ¿verdad? ¿ Y cómo equilibramos? Es tan fácil. Es sólo que deberíamos cambiar la dirección de la x. Y podemos hacerlo multiplicando con menos uno. Si te vas muy bien con disputa de dos, digamos que si quieres rebotar, la velocidad debe ser menos dos. Hagamos esto también por la Y. Si es menor que 0, o si la y es mayor que la altura, entonces deberíamos también en el parámetro de altura. Entonces si este es el caso, despotricamos fuera de las fronteras. Por lo que debemos multiplicar y menos uno. ¿ De acuerdo? Entonces podemos simplemente llamar a la función de límites. Para cada uno. Pasaré los parámetros de anchura y altura. ¿ De acuerdo? Eso no funcionó. Muy bien, así que estaba justo, en lugar de escribir bonos, acabo de escribir. De acuerdo, ya se puede ver el circo rebotando en los papeles que no pueden salir afuera. 32. 14EuclideanDistancia: Ya tenemos una animación de aspecto hermoso. Hagámoslo más bonito y añadamos las líneas entre círculos. Para ello, necesitamos calcular la distancia entre dos círculos y dibujar una línea en esa distancia. Existe una fórmula bien conocida para el cálculo de distancia entre dos puntos. Liderar distancia funciona así. Supongamos que tenemos dos puntos y sabemos que son valores x e y. Para calcular la distancia entre ellos, primero debe mirar la diferencia entre los puntos x e y. Por lo que primero debemos averiguar X1 menos X2, Y1 menos Y2. Entonces podemos usar la fórmula de oclusión para encontrar la distancia entre dos puntos. Entonces veamos este ejemplo. Tenemos dos puntos en el plano de coordenadas. Y nuestro lienzo funciona con pixeles. Entonces podemos pensar que hay similares, lo que significa que puedes tomar estos puntos como los círculos en mi proyecto. Entonces entre dos círculos, distancia en el eje x es de tres. Y la distancia en el eje y es para la fórmula, podemos encontrar fácilmente la distancia entre dos puntos es de cinco. Por lo que vamos a utilizar esta fórmula en son llamados para calcular la distancia de nuestros círculos. 33. 15DrawLines: Continuemos nuestro proyecto y dibujemos líneas entre círculos. A cambio, usaremos for-loop o iterando cada círculo. ¿De acuerdo? Entonces usaré un nuevo for-loop. Pero esta vez usaré el atajo y cambiaré el índice a i Y rodamos este límite final con los carbones. Agradeció. De acuerdo, yo más , además, estoy contento con eso. Por lo que también voy a hacer esta línea aquí, círculo uno también debería cambiar esta. ¿ De acuerdo? Por lo que ahora tenemos un bucle for que correrá 400 veces en este momento. Y sólo estamos manteniendo el objeto círculo en una nueva variable. Dentro de eso para bucle. Quiero crear otro bucle for también. Esto será un bucle dentro de un bucle, y vamos a llamar, llamémoslo j Esta vez. También deberíamos hacer un bucle de cuatro círculos aquí y cambiar éste también. Y llamaré a esta constante la herramienta circular. Ahora mismo. Estamos buscando círculos y estamos manteniendo los círculos en una constante. Y luego estamos buscando circuitos. Nuevamente. Estamos manteniendo el círculo a una constante también. Entonces vamos a iterar dos veces en matriz de carbones. Aquí adentro. Podríamos trazar una línea entre estos dos círculos, ¿verdad? Pero si lo haces así, círculo de barcos a veces será el mismo círculo. Entonces en la primera iteración, digamos que el círculo uno es el primer carbón vegetal en la matriz. El círculo dos es el primer artículo también. Entonces no es una mejor manera en orden en términos de eficiencia. Y además, si dibujas una línea en esto, esta manera, dibujaremos una línea en ambos lados. Entonces del círculo 0 al círculo uno, y también del círculo uno para mostrar llamado 0. Por lo que no es eficiente también. Por eso por estas razones, quiero empezar el valor j de I más uno. Y de esa manera, los círculos no volverán a ser iguales. Porque cuando tenga 0, j será uno. Y cuando sea uno, j será dos, y así sucesivamente. Entonces no estamos dibujando dos veces y no vamos a dibujar, no vamos a tratar de trazar una línea entre el mismo circo. ¿ De acuerdo? Para que así lo hagamos opciones. Muy bien, ahora intentemos trazar una línea entre estos dos círculos únicos. Entonces como siempre, empezaré con camino de inicio. Y entonces tenemos aquí una nueva función, que es contexto que se trasladó a esta bastante autoexplicativa. Haremos valores x e y aquí. Al igual que traducir este contexto. Pasaremos a ese punto que podamos empezar a dibujar en ese punto. Por lo que voy a rodear uno, círculo un punto y ordenado. Ahora estamos en la posición del círculo uno. Y lo que queremos hacer es dibujar un círculo de línea, posición del diente, ¿verdad? Tan igual a eso, x es igual a y. y finalmente, queremos el trazo. Deshaznos de las líneas vacías. Salvemos esto y veamos el resultado. ¿ De acuerdo? En realidad, fue genial. Significa que lo que acabamos de escribir funciona, pero el ancho de línea es demasiado. Así que vamos a cambiar también el ancho de la línea. Tal vez aquí. Pero quiero quedarme así que quiero mantener los círculos, ¿verdad? Por lo que agregaré aquí el pulmón. Pero para las líneas, una es suficiente. Esto se ve mejor. siguiente paso es dibujar líneas entre todos los círculos. Esto está demasiado abarrotado. Y el siguiente paso será calcular la distancia entre círculos y dibujar las líneas de acuerdo a esa distancia. Para que cuando dos círculos estén lo suficientemente lejos, no haya línea entre ellos. 34. 16GetDistance: Encontraremos la distancia entre dos círculos usando la fórmula euclidiana que acabamos de discutir. Lu que voy a crear una nueva función. Y usaré la función de flecha. Llámala sí, obtener distancia. Esta función requiere cuatro routers pi, X1, X2, Y1 y Y2. Entonces recuerda la fórmula. Entonces sabíamos la distancia entre los valores x. Necesitamos distanciarnos entre y valores. Podemos devolver la función sqrt. Esta es la raíz del valor dentro de los parámetros. Entonces deberíamos multiplicar una con un poder de dos y más Muchas veces p. ¿De acuerdo? Por lo que este valor devolverá la distancia entre dos puntos si pasas valores x e y de los puntos. Así que sigamos adelante y usemos esa función. Aquí. Declararé una nueva dist variable y perderé esa función de distancia. Entonces los valores x e y son círculos. Entonces voy a decir círculo un punto x, dos punto x. tanto tiempo que por qué círculo a y? Ahora tenemos la distancia. Y lo que necesitamos aquí es una declaración if. Por lo que debemos revisar la distancia. Digamos que si es menos de 250, ¿de acuerdo? Entonces si dos círculos están más cerca de 250, queremos dibujar una línea. Por lo que voy a mover estas líneas esa declaración IF. Entonces cuando guardo, podemos ver ahora no estamos dibujando líneas entre todos los círculos, pero sólo lo hacemos corrió dos círculos son realmente cercanos. 35. 17ResponsiveLineWidth: También quiero cambiar el ancho de línea con respecto a la distancia entre círculos. Vi esa banda dos círculos se acercan. El ancho será recogedor y luego desmoronarse. La línea será un tumor. De acuerdo, Así que para hacer eso, más en esa declaración si, vamos a cambiar el ancho de línea aquí. Por lo que quiero un valor máximo de diez. Empecemos con diez. Y disminuiremos el ancho de línea con respecto a la distancia. Pero la distancia comienza desde 250. Vamos a dividirlo por 25. Por lo que este valor será máximo diez. ¿ De acuerdo? Y puede ser 0 para el valor mínimo 0 línea que será tau. Y vamos a salvar esto. Y ahora se puede ver que nuestras líneas se están volviendo más gruesas y delgadas con respecto a la distancia. Entonces una cosa que quiero arreglar también, las líneas son visibles dentro de los círculos. Se puede ver que empieza desde el centro del círculo, pero quiero que empiece desde fuera del círculo. De acuerdo, entonces las líneas no deberían ser visibles en el circo. Para ello, podemos sentir el interior de los círculos con color blanco. ¿ De acuerdo? Entonces podemos hacerlo en función de conducción. Vamos a llenar el estilo, cambiar el estilo de relleno aquí a blanco. Y sólo podemos decir combustible. Entonces cada vez que dibujas una línea, también dibujamos el círculo. Y al llenar el círculo dentro del círculo con blanco siempre se laboratorios las líneas. Entonces cuando lo guardo, podemos ver que no hay línea dentro del círculo. ¿ De acuerdo? Pero eso hace que nuestras líneas, ya sabes, diez o así. También cambiaré el ancho de la línea. Tal vez 12. Vale, esto es genial. Entonces depende de ti. A partir de ahora. Podemos cambiar el peso de la línea. Podemos cambiar nuestras líneas que valgan la pena en realidad, puedes cambiar los bordes de los círculos, o puedes cambiar la velocidad de los círculos y así sucesivamente. Entonces depende de ti. Pruébalo. Espero que hayan disfrutado este proyecto. 36. Cómo empezar (visualizador de audio 1): Bienvenido de nuevo a esta sección. Haremos un increíble visualizador de audio que responda a cualquier entrada de audio. Como se puede ver, las pelotas saltan cuando hablo, cuando cortaré o cuando toco música. Y entonces sigues bien. Cuando estés listo para hacer esto. Dirígete al siguiente video para empezar. 37. 2Configurar: Como siempre, partiremos desde la línea de comandos. Así que déjame traer el mío. Actualmente estoy en escritorio. Vamos a la carpeta de proyectos donde guardaré y almacenaré mis proyectos. Entonces si escribo ls aquí, puedes ver nuestros antiguos proyectos. Así que vamos a crear aquí una nueva carpeta. Y llamémoslo visualizador de audio. Entra en esa carpeta. Vamos simplemente grandes archivos. Entonces, como de costumbre, necesitamos un archivo HTML. Esta vez. Ya que estamos obteniendo los datos del micrófono, quiero crear un nuevo archivo llamado micrófono JS. Y por último, necesitamos un nuevo archivo para la visualización. Llamémoslo Visualizador dot js. De acuerdo, estamos bien para irnos. Si recuerdas el comando o abriendo esta carpeta en código de ancho. Si estás usando dentro de esta versión como yo, puedes escribir un comando como este. O si estás usando la versión normal del código de riesgo, solo puedes mandar llamado espacio-tiempo. Cuando tecleamos ese comando, abre la carpeta en código Oeste para que estemos bien para ir. 38. 3HTMLTemplate: Empecemos el proyecto importando plantilla HTML5. Como siempre. Entonces aquí, esta vez usaremos archivos JavaScript. En primer lugar, cambiemos el título. Por lo que queremos importar estos dos archivos JavaScript, calderas HTML. Entonces voy a crear un nuevo script y hacer un micrófono swash JS, y también visualizador JS. Entonces recuerda, usaremos clase de micrófono en visualizador. Entonces el orden es importante aquí. El guión del micrófono debe ser un arco de guión visualizador. Vale, entonces para empezar, por favor. Vamos al archivo JS del micrófono y lo guardaremos. 39. 4CompleteHTML: Estas etiquetas de guiones no deberían estar en sombrero, pero deberían estar en cuerpo. Justo después de que tengamos innumerables, ¿verdad? Voy a llamar id de Michael fue innumerable. Aunque una cosa más que debemos agregar aquí es el archivo CSS. Casi lo olvidamos, pero es que hay otra forma de agregar archivos. Para que puedas hacerlo dentro con Dios. Por lo que podemos hacer clic en este nuevo icono de archivo y solo puedes escribir el nombre. De acuerdo, y también vamos a vincular ese archivo CSS así. De acuerdo, así que no tenemos que crear nuevos archivos desde la línea de comandos. A lo mejor esta es una forma más fácil. Por lo que ahora tenemos archivos CSS o JavaScript, y nuestro código fue creado en HTML. Para que podamos empezar a escribir código. Micrófono, Jess. 40. 5MicrophoneJS: En lugar de escribir todo el archivo JS del micrófono, solo copiaré y pegaré el código aquí. Entonces encontré esto en la web para obtener datos del micrófono. Esta es una caldera que puedes usar todos tus visualizadores de audio. Por lo que no necesitamos saber exactamente los detalles aquí. Simplemente obtendrá los datos del micrófono, la entrada de audio. En realidad no necesitas cambiar nada aquí. O tal vez quieras cambiar. Es posible que desee cambiar el tamaño de FFT si desea alguna variedad en la salida. Así que déjame simplemente explicarle rápidamente lo que tenemos aquí. Esta es solo una clase casual llamada micrófono. Aquí tenemos el constructor. Entonces la primera propiedad es identifica si el micrófono está inicializado o no porque queremos esperarlo si aún no se inicializa, ¿de acuerdo? Y al final de todo, se hará realidad. Y luego solo obtenemos la función de medios de usuario. Y ten en cuenta que todavía ahí, todo cuando es religioso. Entonces no tenemos ninguna biblioteca de terceros aquí. Y al parecer, este método devuelve una promesa porque utiliza entonces después de obtener la función de medios de usuario, que básicamente esperará esta línea. Y correremos después de que devuelva algo. Entonces si regresa con éxito, llamarán a estas líneas. O si hay un error, solo alerta el error en el navegador. ¿ De acuerdo? Y cuando esté listo, llamarán a estas líneas. Por lo que tenemos analizador aquí. Y estas líneas decidirán el tamaño de FFT, longitud del buffer, y así sucesivamente. Y por último, cambie la propiedad inicializada a true después de conectarse al micrófono. Y de lo contrario, solo alertará el error en el navegador. Muy bien, por lo que también tenemos dos métodos aquí. En primer lugar se obtienen las muestras. Entonces es el resultado que usaremos. objeto que devuelve será una matriz y su longitud será la mitad del tamaño de FFT. Por lo que declaramos una talla 50 512. Aquí están las muestras. La longitud de la matriz será de 256, ¿de acuerdo? Por lo que siempre es la mitad del tamaño de FFT. Y usaremos esa encuesta de muestra durante la visualización del audio. De acuerdo, así que piense así. Podemos tener 256 bolas que cada bola responderá a un elemento en esta matriz. ¿ De acuerdo? Entenderás mejor cuando realmente lo hagamos, lo hagamos y lo pongamos en práctica. Y por último, tenemos la función de volumen que conseguirá métodos de matriz. Y creo que es bastante autoexplicativo. Este método devolverá el volumen de las entradas de audio. 41. 6MicData: Ahora que nuestro micrófono está listo, podemos empezar a escribir el código en visualización. Abra este archivo. Lo primero que quiero hacer aquí es mostrarte los datos que obtenemos del micrófono. Para ello, crearé una nueva variable, micrófono. De la clase de micrófono. No teníamos ningún parámetro en constructor. Podemos crear un nuevo micrófono u objeto como este. También vamos a crear esa función animar. Porque queremos obtener los datos del micrófono en tiempo real de forma continua. Y como saben, necesitamos solicitar marco de animación para animar esta función. Y también tenemos que llamarlo en algún lugar del código. Entonces entre estas dos líneas, lo que escribimos se llamará en cada fotograma de forma continua. Por lo que sólo quiero iniciar sesión los datos del micrófono en la consola para que podamos ver qué es exactamente. Pero primero, quiero comprobar si micrófono ya está inicializado. Así que recuerda, tenemos una propiedad y es cierto cuando Eris tenía las cosas se hacen en micrófono. Entonces, si se inicializa el micrófono, solo consigamos muestras usando la función de muestras. Y esto aquí. Por ahora acabemos de iniciar sesión en la consola. Entonces guardo esto y acabaré de entrar en index.HTML. Haga clic derecho abierto con servidor en vivo. Si no tienes esta opción, siempre puedes descargar Live Server de extensiones en VSCode. Lo hicimos antes en este curso. Por lo que no voy a explicar los pasos en este momento. Pero si instalaste la extensión Live Server, solo puedes abrirla así. Y déjame simplemente llevarlo a esta pantalla. Y también lo haré el blanco mi pantalla así. Muy bien, por lo que nuestro código se está ejecutando en este puerto. Veamos la consola. Estamos obteniendo datos de micrófono de forma continua. Y hay muchas, muchas muestras. Y sólo va continuamente porque estoy hablando, ¿verdad? Y esto también usa mi navegador de micrófono. En el primer paso. Cuando abres Live Server, puede pedirte que permitas usar micrófono, ¿de acuerdo? Y una vez que lo aceptes, puedes usar la entrada de audio. De acuerdo, así que veamos el único registro aquí. Entonces es una matriz. Tal y como discutimos. longitud es de 256, y los valores son sólo algunos valores pequeños. Estos valores son, cada uno de ellos representa algo. realidad no soy un experto en sonido. Y yo no, en realidad no sé cuáles son estos valores. Pero puedes imaginarlo como si fueran frecuencias o algunas señales que explican el sonido en ese punto exacto. Podemos utilizar estos valores para visualizar el sonido. Y estos valores son valores realmente pequeños. Hay como entre menos cuatro y más cuatro. Y por lo general son menos de uno. Por lo que pueden ser valores negativos también, o valores positivos también. Y creo como los valores van aumentando. Ahora estamos recibiendo algunos sonidos interesantes. ¿ Está bien? Entonces si no hablo, los valores serán 0. Por ejemplo, en este punto, no hay entrada de audio. ¿ Está bien? Entonces ahora que sabemos cómo se ven nuestros datos de muestras, usaremos estos datos. Podemos preprocesarlo, por supuesto. Pero eventualmente usaremos estos datos para crear algunos elementos visuales. Vale, entonces empecemos a usar nuestro comercio para crear algunas visuales. 42. 7BallClass: Empecemos a dibujar nuestras imágenes con la creación de Karl Marx. Como es habitual, obtendremos elemento por ID de plantilla HTML. Déjame revisar el ID de mis colores. Vamos a copiar y pegar aquí sólo para estar seguros de los nombres esteras. Vamos también a crear CTX, que métodos de contexto. Y queremos 2D. Y por último, podemos ajustar el peso al ancho de la ventana y a la altura de la ventana. Muy bien. Ahora, ¿por qué los ajustes están listos? Podemos empezar a crear la primera clase. Entonces al final, lo que queremos en innumerables una serie de pernos, ¿verdad? O atajos. Yo sólo les llamaré bolas porque saltarán. En este proyecto. Por eso estoy creando una clase llamada bola. Y como de costumbre, tendremos un constructor de esa clase. Obtendrá dos parámetros, x e y. y estos valores serán las posiciones x e y iniciales del balón que habrá desova. Así que sólo asignemos este punto x dot y Entonces, ¿por qué queremos aquí es, así que vamos a crear un cuenco y que es un círculo completo. Y si recuerdas, estamos haciendo esto usando CTX aumentada. Aquí, lo que tenemos que hacer es el valor del radio. Por eso también necesitamos un radio. Pero no quiero sacarlo de parámetros porque solo éramos ganas de hacer que todos los radios de las bolas estén diciendo. Entonces solo usaré un valor predeterminado de ocho. Entonces decidamos también su color. Puedes cambiar lo que quieras. Puedes usar azul, rojo, gris. Y creo que también voy a explicar esto más tarde, pero solo quiero vamos, vamos a saltarnos esta parte. Agreguemos esa propiedad. Y entonces lo que necesito aquí es saltar por SSH y también falso. De acuerdo, porque las bolas caerán y saltarán según el audio en Detroit. Pero en la fase inicial, en el primer inicio del proyecto, las bolas caerán. Por lo que comenzarán desde arriba y caerán ante todo. Por eso no quiero hacer que la caída fuerce 0, pero en cambio, solo lo haré 0.1. ¿ Está bien? Donde he hecho con el constructor, solo agregaremos una propiedad más, pero la agregaré cuando el tiempo sea correcto. Entonces, como de costumbre, también necesitamos dibujar métodos. Es incluye ella toma FillStyle. Voy a asignar esto a este color porque cuando queremos cambiar el color, la pelota también estará en ese color. Por lo que debemos decir comenzar Pat también debe decir barra CTX para dibujar un círculo. Entonces este punto x bar, valor x, lo siento, este punto y por valor y. Esto lo intentarán y usarán para el radio. ángulo de inicio será 0 y el ángulo será pi veces dos porque siempre dibujaremos un círculo completo que parecerá un cuenco. Por último, podemos decir píldora CTX. De acuerdo, por lo que ya deberías estar familiarizado con estas líneas. Hicimos muchas prácticas al respecto antes. Entonces lo que necesitamos, lo que más necesitamos son dos métodos más. Por lo que sólo queremos un formateado y un salto. Eso es todo para la clase de pelota. Y escribiremos el contexto de los métodos de caída y salto más adelante. 43. 8GenerateBalls: Muy bien, tenemos la clase de pelota. Vamos a seguir adelante y generar el balón para que podamos verlos en columnas. Para ello, lo que necesitamos es una matriz. Estará vacío al principio. Y necesitaremos una función que genere las bolas. Voy a utilizar la función de flecha aquí. ¿ De acuerdo? Entonces en esta función, en primer lugar, déjame simplemente eliminar este registro para que no veamos. Así que limpiemos. Cierra la consola. Ok. Entonces en enero falso, esta vez vamos a hacer algo diferente. No quiero definir estáticamente la longitud de la matriz de bolas. Así que no quiero simplemente crear un jefe 100. Digamos. Lo que quiero en cambio es crear las bolas, que serán receptivas para el pie Carlos. Entonces lo que quiero decir es, si el carbón era por qué sabes que debería ser menos bolas para ante, por ejemplo, ¿verdad? Ahora bien, si tenemos un comuneros más grandes, podemos tener 100 bonos. ¿ De acuerdo? Por lo que eventualmente la tierra de la matriz de bolas será dinámica. Para hacer eso, sólo asignemos. Vamos a crear una nueva variable, distancia. Esto aclarará la distancia entre cada rejilla de bolas. Por lo que sólo quiero hacer una fiesta o el comienzo. Y solo calcularemos cuántas bolas debo estar usando. Carlos ancho dividido por distancia. ¿ De acuerdo? Lo que tiene sentido, ¿verdad? Porque B tiene un ancho de 1 mil en queremos estoy cansada t distancia. Por lo que deberíamos tener algo alrededor. Estoy cansada tazones de té, ¿verdad? Porque habrá instancias y el peso del balón también. Pero sólo voy a decir menos dos aquí porque queremos distancia desde el principio y al final también. Cantidad de bolas se calculará así. De acuerdo, entonces ahora es receptivo a la Kawasaki. Cuando cambiemos el ancho del navegador, la cantidad de bolas cambiará. Y lo que necesitamos es un bucle for. Y digamos que yo por iterador. Y queremos bucle esto. Queremos identificar cantidad de Bosch vio que esta va a estar funcionando cantidad de lunares veces. Y en el bucle de otoño, acabo de decir bolas empujan r1 para crear una nueva pelota y empujarla en los cuencos, ¿verdad? Así que llamemos a pelota nueva. Y sólo tenemos que dar valores x e y aquí. Para valores x e y. Para y raramente, es realmente simple. Sólo podemos dar un valor estático. Por ejemplo, 500. ¿ De acuerdo? Pero, ¿qué valor x? Necesitamos volver a usar la distancia. Entonces la primera pelota debe ser distancia, ¿verdad? Entonces cuando digo un tardy, es x debe ser tardy. El segundo balón debe ser más una distancia más, ¿verdad? Entonces 2R2 más Turquía, la exposición del segundo balón debe ser 60. Entonces si digo distancia más yo veces distancia, creo que habrá un jefe justo al lado del otro entre el cosmos. Por lo que habrá tanto a lo largo de la Guerra Fría, habrá brechas al inicio y también entre cada una de las bolas. Eso es lo que queremos. Y cuando guardo esto, no pasa nada porque aún no llamamos a la función de bolas genéricas. Cuando lo llamo como decir, las bolas se generan pero no podemos verlas todavía porque nuestro color es qué? En realidad, solo quiero cambiar de fondo a negro, pero vamos a comprobarlo primero. Por cambiar el color de las bolas. ¿ Tenemos la canción de pelota, Carlos? No lo soy exactamente. Eso es porque aún no dibujamos las bolas. Entonces solo generamos al jefe, pero no llamamos a la función de sorteo. Entonces lo que tenemos que hacer es decir bola por cada bola, simplemente estoy básicamente iterando en cada bola en esa matriz. Y llamaré a negrita una función de dibujar. Por lo que ahora tenemos las bolas en el Lienzo. ¿ Está bien? Entonces nuestra función está funcionando. No necesitamos dibujar las paredes aquí. Simplemente lo eliminaré. Y también volveré a hacer el color blanco. Y vamos a entrar en style.css, ventaja muy real, solo color de fondo. Por lo que aquí quiero seleccionar todo mediante el uso de asterix. Vamos a igualar el margen y relleno 0, caja-dimensionamiento, border-box. Por lo que estos son simplemente por defecto. Casi estamos haciendo esta matriz en cada proyecto. Y también. Por lo que en este momento, si te das cuenta, tenemos barras a la derecha. Entonces esto es justo, esto hace que estas líneas haga que amigo se desplaza. No queremos esto. Por eso solo diré desbordamiento. Veamos. Entonces van los bares. Por último, vamos a cambiar. La columna era suelo desnudo, molido, negro o fuera. 44. 9FallingBalls: Muy bien chicos, vamos a dibujar las bolas y hacerlas caer. Entonces, en primer lugar, animar la función. Si se inicializa el micrófono, quiero dibujar las bolas. Entonces para hacer eso llamado bolas array. Y usar para cada método. Aquí, solo pasemos una pelota que itera de las bolas. Y sólo quería decir bola dibujada. Cuando hacemos eso, se pueden ver las bolas en comas. Y nota si cambiamos el tamaño de columna, la cantidad de bolas, cadenas, para que tengamos ambos trial a vacas. Y como vamos a hacer una animación aquí, solo quiero limpiar los conos en un reframe. Haré esto mediante el uso de la función clear rect. Pasará x e y a partir de 0 todo el camino hasta Carl Woese, ancho y alto. Para que puedas ver que tenemos bonitos bonos. Si también los hacemos caer. Justo antes del sorteo. Podemos ver caer las bolas. Pero primero debemos buscar también la función. Entonces para hacer eso, perderé formas de caída y cambiaré las bolas. ¿ Por qué? En realidad, voy a decir que este punto y plus equivale a este punto de plena fuerza, que actualizará el valor y del balón en cada fotograma y añade plena fuerza. Entonces cuando guardo esto, se puede ver que las bolas apenas están tirando lentamente. Hagamos que esto parezca más natural. En la vida real, cuando algo está cayendo, está aumentando toda la fuerza, ¿verdad? Debido a la gravedad. Por eso también aumentaré toda la fuerza en cada fotograma, 0.05. Por lo que ahora se puede ver un efecto más natural. Pero en algún momento la pelota debe detenerse. Entonces aquí solo agregaré la restricción. Solo queremos que las paredes caigan si sólo lo son. Y es menor que la altura de Coleman dividida por dos. Entonces si sólo el jefe o un tazón, la mitad de los colores, caerán. De lo contrario, se detendrán. Así como esto. Déjame simplemente refrescarlo de nuevo. Por lo que partieron de posicionar lo bifans. Y empezaron a caer porque estamos llamando a la función de caída en cada fotograma. Y sólo tenemos una restricción, que es a la vez y posición debe ser mayor que Carlos altura dividida por dos. Por eso hay, hay top. Cuando llegan a ese punto. 45. 10JumpingBalls: Cuando las bolas para cada uno en este punto, que haya llamativas, golpeando al suelo. Queremos que salten, ¿verdad? Para ello, lo que necesitamos es otra declaración si aquí. Tenemos que comprobar si la pelota está cayendo. Porque si no están cayendo, queremos hacerles saltar. Y para comprobar ese valor, solo necesitas otra propiedad. Vamos a añadir. Se está cayendo un inmueble. Y será cierto al principio porque el jefe caerá en el estado inicial. Entonces si las bolas no están cayendo, lo que significa que las bolas está cayendo propiedad es falsa. En ese caso, queremos que salte. Muy bien, subamos y aquí declaramos un método de salto. Entonces lo haré, en primer lugar, lo que queremos hacer es hacer toda la fuerza a 0, porque antes teníamos toda una fuerza. Y afectará nuestra posición y en cada fotograma. Entonces cuando la caída y al sostener la propiedad es falsa, lo primero que queremos hacer es hacer a cuatro patas 0. Entonces ahora podemos afectar nuestra y. saltamos fuerza. Entonces esta vez usaré menos iguales porque en sistema de coordenadas de comercio, cuando el balón va subiendo, es por eso que ReLu está disminuyendo. Por lo que en la tribuna, 0 está aquí en parte superior y está aumentando cuando las bolas están bajando. Entonces si quieres que salte una pelota, debemos disminuir su valor y. Por lo que quiero disminuir por qué ReLu saltaría fuerza. Y para hacerlo más natural, volveré a hacer la misma lógica. Disminuiré la fuerza de salto también. ¿ De acuerdo? Por lo que también hemos saltado métodos ahora. Pero una cosa que no debemos olvidar al saltar termina. Cuando se remonta al estado descendente. También debemos resetear. Saltar fuerza a 0, igual que sí caíamos fuerza aquí. De acuerdo, Así que ahora se ven idénticos. Sólo son simétricos al otro. Muy bien, vamos a intentarlo. No funcionó. Y esto es porque, esto se debe a que nuestra fuerza de salto es 0. Vamos a cambiar esto. Por lo que tenemos una fuerza de salto. Pelota. De acuerdo, Así que tal vez deberíamos cambiar también pelota está cayendo propiedad porque nunca la hacemos falsa, ¿ verdad? Siempre es cierto. Por lo que agregaré aquí una declaración else. Y hacer bola está cayendo a la falsa. Y vamos a intentarlo. Es. Solo salta por un tiempo. ¿ Ves eso? Déjame ejecutarlo de nuevo. Y luego caída continua. ¿ De acuerdo? Entonces esto se debe a que esta sentencia if ejecuta uno, aunque está cayendo propiedad es falsa. Por lo que también debemos dar una restricción aquí. El cheque si está cayendo y cayendo estado, ¿verdad? Entonces si el balón, por lo que estábamos llamando a la función, si sólo la pelota está en estado de caída y su posición y es menor que el sitio de coma. Así que vamos a salvar esto. Y también, tal vez deberíamos. Tal vez deberíamos simplemente cambiar el nuestro a else-if. Y solo agreguemos una restricción. Si las bolas y la posición es mayor que la causa altura dividida por dos. Esto se ve mejor, ¿verdad? Porque sólo queremos saltar si sólo, si sólo su valor y es mayor que Carlos altura dividida por dos. Entonces, en otras palabras, en medio de las columnas. Muy bien, por lo que vamos a cambiar tanto la fuerza saltó aquí más tarde y aquí cuando la pelota. Así que básicamente sólo estamos disminuyendo la fuerza de salto, ¿verdad? Cuando el balón, vamos a comentar esta línea. Entonces no bajando. Cuando no comento baja. Por lo que también estamos disminuyendo la fuerza de salto, y comienza desde 0.1, que será un valor negativo. Entonces en lugar de hacer un salto, simplemente, ya sabes, los hacemos caer de nuevo. Entonces hagamos que este valor sea diez, digamos 400. Nada cambia. Vamos a comentar esta línea. Esto acaba, ¿ hice un errata aquí? Por lo que debemos cambiar su posición y en cada fotograma. Así que vamos a entrar en la consola. Me falta algo. Entonces si la pelota está cayendo, así que deberíamos, este tronco debería ahogarse en nuestro marco en este momento. Y en efecto es que podemos ver en la consola, ¿verdad? Entonces el método de salto se está llamando ahora reframe y por qué se llama. También vamos a iniciar sesión aquí. La fuerza de salto. Eliminemos esto. Entonces la fuerza de salto es 0. ¿ Por qué está sucediendo eso? Es porque cuando estamos cayendo, solo hacemos la fuerza de salto 0, ¿verdad? Entonces al principio lo hicimos diez. Pero cada vez que acaba de hacerlo caer, abajo, la fuerza se convierte en 0, por lo que no están saltando. Entonces en realidad, no deberíamos asignarlo aquí. Deberíamos asignarlo corrió el estado electoral termina, que está aquí, ¿verdad? Cuando la pelota está tirando se quedó falsa. También debemos declarar una fuerza de salto. Yo sólo voy a hacer Tanh aquí. Ahora, se puede ver que nuestras pelotas apenas están saltando. Pero tal vez diez es demasiado. Hagámoslo también. Bien, genial. Pero tenemos otro problema ahora mismo. El, nunca regresan. ¿Está bien? Entonces para evitar eso, sólo agregaré otra restricción aquí y si declaración. Entonces cuando la pelota está saltando, en algún momento, debemos encender el estado espantoso, a la derecha, para que regresen. Y sólo quiero hacerlo. Cuando la fuerza saltada se convierte en 0. Vale, entonces es en la vida real. Aunque. Cuando saltamos. En la vida real, escuchamos una fuerza de salto en la fase inicial. Y la gravedad está disminuyendo la fuerza de salto en cada segundo rasgo. Y en algún momento, o la fuerza de salto se convierte en 0 y empezamos a caer. ¿ Verdad? Entonces hagamos la misma lógica. Lógica aquí. Cuando la fuerza de salto se convierta en 0 o menos de 0, haga que las bolas vuelvan a caer. Pero para ello, debemos activar descomentar, esta línea que disminuirá, saltar fuerza, replantear. Y cuando es menor que 0 o igual a 0, deberíamos volver a encender el estado descendente a verdadero. Así que probemos esto. Ok. Ahora podemos ver que nuestras pelotas están saltando en cualquier salto, en cada salto, o la fuerza de salto y la fuerza de caída apenas están aumentando y disminuyendo como natural. Y en algún momento, en el punto pico, fuerza de salto se convierte en 0. Cuando eso sucede, empiezan a caer de nuevo. ¿De acuerdo? Entonces así es como se puede hacer una lógica de gravedad sin usar ningún motor de juego y nada más. Con puro Vainilla JS. Un equipo más que queremos sumar aquí, esa será la conexión real entre el audio y nuestras bolas para cambiar la fuerza de salto con las entradas de audio. Y lo haremos en el siguiente video. 46. 11AudioInput: Muy bien chicos, son los pernos están saltando. Y es hora de la parte más emocionante, que es Jim, hacerlos saltar receptivos a la entrada de audio. Por lo que debemos cambiar esta línea obviamente, porque queremos simplemente saltar peso de fuerza los datos del micrófono. De acuerdo, así que ya tenemos datos de micrófono. Y recuerde, matriz de muestras Es el área de muestras incluye 256 elementos. Y también tenemos algunas bolas, sin embargo, pero nuestra cantidad de bolas no es específica. Depende de Lienzo. Entonces podríamos tener más de 256 o podríamos tener menos. Entonces no voy a coincidir con ellos exactamente. Pero podríamos, si pudiéramos ser indexados de alguna manera, involucra array, ¿verdad? Podríamos asignar cada muestra a una pelota. Entonces como primera muestra. Por lo que el primer elemento en la encuesta de muestras puede ser la fuerza de salto para la primera pelota. Y el segundo elemento en la encuesta de muestras puede ser la fuerza de salto para la segunda pelota y así sucesivamente. Creo que va a ser genial. Y para ello, debemos rastrear el índice de bolas en esto para cada uno. Y si solo Google for ETL script, puedes ver los parámetros de esa función. Y el segundo parámetro es index. Entonces el primero que acabamos utilizar es el valor del elemento actual. Simplemente lo llamamos bola. Si pasa segundo, esto es opcional. Pero puedes pasar. Y es, está devolviendo el índice del elemento actual, pero sólo estamos buscando. Entonces vamos a seguir adelante y usarla. Entonces para usar eso, solo agregaré un paréntesis al lado del balón. Diré indexado. Ahora en este forraje, puedo bloquear. Siguiente. Permítanme simplemente borrar las otras líneas de registros. Entonces solo tenemos éste. Guardemos esto y revisemos la consola. Por lo que ves que se inicia desde 0 y aumenta en cada iteración. Muy bien, por lo que podemos usar este valor de índice. Y aquí quiero llamar a muestra, lo siento. Vamos a probar el índice de muestras. Sólo intentemos usar muestras para la fuerza de salto. Pero de nuevo, recuerde que las muestras son solo valores realmente, realmente pequeños. Así que también vamos a registrar la consola, iniciar sesión en las muestras de la consola para ver. Por lo que parecen que no están saltando. Pero si miras de cerca, puedes ver algunos pequeños movimientos. Y esto se debe a que nuestras muestras son números realmente pequeños. Entonces deberíamos, y también hay valores negativos. Por lo que no queremos ninguna fuerza de salto negativa. Por lo que podemos utilizar la función mat abs para obtener el resumen del valor. ¿ De acuerdo? Cuando hacemos eso, ya no tenemos valores negativos. Y también lo que queremos hacer es multiplicar este valor con diez, tal vez porque son demasiado pequeños. Hagámoslos positivos y multiplicarlo con diez y ver qué pasa. Cuando cierro Consola. Ya no necesitamos cerraduras. Digamos esto. Ahora mismo. Te puedes ver y yo hablo, las bolas apenas están saltando y parece que multiplicar con diez es suficiente. Podrías por supuesto, aumentar este valor si quieres más, salta Fox. O si quieres volverse loco, también puedes volverte loco. Pero recuerda, si saltaron demasiado, saldrán fuera del lienzo. Así que lo guardaré diez. Y creo que está hecho. Entonces probemos una solución diferente. Sólo se están moviendo de nuevo. Y en este punto, realidad podrías, realmente depende de ti a partir de ahora. Para que pudieras cambiar los colores. O también podrías agregar un método aquí. No, cambia los colores. Y tal vez puedas hacer un parámetro aquí, como un valor. Y podrías cambiar de color según el índice de muestras. Para que las bolas puedan cambiar de color con el audio. Y aquí puedes usar valores RGB, RGBA y pasar parámetros. Puedes hacer todo. Puedes cambiar, saltar fuerza si quieres bolas más rápidas. O lo que puedes hacer. De lo contrario. Si quieres bolas más altas o más grandes, solo podrías cambiar el radio como este. Pero recuerda cambiar la distancia también. Sólo para estar seguro de que no están chocando. Es hacerlos más pequeños otra vez. O podrías hacerlos realmente más pequeños así. Depende de ti. Adelante y juega con los valores y agrega algunas características nuevas para todos. 47. 1GettingComenzar: En esta sección, vamos a hacer otro visualizador de audio que se puede ver en la pantalla. Déjame tocar música para que puedas ver mejor el efecto. Trabajo. Si te gusta el efecto. No trabajo para el siguiente video donde vamos a empezar a hacer este proyecto. 48. Configuración para el visualizador de audio 2: He creado el proyecto y todo es igual con el visualizador de audio anterior. Esta vez acaba de cambiar el título con visualizador de audio a. Por lo que también vinculamos estilo CSS. Nuevamente, tenemos un comercio con el id Mike sin techo. Contamos con micrófono JS y visualizador, ingenioso, y apo. Este archivo HTML con live show over solo haciendo clic derecho y seleccionando esta opción. Y luego solo puedes usar la misma plantilla para micrófono JS. Porque de nuevo, no necesitamos ninguna diferencia y esto es lo que necesitamos en este proyecto. También el estilo CSS es lo mismo con el anterior. Simplemente usa asterix para seleccionar todo para ajustar el margen y el relleno. Simplemente haz propiedad de desbordamiento oculta del cuerpo y haz que el fondo sea negro. Por lo que aún no definimos el ancho y la altura del comercio. Es por eso que nuestra Cola viene estas altura de Bután por defecto. Por lo que lo cambiaremos en visualizador JS. Si estás listo con estos dos archivos, podemos empezar a visualizar un JS. 49. 3CreateFiguras: Como siempre, empecemos a crear colores. Usaremos aquí nuestro ID de comercio. También vamos a crear CTX. Vamos a ajustar qué a Ventana. Y también altura, que conocemos en nuestras alturas. Por lo que nuestro comercio ahora está totalmente ajustado y cubre todos los navegadores en su pantalla. Y lo que queremos hacer a continuación es asignar el micrófono al nuevo micrófono. Y recuerda que llamamos a esta clase desde el micrófono js. Y podemos hacerlo así. No estamos importando nada porque micrófono JS es solo un tazón de visualizador JS. Y al final, todo el JavaScript se transformará en este archivo HTML. Por lo que sí tenemos realidad clúster de micrófono en visualizador JS. Y vamos a comprobar si todo funciona simplemente creando la función animada. Solicita animación marco animate. Y recuerda, estos blogs nos están proporcionando una animación llamando a esta función animada en cada fotograma. Por lo que aquí queremos comprobar si el micrófono ya está inicializado. Esta propiedad. Entonces si el micrófono se inicializa, quiero conseguir las muestras. Muestras. Micrófono que muestra. Vamos a registrarlo para ver si todo funciona. Abriré la consola mediante el uso de f 12th. No tenemos muestras. Así que déjame abrir. Eso vive otra vez. A lo mejor hay alguna caja. No tenemos todavía. Es porque no llamamos a la función animada Mi malo. Ok. Ahora podemos ver las muestras cuando hablo. Obtendrá la entrada de audio correcta. Ahora podemos deshacernos de este registro de consola. Ahora podemos empezar a crear nuestra clase. Esta vez. Quiero llamar a figura no paréntesis aquí porque tendrá diferentes métodos. Por lo que será ajustable. Se autovía, se teletransportará y encadenará métodos de dimensionamiento, algunas cosas así. Entonces no es tan simple bola. Por eso decidí llamarlo figura. Pero como siempre, necesitamos un constructor. Por lo que esta vez, empecemos de nuevo con X e Y, pero vamos a aumentar el número de parámetros más adelante. Entonces este delta x es igual a x, este punto y es igual a tamaño y. Voy a usar ocho y luego cuatro tamaño inicial. Pero recuerda que cambiaremos este valor con la entrada del micrófono. ¿ De acuerdo? Entonces esto es suficiente por ahora. Simplemente dibujemos esta figura. Y esto es todo. No hay nada nuevo para nosotros. Entonces esto hace, este punto FillStyle es este color oscuro. Dx también comienzan Pat dx arc porque de nuevo, queremos dibujar atajos. Entonces pasaré carbones X4 x. ¿Por qué? Y tamaño. Esta vez no llamé radio. También se podría decir talla, lo mismo. Entonces 0 para el ángulo de partida. Y math.pi veces 24 y ángulo, que es exactamente lo mismo con 260 en grados, pero debemos dar algunos radianes aquí. Por lo que usamos esta expresión. Y por último, deberíamos sentir lo que acabamos de dibujar. Muy bien, déjame salvar esto. Y abajo, debemos acreditar el error de los dedos. Para hacer eso, necesito un for-loop. Cambiemos su índice a i Quiero crear diez figuras. Por lo que voy a decir cifras empujan cerca figura. Entonces todos deberían estar familiarizados con esta sintaxis, ¿verdad? Hicimos todo esto muchas veces. Tan nueva figura, pero esta vez, en lugar de hacer una x e y específica, quiero engendrar estas figuras al azar. De acuerdo, por eso llamaré a Math.Random función. Y lo multiplicaré con suite de colores para que el valor x sea entre 0 y columna dulce. Puede ser en cualquier parte del Congreso y hacer el mismo tanque por valor y también. Y esta vez diremos comas altura. ¿ Está bien? Entonces vamos a tratar de dibujar las cifras en este punto. Entonces, antes que nada, quiero despejar metas. Haremos algunas animaciones en el futuro. Así que aclaremos la calma, todas las comas en el fuselaje. Y ahora podemos, intentemos dibujar figuras. Para eso. Quiero iterar sobre la matriz de figuras, ¿verdad? Y voy a utilizar para cada uno, voy a decir figura. Y para toda figura, quieres llamar al método de sorteo. ¿De acuerdo? Entonces no hemos hecho ningún color. Sólo hagamos un color claro para que tengamos las figuras en las columnas. Y cada vez que refresco este navegador, nos hará una figura posicionada generada aleatoriamente recta porque nuestros valores x e y son aleatorios. Pero deberían estar en los innumerables. Entonces deberíamos, en cada marco deberían tener figuras bronceadas, exactamente 12345678910. 50. 4CircularMovement: Lo siguiente que quiero hacer con estas figuras es darles algún movimiento circular. Al igual que los movimientos circulares porque hace que los objetos se vean como un vivo. Muy bien, así que implementemos movimientos circulares para nuestro orador. En la clase Figura, crearé un nuevo método llamado movimiento circular. Entonces aquí estoy en realidad podemos usar funciones de coseno y seno. Por lo que debemos cambiar el valor x y el valor y de las figuras con algunos valores para que dibuje un camino circular. ¿ Verdad? Entonces si sólo cambiamos el valor x, digamos que no coseno. Por lo que también necesitamos un contador aquí que bucle a bucle entre 0360. Por lo que será toda la titulación arranca desde 0 y va todo el camino a 360. Entonces para hacer eso, voy a implementar contador en esta cifra. Por lo que se iniciará a partir de 0. Y entonces lo haré, lo aumentaré. Cada movimiento circular al final. En realidad. Empecemos contour plus, plus y lo ejecutemos más grande que o igual a 260. Volveré a hacerlo 0. ¿ Verdad? Para que ese contorno aumentará el recuerdo del movimiento circular. Y cuando llegue a esos 260 grados, se remontará a 0 y partirá desde ahí. Nuevamente. Eso es lo que necesitamos en realidad. Ahora, llamaré a este contador aquí. Pero recuerda, la función coseno no está buscando grados. En cambio, está buscando lectura. Si te acuerdas, radianes a grados fórmula x dividido por 180 veces pastel de barro. ¿ De acuerdo? Entonces hagamos esto por nuestro contador dividido por 180 veces pi para que nos aseguremos de que dibuje un círculo completo. Permítanme simplemente guardarlo así y llamar momento circular en un reframe. Veamos qué pasa. Entonces nuestras bolas se están moviendo, ¿verdad? Lo cual es genial. Entonces costo MC, esa función de costo devuelve un valor entre menos uno y más uno. Y es sólo cambiar entre estos valores. Y estamos actualizando x con esos valores para que nuestras bolas vayan a la derecha y a la izquierda continuamente. Hagamos lo mismo por Y también. Pero esta vez vamos a usar, en realidad estoy llevado a usar el coseno de nuevo para ver qué pasa. Sólo puedo copiarlo y pegarlo aquí y guardar esto. pueda ver cuando damos la misma función a por qué dibujará algún camino como este, como diagonal, porque estamos aumentando a x e y al mismo tiempo, al mismo valor, con el mismo valor. Pero si cambias esto para firmarlo y guardarlo, puedes ver que están dibujando un círculo un momento. Esta es la clave para hacer algún movimiento circular como este. 51. 5ChangeSizeWithMicInput: Muy bien chicos, sigamos llamando. siguiente paso es agregar la entrada del micrófono al movimiento de los círculos. En realidad, no el momento, sino el tamaño de los circuitos que queremos. Hazlos más grandes. Cuando hay un insumo de una alta guerra. Y su tamaño dependerá de la entrada de voz. Se volverán más grandes y más pequeños según la entrada del micrófono. Entonces para hacer eso, agregaré un nuevo método en la clase de figura. Aquí mismo. Vamos a agregar un nuevo método y eres un nombre de cambio de tamaño. Entonces esto importado necesita un parámetro. Yo lo llamaré valor. Y este parámetro provendrá de la matriz de muestras, que está conectada con el micrófono en retrato. Entonces usaremos un parámetro de las barras de entrada y cambiaremos el tamaño de cada arco. Entonces para hacer eso, primero verificemos si valor es mayor que el tamaño. Por lo que ajustaremos el valor solo un tazón. Pero primero vamos a comprobar si el valor es mayor que el tamaño. Entonces si lo es, haremos que el tamaño sea igual al valor S. En otro caso, queremos cambiar el tamaño. Entonces esto significa que no tenemos ninguna entrada de voz o tenemos una, pero es realmente, muy baja para que no podamos oírla, para que la computadora no la oiga. En ese caso, queremos cambiar el tamaño y queremos disminuir su tamaño. Digamos, no sé 0.1. Por lo que esto se llamará en cada fotograma. Por lo que es disminución de tamaño. Soy Tom por ciento en el fuselaje. ¿ Verdad? Así que llamemos a este método en función animate. Aquí mismo. La suciedad, ese tamaño de cadena. Pero para darle un parámetro que provendrá de la muestra por separado, necesitamos obtener tasa de índice de muestras. Entonces no tenemos un índice en este momento. Pero si recuerdas, podemos obtener el índice con solo pasar un segundo parámetro para cada función. Entonces si lo hacemos así, la primera será la figura misma que estamos iterando. Y el segundo parámetro será el índice de eso. Entonces de esa manera, podemos obtener ese índice en la matriz de muestras y podemos cambiar su tamaño. Estoy usando la entrada de voz. ¿ Está bien? Así que permítanme salvar esto y ver el resultado. Muy bien, así que no podemos ver nada. En realidad, vimos algo al principio, pero simplemente desaparece al instante. Entonces, ¿por qué sucede? Porque tal vez nuestro valor de disminuir sea demasiado. Cambiemos esto a 1% y vuelva a guardarlo. Entonces esto es mejor ahora mismo. Están desapareciendo lentamente. Pero al final, no podemos volver a ver nada. Entonces parece que el valor es demasiado pequeño, ¿verdad? Por lo que al parecer son raramente no es suficiente para hacer el tamaño más grande. Vamos, también podemos comprobarlo. Lo inicio de sesión. Veamos. Entonces nuestro valor es 0. Um, esto no es lo que esperaba. De acuerdo, así que intentemos multiplicar este valor. Digamos que quiero crear una nueva variable llamada silent. Y será el resultado de los tiempos de valor 200. Y utilicemos el sonido aquí y aquí, Ezra. Permítanme salvar esto otra vez. No tenemos ninguna salida de nuevo. Por lo que acabaré de abrir esto en una nueva pestaña. Esto fue un error para Google Chrome. Entonces cuando lo abrimos en una nueva pestaña, no hay problema. Para que puedan ver que se están haciendo más grandes cuando hablo más alto o menor cuando hablo más fuerte. Pero veamos también valor y el sonido en la consola. Primero revisemos el valor. Para que puedas ver que es algo realmente pequeño. Por eso solo queremos multiplicarlo con 200. ¿ Está bien? ¿Es esto algo que encuentro al intentar? Vale, no hay fórmula para esto. Pero probé algunos valores. Y 200 parece agradable porque quiero que las cifras las hagan más grandes, para hacerlas más grandes. Y 200 está bien para mí. Puedes probar diferentes valores y puedes decidir sobre otro aleatorio. Pero el punto principal aquí es que, ahora mismo, tenemos círculos y hay tamaño están cambiando dependiendo de la entrada de voz. 52. 6PlayMusic: En este punto, el tamaño de las cifras debe cambiar con la aportación de la esposa. Así que déjame tocar una canción para decirlo. Obviamente. 53. 7Teleport: Por último, quiero mostrarles algunos ejemplos de personalización. Porque quiero que personalices tu propio efecto con la forma que quieras. ¿ De acuerdo? Entonces, por ejemplo, agreguemos un nuevo método en la clase Figura. Entonces quiero agregar un método de teletransporte porque cuando las cifras para acercarse, es, el hecho se ve mucho mejor. Vamos a añadir efecto de teletransporte y se puede ver el resultado. Por lo que voy a decir teletransportarse allí. Deberíamos cambiar su valor x y también y de los fracasos. Y quiero que se teletransporten al azar. Entonces digamos mucho tiempo aleatorio ancho de pérdida de columna, lo que significa que será teletransportado en algún lugar dentro del Carlos. ¿ De acuerdo? Y haz lo mismo por y, pero esta vez, escribe aquí Hunt. Entonces tenemos nuestro método de teletransporte. Llamémoslo animación lunar. Entonces para cada figura, si llamamos función de teletransporte, son ubicación cambiada en cada fotograma. Esto parece un cos. Vale, no queremos vacas. Entonces no deberíamos llamar al teletransporte en cada fotograma. O este es un verdadero enfoque de cuidado. De nuevo, podríamos agregar una restricción aquí. Entonces cuando pasa algo que teletransportarse, no en cada fotograma. Para que puedas agregar cualquier restricción. Depende de ti. Por simplicidad. Simplemente agregaré una restricción de aleatoria. Entonces esto puede ser aleatorio también. Lo volé es perfecto si aleatorizas una rutina. Entonces cuando agrego aquí una restricción como esta, la math.Random devuelve algún número entre 01 y si es mayor que 0.99, que es aproximado ser una sola persona, ¿verdad? Después teletransportarse a la figura. Permítanme decir esto. Se puede ver, es más raro en este momento. Vemos algunos telepuertos, pero no es continuamente. Podríamos disminuir su frecuencia simplemente aumentando este valor aquí. Por lo que están casi, ya no están apoyando. O puede aumentar su frecuencia disminuyendo el valor de restricción. El 50% sigue siendo demasiado. Tal vez el 90% será 95. ¿ De acuerdo? Pero mi opinión, 99 se ve muy bien. De acuerdo, Entonces la razón por la que quería mostrar esto es para mostrarte que esta figura, este efecto es personalizable. Puedes agregar cualquier método que quieras, jugar con él. Se pueden ver diferentes resultados. Y por último, al final, quiero mostrarte una cosa más, que está aumentando la velocidad de animación. ¿ De acuerdo? Por lo que ahora mismo nuestro movimiento circular es demasiado lento. En mi opinión. Quiero aumentarlo. Por lo que también podrías hacerlo con llamar. Pero, ¿y si quieres cambiar la velocidad de fotogramas? Si quieres cambiar el FPS, también podrías agregar diferentes bibliotecas y así sucesivamente para hacer eso. Pero hay otro enfoque complicado para eso. Quiero mostrártelo. Entonces estamos llamando a la función animada aquí y se llama una y otra vez, ¿verdad? ¿ Y si llamamos enumerate function ahora para mí? Así que cambiemos esto a diez o cinco, tal vez. Sólo llama animando una caída. Por lo que esto aumentará la velocidad de animación cinco x porque estamos llamando a función animate cinco veces. Permítanme salvar esto. Para que puedas ver que los círculos se están moviendo más rápido. ¿ Está bien? Por lo que esto básicamente está aumentando la velocidad de fotogramas en un segundo. 54. 1WhatIsThreeJS: En esta sección, vamos a utilizar EJS para crear efectos visuales 3D. Así que permítanme explicar lo que es realmente rápido. Básicamente, se hace fácil usar objetos 3D animados en la propia biblioteca como su propia cámara, escena, geometría. Y es la mejor biblioteca de césped para renderizado 3D en el mapa. Para que puedas pensarlo como la unidad. Como si estuvieras desarrollando juegos. Si estás desarrollando juegos, tal vez conozcas la unidad. Entonces es un motor de juego, ¿verdad? Entonces a JS, Es todo motor de física, por lo que hace más fácil crear efectos 3D. ¿Está bien? Entonces y no es un programa o un marco, es sólo una biblioteca. Por lo que avanzando, este es el sitio web oficial de dos js. Y hay muchos, muchos ejemplos y casos de uso de la misma. 55. 2UseCases: Vamos a revisar algunos casos de uso. Por cierto, dos EJS también son utilizados por las grandes empresas. Para que puedas ver nasa aquí. Y esto fue levantarse, creo. Sí. Por lo que aquí la ruta disipada es un modelo 3D. Y con el fin de renderizar este mundo como modelo 3D, invitas a un animado. Podemos usar tres js. Entonces eso es todo. Entonces la guitarra está usando tree js. Vamos a revisar qué más tenemos? También hay juegos como este. Esto se ve como un buen sitio web. Esperemos por ello. Tal vez la única ventaja del modelado 3D es que toma demasiado tiempo renderizarse. Por lo que los sitios web como este podrían no cargarse rápidamente, pero se puede ver que es realmente genial. Por lo que hay algunos sitios web geniales como este, en su mayoría para agencias. Y el modelo es también para el agente. Esto no es un video. Se trata de un modelo 3D, por lo que puedes interactuar con él. Vale, esa es la diferencia. Veamos más ejemplos. ¿ Qué tenemos? Entonces Apple también está usando TJ, como es posible que sepas, las integraciones de iPhone, como cuando vas abajo, abajo, es sólo que puedes interactuar con él. Muy bien. Entonces hay juegos, hay sitios web, y así sucesivamente. Simplemente no desperdiciemos demasiado tiempo. Pero puedes, por supuesto, entrar en más detalles. Puedes consultar los ejemplos aquí. Nuevamente, esto no es un árbol JS Curso. Por eso no voy a explicar todas las características de t j's. Pero aquí encontré un bonito sitio web de cursos. Mira esto. No lo sé, quemador cibernético, pero realmente aprecio su trabajo. Entonces esta es una tienda, tu sitio web, pero tal vez sea el mejor sitio web de cursos que he visto. Para que puedas ver que es modelo 2D y solo están animando. Y puedo arrastrar y cambiar la rotación de la escena, ¿verdad? Yo puedo subir. Ahora. Realmente puedo interactuar con el objeto con mi ratón. Por lo que no tomé este curso. No sé el contenido, pero se ve muy bien. Sólo quería mostrártelo. Entonces este tipo de cosas que puedes hacer mediante el uso de tesorosas. Muy bien, volvamos aquí. Podemos ver ejemplos de documentación. A la izquierda. Puedes unirte a Discord o foros y arraigar y unirte a la comunidad de profesores. Entonces, ¿qué más? En realidad, el sitio web es así más o menos. Así que no perdamos el tiempo aquí. Empecemos a hacer nuestros dos primeros proyectos JS, que está realmente emocionado porque vamos a crear un cubo 3D y moverlo en espacio 3D en un navegador. Vamos a hacer eso en el siguiente video. 56. 3InstallThreeJS: Anteriormente en este curso, estamos aquí instalamos Node JS. Si saltas esa parte, puedes comprobar que el video llamado Nodo instalado y npm es el primer video de la sección de boceto de coma. ¿ Está bien? Si estás viendo este video desde otro lugar, puedes comprobar si se descarga e instala NPM. Y una vez que instalas npm, estamos bien para ir. Para que siempre se pueda comprobar. Siempre se puede comprobar si MPM está instalado mediante el uso de nota que somos npm dash nosotros. Entonces esta es mi versión de Node.js y esta es mi versión de NPM. ¿ Está bien? Si te cuán nada o MPN, puedes ver la versión del pulgar. Si hay, si está diciendo que se ve algo así como este comando no encontrado, y eso significa que no tienes npm o Nodo en tu computadora. ¿ Está bien? Y recuerda, lo mejor es descargar el tiempo globalmente para que puedas acceder a él cada directorio. Muy bien, así que antes que nada, limpiemos nuestra terminal y vamos a crear una nueva carpeta para tres JS. Quiero hacer esto en mi escritorio. Por lo que voy a decir hacer sus tres gigantes. No estoy seguro de que este comando también sea válido en Windows, pero solo estamos creando una nueva carpeta, escritorio, ¿de acuerdo? Si esto no funciona en Windows, puedes simplemente hacer clic derecho y crear una nueva carpeta, ¿de acuerdo? O podría encontrar su propio comando para la línea actual o PowerShell en windows. Muy bien, entonces cuando yo, cuando escribo este comando, tenemos una nueva carpeta y queremos instalar tres biblioteca JS en esa carpeta, vale, para usar en nuestro proyecto. Entonces vamos a entrar en esa carpeta que acabamos de crear. Y quiero instalar tres js, ¿verdad? Entrémonos en Google y revisemos cómo podemos instalar disparadores. Por lo que voy a entrar en la página oficial. Estoy a la izquierda. Revisemos la documentación. Por lo que aquí tenemos la sección Primeros pasos, y aquí tenemos instalación. Tenemos la suerte de que proporcionen guía de instalación de NPM. Por lo que también tenemos MPM. Podemos usar este comando que es así de sencillo. Entonces en la carpeta, quiero pegar este comando y vamos a instalar tres minutos muy rápido. Así que déjame traer aquí mi carpeta. Dos j. Vamos a abrir esto. Ok. Lo pondré así. Entonces aquí tenemos paquete de módulos ruidosos como Jason, package.json, lo que significa que tenemos instalado en Pages. Y también revisemos los módulos de Nodo en tres. Vayamos por fuente. Vale, entonces tenemos renders, luces, cámaras o materiales de audio y así sucesivamente. Pero aquí tenemos el archivo JS de tres puntos. Por lo que queremos utilizar comandos, métodos, funciones y variables de este archivo. Y basta con importar este archivo a nuestro fichero para usarlos porque lo hemos instalado. Entonces cuando creamos un nuevo archivo aquí y escribimos nuestro código, podemos usar la función y el método de error. Este nodo módulos, ¿verdad? Por eso lo instalamos en el mismo directorio. 57. 4OpenTheProject: Vamos a crear nuestros archivos en ese directorio. Entonces hay muchas formas de hacer esto, pero también me gusta usar extranjeros terminales. Diré tocar. Digamos índice HTML. Podemos ver que creamos un nuevo archivo. Y también para JavaScript, llamémoslo index js. Para que puedas crear archivo solo de la manera que quieras. Y también con respecto a este problema, si estos comandos no están funcionando en su sistema operativo, creo make a diferencia de limit es lo mismo, pero Windows podría ser diferente. Entonces hay algo llamado hiper terminal. Podrías descargarlo en Mac o Windows. Entonces es algo como esto. Y recordé que puedes usar comandos de Linux. Entonces el mismo comando en un sistema operativo usando hipertónico y su interfaz es realmente buena. Por lo que esta es una bonita plataforma para usar como terminal. De acuerdo, así que continuemos. Hemos creado nuestros archivos y estamos listos para codificar, ¿verdad? Y finalmente, abramos el proyecto. Si estás perdiendo versión privilegiada del código VS, como yo, puedes escribir este comando para abrir el proyecto. Si está utilizando una versión normal de este código, hace la versión estándar, podría decir que se llama espacio. Y si eso no funciona para ti, puedes venir VS Código comando P o Comando Shift P, o Command Shift P para abrir un comando shell e instalar frío. O de nuevo, no es necesario usar necesariamente el atajo. Simplemente puedes abrir manualmente el proyecto en VS Code, que también está bien. 58. 5ImportThreeJS: En el archivo HTML del índice, solo estoy presionando signo de exclamación y presiono Enter para crear plantillas HTML5. Muy bien, primero, vamos a cambiar el título del proyecto. Primero. Aplicación Tres Julius. Y entonces podemos simplemente eliminar las brechas entre la Commonwealth y los límites. Entonces sólo nosotros, vamos a crear dos objetos EJS, ¿verdad? Entonces llegamos a eliminar los huecos alrededor demasiado amigo. Entonces hagamos esto en la fila. Por ahora. Diré por el margen 0. Podríamos agregar un archivo CSS y hacerlo también. Pero todo lo que necesitamos es esta línea. Entonces podemos hacerlo en la fila, ¿de acuerdo? Muy bien. Ahora podemos llamar al archivo de tres js que acabamos de descargar en cuerpo. Para ello, abre una nueva etiqueta de script. Y como fuente, digamos lote módulos tres. Así que vamos a comprobar si se trata de tres archivos JS. En Módulos de Nodo. En tres, lo que necesitamos no es de origen sino construido dos regiones. Usaremos este código. Entonces en el índice HTML, voy a decir tres construido y seleccionar tres js. Y justo debajo abre una nueva etiqueta de script. Y todo lo que escribiremos irá dentro de esa etiqueta. 59. 6Creación de 6CreatingSceneCamera: Para poder realmente mostrar cualquier cosa con dos carceleros, necesitamos tres cosas. Parecen cámara al azar. ¿ De acuerdo? Entonces vamos a crearlos. Crear una escena es realmente fácil. Simplemente podemos crear una nueva variable provocada ver. Podemos usar nueva palabra clave. Y podemos escuchar tres biblioteca porque acabamos de importarla justo arriba. Y llamemos matriz de capital C. ¿ De acuerdo? Por lo que el siguiente paso es crear terminal. Nuevamente, nos amamos tal vez desee crear una nueva cámara usable. Llamemos a nueva palabra clave otra vez. Usaremos tres. Entonces aquí, en realidad hay algunas cámaras diferentes, nutricionistas, vamos a empezar a usar cámara de perspectiva porque es recomendada por la documentación. Y abramos el tapete. Entonces este método toma cuatro argumentos. El primer atributo es el campo de visión. Es la extensión de la escena que se ve en la pantalla en un momento dado. Por lo que deberíamos hacer algunos grados. Demos 7254 más y no te preocupes por ello. Es más fácil de entender con ejemplos. ¿ Está bien? El segundo es la relación de aspecto. Y podemos casi siempre lo mismo en este periodo, que es peso interior de ventana dividido por ventana en su altura. Por lo que esto asegurará que la resolución sea correcta. Vale, la relación de aspecto de tu navegador. Muy bien, por lo que el tercer parámetro es en realidad déjame simplemente escribir los dos últimos atributos y explicarlo. Entonces si el objeto está más cerca que este valor a la caloría, no será aleatorio. ¿ De acuerdo? El objeto, si está más lejos de la cámara que este valor, no se renderará. ¿ Está bien? Por lo que estas son las limitaciones de cerca y lejano. ¿Está bien? Entonces si está más lejos de más grande que uno, no lo será. Muy bien. 60. 7CreateRenderer: siguiente es, vamos a crear una nueva variable nuevamente llamada género. Y usaremos tres. Esta vez. Usaremos web aleatorio. Así que tres JS usa WebGL render por defecto, pero también tiene diferentes opciones para navegadores más antiguos. ¿ De acuerdo? Entonces, una vez que hayas creado el render, podemos establecer el tamaño llamando al método set size. Por lo que podrías dar cualquier valor ancho y alto. Para este ejemplo, usaremos toda la pantalla. Por eso voy a decir ancho de ventana y ventana en su auto. Muy bien. Y por último, vamos a añadir a render elemento a la muñeca. Y solo usaremos los guiones celosos, anexar niño con él. Ok. Llamaré decrementado por el aparente niño. Entonces llamémoslo render dom. Muy bien, entonces este es el plano de Trajan's en cada proyecto que vas a crear, necesitas hacer los pasos. Es necesario crear la cámara de escena error aleatorio. Es necesario establecer el tamaño del render y es necesario anexar este elemento a la puerta. 61. 8CreateACube: En este punto, quiero abrir el proyecto en un navegador y ver lo que obtenemos. Entonces en archivo HTML, solo hago clic derecho y abro con show en vivo. Y todos sabemos que explican esto. Si no tienes servidor en vivo, puedes descargarlo desde las extensiones. Muy bien, así que déjame sacar mi pincel. Entonces esta es una reina. Yo estoy aquí. Así que solo utilicemos la pantalla. Vamos a pegarlos juntos. O aún no tenemos algo aquí porque no creamos ningún objeto. Pero las cosas que hicimos antes fue solo una configuración. Así que vamos a crear el primer objeto, un cubo. Tal vez. Estoy con el fin de crear un objeto, necesitamos teñir geometría y material. ¿ Está bien? De acuerdo, para la geometría, vamos a crear una nueva fila. Volveremos a usar árbol, y esta vez llamaremos geometría bucks. La geometría de caja es un objeto que contiene todos los vértices y caras del cubo. ¿ Verdad? El siguiente es el material. Nuevamente. Y llamaré material básico de malla. Por ahora. Y vamos a abrir esto. Simplemente usaremos y coma y podemos dar el color aquí. Y el color aquí tiene los mismos atributos con el color CSS. De acuerdo, entonces está buscando código hexadecimal. Simplemente copiaré el código hexadecimal de documentación para saber de diez. Por lo que hemos creado geometría y material. Y una vez que haya comprado, puede aplicar material a los culpables. ¿ De acuerdo? Por lo que podemos hacer eso usando mucho. Vamos a crear tubo. Llamaríamos a la función de malla. Utilizaremos geometría y material como atributos. Entonces esta función de malla requiere dos parámetros, geometría y material, y podemos usar las cosas que acabamos de crear. Por último, podemos añadir el cubo a la escena. Y digamos esto. Aún no ves nada que no tenga. Entonces por defecto por qué llamamos visto en el tanque que agregamos, se sumará a las coordenadas ceros, ceros. Esto es un problema para nosotros porque la cámara también está en esa posición. Entonces tanto la cámara como el cubo, habrá uno dentro del otro. Para evitar esto. La documentación nos dice que cambiemos la posición de las cámaras Z. Entonces el cubo en este momento está en la posición 000, pero la cámara está en 005. 62. 9RenderTheEscena: Casi estamos terminados. Creamos el cubo y sumamos a C. Vamos a renderizar la escena para que podamos verla en el navegador. En realidad. Voy a crear una función animada. Y debes estar familiarizado con esta función animada desde las cadenas laterales anteriores. Sólo una llamada rápida. Función inanimada. Tenemos que solicitar marco de animación y solo pasaremos y la función de peso de nuevo aquí. Esta solicitud marco de animación genera el bucle. Vi esa función animada se llamará cada fotograma, ¿verdad? Ya deberías saber si esto, una vez que tengamos función enumerar, podemos llamar más redonda. Escena más redonda que acabamos de crear aquí para primer parámetro y cámara. Acabamos de crear aquí para el segundo panel. Y eso es todo. Llamemos y esperemos función en la aplicación. Y cuando digo esto, aquí vamos. Por último, tenemos algo en el navegador. Por lo que no está animando en nuevo incorrecto ahora porque no probamos el código para ello. Pero podemos ver el cubo que acabamos de crear, ¿verdad? Entonces es verde porque de nuevo, el color verde y todo lo demás viene de dos js biblioteca. Por ejemplo, no especificamos el color de fondo, sino sus columnas de la propia biblioteca, ¿verdad? Por lo que sí especificamos el margen imperante 0. Entonces no tenemos ningún margen en las fronteras. Por último, tendrás la caja al final. El siguiente paso es animarlo. 63. 10AnimateCube: Si recuerdas, estábamos cambiando la posición de los objetos en función animada con el fin de movernos. Aplicaremos la misma lógica aquí. Vamos a montar en movimiento. Vamos a rotarlo. ¿ De acuerdo? Entonces en función animada, sólo un arco ahí, Ángela. Deberíamos cambiar la rotación del cubo. Entonces llamémoslo q rotación. Se puede decir x o y. primero intentemos rotacional x. quiero decir, cada fotograma quiero aumentar su valor de rotación x en uno. Tratemos de ver el resultado. Se puede ver que sólo está girando, pero esto es demasiado rápido. Vamos a intentar 0.1. Mejor, pero aún a 1.01st 0. Y esto se ve mejor. ¿De acuerdo? Y también podríamos hacer lo mismo por valor Y. Y ahora tenemos una Q. animada Usamos métodos de rotación. Y por supuesto que también podríamos usar atributo de método de posición para, digamos si quieres saber, vale, para x , por ejemplo, las madres saldrán del carbón era así. Déjame decirlo de nuevo. Para que podamos movernos camino hacia ella y rotarlo. Podemos hacer lo que queramos en realidad. Entonces en este momento, quiero que juegues con él. Puedes crear muchos más cubos, rotarlos, cambiar su posición, hacerlos colisionar, cualquier cosa que quieras. Ahora podemos jugar en 3D. Perfecto. Vale, juega por el estado de Gettier, y te veré en el siguiente video. 64. 1Introducción: En esta sección, vamos a crear un efecto de espacio 3D. El resultado se verá así. Esto parece el proyecto que hicimos antes, pero esta vez será un 3D. Principalmente desarrolladores, usuarios, este tipo de defectos en sus carteras landing page. De acuerdo, si estás listo, empecemos en el siguiente video. 65. 2Configurar: No necesitamos abrir un nuevo proyecto. Podemos continuar desde aquí. Vamos a crear un nuevo archivo aquí. Lo llamaré espacio, no HTML. Y presiona signo de exclamación, presiona Enter para crear una plantilla HTML y cambiar el título a espacio 3D. El siguiente paso es importar los activos. En este proyecto, solo contratamos un activo PNG en círculo. Y te proporcionaré este fichero en recursos para que puedas descargarlo e importarlo en tu propio proyecto. Muy bien, así que vamos a seguir adelante y agregar una etiqueta de estilo aquí y cambiar el cuerpo CSS. Entonces no necesitamos hacer mucho aquí. Por eso lo haré en la fila. Así que solo asegúrate de que no tengamos ningún margen. Ajustamos el ancho y la altura. Vamos a establecer fondo en negro y desbordamiento. Ocultos. La morfina sobre la configuración es importar la biblioteca de jazz libre encarnada. Vamos a referenciar el archivo JS del árbol. Por lo que no es módulos gratuitos. También construí aquí tres JS principales. Por lo que recortar SIG es suficiente para este proyecto. Abriré una nueva etiqueta de script. Y cada tanque que escribiremos a partir de ahora, iremos dentro de esta etiqueta. 66. 3InitFunction: como discutimos anteriormente en este curso, necesitamos definir cámara de cine. Y esta vez crearé una función init que lo iniciará todo. Por ejemplo, la creación de la escena. Al igual que mu tres pecado o creando la cámara. De la biblioteca 3D. Voy a utilizar la cámara de perspectiva aquí de nuevo. Y vamos a dar 64 caída, que significa campo de visión. Por la relación de aspecto. Lo volveremos a configurar para integrarse dividido por umbral de altura interior, nuestro defecto como 11 mil. Entonces vamos a configurar las cámaras que posicionan uno y rotaron grados por 90. Y como recuerdas de cursos anteriores, podemos configurarlo para que coincida pi dividido por dos, que es de 90 grados. Así que continuaré con la creación, con la creación del renderizado desde el árbol, no limpie el error aleatorio GEL, y estableceré el tamaño del renderizado usando métricas de tamaño establecido. Por último, vamos a anexarlo al órgano del documento. Podemos utilizar métodos child append y tal elemento DOM granular. Cuatro parámetros. 67. 4CreateStars: En este video, crearemos las estrellas usando un for-loop. Use el acceso directo para for-loop y cambie iterador usando IA. Y pondré el límite a 5 mil porque queremos que muchas de las poblaciones creen. Así que también eliminemos la línea y creemos aquí la estrella. Voy a utilizar el vector T de tres biblioteca. Por lo que debemos hacer los valores X e Y y Z. Y quiero que sean aleatorios. Un número aleatorio entre menos trescientos trescientos. Así que también vamos a copiar esta línea para y y que los valores. Muy bien. Entonces una vez que creamos la estrella, podemos establecer su velocidad porque se estarán moviendo. Y también aceleración. Posteriormente actualizaremos la velocidad con esta aceleración, podremos cambiar los valores más adelante. Y también lo que necesitamos es aquí una matriz para empujar a la estrella que acabamos de crear. Es por eso que voy a crear una nueva matriz aquí arriba y empujarla, empujar la estrella en esa matriz. Entonces necesitamos esa zona porque queremos establecer la geometría y la usaremos aquí. Y vamos a revisar qué es exactamente. Abriré este archivo con Live Server y déjame traer mi pestaña justo al lado del camino Xcode. Vamos a expandirlo y digamos inspeccionar para ver la consola. Por lo que ahora se puede ver que carece de una matriz. Y aquí está, la aceleración y velocidad que acabamos de sentarnos. De acuerdo, así que tenemos una matriz y cada incluye las estrellas. Por lo que también deberíamos crear una geometría y vamos a usar esta GO, Eric, llamaré a esa joya estrella variable, pero primero vamos a definirla. Y ahora podemos configurarla nueva geometría de búfer de árbol. Entonces esta es una nueva característica de tres js. Ya no podemos usar geometría, pero debemos usar geometría de buffer. Diré set de pintas. Ahora podemos pasar la matriz que acabamos de crear. Vamos a iniciar sesión a la estrella Geo y ver qué es exactamente. Entonces es una geometría y objeto fuera a EJS y tiene atributos como contar, y son 5 mil porque creamos 5 mil estrellas. Dejemos aquí la declaración de registro. No lo necesitamos. Empezaremos a crear la textura en el siguiente video. 68. 5UseGeoAndMaterial: Crearemos el sprite usando una textura cargada. Vale, digamos tres nuevos, cargador de texturas. Y llamaré a los métodos del Señor. Podemos pasar el nombre del archivo PNG en este paréntesis. Digamos círculo PNG que acabamos de importar. Y vamos a crear el material estrella también. Diremos nuevo material de tres puntos. Por lo que necesitamos ajustar algunas propiedades. Por ejemplo, color. Quiero crear estrellas grises, cuyo tamaño de 0.6. Y usaremos el sprite que acabamos crear para los campos de mapa. ¿ Está bien? Por lo que ahora tenemos material de partida y geometría también. Podemos crear mediante el uso de tres puntos y podemos pasar estrella Geo y material de partida para parámetros. Y por último, debemos sumar las estrellas que acabamos de crear la escena. De acuerdo, este bloque de código también debería estar dentro de la función init porque no queremos ejecutar esta llamada antes de la inicialización, ¿verdad? Así que déjame simplemente moverme, mueva todo este código a la función init. Y yo hice un typo aquí. Estamos usando carbón PNG. También arreglaremos eso. Cambiar el nombre del círculo. Entonces también vamos a arreglarlo en archivo HTML. No ciertos códigos se dirigen. 69. 6AnimateFunction: En este video, agregaremos la función animate. Ya estás familiarizado con esto. Utilizamos esa función antes de muchas veces. Así que llamemos también a request animation frame y llamemos nuevamente a la función animate para crear un bucle. ¿ Está bien? Así que quiero mostrarte algo sobre geometría en búfer porque es algo nuevos enteros y vamos a ver cómo usarla. Por lo que en su documentación oficial, sólo baja. Y aquí se puede ver lo haremos aleatoriamente en puntos y están utilizando atributos position array. Por lo que necesitamos lo mismo porque también tenemos que sumar puntos aleatorios. Así que vamos a crear una nueva posición variable. Y usaremos la estrella Geo. Y lo mismo con la documentación, podemos decir que homenajes error de posición. Y para entenderlo mejor, simplemente bloqueemos posición flanqueada aquí y también la longitud del geo Eric. Todavía no vemos nada porque no llamamos a mi función. Pero déjame mover estas tres líneas hacia arriba. Podemos dejar ver nada de nuevo porque no lo llamamos función también. De acuerdo, así que vamos, llamémoslo función. Ahora podemos ver la longitud de las matrices. Para que como se puede ver, 20 mil de luz. Entonces es tres veces exactamente dos veces diferencia entre ellos. Y eso es porque uno de ellos está en 1D y otro está en 3D. Entonces es como, es como la versión expandida el uno del otro. ¿ De acuerdo? Entonces en matriz dual, el primer elemento detiene los valores X, Y, y Z de las estrellas. Pero en posiciones, el primer elemento sólo tiene el valor x. Segundo elemento detiene el valor y. Y tercero una anfitriona valor exacto. Por lo que los cuatro a ALU serán el valor x del segundo stock. Por eso es en uno. Muy bien, continuemos. También necesitamos un bucle en la función animate. Volveré a crear un bucle for y estableceré iterador. Llamemos a Joanne vinculado aquí. Vamos a usar eso porque es, es el más corto. Estableceré tu velocidad de hielo de matriz. Estamos iterando sobre la matriz y creamos campo de velocidad de elementos. Así que vamos a establecer la velocidad más es igual a la aceleración. Entonces aquí es realmente fácil. Lo que estamos haciendo es solo agregar aceleración a la velocidad en un reframe. Además, debemos establecer unas posiciones con velocidad, ¿verdad? Para que podamos actualizar la posición con velocidad. Pero primero déjame simplemente bloquear las posiciones solo para verla fácilmente. Me debería encantar la posición aquí. ¿ De acuerdo? Así que ahora se puede ver que es sólo una matriz sostiene, sostiene todas las posiciones. Y como dije, los valores X, Y, y Z, y está en 1D, así que solo, ya sabes, Ford es el valor x del segundo estilo. También debemos actualizarlos con velocidad. Entonces en cada fotograma, solo podemos decir dos veces tres más uno. Y será el índice correcto. Entonces es la transformación de 3D 1D. Puedes hacer las matemáticas. Entonces porque estamos iterando sobre la aerolínea G0, bien, por lo que el valor máximo será de 5 mil en este bucle, pero tenemos que llegar a 15 mil en posiciones array. ¿ Está bien? Permítanme también llamar a una función amide en función init. Aún así no vemos nada. Y eso es porque no probamos la sección render. De acuerdo, sigamos adelante. Nosotros justo debajo del bucle for. Podemos apenas escribir línea para la actualización. Y en realidad déjame revisar la actualización máxima porque también cambió con la geometría ofrecida. Volvamos a esta página. Por lo que abajo abajo, se puede ver esta línea aquí. Entonces, si necesitas renderizar, necesitas una actualización. La sintaxis es esta. Decimos estrella atributos posición que necesita actualización es igual a verdadero. Y también después de eso, vamos a renderizar esta escena y cámara. Y también finalmente solicitamos y ya hicimos esta diapositiva. Permítanme simplemente eliminarlo, guardar este archivo y ver el resultado. Perfecto. Entonces tenemos la animación. Está funcionando todo lo que escribimos. Pero también necesitamos más. 70. 7FinishTheProject: Nuestro efecto se ve realmente bonito. Lo probaré ahora. Tenemos un problema. Cuando las estrellas van parte del cálculo. No estamos respondiendo a ellos. Justo ahí, solo salir de nosotros y no podemos ver nada en la vaca fue después de un tiempo. Así que escojamos esto, arregle esto para bucle. Quiero abrir una nueva declaración IF. Esta declaración comprobará si las posiciones están fuera de columnas. Entonces basta con comprobar el valor y solo si la posición es menor a menos 200, lo que significa que la estrella está fuera de los bienes comunes. Y lo que podemos hacer aquí es fijar la posición a 200, de nuevo, así. Por lo que sólo respondemos spot la estrella a 200 y Así también podemos cambiar su velocidad a 0 con el fin de restablecer su velocidad porque de lo contrario será realmente rápido. Por lo que a la derecha de la pantalla se puede ver el efecto funcionando y las estrellas están respondiendo después de salir del auto estaba. Y esto también es eficiente para para sistema. No hay estrellas fuera de la Commonwealth, así que no estamos dañando la CPU. Así que también rotemos las estrellas. ¿ Por qué? Nosotros también, vamos a ver.com. Vale, esto es demasiado rápido. Déjame simplemente hacerlo 0.2. Aún rápido. 0.020.002 es genial. Entonces es un efecto cinematográfico al solo girar un poco las estrellas. Creo que es mejor. Ahora. Hemos terminado otro proyecto. Lo estás haciendo realmente genial. Como siempre. Simplemente puedes jugar con el efecto. Puedes cambiar cualquier cosa, quieras, la velocidad de los colores. O también puedes agregar algunas nuevas características clase tal vez. Por lo que espero que hayan disfrutado este proyecto y cuiden. 71. 8SomeThreeJSExamples: Antes de llegar al final, quiero mostrarte algunos ejemplos gratuitos de JS que puedes inspirarte. Realmente me gustó esto funciona. Por lo que solo quería compartir contigo también para que puedas imaginar más casos de uso. ¿ Está bien? Entonces primero es llamada Atrius, para que puedas ver en pantalla, en realidad, déjame recargar la página para que puedas ver también la animación inicial. Así que creo que es realmente un buen trabajo de las alfombras Louis hub. Para que puedas ver si solo miras el carrito, está escrito con JavaScript y es el árbol que se utiliza la biblioteca JS. Creo que hay algún algoritmo práctico y congeladores y algunos post-procesamiento para colores completos. De acuerdo, entonces el segundo ejemplo de 1 segundo es de tres biblioteca JS. Entonces es de su página web oficial. Y es un ejemplo de efecto de partículas de modelos 3D. No proporcionan el código aquí, pero si decimos Inspeccionar, podemos ver la llamada realmente en la sección de fuentes. Solo revisa puntos, HTML dinámico. Podemos ver el código aquí y se puede ver que solo están usando plantilla HTML, igual que lo hicimos antes. Y aquí lo importante la biblioteca arbórea. Y usan SIG gratis para esta animación de aspecto agradable. Y esto es algo diferente aquí. Es sólo todo el formato J se utiliza para modelos 3D de estos modelos humanos. Nuevamente, creo que se usa algún efecto de partícula en esos modelos OBJ. Ok. Entonces es el, es casi lo mismo que hicimos antes en el efecto de partícula en este curso. Y en realidad creo también en Skoll aquí. Creo que también se usa en proyecto Scout también. Así que déjame solo comprobar el activo aquí para que pueda mostrarte mejor. Aquí podemos ver el activo que se utiliza para calavera. Sólo ve ahí. Esto es por textura oscura que PNG. Pero lo que estamos buscando es formato OBJ para objeto 3D. Así que déjame simplemente pegarlo. Debería descargar el modelo para poder abrirlo. Déjame llevar mi Xcode a esta escena. Para que puedas ver esta opción, este modelo 3D se utiliza en este proyecto. Y luego algunos efectos, se aplica algún efecto de partícula. Entonces esto se llama modelo. Por lo que eso significa que puedes usar cualquier modelo que quieras y puedes usar el efecto de partícula para crear el tuyo propio. Muy bien, La idea principal aquí es importar unos modelos 3D. Creo que será realmente genial si las partículas de Skoll se mueven con una música como hicimos anteriormente en la sección de visualizadores de audio. ¿ Quién sabe? A lo mejor podemos hacer algo como esto en el futuro. Avísame si quieres. Es totalmente diferente a eso. En la sección de comentarios. ¿ Puedo ampliar un plan de estudios de acuerdo a la demanda? Pero por ahora, eso es todo para mí. Estoy muy agradecido a todos ustedes que pueden ver hasta ahora. Espero que ustedes lo hayan disfrutado si les gusta este curso. No te olvides de hacer una revisión. Nos vemos la próxima vez. Adiós.