Fractals, sa yo figi entigmatik ki nan tout kote, men pa ka wè pa okenn okipe. Jodi a nou pral desen youn nan fractals yo pi byen li te ye, lè l sèvi avèk sèlman Vanilla JS ak HTML5 Canvas API. Ki sa ou pral aprann Ki sa ki se yon Fraktal Tree? ekri ak lèt fractal nan Vanilla JS Plis pase fraksyon an Ki sa ki se yon Fraktal Tree? Pou defini yon Fraktal Tree, an premye, nou bezwen konnen definisyon an nan Fraktal, klè. Fractails se modèl ki pa fini ki te kreye pa repete ekivalan matematik, ki, sou nenpòt ki nivo, sou nenpòt ki nivo zoom, sanble apeprè menm jan an. Sa vle di, yon objè jeometrik ki estrikti prensipal li yo, asye oswa fragman, repete tèt li nan diferan skal. Se konsa, si nou divize yon fractal, nou pral wè yon kopi nan gwosè redwi nan tout la. Benoit Mandelbrot, ki te fonde tèm la Fractal nan 1975, te di: Yon fractal se yon fòm ki te fè nan pati ki sanble ak tout nan yon fason. Yon fractal se yon fòm ki te fè nan pati ki sanble ak tout nan yon fason. Li trè klè, se pa? Isit la se kèk egzanp: Koulye a, ki sa ki se yon fraksyon Tree? Imagine yon jaden, ak jaden ki vini soti nan li, ak Lè sa a, de jaden ki vini soti nan chak jaden, ak sou sa ... se sa ki yon Fraktal Tree sanble. Fòm li soti nan triangle Sierpinski (oswa gazèt Sierpinski). Kòm ou ka wè, youn vin lòt la lè chanje angle a ant ranje: Jodi a, nou pral fini ak yon figi ki sanble ak fòm final la nan GIF sa a. ekri ak lèt fractal nan Vanilla JS Premyèman, isit la se pwodwi a final (ou ou ka ajiste li sou wout la): Koulye a, nou pral fè sa a, etap pa etap. Premyèman, nou inisyalize dosye index.html nou an ak yon canvas nan nenpòt dimansyon rezonab ak yon tag script kote tout kòd JS nou an pral. <!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> Apre sa, nou kòmanse ekri JavaScript nou an. Nou initialize eleman canvas nou an sou JS, pa aksè nan li atravè varyab la myCanvas ak kreye kontexte a 2D rendu ak varyab la ctx (kontekst). <!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> Se konsa, yeah, metòd la getContext ajoute pwopriyete ak metòd ki pèmèt ou desen, nan ka sa a, nan 2D. Kouman nou ka defini algorithm la nan desen yon fraksal? Hm... 🤔 Tcheke, nou konnen ke jaden yo toujou diminye, ak ke chak jaden fini ak de jaden soti nan li, youn nan bò a ak youn nan bò a. Sa vle di, lè yon branch se long ase, fije de jaden ti nan li. Repete. Li sanble ke nou ta dwe sèvi ak kèk deklarasyon recursiv yon kote, se pa? Retounen nan kòd la, nou kounye a defini fonksyon nou an ki ta dwe pran omwen kat argiman: koordinasyon yo X ak Y kote branch la kòmanse, longè nan branch li yo, ak angle li yo. fractalTree Nan fonksyon nou an, nou kòmanse desen la ak metòd la beginPath() ak Lè sa a, sove eta a nan canvas la ak metòd la 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> Metòd la beginPath se souvan itilize lè ou kòmanse yon liy nouvo oswa figi ki gen yon style fixe, tankou koulè a menm ant tout liy la, oswa lajè a menm. Metòd la sove sèlman sove tout estati a nan twal la pa peze estati a kounye a sou yon piki. Koulye a, nou pral desen fractal nou an pa desen yon liy (branche), rote tablo a, desen branche a pwochen, ak sou sa. Li se tankou sa a (mwen pral eksplike chak metòd anba echantiyon kòd la): <!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> Se konsa, nou an premye ajoute twa metòd, tradui, rote, ak moveTo, ki "move" canvas la, orijin li yo, ak "pencil" nou an, pou nou ka desen branch la nan angle desizyon nou an. Li se tankou nou desen yon branch, Lè sa a santre branch sa a (pa deplase tablo a tout antye), ak Lè sa a desen yon nouvo branch soti nan fen nan branch anvan nou an. Dwa metòd dènye anvan si deklarasyon an se lineTo ak stroke; premye a ajoute yon liy rektangilè nan chemen kounye a, ak dezyèm la rendre li. Ou ka panse sou li tankou sa a: lineTo bay lòd la, ak stroke egzekite li. Koulye a, nou gen yon si deklarasyon ki di lè yo sispann recursion, lè yo sispann desen. Metòd la restaure, kòm te di nan , "Restore estati ki pi dènyèman sove canvas pa popping entèlijans tèt la nan stack a desen estati". MDN dokiman Apre if deklarasyon an, nou gen apèl la recursif ak yon lòt apèl nan metòd la restaure. Apre sa, yon apèl nan fonksyon an ki nou jis fini. Koulye a, kouri kòd la nan navigatè ou. Ou pral wè, finalman, yon Fraktal Tree! Li bèl, pa? Koulye a, nou pral fè li menm pi bon. Nou pral ajoute yon paramèt nouvo nan fonksyon desen nou an, branchWidth, yo fè Fraktal Tree nou an plis reyèl. <!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> Se konsa, nan chak iterasyon, nou fè chak branch pi ti. Mwen te tou chanje paramèt la angle nan apèl rekursif yo fè yon plis "open" fwi. Koulye a, nou ajoute yon kèk koulè! Ak omwen, poukisa pa. <!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> Tou de metòd koulè yo eksplike pwòp tèt ou (strokeStyle ak fillStyle). Epitou, yo nan omwen, shadowBlur ak shadowColor. Save dosye a ak louvri li ak navigatè ou a yo wè pwodwi final la. Koulye a, mwen ankouraje ou jwe ak kòd la! Chanje ShadowColor, style la, fè yon ti oswa pi long Fraktal Tree, chanje angle a, oswa eseye ajoute blòk, ki ta dwe yon repitasyon 😉 Plis pase fraksyon an Kòm mwen te montre ou nan kòmansman an nan pòs sa a, gen diferan Fractals. Ain't gonna dwe fasil fè tout moun ak API a Canvas, men li ta dwe posib. Mwen te fè kèk nan yo nan lang C pwogramasyon, ak mwen te tou jwe alantou ak p5.js. p5.js se yon Open Source JavaScript bibliyotèk kreye pa atis, pou atis, ki baze sou . Ou ka desen oswa animasyon nenpòt ki imajinasyon. Si ou enterese nan fè atizay ak kòd, li se yon nesesè. Yo gen yon gwo paj ki ou ka tcheke . pwosesis lang Kòmanse isit la Bon, sa a se pou kounye a! Mèsi pou li, kòmantè nenpòt kesyon, ak wè ou nan pwochen post m '! Kouvèti pa socialtrendspr0 soti nan Pixabay Kouvèti pa socialtrendspr0 soti nan Pixabay
