All But Reality

Imagine a catchphrase here

Simple template. Background and Customization by Shihab Elagib. Powered by Blogger

May 01, 2020

تريننغ زيرو: الصورة الرقمية.

 مع انه الواحد اتكلم في كذا مقال عن عنصر من عناصرها، لكنه ما حصل قعد وفضى ليها مقال كامل ممكن يذكره للمرجعية في اي من المرات البيكون بيتكلم\بيكتب عن حاجة متعلقة بيها، وبما انها الاساس المبنية عليه الحوسبة المرئية، يبقى ذكرها واجب. فشنو، نتوكل ونبدا ننقنق فيها: الصورة الرقمية!
ملحوظة: النص ادناه بيركز على الصورة الرقمية من الجانب السوفتويري فقط. اي انه ما مركز على الجوانب الفيزيائية في العرض والتصوير.

لما الانسان بدا يرسم على حيط الكهوف، الموضوع كان بسيط وبيعتمد بجله على خواص فيزيائية وفيسيولجية بدائية: مواد بقدرات معينة على امتصاص الأشعة الضوئية الساقطة عليها، والباقي البينعكس لما بيصل شبكية عين الانسان بيحفز خلايا معينة ترسل اشارات عصبية معينة للمخ بيترجم الاشارات دي لي "لون،" والفروقات بين الألوان على انها "اشكال." الانسان نفسه مسؤول بس من انه يلقى المواد البتديه الألوان دي ويشخبط.
قدم الشريط (دي استعراب لي fast forward. افترض انك عجوز بما يكفي تكون متذكر شرائط الفيديو VCR) كم ألفية لي قدام، بقينا محتاجين نخلي خلق الصورة دة حاجة بتعملها آلة، فقمنا اخترعنا الفيلم، العبر تفاعلات كيماوية نتيجة لتعرضه للضوء بيخلي شريحة من مواد معينة بتتشكل لتجسيد المشهد العكس لينا الضوء دة (اتذكر انه اي حاجة انت بتشوفها عبارة عن انعكاس ضوء).
يالا بعد كدة تعال خش في زمن الألة ما بقت بس بتصور المشهد، بل بتعرضه كمان، والوسيط لازم يكون بيعرض ما صورة واحدة ولا اثنين، بل يظل يعرض صور مختلفة طول عمره، بل وكمان يخلق المشهد دة من مجرد ارقام. اها دي يحلوها كيف؟

المهم اختصاراً لقرن من التطور في صور العرض من انابيب الكاثود الى اليوم (وانا اصلاً ما داير انقنق في "طرق" العرض، ما عارف دخلت هنا ليه)، الموضوع دة هسي واقف على مبدأ واحد: الصورة الرقمية.
الاسم براه بيشرح الكنهية. الصورة الرقمية عبارة عن "صورة" بتطلعها من "ارقام." صورة "محفوظة" كأرقام. دي ضرورية لأنه الكمبيوتر محدود في تعامله للأرقام بإختلاف أنظمة حسابها. الكمبيوتر (بتجاهل الاضافات الممكن تضيفها ليه اليوم) ما حيشيل منك الـnegative حق صور العرس يحمض منها نسخة على ورق ويخليها عنده، الكمبيوتر حيشيل الصورة دي، يحولها لي ارقام بي أنماط معينة، ويخزنها في وسيط بعدين ممكن يمرق منه الأرقام دي.

عشان كدة بقى من الضروري انه نحول مفهومنا للصورة لحاجة ممكن نصيغها نحن والكمبيوتر كأرقام بسهولة وكفاءة ودقة. هنا يالا الموضوع بيتفرع لي مدرستين: الصور النقطية Raster images، والصور الـ.... ويكيبيديا مترجماها "اشعاعية،" لكن الترجمة دي ما عاجباني، فحأكتفي بالتسمية الانجليزية: Vector images.

