අද අපි වඩාත් ප්රසිද්ධ ප්රග්ටල් එකක් නිර්මාණය කරමු, පමණක් Vanilla JS සහ HTML5 Canvas API භාවිතා කරමු. මොනවද ඉගෙන ගන්නේ Fraktal Tree යනු කුමක්ද? ෆ්රැක්ටල් ගස Vanilla JS හි ලිවීම Fractal Tree පිටින් Fraktal Tree යනු කුමක්ද? පළමුව, ප් රක්තල් ගස හඳුනා ගැනීම සඳහා, අප ප් රක්තල්ගේ තේරුම දැනගත යුතුය. ෆ්රැක්ටල් යනු සෑම විටම අතුරුදහන් වූ ආකෘති වන අතර එය ඕනෑම මට්ටමක, ඕනෑම මට්ටමක, එක්තරා මට්ටමක සමාන පෙනුමකි. එබැවින් අපි ෆ්රැක්ටල් බෙදන්නේ නම්, අපි මුළුමනින්ම අඩු ප් රමාණයේ පිටපතක් දකිනු ඇත. 1975 දී Fractal වචනය නිර්මාණය කළ Benoit Mandelbrot පවසයි: ෆ්රැක්ටල් යනු යම් ආකාරයකින් සම්පූර්ණයට සමාන කොටස් වලින් හැඳින්වෙන ආකෘතියකි. ෆ්රැක්ටල් යනු යම් ආකාරයකින් සම්පූර්ණයට සමාන කොටස් වලින් හැඳින්වෙන ආකෘතියකි. හරිම පැහැදිලියි නේද? මෙන්න උදාහරණ කිහිපයක්: දැන් මොකක්ද ෆ්රැක්ටල් ගස? අර්ධයක්, සහ අර්ධ එය පිටතට පැමිණෙන අතර, පසුව සෑම අර්ධයක්ම පිටතට පැමිණෙන අර්ධ දෙකක්, සහ එවැනි දේ ... ඒකයි ෆ්රැක්ටල් ගස පෙනෙන්නේ. එහි ආකෘතිය Sierpinski තුන්දෙනෙකු (හෝ Sierpinski gasket) සිට පැමිණේ. ඔබ දකින පරිදි, විෂ අතර කොන්දේසි වෙනස් කරන විට එකක් අනෙකුත් බවට පත් වේ: අද, අපි ඒ GIF අවසාන ආකාරයට සමාන අංකයක් සමග අවසන් වනු ඇත. ෆ්රැක්ටල් ගස Vanilla JS හි ලිවීම පළමුවෙන්ම, මෙන්න අවසාන නිෂ්පාදනය (ඔබ එය මාර්ගය හරහා වෙනස් කළ හැකිය): එහෙනම් දැන් ඒකට පියවරක්, පියවරක් දාමු. පළමුවෙන්ම, අපි අපේ index.html ගොනුව සාධාරණ ප්රමාණයක් ඕනෑම කපාටයක් හා අපගේ සියලුම 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> එවිට අපගේ JavaScript ලිවීමට ආරම්භ කරමු. අපි JS මත අපගේ canvas අංගය ආරම්භ කරමු, myCanvas වෙනස්කම් හරහා එය ප්රවේශ කිරීමෙන් සහ ctx (කොන්දේසි) වෙනස්කම් සමඟ 2D rendering කොන්දේසි නිර්මාණය කිරීමෙන්. <!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> එබැවින් ඔව්, getContext ක්රමය ඔබට, මෙම අවස්ථාවේ දී, 2D හි සිතුවම් කිරීමට ඉඩ සලසන දේපල සහ ක්රම එකතු කරයි. දැන් හිතන්න කාලයයි.අපි කොහොමද ෆ්රැක්ටල් ගස් හදා ගැනීමට ඇල්ගාටරියක් සකස් කරන්නේ? බලමු, අපි දන්නවා, ගොවිපළ සෑම විටම කුඩා වන අතර, සෑම ගොවිපළක්ම අවසානය වන්නේ, වම් පැත්තට එක් සහ දකුණු පැත්තට එක් ගොවිපළක් ඇති බව. එනම්, එක් අංගයක් ප් රමාණයෙන් දිගු වූ විට, ඊට කුඩා අංග දෙකක් සකස් කරන්න. එය කොහේ හරි recursive ප්රකාශයක් භාවිතා කළ යුතු බව පෙනේ, නේද? නැවත කේතයට, දැන් අපි අපේ කාර්යය තීරණය කරමු ඒ සඳහා අවම වශයෙන් හතරක් අවශ් ය විය යුතුය: විෂය ආරම්භ වන ස්ථානයෙහි X සහ Y සංකේත, එහි විෂයයේ දිග සහ එහි කොන්දේසි. fractalTree අපගේ කාර්යය ඇතුළත, අපි beginPath() ක්රමය සමඟ චාරිකාව ආරම්භ, ඉන්පසු save() ක්රමය සමඟ canvas තත්ත්වය ඉතිරි. <!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> beginPath ක් රමය බොහෝ විට නිශ්චිත ආකෘතිය ඇති නව රේඛාවක් හෝ සංඛ්යාවක් ආරම්භ කරන විට භාවිතා වේ, මුළු රේඛාව පුරා එකම වර්ණය වැනි, හෝ එකම පුළුල්. දැන් අපි අපගේ ෆ්රැක්ටල් ගස පිරිනැමෙනු ඇත රේඛාවක් (විශාලයක්) පිරිනැමෙනු ඇත, පිරිනැමෙනු ඇත, ඊළඟ පිරිනැමෙනු ඇත, ආදිය.It goes like this (I will explain each method below the 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> ඒ නිසා අපි මුලින්ම ක්රම තුනක් එකතු කරමු, පරිවර්තනය කරන්න, පරිවර්තනය කරන්න, හා moveTo, එය පින්තූර, එහි මූලධර්මය, සහ අපගේ "පින්තූරයක්" සංවර්ධනය කරයි, එබැවින් අපි අපේ අවශ්ය කොන්දේසි මත පින්තූරයක් සකස් කළ හැකිය. මෙම if ප් රකාශයට පෙර අවසාන ක්රම දෙක lineTo සහ stroke වේ; පළමු ක්රමයට සෘජු මාර්ගය එකතු කරයි, දෙවන ක්රමයට එය ප්රදර්ශනය කරයි. දැන් අපි ප්රකාශයක් තියෙනවා නම් කවදා නවත්තන්න recursion, කවදා නවත්තන්න.The restore method, as stated in the , "සමහර විට මෑතකදී රචනා කරන ලද තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර තනතුර MDN දොස් If ප්රකාශය පසු, අපි නැවත ඇමතුමක් සහ නැවත නැවත ක්රමයට තවත් ඇමතුමක් ඇත. දැන් ඔබගේ බ්රවුසරයේ කේතය ක්රියාත්මක කරන්න.ඔබ අවසානයේදී, ප්රොක්ටල් ගස් දකින්න! අපූරුයි නේද?දැන් අපි ඒක වඩාත් හොඳට කරමු. අපි අපගේ ෆ්රැක්ටල් ගස වඩා සැබෑ බවට පත් කිරීම සඳහා අපගේ පින්තූර ක්රියාකාරිත්වයට නව ප්රමාණයක් එකතු කරනු ඇත, branchWidth. <!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> එබැවින් සෑම විටම අපි සෑම අංගයක්ම දඟ කර ගනිමු.මම තවදුරටත් "සහ" ගස් බවට පත් කිරීම සඳහා ප්රතික්රියාකාරී ඇමතුමෙහි කොන්ද ප්රමාණවත් වෙනස් කර ඇත. දැන්, අපි පාට ටිකක් එකතු කරමු! <!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> වර්ණ දෙකම ස්වයංක්රීයයි (strokeStyle සහ fillStyle). ඒකයි!ඔබේ බ්රවුසරය සමඟ එය විවෘත කර අවසාන නිෂ්පාදනය බලන්න. දැන් මම කේතය සමඟ සෙල්ලම් කිරීමට ඔබට නිර්දේශ කරනවා! ShadowColor, fillStyle වෙනස් කිරීම, කෙටි හෝ දිගු Fractal ගස, කොන්දේසි වෙනස් කිරීම, හෝ පෙති එකතු කිරීමට උත්සාහ කරන්න, එය අභියෝගයක් විය යුතුය 😉 Fractal Tree පිටින් මම මෙම ලිපිය ආරම්භයේදී ඔබට පෙන්වා දී ඇති පරිදි, විවිධ Fractals ඇත. Ain't go to be easy to make all those with the Canvas API, but it should be possible. I made some of those in the C programming language, and I have also played around with p5.js. p5.js යනු කලාකරුවන් විසින් නිර්මාණය කරන ලද විවෘත මූලාශ්රය JavaScript පුස්තකාලයකි. ඔබ සිතා ගත හැකි ඕනෑම දෙයක් සකස් හෝ සජීවී කළ හැකිය. ඔබ කේතය සමඟ කලා නිර්මාණය කිරීමට උනන්දු නම්, එය අත්යවශ්ය වේ. ඔබ පරීක්ෂා කළ හැකි පිටුව . Processing භාෂාව ආරම්භය මෙතන හොඳයි, ඒකයි දැන්! කියවීම සඳහා ස්තුතියි, ඕනෑම ප්රශ්නයකට ප්රතිචාර දැක්වීම, සහ මගේ ඊළඟ ලිපිය තුළ ඔබ හමුවෙමු! Cover by socialtrendspr0 සිට Pixabay Cover එක සිට සමාජ ප් රදර්ශනය Pixabay වෙත
