Display Hardware, Raster & Vector Graphics

Display Hardware

কম্পিউটার অ্যালগোরিদম দিয়ে আমরা যা-ই আঁকি না কেন — সেটা ২ডি লাইন হোক কিংবা ৩ডি গেমের জটিল কোনো দৃশ্য — শেষ পর্যন্ত তা মানুষের চোখে দৃশ্যমান করতে হার্ডওয়্যার ডিভাইসের প্রয়োজন হয়। কম্পিউটার গ্রাফিক্সের ডিসপ্লে হার্ডওয়্যারকে প্রধানত দুটি ভাগে ভাগ করা হয়: ভিডিও ডিসপ্লে ডিভাইস (Soft-Copy Video Display Devices) — যা স্ক্রিনে আলো ফেলে ছবি দেখায়, এবং হার্ড-কপি ডিভাইস (Hard-Copy Devices) — যা কাগজ বা অন্য কোনো মাধ্যমে স্থায়ী ছবি ছাপায়।

ভিডিও ডিসপ্লে ডিভাইস (Video Display Devices)

ভিডিও ডিসপ্লে ডিভাইসগুলো আলো নির্গমন বা রূপান্তরের মাধ্যমে প্রতি সেকেন্ডে বহুবার স্ক্রিনের ছবি আপডেট করে গ্রাহকের চোখে ডাইনামিক দৃশ্য ফুটিয়ে তোলে।

১. ক্যাথোড রে টিউব (CRT - Cathode Ray Tube)

বিংশ শতাব্দীর ষাট থেকে নব্বইয়ের দশক পর্যন্ত মনিটর ও টিভির প্রধান প্রযুক্তি ছিল CRT।

• কার্যপ্রণালী: একটি শূন্যগর্ভ কাচের টিউবের (vacuum tube) ভেতরে থাকা ফিল্যামেন্ট উত্তপ্ত হয়ে ইলেকট্রন বিম (electron beam) নির্গত করে। ম্যাগনেটিক ডিফ্লেকশন কয়েল এই বিমকে স্ক্রিনের ওপর অনুভূমিক ও উল্লম্বভাবে চালনা করে। স্ক্রিনের ভেতরের ফসফর (phosphor) স্তরে ইলেকট্রন বিম আঘাত করলে তা উজ্জ্বল আলো ছড়ায়।
• রিফ্রেশ রেট (Refresh Rate): ফসফরের উজ্জ্বলতা খুব দ্রুত কমে যায় বলে প্রতি সেকেন্ডে অন্তত ৬০ বার ($60\text{ Hz}$) পুরো স্ক্রিনে বিম চালনা করতে হয়, একে Refresh Rate বলে।
• বৈশিষ্ট্য: চমৎকার কালার ডেপথ পাওয়া যেত, তবে মনিটরগুলো ছিল অনেক ভারী, আকারে বড় এবং প্রচুর বিদ্যুৎ খরচ করত।

২. লিকুইড ক্রিস্টাল ডিসপ্লে (LCD - Liquid Crystal Display)

CRT-এর বড় আকার ও বিদ্যুৎ খরচের সমস্যার সমাধান হিসেবে আসে ফ্ল্যাট-প্যানেল LCD ডিসপ্লে।

• কার্যপ্রণালী: LCD নিজে কোনো আলো তৈরি করে না; এটি পেছনের ব্যাকলাইট (Backlight) থেকে আসা আলোকে ফিল্টার করে। দুটি পোলারাইজিং ফিল্টারের মাঝে লিকুইড ক্রিস্টাল মলিকিউল থাকে। এতে বৈদ্যুতিক ভোল্টেজ দিলে ক্রিস্টালগুলো মুচড়ে যায় (twist করে) এবং পিক্সেলের আলো নিয়ন্ত্রণ করে।
• বৈশিষ্ট্য: ওজনে একদম হালকা, পাতলা, কম বিদ্যুৎ খরচ করে এবং কোনো জ্যামিতিক বিকৃতি (distortion) নেই।

৩. এলইডি ও ওএলইডি (LED & OLED Displays)

আধুনিক ডিসপ্লে প্রযুক্তির মূল ড্রাইভার হলো LED ও OLED।