الصور النقطية، برضو واضحة من الاسم، بتتقسم فيها الصورة لي نقاط او بيكسلات Pixels موزعة على مصفوفات منتظمة. كل بيكسل عنده لون واحد. عشان ترسم مربع اسود -مثلاً- في خلفية بيضاء، حتحتاج صورة كلها بتتكون من نقاط بيضاء، فيها نقاط متجاورة لونها أسود.

الصورة الـvector-based على اليد الأخرى، بتستبدل النقاط بي معادلات رياضية. متذكر الرسم في ورق الرسم البياني في الثانوي؟ بس ياهو. عشان تعمل المربع الأسود الفي المثال الفات، اما حتحدد أركان المربع او حتحسب اربعة معادلات خط مستقيم للمحيط وتكتب انه اللون الجوا المحيط دة اسود. في الأشكال المعقدة الموضوع معادلات بتبقى معقدة اكتر. العندها فوبيا من منحنيات القطع الناقص زيي يرفع يده!

لأسباب يطول شرحها، النظام النقطي هو حالياً المعيار للصور الرقمية، الـvectors عندها استخداماتها، لكنها نسبياً أقل من الـraster. باقي النص دة حيركز على الـraster image، مع ذكر بعض المقارنات للـVectors حيث وجب.

معايير الصورة الرقمية:

الدقة:

وصف الـpixel بإنه "نقطة" هنا مخل شوية. النقطة -رياضياً- ما عندها "مساحة،" عشان كدة البيكسل هو اقرب لكونه "مربع." لكن نحن البكسل دة عاوزينه يكون لينا -عملياً- زي النقطة. لو عاينت لي حيطة متر في متر بي عيونك فيها خط سمكه 10 سم، وجيت حاولت توصفه بي صورة رقمية 5x5 بكسل، كل بكسل حيكون مغطي 20 سم من الحيطة دي، يعني اصغر التفاصيل الممكن صورتك دي تشيلها هي 20سم، معناها الخط الـ10سم دة ما حيظهر في الصورة. عشان تظهر الخط، حتحتاج على الأقل صورة 10x10 بكسل (كل بكسل بيغطي 10سم).
عدد البكسلات في الصورة دة اصْطُلِح ليه اسم Resolution وعرِّب "الدقة." وبيتوصف اما بعدد البكسلات الكلي (1,000,000 بكسل في الصورة)، او، وزي ما قلنا قبيل انه البيكسلات بتتوزع على مصفوفات، عدد الأعمدة مضروباً في عدد الصفوف (1280 x 720 بكسل).



الـRaster image، في ابسط صورها، بتتحفظ كل pixel على حدا. يعني كل بيكسل لازم يمثل برقم او مجموعة ارقام (الحديث عنها لاحقاً في جزئية الألوان). بديهياً دة بيعني انه كل ما زاد عدد البيكسلات، كل ما زاد عدد الأرقام المحتاج تحفظها وبالتالي احتجت لي "سعة" تخزينية أكبر عشان تحفظها. 

زمان، لما كانت الصور الرقمية دقتها محدودة (نتيجة محدودية سبل التخزين والمعالجة والعرض)، كان من الساهل على المستخدم تمييز البيكسلات الفي الصورة. افتح قيم سيقا ولا اتاري ولا ملك النمور، حتلقى سوبر ماريو عبارة عن دستة مربعات حمراء ملصقة مع بعض. ارجع فتش صور لشاشات الكمبيوترات اول ما بدت تستخدم صور بدل كتابة، حتلقى اي خط مائل بقى عامل زي السلم. وهكذا.


التكنولوجيا اليوم اتقدمت كتير طبعاً، حتى الموبايلات الرخيصة بقت تجي بكاميرات بتطلع صور فيها اكتر من 10 مليون بيكسل. شاشات الكمبيوترات والتلفزيونات بقت بتقدر تعرض ما قد يصل الـ 33 مليون بكسل، ووسائط التخزين بقت تتحسب بالتيرابايت. لو افترضنا انه كل بكسل سعته 24 بِت، التيرابايت الواحد بيشيل ليك اكتر من 36 ألف صورة 10 ميقابيكسل (10 مليون بكسل)، ودة بدون استخدام شعوذة ضغط البيانات (فيديو).


