I-Fractals, ama-figure amangalisayo ezivela emhlabeni wonke kodwa ayikwazi ukujabulela nge-eye untrained. Namhlanje sinikeza omunye ama-Fractals abaziwa kakhulu, usebenzisa kuphela i-Vanilla JS kanye ne-HTML5 Canvas API. Sishayele ikhodi! Yini uzothola Yini i-Fractal Tree? Ukukhishwa kwe-Fractal Tree ku-Vanilla JS Ngaphandle kwe-Fractal Tree Yini i-Fractal Tree? Ukuqhathanisa I-Fractal Tree, okokuqala, kufuneka ukwazi ukucaciswa kwe-Fractal, ngokuvamile. I-fractals iyinhlangano ezingenalutho eyenziwe ngokuguqulwa kwezinhlangano zemathemathemikhali, okuyinto, ngezinye izinga, ngezinye izinga ze-zoom, zihlanganisa ngokuvamile efanayo. Ngokuvamile, isakhiwo se-geometric esiyinhlangano esisodwa, esisodwa noma esihlukile, ivame ngokuvamile ngezinga ezahlukile. Ngakho-ke uma usihlanganisa i-Fractal, uzothola isampula esincinane yendalo. Benoit Mandelbrot, owaziwa igama le Fractal ngo-1975, wathi: I-Fractal yinkimbinkimbi eyakhelwe izinhlayiya ezivela ku-enhle ngokuvamile. I-Fractal yinkimbinkimbi eyakhelwe izinhlayiya ezivela ku-enhle ngokuvamile. Okuningi okuhlobene, noma? Ngiyazi ezinye izibonelo: Ngiyazi, ukuthi is a Fractal Tree? Thola isikhwama, kanye nezikhwama ezivela khona, bese izikhwama ezimbili ezivela kuzo zonke izikhwama, njll ... lokhu kungcono Isikhwama se-Fractal. Umbala we-Sierpinski (noma i-Sierpinski gasket) Njengoba ungakwazi ukubona, omunye kubhalwe nabanye uma ukuguqulwa kwe-angle phakathi kwama-branches: Namhlanje, siza kuqala umfanekiso efana nohlobo lokugqibela le GIF. Ukukhishwa kwe-Fractal Tree ku-Vanilla JS Okokuqala, lapha imikhiqizo ekupheleni (ngakwazi ukuguqulwa kulandelayo): Sishayele lokhu, isinyathelo esilandelayo. Okokuqala, sinikeza ifayela yethu index.html nge-canvas ye-dimensions ezingenalutho kanye ne-script tag lapho wonke ikhodi yethu ye-JS iyatholakala. <!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> Ngemuva kwalokho, siqale JavaScript yethu. Thina i-initialize element yethu ye-canvas ku-JS, ngokufinyelela nge-myCanvas variable futhi ukwakha i-context ye-2D rendering nge-ctx (context) variable. <!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> Ngakho-ke, i-methode ye-getContext ibandakanya izakhiwo kanye nama-methods ezivumela ukujabulela, kulesi khasi, ku-2D. Ngiyazi. Ungayifaka kanjani i-algorithm yokucindezela i-fractal tree? Hm... 🤔 Thola siphinde, sinazi ukuthi izindandatho zihlala ngokushesha. Futhi ukuthi ngamunye izindandatho zihlala izindandatho ezimbili, eyodwa kulabo, eyodwa kulabo. Ngokuvamile, uma isikhwama elide kakhulu, ubeka izikhwama ezimbili ezincinane. Ukuguqulwa. Ngingathanda njengoba kufanele usebenzise ezinye isihloko recursive emzimbeni, ke? Thola ku-code, sishayele umsebenzi lethu Kuyinto kufuneka ukuthatha okungenani ama-arguments ezine: i-X ne-Y i-coordinates lapho i-branch kuqala, ubude be-branch, ne-angle yayo. fractalTree Ngezansi umsebenzi yethu, siqale ukusika nge- beginPath() indlela, bese ushiye isimo le canvas nge-save() indlela. <!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> Uhlelo le-startPath isetshenziselwa ngokuvamile lapho uqala umugqa entsha noma umbhalo owenziwe ngempumelelo, njengama-color efanayo kulo lonke umugqa, noma ububanzi efanayo. Uhlelo le-Save kusetshenziselwa kuphela ukucubungula izimo zokusebenza ngokushesha ku-stack. Ngaphezu kwalokho, i-Fractal Tree iyahlekile ngokucacisa umugqa (i-branch), ukuguqulwa kwelanga, ukucacisa umugqa elilandelayo, njll. I-Fractal Tree iyahlekile ngokufanayo (ngibonise yonke indlela ngaphansi kwe-code sample): <!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> Ngakho kuqala sinikeza izindlela ezintathu, translate, rotate, and moveTo, okuyinto "ukushintshele" umbhobho, ukweseka kwakhe, futhi yethu "umbhobho" ukuze sinikeza umbhobho kwelanga ethandwa. It is like we are drawing a branch, then centering this branch (by moving the entire canvas), and then drawing a new branch from the end of our previous branch. Izindlela ezimbili ezidlulile ngaphambi kwe-if statement zihlanganisa lineTo kanye ne-stroke; okokuqala iveza umugqa wokugqibela kwelanga lokugqibela, futhi elinye ivumela. Ungathanda lokhu njengoba lokhu: lineTo inikeza isicelo, futhi i-stroke ivumela. Okunye sinayo if isifundo esithi lapho ukugcina recursion, lapho ukuphazamiseka. Umgangatho yokuguqulwa, njengoba kubhalwe ku , "ukuguqula isimo se-canvas esidlulile esithathwe ngokuvukala isihloko se-top ku-stack ye-drawing state". I-Documents ye-MDN Ngemuva kwe-if statement, thina ukubheka recursive kanye nokunye ukubheka ku-restore method. Futhi ke ukubheka ku-function ukuthi siphinde. Ngokuzenza ikhodi ku-browser yakho. Uya kuba, ekugcineni, a Fractal Tree! Ngcono kakhulu, noma? Sishayele ngokushesha. Thina ukongeza i-parameter entsha ku-Draw function yethu, i-branchWidth, ukuze kwenziwe i-Fractal Tree enhle kakhulu. <!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> Ngakho-ke ngalinye iteration, sinikeza zonke izindandatho ezincinane. Ngitholile futhi i-angle parameter ku-recursive call ukuze yenza i-tree enhle kakhulu. Ngiyaxolisa ezinye umbala! Futhi umbala, ngoko ke. <!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> Izindlela ezimbili ze-colour zihlanganisa (strokeStyle futhi fillStyle). Futhi, izindlela ze-shadow, shadowBlur kanye ne-shadowColor. Ngiyaxolisa ifayela bese ufake nge-browser yakho ukuze ubone imikhiqizo yokuqala. Ngithanda i-shadowColor, i-fillStyle, ukwenza i-Fractal Tree elide noma elide, ukuguqulwa kwingqimba, noma ucwaninga ukwengeza izikhwama, okuyinto kufanele kube lula 😉 Ngaphandle kwe-Fractal Tree Njengoba ngibonisa kuqala le post, kukhona Fractals ezahlukene. Ain't go easy ukwenza bonke abo nge Canvas API, kodwa kufanele kube kungenzeka. Ngithole ezinye abo ku-c programming language, futhi ngithole futhi p5.js. p5.js kuyinto i-Open Source JavaScript library eyenziwe ngama-artists, ngama-artists, isekelwe . Ungayifaka noma ukuhanjiswa konke okungenani. Uma unemibuzo ukwenza art nge ikhodi, kuyimfuneko. Iphasiwedi ezifakiwe . Isilinganiso se-Language Ukuqala Ngiya Okuningi, lokhu ngexesha! Thanks for reading, comment any questions, and see you in my next post! Ukuhlobisa by socialtrendspr0 kusuka ku-Pixabay Ukuhlobisa by socialtrendspr0 kusuka ku-Pixabay
