পিক্সেল পেইন্টিং পদ্ধতির (@ লডমাস্টারের পরামর্শ অনুসারে) বিভিন্ন উপায়ে গাণিতিক সমাধানের চেয়ে উচ্চতর:
- বাস্তবায়ন অনেক সহজ। উপরের সমস্যাটি 100 টিরও কম কোডের কোডগুলিতে সমাধান করা যেতে পারে, কারণ এই জেএসফিডাল সমাধানটি দেখায় (বেশিরভাগ কারণ এটি ধারণাগতভাবে অনেক সহজ, এবং এর সাথে মোকাবিলা করার কোনও প্রকার মামলা বা ব্যতিক্রম নেই)।
- এটি আরও সাধারণ সমস্যার সাথে সহজেই খাপ খায়। এটি 2D অঙ্কন গ্রন্থাগারগুলি (যেমন, "তাদের সমস্ত!") - - যতক্ষণ না বৃত্ত, উপবৃত্তাকার, স্প্লাইনস, বহুভুজ, আপনি এটির নাম লেখেন ততক্ষণ আকারবিজ্ঞানের নির্বিশেষে এটি কোনও আকারের সাথে কাজ করে। হেক, এমনকি বিটম্যাপ চিত্রগুলি।
- গণিতের সমাধানের জন্য ~ O [n * n] এর তুলনায় পিক্সেল-পেইন্টিং সমাধানের জটিলতা ~ O [n]। এর অর্থ আকারের সংখ্যা বাড়ার সাথে সাথে এটি আরও ভাল সম্পাদন করবে।
- এবং পারফরম্যান্সের কথা বললে, আপনি প্রায়শই বিনা মূল্যে হার্ডওয়্যার ত্বরণ পাবেন, কারণ বেশিরভাগ আধুনিক 2 ডি লাইব্রেরি (HTML5 এর ক্যানভাসের মতো, আমি বিশ্বাস করি) গ্রাফিক্স এক্সিলিটরগুলিতে রেন্ডারিংয়ের কাজটি অফলোড করবে।
পিক্সেল-পেইন্টিংয়ের এক নিম্নতম দিকটি হ'ল সমাধানটির সীমাবদ্ধতা। তবে পরিস্থিতি যেমন দাবি করছে তত সহজভাবে বৃহত্তর বা ছোট ক্যানভ্যাসগুলিতে রেন্ডার করে এটি সুসংগত। দ্রষ্টব্য, এছাড়াও, 2 ডি রেন্ডারিং কোডে অ্যান্টি-এলিয়াসিং (প্রায়শই ডিফল্ট দ্বারা চালু করা) পিক্সেল-স্তরের নির্ভুলতার চেয়ে ভাল ফলন করবে। সুতরাং, উদাহরণস্বরূপ, 100x100 চিত্রকে একই মাত্রার ক্যানভাসে রেন্ডারিং করা উচিত, আমার মনে হয়, 1 / (100 x 100 x 255) = .000039% এর ক্রম অনুসারে নির্ভুলতা পাওয়া উচিত ... যা সম্ভবত "যথেষ্ট ভাল" সকলের জন্য তবে সবচেয়ে দাবিদার সমস্যা।
<p>Area computation of arbitrary figures as done thru pixel-painting, in which a complex shape is drawn into an HTML5 canvas and the area determined by comparing the number of white pixels found in the resulting bitmap. See javascript source for details.</p>
<canvas id="canvas" width="80" height="100"></canvas>
<p>Area = <span id="result"></span></p>
// Get HTML canvas element (and context) to draw into
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Lil' circle drawing utility
function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2);
ctx.fill();
}
// Clear canvas (to black)
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Fill shape (in white)
ctx.fillStyle = 'white';
circle(40, 50, 40);
circle(40, 10, 10);
circle(25, 15, 12);
circle(35, 90, 10);
// Get bitmap data
var id = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = id.data; // Flat array of RGBA bytes
// Determine area by counting the white pixels
for (var i = 0, area = 0; i < pixels.length; i += 4) {
area += pixels[i]; // Red channel (same as green and blue channels)
}
// Normalize by the max white value of 255
area /= 255;
// Output result
document.getElementById('result').innerHTML = area.toFixed(2);