بالطبع، الموضوع ما بالبساطة دي، وما كل جوانب الحوسبة اتطورت بنفس الوتيرة. بالتالي نظرية "بيكسلات اكتر = احسن" ما sustainable شديد. وفي الحقيقة نحن ما محتاجين منها اصلاً تبقى كدة. في الأخر، الدقة برضها بتخضع لحدود الـpoint of diminishing returns. في أخر المطاف، اذا عدد البيكسلات في الصورة بيغطي ليك اي تفصيل انت محتاج تشوفه، زيادتها الفايدة منه ايه؟ بالعكس الزيادة حتبقى سلبية في إنها حتزيد متطلبات التخزين والمعالجة بدون فائدة. تقييم الحد دة يالا مسألة نقاش طويلة محكومة بظروف كتيرة على المقال دة براه، فنخليها لوقت تاني.


الصور الـvector-based ما عندها مقياس مرادف للـresolution كونها ما بتشتغل بي مصفوفات بيكسلات. استخدامها لمعادلات رياضية بيعني انه دقة التفاصيل محكومة بس لإنت ناوي تعوض كم رقم في المعادلات دي. عشان كدة الـvector images بتتوصف بإنها "resolution-indepenant" وبتلقى استخدام في اجزاء من الصورة الرقمية المحتاجين انها تظهر لينا دائماً بنفس الشكل بغض النظر عن الدقة المستخدمة في رسم باقي الصورة، زي خطوط الكتابة مثلاً. صفحة المدونة دي مثلاً، الكتابة الفيها كلها vector images، لو عملت zoom in لمن تفتر الكتابة حتظل واضحة بتفاصيل ممتازة، لكن الخلفيت والشعارات والصور كلها raster images، لو عملت زووم كفاية حتبدا تظهر ليك بيكسلاتها.

الالوان:

نحن فوق قلنا انه اي بكسل في الصورة الرقمية عنده "لون." وقلنا برضو انه الصورة دي لازم تتمثل كأرقام. دة بيعني انه نحن لازم برضو نوصف الألوان دي كأرقام. لحسن الحظ، الفنون والطباعة بدت في تكوين مبادئ لوصف الألوان من قبل ظهور الكمبيوترات بزمن، اهم المبادئ دي هو وصف الألوان كمزيج من حفنة من الالوان الأساسية، ما يعرف بالنموذج الجمعي او الـAdditive Model. لو اخدت اللون الأخضر والأحمر مثلاً، جمعهم بيديك لون من الليموني لحد البرتقالي مروراً بالأصفر حسب نسبة المزج بيناتهم، يعني ممكن نمثل طيف كبير من الألوان بمعلومية نسبة من لونين بس.

في الكمبيوترات واغلب سبل العرض الرقمية، النموذج الجمعي المستخدم هو الـ RGB Model، الفيه 3 ألوان اساسية هي الأحمر، أخضر والأزرق. بتلخبطهم حسب الحوجة عشان تطلع باللون المطلوب. 

التمثيل الرقمي للألوان دي، في أبسط صوره، هو تحديد نسب الألوان. في كذا اسلوب مستخدم للنسب دي، في اسلوب مثلاُ بيدي اي لون رقم من 0 لي 255، وعادة بيتحفظ كمجموعة من ثلاث ارقام. اللون البنفسجي الصافي مثلاً 255,0,255، للأحمر والاخضر والأزرق على التوالي. بينما 255,125,0 بتديك درجة من من درجات البرتقالي.



صورة بدقة 5x5 بكسل مكبرة 100 مرة (الى 500x500) لكي يمكن رؤيتها في الشاشات الحديثة.
الصورة اصلاً بصيغة BMP، تم تحويلها لـPNG لغرض الرفع الى الانترنت


محتويات ملف الـBMP الذي يحوي الصورة اعلاه.

