الرسوم بالعمق مع الـ+GDI والـGraphics عامةً

السلام عليكم ورحمه الله وبركاته

شكرا اخ بشار على المجهود, ولكن عيب الـ +GDI انها تستخدم البكسل في الرسم لهذا اتت مايكروسوفت بتقنية الـ WPF الجيل الاخير لرسم الواجهات والتي تعتمد على مفهوم المتجهات في الرسم, وهذا رابط عن مقدمة الـ +GDI في الدوت نت http://www.codeproje...-plus/GDI_.aspx , وهذا روابط لمجموعة من الكتب في نفس التقنية http://books.google....id=ElAaTGP__U0C

http://www.megaupload.com/?d=I7WCO3LS

http://www.megaupload.com/?d=AX5W1J96

http://www.megaupload.com/?d=QEQIWOZW

نكمل مع درسنا والألوان بالتخصيص، قلنا سابقاً أن هناك أنظمة ألوان أخرى؟ بالفعل يوجد الكثير لم يذكر بعد ومنهم أحد أهم هذه الأنظمة والذي يستخدم بشكل واسع نسبتاً لاقترابه من خصائص الواقع ولأنه يتبع الشكل الأصل للطيف المرئي الذي اكتشفه نيوتن بتجربة المنشور واثبت من خلاله أن ضوء الشمس هو عبارة عن تجمع سبعة أضواء ملونة سماها ألوان الطيف:

[Violet, Indigo, Blue, Green, Yellow, Orange, Red]

هذه الألوان موجودة بشكل تقريبي بنظام يختصر بـ( HSB ) نسبة إلى (Hue, Saturation, Brightness ) أي (اللون الأصل، الكثافة، الإضاءة); اللون الأصل هو لون ذو كثافة عالية تحت إضاءة متوسطة، يُمثل جدول هذا النظام عادةً باستخدام ثلاثة موجات متفاوتة بالدور (1/3 تقريباً) وعند تحصيل أحد ألوان الأصل تكون إحدى تلك الموجات أعظمية عدا عن ذلك أي عندما يكون مستوى الكثافة أو الإضاءة غير الافتراضي فإن احتمال وصول إحدى الموجات إلى حدها الأعظمي وارد في حال كانت الإضاءة أكبر أوتساوي 50% من شدة السطوع.

لن أطيل عليكم لأننا لن نقوم بتوظيف هذا النظام حتى نبدأ بمعادلاته والتي تستخدم دوال مثلثلية للتحويل إلى أنظمة أخرى ومنه علينا انتظار حاجة ورود هذه الدوال والتي سوف نختص بها في المعادلات الوسيطية أي عند استخدام التمثيل الوسيطي لأشكال هندسية لكن بالنسبة للوقت الحالي سوف نستعرض بعض المصورات للتعرف على هذا النظام:

هذا هو جدول الألوان الأصلية والتي كثافة الإشباع لكل منها أعظمية مع العلم أن الإضاءة متوسطة الشدة كما سبق الذكر (لاحظ تفاوت الأمواج تماثلياً ورقمياً):

جدول الألوان الأصلية مع تغيير كثافة الإشباع:

وبالنسبة لشدة الإضاءة يصبح:

سبب انتشار هذا النظام هو كما ذكرنا اقترابه لتمثيل خصائص الواقع فإذا أخذنا كثافة الإشباع على سبيل المثال في الطلاء؟ نجد بنسب عشوائية:

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

كمثال على الإضاءة لنأخذ صبورة الصف التي عهدنا أن ننقل منها مايرده اساتذتنا، نعلم أن البعض منها يأتي مدعوم بالإضاءة في أعلاه لكننا نعلم أيضاً أن الإضاءة يجب أن تكون مناسبة لعدم إنعكاس الضوء بشكل ساطع جداً، هنا سوف نقول أننا لانهتم لذلك ومانريد ادراكه هو معنى إضاءة اللون وماذا يحدث عند تغيير شدة السطوع؟ أيضاً بأخذ نسب عشوائية نجد:

يأتي أخيراً مفهوم الشفافية لأي لون، هذا المفهوم يقوم في الحواسيب على أساس وهمي صراحة وذلك لأنه كما عرفنا أن الشاشة هي عبارة عن مقاومات ضوئية بالإضافة أنها مثبتة بجانب بعضها ولايأتي خلفها مقاومات أخرى لكي تسبب ظاهرة الشفافية ولكن الحاسب يقوم بعمل بعض الحسابات ليظهر هذه الظاهرة التي تقوم على أساس أخذ الأعماق الرئيسية وفقاً لنسبة مئوية أو نسبة ذات حد أعظمي غير المئة ومن ثم يتم جمعها للأعماق الرئيسية للنقطة الضوئية المخزنة بالذاكرة والتي تأتي قبلها بترتيب المحرك الذي يقوم بعرض لون النقطة النهائي على الشاشة. لنأخذ مثال على هذه الظاهرة ولنَقل أن لدينا نقطة حمراء ذات شفافية تعادل 50% ونقطة صفراء تحتها (ظاهرياً) ليس لها شفافية، نحلل الألوان بالترتيب الشائع:

(Alpha, Red, Green, Blue) أي (الشفافية، الأحمر، الأخضر، الأزرق) ومنه:

Color1 = (128, 255, 0, 0)
Color2 = (255, 255, 255, 0)

نقوم الآن باحتساب النسبة علماً أن قيمة العمق Alpha مأخوذة بالوحدة Byte أي الحد الأعظمي هو 255 ومنه:

RGB(Color1) = (255 * (128 / 255), 0 * (128 / 255), 0 * (128 / 255)) = (128, 0, 0)

رغم أن اللون الأصفر ليس له شفافية لكن شفافية اللون الذي يسبقه سوف يؤثر به عملياً لكن برمجياً كلاهما يعالج بشكل مستقل ولايتم التعديل على قيم عمق اللون ذاته بل يتم تخزينها ومعالجتها في تركيب لون أخر، في التالي يتم احتساب تأثير شفافية اللون الأحمر على اللون الأصفر لكن انتبه لما نقوم به هنا؟ الشرح والتمثيل وليس اعتماد نظام ما.

تقوم شفافية اللون الأحمر بالتأثير على اللون الأصفر بسحب نسب من خصائص لونه (اي تخفيف كثافته) والتي تؤخذ بالنسبة (255 – Alpha) أي الحد الأعظمي للشفافية مطروح منه القيمة الحالية لشفافية اللون المؤثر وهو (الأحمر) يصبح لدينا (255 – 128) يساوي (127) تقريباً نفس التأثير:

RGB(Color2) = (255 * (127 / 255), 255 * (127 / 255), 0 * (127 / 255)) = (127, 127, 0)

والآن نقوم بحساب اللون المُنتج عن اجتماع هذين اللونين تحت شفافية مقدارها 128 أو 50%:

RGB(ScreenColor) = ((128 + 127), (0 + 127), (0 + 0)) -> RGB(ScreenColor) = (255, 127, 0)

كمثال أخر لعدة ألوان:

حيث L تعني Lower أو اللون الذي يأتي قبل اللون U أو Upper العلوي، نلاحظ أنه تم تجاهل مايسبق اللون الرمادي لأن مستوى شفافيته معدوم وبالتالي لونه لايتأثر بمايأتي خلفه، أما بالنسبة للون المائل إلى الزراق فهو اللون الأكثر علاوة في نقطته على الشاشة أي لايأتي بعده لون أخر لذا فحساب اللون المعروض ينتهي عنده; بالنسبة لعمليات الحساب فهي كالتالي :

Color1 = (255, 160, 160, 160)
Color2= (63, 136, 255, 96)
Color1’ = (160 * (192 / 255), 160 * (192 / 255), 160 * (192 / 255)) = (120, 120, 120)
Color2’ = (136 * (63 / 255), 255 * (63 / 255), 96 * (63 / 255)) = (40, 62, 23)
Color2’’ = (Color1’ + Color2’) = (120 + 40, 120 + 62, 120 + 23) = (160, 182, 143)
Color3 = (191, 200, 68, 255)
Color3’ = (200 * (191 / 255), 68 * (191 * 255), 255 * (191 / 255)) = (149, 50, 191)
Color2’’’ = (160 * (64 / 255), 182 * (64 / 255), 143 * (64 / 255)) = (40, 45, 35)
Color3” = (Color2’’’ + Color3’) = (40 + 149, 45 + 50, 35 + 191) = (189, 95, 226)
Color4 = (175, 88, 100, 255)
Color4’ = (88 * (175 / 255), 100 * (175 / 255), 255 * (175 / 255)) = (60, 68, 175)
Color3’’’ = (189 * (80 / 255), 95 * (80 / 255), 226 * (80 / 255)) = (59, 29, 70)
Color4’’ = (Color3’’’ + Color4’’) = (59 + 88, 29 + 68, 70 + 175) = (147, 97, 245)

انتهينا تقريباً من المقدمة حول الألوان وبعض الأنظمة لكننا لم ننتهي من جميع تفرعات هذا المفهوم، سوف نقوم بالتطرق إلى هذا المفهوم بشكل مفصل أكثر في الوقت المناسب كي نلاحظ فائدة أشكال تمثيل الألوان نسبةً للنظام والهيئات التي تترجم من خلالها الألوان، في الوقت الحالي سوف نقوم بإنشاء عملية للتحويل من أي لون بنظام RGB إلى نظام الـCMY وبالعكس وسوف نقوم أيضاً بإنشاء عملية تقوم بمعالجة لونين أحدهما ذو شفافية مرئية.

نبدأ مع Code التحويل من RGB إلى CMY:

قلنا سابقاً أنه للتحويل من نظام إلى أخر يجب مراعاة الحد الأعظمي للعمق نفسه، وبما أننا نحول من الـRGB فإن الحد الأعظمي هو 255 والذي يمثل اللون الأبيض في حال ورود هذه القيمة بالأعماق الرئيسية الثلاث ومنه نجد أنه يجب علينا تصريح ثلاثة متغيرات تمثل قيم الأعماق الرئيسية الثلاث في حالة الحد الأعظمي أي:

Dim Red, Green, Blue As Byte
Red = 255 : Green = 255 : Blue = 255

ثم نقوم بحساب أعماق النظام الثانوي أو الطرح والتي كما ذكرنا سابقاً أنها تأتي بشكل مرتب عكسي بالنسبة إلى أعماق نظام الـRGB أي:

Red =/= Cyan
Green =/= Magenta
Blue =/= Yellow

