Fractals, die enigmatische figuren die overal zijn maar niet door het ongeschoolde oog kunnen worden gezien.Vandaag zullen we een van de bekendste Fractals tekenen, met alleen Vanilla JS en de HTML5 Canvas API. Wat je zult leren Wat is een fractale boom? De fractale boom schrijven in vanille JS Buiten de fractale boom Wat is een fractale boom? Om een fractale boom te definiëren, moeten we eerst de definitie van fractale natuurlijk kennen. Fractals zijn eindeloze patronen die worden gecreëerd door het herhalen van wiskundige vergelijkingen, die op elke schaal, op elk niveau van zoom, er ongeveer hetzelfde uitzien. Dus als we een fractal splitsen, zien we een kleinere kopie van het geheel. Benoit Mandelbrot, die de term Fractal in 1975 bedacht, zei: Een fractal is een vorm van delen die op de een of andere manier op het geheel lijken. Een fractal is een vorm van delen die op de een of andere manier op het geheel lijken. Heel duidelijk toch? Hier zijn enkele voorbeelden: Wat is een fractale boom? Stel je een tak, en takken die eruit komen, en dan twee takken die uit elke tak komen, enzovoort ... dat is hoe een fractale boom eruit ziet. De vorm komt van de Sierpinski driehoek (of Sierpinski gasket). Zoals je kunt zien, wordt de ene de andere wanneer de hoek tussen de takken wordt gewijzigd: Vandaag zullen we eindigen met een figuur die vergelijkbaar is met de uiteindelijke vorm van dat GIF. De fractale boom schrijven in vanille JS Allereerst, hier is het eindproduct (je kunt het onderweg aanpassen): Laten we nu dat trekken, stap voor stap. Allereerst initialiseren we ons index.html-bestand met een canvas van redelijke afmetingen en een scripttag waar al onze JS-code zal zijn. <!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> Vervolgens beginnen we met het schrijven van onze JavaScript. We initialiseren ons canvas-element op JS, door toegang te krijgen tot het via de myCanvas-variabele en het creëren van de 2D rendering context met de ctx (context) variabele. <!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> Dus ja, de getContext-methode voegt eigenschappen en methoden toe waarmee u in dit geval in 2D kunt tekenen. Hoe kunnen we het algoritme definiëren om een fractale boom te tekenen? Laten we zien, we weten dat de takken steeds kleiner worden en dat elke tak eindigt met twee takken die eruit komen, een naar links en een naar rechts. Met andere woorden, wanneer een tak lang genoeg is, bevestig er twee kleinere takken aan. Het klinkt alsof we ergens een recursieve verklaring moeten gebruiken, toch? Terug naar de code, we definiëren nu onze functie dat ten minste vier argumenten moet nemen: de X en Y coördinaten waar de tak begint, de lengte van de tak en de hoek. fractalTree Binnen onze functie beginnen we de tekening met de beginPath()-methode en slaan we de staat van het canvas op met de save()-methode. <!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> De beginPath-methode wordt vaak gebruikt wanneer u een nieuwe regel of figuur start die een vaste stijl heeft, zoals dezelfde kleur langs de hele regel of dezelfde breedte. Nu zullen we onze fractale boom tekenen door een lijn (tak) te tekenen, het canvas te draaien, de volgende tak te tekenen, enzovoort. <!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> Dus voegen we eerst drie methoden toe, translate, roteer en moveTo, die het doek, de oorsprong ervan en onze "penny" "beweegt", zodat we de tak in onze gewenste hoek kunnen tekenen. De laatste twee methoden vóór de if-verklaring zijn lineTo en stroke; de eerste voegt een rechte lijn toe aan het huidige pad en de tweede rendert het. Nu hebben we een if-verklaring die vertelt wanneer de recursie te stoppen, wanneer te stoppen met tekenen. , "herstelt de meest recent opgeslagen canvas-toestand door de bovenste vermelding in de tekeningstoestandstapel te poppen". MDN Docs Na de if-instructie hebben we de recursieve oproep en een andere oproep naar de herstelmethode. Voer nu de code uit in uw browser. U zult eindelijk een Fractal Tree zien! Geweldig, toch? laten we het nu nog beter maken. We zullen een nieuwe parameter toevoegen aan onze tekening functie, branchWidth, om onze Fractal Tree realistischer te maken. <!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> Dus in elke iteratie maken we elke tak dunner.Ik heb ook de hoekparameter in de recursieve oproep gewijzigd om een meer "open" boom te maken. Nu, laten we wat kleur toevoegen! en schaduwen, waarom niet. <!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> Beide kleurmethoden zijn zelfverklarend (strokeStyle en fillStyle). Ook de schaduw, shadowBlur en shadowColor. Sla het bestand op en open het met uw browser om het eindproduct te zien. Verander de shadowColor, de fillStyle, maak een kortere of langere Fractal Tree, verander de hoek, of probeer bladeren toe te voegen, dat zou een uitdaging moeten zijn 😉 Buiten de fractale boom Zoals ik je aan het begin van dit bericht heb laten zien, zijn er verschillende Fractals. Ain't zal gemakkelijk zijn om al die met de Canvas API te maken, maar het zou mogelijk moeten zijn. p5.js is een open source JavaScript-bibliotheek gemaakt door kunstenaars, voor kunstenaars, op basis van de Je kunt alles tekenen of animeren wat je maar kunt bedenken.Als je geïnteresseerd bent in het maken van kunst met code, is het een must. Pagina die je kunt bekijken . Verwerkingstaal begonnen hier Nou, dat is het voor nu!Bedankt voor het lezen, commentaar op eventuele vragen, en zie je in mijn volgende post! Cover door socialtrendspr0 van Pixabay dekking door van Maatschappelijke trends Pixabay