الـ256 (من 0 لي 255) دة هو اقصى عدد طبيعي، عشري (بنظام عد مبنى على 10، حسابنا العادي) موجب ممكن تمثله بي بايت واحد (8 بِت) من الاعداد الثنائية (المن 0 او 1). كل لون من الالوان الأساسية بتاعتنا بنسميه عينة او sample. بالتالي، لما نستخدم الـ8 بِتس دي لوصف لون البكسل الشغال بنظام الـRGB، نحن بنقول انه البكسل بتاعنا دة عنده 8 بت لكل عينة او 8 bits per sample، او انه البكسل كله عنده 8x3 او 24 بت لكل بكسل (24 bits per pixel).

أداة اختيار الالوان في برنامج معالجة الصور GIMP

الـ24 بِت لكل بكسل دي -البتسمى حالياً الـTrue Colour System- ليها فترة طويلة معتبرة معيار رئيس للعرض الرقمي، تقريباً اي جهاز بيمر عليك -فيما عدا شاشات الـHDR الحديثة- بيستخدم النظام دة في العرض. التركيبة دي بتتيح ليك عدد الوان كلي بيساوي 256 مرفوع للقوة 3، او اكتر من 16 مليون لون مختلف.


لأسباب كتيرة، الـ16 مليون لون دي قد لا تكون كافية في الصورة (صدق او لا تصدق)، عشان كدة في تمثيلات جديد للألوان بتستخدم اكتر من 8 بتِس لكل عينة. عندك مثلاً نظام الـ16بِت، البيسمح ليك توصف درجات كل عينة من 0 لي 65,535، او بيديك 65,536 درجة لكل لون أساسي، او بيديك (يراجع الالة الحاسبة) اكتر من 281 تريليون لون.
وان كنت مفتكر دة اكتر من كفاية، في نظام ثالث مستخدم (بدرجة اقل) برضو بيدي كل عينة 32 بت، او بيدي كل عينة مدى من 0 لي 4,294,967,295، او بيدي كل بكسل مدى لي اكتر من 79 اوكتيليون لون. لو عايز تكتب العدد دة رقم رقم: 79,228,162,514,264,337,593,543,950,336. يالا أحفظه. :|

في حاجات اضافية واجب ذكرها هنا: البكسل الواحد في الصورة الرقمية ما بالضرورة يكون فيه 3 عينات بس. نحن قد نحتاج نخت في الصورة معلومات اكتر من مجرد لون. افترض معاي -مثلاً- انه عندك صورة عبارة عن دائرة بنفسجية والباقي فاضي، انت داير تختها فوق صورة تانية بحث انه تظهر ليك الدائرة البنفسجية دي والاشكال الفي الصورة التحت تظهر حوالين الدائرة. سبل تخزين الصور المنتشرة لكن ما بتسمح ليك الا بي صورة مستطيلة او مربعة، حتحل الحاجة الاشكالية دي كيف؟ الحل هنا بقى بي بساطة انه نضيف عينة رابعة للأربعة عينات الفوق ديل وظيفتها -ببساطة- انه توري هل البيكسل دة ظاهر ولا مختفي، واذا مختفي مختفي لأي درجة. الـsample الزيادة دي بيسموها الـAlpha Channel، والنموذج بتاع الـRGB حقنا بيبقى RGBA model.
دة طبعاً بيعني انه السعة بتاعت البيكسل حتزيد لما نضيف الالفا دي. لو مستخدمين نظام 8bps (دي اختصار لي bits per sample)، حجم البيكسل الكان 24بت حيبقى 32 بت، عدد الألوان حيظل ثابت لكن، لأنه بس ال24 بت الاولى مسؤولة منه. 



كدة كفاية؟

الموضوع دة طول شوية. فحقو نقفل على كدة. في جوانب تانية بتخش في تعريف الصورة الرقمية، ما بين النظم والممارسات البتقنن طرق ارسال وتفسير اجهزة العرض والمعالجة والتصوير المختلفة ليها، وبين طرق تخزينها من صيغ وآليات ضغط وغيره. لكن عموماً، الكلام الفوق دة يظل هو الاساس البتقيف عليه المفاهيم الفوق.
ما علينا، حد يوريني GIMP دة بيشتغلو بيه كيف؟ -_-