Fractals, ces figures énigmatiques qui sont partout mais ne peuvent pas être vus par l'œil non entraîné. Aujourd'hui, nous allons dessiner l'un des Fractals les plus connus, en utilisant uniquement Vanilla JS et l'API HTML5 Canvas. Ce que vous apprendrez Qu’est-ce qu’un arbre fractal ? Écrire l'arbre fractal en vanille JS Au-delà de l’arbre fractal Qu’est-ce qu’un arbre fractal ? Pour définir un arbre fractal, nous devons d’abord connaître la définition de fractal, bien sûr. Les fractales sont des modèles sans fin créés par la répétition d'équations mathématiques, qui, à n'importe quelle échelle, à n'importe quel niveau de zoom, ressemblent à peu près les mêmes. Donc, si nous divisons un Fractal, nous verrons une copie réduite du tout. Benoit Mandelbrot, qui a inventé le terme fractal en 1975, a déclaré : Un fractal est une forme composée de parties qui ressemblent en quelque sorte au tout. Un fractal est une forme composée de parties qui ressemblent en quelque sorte au tout. C’est assez clair, non ? Voici quelques exemples : Qu’est-ce qu’un arbre fractal ? Imaginez une branche et des branches qui en sortent, puis deux branches qui sortent de chaque branche, et ainsi de suite... voilà à quoi ressemble un arbre fractal. Sa forme provient du triangle de Sierpinski (ou gazette de Sierpinski). Comme vous pouvez le voir, l'un devient l'autre lorsque vous changez l'angle entre les branches: Aujourd’hui, nous terminerons avec une figure similaire à la forme finale de ce GIF. Écrire l'arbre fractal en vanille JS Tout d’abord, voici le produit final (vous pouvez le modifier en cours de route): Maintenant, faisons le point, étape par étape. Tout d’abord, nous initialisons notre fichier index.html avec une toile de dimensions raisonnables et une étiquette de script où se trouvera tout notre code 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> Ensuite, nous commençons à écrire notre JavaScript. Nous initialisons notre élément de canvas sur JS, en y accédant via la variable myCanvas et en créant le contexte de rendu 2D avec la variable ctx (contexte). <!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> Donc oui, la méthode getContext ajoute des propriétés et des méthodes qui vous permettent de dessiner, dans ce cas, en 2D. Comment définir l’algorithme pour dessiner un arbre fractal ? Voyons, nous savons que les branches deviennent de plus en plus petites, et que chaque branche se termine par deux branches, une à gauche et une à droite. En d'autres termes, quand une branche est suffisamment longue, attachez deux branches plus petites à elle. Cela semble que nous devrions utiliser une déclaration récurrente quelque part, n’est-ce pas? Retour au code, nous définissons maintenant notre fonction Cela doit prendre au moins quatre arguments: les coordonnées X et Y où la branche commence, la longueur de sa branche et son angle. fractalTree Dans notre fonction, nous commençons le dessin avec la méthode beginPath() puis enregistrons l'état de la toile avec la méthode 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> La méthode beginPath est souvent utilisée lorsque vous démarrez une nouvelle ligne ou une figure qui a un style fixe, comme la même couleur le long de toute la ligne, ou la même largeur. Maintenant, nous allons dessiner notre arbre fractal en dessinant une ligne (branche), en tournant la toile, en dessinant la branche suivante, et ainsi de suite. <!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> Ainsi, nous ajoutons d’abord trois méthodes, traduisons, tournons et déplaçons, qui « déplacent » la toile, son origine et notre « crayon » afin que nous puissions dessiner la branche à notre angle souhaité. Les deux dernières méthodes avant l'affirmation si sont lineTo et stroke; le premier ajoute une ligne droite au chemin actuel, et le second le rend. Maintenant, nous avons une déclaration si qui dit quand arrêter la récursion, quand arrêter le dessin. , "restaure l'état de toile le plus récemment enregistré en cliquant sur l'entrée supérieure dans la pile d'état de dessin". MDN Docs Après l'affirmation si, nous avons l'appel récurrent et un autre appel à la méthode de restauration. Maintenant, exécutez le code dans votre navigateur. Vous verrez, enfin, un arbre fractal! C’est génial, n’est-ce pas ? je vais faire encore mieux. Nous ajouterons un nouveau paramètre à notre fonction de dessin, BranchWidth, pour rendre notre arbre fractal plus réaliste. <!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> Donc, dans chaque itération, nous rendons chaque branche plus mince. J'ai également changé le paramètre d'angle dans l'appel récursif pour faire un arbre plus "ouvert". Maintenant, ajoutez un peu de couleur! et des ombres, pourquoi pas. <!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> Les deux méthodes de couleur sont auto-explicatives (strokeStyle et fillStyle). Sauvegardez le fichier et ouvrez-le avec votre navigateur pour voir le produit final. Maintenant, je vous encourage à jouer avec le code! Changer la couleur de l'ombre, le style de remplissage, faire un arbre fractal plus court ou plus long, changer l'angle, ou essayer d'ajouter des feuilles, ce qui devrait être difficile 😉 Au-delà de l’arbre fractal Comme je vous l'ai montré au début de ce post, il existe différents Fractals. Ain't gonna être facile de faire tous ceux avec l'API Canvas, mais il devrait être possible. j'ai fait certains de ceux dans le langage de programmation C, et j'ai également joué avec p5.js. p5.js est une bibliothèque JavaScript open source créée par des artistes, pour les artistes, basée sur le Vous pouvez dessiner ou animer n'importe quoi imaginable. Si vous êtes intéressé à faire de l'art avec du code, c'est un must. Une page que vous pouvez vérifier . Langue de traitement Démarrer ici Merci pour la lecture, commenter toutes les questions, et à vous voir dans mon prochain post! Couverture par socialtrendspr0 de Pixabay Couverture par socialtrendspr0 de Pixabay
