Fractales, esas figuras enigmáticas que están en todas partes pero no se pueden ver con el ojo no entrenado. Hoy vamos a dibujar uno de los Fractales más conocidos, utilizando sólo Vanilla JS y la API HTML5 Canvas. Lo que aprenderás ¿Qué es un árbol fractal? Escribir el árbol fractal en vanilla JS Más allá del árbol fractal ¿Qué es un árbol fractal? Para definir un árbol fractal, primero debemos conocer la definición de fractal, por supuesto. Los fractales son patrones sin fin creados por la repetición de ecuaciones matemáticas, que, en cualquier escala, en cualquier nivel de zoom, parecen aproximadamente los mismos. Así que si dividimos un Fractal, veremos una copia reducida del todo. Benoit Mandelbrot, quien inventó el término fractal en 1975, dijo: Un fractal es una forma hecha de partes similares al todo de alguna manera. Un fractal es una forma hecha de partes similares al todo de alguna manera. Muy claro ¿no? Aquí hay algunos ejemplos: ¿Qué es un árbol fractal? Imagínese una rama, y las ramas salen de ella, y luego dos ramas salen de cada rama, y así sucesivamente... eso es lo que parece un árbol fractal. Su forma proviene del triángulo Sierpinski (o gaseta Sierpinski). Como puede ver, uno se convierte en el otro al cambiar el ángulo entre las ramas: Hoy, acabaremos con una figura similar a la forma final de ese GIF. Escribir el árbol fractal en vanilla JS En primer lugar, aquí está el producto final (puedes ajustarlo a lo largo del camino): Ahora vamos a dibujar eso, paso a paso. En primer lugar, inicializamos nuestro archivo index.html con una tela de cualquier tamaño razonable y una etiqueta de script donde estará todo nuestro código JS. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="my_canvas" width="1000" height="800"></canvas> <script></script> </body> </html> Luego comenzamos a escribir nuestro JavaScript. Inicializamos nuestro elemento de tela en JS, accediéndolo a través de la variable myCanvas y creando el contexto de renderización 2D con la variable ctx (contexto). <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="my_canvas" width="1000" height="800"></canvas> <script> var myCanvas = document.getElementById("my_canvas"); var ctx = myCanvas.getContext("2d"); </script> </body> </html> Así que sí, el método getContext agrega propiedades y métodos que le permiten dibujar, en este caso, en 2D. ¿Cómo podemos definir el algoritmo para dibujar un árbol fractal? Veamos, sabemos que las ramas se vuelven cada vez más pequeñas y que cada rama termina con dos ramas que salen de ella, una a la izquierda y otra a la derecha. En otras palabras, cuando una rama es lo suficientemente larga, aplique dos ramas más pequeñas a ella. Parece que debemos usar alguna declaración recursiva en algún lugar, ¿no es así? Volviendo al código, ahora definimos nuestra función que debe tomar al menos cuatro argumentos: las coordenadas X y Y donde comienza la rama, la longitud de su rama, y su ángulo. fractalTree Dentro de nuestra función, comenzamos el dibujo con el método beginPath() y luego guardamos el estado de la tela con el método save() . <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="my_canvas" width="1000" height="800"></canvas> <script> var myCanvas = document.getElementById("my_canvas"); var ctx = myCanvas.getContext("2d"); function draw(startX, startY, len, angle) { ctx.beginPath(); ctx.save(); } </script> </body> </html> El método beginPath se utiliza a menudo cuando se inicia una nueva línea o figura que tiene un estilo fijo, como el mismo color a lo largo de toda la línea, o el mismo ancho. Ahora dibujaremos nuestro Árbol Fractal dibujando una línea (branca), girando la tela, dibujando la próxima rama, y así sucesivamente. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="my_canvas" width="1000" height="800"></canvas> <script> var myCanvas = document.getElementById("my_canvas"); var ctx = myCanvas.getContext("2d"); function draw(startX, startY, len, angle) { ctx.beginPath(); ctx.save(); ctx.translate(startX, startY); ctx.rotate(angle * Math.PI/180); ctx.moveTo(0, 0); ctx.lineTo(0, -len); ctx.stroke(); if(len < 10) { ctx.restore(); return; } draw(0, -len, len*0.8, -15); draw(0, -len, len*0.8, +15); ctx.restore(); } draw(400, 600, 120, 0) </script> </body> </html> Así que primero añadimos tres métodos, traducir, rotar y moverTo, que “mueve” el lienzo, su origen y nuestro “lápiz” para que podamos dibujar la rama en nuestro ángulo deseado.Es como dibujar una rama, luego centrar esta rama (moviendo todo el lienzo), y luego dibujar una nueva rama desde el final de nuestra rama anterior. Los dos últimos métodos antes de la afirmación si son lineTo y stroke; el primero agrega una línea recta al camino actual, y el segundo lo hace. Ahora tenemos una declaración si que dice cuándo detener la recursión, cuándo detener el dibujo. , "restaura el estado de tela más recientemente guardado pudiendo aparecer la entrada superior en la pila de estado de dibujo". MDN Docs Después de la declaración si, tenemos la llamada recursiva y otra llamada al método de restauración. Ahora ejecute el código en su navegador. ¡Por fin verá un Árbol Fractal! Es increíble, ¿verdad? ahora vamos a hacerlo aún mejor. Añadiremos un nuevo parámetro a nuestra función de dibujo, BranchWidth, para hacer que nuestro Árbol Fractal sea más realista. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="my_canvas" width="1000" height="800"></canvas> <script> var myCanvas = document.getElementById("my_canvas"); var ctx = myCanvas.getContext("2d"); function draw(startX, startY, len, angle, branchWidth) { ctx.lineWidth = branchWidth; ctx.beginPath(); ctx.save(); ctx.translate(startX, startY); ctx.rotate(angle * Math.PI/180); ctx.moveTo(0, 0); ctx.lineTo(0, -len); ctx.stroke(); if(len < 10) { ctx.restore(); return; } draw(0, -len, len*0.8, angle-15, branchWidth*0.8); draw(0, -len, len*0.8, angle+15, branchWidth*0.8); ctx.restore(); } draw(400, 600, 120, 0, 10) </script> </body> </html> Así que en cada iteración, estamos haciendo cada rama más delgada. También he cambiado el parámetro de ángulo en la llamada recursiva para hacer un árbol más "abierto". Ahora, añadamos un poco de color! y sombras, por qué no. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="my_canvas" width="1000" height="800"></canvas> <script> var myCanvas = document.getElementById("my_canvas"); var ctx = myCanvas.getContext("2d"); function draw(startX, startY, len, angle, branchWidth) { ctx.lineWidth = branchWidth; ctx.beginPath(); ctx.save(); ctx.strokeStyle = "green"; ctx.fillStyle = "green"; ctx.translate(startX, startY); ctx.rotate(angle * Math.PI/180); ctx.moveTo(0, 0); ctx.lineTo(0, -len); ctx.stroke(); ctx.shadowBlur = 15; ctx.shadowColor = "rgba(0,0,0,0.8)"; if(len < 10) { ctx.restore(); return; } draw(0, -len, len*0.8, angle-15, branchWidth*0.8); draw(0, -len, len*0.8, angle+15, branchWidth*0.8); ctx.restore(); } draw(400, 600, 120, 0, 10) </script> </body> </html> Ambos métodos de color son autoexplicativos (strokeStyle y fillStyle). también, los de sombra, shadowBlur y shadowColor. Guardar el archivo y abrirlo con su navegador para ver el producto final. ¡Cambiar el color de sombra, el estilo de cumplimiento, hacer un Árbol Fractal más corto o más largo, cambiar el ángulo, o tratar de añadir hojas, que debería ser desafiante 😉 Más allá del árbol fractal Como te mostré al principio de este post, hay diferentes Fractales. Ain’t gonna ser fácil de hacer todos los con la API de Canvas, pero debería ser posible. hice algunos de ellos en el lenguaje de programación C, y también he jugado con p5.js. p5.js es una biblioteca de JavaScript de código abierto creada por artistas, para artistas, basada en la Puedes dibujar o animar cualquier cosa imaginable.Si estás interesado en hacer arte con código, es un must. Página que puedes consultar . Lenguaje de procesamiento Inicio → Aquí ¡Gracias por leer, comentar cualquier pregunta, y nos vemos en mi siguiente post! Cubierto por socialtrendspr0 de Pixabay cubierta por de tendencia social Pixabay
