Transcripciones
1. Introducción: hola y bienvenida a un maestro de grasa Belikov. Y hoy te estaré enseñando a crear arte generado usando una técnica que involucra comportamiento
emergente. Una vez que aprendas esta técnica, podrás crear una amplia variedad de animaciones e imágenes fijas que se ven muy intrincadas y hermosas. Por ahora, estaremos creando dos piezas animadas fuera del arte. Este es el 1er 1 Parece estar tan lleno de vida, ¿no? Pero crear esto va a tomar tan solo unos minutos y algún código muy sencillo. Está bien. Y esta es la segunda pieza del arte emergente que estaremos creando hoy. Podría parecer más complejo que el 1er 1 pero les aseguro que eso no es cierto. Podremos crear esto también. En un tiempo
muy, muy corto. No necesitarás ninguna herramienta o conocimiento especial para esta clase. Estaremos escribiendo solo código javascript, por lo que solo necesitarás un Broza. Nos sumergimos justo en el código en el siguiente video. Entonces te veré allí
2. Crear arte emergente animado: Hola y bienvenidos de nuevo. Estaremos usando pluma de abrigo para escribir todo nuestro código. Entonces ve a la corte ben dot io y crea un nuevo pin. No estaremos escribiendo ningún HTML r C s s ahora, por lo que puedes minimizar estos paneles. A continuación, estaremos usando una biblioteca llamada p five dot Js para dibujar en nuestro lienzo. No tienes que usarlo, pero realmente simplifica tu cancha y te ayuda a enfocarte más en tus algoritmos para agregarla. Ve a la configuración, luego JavaScript y aquí, como para p cinco largesse. Selecciona la primera opción y ahora puedes cerrar este Que sean cinco DJs. Solo necesitarás funciones para empezar a secarse. A la primera función se le llama set up y a la segunda función se le llama Draw. El conjunto de función se llama sólo una vez, pero la función de sorteo se llama una y otra vez alrededor de 60 veces por segundo. Esto significa que cualquier cosa que dibuje dentro de esta función puede convertirse en una animación. Está bien. En primer lugar, vamos a crear un Gammas dentro de la función de configuración. Queríamos ser un cuadrado, así que vamos a ponerlo tamaño 2 400 por 400. Y entonces vamos a darle un trasfondo. Se puede pasar cualquier valor RGB a la disfunción. Si le pasas un solo valor, sin embargo, se
convierte en un gris apagado compartido. Entonces cero es negro y 2 55 es blanco. Cualquier cosa en el medio estará de acuerdo. Ahora también es un buen momento para establecer los valores de trazo y relleno para nuestro lienzo. Voy a decir que el color del trazo es un negro semitransparente. Como habrías adivinado, el segundo parámetro aquí especifica la transparencia en Daz para el color de relleno. Deja que sea una sensación negra ligeramente menos transparente. Libre conservó estos valores. Si estás bajo la corte ahora, puedes ver el lienzo ahora por crear gráficos basados en el comportamiento emergente, necesitarás mucho de elementos simples que puedan moverse y chocar entre sí. Podrás llamarles partículas, criaturas de Boyd o cualquier otra cosa que quieras. Simplemente les llamo partículas. Entonces digamos por ahora tenemos partículas AH 100. El almacén, todas las partículas. Usemos una matriz. Cada partícula puede tener un tamaño, así que digamos que es 40 de nuevo. Eres libre de cambiar los valores de estas variables. De hecho, así es como modificas tu generar sobre. Muy bien ahora, vamos a escribir una función para realmente crear una partícula para mantener las cosas ordenadas. Digamos que nuestra partícula es un objeto. Va a tener algunos campos. El 1er 1 va a ser su posición. Obviamente, una posición sobre nuestros lienzos conformada por una coordenada X y de coordino para almacenar compré los valores. Juntos, podemos usar un vector. Por ahora. Asignemos una posición aleatoria a nuestra partícula, por lo que tendremos que utilizar la función aleatoria para la coordenada X necesitará un valor aleatorio entre cero y el ancho del lienzo, por lo que solo se multiplicó pero se escogió de manera similar para la Y. Coordinar, Simplemente multiplica un número aleatorio con la altura del lienzo. A continuación, tendremos que especificar la dirección en la que se mueve nuestra partícula. Esta dirección a se conformará con una X,
confiada y de yo confiada, así que crea otro vencedor y establece su valor en algunos números aleatorios. En otras palabras, dale una dirección aleatoria. Y ahora agreguemos unos comportamientos muy simples a nuestras partículas. Eso haremos dentro de una función llamada actualización. De acuerdo, El primer comportamiento va a ser el movimiento en línea recta. Es decir, la partícula siempre debe estar moviéndose en la dirección que se le asigna. Para implementar eso, todo lo que necesitamos hacer es agregar el vector de dirección al vector de posición. Ahora bien, si la partícula sigue moviéndose en una dirección, tarde o
temprano saldrá fuera del lienzo para manejar tal situación. Añadamos otro comportamiento. Digamos que si la partícula se mueve fuera del lienzo, simplemente salta de nuevo al centro del lienzo. Para ello, debemos comprobar si es la coordenada X es mayor que la palabra del lienzo, nuestra Lesa que cero. Si esto es cierto, establecemos la coordenada X. Llévala por dos. No es más que el centro horizontal fuera de nuestro lienzo. De igual manera, si la coordenada por es mayor que la altura del lienzo son menores que cero, reajustamos la altura del dedo por dos, que es el centro vertical fuera de nuestro lienzo. La función de actualización ahora está completa en nuestra partícula a está lista, así que sólo vamos a devolverla desde aquí. Ahora es el momento de crear 100 partículas. Podemos hacer eso dentro de la función de configuración, así que vamos a la derecha. Ah, Farlow Pia. Y dentro de eso podemos empujar nuevas partículas dentro de las partículas. Harry. Muy bien, ahora dibujamos las partículas. Entonces dentro de la función de dibujo, escribamos otro para el dedo del pie del bucle iterar sobre todas las partículas aquí, usemos un círculo para representar una partícula. Para dibujar un círculo en p cinco puentes, debe
utilizar la función Elipse más allá de las coordenadas X e Y de la partícula a la función y también pasó el tamaño de partícula a ella. Tenga en cuenta que este será el diámetro fuera del círculo, no el radio, y para mover su partícula llamada la función de actualización. En este punto, si estás bajo corte, verás algo como esto, no exactamente lo que esperábamos, ¿no? Esto está sucediendo porque los círculos se están dibujando continuamente, cada fotograma, y se están sobrevalorando a sí mismos y entre sí para arreglar esto. Basta con despejar el lienzo cada vez que dibujamos. Podemos hacer eso llamando nuevamente a la función de fondo. Esta vez, lo pondré blanco Dedo erudito. Y ahora, como se puede ver, el movimiento de los círculos se ve bien. Es hora de agregar un comportamiento un poco más complejo a nuestras partículas. Este comportamiento les permitirá chocar entre sí y responder adecuadamente. Por lo tanto, crea una nueva función llamada colisiones de cheques. En su interior, debemos recorrer todas las partículas y tomar, caso, para estar colisionando. Por lo que necesitaremos dos anidados para bucles. Una partícula no puede chocar consigo misma, así que agreguemos una condición para tomar para eso. De acuerdo, ahora es muy fácil de llevar. Si dos partículas circulares idénticas están colisionando entre sí, todo lo que necesita hacer es comprobar si la distancia entre sus centros es menor de lo que son iguales a su radio. Para calcular la distancia, puede utilizar su función de distancia. Debes pasar las posiciones de ambas partículas a la disfunción. Muy bien ahora, si esta distancia es menor que el tamaño de partícula, significa que tenemos una colisión. ¿ Cómo manejamos la colisión? Digamos que simplemente cambiamos las direcciones de ambas partículas, pero en lugar de asignarles ah, toda nueva dirección aleatoria a ellas. Simplemente rotemos aleatoriamente la dirección. Por lo tanto, llame a la función de rotación en el vencedor de dirección de la primera partícula y le pasó un valor
aleatorio. También, haz eso. Hacer la segunda partícula. De acuerdo, esto es lo suficientemente bueno. Por ahora, llamemos a la función de colisiones tic dentro de la función de dibujo y veamos cómo
se comportan las partículas . Muy interesante. Pero parece que todas las partículas están como congeladas y no son capaces de moverse. Esto se debe a que no estamos dando a las partículas el tiempo suficiente para alejarse el uno del otro. Para solucionar esto, agreguemos algo así como un contador a cada partícula y dijimos su valor a cero por defecto . Ahora, digamos que después de una colisión, no
queremos molestar a la partícula durante algún tiempo. De manera más específica, digamos que no queremos molestar a la partícula para algunos ciclos de sorteo de números fuera. Para especificar este número, vamos a utilizar una variable llamada Contador Max. Voy a establecer su valor en 1 50 Esto significa que después de una colisión, la partícula podrá moverse libremente por 1 50 llamadas de drogas para hacer cumplir este comportamiento Dentro de las religiones de chequeo Función dijo el valor de la propiedad de contador fuera tanto del partículas colisionantes hacer contador Max. Ahora simplemente podemos decir que el comportamiento de colisión fuera de una partícula debe ejecutarse sólo si es contador es cero, así que agrega, tal si condiciones a ambas partículas. Si el primer contador de partículas es cero, ejecute estas dos líneas, y si el segundo contador de partículas es cero, ejecute estas dos líneas. Por último, necesitamos despenalizar el contador. Podemos hacer eso dentro de la función de actualización de la partícula. Entonces si el contador es mayor que cero, sólo discriminado por uno cada vez que se actualiza. En este punto, si corrió nuestra cancha, las partículas son capaces de moverse libremente. Está bien. Ahora bien, no
hay razón para que el tamaño de los círculos deba ser igual al tamaño de partícula. Cambiemos el radio aquí en la función Elipse a algo mucho más pequeño. El momento se ve mucho más claro ahora. A continuación, intentemos algo diferente. Siempre que choquen dos partículas, trazar una línea entre ellas. Hacerlo es fácil, pero realmente no podemos trazar una línea dentro. El cheque de la función colisiones. Entonces, siempre que ocurra una colisión, almacenemos las posiciones fuera de las partículas colisionantes dentro de una matriz. Voy a llamar a las líneas del IRA. Aquí. Dentro de la función de religiones tecnológicas comienza Simplemente agregue las posiciones fuera tanto de las partículas
al área, por lo que cada elemento, un diario en sí, será una matriz que contiene dos elementos que no son más que las posiciones fuera ambas de partículas. Ahora debes asegurarte de que esta área de líneas esté vacía cada vez que se llame a una
función de colisiones . De lo contrario crecerá muy grande. Por lo que restablecerlo son el inicio de la función. De acuerdo, vuelta dentro de la función de sorteo. Todo lo que debemos hacer ahora es bucle a través de las líneas son a y dibujar las líneas, así que crea un bucle for dentro. Utilizó la función de línea para caer. El 1er 2 argumentos a la función son las coordenadas X e Y de la primera partícula. Y los dos argumentos siguientes son las coordenadas X e Y de la segunda partícula. Y ahí tienes. Ya tenemos una animación interesante. Ahora eres libre de cambiar los comportamientos de las partículas. No obstante, puedes modificar esta animación cambiando estas variables globales a, por
ejemplo, ejemplo, si cambié el tamaño de partícula a algo mucho más grande, digamos, 80 obtengo una animación muy diferente. También puedes reducir aún más el tamaño de los círculos para darle una sensación diferente a la animación. También podría aumentar el número de partículas en sí, pero no que esto pueda tener un efecto drástico en el rendimiento. Entonces como se puede ver, pero sólo un montón de comportamientos simples asignados a un gran número de partículas, hemos logrado crear una animación que se ve a la vez interesante y tipo de hermosa Do .
3. Agrega trazos: bienvenido de nuevo a la lección final de esta clase. Ahora no vamos a estar agregando ningún comportamiento extra a nuestras partículas. En cambio, simplemente
van a cambiar cómo las usamos para dibujar nuestras líneas. En primer lugar, digamos que el color de la línea que se dibuja entre do partículas colisionantes
depende de la distancia entre las partículas. Entonces aquí, junto con las posiciones, vamos a incluir la distancia a en la matriz. Todo en este momento necesitamos convertir la distancia en un valor que esté entre cero y 2 55 Esto se debe a que los valores RGB off colors deben estar entre cero y 2 55 solamente. Para ello, podemos utilizar la función de mapa. El primer argumento a esta función es el valor que desea mapear tan allá de la distancia , que es el tercer elemento del área. Los siguientes dos argumentos a la disfunción definieron su rango fuera de la distancia. Ahora esto puede, por
supuesto, sólo estar entre cero y el tamaño de partícula en sí. En los dos siguientes argumentos se definió el rango de los colores así dicen cero y 2 55 aquí. No, si aplicamos este color al trazo de la línea y ejecutamos vz. Esto No está mal. Ocultemos ahora los puntos suspensivos por completo. De hecho, no los
dibujemos en absoluto. Entonces voy a borrar esta línea, ni que nuestras líneas sean muy ligeras para hacerlas parecer más prominentes. Cambiemos el color de fondo aquí. Hacer negro. De acuerdo, ahora veamos qué pasa. Si movemos esta llamada a la función de fondo, haga el metal de configuración en su lugar. Esto significa que estaremos dibujando repetidamente sobre nuestro lienzo sin despejarlo. Esto es mucho mejor ahora. Esta en sí es una buena animación para hacerlo aún mejor. Añadamos algo de valor Alfa a nuestro color de trazo. Que sea un valor muy pequeño, digamos, cinco. Como se puede ver, esto ha tenido un efecto muy profundo en el look off de la animación. A mí me gusta mucho más porque las líneas son tenor. De hecho, esto se ve como Harry, ¿no? Podrás volver a jugar con estas variables globales para cambiar aún más la animación. Veamos qué pasa si tenemos muy pocas partículas digamos, Entonces otra vez, una animación muy diferente pero muy interesante. Vale la pena mencionar que todas estas animaciones pueden seguir para siempre y aún así parecer interesantes en cualquier momento. Si quieres guardar el arte, simplemente
puedes hacer clic derecho e imagen percibida ya que esto guardará tu arte como una
imagen fija en forma de archivo PNG. Está bien, eso es todo por ahora. Señoras y señores, soy maestro de hot available, y les agradezco por ver estos videos.
Ashraff Hathibelagal, App Developer
