Codificación creativa: imágenes y logotipos de partículas

1. Proyecto 1: efectos de rebanadas y dados en imágenes: Quiero presentarles una fórmula especial de física del movimiento. Y una vez que sepas cómo funciona, estarás listo para hacer los efectos interactivos más épicos. La comprensión completa de lo que está haciendo el código es muy importante si quieres tener un control completo y quieres poder experimentar y crear tus propios efectos nuevos y únicos. Es por eso que, como siempre, estamos usando frameworks ni librerías, Solo Javascript simple vainilla y programación orientada a objetos. Aprendamos algunas animaciones de rebanadas y dados amigables para principiantes animaciones de rebanadas y dados amigables para en imágenes y cubrimos tres técnicas muy importantes y fundamentales que te prepararán para el conjunto definitivo efectos de manipulación de imágenes. Como siempre, esta clase es amigable para principiantes, pero se necesita una comprensión básica de HTML, CSS y Javascript para poder seguir y comprender realmente. 2. Configuración de HTML, CSS y JavaScript: Creo tres archivos en mi carpeta de proyecto, index HTML, style CSS y script S. Inside index HTML, creo una página web simple estándar. Le doy algún título. Enlazo mi hoja de estilo, creo HTML cinco elemento canvas con un ID de canvas uno. Y vinculo mi archivo script. Le voy a dar atributo de diferir para asegurarse de que se carguen todos los contenidos de la página antes de que el script ejecute IntySSS, le doy un borde a mi elemento canvas Lo centro en medio de la página web, tanto vertical como horizontalmente. Utilizando la técnica de posición absoluta. Así en script GS, hacemos el lienzo HTML estándar, configuramos cuatro líneas de código que siempre son las mismas. Primero, apuntamos el script Java hacia el elemento canvas usando su ID. Entonces tomamos esa referencia de lienzo y llamamos a un método especial de get context. E instanciamos una API integrada en el lienzo así. Ahora podemos usar esta variable CTX para llamar a todos los métodos de dibujo de lienzo para acceder a sus propiedades Para este proyecto, establecí el ancho del lienzo en 500 píxeles y la altura será de 700 píxeles. Me aseguro de establecer el tamaño aquí en script Java y no en el estilo CSS para asegurarme tanto el tamaño del elemento como el tamaño de la superficie de dibujo de mi elemento canvas estén configurados en estos valores. Para evitar cualquier distorsión, estaremos cortando imágenes en una cuadrícula Cada celda de esa cuadrícula será un objeto separado. Aquí tengo un blueprint para ese objeto de celda. También crearemos una clase. Yo llamo por ejemplo, efecto el cerebro principal de la base de código. Gestionaremos el estado de todo el efecto. A partir de aquí, constructor esperará canvas como argumento dentro lo convierto en una propiedad de clase. Sí, puedo sacar la variable canvas de la línea uno directamente a mi clase. Pero prefiero hacerlo de esta manera para que mis clases sean más independientes de esa referencia de lienzo. Extraeremos con y altura porque quiero que las dimensiones del efecto coincidan con el tamaño del lienzo. Creo una instancia de la clase usando la nueva palabra clave. Se espera canvas como argumento, le paso canvas variable de la línea uno. Si consol efecto, podemos ver que tiene tres propiedades, lienzo con y altura Todo funciona bien hasta el momento. 3. Cómo organizar cualquier cosa en una cuadrícula: Queremos dividir el área de lienzo disponible en una cuadrícula. El ancho de cada celda será el ancho del lienzo dividido por, digamos, 35. Queremos 35 celdas por fila. La altura de cada celda será altura del lienzo dividida por 55. Queremos 55 filas, 35 columnas, 55 filas. Usemos la clase de celda de la línea seis para crear primero un solo objeto de celda. Todo el código dentro del constructor de clase se ejecuta línea por línea cuando creamos una instancia de esa clase usando la palabra clave new. Si hago esto, se creará automáticamente una instancia de clase de celda. En el momento en que creo una instancia de la clase effect, voy a consol Ok cell para que podamos ver sus propiedades aparecer en la consola a medida que las creamos. Es una buena manera de verificar si todo está funcionando a medida que construimos el proyecto, cada celda de la cuadrícula necesitará acceso a propiedades en la clase de efecto principal. Una forma de hacerlo es crear una referencia que apunte al efecto al espacio en la memoria. celdas del objeto principal del efecto se asientan se organizarán en una cuadrícula para cubrir toda el área del lienzo. Cada celda esperará coordenadas x e Y para que sepa dónde exactamente en la cuadrícula debe sentarse. Pasé esta palabra clave haciendo referencia a toda esta clase de efectos Al principio, quiero dibujar esta celda en la coordenada 00. Esquina superior izquierda del lienzo, podemos ver el objeto de celda correctamente recibiendo las propiedades aquí en la consola. Quiero que todas las celdas tengan el mismo ancho y alto, así que todas ellas tendrán acceso al ancho de celda y alto de celda desde el objeto de efecto principal. Ahora tenemos suficiente información sobre cada celda para poder dibujarla realmente en el método de dibujo personalizado de cannabas Esperaremos el contexto como argumento. De nuevo, podría sacar directamente CTX de la línea dos, pero prefiero hacer que mis clases más independientes en su alcance léxico Yo lo haré de esta manera. Cada celda será sólo un rectángulo negro. Por ahora, puedo sacarlo de aquí si quiero, pero no sería práctico. Ya que la imagen se puede hacer a partir de miles de celdas. Los dibujaremos todos a partir de un método de renderizado personalizado como este. Ahora llamo a este método render desde mi variable de efecto. Lo paso CTX de la línea dos. Queremos dibujar varias celdas y quiero organizarlas en una cuadrícula. La primera celda estará aquí horizontalmente. La segunda celda estará aquí. Estaremos saltando por ancho de celda horizontalmente hasta cubrir toda la fila. Después saltaremos por altura de celda verticalmente a la siguiente fila. Repetiremos esto hasta que cubramos toda el área del lienzo. Voy a mantener todas las celdas en una matriz. Yo lo llamaré cuadrícula de imagen. Para lograr este efecto, es necesario comprender dos codificaciones creativas fundamentales y dos, las técnicas de animación. Ambos son extremadamente importantes y pueden usarse para miles de cosas diferentes solo por el efecto que estamos construyendo hoy en día. La primera técnica que necesitamos entender es cómo organizar cualquier cosa en una grilla. Lo haremos aquí dentro de un método personalizado de creación de cuadrícula. Para crear una cuadrícula, usaremos dos cuatro bucles anidados. Anidado significa que hay un bucle dentro de otro bucle. El bucle exterior manejará filas en la cuadrícula. Cubriremos lienzo de arriba a abajo, fila por fila. Comenzaremos desde arriba desde la coordenada vertical cero. Estaremos corriendo este bucle de cuatro hasta llegar a la altura del lienzo, lo que significa que hasta llegar al fondo, en lugar de saltar por uno, siempre saltaremos por altura de celda para asegurarnos de que cada fila tenga la altura correcta. Cada vez que saltemos a una nueva fila, usaremos otros cuatro bucles para recorrer todas las celdas horizontales de esa fila, de izquierda a derecha, de cero a ancho de lienzo. Escribamos todo esto y rápidamente recapitularemos cómo funciona la lógica Organizar objetos en una cuadrícula es una técnica extremadamente útil para entender para la codificación creativa y también para hacer dos juegos D. Por ejemplo, cada vez que saltamos a una nueva celda en la cuadrícula, tomamos matriz de cuadrícula de imagen y empujamos nueva celda ahí, Pasándole la referencia al objeto de efecto. Esta vez le pasamos el índice X del bucle interno y el índice Y del bucle exterior para colocar la celda en la cuadrícula ya que la estamos creando fila por fila, de arriba a abajo. Para recapitular, el bucle externo maneja las filas, el bucle interno maneja las columnas, las celdas que se asientan horizontalmente una al lado de la otra Dentro de cada fila, digamos que estamos en la fila cero, Y es un cero, Estamos arriba. Aquí entramos en el bucle interno y empujamos una celda horizontal una al lado de la otra, saltando por ancho de celda hasta llegar al ancho del lienzo. Salimos del bucle interno. El bucle externo aumentará y por la altura de la celda. Volvemos a saltar a una nueva fila, entramos en el bucle interno, colocamos todas las celdas en esa fila de izquierda a derecha. Cuando alcanzamos el ancho, salimos del bucle interno, aumentamos Y en uno, ingresamos a otra fila. Y repetimos este proceso hasta que tengamos las coordenadas x e y para cada celda de la cuadrícula que cubra todo el lienzo. Es una técnica muy útil si eres principiante y esta es la primera vez que ves esto. No te preocupes, tendrá más sentido si usas esto con más frecuencia. Como dijimos, todo el código en el constructor se ejecuta automáticamente cuando creamos una instancia de esa clase usando la palabra clave new. Por esa razón, puedo activar automáticamente métodos. A partir de aquí, llamaré a create grid para que cuando creamos una instancia de clase de efecto, se cree automáticamente una cuadrícula de objetos de celda así como obtener un error porque no tenemos esta celda aquí. En lugar de esta línea, voy a llamar para cada método en la cuadrícula de imagen en la matriz desde la línea 26. Por cada objeto de celda que acabamos de introducir en esa matriz, llamaré a su método draw. Quiero dibujar todas las celdas que acabamos de crear en consola. Puedo ver que mi matriz contiene 1,980 objetos de celda. Voy a acariciarlos en su lugar para que podamos ver mejor la cuadrícula que acabamos de crear. Buen trabajo. Puedo cambiar estos valores para aumentar o disminuir el tamaño de mis celdas. 4. Cómo dibujar, recortar y cortar imágenes con código: Ahora tomo una imagen. Idealmente la imagen debe ser del mismo tamaño que las canavas. En mi caso, eso son 500 veces 700 píxeles. Pongo la imagen dentro mi carpeta de proyectos y la hago referencia aquí. Le doy una idea de imagen de proyecto. No quiero dibujar el elemento IMG real. Yo le doy pantalla ninguno. Queremos dibujar esa imagen sobre lienzo. En cambio, lo traigo a mi proyecto aquí sobre la clase de efecto principal. Esta propiedad de imagen dentro de render, lo llamo construido en dibujar método de imagen. Y le paso la imagen que quiero dibujar y las coordenadas X e Y. Dónde dibujarlo, puedo mover la imagen así. También le puedo dar argumentos opcionales de ancho y alto. Y la imagen será estirada o apretada para encajar en esa área predefinida. Quiero cortar la imagen en pedazos. Así que en su lugar usaré la versión más larga del método draw image con nueve argumentos. Esta versión nos da el mayor control sobre la imagen que estamos dibujando o animando. Le pasamos la imagen que queremos dibujar, la fuente x, la fuente Y, anchura de origen y la altura de origen, el área que queremos recortar de la imagen de origen y destino X, el destino Y, ancho de destino y la altura de destino para definir dónde dibujar esa pieza recortada de imagen En destino Cannavas, digamos que quiero recortar esta zona entre la coordenada 00.200 Y quiero estirar esa pieza recortada sobre toda la lona Lo estamos estirando desde la coordenada 00 hasta la lona. Con la altura del lienzo, ahora tenemos el control total Estos cuatro valores determinan el área de recorte Estos cuatro valores determinan dónde dibujar esa pieza recortada de imagen En Destination Canavas, quiero que cada celda contenga un pequeño trozo de imagen Voy a cortar esta línea. En cambio, voy a poner esta propiedad de imagen en la celda. Ahora estamos dibujando la imagen muchas veces, una vez por cada celda de la cuadrícula. No podemos permitirnos hacer esto porque lienzo es realmente muy eficiente para dibujar imágenes. No tiene que calcular nada. Simplemente toma los datos de la imagen y los dibuja. Es una operación barata en comparación con dibujar una forma. Si dibujo la misma imagen en las coordenadas x e y de cada celda, obtenemos esto. Si lo doy con altura, cada celda contiene toda la imagen. Ya sabemos que necesitamos cuatro argumentos más para recortar un pedazo de esa imagen. Fuente X, fuente Y, ancho de origen y alto de origen. Ya organizamos estas celdas en un grado. Ya tenemos los valores del cultivo en coordenadas. Simplemente podemos hacer esto simple. Ahora, parece que solo estamos dibujando una sola imagen de nuevo. Pero en realidad en este punto, estamos dibujando una pieza de la imagen de cada celda. Y las celdas combinadas crean la imagen completa. ¿Cómo puedo probarlo? Por ejemplo, usaré índice autogenerado Aquí dos argumentos necesitamos corchetes. Solo dibuja la celda con índice de 300 o 500. Solo dibuja las celdas con un índice superior a 500 o inferior a 500. Menos de 600, 801,000 201,300, creo que hemos probado Esta ya no es una sola imagen, está hecha de muchas piezas. 5. Cómo animar imágenes con código: Para el siguiente paso, voy a crear un bucle de animación. Estaremos actualizando algunos valores y redibujando las celdas una y otra vez para crear una ilusión de movimiento Pongo render dentro llamo marco de animación de solicitud incorporado. Y yo llamo animate para dar inicio a la animación. Parece estático, pero ya estamos animando. Esto lo puedo probar. Doy a cada diapositiva de celda X y diapositiva Y propiedades. Cosas muy diferentes van a pasar dependiendo donde dentro del método draw las agreguemos. Los agregaré a las coordenadas X de origen e Y de origen que determinan el área de recorte Pero también podríamos agregarlos al destino X y destino Y para un conjunto de efectos completamente diferente. Si cada celda tiene el mismo valor ligero, toda la imagen se moverá. Pero, ¿qué pasará si los aleatorizamos? Esto los aleatoriza solo una vez en la primera carga de la página. ¿Qué pasa si creo un método de actualización y lo aleatorizo para cada fotograma de animación Para cada fotograma de animación llamamos actualización y volveremos a dibujar todas las celdas una y otra vez Interesante. Espero que esto no le dé dolor de cabeza a alguien. También puedo aleatorizar la diapositiva Y como este hermoso caos, Codificación creativa También puedo hacer que la imagen se deslice hacia un lado. Valor mayor, supongo. Sí, muévete más rápido. Muévete en sentido contrario, ¿verdad? Creo que hemos demostrado que de hecho estamos animando. También podemos hacer visible la cuadrícula aquí. 6. Interactividad con el ratón: Puedo borrar este consolo. Quiero capturar las coordenadas del ratón. Yo creo un objeto aquí que los sostendrá para mí. radio será el área de interacción alrededor del ratón en que las células reaccionan a la presencia del ratón de alguna manera. Tomo esta referencia de lienzo de la línea 28 y agrego mouse move event listener Puedo declarar oyentes de eventos aquí dentro del constructor Ya sabemos que esto significa que se aplicarán automáticamente cuando creamos una instancia de clase de efecto. Lo único aquí es que la función de devolución de llamada no puede ser una función regular Necesita ser una función ES seis flechas para permitirnos usar esta palabra clave que apunta a este objeto de efecto y sus propiedades desde dentro de esta devolución de llamada. De lo contrario sería indefinido. Las funciones de flecha heredan esta referencia, esta palabra clave del ámbito padre Puedo consolog el objeto de evento autogenerado. Si lo abro, queremos las coordenadas x e y del cursor del ratón. Lo importante aquí es que estos valores sólo son buenos para nosotros si el lienzo es de pantalla completa. Como mi lienzo no es de pantalla completa, necesito las coordenadas X e Y que den cuenta del área blanca alrededor del lienzo. Voy a tener que usar los valores de desplazamiento X e Y de desplazamiento. En cambio, estas propiedades dan cuenta del espacio en blanco entre la página web y el lienzo para darnos la posición correcta del mouse en relación con el lienzo. Como aquí usé una función de flecha, puedo acceder a domus x desde dentro de la devolución de llamada y puedo configurarlo para que haga offset x. Hago lo mismo para la coordenada vertical Y que probé consolando estos valores Muevo el ratón sobre el lienzo y estoy obteniendo las coordenadas. 7. Cómo encontrar la distancia entre 2 puntos: Ahora la segunda técnica más importante que usaremos hoy. Queremos calcular la distancia entre dos puntos en un espacio de dos D, en este caso, entre el ratón y la celda. Para ello, voy a necesitar D X la distancia entre el ratón y este objeto celular en el eje x horizontal. Voy a tener una propiedad auxiliar aquí. Yo llamo x velocidad en el eje x horizontal. Si hago slide x plus es igual a dx, obtenemos caos completo. Terminemos con esto. También necesito D Y, la distancia entre estos dos puntos en el eje y vertical. Para calcular la distancia entre estos dos puntos en un espacio de dos D, necesito calcular una hipotensión. Tenemos este lado y este lado. La distancia entre estos dos puntos es el hipotenus, el lado más largo del triángulo rectángulo que significa que puedo usar la fórmula del teorema de Pitagora, que se vería así en Pero como estamos en el entorno Java Script, también podemos usar el método integrado de hipotenus mástile, que nos dará el mismo valor, la distancia entre mouse y esta celda Digo si la distancia es menor que el valor de radio que definimos en el objeto del ratón. Haremos algo de física emocional. Crearemos una variable auxiliar. Yo llamo por ejemplo, a la fuerza. Será igual a la relación entre la distancia actual y el radio, que representa la distancia máxima posible dentro de la cual las células reaccionarán al ratón. Dije velocidad x a fuerza para cada fotograma de animación, aumentamos el área de recorte horizontal de deslizamiento para cada celda por esta V X velocidad horizontal A medida que muevo el ratón, está claro que en realidad ya estamos detectando la distancia. Yo digo L. Si la distancia es mayor, asegúrate de que las celdas dejen de deslizarse. La velocidad vertical también será igual a la fuerza. Lo agregamos aquí. Yo lo defino aquí arriba. Voy a detener de nuevo el deslizamiento en el comunicado de la L. Bien, estamos llegando ahí en la carga de la primera página, estamos recibiendo algún movimiento en la esquina superior izquierda viniendo de la coordenada 00. Eso es porque estoy configurando mouse x e y en null al principio, pero en este caso, Javascript los ve como 00. A pesar de que es mejor establecer manualmente el nulo, en este caso tengo que establecer como undefined en su lugar. Ahora no hay movimiento al principio en la esquina superior izquierda que lo arreglara. Además, cuando el ratón abandona el lienzo, la última posición conocida del ratón seguirá interactuando. Copio este bloque de código, lo convierto en evento de abandono del mouse. Aquí también los pondremos a indefinidos. Ahora obtenemos animación. Sólo cuando movemos el ratón sobre las canavas. Estamos haciendo grandes avances. 8. Cómo obtener dirección del punto A al punto B: Ahora quiero que los cortes de imagen se expandan en la dirección correcta, directamente, o hacia el mouse. Esto es bastante avanzado. Si nunca antes usaste matemáticas 82, tuve que usar este método para algunos proyectos antes de entenderlo mejor. No te preocupes si no está del todo claro después de usarlo una vez. Si eres un principiante de animación, puedes simplemente volver a ver esta parte O puedes ver muchos otros tutoriales que hice donde uso esta técnica. Esta técnica es algo que un codificador creativo usa mucho. Y quedará claro una vez que empieces a usarlo y juegues con los valores para ver qué hacen. Construido en matemáticas el método 8102 nos dará un ángulo en radianes Podemos usar este valor de ángulo para obtener un ángulo entre dos puntos en un espacio de dos D y hacer que dos objetos se muevan acercándose o alejándose uno del otro. En este caso, los dos objetos son el cursor del ratón y la celda que contiene el corte de la imagen. Ya estamos calculando DX y DY, distancia horizontal y vertical entre el ratón y la celda. El método 82 espera que estos argumentos nos den el ángulo direccional entre ellos. Espera y primero y D x segundo. Es importante recordar, así es como funciona este método incorporado. El método 82 nos da un ángulo entre dos puntos, ratón y célula. En este caso, devuelve el ángulo en radianes entre el eje x positivo Y un rayo de 00 hacia cierto punto. La forma en que usamos esto, el rayo va desde el objeto uno desde la celda hacia X e Y del ratón. Ten en cuenta que el ratón puede estar a la derecha o a la izquierda de la celda, lo que significa que podemos obtener valores positivos o negativos. El rango de valores es entre más pi y menos pi Usar el mouse primero o segundo aquí en esta fórmula dará como resultado un conjunto diferente de valores. Los valores de ángulo resultantes se organizarán de manera diferente, pero en la codificación creativa no nos importa realmente porque una vez que obtenemos la animación, si los objetos se mueven uno hacia el otro, podemos cambiar su dirección multiplicando los valores por menos Lo que estoy diciendo es que podemos ajustar el código más tarde a cualquiera que sea el método de valores e dos que nos sea dado. Te voy a mostrar para recapitular. Para nuestros propósitos, el método e dos toma DY y dx, la distancia entre dos puntos en eje vertical, horizontal. En base a estos dos valores, nos dará un ángulo entre menos pi y más pi. Desde ese ángulo, sabemos en qué dirección queremos empujar los objetos para que se muevan acercándose o alejándose unos de otros. El rango de valores entre menos pi y más pi cubre toda el área circular. Debido a que el círculo completo es de dos pi, 360 grados, esto significa que estamos cubriendo todas las direcciones posibles en un plano dos D. Sé que esto es un montón de matemáticas para principiantes, no sientas la presión de entender completamente todo esto en este momento. La práctica lo dejará claro una vez que entiendas esta técnica, podrás hacer tantos efectos realmente geniales. Vale la pena el esfuerzo. Bien, ahora pasaremos este valor de ángulo resultante a los métodos de seno y coseno, que mapearán su posición a lo largo de un área circular seno y el coseno pueden trabajar juntos si ambos obtienen la misma entrada de ángulo para crear un movimiento circular o una emoción de onda, dependiendo de cómo los usemos Dado que el seno y el coseno convierten estos valores de ángulo entre un rango de menos uno a más uno, apenas veríamos ningún movimiento en absoluto Con estos pequeños valores, estamos multiplicando ese pequeño vector direccional por la fuerza aumentando Sabemos que la fuerza está directamente relacionada con la relación entre la distancia actual entre los dos objetos, ratón y celda, y su distancia máxima posible. Esto agregará mucha física agradable a nuestro proyecto, y el movimiento se verá suave y natural. Estamos en el punto en el que reviso qué moción obtenemos. Entonces sólo voy a ajustar los valores para obtener el movimiento que quiero. Sincroneo la salida de seno y coseno intercambiándolos, obtenemos este movimiento en su obtenemos este Así es como se puede obtener un movimiento circular que irradia lejos del punto central En este caso, nuestro punto central es el cursor del ratón. Tengo esta declaración L aquí para hacer que la imagen se deslice de nuevo en su lugar cuando el ratón se aleja. Pero para conseguir un movimiento completamente suave donde las piezas de la imagen se deslizan hacia adelante y hacia atrás. Idealmente, toda la cosa debería calcularse como un solo valor. Y luego aplicamos ese valor final a las propiedades slide x y slide y. Esto nos dará mucho mejor resultado, pero ¿cómo lo hacemos? 9. Fórmula de física del movimiento (fricción y relajación): Quiero tener aquí un cálculo que sea resultado de dos fuerzas competidoras. La primera parte aquí es el alejamiento del mouse si el mouse y la celda están lo suficientemente cerca el uno del otro. La segunda parte de este cálculo será una fuerza que desliza las imágenes de nuevo a su lugar original. Dado que ambas fuerzas serán parte de una sola fórmula, evitaremos obtener cualquier movimiento de ida y vuelta porque aquí al final solo se calculará un solo valor . Ampliemos esta fórmula y la expliquemos. La primera parte es la fuerza que desplaza las piezas. Y la segunda parte estará tratando de ponerlos de nuevo a donde originalmente estaban a sus posiciones iniciales. Ahora retroceden demasiado rápido. Ten en cuenta que todo este método de actualización se ejecuta 60 veces por segundo, una y otra vez. Recalcular estos valores para cada fotograma de animación. No quiero empujar la diapositiva completamente hacia atrás, sino solo por una fracción de la diferencia entre la posición actual y la posición predeterminada original. Multipliqué por flexibilizar para crear estos pasos individuales en el medio así Quiero que se relajen lentamente de regreso a donde estaban. Intento diferentes valores y veo lo que pasa ahora. Al mismo tiempo, quiero que la fuerza de empuje se descomponga con el tiempo, cada vez más débil. En el mundo real de la física, a esto le llamamos fricción de fuerza. Por cada fotograma de animación, quiero que la fuerza tenga solo el 80% de la potencia de empuje. Lo que significa que gradualmente se volverá vez más débil y eventualmente superará la segunda mitad de la fórmula que está trabajando en su contra, tratando de deslizar la celda de regreso a su lugar original por una fracción de la diferencia entre su posición actual y su posición original inicial Hago lo mismo para la coordenada y vertical. Deslizamos el área de cultivo de cada celda aplicando dos fuerzas competidoras sobre ella. Estas fuerzas trabajan unas contra otras, pero ambas son parte de una sola fórmula. Obtenemos un movimiento suave. Como resultado, si la distancia entre la celda y el ratón es menor que el valor del radio que predefinimos, se calcula la fuerza vertical y horizontal empujando las diapositivas lejos del ratón. Esa fuerza de empuje se aplica a los valores de deslizamiento x e Y de deslizamiento como la primera parte de la fórmula. Y esa fuerza de empuje decae para cada fotograma de animación por fricción, la velocidad de esa decadencia se puede modificar dando a esta fricción un valor diferente Entonces estamos aplicando una fuerza en sentido contrario. Si hay un plus aquí, necesitamos un menos aquí. Y esa fuerza opuesta es una fracción de la diferencia entre las partículas originales y la posición actual. A medida que la fuerza de empuje se descompone lentamente y la animación se ejecuta, eventualmente este lado derecho de la fórmula se hace cargo y las diapositivas volverán a su lugar original Te animo a jugar con todos estos valores. Swap, seno y coseno, swap más y menos, dan fricción y facilidad diferentes valores También puedes aplicar esta fórmula a x e y de las celdas en su lugar, para obtener un efecto completamente diferente. Después de ejecutar tus propios experimentos y crear aleatoriamente efectos geniales y únicos, estos cálculos tendrán aún más sentido. Puedo comentar los rectángulos que estamos dibujando porque esto hará que el efecto sea más performante Dibujar imágenes en lienzo es barato, pero dibujar formas es caro. Incluso los rectángulos que son una de las formas más simples, el valor que damos a la facilidad definirá qué tan rápido se deslizan las piezas de nuevo en su lugar El valor que le damos a la fricción definirá qué tan rápido decae la fuerza de empuje por fotograma de animación La fricción siempre tiene que ser menor que uno y más de cero. Si le das más de uno, entonces la fuerza de empuje simplemente se compondrá sin cesar y la imagen nunca volverá a montarse de nuevo No sólo estos valores en sí, sino también la relación entre estos dos valores afectarán el movimiento. Ahora la fuerza de empuje decae solo 1,000 por fotograma de animación, lo que significa que permanece alta durante mucho tiempo punto es básicamente cortar la distancia entre la posición original base y la posición actual en múltiples piezas y moverlo hacia esa posición original una porción a la vez Si este punto es 0.01 nos movemos hacia la posición original por 100 de la distancia entre la posición original y la actual por fotograma de animación. Pero a medida que el empuje fuerza al caso un 10% por fotograma de animación, eventualmente permitirá que las celdas vuelvan a deslizarse en su lugar. No estoy seguro si mis explicaciones al final ayudaron o lo hicieron más confuso. La mejor manera es jugar con los valores tú mismo, ver qué movimiento obtienes y empezará a tener sentido. Ahora que cubrimos esta técnica, estás listo para una versión más avanzada de este efecto, donde convertimos cada píxel de la imagen en una partícula y les aplicamos una fórmula física similar. También podemos aumentar el número de celdas que componen la imagen. Cuantas más celdas, más rendimiento exigiendo el efecto será. Por supuesto, ahora mismo, le estoy pidiendo a Javascript que dibuje 3,500 imágenes 60 veces por segundo, y deslice sus áreas de recorte alrededor calculando la física del movimiento para cada celda Todavía funciona bastante bien en mi computadora, pero probablemente no debería usar tantas celdas. Simplemente muestra lo bueno que es el lienzo al renderizar imágenes. 10. Moviendo las células: Bien, esta fue la versión amigable para principiantes de la clase. Voy a volver para darte algunos experimentos rápidos de fuego. Borro este consologe, tenemos estas cuatro variables para mover el área de recorte dentro de cada celda, y para deslizarla alrededor Voy a crear cuatro variables más. Y estos cuatro moverán la posición de celda X y la posición Y para la posición horizontal y vertical de cada celda. Y velocidad X y velocidad Y para su movimiento. La velocidad, la diapositiva X y la diapositiva Y se aplican aquí a la fuente X y a la fuente Y. Argumentos pasados para dibujar método de imagen, determinan la posición del cultivo en el área. Estamos deslizando ese cultivo en área usando VX y VY. Ahora tomo la posición X y la posición Y un conjunto separado de variables y las aplico a los argumentos destino X y destino Y. Esta área será para los efectos del cultivo, esta área será para las posiciones de las celdas y el movimiento. Trabajarán muy bien juntos. Si hacemos esto, bueno, veamos cómo va. La velocidad X será la posición objetivo final menos la posición inicial. Volveremos a hacer flexibilización. Repartiremos ese viaje en diez pedazos. Y moveremos la celda hacia su posición objetivo una décima parte de la distancia por fotograma de animación. velocidad Y es también la posición objetivo menos la posición inicial dividida por cierta facilidad en el valor. Ahora puedo tomar estos valores y aplicarlos a la posición X y a la posición Y, ya que estamos usando los que están aquí dentro dibujar imagen como destino X y destino Y. Esto realmente moverá las celdas ellas mismas así. Todos se mueven al mismo tiempo, así que simplemente escala así. Podemos hacer esto mucho más interesante de muchas maneras diferentes. Déjame mostrarte algunas de ellas. Por ejemplo, cada celda tendrá un valor aleatorio 2-12 Y vamos a facilitar cada celda por su propia facilidad aleatoria en valor 2.52 podemos cambiar las Las celdas volarán fuera de diferentes puntos, diferentes esquinas de lienzo, por ejemplo, Dependiendo de lo que hagamos aquí. Esquina inferior derecha, parte inferior media. Bien, ya te lo dije, vamos a hacer esto más interesante. Observe que las imágenes siguen reaccionando al ratón deslizando el área de recorte 11. Optimizaciones de rendimiento: También puedo acariciarlos, pero tengo que usar la posición X y la posición Y aquí. Sí, esto es genial. Acariciar estos rectángulos afecta el rendimiento. Redujamos aquí el número de celdas. Esto todavía se ve genial, ¿ no crees? Tratemos de encontrar un buen tamaño de celda. El único problema es que este bloque de código se ejecuta todo el tiempo. Quiero guardar algo de rendimiento y dejar de calcular estos pequeños valores de pix. Las celdas están lo suficientemente cerca sus posiciones de objetivo originales en el punto la imagen ha sido ensamblada o al menos casi ensamblada lo suficientemente cerca. Digo solo si la velocidad x es superior a 0.1 o la velocidad Y es superior a 0.1 Solo entonces muévalas. De lo contrario, suponemos que ya ensamblaron la imagen. Estos cálculos no son necesarios. Ahora, no tenemos ninguna velocidad x y velocidad Y. Necesitamos establecerlas cuando se crea la celda. Demos a cada celda un método de inicio personalizado. Aquí estableceremos las velocidades. Llamaremos automáticamente a este método start desde el constructor. El problema es que las celdas pueden estar a la izquierda o a la derecha. Las velocidades pueden ser negativas o positivas. Básicamente, quiero ejecutar este código sólo cuando las velocidades son inferiores a -0.1 y más de más 0.1 Lo que significa que las celdas están lo suficientemente lejos de sus posiciones objetivo y quiero que se muevan Solo eliminemos el menos. Al envolverlos en método absoluto, así, devolverá el número absoluto. Bien, este bloque de código está moviendo cada celda desde su posición inicial hacia su posición objetivo. Una vez que las celdas están lo suficientemente cerca y la imagen ha sido ensamblada, ya no ejecutamos este bloque de código para un rendimiento seguro. 12. Experimentos de codificación creativa: Quiero probar si este bloque de código realmente deja de ejecutarse. Estábamos pasando el valor del índice de celdas del para cada bucle. Aquí quiero que cada celda tenga un valor de índice único que aumente en uno por cada nueva celda que creamos. Le paso ese valor al constructor de clase de celda. Como cuarto argumento, me aseguro de que se espera aquí y que se convierta en una propiedad de clase. Consolaré el índice de cada celda aquí. Quiero asegurarme de que todos ellos dejen de ejecutar este cálculo en algún momento cuando las celdas estén lo suficientemente cerca sus posiciones objetivo y la imagen haya sido ensamblada, el límite de lo cerca que queremos que estén se puede cambiar aquí y aquí. Sí, podemos ver que todos los índices dejan de estar bloqueados en algún momento. Consolo así ralentizará tu proyecto. Tenemos que asegurarnos de retirarlo cuando no lo necesitamos. Podemos hacer tantas otras cosas. Cada celda tiene un valor de índice único. Llamamos método start automáticamente cuando creamos cada celda. También podríamos retrasarlos poniendo tiempo establecido fuera. Aquí le pasamos la función de devolución de llamada. ¿Cuánto tiempo esperar antes de que esto se ejecute? No quiero retrasarlos a todos 500 milisegundos. Cada uno se retrasará por su propio valor de índice. Callback ejecutará el método start y esto nos dará un error El motivo es esta palabra clave, se vuelve indefinida en el alcance de esta devolución de llamada. Ya enfrentamos este problema con las callbacks y esta palabra clave aquí, dentro de los oyentes de eventos Sabemos que hay una solución simple porque las funciones de flecha heredan esto del ámbito padre Volvemos a convertir la llamada en una función de flecha, y aquí vamos, tenemos un delay personalizado. Podemos aumentar ese retraso multiplicando el índice aquí el área de cultivo de celdas aún se desliza alrededor Mientras todas estas cosas están sucediendo, bonito, ahora puedo cambiar las posiciones iniciales aquí para obtener un conjunto de diferentes efectos interesantes. ¿Qué tal el medio? En lugar de empujar las celdas en la matriz, desdesplazaré, rellenaré la matriz de celdas desde el otro extremo, y esto dará como resultado que las celdas provengan de la parte posterior de la imagen así Si estás experimentando problemas de rendimiento, recomiendo quitar el carbón rectángulo de trazo de la línea 32 o puedes dibujar menos celdas. Al ajustar la celda con propiedades de altura de celda en el vidrio de efecto, podemos hacer que provengan de la parte superior media. Así. También podemos aleatorizar su X inicial y obtener un efecto diferente ¿Qué tal X al azar y al final Y? También podemos borrar pintura vieja entre cada fotograma de animación para obtener un efecto como este. ¿Qué tal X aleatorio y aleatorio Y0x y aleatorio Y negativo X, y aleatorio Y0x y cero y Todos se mueven con una facilidad constante. Entonces puedo obtener patrones más organizados ajustando estos dos valores. Te di tantos valores más que puedes retocar. Ahora es el momento de que tomes lo que aprendimos y te ocurra tu propia combinación única. Tenemos un control completo y entendemos cómo funciona este código. Si no tienes claro en algunos de estos, juega con los valores y mira lo que sucede. Empezará a tener más sentido. Eventualmente, podemos llevar esto a un nivel completamente nuevo. Al hacer que cada celda sea solo un pequeño píxel en la imagen, podemos tener imágenes que están hechas de muchas más piezas. Convierta las imágenes en efectos de partículas e incluso lluvia de partículas o fuego de partículas, por ejemplo. Si estás listo para llevar tus imágenes al siguiente nivel, te veré en la siguiente parte. 13. Volumen más bajo de introducción: Javascript es una herramienta poderosa. Exploremos los secretos de las técnicas de dibujo y animación en el desarrollo web front-end moderno. En esta clase, comenzaremos dibujando un simple rectángulo e imagen en canavas HTML Descubriremos cómo convertir estos rectángulos en un sistema de partículas Será un sistema de partículas inteligente que podrá recrear y recordar formas basadas en datos de píxeles A partir de cualquier imagen, te mostraré cómo dar a cada partícula física como la fricción y la flexibilización, y agregaremos algunas interacciones de ratón donde podamos romper la imagen en píxeles individuales y automáticamente se volverá a armar Ven y únete a mí y aprendamos a convertir las imágenes en obras de arte digitales interactivas. 14. Imágenes de partículas Lección 1: Comenzamos creando tres archivos, índice HTML, estilo CSS y script GS. Abro índice HTML. En mi navegador de internet, estaré usando Google Chrome. Dentro del índice HTML, creo un marcado básico de página web. Estoy usando el editor de código visual studio con extensión met, así que solo puedo presionar el signo de exclamación y la tecla de tabulación y obtengo una página web básica como esta. Este video es una introducción al lienzo HTML. Pero espero que ya sabes, algunos conceptos básicos del script Java. Dale algún título a mi página web. Por ejemplo, impresionantes efectos Javascript. Vinculo mi estasis como archivo así. Yo creo HTML cinco elemento canvas con una idea de canvas one. El elemento html canvas se utiliza para dibujar gráficos en una página web. Podemos dibujar formas estáticas, así como animaciones dinámicas interactivas que reaccionen a la entrada del usuario, que es lo que haremos hoy. El elemento lienzo es un contenedor para nuestras obras de arte, es nuestro tablero de arte. Podemos usar Javascript para dibujar formas, líneas, texto o imágenes en él. Puede sonar muy básico, pero una vez que entiendas cómo funciona el lienzo, puedes hacer una variedad infinita de arte digital, juegos interactivos y gráficos web. En este curso, exploraremos qué se puede hacer con imágenes y pasaremos de lo básico a algunos efectos avanzados realmente geniales. Hop creo un elemento diff con una clase de controles, y dentro tendremos un botón con una idea de botón Warp y texto que dice Warp. Cuando hacemos clic en él, romperá la imagen en partículas individuales y la imagen se volverá a ensamblar de nuevo Automáticamente, podremos controlar la velocidad y el peso de las partículas a medida que se mueven. Este proyecto también contendrá unas dos D físicas. No te preocupes, no es tan complicado si lo llevas paso a paso conmigo mientras escribimos el código. También enlazaremos el archivo G del script aquí abajo en la parte inferior. Para vincular nuestra lógica de script Java en StysSS, empiezo con el restablecimiento global para asegurarme de que nuestra página aparezca igual en todos los navegadores diferentes Utilizo el selector de asterisco para apuntar a todos los elementos de la página, y establecí el margen en cero Y relleno a cero lienzos con una identificación de sondeo, uno tendrá un fondo azul Esto es solo temporal para que pueda ver dónde está en la página cuando lo estoy posicionando con una clase de controles se establecerá en posición absoluta. Esto lo eliminará del flujo de documentos y lo colocará sobre el elemento de lienzo Tenemos que asegurarnos de que los botones que contendrá no estén cubiertos por nada y siempre sean clicables Entonces establecí su índice z en 100, poniéndolo todo el camino arriba frente a todos los demás elementos. 15. Imágenes de partículas Lección 2: Vuelvo al índice HTML y creo un elemento de imagen. Le doy una identificación de imagen con la fuente de la imagen. Tendremos que hacer un pequeño truco. Tengo mis archivos de imagen listos en mi escritorio. Es sólo una imagen normal en formato PNG con un fondo transparente. Si acabo de poner esta imagen en mi carpeta de proyecto y apunto el atributo source de imagen como lo haríamos normalmente, podremos dibujar esa imagen en lienzo, pero no podremos analizarla para datos de píxeles y dividirla en partículas. Si tratamos de hacer eso, obtendremos un error que dice que el lienzo estaba contaminado por datos de origen cruzado Este error solo debería ocurrir cuando ejecutas tu código localmente. Una vez que subas el proyecto a un servidor on line, el archivo PNG en la fuente se consideraría el mismo origen. Pero queremos que este proyecto funcione en todo momento. No queremos desencadenar ningún error incluso cuando trabajamos localmente así. Para evitar la advertencia de lienzo contaminado, convertiremos la imagen misma en código Asignamos ese código como fuente aquí. Y así la propia imagen será parte del archivo HTML índice. Por lo tanto, se considerará mismo origen en todas las circunstancias, mayoría de la gente no sabe que las imágenes en la web se pueden romper en una sola línea de código muy larga. A esto lo llamamos una cadena base 64. Esa línea de código contiene todos los datos de la imagen. Completamente reemplazando el archivo PNG que tenemos aquí. Puedo convertir mi imagen en formato base 64 dibujando la imagen en lienzo y luego llamando al método de URL de dos datos incorporado en el elemento canvas, convirtiendo todo el lienzo con esa imagen dibujada en él en una pantalla de datos. Hoy, usaremos una opción aún más simple para hacer eso y usaremos uno de los muchos sitios web disponibles que lo harán rápidamente por nosotros. Abro otra ventana del navegador y yo Google frase PNG dos base 64. Selecciono el primer enlace de online Png tools.com Si quieres usar las mismas imágenes que estoy usando, puedes descargarlas en la descripción del video las imágenes son enemigos de Steampunk Fish tutorial del juego que hice recientemente Simplemente puedo tomar la imagen y arrastrarla y soltarla aquí en el lado derecho. Genera código base 64 para mí. Para que el código funcione, necesito asegurarme la cadena comience con la imagen de dos puntos de datos, base PNG 64, así. Si no empieza así para ti, solo asegúrate de tomar esta casilla de verificación Tomamos un archivo de imagen PNG y convertimos toda la imagen en una línea de código. Esta cadena ahora contiene todas las posiciones de píxeles y valores de color, reemplazando completamente el archivo de imagen en sí. Cualquier navegador de internet puede entender esta cadena y dibujar la imagen de ella. Quieres aprender a usar el otro método y generar esta cadena dinámicamente con Javascript sin usar un sitio web externo. Eso lo hago en mi otro curso, donde generamos formas fractales complejas y las convertimos en copos de nieve que caen Destaco esta cadena base 64 muy larga y la copio en índice HTML. Coloco mi cursor del ratón entre las comillas del atributo SRC y pego todo eso dentro Si guardo los cambios estamos dibujando la imagen, se puede ver la cadena base 64 contiene toda la imagen. No es necesario el archivo PNG real. De esta manera podemos manipularlo con Javascript de la forma que queramos. Puede hacer clic en Ver ajuste de palabras para alternar entre una vista donde rompe líneas como esta, podemos ver todo el código. Y otra vista donde todo está en una línea como esta, se puede ver que hay mucho código. Hace años, lancé una versión sencilla de este algoritmo. Y sólo funcionaría con imágenes pequeñas, 100 veces 100 píxeles. Cualquier cosa más grande que eso se volvería muy lenta y rezagada Esta versión funciona incluso con imágenes más grandes porque vamos a controlar cuántas partículas se rompe la imagen con el script Java. Esta base de código tiene muchas mejoras y optimizaciones. Verás la imagen más grande que uses, la cadena base 64 más larga obtendrás. En lugar de señalar la fuente de la imagen directamente a un archivo PNG, convertimos nuestra imagen Angular Fish en una cadena base 64. Esto nos permitirá analizar la imagen en busca datos de píxeles y hacer todo tipo de efectos geniales y animaciones sobre ella sin tener que lidiar con ningún error de origen cruzado. Realmente no quiero dibujar el elemento imagen en mi página web. Quiero dibujar esa imagen en mi elemento lienzo azul. Voy a tomar etiqueta IMG y le doy un display, ninguno, la imagen esta oculta Pero aún podemos acceder a él con Java Script para dibujarlo en lienzo cuando lo necesitemos. Sigue sentado aquí en índice HGML. 16. Imágenes de partículas Lección 3: En el script GS, creo un oyente de eventos para el evento de carga. Todo el código de este proyecto será escrito dentro de este oyente de eventos evento de carga se asegurará de que todo el sitio web, incluidos todos los recursos dependientes como hojas de estilo e imágenes, esté completamente cargado y disponible antes de ejecutar cualquier código Javascript. Al trabajar con código Javascript que depende de una imagen, es un error común que me pasó muchas veces que no esperé a que se cargaran la imagen y me estaba poniendo lienzo en blanco. El código Javascript se ejecuta muy rápido. Las imágenes pueden tardar un par de milisegundos más en cargarse. No podemos percibir esa diferencia a simple vista, pero si el código Javascript se ejecuta antes de que se cargue la imagen, obtendremos carga de lienzo en blanco El oyente de eventos es una de las formas en que podemos lidiar con este retraso Comenzamos con una sencilla configuración de lienzo. Yo creo una variable constante. Yo llamo por ejemplo lienzo. Y apunté hacia el elemento lienzo HTML que creamos en el archivo HTML índice. Al usar get element by ID, le dimos un ID de canvas one. Al igual que esta variable llamo CTX. Atajo para contexto es esta variable de lienzo de la línea dos obtener contexto. Contexto es un método especial que sólo se puede llamar en una variable que contiene una referencia a HTML. Cinco elementos canvas get context method espera un argumento, llamamos context type, podemos pasarle dos D o web GL. Hoy vamos a trabajar con dos D cuando se llama así método get context va a crear una instancia de un objeto llamado canvas Rendering Context dos D. Este objeto contiene todos los ajustes de lienzo y todos los métodos de dibujo de lienzo integrados que necesitaremos hoy en día. Puedo consoloc CTX para echarle un vistazo . Lo puedo ver aquí mismo. Si lo abrimos, podemos ver todos los ajustes predeterminados del lienzo, llamado estado del lienzo. Se puede ver, por ejemplo, que el estilo de relleno predeterminado está configurado para bloquear aquí, fuente predeterminada es de diez píxeles, san serif, ese ancho de línea predeterminado es de un píxel Podemos anular cualquiera de estos ajustes asignándolos a un valor diferente con el script Java, y lo haremos más adelante Si hago clic en el prototipo aquí y lo expando, podemos ver todos los métodos construidos en dos D. Podemos usar estos métodos para dibujar rectángulos, círculos y líneas Podemos crear gradientes y manipular imágenes. Hoy, cubriremos los básicos y profundizaremos realmente en el método de dibujo de imagen que se sienta aquí mismo. También te mostraré cómo analizar una imagen píxel a píxel y usarla para alguna magia de animación genial con el método get image data que viene de aquí. Eliminemos la consoloc y cerremos la consola del navegador. Tomo variable canvas de la línea dos y accedo a su propiedad width. Lo configuré en ventana de ancho para hacer que lienzo cubra toda la ventana del navegador horizontalmente. También hago lo mismo con la altura para que cubra la pantalla verticalmente. 17. Imágenes de partículas Lección 4: Hoy quiero mostrarles cómo crear un llamado sistema de partículas. En términos generales, el sistema de partículas es una colección de objetos pequeños. Cada partícula es un pequeño elemento gráfico. Puede ser una imagen o una forma. Podemos programar estas partículas para que se vean y se comporten cierta manera para simular todo tipo de efectos. Podría ser fuego, bolas rebotando, enjambres de enemigos en un juego, o muchas otras cosas Hoy, haremos cada partícula en un píxel en nuestra imagen y las partiremos en piezas individuales. Al mismo tiempo, estas partículas reaccionarán al ratón de una manera agradable y dinámica con la física y la fricción involucradas. Para crear todas estas partículas, usaremos una clase Javascript personalizada. Yo lo llamo por ejemplo, partícula como esta con una P. mayúscula Las clases Javascript son planos para crear muchos objetos similares Javascript es un lenguaje basado en prototipos. Cada objeto Javascript tiene una propiedad interna llamada prototype que se puede utilizar para extender las propiedades y métodos del objeto. Las clases en Javascript se llaman azúcar sintáctico. Es una sintaxis más limpia y elegante construida sobre herencia nativa basada en prototipos Javascript que imita clases de otros lenguajes de programación En pocas palabras, la clase es una plantilla. Cada vez que llamamos a esta clase de partículas, creará un nuevo objeto de partícula para nosotros. También tendremos una clase que llamaré Efecto. Esta clase manejará todo el efecto, todas las partículas a la vez. La última pieza que necesitaremos aquí es clase Animation Loop Particle como un blueprint para crear objetos individuales de partículas, clase de efecto para manejar todas las partículas al mismo tiempo Y bucle de animación Para hacerlo todo animado e interactivo, daré mi método constructor de clase de partículas. Este es un método especial cuando llamo a mi clase de partículas más tarde con la nueva palabra clave constructor ejecutará todo el código dentro de él para crear un nuevo objeto en blanco y asignarle valores y propiedades basados en el blueprint dentro Definamos ese plano. Definamos las propiedades de nuestras partículas. Cada partícula será una pieza de una imagen, un píxel. Tendrá que sentarse en una posición muy específica y todas las partículas combinadas conformarán toda la imagen. Eso significa que necesitará coordenadas x e y para que Java script sepa dónde en lienzo dibujarlo en HTML Canvas, igual que en el desarrollo web en general. Tenemos eje x horizontal que va desde cero píxeles a la izquierda y aumentando a medida que nos movemos hacia la derecha. También tenemos un eje Y vertical comenzando en cero píxeles arriba y aumentando a medida que bajamos. Por ejemplo, la posición 5,100 sobre lienzo estará aquí a 50 píxeles de la izquierda en el eje x y 100 píxeles de la parte superior en el eje y Inicialmente, estableceré x e y dos coordenadas, 00 para esquina superior izquierda sobre lienzo. Cuando definimos propiedades en la clase Java, decimos esto x, que significa propiedad x. En esta instancia de clase de partículas el constructor está creando, ahora mismo nuestras partículas serán rectángulos porque Canvas es más rápido dibujando rectángulos en lugar En la versión anterior de este efecto, utilicé círculos. En esta ocasión podremos extraer más partículas de manera eficiente. El tamaño de cada rectángulo de partículas será tres veces tres píxeles. 18. Imágenes de partículas Lección 5: Para dibujar un rectángulo sobre lienzo, todo lo que tenemos que hacer es tomar variable CTX de la línea tres que contiene una instancia de canvas dos D join API y llamamos construido en phil rectángulo método así Espera cuatro argumentos x e y posicionan donde dibujarlo y con la altura del rectángulo llenará ese rectángulo de color. Si no definimos el estilo de relleno, sabemos que el estilo predeterminado en el elemento canvas es el negro. Aquí está nuestro rectángulo negro dibujado 120 píxeles de la izquierda en el eje x y 150 píxeles de la parte superior en el eje y, 100 píxeles de ancho y 200 píxeles de alto. Si este es tu primer proyecto de lienzo, tal vez deberías publicar el video y cambiar estos valores para que entiendas cómo se dibujan rectángulos, igual que las imágenes en lienzo, igual que las imágenes en lienzo, a partir de las coordenadas que le damos Y van a la derecha y bajan desde ese punto, dependiendo de su anchura y altura. También podemos dibujar círculos, curvas o líneas y hacer diferentes formas y animaciones. Con estos, puedes dibujar prácticamente cualquier cosa. Una vez que sepas cómo funciona el lienzo, si te interesa el arte que se pueda hacer con líneas, echa un vistazo a mi clase de fractales Hoy estamos profundicando en las imágenes. Traigamos nuestra imagen de pez angular al proyecto y dibujémosla en lienzo. 19. Imágenes de partículas Lección 6: Yo creo una variable constante, llamo imagen uno. Señalé hacia el elemento imagen usando su ID image one, que le di aquí. Ahora puedo tomar la variable CTX de la línea dos que como dijimos contiene todas las propiedades y métodos de lienzo que llamo construido en dibujar método de imagen así, dibujar método de imagen espera al menos tres argumentos La imagen que queremos dibujar y las coordenadas x e y. ¿Dónde dibujarlo? Le paso la imagen uno de la línea siete y quiero dibujar la imagen desde la esquina superior izquierda del lienzo a partir de las coordenadas 00. Le doy posición de x 100. Empujamos la imagen en 100 píxeles hacia la derecha. Si lo paso en 100 píxeles como coordenada y vertical, empujo la imagen en 100 píxeles hacia abajo. También puedo pasarlo opcional con y argumentos de altura. Si no pasamos con y altura, Javascript simplemente dibujará la imagen en su tamaño original. Si le paso ancho de 100 píxeles y alto de 100 píxeles, apretamos la imagen en un área de 100 veces 100 píxeles y la distorsionamos Puedo estirar y exprimir la imagen así, lo que podría ser útil para ciertos efectos. Si es tu primera vez usando el método draw image, puedes publicar el video y pasarle diferentes valores para x Y con y altura para que veas como afecta la posición y el tamaño de la imagen. 20. Imágenes de partículas Lección 7: Ahora sabemos cómo poner en marcha un proyecto de Htimlcnvas. Sabemos usar el método de relleno de rectángulo para dibujar un rectángulo simple y cómo usar un método de dibujar imagen para dibujar una imagen en lienzo. Usemos nuestra clase de partículas para dibujar algo. Elimino este código. Digamos que quiero que cada partícula sea cuadrada negra de 30 veces 30 píxeles. Doy a mi clase de partículas un método personalizado. Yo llamo, por ejemplo, dibujar. Su trabajo será tomar propiedades del constructor de clase y dibujar partículas de ese tamaño en esas coordenadas. Empecemos simple y luego lo refactorizamos para emplear buenas prácticas de programación orientada a objetos Nuevamente, para dibujar algo, tomo la variable CTX de la línea tres A partir de ella, llamo construido en el método Phil Rectangle. Ya aprendimos que Phil Rectangle espera cuatro argumentos x, y, ancho y alto. Ese script Java sabe dónde dibujar ese rectángulo y qué tamaño debería ser. Lo paso esta x de la línea 11. Este punto y de la línea 12 como coordenadas x e y. Lo paso didot tamaño de la línea 13. igual que con la misma propiedad de tamaño de disdote que altura como esta Definimos nuestra clase de partículas. Tenemos un plano con todas las propiedades. Y tenemos un método de dibujar donde tomamos esas propiedades y las usamos para dibujar un rectángulo. ¿Cómo ejecutamos realmente este código? Para dibujarlo, necesitamos crear una instancia de esta clase. Yo creo una variable constante, llamo partícula uno. Lo puse igual a nueva partícula así. La nueva palabra clave es un comando especial en el script Java. Buscará una clase con ese nombre. Encontrará esa clase aquí en la línea nueve y activará automáticamente su constructor. El constructor de métodos creará un nuevo objeto en blanco y le asignará propiedades basadas en el blueprint interior Debido a que esta partícula un objeto fue creado usando esta clase de partículas, tiene acceso al método de dibujo que definimos en la línea 15. Simplemente podemos llamarlo así, partícula uno dibujar. Bonito. Estamos usando nuestra clase para crear y dibujar una partícula. Puedo ajustar su posición X e Y aquí para moverla. También puedo cambiar su tamaño. 21. Imágenes de partículas Lección 8: Si quiero crear más de una partícula, sólo puedo repetir este código y crear variables para la partícula dos, partícula tres, y así sucesivamente, pero eso no sería muy eficiente. Nuestro código debe estar seco, que es un acrónimo para no te repitas. También estamos tratando de mantener todo en la estructura de código orientada a objetos. Podemos usar esta clase de efecto que definimos en la línea 20 para crear y manejar múltiples partículas. Las partículas manejarán partículas individuales. clase de efecto manejará todo el efecto, todas las partículas a la vez. Esta vez le doy un constructor. El constructor esperará que dos argumentos para width y height provengan del exterior. Esto asegurará que el efecto esté al tanto de las dimensiones actuales del lienzo Dentro convierto estos argumentos en propiedades de clase. Estoy diciendo tomar el ancho que se pasó como el primer argumento al constructor de clase y convertirlo a la propiedad width. En esta instancia particular de clase de efecto que estás creando en este momento, lo mismo para height. También tendremos propiedad de array de partículas. Inicialmente, lo configuré en una matriz vacía, contendrá todos los objetos de partículas actualmente activos creados por la clase de partículas. A partir de la línea nueve, voy a dar a mi clase de efecto un método personalizado que llamo, por ejemplo en ella, su trabajo será inicializar el efecto y llenar la matriz de partículas desde la línea 24 con muchos objetos de partículas Empecemos con una sola partícula. Tomo esta matriz de partículas y llamo método de empuje incorporado en él. El método push agrega uno o más elementos al final de la matriz. Quiero meter una partícula, así que le paso nueva partícula así. La nueva palabra clave saltará a la línea nueve y activará el constructor de clase de partículas creando un nuevo objeto de partícula basado en este blueprint. Elimino este código. Dibujaremos formas desde dentro de nuestra clase de efectos. Ahora para dibujar esta partícula estamos sosteniendo dentro de la matriz de partículas creo método de dibujo. Este método tomará la matriz de partículas de la línea 24 y llamará para cada método de matriz incorporado en él. El para cada método ejecuta una función proporcionada una vez por cada elemento de matriz Voy a usar ES six moderno en impuestos aquí. Esta es la llamada función de flecha. Ahora la matriz de partículas contiene solo una partícula, pero también puede contener muchas. Estoy diciendo que tome esa matriz de partículas y llame a cada una en ella. Asigne a cada objeto de la matriz una partícula de nombre de variable temporal en cada uno de los que llaman a su método de dibujo asociado. Desde la línea 15 tenemos clase de efecto con método init para rellenar la matriz de partículas con objetos de partículas y el método draw para dibujar todos ellos. Este método de dibujar en la línea 29 dibuja todas las partículas, todo el efecto. Este otro método de dibujo en la línea 15 especifica cómo se verá cada partícula. En nuestro caso, decidimos dibujarlos como simples rectángulos negros Por ahora para dibujar las partículas, ahora creo una variable constante. Yo llamo efecto, y lo configuro a una instancia de mi clase de efectos como esta. En la línea 21, puedo ver que constructor espera argumentos para width y height. Lo paso ancho de lona desde la línea cuatro y altura de lona desde la línea cinco. Consolemos esta variable de efecto para comprobar si todo funciona hasta el momento Bonito. Puedo ver mi objeto efecto y tiene propiedades width y height y también array particles que actualmente está vacía. Tomo mi variable de efecto y lo llamo método de la línea 26 así. Este método debería empujar una partícula ahí. Reviso consola, sí, tenemos un objeto de partícula dentro y puedo ver que tiene propiedades x, y, y size que todas tienen valores correctos. Si ves indefinido en algunos de estos, significa que hay un error en alguna parte de tu código. Es bueno verificar de vez mientras escribes tu código, si todas tus propiedades tienen valores, especialmente si te encuentras con algunos problemas o errores mientras codificas consoloc está aquí para ayudarnos Ahora puedo volver a tomar efecto variable y llamo a dibujar método desde la línea 29. También borro la consoloc. Bien, estamos dibujando una partícula usando nuestra nueva estructura de código. Puedo mover la partícula cambiando estos valores. 22. Imágenes de partículas Lección 9: Estamos haciendo algo malo. Aquí estamos tirando de la variable CTX de la línea tres directamente a nuestra clase Queremos que nuestras clases y objetos sean modulares, autónomos tanto como sea posible e independientes de su código circundante, de su entorno léxico En lugar de tirar CTX directamente, lo convertiré en una variable y lo pasaré Me aseguraré de que el método de dibujo en clase de partículas espera contexto como argumento. Entonces usaré esa variable de contexto aquí para llamar al método phil rectángulo desde ella. Pasaré la variable tx de la línea tres como argumento para dibujar método. Cuando lo llamamos en la clase de efecto en la línea 36 le damos un contexto de nombre de variable aquí así. Pasamos esa referencia a lo largo del método de dibujo en la clase de partículas. Esa referencia se pasará aquí. A partir de ahí llamamos Phil Rectangle. Hacerlo así asegurará que nuestro código sea modular. Se considera una buena práctica más que lo que teníamos antes. 23. Imágenes de partículas Lección 10: También podemos aleatorizar las posiciones de las partículas. En lugar de codificar duro las coordenadas, puedo establecer la posición x horizontal un número aleatorio entre cero y el peso del lienzo. posición vertical Y podría ser un valor entre cero y la altura del lienzo. Ahora cada vez que refresque mi página, partícula estará en una posición aleatoria diferente en algún lugar del lienzo. También podría aleatorizar el tamaño si quiero. Dentro de él método, creo dos partículas copiando esta línea. Niza, Ahora tenemos dos partículas ya que las creamos usando la nueva palabra clave. Cada vez que el constructor se ejecuta en la línea diez, asignará diferentes posiciones x e y aleatorias a cada una. También puedo crear tres partículas como esta, igual que hicimos con la variable CTX Aquí estamos tirando el ancho del lienzo y altura del lienzo directamente a nuestra clase, lo que hace que esta clase dependa de su código circundante. Ya estamos convirtiendo ancho del lienzo y el alto del lienzo dos propiedades de clase en clase de efecto aquí pasándolo al constructor de clase de efecto en la línea 36. Eliminemos estas dos partículas para asegurarnos de que cada partícula es consciente del tamaño actual del lienzo. Me aseguro de que el constructor de clase de partículas espere una referencia a toda la clase de efecto, todo como argumento dentro convierto esa referencia a una propiedad de clase llamada este efecto de punto. Tenga en cuenta que los objetos en el script Java son los llamados tipos de datos de referencia. Lo que significa que al pasar una referencia a todo el objeto de efecto a este objeto de partícula, no estoy creando una copia de la clase de efecto cada vez que creo una nueva partícula. Este efecto de punto no es una copia, es solo una referencia que apunta a un espacio en memoria donde se almacena la clase de efecto principal. Tiene muchas ventajas. La principal es que cuando actualizamos cualquier valor en la clase de efecto, esos cambios serán inmediatamente visibles desde esta propiedad de efecto punto en objetos de partículas. Ahora bien, este efecto punto apunta hacia toda esta clase de efecto, y podemos acceder a cualquier propiedad en él desde dentro de la clase de partículas. Debido a eso, puedo reemplazar ancho del lienzo por el ancho de punto del efecto dist, haciendo referencia al valor de la línea 23 Como sabemos, este valor representa el ancho del lienzo. También podemos hacerlo aquí en la línea 13 y usar la altura del punto del efecto dist, un valor que proviene de la línea 24. Si eres un principiante pasando valores como este podría llevar algún tiempo comprenderlo completamente. No te preocupes por demasiado. Si estás luchando, te volverás bueno en esto a medida que escribas una base de código más orientada a objetos. Ahora que sabemos que la clase de partículas espera un argumento apuntando hacia la clase de efecto principal. Aquí en la línea 28, donde creo una instancia de clase de partículas, le paso efecto como argumento, una referencia a todo esto, a toda esta clase. Sin embargo, ya que estamos dentro de esa clase de efecto, necesito usar esta palabra clave en su lugar. Esta palabra clave utilizada dentro esta clase representa toda la clase en sí. Cuando actualizo la página, tengo una partícula que se genera aleatoriamente y se dibuja en algún lugar del lienzo. Bonito. Estamos pasando ancho del lienzo a la clase de efecto en la línea 35, convirtiéndola a esta propiedad de ancho de pensamiento en la línea 23, y usando ese valor en la línea 12 para calcular la posición de la partícula. También estamos haciendo lo mismo para la altura. Ahora puedo volver a copiar esta línea para crear muchas partículas. Pero, ¿y si quiero 100 partículas? Copiar esta línea de código se volvería poco práctico. Este es un escenario perfecto para usar un bucle de cuatro. Borro todo este código, y en su lugar voy a envolver esto en un bucle de cuatro. Así. El índice comenzará en cero, siempre y cuando el índice sea menor a diez, aumente el índice en uno y cree una partícula. Este cuatro bucle correrá diez veces y creará diez partículas. Cuatro bucles son geniales para ayudarnos a reducir la repetición de código. 24. Imágenes de partículas Lección 11: Dibujemos también una imagen. Pero porque no quiero estar tirando de esta imagen una variable a mis clases desde fuera. Permítanme convertirlo en una propiedad de clase en la clase de efecto como esta. Yo lo llamaré Imagen DID. Podemos dibujarlo tomando contexto y llamando a dibujar imagen en él. Le paso la imagen de punto de la línea 24.00 para las coordenadas x e y Estamos dibujando de nuevo a nuestros peces sobre lienzo. Pero esta vez lo estamos haciendo desde una base de código autocontenida orientada a objetos. 25. Imágenes de partículas Lección 12: Las imágenes en lienzo se dibujan desde la esquina superior izquierda, yendo a la derecha y hacia abajo. Déjame mostrarte cómo centrar una imagen exactamente en medio de las canavas Voy a crear una variable auxiliar llamada este centro x. Será este ancho de punto a partir de la línea 21. Entonces el ancho de las canavas veces 0.5 medio del lienzo horizontalmente, punto centro Y es punto alto desde la línea 22 veces 0.5 el centro de la lona Puedo usar estas nuevas propiedades como coordenadas x e y pasadas para dibujar el método de imagen. Ahora la imagen se dibuja desde el punto sobre lienzo que está exactamente en el medio. Sin embargo, la imagen no está centrada. La imagen de punto es una referencia al elemento IMG que creamos en el índice HTML Déjame consologate Este elemento de imagen ha generado automáticamente propiedades width y height Si consolog punto ancho de imagen, se puede ver. Dice que la imagen de punto de 500 píxeles la altura del punto es de 369 píxeles. Ahora que sabemos esto, podemos eliminar la consoloc. Y podemos usar ancho y alto de la imagen para desviar la posición por la mitad del ancho de la imagen y la mitad de la altura de la imagen. Para centrarlo, creo una propiedad llamada punto x en clase de efecto. En este caso, distotex significa posición horizontal de la imagen del pez Será punto centro x desde la línea 25, por lo que el centro del área del lienzo horizontalmente menos la mitad del ancho de la imagen. Ahora puedo pasar didot x para dibujar el método de imagen en la línea 37. Y la imagen está centrada horizontalmente. Hagamos lo mismo para posición vertical Y punto centro Y menos Sdt imagen punto altura veces 0.5 Yo la sustituyo aquí Para centrar cualquier imagen en lienzo, solo encuentra el centro del lienzo vertical y horizontalmente, y desfase esos valores por la mitad del ancho de la imagen y la mitad del alto de la imagen. 26. Imágenes de partículas Lección 13: Entonces estamos dibujando nuestros peces como imagen y estamos dibujando diez partículas. Hagámoslo 100 partículas. Hagamos de cada partícula un cuadrado, cinco por cinco píxeles. Se puede jugar con el tamaño. Cada vez que actualizo mi página, todas estas cien partículas obtienen una posición aleatoria en algún lugar del lienzo. También podemos hacer que el tamaño de partícula sea aleatorio, así. También podemos hacer que estas partículas se muevan. Nosotros manejaremos esa lógica aquí. Dentro del método de actualización, voy a necesitar una nueva propiedad llamada V x velocidad x, que es básicamente una velocidad horizontal. Vamos a establecerlo en 11 píxeles por fotograma de animación. Por ahora, también creo velocidad y y la configuro en más uno también. Dentro del método de actualización para cada fotograma de animación, queremos aumentar la posición horizontal de la línea diez por el valor de Vx a partir de la línea 13 También queremos aumentar la posición Y por el valor de V Y. Cada partícula tendrá su propio método de actualización que definirá su movimiento. También creo método de actualización en la clase de efecto. trabajo de este método será llamar a la actualización de todos los objetos de partículas actualmente activos en su interior. Tomo matriz de partículas. Para cada objeto de partícula en la matriz, llamo a su método de actualización, que se crea en la línea 19 así. Si llamo al método de actualización así, no va a pasar mucho. Todas las partículas se dibujan una vez y sus propiedades se actualizan una vez. No hay nada Llamando a los métodos de actualización y dibujo una y otra vez, necesitamos bucle de animación. Tomo estas dos líneas de código y las pongo dentro de esta función personalizada que llamé animate. Llamo solicitud de marco de animación construido en método. Se asienta en el objeto ventana, pero se le puede llamar directamente. Al igual que este método de marco de animación de solicitud llamaremos a una función que le pasamos como argumento antes de volver a pintar el siguiente navegador Cuando lo pase animado el nombre de su función padre. Constantemente dibujará todas las partículas y las actualizará una y otra vez, creando la animación con el marco de animación de solicitud. El número de llamadas por lo general es de 60 fotogramas por segundo. lo general, intentará igualar la frecuencia de actualización de la pantalla en la mayoría de los navegadores modernos. También pausará automáticamente la animación cuando se ejecute en pestañas de fondo para mejorar rendimiento y la duración de la batería de la computadora. Cuando llamo animate y ejecuto mi código, obtenemos esto. Nuestros rectángulos negros se mueven y dejan senderos. Los senderos son los viejos marcos de animación. Si queremos ver solo el fotograma de animación actual, tenemos que eliminar canvas cada vez que actualicemos las posiciones de las partículas. Lo hago usando el método de rectángulo claro incorporado. Quiero borrar lienzo de Corin a las 00. Quiero despejar todo el lienzo. Tomo valores de aquí arriba. El ancho del área despejada será el ancho del lienzo. La altura será la altura de la lona. Ahora estamos animando. Enhorabuena, eres un codificador creativo. Acabas de construir un sistema de partículas de trabajo. Las partículas se mueven porque estamos agregando velocidad x y velocidad y a sus coordenadas actuales x e y. Si queremos que cada partícula se mueva a una velocidad diferente, puedo asignarles una velocidad aleatoria de un rango predefinido cuando se crean por primera vez aquí dentro del constructor de clase de partículas, puedo, por ejemplo, establecer sus velocidades para que sean un número aleatorio 0-10 Eso es muy rápido Si quieres que las partículas se muevan en todas las direcciones posibles, no solo a la derecha y hacia abajo, podemos empujar el rango de velocidad para comenzar desde números negativos. Esta línea significa un número aleatorio entre menos uno y más uno. Las partículas con valor menos se moverán a la izquierda. Las partículas con un valor más aquí se moverán a la derecha para la coordenada y vertical. Es lo mismo. Las partículas con un valor menos aquí se moverán hacia arriba. Las partículas con un valor más se moverán hacia abajo ya que a cada partícula se le asignará una velocidad aleatoria x y una velocidad y diferentes en el punto en que el constructor las cree por primera vez. Aquí la relación entre V, x e y le dará a cada partícula una dirección y velocidad de movimiento diferentes . Cada partícula tendrá un vector diferente. Quitemos el fondo azul y dejemos transparente el fondo del lienzo. ¿Cómo hago que mis partículas tomen la forma y el color de la imagen y cómo hacemos que recuerden esa forma y la recreen Si lo rompemos con ratón, estamos a punto de aprender eso ahora mismo. Esto concluye la primera parte del curso donde cubrimos los conceptos básicos del lienzo HTML. Aprendimos a hacer un sistema de partículas básico simple y a manejar, dibujar y centrar imágenes en lienzo. La segunda parte de este curso será más avanzada y aprenderemos más sobre manipulación de imágenes y física de partículas en profundidad. Enhorabuena, Si eres principiante y sigues hasta el final, lo estás haciendo genial. Si el código en las siguientes lecciones se siente más desafiante, no se preocupe. En esta siguiente parte, estamos entrando en territorio de codificación creativa avanzada. Pero creo que puedes hacerlo. Lo vamos a dar paso a paso, y haré todo lo posible para ayudarte a entender. Vamos. 27. Imágenes de partículas Lección 14: Esta es nuestra clase de partículas personalizadas. Su trabajo es crear un nuevo objeto de partículas cada vez que lo llamamos. Con la nueva palabra clave. Ahora mismo, nuestras partículas parecen pequeños cuadrados negros. De hecho quiero pixelar la imagen y hacer cada bloque de píxeles una partícula de un color específico Esa partícula también necesita recordar dónde se asienta en la imagen general porque queremos poder empujarlos y hacer otros trucos con ellos, y siempre queremos que encuentren el camino de regreso a su posición original para recrear la imagen Aquí en la línea 36, hemos inicializado el método simplemente empuja 100 partículas aleatorias en matriz de partículas Yo comento esto, necesitamos encontrar otra manera de convertir nuestra imagen en partículas. También hay que tener en cuenta que el distote x de la línea 33 y el distote y de línea 34 definen la posición horizontal y vertical de la imagen del pez que estamos dibujando sobre lienzo Puedo demostrarlo aumentando diste x en uno por cada fotograma de animación aquí. Lo que hará que los peces se muevan hacia la derecha en la dirección positiva. En eje x horizontal. Borro el código del método init y pongo draw image dentro El trabajo de este método inicializado es dibujar imagen en Canvas, analizarla y convertirla en partículas Entonces borramos esa imagen de Canvas por completo, porque tendremos nuestras partículas maquillando y recreando la propia imagen Hagámoslo paso a paso. Ya que estamos dibujando algo desde adentro en él, necesitamos asegurarnos de que espera un contexto de dibujo como argumento. Yo lo llamo en la línea 48 de aquí abajo. Y necesito asegurarme de que le paso esa variable CTX de contexto de la línea tres Se llama solo una vez en la primera carga de página Aquí, Animate limpiará inmediatamente el lienzo y eliminará la imagen por un momento Voy a comentar animate para evitar que se ejecute, centrémonos en el método inicializado Aquí está nuestra clase de partículas personalizada que crea nuestra partícula con estas propiedades. Después los dibuja como cuadrados negros y los hace moverse, actualizando sus posiciones. Usaremos esta clase de partículas y haremos que convierta cada píxel de la imagen en una sola partícula. Dentro de él método creo una variable auxiliar temporal llamada píxeles. Esta será una matriz que contendrá todas las posiciones y valores de color sobre cada píxel individual en Cannavas No podemos analizar la imagen misma. Tenemos que dibujar la imagen sobre lienzo como lo estamos haciendo aquí en la línea 37. Y luego usamos get image data para analizar nuestro elemento canvas con la imagen dibujada en él. Obtener método de datos de imagen analiza una porción específica del lienzo y devuelve sus datos de píxeles en forma de un objeto de datos de imagen especial. Se necesitan cuatro argumentos para especificar qué parte de canavas queremos analizar Quiero analizar todo el elemento lienzo desde la coordenada 00 hasta el ancho de canavasdizotwidth desde la línea 27 y la altura del lienzo alto desde la Lo importante a mencionar aquí es que obtener datos de imagen algunas medidas de seguridad incorporadas cuando ejecutamos el código localmente, como lo estamos haciendo en este proyecto en este momento. Si dibujamos un archivo de imagen y luego tratamos de analizar ese lienzo con esa imagen dibujada en él, obtendremos un error de consola que dice que lienzo estaba contaminado por datos de origen cruzado Incluso si pones el archivo de imagen en la misma carpeta local que tu archivo script, todavía se considerará origen cruzado. Por eso hicimos todo al principio, donde convertí el archivo de imagen en una cadena base 64. Haciendo eso, la imagen en sí se convierte en parte del archivo HML índice Podemos evitar esta advertencia de lona contaminada. Consolok píxeles para ver el objeto de datos de imagen en consola Puedo ver que obtener datos de imagen correctamente devueltos objeto de datos de imagen. Dentro de esta propiedad data, contiene una matriz masiva que representa los valores de color de cada píxel en todo el elemento canvas. Este es un tipo especial de matriz, lo que se llama UI NT eight clamped array Es una matriz de enteros de ocho bits sin asignar sujetos para organizar 0-255 Si antes trabajó con colores web, sabe que cada color se puede expresar mediante RGB y valor alfa llamado Lo usamos en CSS todo el tiempo. En este caso, rojo, verde y azul pueden ser cualquier valor 0-255 En CSS, opacidad alfa es un valor 0-1 aquí en esta matriz, alfa es también un rango 0-255 donde cero es transparente y 255 es completamente visible Esta matriz se organiza de una manera especial, donde cada cuatro elementos representan rojo, verde, azul y alfa de un píxel. Cuatro elementos en esta matriz son un píxel. Esto es importante para recordar. Acabo de abrir el inicio de la matriz y el lienzo se analiza por los datos de imagen del kit desde la esquina superior izquierda. Eso significa que este píxel de la esquina superior izquierda tiene cero rojo, cero verde, cero azul y cero opacidad Es un pixel transparente negro. segundo píxel también es cero rojo, cero verde, cero azul y cero opacidad Opacidad cero significa que estos píxeles son completamente transparentes Los únicos píxeles visibles en lienzo son los que componen nuestro dibujo de peces. Si busca a través de la matriz, especialmente en el medio, comenzará a ver los valores 0-255 aquí, donde cada valor representa rojo, verde, azul y alfa de cada píxel individual Aquí consigo todos los ceros porque una gran parte del lienzo es transparente Aquí no hay nada hasta que empecemos a dibujar los peces aquí abajo. Los píxeles en sí son, por supuesto, mucho más pequeños. Solo estoy usando este pick cuadrado rojo como ayuda visual. Imagina que el cuadrado rojo tiene un tamaño de uno por un píxel. 28. Imágenes de partículas Lección 15: Borro la consola. Dibujamos imagen en Canavas y analizamos sus datos de píxeles Ahora tenemos el color de cada pixel en la tienda Canavas. En esta variable de píxeles, quiero que la variable de píxeles apunte a la matriz directamente, no a todo el objeto de datos de imagen. Digo datos apuntando hacia esta matriz sin signo de ocho bits con sujeción Ahora voy a recorrer esa matriz fila por fila, de arriba a abajo. Si el valor alfa es mayor que cero, significa que esos son los píxeles que componen el pez, los no transparentes. Cuando encuentre un píxel no transparente, crearé un objeto de partícula para él usando nuestra clase de partículas. Cada vez que encontremos un píxel no transparente, crearemos una partícula que lo represente. Para recorrer algo fila por fila de arriba a abajo, podemos usar los llamados cuatro bucles anidados Anidado simplemente significa que es un bucle dentro de otro bucle. El bucle exterior de cuatro manejará la coordenada y vertical. Saltará fila por fila de arriba a abajo hasta llegar a la altura de la lona y luego nos detenemos. En realidad no quiero que cada fila tenga solo un píxel de altura. Quiero saltar por incrementos mayores que pixelarán nuestra imagen y hará que el efecto sea Realmente no podemos crear 40,000 partículas y aún así obtener una animación suave. Es posible hacer eso, pero eso requeriría optimizaciones avanzadas que no voy a estar cubriendo en esta clase Queremos disminuir un poco la resolución. En lugar de saltar un píxel cuando terminemos una fila, saltaremos por cierto valor. Yo llamo por ejemplo una brecha. No es realmente un hueco, sino más bien como tamaño de píxel de partícula individual que conformará nuestra imagen. Vamos a poder cambiarlo dinámicamente. Realmente no importa qué valor le dé. Ahora solo recuerda que mayor valor en Gap significa un mejor rendimiento, pero una imagen más pixelada, dije gap a, por ejemplo, cinco Cada vez que terminamos de pasar por una fila de píxeles, saltamos cinco píxeles hacia abajo y comenzamos a analizar esos píxeles. Cada vez que entramos en una nueva fila, iremos de izquierda a derecha hasta llegar al ancho del área del lienzo. Cada vez que saltamos de una posición a otra, saltamos por el valor de gap. Estos cuatro bucles anidados pueden ser un poco desafiantes de envolver tu cabeza al principio El bucle exterior es una posición vertical y saltando de fila a fila. El bucle interno mapea posiciones horizontales x que van de izquierda a derecha para cada fila. Digamos que empezamos aquí, y es cero. Entramos en el bucle interno y pasamos de x05 píxeles a la vez, paso a paso, hasta llegar al ancho, al final horizontalmente Salgamos del bucle interno. Entramos en el bucle exterior, e y aumenta en cinco, y estamos en otra fila. Entramos en el bucle interno. Nuevamente, vamos de izquierda a derecha, cinco píxeles a la vez. Cuando lleguemos al final, nuevamente, saldremos del bucle interno, entraremos en el bucle externo, y aumenta en cinco. Entramos en el bucle interno y pasamos por encima de posiciones x horizontales. Estos bucles seguirán adelante hasta que lleguemos al fondo del lienzo, altura del lienzo aquí. En ese punto, recorrimos todos los píxeles de la imagen Esta técnica es útil para muchos otros efectos creativos de codificación. Cuando necesitas recorrer una grilla, es bueno saberlo y se vuelve mucho más fácil cuando la usas. Más a menudo, estamos recorriendo todo el lienzo, fila por fila, saltos de cinco píxeles. Cada vez que saltamos a la siguiente celda en esta cuadrícula imaginaria, queremos verificar si hay algún color ahí o si actualmente estamos repasando el área transparente. Si encontramos algunos colores, creamos una partícula usando nuestra clase de partículas. Queremos que esa partícula recuerde su posición x e y, su posición en la imagen y su color. El reto es que a medida que recorremos esta matriz masiva de datos de píxeles devueltos por obtener datos de imagen y almacenados en píxeles variables, los índices de la matriz van de cero a decenas de miles. Necesitamos encontrar una manera de tomar esa serie lineal de números y obtener las coordenadas x e y de ella, y el color también. Empecemos por obtener el índice, el índice actual del píxel que estamos repasando actualmente en nuestra cuadrícula en esa matriz masiva de datos de píxeles. Esta fórmula es un poco avanzada, así que no te preocupes si no la obtienes al principio. El índice actual del píxel es y desde el bucle exterior, el número de filas a medida que avanzamos por la imagen fila por fila de arriba a abajo multiplicado por el ancho del lienzo que estamos analizando. Eso nos va a dar, por ejemplo, un bloque como este. Después agregamos los píxeles horizontales sobrantes, dependiendo de lo avanzado que estemos en la nueva fila más X. Por ejemplo, algo así Estamos a cinco píxeles horizontales en la nueva fila. Todo eso necesita estar entre paréntesis y multiplicado por cuatro porque sabemos que en la matriz sin signo de ocho bits sujeta devuelta por obtener datos de imagen, cada píxel está representado por cuatro posiciones en esa Cuatro valores para rojo, verde, azul y alfa. Queremos ese índice real de matriz medida que saltamos de píxel a píxel. Esta línea está aquí para asegurarnos de que sabemos en qué parte de la matriz de píxeles en qué índice nos encontramos actualmente. medida que recorremos los píxeles de la imagen, fila por fila, estamos mapeando una línea lineal de números a las coordenadas X e Y. Si aún no lo entiendes completamente, siéntete libre de volver a ver esta última parte, o no te preocupes demasiado por ella Poder entender la lógica así es para expertos en matemáticas, somos programadores creativos y desarrolladores de Javascript. Realmente no necesitas entender fórmulas avanzadas como esa, especialmente si eres principiante. Solo necesitas saber cuándo y cómo usarlos. Sabemos que cada píxel está representado por cuatro enteros en la matriz Sabemos que el valor de píxel rojo es la primera matriz de un píxel del índice actual de la línea 39 en esa matriz en la que estamos actualmente así. Sabemos que el valor verde para ese mismo píxel es el siguiente índice más uno. Luego hay un entero que representa el índice de valor azul más dos y tenemos índice de opacidad alfa más tres Después de eso, tenemos de nuevo, rojo, verde, azul y alfa para el siguiente píxel. Ahora que tengo rojo, verde, azul y alfa de ese píxel, puedo concatenerlo en una buena declaración de color RGB estándar antigua Puedo decir soporte de apertura RGB en comillas como esta, mas rojo de la linea 43 mas mas verde mas coma mas azul mas un corchete de cierre. El caso es que realmente no nos importan píxeles transparentes en toda esta área. No estamos creando partículas para los píxeles transparentes en esta área. Nos importan sólo los píxeles que componen nuestra imagen de pez angular. Los píxeles alrededor son blancos porque el cuerpo del sitio web detrás de él es blanco. El lienzo en sí es transparente en estas áreas. Es alfa, hay cero. Puedo decir si alfa de la línea 46 es más que cero, lo que significa que ese píxel en esa área no es transparente. Sólo entonces crear una partícula para esa posición. Creamos una partícula tomando la matriz de partículas de la línea 29 y llamando al método de empuje de matriz incorporada. Empujamos un nuevo objeto de partícula creado por nuestra clase de partículas personalizada desde línea siete dentro de la matriz. Nuestra clase de partículas en este momento solo sabe cómo esparcir aleatoriamente partículas cuadradas negras alrededor del lienzo. Tenemos que enseñarle cómo esperar estos nuevos datos de píxeles y organizarse correctamente para formar una imagen. Si sientes que voy un poco rápido ahora mismo, avísame. Voy a recapitular esta técnica de análisis de píxeles paso a paso. Una vez que tenemos toda la lógica en su lugar, casi estamos ahí. Dentro del método inicializado, acabamos de recorrer la imagen fila por fila, capturando las posiciones X e Y y valor RGB de cada partícula Necesito asegurarme de que el constructor de clase de partículas espere estos valores como este dentro los convierto en propiedades de clase. En lugar de establecer esta X el valor X pasado como argumento, crearé una nueva propiedad llamada origin X. Esta propiedad siempre recordará dónde se asienta esa partícula en la imagen general. Lo puse a X que se pasó como argumento. Esta X se calculó en nuestros bucles anidados for. Después analizamos el lienzo para origen de datos de píxeles Y será y eso se pasó como argumento. Envolveré estos valores en piso matemático para redondearlos hacia abajo solo para asegurarme de que no obtengamos ningún valor de subpíxel Y canvas no tiene que usar antialiasing para suavizar la imagen Es bueno para mathod piso todo lo que dibujamos en lienzo por razones de rendimiento Este color será color pasado como argumento desde aquí. Estará viniendo de ese color RGB que concatenamos hace un tiempo en la línea 50 para que cada partícula conserve el color original de la imagen Bien, ahora el constructor de clase de partículas en la línea ocho espera el efecto x, y y el color como argumentos. Vuelvo a bajar dentro de nuestra clase de efecto principal, cada vez que creo una nueva partícula, le paso esta palabra clave para representar todo este objeto de efecto. Como primer argumento, lo paso índice del bucle cuatro interno como posición horizontal, y desde el bucle cuatro externo como posición y vertical y color. Así es como analizas la imagen en busca datos de píxeles y la conviertes en un sistema de partículas. Si esto era un poco complicado para los principiantes, si sigues siguiendo, bien hecho, ahora es el momento de divertirte un poco con Animación. 29. Imágenes de partículas Lección 16: Solo para recapitular, el método inicializado se ejecutará solo una vez en la primera carga de la página Primero dibujamos nuestra imagen sobre lienzo, luego usamos obtener datos de imagen para analizar todo el elemento canvas. Para los datos de píxeles, esos datos de píxeles vienen en una matriz especial donde cada cuatro elementos representan un píxel. Son valores rojo, verde, azul y alfa. Lo ponemos en cuatro bucles anidados así. Para convertir una serie lineal de números, los índices de la matriz en coordenadas x e y. Usamos ancho y alto de la imagen para saber dónde se rompe cada fila y cada columna para mapearlas correctamente. A medida que saltamos de celda a celda en nuestra cuadrícula imaginaria de cinco por cinco píxeles sobre todo el lienzo, extraemos valores rojo, verde, azul y alfa si alfa es mayor que cero, si el píxel no es transparente, creamos una partícula en esa posición usando nuestra clase de partícula personalizada. Ahora dibujemos y animemos esto en él. El método se ejecutará solo una vez en la primera carga de la página. Vamos a efecto consoloc para ver si ahí tenemos todas las partículas de píxeles Puedo ver mi objeto de efecto aquí creado por nuestra clase de efecto personalizado. Desde la línea 28 en el interior veo matriz de partículas que definimos en la línea 32. Contiene 2,775 objetos de partículas. Este número dependerá de la imagen que estés usando, cuánto de la imagen es transparente, y también de la resolución a la que escaneaste la imagen. En nuestro caso, lo escaneamos a resolución cinco por cinco píxeles definidos en esta propiedad de gap. En la línea 38, puedo ver que cada partícula tiene referencia de color al objeto de efecto principal, las posiciones de origen X y origen Y, velocidad horizontal y vertical, y las posiciones actuales X e Y. Si ves indefinido en alguno de estos en tu proyecto, significa que hay un errata en algún lugar de tu código Tenemos que asegurarnos de que todas estas propiedades tengan valores para que el efecto funcione. Uncommen anima en la línea 76, lo que eliminará inmediatamente imagen del pez y creará un conjunto de Quiero que esas partículas comiencen a moverse a sus posiciones de origen x y origen y para recrear la imagen Antes de hacer eso, pongamos este punto x en x Eso se pasó como argumento. Este punto y juguete así. Sí, la forma del pez está ahí perfecta. Cada partícula también recuerda el color de la imagen. Sólo tenemos que usarlo. Vamos a poner el estilo de Phil a este color de punto así. Bonito. El pez se está rompiendo en pedazos debido a las propiedades VX y VY Pongo V x cero y VY a cero perfecto. Ahora ya sabes cómo recrear una imagen como un sistema de partículas Tengo esta propiedad de punto gap en la línea 39, que determina cuánto detalle queremos en la imagen. Cuanto menor sea el número, mayor será el rendimiento exigiendo este efecto. La brecha es de cinco píxeles y estoy dibujando bloques de partículas de diez por diez píxeles. Hay mucho solapamiento. Puedo configurarlo a cinco, o cuando haga cuatro habrá un píxel. Las brechas en el grado pueden hacerlo dinámico al decir este efecto Do gap. De esa manera, el tamaño de las partículas cambiará automáticamente a medida que cambiemos esta propiedad de espacio de puntos. Valor grande significa menor resolución. No use ningún punto decimal aquí. No queremos valores de subpíxeles por razones de rendimiento. Además, dibujar partículas como rectángulos es más eficiente en el rendimiento Yo hice un tutorial para toda la versión de este efecto antes, donde cada partícula era un círculo. Esta nueva versión con rectángulos será mucho más rápida cuando empecemos a animarlo y hacer que interactúe con Dibujar rectángulos es más rápido que dibujar círculos en lienzo Y cuando tienes 3,000 formas, 3,000 partículas o más, realmente puedes sentir la diferencia. Podemos hacer la brecha incluso dos o tres píxeles, lo que dará como resultado una imagen nítida. No recomiendo hacer un pixel. Eso te dará demasiadas partículas dependiendo del tamaño de la imagen, y correrá lento cuando la animemos Hay algunas técnicas de optimización de lienzo y algoritmos que podemos usar para hacer que incluso las partículas de un píxel se muevan sin problemas. Pero no voy a estar cubriendo eso en este curso. Puedo hacer que el tamaño de partícula siempre sea un píxel más pequeño que el valor de la brecha actual para obtener algo de espacio. Se puede jugar con los valores para ver qué pasa. Hasta el momento parece que acabamos de pixelar la imagen. Pero hay que tener en cuenta que cada bloque de píxeles es un objeto de partícula, puede darle física y comportamiento. Para algunos efectos realmente geniales, dije gap 23 pixeles. Por ahora, voy a consoloc matrices de partículas de la línea 33 diciendo efecto partículas array así Porque dije gap a tres pixeles obtenemos 7,557 partículas que conforman la imagen del pez 30. Imágenes de partículas Lección 17: Quiero que las partículas siempre traten de moverse a su posición original. Para que cuando los empujemos con el ratón o rompamos la imagen de alguna otra manera, las partículas siempre están siendo jaladas hacia sus posiciones originales. Quiero que la imagen siempre se vuelva a crear automáticamente cada vez que se rompa Escribiremos esa lógica dentro del método de actualización en la clase de partículas. Empecemos simples. Sin ninguna física, esta posición más equivale a la diferencia entre la posición de origen, que es la posición de las partículas en la imagen, y su posición horizontal actual. Y más es igual a z punto originy menos ty. Queremos que las partículas estén siempre conscientes de la diferencia entre su posición actual y su posición original en la imagen. Estamos llamando al método de actualización en la clase de efecto aquí dentro del bucle de animación en la línea 74. Dentro de ese método, estamos activando el método de actualización desde línea 23 en cada objeto de partícula individual Aquí en la línea 63, pongamos estos valores entre paréntesis y extendamos las partículas alrededor del lienzo. En la carga inicial de la página, esta x será método aleatorio entre cero y ancho de lienzo veces efecto punto. Con para ver realmente el movimiento, necesito asegurarme de que el paso individual por cuadro sea solo una pequeña fracción de la diferencia entre la exposición actual y la exposición original Así. Hago lo mismo para dist y. Establezco la posición vertical inicial en un valor aleatorio entre cero y la altura del punto del efecto dist, que es la altura del área de lienzo disponible. Hagamos una física muy sencilla. Yo lo llamaré, lo puse 0.2 y lo uso aquí y aquí. Al cambiar este valor, cambiamos la rapidez o la lentitud con la que se ensambla la imagen Podría ser interesante aleatorizar este valor y hacer que cada partícula se mueva a una velocidad diferente A lo mejor si quieres cámara lenta, asegúrate de que sea un número muy pequeño. Bueno, esto es bastante genial. Podemos divertirnos mucho con esta base de código. Ahora bien, ¿no es genial lo que puedes hacer con un solo guión de Elga Ni siquiera estamos usando ninguna biblioteca. Nosotros mismos escribimos toda esta lógica. Podemos jugar con este efecto de muchas maneras. Incluso el solo hecho de cambiar el inicio en la posición x e y nos dará algo diferente. Como cuando me senté comenzando x a cero o esparzco comenzando y a través de un área mucho más grande. También podemos hacer un simple efecto de encogimiento. Esto se vería diferente si la velocidad o flexibilización de cada partícula es aleatoria Hay muchas maneras en las que podemos jugar con esta base de código. También puedo extender x y hacer Y cero. Ahora solo me estoy divirtiendo con eso. 31. Imágenes de partículas Lección 18: Vamos a crear un botón en el que hicimos clic. Aleatorizaremos las posiciones X e Y de cada partícula y obtendremos una bonita animación de la imagen reensamblándose cada vez que se haga clic en el botón eso lo llamaré, por ejemplo, Warp, como un teletransporte de una película de ciencia ficción cuando la gente se rompe en partículas y se vuelve a ensamblar Cuando se ejecuta este método de Deformación, la coordenada x horizontal de cada partícula se aleatorizará entre cero y el ancho del efecto Y será un valor aleatorio entre cero y la altura del efecto. Así, también le voy a dar un valor diferente sólo para experimentar con él. Voy a la clase de efectos principales. Y lo mismo que hicimos con draw and update, creo un método warp. Cuando se activa, circulará a través de la matriz de partículas. Para cada objeto de partícula en la matriz, se ejecutará el método warp desde la línea 28. Vamos a indexar HTML si quieres que esa cadena de datos larga base 64 que contiene nuestra imagen esté en una línea. En el editor de código de Visual Studio puede seleccionar View word Wrap desde el panel de navegación superior. Aquí tenemos un diff con una clase de controles y en su interior hay un botón con un ID de botón Warp de vuelta en el script GS. Voy aquí abajo y vamos a manejar esa funcionalidad del botón Warp. Creo una variable constante, llamo Warp button y lo configuro igual a document get element by ID Warp button. Así. Después lo tomo y agrego oyente de eventos para un evento click En la función callback, tomo una instancia de efecto que definimos en la línea 35 e instanciado en Y llamo a su método warp público asociado desde la línea 71. Así, este método principal de Warp llamará Warp en cada partícula individual, aleatorizando las posiciones x e y y estableciendo como un valor diferente Ahora tus usuarios pueden activar esta animación escolar haciendo clic en el botón Deformar. Impresionante, hagamos que el botón sea un poco más agradable. Seguro que sabes cómo diseñar algo con CSS, y este no es un curso CSS, pero hagámoslo de todos modos. Tomo todos los botones de la página. Actualmente solo tenemos uno, Y configuré padding a 20 pixeles, tamaño de fuente a 30 pixeles, margen a diez pixeles. Relleno de diez píxeles y margen 20. A lo mejor abro otra ventana del navegador y voy a ir al sitio web de Google Fonts. Buscaré una fuente llamada Bangers for the school comic book art style Doy clic en este botón más para agregarlo a mi biblioteca. Después hago clic en Ver bibliotecas seleccionadas, y me da estas tres etiquetas de enlace. Solo puedo copiarlos y pegarlos aquí arriba en índice HTML, me aseguro de ponerlos antes mi archivo CSS de estilo personalizado para asegurarme de que esté disponible allí. Entonces todo lo que tengo que hacer es copiar esta regla CSS para la familia de fuentes y la aplico a los controles. No, bien. Tengo que aplicarlo a la etiqueta del botón en sí. Borremos esto. Perfecto 40 pixeles, tamaño de fuente, color texto blanco, color de fondo negro. Sólo para que sea interesante, al flotar, cambio el color Color del texto, negro, fondo blanco. Bonito. Demos una transición de 0.2 segundos. Bien, esto me gusta. Convertimos la imagen en partículas y agregamos un patrón de urdimbre que jugará una transición. Mostrará cómo nuestra imagen se vuelve a ensamblar automáticamente cuando se rompe Agreguemos más física e interactividad haciendo que las partículas individuales reaccionen al ratón 32. Imágenes de partículas Lección 19: Quiero que la clase de efecto principal esté siempre al tanto de la posición actual del cursor del mouse, creo una propiedad personalizada is mouse. Será un objeto con tres propiedades de radio. Inicialmente estableceré en 3,000 Definirá el área alrededor del cursor donde reaccionan las partículas al ratón. En realidad no serán 3 mil píxeles. Voy a explicar por qué el número es tan alto cuando lleguemos ahí, es por razones de rendimiento. posición X e Y del cursor del ratón estará indefinida al principio. constructor de clase se ejecuta una vez en el punto en que se crea una instancia de la clase llamando a la nueva palabra clave Podemos aprovechar eso y de hecho podemos agregar cualquier código aquí que queramos que se ejecute en el punto en que se cree la clase de efecto. Incluso puedo agregar oyente de eventos aquí así. Escucharemos el evento mousemove. Necesito asegurarme de que este oyente de eventos esté ligado a su alcance léxico actual Quiero que esté dentro del constructor de clase de efecto para poder anular las propiedades de mousex y mousey como incendios de eventos mousemove Para asegurarme de que la función de devolución de llamada en este oyente de eventos recuerde dónde dentro de qué objeto se definió por primera vez, puedo usar un método especial de enlace de script Java o cambiar la función de devolución de llamada en una función ES A veces también lo llamamos función flecha gorda. Una de las características especiales de las funciones de flecha es que vinculan automáticamente esta palabra clave al contexto de códigos circundantes. Siempre podrá ver esta propiedad domouse, que es exactamente lo que necesitamos aquí Necesitamos acceso al objeto de evento autogenerado, ya que esta función de flecha solo tendrá un argumento Incluso puedo quitar los soportes así. Siempre que se active el evento mousemove, tomo este punto mouse punto x de la línea 47 y lo configuro en evento x coordenada horizontal actual del cursor del También pondré esta cúpula doty de la línea 49 al evento y. así. Probemos si funciona por consologin mousex y mousey Porque puse ese oyente de eventos mousemove dentro del constructor de clase Se aplicará automáticamente cuando instanciemos la clase de efecto aquí en la línea 86 Guardar mis cambios, actualizar la ventana de mi navegador. Ahora cuando muevo el mouse sobre lienzo, puedo ver que la posición del mouse se actualiza y los valores actualizados se están guardando correctamente en nuestra propiedad de mouse de punto personalizada en vidrio de efecto. Perfecto. Eliminemos el consolog en la línea 88 También, éste en la línea 54. Es bueno borrar siempre consologs así. Por razones de rendimiento, estamos capturando las coordenadas x e y actuales del ratón. Aquí queremos que cada partícula siga comprobando qué tan lejos está del ratón. Si el ratón está lo suficientemente cerca, queremos que la partícula sea empujada por él. Escribiremos esa lógica dentro del método de actualización en la clase de partícula x. Distancia en el eje x horizontal entre ratón y esta partícula es efecto de punto mousettx de la línea 50 aquí menos st x dy Distancia entre ratón y partícula en el eje y vertical es este efecto de punto dom y menos disty Para calcular una distancia entre dos puntos, podemos usar el teorema pitagoriano . Funciona así. Esto es ratón, esto es una partícula. Creamos un triángulo rectángulo imaginario entre estos dos puntos. Esta es la distancia x horizontal. Ya lo calculamos en la línea 25. Este sitio es una distancia DY en el eje y vertical. Eso lo calculamos en la línea 26. Para obtener este sitio, que es la distancia real entre estos dos puntos, utilizamos el teorema de Ptagora para calcular la hipotensión, el lado más largo de un triángulo opuesto al fórmula del teorema de Pitagora es C es igual a raíz cuadrada a al cuadrado más b al cuadrado convertida en script Decimos a distancia es boca raíz cuadrada de disto dx veces stod x que es un cuadrado más así veces Didi cuadrado Eso nos da la distancia entre dos puntos, entre partícula y ratón. Elimino raíz cuadrada porque esta es una operación muy costosa de rendimiento y realmente no la necesitamos. Solo necesito ajustar el radio del mouse a un valor mayor si no estás usando la raíz cuadrada aquí. Por eso puse el radio del ratón en 3,000 aquí en la línea 51. Puedes ajustar el rango cuando veas lo grande que es cuando la animación va en un minuto. Quiero implementar algo de física. Quiero que las partículas sean empujadas más fuerte si están más cerca del ratón. Yo hago eso creando una propiedad help er llamada a la fuerza. Será un radio del ratón, el área alrededor del ratón donde las partículas reaccionan a él, dividido por la distancia actual entre el ratón y la partícula para hacer que la partícula se aleje del ratón en la dirección correcta. Necesito poner menos aquí. Veremos cómo funciona cuando tengamos alguna animación. Puedes intentar poner más y menos aquí y ver qué pasa. La fuerza a la que se empujan las partículas es igual a la relación entre el radio del área interactiva del ratón y la distancia actual de esa partícula desde el cursor del ratón Compruebo si la distancia es menor que el radio del ratón. Si es así, alejamos la partícula del ratón. Antes de hacer eso, estoy usando algunas propiedades de clase nuevas que no están definidas en el constructor. Vamos a definirlos primero. Dx, distancia de punto dy y fuerza didot. Todas estas propiedades serán cero al principio. También voy a crear otra propiedad que llamo por ejemplo, ángulo de punto. ángulo de punto determinará la dirección en la que se alejan las partículas cuando interactúen con Mouse aquí abajo calcularemos ese ángulo usando el matote a 102 construido en el método Javascript. Método Matote 8102 devuelve un valor numérico en luminosidad entre menos pi y más pi Sabemos que el círculo es de dos pi en resplandor. Este valor que matoteen dos devuelve representa el llamado ángulo theta entre un punto x e y dado y un eje x positivo como Lo importante a recordar es que este método Javascript incorporado espera un valor de la coordenada y primero y la coordenada x en segundo lugar. La diferencia entre la posición x Andy de la partícula y la posición x Andy del cursor del ratón representada por Diddy y dis punto x pasado el método 102 nos da un valor de ángulo Aumentaremos la velocidad horizontal, velocidad Vx x, por fuerza desde la línea 33 Eso depende de la relación entre radio del ratón y la distancia entre el ratón y partículas que hacen partículas que están más cerca siendo empujadas por una fuerza mayor para especificar en qué dirección están siendo empujadas. Yo paso este ángulo. Estamos calculando en la línea 3062, método más coseno. Este método mapeará ese ángulo que le pasamos en radianes como un valor entre menos uno y más uno Este valor representará el coseno del ángulo y hará que las partículas floten a lo largo de los bordes exteriores del círculo muy bien a medida que el ratón interactúa con ellas Estos métodos una lata dos y coseno y todo lo que tenga que ver con trigonometría es bastante difícil explicar si la ves por primera vez No creo que sea importante entenderlo completamente siempre y cuando sepas cómo usarlo y cómo conseguir el movimiento que deseas. Cuando pongamos en marcha la animación, voy a tocar estos valores para ver qué hace. La retroalimentación visual que obtenemos cuando va la animación podría hacer que sea más fácil de entender. Esto es duro, así que no te sientas mal si no seguiste toda esta lógica trigonométrica No afecta tu capacidad para ser un buen desarrollador de Javascript. Ahora actualizamos VX de la línea 16 contabilizando la fuerza del empuje y la dirección de ese empuje Haremos lo mismo para la velocidad vertical, pero esta vez usaremos método sine. Pasamos en el mismo ángulo. Método coseno y método seno trabajan juntos para mapear una posición a lo largo del radio de un círculo Ahora puedo usar VX y VY velocidad vertical y horizontal, posición x e y calculada aquí así Intentemos primero ver qué hace mientras las partículas ciertamente reaccionan al ratón. Pero algo anda mal. Voy a arreglar eso en un segundo. Para mejorar la física, también podemos aplicar fricción. Yo creo una propiedad llamada fricción. Lo puse a 0.95 multiplica V x por él aquí, haciendo que disminuya lentamente en su fuerza Por cada fotograma de animación, el movimiento es incorrecto. Pero aún así, creo que es interesante comprobar lo que está pasando. Puedo ver que hice un error tipográfico aquí en la línea 33. Se supone que es D x veces dx, dy veces dy. Así, el teorema de Pitagra. Ahora, las partículas se comportan como se esperaba, perfectas. Los estamos empujando para que vuelvan a la posición original. Tenemos que hacer tiempos iguales aquí. Si cambio como a 0.2 obtenemos un movimiento mucho más rápido. Cuanto menor sea el valor de la fricción, más fricción se aplicará. Aquí hay mucha matemática. No te concentres demasiado en eso. Este curso es principalmente sobre Java Script y dibujo en Canvas. Puedes usar estos fragmentos de código matemático para otros proyectos. Aunque todavía no entiendas completamente cómo funcionan las matemáticas, te animo a jugar con los valores cambiar menos signo de firma de intercambio, tratar de romperlo y ver cómo afecta al movimiento. Espero que quede más claro para ver qué está pasando en lo que sucede cuando aumento la fricción y aumento el radio, obtenemos este límite más gradual. Hay una versión extendida de este curso vinculada en la descripción a continuación, donde llevamos esto aún más lejos y creamos algunas transiciones especiales. Puedes comprobarlo si quieres. Espero que hayas encontrado algún valor hoy. Estoy aquí para que te ayudes a aprender script Java y descubrir todas las cosas increíbles que puedes hacer con él. ¿Crees que este fue un proyecto difícil con todos los algoritmos? ¿Qué tan difícil fue para ti? Dame un número en los comentarios. Uno es extremadamente fácil, diez es muy difícil, cinco es algo intermedio, me siento después. 33. Imágenes de partículas Lección 20: Cambiemos la imagen por otra cosa. Puedes usar tu propio archivo PNG con fondo transparente o puedes descargar la misma imagen que estoy usando en la sección Activos. Esta imagen es otro personaje de mi otro curso de Javascript donde exploramos un planeta alienígena y es extrañas formas de vida mecánicas. Podemos convertir la imagen en base 64 String con Java Script. Pero es más rápido usar un sitio web externo si quieres ver cómo convierto las imágenes dibujadas en Canvas a un dato como este sobre la marcha, dinámicamente parte del código base Javascript. Echa un vistazo a mi otro curso de codificación creativa sobre líneas, rotación y fractales Ahí, explico paso a paso cómo crear mi fractal procesal En efecto, lo mismo que hicimos antes. Yo Google PNG a base 64. Hay muchos sitios que pueden hacer esto. Solo asegúrate de que el código convertido comience con la imagen de dos puntos de datos. Si no toma esta casilla de verificación, copio la larga línea de código Voy al índice HTML y quiero reemplazarlo aquí en la línea 15. Es más fácil si habilito el ajuste de palabras En el código de Visual Studio, hago clic en Ver Word Rap. Quiero reemplazar todo este código en atributo fuente. Este código es toda la imagen. En el código de visual studio, solo puedo resaltar la porción al principio. Después me desplazo hacia abajo donde termina el código y para resaltar todo lo que hay en el medio, presiono y mantengo pulsada la tecla Mayús y dejo clic donde quiero que la selección termine así. Borré y pego en el nuevo código que copiamos del sitio web. Aquí vamos, intercambiamos la imagen y todo funciona increíble. Es muy divertido jugar con este efecto. Me parece muy relajante. Por alguna razón, ajusto la fricción en la línea 19, dije radio del ratón a 3,000 Por ejemplo, vuelta en el índice HTML, voy a ver el ajuste de palabras para apagarlo, es mejor tener la larga base 64 cadena de datos en una sola línea, lo contrario tenemos que desplazarnos mucho hacia abajo. Copio este botón de marcado para trabajo y le doy una idea de botón de bloque con texto que dice bloques en script GS Copio este bloque de código y lo ajusto para que apunte hacia ese nuevo botón de bloque. En el código de visual studio puedes seleccionar múltiples así resaltando un texto cada vez que mantengas presionado el comando en Mac y controlas en PC y presionas la letra D, seleccionarás otra ocurrencia de ese texto. Guardo una referencia al patrón de bloques, le adjunto el oyente de eventos y dentro llamo al método público de bloque de efecto Tenemos que crearlo. Me aseguro de que estoy dentro de la clase de efectos aquí abajo donde creamos Warp. Yo creo el método de bloques. Su trabajo será simplemente hacer un ciclo a través de la matriz de partículas desde línea 56 Por cada objeto de partícula en esa matriz, disparará método que también se llama Bloques. Tenemos que asegurarnos de que cada partícula individual tenga un método con ese nombre. Voy aquí arriba a la clase de partículas y aquí donde creamos el Método Warp. Antes de crear este nuevo método de bloques, dentro puedo hacer todo tipo de cosas diferentes para estropear las partículas porque sabemos que volverán a ensamblar en forma de imagen. Nuevamente, debido a la lógica dentro del método de actualización que escribimos antes, puedo, por ejemplo, dividir las partículas en dos grupos. Un grupo vendrá de la parte superior del lienzo, coordenada cero. La otra mitad de las partículas vendrá de la parte inferior del lienzo desde una coordenada vertical igual a la altura del lienzo. Puedo hacerlo usando el llamado operador ternario. Es el único operador Java Script con tres óperas. Este caso lo usaremos como una simple línea si la declaración L. La estructura es condición simple para evaluar, interrogación, algo que hacer si la comprobación evalúa el verdadero colon Algo más que hacer si evalúa lo falso. La condición a evaluar será verificar si método aleatorio es más de 0.5 Método aleatorio llamado por su cuenta, así, devolverá un valor aleatorio 0-1 Debería ser superior a 0.5 en aproximadamente 50% de los casos para esas partículas fijen su posición vertical a cero La parte superior para la otra mitad de las partículas, establece su posición vertical Y para afectar la altura. La parte inferior de la lona condición de operador ternario para comprobar si es cierto, hacer esto, de lo contrario hacer esto Ahora, cuando hago clic en Patrón de bloques, divide las partículas en dos grupos, procedentes de arriba y abajo Bien, puedo cambiar el valor en realidad en Warp será 0.2 en bloques. Podemos probar diferentes como esa manera cuando hacemos clic en diferentes botones, las partículas tienen diferente facilidad diferente velocidad, podemos cambiar cualquier propiedad de las partículas que queramos Aquí puedo, por ejemplo, hacerlos más grandes. Vamos a establecer el tamaño del rectángulo de partícula individual a diez píxeles. Interesante. El problema es que cuando hago clic en Deformar, ahora el tamaño de las partículas permanece en diez píxeles. Tengo que recordar cuando manipulo un nuevo método de valor en bloques, tengo que definirlo para el método Warp también, si no quiero que el tamaño sea el mismo Así. Ahora Warp tiene partículas pequeñas, los bloques nos dan grandes bloques de píxeles que vienen de arriba y abajo. 34. Imágenes de partículas Lección 21: Este siguiente efecto es realmente genial. En el índice HTML, creo un nuevo botón con un ID de botón ensamblar. Y el texto dice ensamblar en guión GS. Aquí abajo otra vez, creo una sección donde creo una variable para almacenar una referencia de Java Script a ese nuevo botón, y le doy un oyente de eventos dentro Llamamos a efecto ensamblar. Dentro de la clase Effect, crearé una versión de nivel superior método assemble que manejará todas las partículas, igual que lo hicimos con Warp y Blocks aquí dentro de la clase de partículas, necesito definir este nuevo método de ensamblaje y darle algo de lógica. En el interior establecemos x un número aleatorio entre cero y ancho del efecto. Y será un número aleatorio entre cero y la altura del efecto. Quiero que las partículas se esparzan aleatoriamente alrededor del área de lienzo disponible. Necesito definir facilidad y tamaño. Como también estamos cambiando estos valores en los botones debajo, hace lo mismo que warp. Quiero que se comporte de manera diferente cuando se está reensamblando la imagen Quiero que las partículas vuelvan a su posición original en la imagen, pero no todas a la vez, sino una por una. A una velocidad específica, tendremos que crear un interruptor que habilitará y deshabilitará el comportamiento de búsqueda de objetivos de cada partícula. Ahora mismo, las partículas siempre quieren volver a su posición de origen en la imagen. Necesito tener un interruptor que les impida hacer eso. Y crear un sistema de semáforos que diga parar y listo. Escribiré esa lógica que retrasará que las partículas vuelvan a su posición original. Y luego voy a recapitular todo el bucle lógico. No te preocupes demasiado si no entiendes completamente todo en la primera ronda. Vamos a escribirlo primero. Aquí abajo en la clase de efecto principal, creo una propiedad llamada este contador. Al principio, lo puse a cero. Esta contravariable irá aumentando lentamente. A medida que aumente, permitirá que cada vez más partículas vuelvan a su posición original en la imagen. Cada partícula esperará un cierto número de milisegundos antes de que comience moverse hacia atrás para ensamblar la imagen Ese retraso en milisegundos será igual a esta contravariable dentro del método master assemble, pongo contador a cero Esto es importante porque tendremos otra transición que utilice el mismo contador. Tenemos que asegurarnos de que el contador siempre cero cuando se hace clic en el botón ensamblar o cuando hacemos clic entre diferentes botones de transición Vamos a tener aquí, va a tener más sentido en un minuto. Cada vez que se activa el método de ensamblaje en cada partícula individual, aumentarán acumulativamente esa misma variable de contador individual llamando a ensamblar en cada objeto de partícula dentro de la matriz de partículas, cada partícula empujará el valor del contador más alto en uno Voy a crear un tiempo de espera establecido aquí. Java Script set timeout method llama a una función después un cierto número de melliseconds set timeout se sienta en el Igual que el marco de animación de solicitud. Podemos llamarlo directamente así. Se espera dos argumentos función para llamar y retrasar cuánto tiempo esperar hasta que lo llamemos como un retraso, voy a utilizar este efecto punto para contrarrestar el valor que aumenta en uno cada vez se llama a cada método de ensamblaje de partículas. De esa manera, cada partícula retrasará ligeramente la siguiente que venga después de ella. En cuanto a cada método dentro de la clase de efecto principal llama al método assemble en cada objeto de partícula uno por uno. La función a llamar después de ese aumento de retardo será una función de flecha porque estamos dentro de una clase, dentro de un objeto. Y necesito asegurarme de que esta palabra clave esté vinculada al contexto donde se define el tiempo de espera establecido Como dijimos antes, ES función de seis flechas se une sesgada a su alcance actual automáticamente De esa manera puedo usar este punto dentro de aquí y va a funcionar. Alternativamente, tendríamos que usar el método de enlace Java Script aquí. Usar la función flecha es una sintaxis más sencilla y hace lo mismo que dije, quiero crear un sistema de semáforo donde se diga a las partículas que se detengan e vayan. Lo haremos creando una propiedad auxiliar más llamada este punto activo. Cuando la partícula tiene un conjunto activo en true, se puede mover. Si active es false, partícula se congelará en su posición actual. Después del tiempo de espera establecido, el temporizador se apaga. Configuramos active a true aquí arriba en el constructor de clase de partículas, inicialmente establecemos active también en true. Dentro del método de actualización, tenemos código que reacciona el código del mouse que devuelve partícula a su posición original para ensamblar la imagen. Quiero que todo este código se ejecute solo si active flag está establecido en true. Aquí abajo cuando se presiona el botón ensamblar, se alternan las posiciones x e y de cada partícula, extendiéndolas por todo Establecimos velocidad y tamaño de flexibilización. En ese punto, a medida que las partículas se esparcen, ponemos esto activo en caídas, congelándolas todas en su lugar. Como el para cada método se ejecuta dentro de la clase de efecto principal, circula muy rápidamente a través de toda la matriz de partículas, desde el índice inicial hasta el índice final. Cada vez que este código se ejecuta para una nueva partícula, el contador aumenta ligeramente, aumentando este valor de retardo. Cada partícula de la matriz tendrá un valor de contador ligeramente mayor, lo que provocará que se llame a este tiempo de espera establecido con un aumento en el retraso Cuando el tiempo de espera establecido finalmente se activa, cada partícula se establecerá en true activa Y la declaración if que creamos dentro del método update en la línea 32 finalmente le permitirá volver a su posición original. Mientras que al mismo tiempo también permitirá interacciones con el ratón. Eso fue divertido porque el valor del temporizador es igual al retraso en milisegundos que cada partícula tiene que esperar antes de que se active aumento en el temporizador por un valor mayor aquí en realidad hará que el ensamblaje de partículas más lentas tengan que esperar más milisegundos antes de que puedan moverse La velocidad del montaje en sí también dependerá la imagen y de la resolución que tenga en esta propiedad de brecha. Porque si tu imagen está hecha de menos partículas que son de mayor tamaño, se ensamblará más rápido. También puedes ralentizarlo multiplicando el valor del contador por algo De esa manera también estás aumentando los milisegundos. Por lo tanto, está ralentizando el proceso de ensamblaje, Multiplicarlo por algo menos de uno lo acelerará Creo que esto es genial cómo las partículas esperan en su lugar hasta que esté ahí, se volvieron y luego saltan a posición para recrear la imagen También podemos jugar con las interacciones del ratón ya que la imagen se está ensamblando y seguirá funcionando, simplemente volverán a caer en su lugar cuando les permitamos. Esta es una base de código bastante sólida, creo. Siéntete libre de hacer tus propios experimentos con él. Un problema que tenemos aquí es que cuando hacemos clic en el botón Ensamblar, establecerá instantáneamente esa secuencia de tiempo de espera para todas las partículas Y si cambiamos y volvemos a esta transición de ensamble, si el tiempo de espera aún no se ha activado, la animación comenzará desde algún lugar en el medio También necesitamos despejar todos los tiempos de espera, todas las partículas. Cada vez que activamos el efecto ensamble que la imagen siempre comienza a ensamblar desde el principio. Una forma de despejar los tiempos de espera es capturarlos en una variable Creo una nueva variable llamada este tiempo de espera de punto. Inicialmente, lo configuré en undefined aquí abajo en la línea 68, donde creamos un nuevo tiempo de espera. Lo establecemos igual a este tiempo de espera de punto. En realidad se activará como lo hacía antes. Ajustarlo igual a una variable como esta no tendrá ningún efecto sobre cómo se activa el tiempo de espera Eso, sin embargo, nos da una manera fácil despejarla cuando se llama ensamble. Primero, quiero borrar el tiempo de espera si hay un método activo de tiempo de espera claro en Java, cancela un tiempo de espera que se estableció previamente Al llamar a set timeout, espera un argumento que será un identificador del tiempo de espera que queremos cancelar Set timeout devuelve un ID cuando se llama, pero lo tenemos en una variable, así que simplemente puedo pasarlo este tiempo de espera así Y va a funcionar aquí. En realidad no estoy seguro de por qué sigue yendo desde el medio. Tiene algo que ver con que este número sea demasiado pequeño porque cuando haga esto, se restablecerá correctamente. Funciona con números mayores. Cuando entro en demasiados puntos decimales, se ensambla desde el medio Creo que lo es, porque el número que estamos pasando como retraso de milisegundos es demasiado pequeño para los índices iniciales en la matriz así, funciona muy bien Tal vez sea mejor ajustar la velocidad de ensamblaje controlando por cuánto aumenta el contador aquí en los experimentos de la línea 68. 35. Imágenes de partículas Lección 22: Vamos a crear un efecto de transición más. Yo lo llamo impresión de partículas porque me recuerda a la impresora de tres D. Creando algo capa por capa, fila por fila. Creo otro botón con un ID de botón de impresión de partículas y texto que dice impresión de partículas. Como es habitual, traemos el botón al proyecto. Aquí abajo en esta área de script, le damos un oyente de eventos para evento click y llamaremos método de impresión de partículas Creamos método de impresión de partículas aquí abajo , igual que ensamblar. También necesitará contador para ser reiniciado de nuevo a cero. Entonces circulará sobre toda la matriz de partículas de principio a fin. Se activará el método de impresión de partículas, que vamos a definir. Ahora lo defino aquí arriba y va a funcionar de manera muy similar al método de ensamblar. Esta vez quiero que la coordenada x inicial esté exactamente en el centro del área del lienzo. Este efecto con tiempos 0.5 Ahora todas las partículas provienen de esta sola línea en el medio. Si dijera la coordenada y inicial a la mitad del lienzo verticalmente, todas las partículas serán aplastadas en un solo punto Creamos una singularidad de píxeles. A partir de ahí, la imagen se ensamblará como canava, agujero negro inverso, escupiendo partículas y disminuyendo la entropía partículas y Creo que esto se ve muy bien. Cuál es la transición de tus bloques Warp favoritos ensamblar o imprimir partículas. Deja un comentario para hacérmelo saber. Espero que hayas encontrado algún valor y hayas aprendido algo nuevo. Echa un vistazo a mis otras clases si quieres explorar más codificación creativa o dos desarrollo de juegos D con vanilla Java sq, ver más tarde.