• LED LCD: ব্যাকলাইট হিসেবে ফ্লুরোসেন্ট ল্যাম্পের বদলে ছোট LED ব্যবহার করা হয়, যা ছবির ব্রাইটনেস ও কন্ট্রাস্ট বাড়ায়।
• OLED (Organic LED): এখানে আলাদা ব্যাকলাইটের দরকার হয় না। প্রতিটি পিক্সেল নিজেই আলো তৈরি করে। কালো রঙ দেখানোর সময় পিক্সেলটি পুরোপুরি বন্ধ হয়ে যায়, ফলে ট্রু ব্ল্যাক (True Black) ও অসীম কন্ট্রাস্ট অনুপাত পাওয়া যায়।

---

হার্ড-কপি ডিভাইস (Hard-Copy Devices)

ডিজিটাল গ্রাফিক্সকে কাগজ, ফিল্ম বা প্লাস্টিকের মতো স্থায়ী মাধ্যমে রূপান্তর করার জন্য হার্ড-কপি ডিভাইস ব্যবহার করা হয়।

---

Raster Graphics (রাস্টার গ্রাফিক্স)

Raster শব্দটি এসেছে লাতিন শব্দ rastrum (আঁচড়ানো বা rake) থেকে। আজকের যুগে ডিজিটাল ক্যামেরা দিয়ে ছবি তোলা থেকে শুরু করে ওয়েব ও কম্পিউটারের অধিকাংশ ছবি উপস্থাপনে Raster Graphics (বা Bitmap Graphics) ব্যবহার করা হয়।

রাস্টার ইমেজের গঠন

একটি রাস্টার ইমেজ হলো ছোট ছোট ছক বা গ্রিডের মতো সাজানো একটি ২ডি ম্যাট্রিক্স (2D Array)।

• পিক্সেল (Pixel = Picture Element): পিক্সেল হলো কোনো ডিজিটাল ইমেজের বা ডিসপ্লের সবচেয়ে ক্ষুদ্রতম স্বাধীন উপাদান।
• রেজোলিউশন (Resolution): একটি ছবিতে অনুভূমিক ও উল্লম্বভাবে মোট কতগুলো পিক্সেল আছে (যেমন: $1920 \times 1080$)। যত বেশি পিক্সেল থাকবে, ইমেজের রেজোলিউশন ও স্পষ্টতা তত বাড়বে।
• পিক্সেল কালার (Color Value): প্রতিটি পিক্সেলের একটি নির্দিষ্ট রঙের মান থাকে। ২৪-বিট ট্রু-কালারে প্রতিটি পিক্সেল রেড, গ্রিন ও ব্লু (RGB) প্রতিটি কালারের জন্য ৮-বিট করে মোট ১৬.৭ মিলিয়নেরও বেশি রঙের মান সংরক্ষণ করতে পারে।

রাস্টার সিস্টেমে লাইন প্রদর্শন