لنرمز للعمق Cyan بـ( C ) و Magenta بـ( M ) و Yellow بـ( Y ) ونصرح عنهم لنحفظ القيم خلال عملية المعالجة والتي تتمثل بعمليات حسابية بسيطة كما رأينا سابقاً:

Dim C, M, Y As Byte

الأن نبدأ بعملية المعالجة، وهي أن نطرح العمق للون المٌُعالج من المتغيّر الذي يقابل هذا اللون بالنظام المقابل (RGB) طبعاً لاننسى أننا قمنا بإسناد القيمة (255( لأنها تمثل الحد الأعظمي في نظام الـRGB:

C = Red – ProcessingColor.R
M = Green – ProcessingColor.G
Y = Blue – ProcessingColor.B

وهكذا تكون العملية كاملة ولاينقصها سوى إيجاد شكل تصريحها والذي يعتمد على مٌعامل يدعى ProcessingColor والذي سوف يكون اللون المُعالج لتحصيل قيم أعماق النظام الثانوي:

Public Function GetCMYvalues(Byval ProcessingColor As Color) As Byte()
Dim Red, Green, Blue As Byte
Red = 255 : Green = 255 : Blue = 255
Dim C, M, Y As Byte
C = Red – ProcessingColor.R
M = Green – ProcessingColor.G
Y = Blue – ProcessingColor.B
Return New Byte(){C, M, Y}
End Function

نرى أن هذه العملية تولد مصفوفة من نوع Byte تحوي أعماق النظام الثانوي للون المعالج وبهذا تكون عمليتنا هذه جاهزة للعمل بالمقابل يمكن إنشاء شكل أخر للعملية بإستبدال المُعامل:

Public Function GetCMYvalues(Byval RGBvalues As Byte()) As Byte()
Dim Red, Green, Blue As Byte
Red = 255 : Green = 255 : Blue = 255
Dim C, M, Y As Byte
C = Red – RGBvalues(0)
M = Green – RGBvalues(1)
Y = Blue – RGBvalues(2)
Return New Byte(){C, M, Y}
End Function

عملية تحويل لون بنظام الـCMY إلى RGB يقوم أساس العملية على نفس خصائص العمليات السابقة بإختلاف وهو مايفهم عقلك بتحليل العوامل، على سبيل المثال الحد الأغظمي للنظام الثانوي هو 255 لكن اللون الذي يتولد عن هذه القيمة هو الأسود والذي يعني عكس النظام الأساسي (الـRGB) وأيضاً بالنسبة للمتغيّرات فالاسم هو مايتغيير فقط ومنه نستنتج أنه يمكننا استخدام العملية السابقة لكن الأمر سوف يصبح أكثر تعقيداً باستخدام عكوس كثيرة لدرجة توصلك لعدم معرفة ماإذا كانت قيم الأعماق تابعة لنظام الـRGB أو الـCMY لذا يفضل استخدام عمليتان لذلك:

Public Function GetRGBvalues(Byval CMYvalues As Byte()) As Byte()
Dim Cyan, Magenta, Yellow As Byte
Cyan = 255 : Magenta = 255 : Yellow = 255
Dim R, G, B As Byte
R = Cyan – CMYvalues(0)
G = Magenta – CMYvalues(1)
B = Yellow – CMYvalues(2)
Return New Byte(){R, G, B}
End Function

أخيراً، عملية لحساب تأثير الشفافية على لونين، نبدأ بتصريح تسعة متغيّرات لأعماق الألوان الرئيسية، ثلاثة للون الذي سنقوم بتوليده وثلاثة للون الذي يأتي في الجهة الخلفية وثلاثة أخرى للون الذي يأتي بالواجهة أو الجهة العلوية، متغيّران أخران لمستوى الشفافية الحالي ولمستوى الشفافية الأعظمي، ثم نقوم بإسناد القيم المتوفرة (معطيات كانت أوثوابت) يتبعها تصريح متغيّر لحساب نسبة الشفافية إلى الحد الأعظمي، بعد هذه التصاريح نبدأ بكتابة سطور المعالجة والتي تقوم على أساس ضرب أعماق اللون العلوي بنسبة الشفافية وجمعها إلى مضروب أعماق اللون الخلفي بمرافق نسبة الشفافية لكن يجب الانتباه إلى أن القيم يجب أن تؤخذ بأقرب قيمة إلى انعدام الفاصلة العشرية وفي النهاية نقوم بإرجاع لون من خلال العملية Color.FromArgb والتي نقوم بإرسال قيم الأعماق المتولدة عبرها، ومنه يكون شكل العملية كالتالي:

Public Function GetActualTransparentColor(Byval LowerColor As Color, Byval UpperColor As Color) As Color
Dim R, R1, R2, G, G1, G2, B, B1, B2, Alpha, MaximumOfAlpha As Byte
R1 = LowerColor.R : R2 = UpperColor.R
G1 = LowerColor.G : G2 = UpperColor.G
B1 = LowerColor.B : B2 = UpperColor.B
Alpha = UpperColor.A : MaximumOfAlpha = 255
Dim AlphaRatio As Single = (Alpha / MaximumOfAlpha)
R = Math.Ceiling(R2 * AlphaRatio) + Math.Ceiling(R1 * (1 – AlphaRatio))
G = Math.Ceiling(G2 * AlphaRatio) + Math.Ceiling(G1 * (1 – AlphaRatio))
B = Math.Ceiling(B2 * AlphaRatio) + Math.Ceiling(B1 * (1 – AlphaRatio))
Return Color.FromArgb(R, G, B)
End Function

في مرحلة التالية سنبدأ مع المفهوم Pixel لنرى كيف تم اكتشافه وكيف يتم عرض الكائنات على شاشة الحاسب.

بالتوفيق :]

VB Helper كتب:

السلام عليكم ورحمه الله وبركاته

شكرا اخ بشار على المجهود, ولكن عيب الـ +GDI انها تستخدم البكسل في الرسم لهذا اتت مايكروسوفت بتقنية الـ WPF الجيل الاخير لرسم الواجهات والتي تعتمد على مفهوم المتجهات في الرسم, وهذا رابط عن مقدمة الـ +GDI في الدوت نت http://www.codeproje...-plus/GDI_.aspx , وهذا روابط لمجموعة من الكتب في نفس التقنية http://books.google....id=ElAaTGP__U0C

http://www.megaupload.com/?d=I7WCO3LS

http://www.megaupload.com/?d=AX5W1J96

http://www.megaupload.com/?d=QEQIWOZW

مشكور أخي الكريم على مرورك، لاشكر على واجب يسعدني أن اقدمه؛ لم أتعمق بعد بتقنية الـWPF رغم أن الكثير نصحني لكنني مازلت أرى أن الوصول إلى ماتفعله هذه التقنيات بواسطة مايتوفر لدينا يجعلنا ندخل في قضايا تفيدنا في مشاريع مشابهة وذلك بسبب دراسة نظريات ومفاهيم اعتقد أن الشركة التي توفر التقنيات الحديثة تحاول جعلنا نتجاهل هذه الأهميات، شكراً مرة بعد :]

بالتوفيق.

السلام عليكم ورحمه الله وبركاته

اخي بس حبيت ان انوه ان تقنية الـ WPF اتت بها مايكروسوفت كجيل لتصميم الواجهات فهي لم تتجاهل الـ +GDI ولكن قامت بوضع جميع تقنيات الجرافيكس السابقة فيها بالاضافة الى DirectX والـ Media Player, كما اردت ان ازيد بالنسبة للاجراء FromArgb يمكننا نمرر الوسيط ألفا الذي يمثل شفافية اللون, وفي الاخير اشكرك على الطرح .. بالتوفيق ..

العنصر Pixel:

يآتي هذا المصطلح من جمع اختصارات Pix وel والتي تشير إلى Picture Element أو عنصر صورة وهو العنصر الأصغر الذي نراه على شاشة حاسوبنا، يُعد نقطة ضوئية ذات لون معيّن ومكان ذو إحداثيات منظمة بالنظام ثنائي البعد الخطي أي (س، ع) أو (x, y) لكن لماذا عنصر صورة؟

هذا السؤال الذي راودني عندما بدأت بالتفكير بهذا المصطلح علماً أن الـPixel هي نقطة ضوئية ذات إحداثيان ولا يعتمدان على فهرس معين كمصفوفة إلا مع عمليات المعاجلة كبعض عمليات معالجة الصور، إذا ماهي الـPixel في المضمون الفعلي؟ تعالو لنكتشف هذا سوياً، لننسى أمر الألوان ونبدأ مع الأبيض والأسود :[

للنظر إلى المصور التالي ونكتشف المعنى الفعلي لـPixel (بالمناسبة أقصد بالمعنى الفعلي الاسم الذي يدل على عمل ذلك العنصر بشكل صريح أي بدون تعقيدات معنوية كعنصر الصورة Picture Element):

ماهو إلا جدول مكون من عدد من المصابيح الصغيرة لكن كما نرى أنه قادر على تمثيل دائرة وأضواء متفاوتة السطوع وكأنها صورة لكن ليست واقعية بما يكفيه الكفاية وذلك لأن دقتها غير متقنة نتيجة لملاحظة المصابيح بشكل فردي، المهم أنه كما نرى كل مصباح يعد نقطة ضوئية وهو اسم مناسب للدلالة على Pixel لكنه غير وافي ولايشير إلى الإختصار نفسه أيضاً، فإذا قمنا بالانتباه إلى اسم حاوي هذه النقاط (جدول) نستنتج أنه من الممكن تسمية النقطة (خلية) وهو اسم كافي الدلالة من جهة أن له قيمة ومن جهة أخرى أن له إحداثيان أحدهما يشير إلى البعد السيني والثاني يشير إلى البعد العيني ومنه أيضاً نجد أن ترجمة خلية هي Cell أي أن التعبير يمكن دمجه مع العبارة Pixel لتصبح مع بعض التحليل Pixel = Picsell = Pic Cell حتى لفظهما معاً يلفظ كـPixel (بيكسل = بيك سل( حيث أن الإختصار Pic معروف أيضاً أنه اختصار لـPicture أي صورة ومنه يصبح لدينا التعبير "خلية صورة" والذي أجده صريح من جهات عديدة بالنسبة لـ"عنصر صورة" لأنه على الأقل لايأخذ القارىء عبر أنفاق ليجد المعنى الحقيقي لهذا المفهوم.

والأن كيف آتى هذا الاختراع؟

لا أكذب عليكم قول أنني لا آتي بالأفكار من خيالي رغم أن احتمال تشبهها بأفكار مُثبتة قليل جداً، رغم كل هذا، بدأت أرى أن بعض الأمور بأعلى المصداقيات ليس صادقة حتى أنها لاتعطي أي علاقة فيما بينها وكأنها مصطنعة لملء فراغات (لاأعلم) في دماغنا، بسبب هذه الأمور شتى قررت أن أجد أو اكتشف تاريخ المصطلحات والمفاهيم التي أدرسها بنفسي حتى ولوكانت مصطنعة على الأقل يمكنني من خلالها توسيع مخيلتي لأصل إلى أشياء أخرى قد تفيدني في حياتي العملية والواقعية.

المصباح التقليدي هو أول مافكرت به على أنه بداية للسيدة Pixel لكن الشمعة آتت لتقول أنها ولدت قبل المصباح حتى أنها مازالت مستخدمة حتى يومنا هذا فإذا قمت بأخذ عدد مقبول مني وأشعلته ستجد أنه يمكنك تمثيل ماتريد بكل سهولة، ضحك المصباح قائلاً ولى عهدكم أيها الشمع، سألت الشمعة: ماذا تقصد بولى عهدنا أيها كهربائي ذو الرأس الكبير؟ رد المصباح: يمكنك عمل ماأقوم أنا بعمله لكن ليس بتلك البساطة فأنا قادرعلى إعطاء سطوع متفاوت عدا على أن تشغيلي وإيقافي بسيط ولايحتاج إلى آداة أخرى كالقداحة مثلاً؟ قالت الشمعة: صدقت في هذا، سأخرج من الموضوع لتكمل أنت وأخوانك الحديث عن كيفية عملكم وتطوركم.

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

تفاوت السطوع – حجم الضوء المنبعث بواسطة مولد أو عدة مولدات، في أوائلها بدأت بواسطة عدة مصابيح كمصباح وقد كان البعد هو ميزة ظهور هذه المصابيح كمصباح واحد ثم آتت فكرة وضع واجهة تمنع رؤية المصابيح لكنها لاتمنع مرور الضوء ومنه يظهر الضوء بسطوع يتفاوت نسبةً لعدد المصابيح المضاءة؛ بعد وقت لا أدري كم طال انتظاره تم اختراع مايدعى بالمقاومة والتي تقوم بتخفيض شدة التيار والتي تم الاستعانة بها لتحديد شدة سطوع ضوء مصباح لكن التطور لم يقف عند المقاومة فقد كانت عبء لتحديد نسبة شدة التيار لكل مصباح وخاصة أنه كمانعرف يجب توصيلها لتجربتها ممايأخذ وقت وجهد يمكنك أن تتخيله للوحة مئة مصباح؛ المقاومة المتغيّرة كانت أفضل خيار متاح لتعديل نسبة شدة التيار المار بكل مصباح ومنه أصبح الفكرة أسهل بعض الشيء لكن عملية التوصيل مازالت تحتاج إلى جهد لذلك وبعد أعوام وأعوام والكثير من التطورات بدأت الإلكترونيات تأخذ مكانها في العالم كحاضر ومستقبل وأصبحت اللوحات الكهربائية تصنع بشكل أكبر وبتقنيات عالية وحجوم متوسطة لبّت حاجات كثيرة لكنها لم تكتمل حتى أصبحت قابلة للبرمجة (متغيّرة) لكن قبل ظهور العناصر القابلة للبرمجة تم اكتشاف أن هناك مادة كيميائية يمكن استغلالها تحت تيار بسيط لعرض رسوم ضمن لوحة بلاستيكية منها تم اختراع شاشة الآلة الحاسبة وتبعها الكثير من الأدوات التي تستخدم هذا النوع من شاشات العرض ليصبح لهذه التقنية مكان استغلال الضوء أيضاً، في المصور التالي ترى تقنيات الـLED والتي تعتمد اسلوب المصباح والـLCD التي تعتمد اسلوب المادة الكهرمائية:

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

جميعها تحتجز مصباح ذو ضوء لونه أبيض مائل إلى الصفار لكن نسبة لون هذه الزجاجات تمتص الموجة لتجعلها بطول وتردد يتناسب مع لون الزجاجة نفسه، تم صناعة الكثير من الزجاجة الملونة حتى يتم توفير الألوان الأكثر شيوعاً لكن هذا لم يكن أيضاً بالحل الأمثل ولكنه ليس بحل سيء للألوان الثابتة، ثم لاحظ أحدهم كما نلاحظ نحن الآن أن اجتماع ضوئين ملوين يعطي لون أخر واستغلال الألوان الرئيسية في هذا يمكن أن يعطي الألوان الأخرة لذا تم التجربة بواسطة مصابيح محتجزة بصناديق مغطاة بزجاج ملون وبتيار ذو شدة ثابتة حيث أن المقاومة لم تكن موجودة، فحصلوا على النتيجة التالية:

وهي الألوان الرئيسية (Red, Green, Blue) والألوان الثانوية (Yellow, Magenta, Cyan) بالإضافة إلى اللون الأبيض الذي ينتج عن تشغيل جميع المصابيح بالشدة العظمى التي يقبلها كل من المصابيح الثلاث، لكن كماقلنا سابقاً أن اللون الأبيض لاينتج إلا بمصابيح (صغيرة، بعيدة، لونها أبيض أو مغطاة بواسطة واجهة لاتسمح برؤية المصابيح)، نسبةً إلى تمثيل اللون الأبيض تم اعتماد استخدام واجهة بيضاء تسمح بمرور الضوء كحل لجمع الألوان لأن البعد لم يكن وارد وتصغير حجم المصابيح لم يكن بالشيء البسيط؛ مصور عن فكرة الواجهة البيضاء بتحديد مجال مرور الضوء بشكل عرضي وطولي علماً أن كلاهما يعطي نفس النتيجة:

وأخيراً المصابيح الصغيرة أو المقاومات الضوئية (بالمناسبة مقاومة لاتعني مقاومة التيار بمضمون استخدامتها إلا إذا كانت مقاومة فهي حرارية وتحول الطاقة الكهربائية إلى حرارية وهي الحل الأمثل لمنع مرور التيار دون أعراض يُتطرق لها، وعندما نقول مقاومة ضوئية نعني أنها تحول الطاقة الكهربائية إلى طاقة ضوئية)، هي أخر تقنية وصلت لنا لتأخذ مساحة واسعة من ساحة المصباح وتجعله أقل كفاءة من نواحي عديدة (التوفير بالسعر والاستهلاك الكهربائي، الآداء، العمر والحجم علاوة على أنها لاتحتاج إلى تيار ذو شدة عالية ويمكن تشغيلها بواسطة مكثفة تختزن طاقة احتكاك بسيطة (فتخيل ماتحتاجه هذه المقاومة!)) أسباب وجيهة لتجعل من المقاومات الضوئية الحل الأمثل للعديد من المشاكل والعديد من الاختراعات التي نستخدمها اليوم في الحاسب، الجوال وأجهزة الصوت المتقدمة ومنه أصبحت الـPixel الملونة موجودة.

هذا كان مفهوم الـPixel أي خلية الصورة ولكن اريد منكم أن تعتادوا أن هناك أفكار لا أسردها بنفس الوقت وذلك لأن هنالك وقت أفضل تسرد هذه الأفكار فيه لتكتمل وتكمل أفكار مهمة أخرى، سوف نبدأ في اللقاء القادم مع أنظمة الإحداثيات الشهيرة لنتعرف عليها بشكل مفصل أكثر كي نكون قادرين على تمثيل النقاط والتوابع بوضوح.

بالتوفيق.

VB Helper كتب:

السلام عليكم ورحمه الله وبركاته

اخي بس حبيت ان انوه ان تقنية الـ WPF اتت بها مايكروسوفت كجيل لتصميم الواجهات فهي لم تتجاهل الـ +GDI ولكن قامت بوضع جميع تقنيات الجرافيكس السابقة فيها بالاضافة الى DirectX والـ Media Player, كما اردت ان ازيد بالنسبة للاجراء FromArgb يمكننا نمرر الوسيط ألفا الذي يمثل شفافية اللون, وفي الاخير اشكرك على الطرح .. بالتوفيق ..

وعليكم السلام :)

أشكرك لك مشاركة رأيك والتي تساعدنا على إظهار أهمية بعض النقاط كالتي قمتَ بذكرها (يمكننا نمرر الوسيط ألفا إلى الدالة FromArgb) ماأحاول فعلاً إصاله هو التعمق أكثر فيما نستخدمه كمفهوم عوضاً عن عملية ذات اسم معيّن، فهذا من وجهة نظري ماهو إلا استخدام التطوير عوضاً عن التطور وتطوير ذاتنا من جهة وخبراتنا من جهة أخرى، لاحظ استخدامي للدالة المذكورة FromArgb ولاحظ أيضاً الفرق بين الدالة FromArgb والعملية التي تقوم بحساب مستوى الشفافية للونين متتاليين وليس لون واحد؟ صحيح أنه يمكن حساب لون مكون على شاشة الحاسب من أكثر من لونين (أي أن هناك بعض الألوان التي تستخدم قدراً من الشفافية) لكن الطريقة ستكون غير احترافية من جهة وغير سريعة من جهة أخرى وذلك لأن احتمال استخدام العملية GetPixel لنقطة مأخوذة من العملية CopyFromScreen وارد استخدامه لحجز القليل من مصادر الذاكرة؟

بالتوفيق.

أنظمة الإحداثيات:

ماهو نظام الإحداثيات؟

ماهو إلا بعض القوانين التي يجب مراعاتها بواسطة عناصر وقيم تفرض تحت القوانين ذاتها.

ماهي عناصر نظام الإحداثيات؟

تختلف عناصر نظام الإحداثيات من نظام إلى أخر ويعود ذلك الإختلاف إلى طبيعة العنصر، الوحدة المستخدمة لتعيين القيم وأخيراً شكل تمثيل القيم على عناصر النظام نفسه.

كم عدد أنظمة الإحداثيات؟

عددها محدود حتى وقتنا هذا ولكن لايمكن الجزم أنه غير قابل للزيادة وهذا طبعاً نتيجة للتطور الذي يمر به العالم لكن بالنسبة للأنظمة المعروفة فعددها ستة ومن أكثر هذه الأنظمة استخداماً وشهرةً وكفاءةً هو النظام الديكارتي أو الـ(Cartesian) والذي يتبع الشكل الخطي في تمثيله القيم أو النقاط على محاور متعامدة، يأتي بعد هذا النظام النظام المحوري أو الوسيطي أو الـ(Polar) وهو نظام يعتمد في شكله العام على أساس الدائرة أي أن مركزه الصفري يأتي على شكل نقطة معينة في فضاء محدد ويعد هذا المركز العنصر الوحيد للنظام المحوري، ثم من هذين النظامين تم اشتقاق أربعة أنظمة أخرى ومنهم النظام ثنائي المحور (Bipolar) يعتمد على أساس النظام المحوري لكنه يستخدم مركزين البعد بينهما a (سوف نلقي نظرة عليهم لاحقاً) النظام الإسطواني (Cylindrical) يتم تمثيل القيم فيه ضمن اسطوانة ثلاثية الأبعاد والتي تحوي البعد z من النظام الديكارتي وبالنسبة للعناصر الأخرى فهي مورثة من النظام المحوري، النظام الكروي (Spherical) شبيه بالإسطواني لكن العنصر z والذي هو بعد يقدرفي هذا النظام بواسطة قيمة في النظام المحوري ومنه فإن النظام الكروي هو عبارة عن اجتماع نظامين محوريين.

ماهو النظام الديكارتي وماهي عناصره، أبعاده وشكل تمثيل القيم عليه؟

النظام الديكارتي هو كما قلنا نظام يعتمد قوانين تنص على أن يكون التمثيل خطي أي يجب أن تكون القيم أعداد حقيقة لتلائم عناصره والتي تتكون من محاور متعامدة أي أن الزاوية بين هذه المحاور تساوي 90 درجة، فإذا أخذنا محوريين متعامدين ينتج لدينا أربعة أقسام وإذا قمنا بإضافة محور أخر يعامد كل من المحوريين ينتج لدينا ثمانية أقسام تمثل جهات معينة للنظام (سالبة أو موجبة) يتم تحديدها من جهة المحاور ويمكن الإستفادة منها بقضايا أخرى سنتطرق إليها، بماأن عدد المحاور هو ثلاثة فإن عدد أبعاد هو ثلاثة أيضاً (X, Y, Z) أي أن النظام الديكارتي ثادر على تمثيل نقاط ثنائية أو ثلاثية البعد تتراوح قيم إحداثياتها بين اللانهاية السالبة واللانهاية الموجبة، وهنا نرى كيف يتم تمثيل هذه النقاط بالنظام الديكارتي ثنائي البعد:

نرى أنه يتم تعيين النقطة بالنسبة لقيمة أحد إحداثياتها ومن ثم يتم التحديدها نسبةً للإحداثي الثاني.

في النظام الديكارتي ثلاثي البعد:

يختلف التمثيل لأن البعد Z مفروض ومنه يتم أيضاً اعتماد الإحداثيات واحد تلو الأخر لتعيين مكان النقطة في الفضاء ثلاثي البعد.

ماهو النظام المحوري وماهي عناصره، أبعاده وشكل تمثيل القيم عليه؟

النظام المحوري هو نظام دائري أي أن شكله شكل الدائرة له مركز في فضاء معيّن وهو العنصر الوحيد، له بُعد ثنائي غير قابل للزيادة وذلك لأن إضافة بُعد ثالث خطي كان ام دائري فإن اسم النظام يختلف لما تكلمنا عنه سابقاً (االنظامين الإسطواني والكروي) إن قيم النقاط في هذا النظام تعمد على طول مسافة من البعد المركزي وعلى زاوية تحدد وجهة النقطة بالنسبة للمركز، تماماً كالدائرة، إن قيمة نقطة ما في هذا النظام تمثل بالهيئة (البعد، الزاوية) أي (D, θ) تتراوح قيمة البعد بين الصفر واللانهاية الموجبة حصراً لأن البعد أو الطول موجب دائماً، شكل النظام المحوري وتمثيل النقاط عليه:

كما ترى لن تحتاج سوى لمنقلة لتحديد الزاوية :] والبعد لا أدري، ليس هناك مسطرة ذات طول لانهائي. للتذكير π تساوي 180 مقدرة بالدرجات.

والأن كيف يتم تمثيل التوابع بالنظام الديكارتي؟

بكل بساطة تخيل أن لديك تابع بسيط من الدرجة الأولى كـ: y = 2x + 3 علماً أن y ترمز لقيمة الإحداثي على المحور الشاقولي ويرمز له عادةً بـ : (f(x أي يصبح شكل التابع كالتالي:

f(x) = 2x + 3 طبعاً كما يمكننا أن نستنتج أن التابع مستمر على R أي يمكننا دراسة تغييراته على المجال ]∞+, ∞-[ = R ولكن بما أننا نقوم باختبار بسيط لذا سنقوم بدراسته على مجال جزئي وليكن [D1 = [0, 4 اي أن التابع سيأخذ القيم (0، 1، 2، 3، 4) كقيم للإحداثي x وقيم الإحداثي y تحدد بواسطة التابع الذي معادلته 2x + 3 أي كلما عوضاً بقيمة لـx نتج لدينا قيمة لـy:

التعويض بالقيمة صفر: f(0) = 2(0) + 3 = 3 أي عندما تكون x = 0 يكون y = 3؛

التعويض بالقيمة اثنين: f(2) = 2(2) + 3 = 4 + 3 = 7 أي أن قيمة y = 7 عندما تكون قيمة x = 2:

التعويض بالقيمة أربعة: f(4) = 2(4) + 3 = 8 + 3 = 11 بالمثل قيمة y = 11 عندما تمر x بمايقابل القيمة أربعة على المحور x’ x.

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

كيف يتم التحويل بين النظام الديكارتي والنظام المحوري، تعالو لنستنتج العلاقات في التحويل، بدءاً من النظام الديكارتي والدائرة كأساس للنظام المحوري نجد بأخذ معادلة الدائرة:

بما أن المركز المحوري هو نقطة محددة من الفضاء وتساوي الصفر فإن مركز الدائرة هو الصفر أي أن المعادلة تصبح بالتعويض:

ومنه:

فإذا قمنا بقسمة طرفيّ المعادلة على مربع نصف القطر يصبح لدينا:

ومنه:

وبالمقارنة مع المتطابقة المثلثية التالية:

نجد أن:

و:

بالجذر ونقل نصف القطر إلى الطرف الثاني من المساواة وذلك بضرب الطرفين بـr (لاننسى جذر الطرفين) نجد:

و:

وهما العلاقتان الأساسيتان اللتان نستخدمهما بالتحويل من النظام المحوري إلى الديكارتي وذلك بتعويض نصف القطر والذي هو خاصية البعد في النظام المحوري وتعويض الزاوية بوحدة الدرجات وكمثال لنأخذ نقطة بالنظام المحوري تبعد عن المركز مسافة 20 (بأي وحدة كانت ليست مهمة بالتجربة) تصنع زاوية 75 درجة عن الآفق:

نعلم أن تعويض هذه القيم يعطي بالعلاقات السابقة يعطيني قيم الإحداثيان x و y لنمثل النقطة على النظام الديكارتي لكن كيف يمكننا حساب ناتج الدوال المثلثية؟

من المعروف أن هناك بعض الزوايا المشهورة والتي يمكن حساب جيبها (أي قيمة الدالة Sine لهذه الزاوية) وتجيبها (أي قيمة الدالة Cosine لهذه الزاوية) من ثوابت مبرهنة للزوايا (15، 30، 45، 60، 75 و 90) ومايقابلها في القسم الثاني، الثالث والرابع والانتباه إلى إشارة الدالة في كل قسم؛ كما نرى من مثالنا السابق فإن الزاوية 75 درجة وثابتها يساوي:

جيبها أي قيمة الدالة Sine للزاوية 75:

وقيمة الدالة Cosine للزاوية 75 هي:

وبالتعويض نجد أن الإحداثي y يساوي:

والإحداثي x يساوي:

ومنه نحصل النتيجة التالية مع التمثيل البياني للنقطة على النظام الديكارتي:

وبالعكس يمكننا تحويل نقطة من النظام الديكارتي إلى النظام المحوري يإستخدام علاقة البعد بين نقطتين لحساب بعد النقطة عن المركز (المركز والنقطة الموافقة للإحداثيات) وحساب الزاوية بدالة قوس الظل أو Arctan بدلالة x و y أو بواسطة الدالة arccos بدلالة x و r أو D:

حوارنا هذا لم ينته لكنه كافي حتى وقتنا هذا وبالنسبة لنقاشنا التالي حول الرسوم على شاشة الحاسب فالنظام الديكارتي يكفي بالغرض والنظام المحوري يساعدنا في إكمال الفكرة للرسوم التي تعتمد على التمثيل الوسيطي.

السلام عليكم ورحمه الله وبركاته

شكرا اخ بشار على المجهود الرائع دوما, بس حبيت اضيف ان هناك 3 انواع من الـ Coordinate Systems الا وهي:

World Coordinate

تحدد موقع النقطة المقاسة بالبكسل من الحافة اليسرى العلوية للمستند

Page Coordinate

تحدد موقع النقطة المقاسة بالبكسل من الحافة اليسرى العلوية لمساحة العميل Client Area

Device Coordinate

شبيه بالسابق عدا انه لا تعتمد على البكسل

VB Helper كتب:

السلام عليكم ورحمه الله وبركاته

شكرا اخ بشار على المجهود الرائع دوما, بس حبيت اضيف ان هناك 3 انواع من الـ Coordinate Systems الا وهي:

World Coordinate

تحدد موقع النقطة المقاسة بالبكسل من الحافة اليسرى العلوية للمستند

Page Coordinate

تحدد موقع النقطة المقاسة بالبكسل من الحافة اليسرى العلوية لمساحة العميل Client Area

Device Coordinate

شبيه بالسابق عدا انه لا تعتمد على البكسل

وعليكم السلام،

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

بالتوفيق.

السلام عليكم ورحمه الله وبركاته

بالتوفيق اخي .. في انتظار المزيد من ابداعاتك!!

موضوع عملاق وشامل لحد الآن بالفعل . لا اجد اي شيء اضيفه له.

بارك الله فيك ، تابع

السلام عليكم ورحمة الله وبركاته

ماشاء الله تبارك الرحمن ,, جميل جداااا الشرح ,,, بس ليش الصور اللي في المشاركة الاولى -المقدمة- لا تظهر عندي؟؟!