Fractals, যে রহস্যময় সংখ্যাগুলি সব জায়গায় থাকে কিন্তু অশিক্ষিত চোখের দ্বারা দেখা যায় না। আজ আমরা সবচেয়ে পরিচিত Fractals এক চিহ্নিত করব, শুধুমাত্র Vanilla JS এবং HTML5 Canvas API ব্যবহার করে। আপনি কি শিখবেন একটি Fractal গাছ কি? Vanilla JS মধ্যে Fractal গাছ লিখুন ফ্র্যাক্টাল ট্রি এর বাইরে একটি Fractal গাছ কি? একটি ফ্র্যাক্টাল গাছ সংজ্ঞায়িত করার জন্য, প্রথমে, আমরা অবশ্যই ফ্র্যাক্টাল সংজ্ঞা জানতে হবে। ফ্র্যাক্টালগুলি পুনরাবৃত্তি বৈজ্ঞানিক সমীকরণগুলির দ্বারা সৃষ্ট অনন্তকালীন প্যাটার্ন যা, যেকোনো মাত্রায়, যেকোনো জুমের মাত্রায়, প্রায় একই রকম দেখায়। সুতরাং যদি আমরা একটি ফ্র্যাক্টাল ভাগ করি, তাহলে আমরা পুরোটির একটি ছোট আকারের কপি দেখতে পাব। Benoit Mandelbrot, যিনি ১৯৭৫ সালে Fractal শব্দটি উদ্ভাবন করেন, বলেছেন: একটি ফ্র্যাক্টাল একটি উপাদান যা অংশগুলি সম্পূর্ণরূপে সম্পূর্ণরূপে অনুরূপ। একটি ফ্র্যাক্টাল একটি উপাদান যা অংশগুলি সম্পূর্ণরূপে সম্পূর্ণরূপে অনুরূপ। বেশ পরিষ্কার, তাই না? এখানে কিছু উদাহরণ: এখন, একটি Fractal গাছ কি? একটি শাখা, এবং শাখা থেকে বেরিয়ে আসে, এবং তারপর প্রতিটি শাখা থেকে দুটি শাখা বেরিয়ে আসে, এবং তাই ... এটি একটি ফ্র্যাক্টাল গাছের মতো দেখায়। এর আকৃতি Sierpinski ত্রিভুজ (অথবা Sierpinski গ্যাসেট) থেকে আসে। আপনি দেখতে পারেন, একটি শাখাগুলির মধ্যে কোণ পরিবর্তন করার সময় অন্য হয়ে যায়: আজ, আমরা সেই GIF এর চূড়ান্ত ফর্মের মতো একটি সংখ্যা দিয়ে শেষ করব। Vanilla JS মধ্যে Fractal গাছ লিখুন প্রথমে, এখানে চূড়ান্ত পণ্য (আপনি পথে এটি টুইট করতে পারেন): এখন আমরা এটিকে ধাপে ধাপে আঁকাবো। প্রথমে, আমরা আমাদের 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 এ আমাদের ক্যানভাস উপাদানটি শুরু করি, myCanvas বিকল্পগুলির মাধ্যমে এটি অ্যাক্সেস করে এবং ctx (সংক্রান্ত) বিকল্পগুলির সাথে 2D রেন্ডারিং পরিবেশ তৈরি করে। <!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 মধ্যে আঁকতে দেয়। কিভাবে আমরা একটি ফ্র্যাক্টাল গাছ আঁকতে অ্যালগরিদম সংজ্ঞায়িত করতে পারেন? দেখুন, আমরা জানি যে শাখাগুলি ক্রমাগত ছোট হয়ে যাচ্ছে, এবং প্রতিটি শাখাটি দুটি শাখা দিয়ে শেষ হয়, একটি বামে এবং একটি ডান দিকে। অন্য কথায়, যখন একটি শাখা যথেষ্ট দীর্ঘ হয়, তখন তার উপর দুটি ছোট শাখা যোগ করুন। এটা মনে হয় যে আমরা কোথাও কিছু পুনরাবৃত্তি বাক্য ব্যবহার করা উচিত, তাই না? কোডে ফিরে, আমরা এখন আমাদের ফাংশন সংজ্ঞায়িত যে অন্তত চারটি আয়াত নেওয়া উচিত: 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 পদ্ধতি প্রায়ই ব্যবহার করা হয় যখন আপনি একটি নতুন লাইন বা চিত্র শুরু করেন যা একটি স্থিতিশীল শৈলী আছে, যেমন পুরো লাইনের পাশাপাশি একই রঙ বা একই গভীরতা। এখন আমরা আমাদের ফ্র্যাক্টাল ট্রি চিহ্নিত করে একটি লাইন (বক্ষ), প্যানভাস ঘুরে, পরবর্তী শাখা চিহ্নিত করে, ইত্যাদি। <!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, যা লিংকটি, তার উৎপত্তি এবং আমাদের "পেনাল"কে "পথ" করে, যাতে আমরা আমাদের ইচ্ছাকৃত কোণে শাখাটি আঁকতে পারি। যদি বক্তব্যের আগে শেষ দুটি পদ্ধতি lineTo এবং stroke হয়; প্রথমটি বর্তমান পথের একটি সরল লাইন যোগ করে এবং দ্বিতীয়টি এটি র্যান্ডার করে. আপনি এটি এভাবে চিন্তা করতে পারেন: lineTo আদেশ দেয়, এবং stroke এটি সম্পন্ন করে। এখন আমরা একটি যদি বাক্য আছে যা বলছে কখন পুনরায় থামাতে হবে, কখন আঁকতে থামাতে হবে। , "ট্র্যাকিং স্টেট স্ট্যাকের শীর্ষ নিবন্ধটি পপিং করে সর্বশেষ সংরক্ষিত ক্যানভাসের অবস্থা পুনরুদ্ধার করে"। MDN ডকুমেন্টস যদি বক্তব্যের পরে, আমরা পুনরাবৃত্তি কল এবং পুনরুদ্ধার পদ্ধতিতে আরেকটি কল আছে. এবং তারপর একটি কল ফাংশন যা আমরা সম্পন্ন। এখন আপনার ব্রাউজারে কোডটি চালান. আপনি অবশেষে একটি ফ্র্যাক্টাল ট্রি দেখতে পাবেন! অসাধারণ, তাই না, এখন আমরা আরও ভাল করতে পারি। আমরা আমাদের আঁকা ফাংশন একটি নতুন প্যারামিটার যোগ করব, branchWidth, আমাদের Fractal Tree আরো বাস্তবতা তৈরি করতে। <!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)। এছাড়াও, ছায়া, shadowBlur এবং shadowColor। ফাইলটি সংরক্ষণ করুন এবং আপনার ব্রাউজারের সাথে এটি খুলুন যাতে আপনি চূড়ান্ত পণ্যটি দেখতে পারেন। এখন আমি আপনাকে কোড দিয়ে খেলতে উৎসাহিত করি! ছায়া রঙ, ফিল স্টাইল পরিবর্তন করুন, একটি সংক্ষিপ্ত বা দীর্ঘ ফ্র্যাক্টাল ট্রি তৈরি করুন, কোণ পরিবর্তন করুন, অথবা বাক্স যোগ করার চেষ্টা করুন, যা চ্যালেঞ্জিং হওয়া উচিত 😉 ফ্র্যাক্টাল ট্রি এর বাইরে যেমন আমি আপনাকে এই পোস্টের শুরুতে দেখিয়েছিলাম, বিভিন্ন ফ্র্যাক্টাল রয়েছে. ক্যানভাস এপিআই দিয়ে সবগুলি তৈরি করা সহজ হবে না, তবে এটি সম্ভব হওয়া উচিত। p5.js একটি উন্মুক্ত সোর্স JavaScript লাইব্রেরি যা শিল্পীদের দ্বারা তৈরি করা হয়, শিল্পীদের জন্য। . আপনি আঁকতে বা আঁকতে পারেন যা কিছু কল্পনা করা যায়. আপনি যদি কোড দিয়ে শিল্প তৈরি করতে আগ্রহী হন তবে এটি একটি অপরিহার্য। যে পৃষ্ঠাটি আপনি চেক করতে পারেন . প্রক্রিয়াজাত ভাষা শুরু এখানে ধন্যবাদ পড়ার জন্য, কোন প্রশ্ন মন্তব্য করুন, এবং আমার পরবর্তী পোস্টে আপনাকে দেখা! কভার দ্বারা socialtrendspr0 থেকে Pixabay কভার দ্বারা socialtrendspr0 থেকে Pixabay
