Aprende codificación creativa con JavaScript de vainilla

1. Introducción y perspectivas de proyectos: Partida general, el artista crea un proceso que luego se pone en marcha con algún grado de autonomía, resultando en una obra de arte terminada. Me gusta pensar en ello como una colaboración de máquina humana. Hoy somos los artistas y HTML, CSS, y JavaScript es la máquina. Haz tu obra de arte única conmigo y practica tus habilidades de desarrollo web front end en el proceso. En esta clase, pasaremos de dibujar una sola línea a esto y esto, y esto. No quiero que sólo copie mi código. Quiero que entiendas realmente lo que está pasando. Por lo que hoy escribiremos todo completamente desde cero, línea por línea usando solo plain vanilla JavaScript know frameworks y sin bibliotecas. Voy a explicar cada línea de código en detalle a medida que avanzamos. Esta clase no es para principiantes completos, pero si conoces al menos los conceptos básicos de HTML, CSS, y JavaScript, ven únete a mí y déjame mostrarte cómo hacer que la máquina nos ayude a crear algo único y hermoso. Diviértete. 2. Configuración de proyectos: Todo lo que necesitamos hoy para empezar a trabajar es un editor de código y un navegador de Internet. Todo nuestro proyecto serán estos tres archivos, estilo HTML index, CSS, y script.js. Creo una página web básica. Doy a mi proyecto algún título y enlazo archivo CSS estilo en cabeza de documento. Dentro del cuerpo de mi página web, creo un elemento de lienzo con un ID de cannabis. Cannabis. Hay un elemento HTML especial que nos permite dibujar en él con oro. Podemos usarlo para dibujar y animar formas, imágenes. Podemos crear cualquier cosa desde animaciones web simples hasta muy complejas en HTML canvas elemento está bien soportado en todos los navegadores modernos y el aprendizaje lo básico desbloqueará tantas posibilidades con visuales y animación. En mi opinión, cada desarrollador web front-end debe conocer al menos los conceptos básicos de Canvas. Déjame mostrarte lo fácil que es dibujar algo en él antes de empezar a dibujar antes de empezar a dibujar nuestras formas interactivas donde el JavaScript, tenemos que vincular el archivo script.js aquí abajo en el estilo CSS. Tomo mi elemento de masa usando su ID como selector, y le doy un fondo azul solo para que pueda ver dónde está. Se pueden ver algunos márgenes aquí, pesar de que no declaré ninguno. Eso se debe a que cada navegador tiene unos márgenes y rellenos predeterminados que se aplican automáticamente a cada elemento para asegurarse de que nuestro proyecto se vea igual en todos los navegadores, uso selector de asterisco para apuntar a todos los elementos en mi página. Y dije margen en todo a 0, relleno a 0 también. Este es el llamado restablecimiento global. También podemos usar la propiedad CSS más reciente llamada box-size y configurarla en border-box. Esto hará que los elementos de borde y brotación se incluyan en su anchura y altura totales. Esta es una de mis configuraciones favoritas porque lo hace genial y diseños mucho más fáciles. Supongo, tipo de posición absoluta. Y dije que es posición superior 250% y es posición izquierda también 250%. Entonces utilizo transform translate menos 50% horizontalmente y menos 50% verticalmente. Así es como se puede centrar elemento absolutamente posicionado exactamente en el medio de la página que doy son tipo de tiene un borde, cinco píxeles, bloque sólido, y elimino fondo azul. En mi archivo JavaScript. Empecé creando un oyente de eventos para el evento de carga. Este evento se llama en el objeto de ventana incorporado, que representa la ventana del navegador. evento de carga se activa cuando toda la página se ha cargado con todos sus elementos HTML, así como todos los demás recursos independientes como hojas de estilo e imágenes dentro del oyente de eventos. Una vez que la página ha sido completamente cargada, configuré mi Canvas. Es fácil. Yo creo una variable constante. Yo llamo, por ejemplo US, y lo puse igual a documentar dot getElementById y lo paso ID, di mi cannabis, cannabis uno para poner esta variable hacia el elemento correcto. También puedes usar documento dot querySelector aquí. Ten en cuenta que obtienen elemento por ID es un poco más rápido y más eficiente porque solo tiene que buscar ideas. No tiene que revisar todos los posibles selectores en la página para encontrar el elemento correcto como QuerySelector tiene que hacer. La diferencia no se notará a menos que tengas un proyecto masivo. Creo una variable personalizada adicional. Llamo, por ejemplo, acceso directo a CDX para contexto, y lo configuro en Canvas desde la línea dos punto getContext. El contexto es un método incorporado especial que solo se puede llamar en variable que contenga una referencia al tipo de elemento Us. Podemos pasarlo 2D o WebGL. Hoy trabajaremos con dibujos 2D. Ahora si tu consola registra esta variable CTX, verás que tiene una instancia de una API 2D Canvas incorporada con todas sus propiedades y un método de dibujo. Siempre que quisiéramos dibujar algo sobre nosotros a partir de ahora, podemos usar ctx dot y llamar a cualquiera de estos métodos para dibujar algo o cambiar valores de las propiedades de Canadá como ancho de línea, relleno, color y así on. Te voy a mostrar, dije ancho de lienzo a 600 pixeles y tipo de como altura a 600 pixeles también. 3. Clases de fractales y JavaScript: Lo que dibujaremos hoy se llama fractal. fractales son patrones infinitamente complejos que son auto-similares a través de diferentes escalas. Son creados por repetido un proceso simple una y otra vez en un bucle de retroalimentación en curso, digamos que trazo una línea, giro el cannabis, lo escala hacia abajo y repitió el proceso de dibujar una línea. Hago esto una y otra vez, dibujando una línea, girando, escalando y dibujando otra vez la misma línea. Ese sería un proceso para crear una forma fractal muy simple. Puedo escribir mi código de la llamada forma procesal, lo que simplemente significa que estamos declarando variables y funciones línea por línea a medida que creamos nuestro proyecto, Es la forma más básica de escribir código. Hoy usaré programación orientada a objetos para escribir la cotización. Eso significa que frotaré variables y funciones en objetos. Voy a crear una clase. Las clases son plantillas para crear objetos. La clase Javascript contiene un conjunto de instrucciones en forma de valores y métodos que servirán como un blueprint. Y cada vez que llame a esta clase usando la nueva palabra clave, creará una nueva instancia de objeto fractal basada en ese blueprint que definimos, también necesitaré una clase de partícula personalizada y una clase más I llamar, por ejemplo, la lluvia. Hoy quise hacer este efecto de lluvia fractal. Si alguna vez dibujaste alguna de estas formas más complejas antes, sabrás que si quieres tus fractales sean detallados, a veces puede tardar un par de milisegundos en renderizar con Canvas, solemos animar las cosas dibujándolas primero, luego actualizamos sus coordenadas para moverlas. Eliminamos el dibujo más antiguo y dibujamos lo mismo, pero con coordenadas actualizadas. Lo hacemos muy rápido una y otra vez, lo que nos da una ilusión de movimiento. Para que ese movimiento fuera suave, necesitábamos correr alrededor de 60 fotogramas por segundo. Dado que el efecto días se hará de formas complejas, no podemos simplemente eliminar, recalcular y volver a dibujar estos fractales 60 veces por segundo. No creo que ni siquiera las computadoras más fuertes puedan hacer eso, pero aún tendremos animación más suave porque lo haremos de manera diferente. Usaremos la clase fractal para rendernos una forma matemática compleja. Entonces tomaremos esa forma y usaremos JavaScript para convertirla en píxeles. Entonces usaremos clase particular para asignar estos píxeles como una forma de partícula, su clase particular de visión, también trataremos con el movimiento. Podemos hacer partículas flotantes, lloviendo o girando si queremos. Clase particular contendrá un plan para definir propiedades y comportamientos de partículas individuales. Y clase de lluvia manejará todo el efecto. Definirá cosas como número de partículas y así sucesivamente. 4. Dibujar formas básicas: Debido a que elegimos usar programación orientada a objetos, estamos dividiendo nuestro código en clases como esta porque hace que el código sea más modular y más fácil de navegar. Y este es un buen ejemplo de uno de los cuatro principios de programación orientada a objetos llamado encapsulación. Encapsulación significa que estamos agrupando datos y métodos que operan sobre esos datos en objetos. Hoy vamos a encapsular nuestros datos en tres clases, fractal, partícula y la lluvia. Constructor es un tipo especial de método en el constructor de clase JavaScript contiene un blueprint, y cuando llamamos a la clase usando el nuevo constructor de palabras clave, crearemos un nuevo objeto JavaScript en blanco, y asignará que un objeto en blanco valores y propiedades basados en el blueprint interior. Los datos en constructor se pueden generar dentro del método en sí, y también puede venir desde el exterior. Se puede pasar al constructor como argumento cuando lo llamemos usando la nueva palabra clave, te mostraré en un minuto. constructor de clase fractal esperará que se pasen dos argumentos desde el exterior, uno para nosotros con y otro para la altura dentro del constructor. Conversión estos argumentos en propiedades de clase. De esa manera se convierten en parte del plano. Fraccional necesitará acceso a nosotros con y tipo de como altura para que sepa dónde están los límites de nosotros. Podemos usar esto para asegurarnos de que el fractal esté centrado y no se ramifique fuera del área del lienzo. Cualquier objeto creado por clase fractal también tendrá acceso al disgusto en un método que llamo, por ejemplo, la función de dibujo que se sienta en un objeto se denomina método. El trabajo de este método de dibujo será tomar algunos valores del constructor y dibujar una forma fractal basada en estos valores, esperará un argumento que llamo, por ejemplo, contextos. Este argumento se le pasará más adelante cuando lo llamemos. Y especificará en qué elemento queríamos aprovechar. Podemos dibujar cualquier forma sobre nosotros. Queremos dibujar una línea es fácil. Dijimos antes que la variable CTX en línea o tres contiene una instancia de nosotros incorporado una API 2D. Entonces si quisiera llamar a alguno de estos métodos de dibujo incorporados, los llamo desde ahí, a esta variable de contexto. Representaremos al CTX. Cuando llamo al método de cajón un poco más tarde, te mostraré que empezamos a dibujar una forma o por dos puntos método de ruta de inicio incorporado. Piénsalo como si estuviéramos poniendo bolígrafo sobre papel. Le estamos diciendo a JavaScript que queríamos empezar a dibujar una nueva forma. Begin path también cerrará cualquier forma anterior. Si hay alguna, entonces llamamos built-in move to method para establecer las coordenadas x e y iniciales para esa línea, solo lo paso a 0 para coordenada horizontal. Y 0 por una vertical. 0-cero en nosotros es esquina superior izquierda aquí. Coordenadas en tipo de pedido una muy simple. Tenemos eje x horizontal que va desde 0 aquí en el lado izquierdo y aumenta a medida que viajamos a la derecha. coordenada y vertical comienza en la posición 0 aquí en la parte superior, y aumenta a medida que bajamos. Entonces, por ejemplo, punto agregar coordenadas, cien, doscientas estarán en algún lugar por aquí, a 100 píxeles del borde izquierdo en el eje x horizontal, y 200 píxeles de la parte superior en el eje Y vertical. Mover al método establece las coordenadas x e y inicial para la línea, línea a conjuntos de métodos terminan en coordenadas x e y. Si lo paso, tipo de tiene ancho desde la línea cuatro como x y altura desde la línea cinco como y Eso serán coordenadas seiscientos seiscientos. Entonces esta esquina, entonces podemos llamar al método de trazo incorporado para dibujar realmente esa línea. Esta línea debe ir desde las coordenadas 00 aquí, dos coordenadas, seiscientos seiscientos aquí. Llamemos a nuestro dibujo mi pie y en realidad dibujemos la línea para ver si funciona. Entonces aquí declaramos clase fractal. Tiene un método constructor. Cuando creamos una instancia de esta clase, constructor creará automáticamente un nuevo objeto con esta clase es un blueprint. Hago eso creando una variable que llamo, por ejemplo frac ball one. Lo puse al nuevo fractal. La nueva palabra clave es un comando especial en JavaScript. Hará que JavaScript busque una clase con este nombre, y activará su constructor en una línea ocho, puedo ver que mi clase fractal nos espera con y tipo de altura como argumentos. Así que lo paso tipo de nosotros con de hierro para que nos escondamos de la línea cinco. Creamos Fractal uno. Desde que fue creada utilizando esta clase, tiene acceso a su método de cajón público. Yo lo llamo simplemente diciendo Fractal one dot draw online 12. Puedo ver que el método de sorteo espera contexto como argumento para especificar en qué tipo de nosotros queríamos aprovechar. Hasta ahora sólo tenemos un tipo de nosotros, l y n. Así que no mucho para elegir entre Abbasid, CTX de la línea tres en red. Como se puede ver, tenemos una línea proveniente de coordenadas ceros 0 tal como se define en la línea 14. Y va todo el camino a las coordenadas seiscientos seiscientos como se define en línea, 15 5. Modificar formas: CTX objeto en línea tres tiene una referencia a todos nosotros propiedades y métodos. Estas propiedades son básicamente una especie de estado o puedes llamarlo un poco ajustes. Una vez que cambies alguno de ellos, se quedan así hasta que los restablezcamos o hasta que volvamos a cambiarlos. Si puedo hablar CTX, podemos ver los inmuebles aquí. Este es el estado predeterminado actual del lienzo. Se puede ver, por ejemplo, que FillStyle se establece de forma predeterminada en negro. El ancho de línea se establece en un píxel aquí abajo. También tenemos todo tipo de nosotros a los métodos de dibujo como método de arco para dibujar un círculo, comenzar método de baño, que ya usamos en línea 15 y muchos más. ¿ Y si quisiera hacer de mi línea una más gruesa? Necesito tomar esta propiedad de ancho de línea y necesito actualizarla con un valor diferente. Lo hago diciendo que el ancho de línea de punto ctx equivale a cinco píxeles o 20 píxeles. También puedo mover la línea cambiando sus coordenadas iniciales o su final en coordenadas. Hagamos la línea de 50 píxeles de ancho. También hay una propiedad llamada la copa de línea. Y mira lo que pasa cuando lo dije, la ronda, llegamos a los bordes redondos. Cuando entiendes cómo funcionan estas coordenadas, puedes trazar una línea entre dos puntos cualquiera sobre nosotros, correcto. Ahora, la línea comienza en unos 150 píxeles de la izquierda y una fuente grande de 150 desde la parte superior. Y termina 200 píxeles desde la izquierda y 300 píxeles desde la parte superior. También podría ir a valores menos, o puedo alinear la línea en el borde superior, haciendo un gol desde las coordenadas 002, coordenadas 5000. Ahora este único valor de 500 realmente determina la longitud de mi línea. Pongámoslo en una variable. Yo creo una propiedad de clase llamada este tamaño de punto. Ahora puedo cambiar la longitud de mi línea cambiando esta propiedad de tamaño de punto como esta. También puedo hacer el tamaño de la línea que en relación con el tamaño de Lienzo. Si quisiera cambiar el color de mi línea, accedo a la propiedad de estilo de trazo y la anulo del color negro predeterminado a, por ejemplo, verde. 6. Transformación de formas: Este otros métodos incorporados para dibujar formas, por ejemplo, método de rectángulo de relleno que toma cuatro argumentos, x e y, posición y anchura y altura. Quiero mi rectángulo en las coordenadas 5050, y quería tener 200 píxeles de ancho y 200 pixeles de altura. Puedo cambiar el ancho y la altura así. También puedo hacer que este rectángulo cubra todo el tipo de pedido haciéndolo empezar desde la esquina superior izquierda. Entonces coordenadas 00, hago su ancho igual que US anchura y altura será altura. Puedo cambiar su color accediendo a propiedad FillStyle en un objeto, y la cambio del negro predeterminado a azul, vamos a estar girando ahora. Entonces quiero que veas exactamente lo que está pasando en estilo CSS, le doy a mi elemento lienzo fondo rojo. Si empujo el rectángulo de 50 pixeles hacia la derecha, podemos ver que tenemos elemento de lienzo rojo en la parte posterior. Tenemos rectángulo azul dibujado en Lienzo online 20, y tenemos línea verde dibujada en parte superior viniendo de las líneas 21 a 24, pongo la corteza del rectángulo azul, por lo que ahora empieza desde las coordenadas 00. Ten eso en cuenta. Esto es importante para conseguir un control total sobre nuestros dibujos. Es importante entender cómo podemos transformar el estado de Canvas utilizando los métodos incorporados de traducir, escalar y rotar. Es fácil cuando se explica correctamente, pero no es muy intuitivo. Déjame mostrarte exactamente cómo funciona. Podemos transformar nuestro estado usando el método de rotación incorporado. Este método toma un argumento, un ángulo por el cual queríamos rotar todo el tipo de nosotros y todos los dibujos que hay en él. Se necesita ese valor de ángulo en radianes, no en grados. Si lo roto por 0.8 radianes, eso es aproximadamente 45 grados. Se puede ver como giro en ángulos positivos y negativos, el punto central de rotación es la esquina superior izquierda de Canadá tiene coordenadas 00, todos los dibujos sobre nosotros que vienen después de este gol de giro. Entonces rectángulo y la línea giran alrededor de las coordenadas 00. Traducir método toma dos parámetros. El primero es x, la distancia que queríamos movernos en dirección horizontal. Los valores positivos están a la derecha. En valores negativos van a la izquierda. El segundo parámetro, y define hasta dónde moverse en dirección vertical. Valor positivo de la puntuación hacia abajo, los valores negativos suben. Si lo paso 5050, nos movemos todo tipo de como dibujos, 50 pixeles a la derecha y 50 pixeles hacia abajo. Afectará todo lo que viene después. Si dibujo otra forma o antes de esto, no se traducirá ni girará. Aquí traducimos y después de eso rotamos. Mira lo que pasa si le paso un valor de ángulo diferente. Todos somos datos en y podemos ver que el método traducido en tierra 20 no sólo empujó todos los dibujos a la derecha y hacia abajo, también cambió centro de rotación 0.2 coordenadas 5050 Rotar método se en realidad siempre rotan alrededor de las coordenadas ceros 0. Esa es la parte que no es muy intuitiva. Lo que realmente sucedió es que el método de traducción movió lo que se considera las coordenadas 00 desde su posición predeterminada en la esquina superior izquierda sobre nosotros dos coordenadas, 5050. Se puede ver que en línea 20, estamos dibujando el rectángulo azul de las coordenadas 00, pero en realidad se dibuja a partir de las coordenadas 5050 siendo empujadas por el método translate. Esto se debe a que el método Translate cambia el estado de nosotros y se cambia de posición que se considera coordenadas 00. Si aún no entiendes completamente esto, no te preocupes, quedará más claro a medida que sigamos construyendo nuestro efecto aún más. Entonces todo lo que traduce método hace, mueve lo que se considera coordenadas ceros 0 sobre nosotros para hacer coordenadas donde pasamos a ella. Como resultado, eso desvía todo tipo de como dibujos por estos valores de píxel. Y también mueve el punto central de rotación a esa posición. Viste los fractales que vamos a construir hoy. Resuelve para nuestro efecto. Quería que el punto central de rotación estuviera exactamente en medio del cannabis. Para ello, lo paso tipo de ancho y lo divido por dos como parámetro x y como altura y lo divido por dos como el parámetro Y, así. Ahora cuando rotamos por diferentes valores de ángulo, podemos ver que el punto central de rotación está exactamente en el medio de la página. Perfecto. Como dijimos, ha pudrido método toma un ángulo de argumento por el cual queríamos rotar. Y se toma este valor en radianes. Si quisiera rotar exactamente medio círculo, por lo que un 180 grados, ese valor se convierte en un 3.14 radianes. En realidad es exactamente el valor de pi. Entonces si giro por math.pi, giró por medio círculo. Si giro algo por math.pi veces dos, giré exactamente por 360 grados. Todos lo hicimos todo alrededor de todo el círculo y terminó un buck en su posición inicial. Cosa que hay que recordar, rotar por libro de matemáticas por es girar por medio círculo. Rotar por math.pi veces herramienta rotará tus dibujos alrededor en un círculo completo. Lo dije de nuevo a la posición inicial a 0 radianes. Un último método que transforma nuestro estado que cubriremos hoy es la escala. Se necesitan dos parámetros. Podemos llamarlos x e y. x es el factor de escalado en dirección horizontal. ¿ Por qué está el factor de escalado en la dirección vertical? Los valores base son uno. Si lo escalamos por uno, se quedará en el mismo tamaño. Valor más lento que eso reducirá la escala. Valores superiores a eso se escalarán si lo paso como 0.5 como x y es 0.5 es por eso que escalamos el rectángulo azul y la línea verde hacia abajo un 50% a la mitad de su tamaño original. Lo importante a saber aquí es que se reducirá hacia abajo hacia las coordenadas ceros 0. Desde traducir trasladó estas coordenadas a la mitad de nosotros, el punto central de escalado está ahí también. Así Translate método cambia tanto la rotación como la escala en puntos centrales. Ten eso en cuenta. Este comportamiento es perfecto para el efecto que vamos a construir hoy. 7. Patrones geométricos simples: A veces no quieres que traduzca, escale y gire a todo el tipo de dibujos preguntados y antiguos que hay en él. En ocasiones solo queríamos rotar algo y luego queríamos restablecer el estado de nuevo a lo que era antes. Para eso tenemos dos métodos incorporados especiales llamados guardar y restaurar. El método Save creará una instantánea del estado actual, todas sus propiedades actuales se pueden ver cuando consola log ctx, así que traduce, rota escala, pero también cosas como FillStyle, linewidth, básicamente el estado entero de un objeto tal como es en este punto de nuestro código, entonces podemos cambiar todo lo que queramos. Podemos traducir, escalar, rotar, redibujar las formas que queremos que se vea afectada por esta traducción y rotación. Y luego llamamos métodos de restauración incorporados que buscaremos su objetivo seguro asociado. Y se reiniciará tipo de nuestro estado de nuevo a lo que era en el punto seguro se llamaba. En este caso, rotará, escalará y traducirá. Cualquier forma que dibujemos después de Restaurar no se verá afectada por la rotación o la escala. Como dije, guarda y restaura investigación, no sólo la transformación, sino también todo tipo de configuraciones incluyendo el FillStyle, el estilo trazo y así sucesivamente. Esto puede ser útil en algunos efectos que estamos construyendo. Aquí se puede ver que salvé estado, traduzco, roto y escala. Dibujo mi rectángulo azul y restauro pequeño rectángulo se traduce y escala hacia abajo porque originalmente se suponía que cubriría todo Estados Unidos desde las coordenadas 00 a un tipo de veloz como altura. Ya que estamos dibujando la línea verde después de que un estado ha sido restaurado, no está siendo afectado por traducir y escalar en absoluto. Para el rectángulo azul las coordenadas 00 están en el centro de nosotros según lo definido por el método translate para las coordenadas de línea verde 00, la posición por defecto en la esquina superior izquierda de Canadá. Dije escala a 11 para ancho original veces uno, y altura original veces uno. Si lo escribí ahora se puede ver estoy girando el rectángulo azul, pero la línea verde no se está afectando en absoluto. Cambiemos esto por ahí. Pongo línea verde dentro de esta zona segura y restaura y capaz de rectángulo azul después de almacenar. Ahora, el rectángulo azul está encima de todo, así que realmente no podemos ver la línea. Las formas en cinemática se dibujan de arriba a abajo mientras JavaScript lee el archivo. Entonces tomaré este código rectángulo y lo pondré antes de seguro. Ahora como la giro, línea verde se está afectando, pero vamos a rectángulo no se está transformando en absoluto. Puedo empujar un poco el ángulo directo para que podamos ver tenemos rectángulo rojo, azul y la línea verde es lo único que gira. Si entiendes las cosas que acabamos de cubrir, puedes hacer cosas realmente geniales con el cannabis. Ahora, déjame mostrarte algunos. Eliminé el rectángulo azul y hago transparente el fondo del cannabis. Vuelvo dentro de mi clase fractal y creo un método de clase privada llamado dibujar una línea. Lo que acabo de hacer aquí se llama método privado. Esta es una nueva característica en JavaScript que se introdujo hace un par de años. Los métodos privados se declaran con nombres duros, breve del identificador fijo con símbolo hash. Los métodos privados solo son accesibles desde dentro de la clase. Se declaran en. No podemos llamarlos desde afuera. Utilizaré este método privado para manejar alguna funcionalidad interna de nuestra clase. funcionalidad interna de Haydn desde el exterior es un buen ejemplo del segundo principio de programación orientada a objetos llamado obstrucción. Obstrucción significa que estamos ocultando detalles innecesarios del funcionamiento interno de nuestros objetos desde el exterior. Y solo exponer al usuario de Essentials no necesita saber cómo es exactamente nuestro usuario construido fractal solo necesita saber que hay un método de sorteo público al que pueden llamar que construirá el toda forma fractal. Por supuesto, el día que somos los que construyen este efecto. Entonces vamos a entender todo. Lo que estoy tratando de lograr aquí es que quería tener un método de ayudante privado en mi clase que maneje el dibujo de una sola línea o una rama fractal parte del fractal. Y quería tener un método de dibujo público que se pueda llamar desde el exterior que dibuje la forma fractal completa. Vamos a armar esto. Dibujar línea esperará contexto como argumento para especificar en qué elemento queríamos dibujar. Dentro pongo todo este código que dibuja una línea. Así comienza camino para empezar a dibujar, mover a, para establecer la línea de coordenadas x e y inicial en, para establecer y en coordenadas x e y y y trazo para dibujar realmente esa línea que definimos. Entonces dentro del método de cajón público, llamo a este método privado DrawLine usando esta palabra clave, puedo ver que el DrawLine espera contexto como argumento. Lo paso contextos que se pasarán como argumento al método cajón público aquí te mostraré más adelante. Se puede ver que cuando giro todavía funciona. Acabamos de reestructurar el código para que sea un poco más modular y va a ser más fácil hacer un seguimiento de lo que estamos a punto de hacer. Siguiente. Mira lo que pasa si copio estas dos líneas y la segunda Girar carbón tiene un valor de ángulo diferente. Los copio una y otra y otra vez. Y si también traduzco como por 5050 cada vez que rotamos, se puede ver aquí mismo ese tipo de transformaciones son aditivas, acumulativas traduce y gira se adaptan unos a otros hasta que se restablezcan por restauración, tenemos algunos llamados repetición aquí. Cuando ves que en tu código JavaScript suele ser una buena idea usar un bucle. Elimino todos estos objetivos repetidos y creo un for-loop para el índice lead comienza en 0, siempre y cuando sea menos de cinco, aumento I en uno. Cada vez que se ejecuta for-loop llamaremos al método DrawLine desde la línea 31 para dibujar un nuevo segmento de línea. Y vamos a rotar, tipo de preguntado por más 0.5 radianes. Por lo que la primera línea será girada por 0.52, línea por 1, tercera línea por 1.5, y así sucesivamente. Las rotaciones son aditivas a menos que restablezcamos entre sí. A medida que corre el for-loop, se están dibujando líneas y las rotaciones se suman. Puedo crear más líneas como esta. Eliminé esta llamada de traducción. ¿ Y si quisiera que las líneas se dividieran uniformemente en un área circular? Déjame mostrarte lo que quiero decir. Necesito igualar de alguna manera el número de veces que este for-loop corre y cuánto gira cada vez. Actualmente ejecutamos esto para bucle tres veces creado en tres líneas. Sabemos que math.pi se convierte a 180 grados o 3.14 radianes. Entonces medio círculo. Si divido medio círculo, math.pi dividido por tres, obtenemos esta forma. Si tomo todo el círculo, así dominado por los dos tiempos y lo divido por el número de veces que este for-loop corre, obtenemos tres ramas divididas uniformemente en un área circular. Aquí podemos ver que el número de bucles tiene que ser el mismo que el número. Dividimos todo el círculo por para que nuestras ramas se distribuyan uniformemente sobre un área circular. Pongamos esto en una variable. Yo lo llamaré a este punto sitios porque determinará cuántos lados simétricos obtendrá nuestra forma fractal final. Lo puse a cinco, por ejemplo, y lo sustituyo aquí y aquí. Ahora cuando cambio este valor, cambiamos la forma de nuestro pronto para ser fractal. Tenemos este método de cajón público en la línea 20 y método de DrawLine privado en la línea 31. Como dijimos, se pueden llamar métodos privados desde el exterior. Si traté de llamarlo, obtendré un error que dice campo privado para dibujar línea debe ser declarado en una clase que encierra. Podemos ver que esta es una funcionalidad incorporada y la encapsulación privada de estas características de clase que comienzan con un símbolo hash es forzada por el propio JavaScript. Por otro lado, dibujar es un método público y se puede llamar desde fuera así. 8. Cómo dibujar fractales: Estamos dibujando aquí no es un fructífero todavía. Es solo la línea que se ha traducido y girado alrededor para crear un fractales matemáticos en forma de estrella son patrones infinitamente complejos que son auto-similares a través de diferentes escalas. Se trata de un patrón repetitivo de formas similares al que puedes acercar cada vez más para obtener más y más detalles. En la codificación creativa, podemos tener nuestros fractales para ser infinitamente complejos porque entonces tomará JavaScript un tiempo infinito para dibujarlos. Podemos darles capas de complejidad hasta que escalamos a un cierto valor pequeño más allá del cual realmente no podemos ver ninguna diferencia a simple vista de todos modos, porque las líneas individuales son tan pequeñas, el fractal forma dibujará hoy se hará de líneas. Y lo que voy a buscar es algo inspirado en el fractal de los tres años, donde tienes tres líneas que hacen la forma de letra h base que se ramifica en cuatro formas de letra h más pequeñas en cada extremo en y en cada final de estos más pequeños, hay aún más pequeños. En fractal matemático, podemos seguir haciendo zoom más cerca y más cerca y ver más detalles ya que este patrón se repite en escalas infinitamente más pequeñas y más pequeñas. Para nuestro efecto, definiremos algo de profundidad. Digamos que queremos que cada línea se divida en líneas más pequeñas cinco veces, y luego nuestra forma fractal está completa. Y yo te muestro lo que quiero decir. Dibujaremos nuestro fractal, haciendo que este método privado DrawLine se llame una y otra vez. En la programación, esto se llama recursión. recursión es un proceso en el que una función se llama directa o indirectamente. Cada vez que la línea de dibujo se llama a sí misma, dibujará una línea. Va a transformar, rotar, y escalar tipo de nosotros. Y se llamará a sí misma para dibujar esa misma línea, pero esta vez transformado, escalado, y rotado, y luego se volverá a llamar. Agregaremos una condición para definir cuántas veces este proceso se repetirá, dependiendo de cuánto detalle, cuánta profundidad queremos en nuestra forma fractal final. Te mostraré exactamente cómo funciona eso y cómo se ve. Ahora, empiezo por aislar cualquier cambio que haga al tipo de estado. Entonces voy a envolver mi código en métodos de guardar y restaurar dentro de nuestro giro tipo de pedido por un radián. Y haré que DrawLine se llame a sí mismo. Necesito pasarlo contextos argumento. Ten cuidado aquí, si ejecutas este código, creará un bucle infinito. La mayoría de los navegadores modernos podrían lidiar con él en estos días y no se estrellarán. Necesitamos crear una condición que acabe con la recursión en algún momento que evitará que un DrawLine se haga doble punto. Y si más lejos, cuando se alcanza cierto límite, lo hago pasándolo un segundo argumento llamado nivel. Creo una declaración if y compruebo si esta variable de nivel que se pasará como argumento es más que este nivel máximo de punto. Si es así, use declaración return como esta. Cuando se usa una sentencia return en un cuerpo de función, se detiene la ejecución de la función. Necesito crear propiedad de nivel máximo aquí arriba. Digamos que quiero dibujar una línea para llamarse a sí misma dos veces. Nuestro fractal tendrá una profundidad de dos niveles. Cuando DrawLine se llama a sí mismo, puedo ver aquí arriba que espera dos argumentos, contextos y nivelarlo cada vez que DrawLine se llama a sí mismo, aumento ese argumento de nivel más uno. Ejecuto el código y aún obtenemos un bucle infinito. Es porque esa variable de nivel es indefinida. Necesito darle un valor inicial. Cuando llamo a DrawLine por primera vez, dije que el nivel inicial a 0, llamamos método privado DrawLine y lo pasamos contextos para especificar en qué tipo de nosotros queríamos dibujar. Y le pasamos el nivel inicial 0, esto llamado Ron's para dibujar una línea. Y luego a través de un programa en principio llamado recursión, la función se llama pasando a lo largo esa misma variable de contexto y aumenta en la variable de nivel por más una. Por lo que en este punto, nivel es uno y el nivel máximo es dos, ya que lo definimos arriba en línea 19, este cheque será falso y rotará EU y dibujará otra línea, aumentará de nivel por una. Este bucle se repetirá en sí mismo, dibujando cada vez más líneas hasta que el nivel alcance el nivel máximo. Cada vez que dibujamos otra línea, también podemos bajar la escala. Lo escalo los tiempos 0.9 horizontal y verticalmente. Y ahora cada línea tiene un 90% de tamaño de la anterior. Si quisiera crear una forma de rama, también quería mover el punto desde el que crece la nueva línea desde su línea principal. Lo haré por traducido en nuestro estado. como explicamos anteriormente, esto empujará las coordenadas 00 por un valor de datos, y también moverá rotación y escala en punto central con él como efecto secundario, por ejemplo, mira lo que sucede si entre cada línea que traduje por 50 píxeles horizontalmente y 0 verticalmente, puedo empujar hacia nueva línea a lo largo de su línea principal usando translate. Y si quiero que la nueva línea crezca desde el final de su línea padre, puedo hacerlo traduciendo horizontalmente por toda la longitud de esa línea. Entonces aquí utilicé esta propiedad de tamaño de lote desde la línea 17. Creé una especie de forma de gancho. Puedo escalarlo un poco. Puedo cambiar el tamaño de los segmentos individuales aquí en la línea 17. Ahora si aumento el nivel de MCS, permito que DrawLine se llame más veces aumento en la cantidad de líneas que conforman nuestra forma fractal final. Se puede ver que estos ajustes, rápidamente llegamos a un punto donde las nuevas líneas se reducen hasta un punto en el que se vuelven apenas visibles. Con fractales matemáticos, esto será infinito y podremos acercar cada vez más y más líneas y ver cada vez más líneas en la codificación creativa, sólo nos importa la parte que podemos ver también no tienen poder de cómputo ilimitado para crear formas infinitas como esa. Entonces, en cualquier momento de este tutorial, si las formas se vuelven demasiado complejas y tiempo de renderizado tarda demasiado en tu computadora, la forma más fácil de hacerlas renderizadas más rápido es venir aquí para max nivel propiedad y fijarla a una disminución de valor menor en las profundidades de nuestro fractal. Lo pondré en cinco y pongo la escala a 0.7. Si cambio este valor de ángulo en radianes, paso el método Rotate. Cambié el ángulo entre nueva rama y su toma prestada la rama que va a crear unas formas y movimiento realmente cool que mostré en la intro. Esta es nuestra forma fractal muy simple. Hicimos un gancho fractal. Ahora puedo usar el código que escribimos aquí todos y 26 para convertirlo en una forma con la simetría radial. Este for-loop dibuja una rama fractal, cada daño corre y distribuye estas ramas uniformemente en un área circular. El número de ramas depende esta variable de tamaño de punto desde la línea 18, Vamos a aumentarla a 23456. Espero que puedan ver que nos estamos acercando a algo interesante. Vuelvo a una sucursal por ahora para que podamos ver claramente lo que estamos haciendo. También estableceré el nivel máximo a uno por ahora. 9. Fractal de Snowflake de nieve: La forma en que funciona nuestro código en este momento, dibuja una línea, gira en una dirección positiva, tiende a dibujar otra línea de nuevo. De esta manera dibujamos esta curva, los ganchos. ¿ Y si quiero más simetría? Digamos que quiero que una rama crezca a la izquierda y otra a la derecha. Quiero crear un tenedor que les pueda dar interesante rama de árbol de copo de nieve o formas de cristal. Déjame mostrarte. Tendremos dos sucursales que crecen desde la rama principal de los padres. Uno se dividirá en la izquierda, uno a la derecha. Ambas ramas serán de la misma escala. Entonces me muevo, traduzco y escalo fuera de este objetivo seguro aquí. Y envuelvo todo este bloque en otro par de guardar y restaurar para asegurarme de que nuestras escalas de traducción y rotaciones no se desborden fuera de este bucle de DrawLine. Espero que no te resulte confuso que tengamos múltiples llamadas seguras y restauradas aquí. Pienso en la caja fuerte y la restauración en París. Son una especie de anidados el uno en el otro. Entonces cada restauración sabe cuál es su punto seguro asociado. Entonces sabe a qué estado de Canvas volver a restaurar. Esta Restauración funcionará con este ahorro. Este Restaurar está emparejado con esta caja fuerte. Espero que tenga sentido. Guardar empuja el estado actual encima de la pila, restaurar Bob el último estado agregado de la parte superior de la pila. Se volverá más intuitivo si lo usaste por un tiempo. Copio este bloque de código una vez más. Y el único cambio será que pasemos método de rotación y ángulo negativo. Pongo algunos espacios aquí para mayor claridad. Cuando llamamos a línea de dibujo, dibujamos una línea. Traducimos la posición ceros 0 a lo largo de la rama. Entonces está en el otro extremo. Giramos tipo de pedido por un valor de ángulo positivo y llamamos a línea de dibujo para dibujar esta rama. Y aquí lo rotamos por un valor negativo para dibujar éste. Ahora, estoy codificando duro escala 0.7. Hagámoslo en una propiedad de clase. Yo digo que esta escala de puntos es 0.7 y la reemplace aquí y aquí. Ahora puedo cambiar el escalado de nuestros niveles fractales aquí en la línea 20. Hará lo mismo para el valor del ángulo. Pasamos a rotar método. Afectará cómo se extiende la forma fractal final. Por lo que lo llamaré este punto spread. También puedes llamarlo ángulo o algo así si quieres. Inicialmente lo puse a un radián, que es alrededor de 57 grados. Sustituyo el valor del ángulo codificado duro aquí en línea 46 y la cantidad 51, usaré el mismo valor pero negativo para asegurarme de que estas dos ramas más pequeñas se separen en ambas direcciones lejos del padre sucursal. Si cambio el subvalor aquí puedes ver exactamente cómo afecta a la relación entre rama hijo y padre. Añado más lados. Puedo cambiar cualquier valor aquí para cambiar cómo se ve la forma final. Aquí en la línea 35, limitamos el número de llamadas al método DrawLine. En este caso, cada vez que se ejecuta, se llama dos veces para crear dos versiones más pequeñas de la misma línea creciendo a partir de las puntas. Mira lo que pasa si aumento el nivel máximo en uno, agregaremos un nivel más de recursión y cada rama más pequeña tendrá que ramas aún más pequeñas que crecen a partir de ella. Si agrego una más, las ramas más pequeñas tendrán cada una a las aún más pequeñas. Espero que puedan ver lo que está pasando. Cambiaré el valor del ángulo y será más obvio que tenemos nuestra forma de nivel base y tres niveles fractales más se ramifican desde ella. Tenemos una rama que se divide en dos ramas más pequeñas. Y cada vez que sumamos el nivel máximo, este proceso se repite en escala más pequeña y menor. Principio básico de los fractales. Hago toda la forma más pequeña estableciendo el tamaño del segmento inicial en 20% del ancho del lienzo. Dije ancho de línea a 30 pixeles. Vamos a darle un paso más allá. Digamos que esta es la rama principal y tiene dos ramas más pequeñas saliendo de ella aquí y aquí. ¿ Y si quisiera tener más sucursales? Por ejemplo, quiero otro par de venir de algún lugar aquí y aquí. Pasemos a una serie de sucursales en una propiedad de clase. Inicialmente lo puse a uno. Voy dentro de nuestro método privado DrawLine. Y después de dibujar la línea inicial principal que creé para el bucle I es 0, siempre y cuando sea menor que esto aumentarían las ramas I en una. Ahora, tomo todo este código y lo puse dentro de eso para bucle. Este código traduce las coordenadas 00 a lo largo la rama padre hasta su final y escala un poco el cannabis. Entonces dibuja esta línea aquí y esta línea aquí. Necesito mover esta caja fuerte fuera del for-loop porque está asociado restauración también está fuera del for-loop aquí. Quiero un conjunto de ramas en algún lugar aquí, y el otro lado aquí, el código que determina de dónde crecen las siguientes ramas es de esto traducir. En lugar de traducir todo el camino hasta el final de barra y rama, traduciré a este tamaño de punto dividido por ramas y todo esto entre paréntesis veces I. De esa manera si tenemos, digamos dos conjuntos de ramas, el primer conjunto será de tamaño dividido por dos veces un 0 aquí, y el segundo par será tamaño dividido por dos veces uno. Entonces aquí solo tenemos un set ahora porque este punto ramas se establece en uno. Si quisiera moverlo al otro lado de la rama principal, establecí este valor a este tamaño de punto menos así. Agradezco que este código en la línea 44 podría ser un poco difícil de entender al principio. Se hará más claro a medida que jugamos con el código y veremos cómo reacciona la forma fractal final. Dije sucursales a dos y puedo ver que hizo algo que no esperaba. Veamos cómo se ve eso en una forma más compleja agregando más sitios. En realidad me gusta esto. El motivo por el que las ramas no se extienden a lo largo de la rama principal sino que son empujadas tipo de afuera es porque estoy llamando a esto guardar y restaurar solo unas fuera del for-loop. En realidad quise guardar y restaurar cada vez que dibujamos un par de sucursales para que este traductor online 44 pueda subir correctamente a lo largo de la rama parent. Me muevo, guardo y restauro dentro del for-loop. Y ahora está haciendo lo que pretendía. Si lo escalo, se puede ver que tenemos dos conjuntos de ramas. Un lado creciendo a partir de este punto y otro conjunto creciendo a partir de este punto, ajusto algunos de estos valores para conseguir un mejor tamaño. Ahora estamos haciendo copos de nieve fractales realmente bonitos. 10. Cómo crear una gama amplia o formas aleatorias: Yo creo una propiedad de clase llamada este color oscuro. En lugar de declaración de color RGB, utilizaré modelo de color HSL, matiz, saturación, luminosidad. El modelo de color Hsl fue diseñado en 19 años setenta para alinearse más de cerca con cómo la visión humana percibía a los estudiosos. Es realmente útil para codificación creativa porque puedes recorrer todo el espectro de colores cambiando solo el primer valor. Ese primer valor significa tonalidad. Y representa un grado en la rueda de color de 0 a 360 grados, obtuve un estilo de trazo y lo basé dentro del método de sorteo aquí. Contextos estilo de trazo de punto es igual a este color de punto de la línea 220 grados es correcto. A 120 grados es verde, 240 es azul. Incluso puedes ir a valores superiores a 360, y solo estará girando alrededor de la rueda otra vez. Entonces 360 vuelve a ser rojo, 408 es verde, y así sucesivamente. La saturación es un valor porcentual, 0 significa un tono de gris, 100% es a todo color. La ligereza también es un porcentaje. 0 es negro, 100% es blanco, 50% es a todo color, no afectado por la luz u oscuridad en absoluto. Puedo reemplazar la parte de vista por un valor aleatorizado como este. Digamos que en la primera página que escribí, rodo un número aleatorio entre 0360. Ahora nuestro fractal puede estar en un color aleatorio. También podría darle alguna sombra. Tomo la variable CTX de la línea tres y dije tipo de nosotros propiedad de color de sombra a negro, offset de sombra y. así sombra vertical será de diez píxeles hacia abajo. Desplazamiento de sombra X. La sombra horizontal será cinco píxeles a la derecha de su forma padre. desenfoque de la sombra será, por ejemplo, diez. Estamos haciendo que se vea realmente bien. Se puede ver cómo valor de propagación, por lo que el ángulo que pasamos para rotar método cambia la forma final del fractal. Empecé desde 0.1 radianes y voy a ir todo el camino a 2.9 para obtener el rango completo que quiero. Sí, creo que estos valores son buenos. Haré spread un valor aleatorio entre 0.12.9 así. Ahora cada vez que actualizo la página, obtengo un color aleatorio y ángulo aleatorio entre los niveles de rama. Por lo que estamos obteniendo una bonita gama aleatoria de formas. No senté ancho de línea a diez píxeles para poder ver más detalles. Si le dijera nivel máximo a uno, solo obtenemos la rama principal de cada lado que se divide en cuatro ramas más pequeñas. Si lo pongo en dos, cada una de las ramas pequeñas tendrá cuatro más pequeñas. Si aumento el nivel máximo dos por cada una de esas ramas pequeñas tendrán cuatro aún más pequeñas. En este punto, estamos pidiendo a JavaScript que rote, escale, traduzca cannabis y muchas, muchas veces para dibujar esta forma. Para que a medida que aumentemos el nivel máximo más, el tiempo de renderizado se incrementará forma independiente sobre la potencia de nuestro equipo. No es necesariamente algo malo. Digamos que queríamos usar esto va para renderizar de una forma fractal compleja. Y queremos guardarlo como una imagen. No hay problema si obtenemos un par de segundos de tiempo de renderizado. Depende de para qué quieras usar este código. Si en algún momento hoy te gustaría la forma fractal que tienes. Si está utilizando un navegador moderno, debería poder hacer clic con el botón derecho y seleccionar Guardar imagen como. Eso debería darle su forma fractal como una imagen PNG con un fondo transparente. Si tu tiempo de renderizado lleva demasiado tiempo. Estás pidiendo a JavaScript que dibuje demasiados detalles en tu fractal. Puedes arreglarlo entrando en la línea 22 aquí y establece la propiedad de nivel máximo a un valor menor si estás jugando con tu forma fractal y en algún momento pasa por los bordes de Canvas. Puedes hacerlo más pequeño cambiando esta propiedad de tamaño de punto en línea 20. Esta es nuestra clase fractal. Lo usamos para renderizar o aleatorizar forma fractal sobre Lienzo. Te mostraré más formas de pecas en la sección de experimentos más adelante. Pero ahora, tomemos este fractal y lo conviertan en un sistema de partículas. Con sistemas de partículas, tenemos muchos objetos de partículas individuales Eso es en conjunto crear diferentes efectos, como el humo, algún tipo de flujo o efecto de lluvia, por ejemplo. Hoy, cada una de nuestras partículas será uno de estos complejos fractales y las haré reinar sobre Canvas. Al igual que los ejemplos que te mostré al inicio de este curso. En Lienzo, generalmente animamos algo dibujando una forma estática, eliminándola, actualizando su posición, y dibujándola en esta posición actualizada. Hacemos eso muy rápido, generalmente 60 veces por segundo. Y a medida que se están dibujando, eliminando, actualizando y dibujando de nuevo las partículas , obtenemos una ilusión de movimiento con formas simples como círculos o rectángulos. Es fácil, pero con una forma fractal compleja como esta, tenemos un problema. ¿ Y si quisiera que las formas en mi sistema de partículas sean complejas? Por ejemplo, dibujaré un fractal Eso toma 1 segundo en renderizar. No hay manera de que pueda dibujar múltiples de estos fractales sobre Lienzo, eliminarlos, actualizarlos, y volver a dibujarlos una y más de 60 veces por segundo con una forma que tarda 1 segundo en renderizar. Es simplemente imposible dibujar y animar múltiples 60 veces por segundo. Pero si usted vio los ejemplos al inicio del video, se podía ver que hice eso. Renderé muchas formas fractales aleatorizadas complejas y las hice reinar sobre Canvas a 60 cuadros por segundo. ¿ Cómo hice eso? Eso es lo que estamos a punto de aprender en este momento. 11. Sistemas y animación: Nuestra clase de partícula personalizada para dibujar partícula individual y definir su comportamiento y movimiento. Y tendremos esta clase de lluvia que manejará todo el efecto, todas las partículas a la vez. Vamos a escribir y explicarlo línea por línea para que sepamos exactamente lo que está pasando. Este vaso necesitará un constructor. Esperará argumentos por anchura y altura de Canvas, principalmente porque una de estas clases responsabilidades será difundir nuestras partículas fractales sobre el área de lienzo disponible. Convirto estos argumentos en propiedades de clase como de costumbre, Canada Swift propiedad en este objeto de lluvia que estamos creando en este momento es igual a la variable de sudor de Canadá que se pasó como argumento a la constructor de clase. La propiedad de altura de lienzo en esta instancia de clase de lluvia es igual a la variable de altura de lienzo que se pasó como argumento. Este número de puntos de partículas determinará número máximo de partículas activas en la pantalla. Hay esas partículas serán una matriz y contendrá todos los objetos de partícula actualmente activos creados usando nuestra clase particular. Creo un método de ayudante privado llamado inicializar. El trabajo de este método privado será llenar matriz de partículas desde la línea 79 con 20 objetos de partícula. Entonces para-loop, comienza en 0, siempre y cuando sea menor que el número de partículas de la línea siete a la ocho, yo más, más. Cada vez que se ejecuta este for-loop, en nuestro caso, se ejecutará 20 veces. Tomará esta matriz de partículas LDL de la línea 70, y usará el método de empuje de matriz incorporado. En JavaScript array push método como uno o más elementos le pasamos, al final de la matriz se llama. También devuelve la nueva longitud de la matriz, que podría ser útil a veces le paso una nueva partícula. Entonces, una instancia de nuestra clase de partículas personalizada de tierra 70, la nueva palabra clave buscará una clase llamada partícula, y creará un nuevo objeto JavaScript en blanco. Luego ejecutará código dentro del constructor de esta clase de partícula para asignarle valores y propiedades basados en el blueprint interior. Escribamos nuestra clase particular y definamos ese plano. Cada objeto creado por esta clase también tendrá que estar al tanto del ancho y la altura disponibles porque quiero que estos objetos se restablezcan cuando se caigan de la pantalla. coordenada horizontal inicial de la posición x será un número aleatorio entre 0 y un veloz. coordenada y vertical será un valor aleatorio entre 0 y lienzo. Altura. ancho de cada partícula será, por ejemplo, 50 píxeles y la altura será de 50 píxeles también. Cada objeto de partícula creado por esta clase tendrá acceso al método de actualización. Dentro del método de actualización definiremos el comportamiento y el movimiento. Un método de bit será llamado una y más de 60 veces por segundo. Y cada vez que se ejecute, lo empujaremos un píxel en el eje x horizontal hacia la derecha, y un píxel en el eje Y vertical. Por lo que a la baja, estas dos acciones combinadas resultarán en un movimiento de abajo a la derecha. Cada partícula también tendrá su método de dibujo asociado donde definimos algún código que dibujará esta partícula es de 60 veces por segundo. Después de cada método de dibujo de actualización de posición, necesitaremos un argumento para especificar en qué tipo de pedimos que queríamos aprovechar. Este efecto se utilizará para tipo de elementos. Yo lo explicaré a medida que avanzamos. Empecemos simple por colon método de rectángulo de relleno incorporado. Este método toma x, y, ancho y alto, y dibujará un rectángulo en esa posición de ese tamaño. Perfecto, por lo que tenemos un blueprint que se puede utilizar para crear 20 objetos de partículas en línea 71, puedo ver mi clase particular necesita argumentos para onda S y tipo de como altura. Necesitaba recordar que cuando activo este constructor de clase usando la nueva palabra clave online 97, high-pass it Desktop canvas width from line 90. Esta altura del lienzo de punto desde la línea 91. Inicializar es un método privado. Se puede llamar desde fuera de esta clase. Sólo se puede llamar desde algún lugar dentro de esta clase. Constructor de clases en JavaScript tiene un propósito principal. Crea un nuevo objeto en blanco y le asigna valores y propiedades que contiene para crear una instancia de esa clase. Al hacer eso, también ejecuta todo el código que contiene. Para que podamos aprovechar eso y podemos ejecutar nuestro método inicializado desde el interior del constructor. Lo hago llamando a este nodo hash initialize como esta estructura en nuestro código así hará que el código dentro del método inicializado se ejecute automáticamente cuando se active el constructor. Cuando creamos una instancia de esta clase de lluvia usando la nueva palabra clave, probaremos en un minuto. La clase de lluvia también encabezará un método público que correrá 60 veces por segundo. Ciclará sobre todos los objetos de partícula actualmente activos desde 993 y llamará a su método de actualización asociado desde la línea 79 y dibujará método desde la línea 83 en cada una de estas 20 partículas uno por uno. Y lo hará 60 veces por segundo. Entonces todas nuestras partículas activas estarán constantemente actualizando y redibujando en las nuevas posiciones, creando una ilusión de movimiento. Hago eso tomando esta matriz de partículas de drogas de la línea 93, que contendrá 20 objetos de partículas gracias al método inicializado que acabamos de escribir y llamé built-in para cada método de matriz en él. Para cada método ejecuta se proporcionan función una vez para cada elemento de matriz, le asigno a cada elemento un nombre de variable temporal. Apenas para los fines internos de este for-loop, llamo a cada uno, por ejemplo, partícula, y proporciona función que se ejecutará para cada uno de los 20 elementos. Simplemente tomaremos esa partícula y llamaremos a su método de sorteo desde la línea 83. Puedo ver que el método espera argumento para contexto para especificar qué tipo de pedido dibujar en el método Run es público. Por lo que tomará ese argumento de contexto desde el exterior. Te mostraré en un minuto cuando lo llame, y pasará ese contexto para dibujar método sobre cada partícula. Para cada método de matriz, también llamaremos al método de actualización desde la línea es 79 en cada objeto de partícula. Hora en clase está lista. Entonces intentemos ejecutar el código para ver qué obtenemos. Creo una variable personalizada que llamo por ejemplo efecto lluvia, y lo hago una instancia de clase de lluvia desde la línea 88 usando la nueva palabra clave. Como dijimos, la nueva palabra clave buscará clase con este nombre y ejecutará su constructor en línea 89. Puedo ver que la clase de lluvia espera ancho del lienzo y la altura del lienzo como argumentos. Así que lo paso ancho del lienzo desde la línea cuatro y tipo de como altura desde la línea cinco. Porque llamamos a este punto inicializar en línea 94 desde el interior del constructor de clase. Este código debería activarse automáticamente con solo crear una instancia de la clase de lluvia en línea 97, podemos ver que este código debería haber llenado esta matriz de partículas de punto desde la línea 93 con 20 objetos particulares. Comprobemos si funcionó por consola. Nuevamente, efecto lluvia desde la línea 108. Abrí mi consola y puedo ver que tenemos una instancia de clase de lluvia con propiedades como Canvas, con altura de lienzo y número de partículas exactamente como definimos en el blueprint. Y también podemos ver que las partículas es una matriz con 20 objetos creados usando clase particular. Esto se ve realmente bien. Vamos a probar si el método de ejecución funciona. Dado que este es un método público, puedo llamarlo desde el exterior desde la instancia de esta clase. Así efecto lluvia dot run. En realidad quiero que este método se atropelle y más de 60 veces por segundo, actualizando y dibujando todas las 20 partículas dentro de la matriz de partículas. Para ello, necesitaré ponerlo dentro del bucle de animación. Yo creo una función personalizada. Yo llamo, por ejemplo, animar por dentro. La llamo en efecto desde línea 188 dot run el método que definimos en línea 101. Entonces llamo a solicitud de animación frame y método. Este método incorporado le dice al navegador que queríamos realizar una animación. Y solicitará que el navegador llame a una función específica para actualizar la animación entre las siguientes tres pinturas, esa función para involucrarse antes de pintar se pase como argumento. Y lo pasaré animar el nombre de su función padre. Voy a crear un bucle infinito. Animate comenzará, llamará alrededor del método desde la línea 101 y luego solicitará marco de animación llamaremos de nuevo a animate. Esto repetirá interminablemente. Cuando llamamos a request animation frame como este, lo general tratará de ajustarse a la frecuencia de actualización de la pantalla. En la mayoría de los casos correrá a 60 fotogramas por segundo para una animación suave, aquí declaramos animate. También necesito llamarlo por primera vez para iniciar el bucle de animación. Todavía no está funcionando porque aquí en la línea 101, puedo ver que el método run espera contexto como argumento. Sin él, JavaScript no sabe qué tipo de elemento Us estamos tratando de dibujar sobre la opacidad a CTX desde la línea tres. Y estamos animando si este es tu primer tipo de animación, quiero decir felicitaciones, con el conocimiento, recupera hoy puedes hacer miles de efectos diferentes. Vamos a terminar y pulir éste. 12. Dibujar en varios elementos de lienzo: En primer lugar, no quiero que mi lluvia de partículas se limite a la pequeña zona de karmas en medio de la página. Quería cubrir toda la ventana del navegador. Para hacer eso, vuelvo a indexar HTML y creo otro elemento canvas. Podemos tener tantos elementos de lienzo como queramos en nuestro proyecto. Y podemos especificar qué formas queremos dibujar sobre qué tipo de nosotros. Hoy quise renderizar gran forma fractal en el tipo más pequeño de un cisne en medio de la página. De alguna manera lo convertiré en partículas y esas partículas para caer en tipo de OS2, que cubrirá toda la ventana del navegador. este momento, estas partículas sólo están representadas por unos rectángulos azules, pero lo arreglaremos en un minuto. Creamos otro tipo de elemento con una ID de cannabis para dar estilo a CSS. Le doy un fondo rojo, posición, absoluta top 0 y izquierda 0 en script.js aquí arriba entre líneas 35, tenemos algún código que escribimos este adoptar uno. Hagamos algo parecido para nosotros a variable constante llamada Canadá. Ps2 es un documento dot get element by ID canvas para ver dx2 es una especie de nosotros a dot getContext 2D. Tipo de ancho de punto como dos es ventana en el ancho. Entonces el ancho completo de la ventana del navegador, altura del lienzo es ventana en su altura. Agradable. Indice HTML. Posicioné una especie de taburete detrás de Lienzo uno como este. Ahora sabemos que tipo de cubre toda la ventana del navegador por lo que puedo quitar el tipo reticular de nosotros a que esté configurado. Y si quisiera dibujar algo en él, puedo usar estas variables c2x2 desde la línea 17 dentro del bucle de animación. Lo paso como argumento para ejecutar método como este. Ahora, los rectángulos se están dibujando en ese tipo de nuestros. Como se puede ver, se volvieron de azul a negro. Es porque ese FillStyle azul se configuró en CTX uno, en el otro tipo de nosotros, el dx2 todavía está establecido a su color de relleno negro predeterminado. Tengo que pasar efecto lluvia anchura y altura de Canadá C2, para que pueda extenderse correctamente de las partículas a través del área recién disponible. Estoy tratando de dibujar rectángulos negros, pero están dejando largos senderos. Eso es porque podemos ver marcos viejos, pintura vieja. Puedo usar el método de rectángulo claro incorporado el cual eliminará un área rectangular sobre Lienzo que definimos y lo hará transparente. En este caso, quería eliminar todo el Canvas 60 veces por segundo entre cada fotograma de animación. Quería borrar toda la pintura en tipo de coordenadas frontales OS2, ceros 0 a tipo de pedir a ancho, a altura. Así es como animas el movimiento en tipo de pide que elimines todo, actualiza y redibuja todos los elementos, y lo bucle. Por lo que está eliminando, actualizando y redibujando y una y otra vez, tenemos un lienzo más pequeño, uno donde dibujamos nuestra detallada forma fractal y tenemos Canvas para posicionarnos detrás de él que anima en partículas en forma de cuadrados negros. 13. Conversión dibujos de lienzo en píxeles: El efecto que queríamos construir hoy es la lluvia fractal. Por lo que en realidad quería reemplazar estos cuadrados negros versiones más pequeñas del fractal principal que dibujamos sobre Lienzo uno. Como dijimos antes, en realidad no es posible sacar 20 de estos factores sobre nosotros. Al mismo tiempo, siga eliminándolos, actualizando sus posiciones y redibujándolas una y más de 60 veces por segundo. Se necesita mucho menos rendimiento para hacer eso con rectángulos negros con formas complejas como esta fructosa, tenemos que hacerlo de manera diferente. Dibujar formas fractales aleatorizadas complejas requiere mucho poder de cómputo. Dibujar rectángulos negros simples es barato y rápido y vio sus imágenes de dibujo El lienzo es muy bueno para dibujar imágenes muy rápido. Lo que voy a hacer hoy, tomaré el complejo fractal, lo generamos, y usaré JavaScript para guardarlo como imagen. Luego reemplazaremos rectángulos negros que representan nuestras partículas con estas imágenes. En realidad es muy fácil hacer eso. Aquí en la línea 72, estamos creando una instancia de clase fractal que escribimos anteriormente, y estamos llamando a su método de dibujo para renderla en Canvas. Nosotros especificamos aquí, creo una nueva variable llamada por ejemplo, imagen fractal. Yo lo dije, la nueva imagen como esta. Esta es una clase JavaScript incorporada que simplemente creará un nuevo elemento IMG en blanco, elemento de imagen. Es lo mismo que si creara la etiqueta IMG en mi archivo HTML, pero esta imagen aún no está incluida en ninguna parte de la página web. A menos que lo pongamos ahí con JavaScript, entonces accederé a su propiedad fuente y la pondré en fractal. Dibujamos en Lienzo como fuente de imagen. Podemos hacer eso usando el método incorporado a la URL de datos. Ten cuidado aquí, URL se escribe con mayúsculas. Si acaba de hacer mayúscula U y r minúsculas, l, obtendrá un error al método URL de datos convierte todo el contenido del lienzo en una imagen en formato base 64. Es un formato que todo navegador puede entender y es básicamente una cadena de texto muy larga. Podemos entonces tratarlo como una imagen normal y podemos hacer cualquier cosa con ella. Podemos con imágenes en JavaScript, HTML, y CSS. Cuenta con argumentos opcionales para especificar el formato de archivo. Si no lo declaramos, se omitirá a B y g, lo cual es ideal porque quería preservar el fondo transparente. Estoy creando una nueva imagen en blanco objeto JavaScript. Y básicamente estoy tomando una captura de pantalla de todo el tipo de 4s1. Entonces esta área y guardarla como esta nueva variable de imagen fractal. Si pudiera mirar imagen fractal, podemos ver la cadena de datos larga base-64 que representa todos los valores de color y posición de los píxeles que componen la imagen. Ya que le dimos a nuestro elemento de imagen un atributo fuente, ahora podemos escuchar un evento de carga en él. Tengo todo este código y lo pego aquí abajo online a 111. Eliminé el registro de la consola. El evento onload se activa cuando un objeto se ha cargado completamente. En este caso, cuando se ha creado la imagen y la forma fractal generamos con JavaScript o convertimos exitosamente al formato base 64 y asignada como fuente de esa imagen. Puse todo este código dentro de esa función de devolución de llamada porque solo queremos ejecutar esto después la imagen haya sido puesta a disposición. Paso la imagen misma como el tercer argumento al constructor de clase de lluvia aquí arriba en línea 90, me aseguro de que la clase de lluvia realmente espere esta imagen y la convierto en propiedades de clase. Entonces esta imagen de punto es igual a imagen. Pasaré esa imagen larga al constructor de clase de partículas aquí como el tercer argumento. En línea 73, me aseguro que se espera y lo convierto en una propiedad de clase en clase de partículas. Ahora, todas nuestras partículas tienen acceso a la imagen del fractal que acabamos de generar. Voy a utilizar el método de imagen de dibujo incorporado para dibujarlo en Lienzo. Tenemos que pasarlo por lo menos tres argumentos. Imagen que queríamos dibujar esta imagen de punto desde la línea 76 y x e y coordenadas donde dibujarla sobre Lienzo. Por lo que lo paso a este punto x dot y. también podemos pasarlo ancho y alto para encoger o estirar esa imagen. Vamos a intentar 200 veces 200 pixeles. Quité el rectángulo negro. ¿ Y si quiero que cada partícula tenga un tamaño aleatorio? Creo una propiedad llamada este modificador de tamaño de punto. Será un número aleatorio entre 0.10.3. ancho se establecerá en el ancho real de la imagen. Por lo que esta imagen de punto punto ancho, si controlas esta imagen de punto de soy 76 aquí verás que tiene atributos de ancho y alto. Multiplico esas veces este modificador de tamaño de punto, que será aleatorio y ligeramente diferente para cada partícula. Hago lo mismo por la altura. Agradable, tenemos partículas aleatorizadas. Puedo aumentar el rango de tamaños. Yo creo una propiedad llamada esta velocidad de punto y la puse a uno. Lo reemplace aquí abajo dentro del método de actualización. Cada particular tendremos velocidad aleatoria entre 0.21.2 píxeles por fotograma. Quería que esas formas que cayeron de la pantalla se reiniciaran en el lado opuesto para que pudieran animarse a través de la pantalla de nuevo. Si este punto x es más que un dulce plus propio con significado están completamente ocultos detrás del borde derecho de tipo de ha dicho que son exposición justo detrás del borde izquierdo. Entonces 0 menos este ancho de punto. También puedo escribirlo así. Sí, eso funciona. Se restablecen en horizontalmente. Si caen completamente fuera de la pantalla verticalmente, restablece su coordenada y vertical justo por encima del borde superior del lienzo. Ahora tenemos un charco de 20 partículas que fluirán sin cesar sobre Canvas. Puedes ajustar sus tamaños y velocidades aquí. 14. Experimentos: Puedo aumentar el número de partículas aquí. ¿ Y si quiero que giren a medida que caen? Yo creo una propiedad llamada ángulo. El ángulo inicial es 0 radianes. También creo VA Velocity de ángulo para cada fotograma, ángulo aumentará en 0.01 radianes. Estaremos girando y yo haría que cada partícula gire por su propio valor va. No quiero que los datos de la fila fluyan hacia otras formas, así que lo envuelvo en una caja fuerte y restauro como lo hicimos antes. Ahora traduzco el punto central de rotación sobre la forma fractal. Entonces este punto x dot y, quería rotar y roto por esta propiedad angular desde la línea a, d3, ya que movimos las coordenadas 00 de la esquina superior izquierda sobre la forma fractal, necesito cambia este punto x e y aquí, dos ceros, 0. Por cada fotograma de animación, aumentamos el ángulo por este nodo VA Desde la línea 84. Cuando estamos dibujando imágenes sobre Lienzo, es básicamente un rectángulo. Y al traducir en este punto x, este punto y, traje el punto central de rotación a la esquina superior izquierda o área rectangular que contiene cada forma de copo de nieve. Ahora, todas las formas están girando alrededor de esa esquina superior izquierda. Si quiero que giren alrededor de su propio centro, necesito dibujarlos de un menos la mitad de su propio ancho y menos la mitad de su propia altura como esta. Esta parte podría ser un poco confusa, pero cuando usas traducir y rotar por un tiempo, se vuelve clara e intuitiva. No te preocupes por eso ahora mismo demasiado. Hice otras clases donde mostré esto en diferentes conjuntos de ejemplos. Entonces ver en visuales eventualmente deja muy claro cómo funciona la rotación del lienzo. Si pongo VA a un número negativo, giran en la dirección opuesta. ¿ Y si quiero sumar para rotar a la izquierda y algunos a la derecha, puedo establecer VA en número aleatorio entre menos 0.005 y más 0.005, así. Bonito, esto se ve bastante orgánico. Podemos aumentar el rango si quieres más spinning. Entonces tenemos un lienzo donde regenerar forma fractal, nos screenshopped con JavaScript y usamos esa imagen como partículas dibujadas en el segundo tipo más grande de ácido detrás de ella. Estas técnicas se pueden utilizar para preendar activos, tipo de preguntar y estar fuera de pantalla. Podría ser lienzo invisible y puedo, por ejemplo, un render 20 de estos fractales y hacer que cada particular elija uno al azar. Si quieres que muestre algunas de estas técnicas más avanzadas, avísame. Si elimino borde alrededor de Canvas. Y dije los antecedentes sobre Lienzo para bloquear. Cada vez que refresco página, obtenemos un color diferente y una forma diferente. Cubro más sobre cómo crear formas fractales experimentales en otra clase, todas esas otras formas se pueden utilizar en este efecto. Permítanme probar algunos experimentos ahora para ver qué se nos ocurre. A redujo el número de partículas a diez. Para realizar cambios fundamentales en la forma fractal del núcleo, necesitamos cambiar el código dentro del método DrawLine aquí. En este momento nuestra lógica fractal base es esta. Dibujamos la línea principal, bajamos la escala y dibujamos línea más pequeña a la izquierda y otra línea más pequeña y ramificamos hacia la derecha. Es una especie de tenedor simple que se repite una y otra vez a un detalle más fino y más fino. No tiene que ser así. Podemos usar círculos, los rectángulos son curvas Bezier aquí, y las formas pueden ponerse realmente salvajes. También podemos usar imágenes para conformar nuestro fractal. Por ejemplo, mira lo que sucede si me muevo, guardo y restauro fuera de este for-loop. No voy a restablecer y traducir y escalar entre cada rama, sino más bien solo después de que se hayan dibujado todos los conjuntos de ramas, inmediatamente obtenemos un conjunto diferente de formas. Intenta refrescar tu navegador una y otra vez para hacerte una idea de lo que tenemos aquí. Ahora. Si cambio esto menos el plus, obtendremos espacios entre líneas. Las líneas ya no se conectarán directamente. Creo que esto también se ve muy interesante. Intenté refrescar tu navegador un par de veces para ver si obtienes formas diferentes a las que estoy obteniendo. Pongo esto guardar y restaurar de nuevo dentro del for-loop. Ahora nos comparten que lo recorten porque Canadá S1 es de tan solo 600 veces 600 pixeles. Si lo desea, puede hacerlo más grande. Seguirá funcionando si haces que cubra toda la ventana dentro de la altura, igual que lo hacemos con Canadá. So2, eliminé la segunda línea de ramificación. Base de nuestro fractal ya no es un tenedor. Es un pequeño gancho. Puedo subir aquí y aumentar el nivel máximo a ocho para obtener detalles más finos. Tal vez el nivel máximo cinco está bien. Puedo sumar más sucursales en línea, 30. Si mi forma es demasiado grande para Canvas, también puedo reducir el tamaño base aquí, menos aquí. Haremos que una sucursal esté conectada de nuevo, para que pueda hacerla más grande. ¿ A alguien más le gustan grandes experimentos de codificación en vivo como este, o solo soy yo? Dije ramas las dos. ¿ Y si quisiera añadir algunos círculos en la mezcla para dibujar un círculo sobre Lienzo, tenemos que empezar por start path. Método de arco incorporado toma al menos cinco argumentos, comenzando coordenadas x e y del punto central del círculo, radio, ángulo de inicio y antihongos. Ahora llamo llenar el relleno el trazado del círculo con color hasta en línea 35, dije FillStyle demasiado el estilo de trazo. También puedo fuertemente círculos. En cambio. Aumenté el tamaño de Canadá S1, por lo que tenemos más espacio disponible para renderizar nuestras formas. Cambio la coordenada x horizontal del punto central del círculo. Hago el tamaño de la base más pequeño. Tratemos de fallar. ¿ Qué tal si agregamos algunos rectángulos. A partir x será este tamaño de punto veces 1.5. Y será 0 dentro de la altura 5050, con un 150. Ajustar la coordenada x. Acariciarlo con diez a un 150, con 30. Estaré jugando con esto por un tiempo ahora. 15. ¿Qué sigue?: Ahora que entiendes algunos conceptos básicos, puedes intentar usar líneas curvas y reemplazar la herramienta de línea y mover dos métodos con la curva dos de Bezier y la curva cuadrática dos métodos. También puedes reemplazar líneas con imágenes. Este efecto se puede combinar con muchos métodos y propiedades de dibujo de Canvas diferentes para obtener una amplia variedad de formas experimentadas con un código basado como esta siempre es mi parte favorita. Si querías aprender más sobre lienzo HTML, puedes consultar mi canal de YouTube. Espero que hoy hayas encontrado algún valor. Te veré más tarde.