যেহেতু ডিসপ্লে স্ক্রিন নিজেই বর্গাকার পিক্সেলের গ্রিড, তাই একটি জ্যামিতিক সরলরেখাকে সরাসরি মসৃণভাবে আঁকা যায় না। লাইন ড্রয়িং অ্যালগরিদম (যেমন Bresenham's Line Algorithm) হিসাব করে যে লাইনের গতিপথের ওপর কোন কোন পিক্সেলগুলো পড়েছে, এবং সেই নির্দিষ্ট পিক্সেলগুলোতে রঙ বসিয়ে লাইনের রূপ দেওয়া হয়।

জনপ্রিয় রাস্টার ফরম্যাট ও সফটওয়্যার

• কমন ফরম্যাট: .jpg / .jpeg (সংকুচিত ছবি), .png (স্বচ্ছ ব্যাকগ্রাউন্ডসহ), .bmp (র বিটম্যাপ), .gif (ছোট অ্যানিমেশন)।
• জনপ্রিয় সফটওয়্যার: Adobe Photoshop, PaintShop Pro, Corel Photo-Paint, GIMP।

---

Raster Image Problems (রাস্টার ইমেজের সমস্যা)

ফটোগ্রাফির জন্য রাস্টার গ্রাফিক্স সেরা হলেও এর কিছু বড় সীমাবদ্ধতা রয়েছে:

১. রেজোলিউশন নির্ভরতা (Resolution-Dependent)

রাস্টার ইমেজ পুরোপুরি রেজোলিউশনের ওপর নির্ভর করে। ছবি তৈরির সময় এতে মোট যতগুলো পিক্সেল নির্ধারণ করা হয় (যেমন $800 \times 600$), ছবিতে পিক্সেলের সংখ্যা ঠিক ততটাই স্থায়ী হয়ে যায়।

২. সাইজ বাড়ালে কোয়ালিটি নষ্ট হওয়া (Pixelation)

কোনো রাস্টার ইমেজকে যদি তার মূল সাইজের চেয়ে অনেক বড় করা হয়, তবে নতুন কোনো পিক্সেল স্বয়ংক্রিয়ভাবে তৈরি হতে পারে না। ফলে:

• পিক্সেলগুলো আকারে বড় হয়ে যায় এবং ইমেজের বাঁকা রেখাগুলোতে সিড়ির মতো খাঁজ কাটা দেখায়, যাকে Aliasing বা Pixelation বলে।
• ছবি ঝাপসা (blurry) বা বক্সের মতো ব্লকি হয়ে যায়।

৩. অনুপস্থিত পিক্সেল ইন্টারপোলেশন (Pixel Interpolation)

ছবি বড় করার সময় নতুন খালি জায়গার পিক্সেলগুলোর রঙ কী হবে, তা অ্যালগরিদম দিয়ে অনুমান বা হিসাব (Interpolation) করতে হয়:

• Nearest Neighbor: সবচেয়ে কাছের পিক্সেলের রঙ হুবহু বসিয়ে দেয় (দ্রুত কিন্তু ছবির ধারের খাঁজ বেশি স্পষ্ট হয়)।
• Bilinear Interpolation: আশেপাশের ৪টি পিক্সেলের গড় রঙ নিয়ে মসৃণ করে।
• Bicubic Interpolation: আশেপাশের ১৬টি পিক্সেল হিসাব করে ধারগুলো তীক্ষ্ণ রাখে।

সাধারণ কিছু রাস্টার রেজোলিউশন standard

---

DPI (Dots Per Inch)

ইমেজের গুণগত মান বোঝার জন্য ডিজিটাল পিক্সেল ডাইমেনশন এবং ভৌত প্রিন্টিং রেজোলিউশন DPI (Dots Per Inch)-এর সম্পর্ক জানা জরুরি।

DPI কী?

DPI হলো প্রতি রৈখিক ইঞ্চিতে ($2.54\text{ cm}$) কতগুলো বিন্দু (dot) বা পিক্সেল সাজানো আছে তার পরিমাপ।

$\text{DPI} = \frac{\text{পিক্সেল সংখ্যা}}{\text{ইঞ্চিতে ভৌত দৈর্ঘ্য}}$

মনিটর ও প্রিন্টারের DPI স্ট্যান্ডার্ড

1. মনিটর স্ক্রিন (~72 থেকে 96 DPI):

   • সাধারণ কম্পিউটারের মনিটরে ছবি দেখাতে মাত্র $72\text{--}96\text{ DPI}$ ঘনত্বের প্রয়োজন হয়।
   • $720 \times 720$ পিক্সেলের একটি ছবি $72\text{ DPI}$ মনিটরে ১০ ইঞ্চি জায়গা জুড়ে দেখাবে।

2. কাগজে প্রিন্টিং (300 থেকে 600+ DPI):

   • কাগজে প্রিন্ট করার জন্য অনেক বেশি ঘনত্ব দরকার ($300\text{ DPI}$ ম্যাগাজিনের জন্য, $600\text{ DPI}$ ফাইন আর্টের জন্য)।
   • কাগজ নিজের আলো দেয় না, আলোর প্রতিফলনে কাজ করে; তাই কম ঘনত্বের ছবি প্রিন্ট করলে মানুষের চোখ সহজে ঝাপসা ভাব ধরে ফেলে।

ইন্টারনেটের ছবি প্রিন্ট করার ভুল

ইন্টারনেট থেকে $800 \times 600$ পিক্সেলের একটি ছবি ডাউনলোড করে তা যদি $300\text{ DPI}$-তে প্রিন্ট করতে যান:

$\text{প্রিন্টের সাইজ (ইঞ্চি)} = \frac{800\text{ pixels}}{300\text{ DPI}} \approx 2.67\text{ ইঞ্চি}$

ছবিটিকে জোর করে এ৪ (A4) সাইজের কাগজে বড় করে প্রিন্ট করলে তা অত্যন্ত ঝাপসা ও পিক্সেল ফেটে বিকৃত হয়ে যাবে! তাই প্রিন্ট করার জন্য ইন্টারনেট থেকে যথেষ্ট বড় সাইজের (উচ্চ পিক্সেলের) ছবি সংগ্রহ করতে হয়।

---

Vector Graphics (ভেক্টর গ্রাফিক্স)

রাস্টার ইমেজের মতো পিক্সেলের ছক না বানিয়ে, যা গাণিতিক সমীকরণ ও জিওমেট্রিক সূত্রের সাহায্যে তৈরি হয় — তা-ই হলো Vector Graphics।

ভেক্টর গ্রাফিক্সের গাণিতিক ভিত্তি

ভেক্টর গ্রাফিক্স কোনো ছবিকে বিন্দুর স্থানাঙ্ক, রেখা, কার্ভ ও বহুভুজের গাণিতিক সূত্র দিয়ে মেমোরিতে সেভ করে।

• ** স্থানাঙ্ক (Coordinates)**: পয়েন্টগুলোকে $(x_1, y_1), (x_2, y_2)$ আকারে রাখা হয়।
• রেখার সমীকরণ: একটি রেখাকে নির্দিষ্ট প্রান্তবিন্দু ও সমীকরণ দিয়ে প্রকাশ করা হয়: $y = mx + b \quad \text{অথবা} \quad A x + B y + C = 0$
• বর্গক্ষেত্র প্রকাশের উদাহরণ: একটি বর্গক্ষেত্রকে হাজার হাজার পিক্সেল দিয়ে সেভ না করে, এর ৪টি কোণার স্থানাঙ্ক এবং ৪টি সংযোগকারী রেখার সমীকরণ দিয়ে প্রকাশ করা হয়। এর সাথে fill_color = blue এবং stroke = 2px এট্রিবিউট যোগ করা থাকে।

জনপ্রিয় ভেক্টর ফরম্যাট: SVG (ওয়েবের জন্য), AI (Adobe Illustrator), EPS, এবং PDF।

---

Advantages of Vector Graphics (ভেক্টর গ্রাফিক্সের সুবিধা)

ডিজাইন, লোগো ও ইউজার ইন্টারফেস তৈরির ক্ষেত্রে ভেক্টর গ্রাফিক্সের সুবিধা অপরিসীম:

---

Disadvantages of Vector Graphics (ভেক্টর গ্রাফিক্সের অসুবিধা)

অসাধারণ সুবিধা থাকা সত্ত্বেও ভেক্টর গ্রাফিক্স দিয়ে সব কাজ করা সম্ভব নয়:

১. প্রাকৃতিক ছবির জন্য অনুপযোগী (Lower Color Quality for Photos)

বাস্তব জীবনের মানুষের ছবি বা প্রাকৃতিক দৃশ্যে লাখ লাখ সূক্ষ্ম রঙের শেড থাকে। ভেক্টর দিয়ে এই ধরনের ফটোগ্রাফিক ডিটেইল তৈরি করতে গেলে কোটি কোটি ছোট ছোট অবজেক্ট লাগবে, যা ফাইলে জায়গা ও প্রসেসিং দুটোই বাড়িয়ে দেবে।

২. সীমিত রঙের ব্যবহার

ভেক্টরে ফ্ল্যাট কালার ও স্মুথ গ্র্যাডিয়েন্ট খুব ভালো দেখালেও জটিল লাইটিং, রিফ্লেকশন বা ন্যাচারাল টেক্সচার তৈরি করা বেশ কঠিন।

---

Raster vs Vector (রাস্টার বনাম ভেক্টর)

প্রজেক্টের ধরন অনুযায়ী সঠিক গ্রাফিক্স মডেল বেছে নিতে রাস্টার ও ভেক্টরের তুলনা নিচে দেওয়া হলো: