Converting Color To Grayscale
the yellow flowers.jpg image
How to covert a regular color image to grayscale?
Problem: for each pixel, how dark/light is it (ignoring hue)
Choose a few pixels out of flowers.jpg, each in a row below
Q: which pixel is brightest? darkest?
We compute average for each pixel
Reminder: to average 3 numbers, add them up and divide by 3
average = (red + green + blue)/3
red green blue average
average = (red + green + blue) / 3
200 50 50 100 (medium bright)
0 75 75 50 (darkest)
100 250 250 200 (brightest)
Looking at just red or blue or green in isolation, it's hard to tell which pixel is brightest or darkest in the above table. The average combines and summarizes the three values into one number 0..255. The average shows how bright the pixel is, ignoring hue: 0 = totally dark, 255=totally bright, with intermediate average values corresponding to intermediate brightnesses. More complicated brightness measures are possible, but average is simple and works fine for our purposes.
Average combines red/green/blue into one number
The average measures how bright the pixel is 0..255
Ignoring hue
Grayscale Conversion Example
For this example, we'll write code to change the flowers.jpg image to grayscale, using the "average" strategy: for each pixel, compute the average of its red/green/blue values. This average number represents the brightness of the pixel 0..255. Then set the red, green, and blue values of the pixel to be that average number. The result is a grayscale version of the original color image. Once its working with flowers.jpg, try it with poppy.jpg or oranges.jpg. (Solution code available below)
image = new SimpleImage("flowers.jpg");
for (pixel: image) {
// your code here
}
print(image);
Q: must the "avg = ... " line be inside the loop?
A: yes, it must be inside the loop
The equals sign (=) does not set up some formula to work for all time
Computer code is not that powerful generally
The = just does math when that line runs
Each pixel has different red/green/blue values
We need to re-do the addition / divide-3 for each pixel
Solution code:
show
Grayscale Summary
When red/green/blue values are equal .. shade of gray
Average combines red/green/blue into one number
The average measures how bright the pixel is 0..255
Convert pixel to grayscale: set red, green, and blue to be the average
Standard code line to compute average within loop. We'll use this line often for later problems.
avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;
the yellow flowers.jpg image
How to covert a regular color image to grayscale?
Problem: for each pixel, how dark/light is it (ignoring hue)
Choose a few pixels out of flowers.jpg, each in a row below
Q: which pixel is brightest? darkest?
We compute average for each pixel
Reminder: to average 3 numbers, add them up and divide by 3
average = (red + green + blue)/3
red green blue average
average = (red + green + blue) / 3
200 50 50 100 (medium bright)
0 75 75 50 (darkest)
100 250 250 200 (brightest)
Looking at just red or blue or green in isolation, it's hard to tell which pixel is brightest or darkest in the above table. The average combines and summarizes the three values into one number 0..255. The average shows how bright the pixel is, ignoring hue: 0 = totally dark, 255=totally bright, with intermediate average values corresponding to intermediate brightnesses. More complicated brightness measures are possible, but average is simple and works fine for our purposes.
Average combines red/green/blue into one number
The average measures how bright the pixel is 0..255
Ignoring hue
Grayscale Conversion Example
For this example, we'll write code to change the flowers.jpg image to grayscale, using the "average" strategy: for each pixel, compute the average of its red/green/blue values. This average number represents the brightness of the pixel 0..255. Then set the red, green, and blue values of the pixel to be that average number. The result is a grayscale version of the original color image. Once its working with flowers.jpg, try it with poppy.jpg or oranges.jpg. (Solution code available below)
image = new SimpleImage("flowers.jpg");
for (pixel: image) {
// your code here
}
print(image);
Q: must the "avg = ... " line be inside the loop?
A: yes, it must be inside the loop
The equals sign (=) does not set up some formula to work for all time
Computer code is not that powerful generally
The = just does math when that line runs
Each pixel has different red/green/blue values
We need to re-do the addition / divide-3 for each pixel
Solution code:
show
Grayscale Summary
When red/green/blue values are equal .. shade of gray
Average combines red/green/blue into one number
The average measures how bright the pixel is 0..255
Convert pixel to grayscale: set red, green, and blue to be the average
Standard code line to compute average within loop. We'll use this line often for later problems.
avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;
Skill Oneصورة الألغاز
الصور الرمادية في هذا القسم ، سننظر في بنية تدرج الرمادي مقابل الصور الملونة ، وبعض التعليمات البرمجية للعب مع هذا الاختلاف. الرمادي بين RGB زيارة مستكشف RGB معرفة كيفية جعل الألوان على الطيف الرمادي مثلا قيم RGB لجعل: رمادي غامق ، رمادي متوسط ، رمادي فاتح سوف نقول أن هذه الرمادي تفتقر إلى "هوى" الإجابة: يتم معايرة مقياس RGB بحيث عندما تكون الأرقام الثلاثة أحمر / أخضر / أزرق للبكسل متساوية ، يكون البيكسل ظلًا رماديًا. جعل جميع الأرقام متساوية ، مثل الأحمر = 50 أخضر = 50 أزرق = 50 يستنزف أي تحيز نحو الأحمر أو الأخضر أو الأزرق. إذا كانت البيكسل باللون الأحمر = 50 باللون الأخضر = 75 باللون الأزرق = 50 ، فسيكون لونها أخضر بعض الشيء ، لكن يجعلها متساوية ، لن يكون ذلك تجاه أي تدرج معين. هذا يعمل لأن الشاشات والأنظمة الأخرى التي تستخدم RGB تتم معايرتها بحيث تكون الحالات المتساوية على الطيف الأسود..الرمادي .. أمثلة من الألوان الرمادية في RGB: أحمر اللون الأزرق والأخضر 50 50 50 رمادي غامق 120 120 120 رمادي متوسط 200 200 200 رمادي فاتح في الواقع ، تتناسب الألوان الأصلية / البيضاء النقية مع هذا النمط المتساوي أيضًا ، فقط باستخدام القيمتين 0 و 255. 0 0 0 أسود نقي 255 255 255 بيضاء نقية الحرية الحمراء مثال على مشكلة في ما يلي صورة للتمثال أو الحرية حيث تكون جميع البيانات في القيم الحمراء ، وبالتالي تبدو الصورة بالكامل حمراء. القيم الخضراء والزرقاء كلها صفرية. هذه الصورة تبدو خاطئة جدا. على سبيل المثال ، سنكتب رمزًا لإصلاح هذه الصورة عن طريق نسخ القيمة الحمراء لاستخدامها كقيمة خضراء وزرقاء. إذاً ، بالنسبة للبكسل ، إذا كان اللون الأحمر هو 27 ، فقم بتعيين الأخضر والأزرق أيضًا على 27. ماذا ستكون النتيجة المرئية لهذا؟ image = SimpleImage ("liberty-red.jpg") ؛ لـ (بكسل: صورة) { // رمزك هنا } طباعة (صورة)؛ كود الحل: تبين تحويل اللون إلى درجات رمادية Grayscale Images In this section, we'll look at the structure of grayscale vs. color images, and some code to play with that difference. Gray Among The RGB Visit the RGB explorer Figure out how to make colors on the grayscale spectrum e.g. RGB values to make: dark gray, medium gray, light gray We'll say that these grays lack "hue" Answer: the RGB scale is calibrated so that when all three red/green/blue numbers of a pixel are equal, the pixel is a shade of gray. Making all the numbers equal, like red=50 green=50 blue=50 drains any bias towards red, green, or blue. If a pixel were red=50 green=75 blue=50 it would be a bit greenish, but making them all equal, it's not towards any particular hue. This works because the displays and other systems using RGB are calibrated so that the all-equal cases are on the black..gray..white spectrum. Examples of gray colors in RGB: red green blue color 50 50 50 dark gray 120 120 120 medium gray 200 200 200 light gray In fact, the original pure black/white colors fit this all-equal pattern too, just using the values 0 and 255. 0 0 0 pure black 255 255 255 pure white Red Liberty Example Problem Here is an image of the Statue or Liberty where all of the data is in the red values, so the whole image looks red. The green and blue values are all zero. This image looks quite wrong. For this example, we'll write code to fix this image by copying the red value over to be used as the green and blue value. So for a pixel, if red is 27, set green and blue to also be 27. What will be the visual result of this? image = new SimpleImage("liberty-red.jpg"); for (pixel: image) { // your code here } print(image); Solution code: show Converting Color To Grayscale تحويل اللون إلى درجات رمادية صورة الصفراء flowers.jpg كيف تخفي صورة ملونة عادية لتدرج الرمادي؟ المشكلة: لكل بكسل ، كيف يكون الظلام / الضوء (تجاهل تدرج اللون) اختر بضع وحدات بكسل من flowers.jpg ، كل في صف واحد أدناه س: أي بكسل هو ألمع؟ أحلك؟ نحسب المتوسط لكل بكسل تذكير: في المتوسط 3 أرقام ، إضافتها وتقسيمها على 3 المتوسط = (أحمر + أخضر + أزرق) / 3 أحمر أزرق أخضر متوسط المتوسط = (أحمر + أخضر + أزرق) / 3 200 50 50 100 (متوسطة مشرق) 0 75 75 50 (أحلك) 100 250 250 200 (ألمع) عند النظر إلى اللون الأحمر أو الأزرق أو الأخضر فقط ، من الصعب معرفة البكسل الأكثر سطوعًا أو الأغمق في الجدول أعلاه. يجمع المتوسط ويلخص القيم الثلاث في رقم واحد 0..255. يُظهر المتوسط مدى سطوع البكسل ، متجاهلاً تدرج اللون: 0 = مظلمة تمامًا ، 255 = مشرق تمامًا ، مع قيم متوسط متوسطة تقابل السطوع المتوسط. من الممكن إجراء مقاييس سطوع أكثر تعقيدًا ، لكن المتوسط بسيط ويعمل بشكل جيد لأغراضنا. يجمع المتوسط بين الأحمر / الأخضر / الأزرق إلى رقم واحد يقيس المتوسط مدى سطوع البكسل 0.55 تجاهل هوى مثال على تحويل تدرج الرمادي في هذا المثال ، سنكتب رمزًا لتغيير صورة flowers.jpg إلى تدرج الرمادي ، باستخدام استراتيجية "متوسط": لكل بكسل ، حساب متوسط قيمه أحمر / أخضر / أزرق. يمثل هذا الرقم المتوسط سطوع البكسل 0.55. ثم قم بتعيين قيم الأحمر والأخضر والأزرق للبكسل لتكون متوسط العدد. والنتيجة هي إصدار تدرج الرمادي للصورة الملونة الأصلية. بمجرد العمل مع flowers.jpg ، جربه مع poppy.jpg أو oranges.jpg. (رمز الحل متاح أدناه) صورة = SimpleImage جديدة ("flowers.jpg") ؛ لـ (بكسل: صورة) { // رمزك هنا } طباعة (صورة)؛ س: هل يجب أن يكون السطر "avg = ..." داخل الحلقة؟ ج: نعم ، يجب أن يكون داخل الحلقة علامة التساوي (=) لا تقوم بإعداد بعض الصيغة للعمل طوال الوقت رمز الكمبيوتر ليس بهذه القوة بشكل عام = فقط يفعل الرياضيات عند تشغيل هذا الخط كل بكسل لديه قيم حمراء / خضراء / زرقاء مختلفة نحن بحاجة إلى إعادة القيام بالإضافة / divide-3 لكل بكسل كود الحل: تبين ملخص تدرج الرمادي عندما تكون قيم الأحمر / الأخضر / الأزرق متساوية .. ظلال رمادية يجمع المتوسط بين الأحمر / الأخضر / الأزرق إلى رقم واحد يقيس المتوسط مدى سطوع البكسل 0.55 تحويل البكسل إلى تدرج الرمادي: تعيين الأحمر والأخضر والأزرق ليكون المتوسط سطر رمز قياسي لحساب المتوسط داخل الحلقة. سنستخدم هذا الخط في كثير من الأحيان للمشاكل اللاحقة. avg = (pixel.getRed () + pixel.getGreen () + pixel.getBlue ()) / 3؛ Converting Color To Grayscale the yellow flowers.jpg image How to covert a regular color image to grayscale? Problem: for each pixel, how dark/light is it (ignoring hue) Choose a few pixels out of flowers.jpg, each in a row below Q: which pixel is brightest? darkest? We compute average for each pixel Reminder: to average 3 numbers, add them up and divide by 3 average = (red + green + blue)/3 red green blue average average = (red + green + blue) / 3 200 50 50 100 (medium bright) 0 75 75 50 (darkest) 100 250 250 200 (brightest) Looking at just red or blue or green in isolation, it's hard to tell which pixel is brightest or darkest in the above table. The average combines and summarizes the three values into one number 0..255. The average shows how bright the pixel is, ignoring hue: 0 = totally dark, 255=totally bright, with intermediate average values corresponding to intermediate brightnesses. More complicated brightness measures are possible, but average is simple and works fine for our purposes. Average combines red/green/blue into one number The average measures how bright the pixel is 0..255 Ignoring hue Grayscale Conversion Example For this example, we'll write code to change the flowers.jpg image to grayscale, using the "average" strategy: for each pixel, compute the average of its red/green/blue values. This average number represents the brightness of the pixel 0..255. Then set the red, green, and blue values of the pixel to be that average number. The result is a grayscale version of the original color image. Once its working with flowers.jpg, try it with poppy.jpg or oranges.jpg. (Solution code available below) image = new SimpleImage("flowers.jpg"); for (pixel: image) { // your code here } print(image); Q: must the "avg = ... " line be inside the loop? A: yes, it must be inside the loop The equals sign (=) does not set up some formula to work for all time Computer code is not that powerful generally The = just does math when that line runs Each pixel has different red/green/blue values We need to re-do the addition / divide-3 for each pixel Solution code: show Grayscale Summary When red/green/blue values are equal .. shade of gray Average combines red/green/blue into one number The average measures how bright the pixel is 0..255 Convert pixel to grayscale: set red, green, and blue to be the average Standard code line to compute average within loop. We'll use this line often for later problems. avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3; %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% هذا مقطع قصير للنظر في نوع الألغاز المبني على كود معالجة الصورة. رمز لإصلاح بكسل هناك صورة لبعض وجوه لغز غير معروفة تم تشويه القيم أحمر / أخضر / أزرق ، إخفاء الصورة الحقيقية اكتب رمزًا لإصلاح وحدات البكسل استعادة الصورة الأصلية لحل اللغز لغز الذهب هنا لدينا صورة لغز "الذهب" - قم بإصلاحها لترى صورة لغز الصورة الذهبية الحقيقية معلمات لغز الذهب: القيمان الخضراء والزرقاء كلها مجرد قيم عشوائية في النطاق 0.55 ("الثلج") بيانات الصورة الحقيقية هي حصرا في القيم الحمراء بالإضافة إلى ذلك ، تم تقسيم جميع القيم الحمراء على 10 (الظلام) الثلج الأخضر / الأزرق يحجب الصورة الحقيقية اكتب الكود لاستعادة الصورة الحقيقية صورة = SimpleImage جديدة ("puzzle-gold.png") ؛ لـ (بكسل: صورة) { // رمزك هنا pixel.setGreen (0)؛ pixel.setBlue (0)؛ pixel.setRed (pixel.getRed () * 10) ؛ } طباعة (صورة)؛ كود الحل: // الاستراتيجية: صفر خارج الأزرق والأخضر لأنها / / هي مجرد بيانات القمامة. // ثم قم بتوسيع النطاق الأحمر بمقدار 10x لرؤية الحجم الحقيقي // الصورة باللون الأحمر. // رمزك هنا pixel.setGreen (0)؛ pixel.setBlue (0)؛ pixel.setRed (pixel.getRed () * 10) ؛ رؤية الأحمر في هذه الحالة ، يظهر حلنا الصورة ، لكن كل شيء باللون الأحمر. ما لدينا هنا هو في الأساس صورة بالأبيض والأسود ، لكنه يظهر في النطاق الأسود والأحمر ، بدلاً من الأسود والأبيض المعتاد. بالنسبة لهذا القسم ، سنقول إن هذا جيد بما فيه الكفاية. سنرى كيفية إصلاح الصورة الحمراء بحيث تبدو كصورة سوداء وبيضاء مناسبة في قسم لاحق. Image Puzzles This is a short section to look at type of puzzle built out of image manipulation code. Code To Fix the Pixels There is an image of some unknown puzzle object Red/green/blue values have been distorted, hiding the real image Write code to fix the pixels Recover the original image to solve the puzzle Gold Puzzle Here we have the "gold" puzzle image -- fix it to see the real image gold puzzle image Gold puzzle parameters: The green and blue values are all just random values in the range 0..255 ("snow") The data of the real image is exclusively in the red values In addition, the red values have all been divided by 10 (dark) The green/blue snow is obscuring the real image Write code to recover the real image image = new SimpleImage("puzzle-gold.png"); for (pixel: image) { // your code here pixel.setGreen(0); pixel.setBlue(0); pixel.setRed(pixel.getRed() * 10); } print(image); Solution code: // Strategy: zero out blue and green as they // are just garbage data. // Then scale red up by 10x to see the real // image in red. // your code here pixel.setGreen(0); pixel.setBlue(0); pixel.setRed(pixel.getRed() * 10); Seeing Red In this case, our solution shows the image, but it's all in red. What we have here is basically a black-and-white image, but it is shown in the black-red range, rather than the usual black-white. For this section, we'll say that's good enough. We'll see how to fix the red image so it looks like a proper black-and-white image in a later section. Introduce a type of puzzle هذا مجرد مقطع قصير لتقديم نوع من الألغاز ، والذي تم بناء عليه هذا النوع من كود معالجة الصور الذي نقوم به. لذا فإن الفكرة هي أن هناك صورة لبعض وجوه الغموض. والقيم الحمراء والخضراء والزرقاء في الصورة كانت للتو افسدت بطريقة ما. وهكذا ، ما عليك القيام به هو كتابة التعليمات البرمجية لإصلاح قيم الأحمر والأخضر والأزرق ، وهكذا تكشف عن الصورة الأصلية ، وترى ما هي عليه. لذا ، إليك مثال سأفعله هنا. هذا هو ما يسمى ب "اللغز الذهبي". والفكرة ، إذن ، هناك ، بعض الأشياء معروضة هنا. وما حدث مع هذا هذا هو ، أولاً وقبل كل شيء ، كانت القيم الخضراء والأزرق في الصورة فقط تعيين مع قيم عشوائية بين صفر و 255. وفي الواقع ، إذا نظرت إليها ، لذلك يعطي نوعا من ، مظهر ثلجي. و ، يمكنك أن ترى ، هناك ، لذلك هناك بعض وحدات البكسل حيث يكون اللون الأخضر مرتفعًا للغاية ، وبعض وحدات البكسل حيث يكون اللون الأزرق مرتفعًا جدًا ، تبدو فقط زرقاء أو خضراء. ثم هناك هذا النوع من البكسلات الفيروزية المبعثرة ؛ هذه هي الحالات التي يكون فيها اللونان الأزرق والأخضر مرتفعين. هذا واحد ، مستوى واحد من الفوضى في هذه الصورة. الشيء الآخر الذي حدث هو أن الصورة التي نريد استردادها ، إنها في القيم الحمراء. في الواقع ، هو حصرا في القيم الحمراء. الأخضر والأزرق هي مجرد نوع من القمامة. لكن القيم تم تقسيمها على عشرة ، لذا فهي مظلمة جدًا. لذلك ، نوع من ما نراه هنا في النسخة الغامضة ، هناك ، هناك صورة حمراء داكنة وراء هناك. وقد تم تغطيتها بهذا ، نوع من عشوائي مشرق الثلج الأزرق الأخضر ، لذلك لا يمكننا رؤيته. لذلك ما نريد القيام به هو ، كتابة التعليمات البرمجية لإصلاحها. This is just a short section to introduce a type of puzzle, which is built on the sort of image manipulation code we've been doing. So the idea is, there's a picture of some mystery object. And the red, green and blue values in the image have just been messed up in some way. And so, what you need to do is write code to fix the red, green, and blue values, and so reveal the original image, and, and see what it is. So, here is an example I'm gonna do here. This is the so called "Gold Puzzle". And, the idea, so there's, there's, some object is shown here. And what's happened with this is that, first of all, the green and blue values in the image have been just set with random values between zero and 255. And actually, if you look at it, so it gives a kind of a, a snowy appearance. And it, you can kinda see, there's, so there's some pixels where the green is very high, some pixels where the blue is very high, they just look blue or green; and then there's these sort of turquoise pixels scattered through; so those are cases where, both the blue and the green are high. So that's one, one level of mess-up in this image. The other thing that's happened is that the image that we wanna recover, it's in the red values. In fact, it's exclusively in the red values. The green and blue are just, sort of, garbage. But the values have been divided by ten, so they're very dark. So, kind of what we're seeing here in the obscure version, is, there's, there's a dark red image behind there. And it's been covered with this, sort of bright random green blue snow, so we can't see it. So what we want to do is, write code to fix it. لذلك اسمحوا لي أن أبدأ هنا. هكذا كالعادة ، بالنسبة لهم ، سأبدأ مع مجرد منطقة نص فارغة فقط لكتابة التعليمات البرمجية. ثم هناك حل هنا ، زر "إظهار الحل". لذلك إذا أردت زيارة هذه الصفحة وتجربتها بنفسك ، فيمكنك الحصول على الكود بهذه الطريقة. حسنًا ، إذن أول شيء أريد القيام به ، لذلك ، إليك ما يبدو عليه إذا قمت بتشغيله هنا فقط: الحلقة فارغة. لذلك إذا قمت بتشغيله ، فنحن فقط ، نحصل على صورة الألغاز الخام. حسناً ، أول ما سأفعله هو أن أقول pixel.setGreen (0) انا ذاهب لكمة القيم الخضراء. أنا فقط سأتخلص منهم وسنرى ما نحصل عليه. حسنًا ، حسنًا ، حسنًا ، إنه أفضل. الآن نحن فقط يكون هذا الثلج الأزرق. لقد تخلصنا على الأقل من الثلج الأخضر. لذلك سوف أتخلص من الثلج الأزرق أيضًا. سأقول ، pixel.SetBlue (0) ، سنحاول ذلك. حسنًا ، حسنًا ، لقد تخلصت من الثلج. ولكن الآن المشكلة هي أن الصورة ، والتي هي في القيم الحمراء. إنه مجرد مظلم ، لا يمكننا رؤيته. اذا هي كذلك، إنه من الناحية الفنية ، لكنه غير مرئي. لذلك ما أحتاجه هو توسيع نطاقه احتياطيًا ، حق؟ انها هناك ، أنا فقط بحاجة لجعله أكثر إشراقا. لذلك سأقول pixel.setRed من pixel-dot-getRed "يشبه قليلا خمسة ، عشر ، عشرون الألغاز هنا. لذلك سأعمل ، في هذه الحالة ، تقول التعليمات إنه تم تخفيضه بعامل عشرة. لذلك سأقوم بتوسيع نطاق النسخة الاحتياطية باللون الأحمر بعامل عشرة. هاه ، هناك نذهب. لذلك ، هذه هي الصورة الحل. وبالتالي، هذه صورة لجسر البوابة الذهبية ، كما يظهر من جانب سان فرانسيسكو. الآن، من الواضح أنه لا يبدو صحيحًا تمامًا. ما حدث ، هو ، لأنه تكون البيانات باللون الأحمر بشكل حصري ، حتى عندما نستعيدها ، فإنها تبدو باللون الأحمر فقط. يعني ما ما حدث ، في الواقع. هل هذه صورة بالأسود والأبيض وعادة ما تظهر تلك على ، على نوع من الطيف الأسود إلى الأبيض. في هذه الحالة، يتم عرض الصورة على الطيف الأسود إلى الأحمر. لذلك هي الصورة الصحيحة لكنها فقط ، لديها هذا يلقي أحمر. في هذا القسم ، سنقول إن هذا جيد بما فيه الكفاية: أنت تعرف ، يمكنك أن ترى ما يفترض أن يكون. في قسم لاحق سأري كيف ، كيفية إصلاح ذلك. واحصل عليها لتبدو وكأنها صورة سوداء وبيضاء مناسبة. So let me start off here. So as usual, for these, I'm going to start off with just a blank text area to just write the code. And then down here there's a solution, "Show solution" button. So if you wanted to visit this page and try it yourself, you can, you can get the code that way. Alright, so the first thing I want to do, so here's, here's what it looks like if I just run it right here: the loop is empty; so if I run it, we just, we just get the, the puzzle image raw. Alright, so the first thing I'm going to do is I'll say pixel.setGreen(0) I'm going to punch out the green values. I'm just going to get rid of them and we'll see what we get. Hmm, alright, So now, well, it's better. Now, we just have this blue snow. We've at least gotten rid of the green snow. So I'll get rid of the blue snow as well. So I'll say, pixel.SetBlue(0), we'll try that. Alright, hmm, So, I, I've got rid of the snow. But now the problem is that the image, which is in the red values. It's just so dark, we can't see it. So it is, it's technically there, but it's invisible. So what I need to is scale it back up, right? It's down there, I just need to make it brighter. So I'll say pixel.setRed of pixel-dot-getRed" Looks a little bit like the five, ten, twenty puzzles here. So I'm gonna, in this case, the instructions say that it was scaled down by a factor of ten. So I'll scale the red back up by a factor of ten. Huh, there we go. So that, that is the solution image. So, this is a picture of the Golden Gate Bridge, as seen from the San Francisco side. Now, it's a little, obviously, it doesn't look quite right. What's happened, is that, because the data is exclusively in the red, even when we recover it, it just looks red. I mean, what's, what's happened, actually. Is this is an essentially a black and white image and normally those are shown on a, on a sort of black to white spectrum. In this case, the image is being shown on a black to red spectrum. So it is the right image but it just, it has this red cast. For this sections we're gonna say that's good enough: you know, you can see what it's supposed to be. In a later section I'll show how to, how to fix that. And get it to look like a, a proper black and white image. إذن ، الصورة الحمراء للحرية هنا ، إنها صورة لتمثال الحرية. لكن كل البيانات في القيم الحمراء للبكسل. إذن القيم الحمراء هي أنت تعرف ، 37 أو 200 ، أو أيا كان. إنهم يتغيرون لإظهار هذه الصورة. ال القيم الخضراء والزرقاء هي مجرد صفر في كل مكان. لا يوجد شيء هناك. لذا أنا يعني ، أيا كان. إنه يبدو سيئًا أو يبدو خطأً بالتأكيد. لذلك أريد أن أفكر حول ، حسنا ، كيف يمكنني إصلاح ذلك؟ أود إصلاح هذا لتبدو وكأنها ، الصورة الرمادية لتمثال الحرية ، وليس هذا ، وليس هذا الشيء الأحمر. لذلك ، الطريق إلى افعل هذا. ما أنا ، أنا ذاهب لاستخدام هذا حقيقة أنه إذا كان الأخضر والأزرق والأحمر كلها متشابكة ، ستكون رمادية اللون. الآن في هذه الحالة ، فإن البيانات هي في. لكل بكسل في القيمة الحمراء. لذلك إذا قلت ، pixel.setGreen. و ماذا سأفعل هو أنني سأعمل القيمة الخضراء ، وسأغيرها لتصبح هي نفسها كما القيمة الحمراء. لذلك سأفعل ذلك بالقول ، pixel.getRed هنا. وماذا في ذلك هذا لا. هو مع pixel.getRed هذا النوع من يختار عدد من أصل ل ، أنت تعرف ، لكل بكسل. تلتقط القيمة الحمراء. لذلك هو 27 أو 100 أو أيا كان أنه. ثم يعينها لتكون القيمة الخضراء. الآن هذا غير عادي بعض الشيء. عادة ما نسميه setGreen لقد مزجناها مع getGreen و setBlue مزجنا مع getBlue. ولكن هذا هو تركيبة صالحة كذلك ويحدث في هذا حالة يفعل ما أريد. إذاً سأفعلها مجددًا باللون الأزرق. يصيح. لذلك ، سأقول بكسل نقطة getRed. وبعد ذلك سوف أضع ذلك في اللون الأزرق. أنا سوف أرتب هذا الأمر ، دعونا الآن جرب ذلك. أوه ، هناك نذهب. لذلك ، هذا هو مجرد تطبيق لهذه الميزة من مساحة RGB ، عندما تكون الأرقام متساوية ، تكون تدرج الرمادي. وأنا كذلك ، أنا أفرز لاسترداد القيمة من الأحمر ، وأنا ضبطها على اللون الأزرق والأخضر. و حينئذ الآن ، هو ، يعمل على إصلاح الصورة ، لذا يبدو ، أبيض وأسود ، لكن على الأقل يبدو بخير. لذلك سؤال ذو صلة. أو ربما يكون السؤال العملي أكثر ، حسناً ، إذا كان لدي صورة ملونة. مثل ، هنا ، وهنا لدينا صورة الزهور القديمة. كيف يمكنني أن تحويله إلى مقياس رمادي؟ والطريقة التي سأفكر فيها ، هي ، كما تعلم ، إذا نحن نبحث هنا في هذه الزهور ، انها ، مثل ، حسنا. أريد أن استنزاف هوى بها. أريد فقط أن أفكر في كل واحد من هذه البكسلات. الظلام ، أو الظلام أو النور. مجرد وجود قدر من السطوع ، ومن الواضح ، هناك ، كما تعلمون ، هناك الكثير أمثلة في هذا ، في هذه الصورة. لنفترض أن المشكلة ستكون كذلك النظر إلى بكسل ، ما هو الظلام أو النور؟ هذا ما أريد] غير مسموع [، تقليل هذا وصولا الى. لنفترض إذن ، لقد التقطت ثلاثة بكسلات. خارج تلك الصورة و لقد وضعتهم في هذا الجدول والآن أريد أن أفكر في أي من هذه البكسلات أحلك وأخف وزنا. حتى هنا بكسل الأول وهنا بكسل الثاني و هنا بكسل الثالث. وهنا ، سأقوم بتكبير هذا قليلاً. لذلك أنا فقط محاولة الحكم على النور مقابل الظلام. من هو ، ما هو الأخف وزنا ، ما هو أحلك هنا؟ لنفترض ، إذا كنت فقط أنظر إلى القيم الحمراء. كنت أرى ذلك يحتوي هذا البكسل الأول على 200 أحمر. ثم ، هذا أكثر إشراقًا من الآخرين ، أليس كذلك؟ أعني ، الأرقام العالية مشرقة ، 255 هي الحد الأقصى. و الصفر هو الأسود ، لذلك. يبدو ، أوه نعم ، هذا بكسل الأول. 200 ، وهذا هو بوضوح ألمع. ولكن بعد ذلك ، إذا نظرت أكثر. في في القيمة الخضراء. وبعد ذلك مثل ، يا إلهي ، ولكن هذا بكسل الثالث لديه في الواقع قيمة عالية حقا لاللون الأخضر على الرغم من أنها منخفضة كيندا للأحمر. لذلك ، أنا لست متأكدًا تمامًا من كيفية تحقيق هذا التوازن ضد بكسل أخرى. لكن هذا صعب لأنه ما ، وبالأخص ما نراه هو أنه لا يمكنك إلقاء نظرة على واحدة من اللون الأحمر والأخضر والأزرق للحكم على مدى سطوع الشيء هو ، كنت تريد kinda لحسابهم جميعا. لذلك ، حلنا في هذه الحالة ، التي لدي فيها ، العمود الرابع هنا ، هو حساب المتوسط لكل بكسل. لذلك كل بكسل له قيمة حمراء وخضراء وزرقاء. ما سأفعله هو مجرد حساب متوسط هذه الأرقام الثلاثة ، وطريقة القيام بذلك. هل تضيف فقط ، لذلك أنا فقط ستعمل على حساب اللون الأحمر بالإضافة إلى اللون الأخضر بالإضافة إلى اللون الأزرق لكل بكسل ، ثم اقسم على ثلاثة. بحيث تعطينا متوسط قيمة الأحمر والأخضر والأزرق. وهذا المتوسط ستعمل القيمة كملخص لطيف جدًا لمدى سطوع البكسل. صحيح ، بحيث يكون المتوسط صفر أو عشرة أو عشرين ، بعض الأرقام قليلة. نحن لا نعرف ما هو هو بالضبط ، لكننا نعرف أنه الظلام. وفي الطرف الآخر ، إذا كان المتوسط هو 220 أو 240 ، ومرة أخرى لا نعرف ما هو لونه ، لكننا نعرف أنه مشرق. So the, the liberty-red image here it's, it's a picture of the Statue of Liberty. But all of the data is in the red values of the pixels. So the red values are, you know, 37 or 200, or whatever. They're, they're varying to show this image. The green and the blue values are just zero everywhere. There's nothing there. So, I mean, whatever. It, it looks bad, or it certainly looks wrong. So I wanna think about, well, how could I fix that? I'd like to fix this to look like a, a grayscale picture of Statue of Liberty, not this, not this red thing. So, the way to do this. What I'm, I'm going to use this the fact that if the green, blue, and red are all the same, that's going to be shaded grey. Now in this case, the data is in. For each pixel is in the red value. So if I say, pixel.setGreen. And what I'm gonna do is I'm gonna make the green value, I'm gonna change it to be the same as the red value. So I'll do that by saying, pixel.getRed here. So what this does. Is with the pixel.getRed that sort of picks the number out of for, you know, for each pixel. It picks up the red value. So it's 27 or 100 or whatever it is. And then sets it in to be the green value. Now this is a little unusual. Usually what we call setGreen we've mixed it with getGreen and setBlue we've mixed with getBlue. But this is a valid combination as well and it happens in this case it does what I want. So then I'll do it again for blue. Whoops. So, I will say pixel dot getRed. And then I'll set that into blue. I'll neaten this up, now let's try that. Oh, there we go. So, this is just an application of this feature of the RGB space that, when the numbers are equal, it's grayscale. And so I, I sort of retrieve the value out of the red, and I set it over to blue and green. And so now, it, it sort of fixes the image, so it looks, It's black and white, but at least it looks okay. So a related question. Or maybe a more practical question is, well, if I've got a color image. Like, here's, here's our old flowers image. How could I convert it to gray scale? And, the way I'm gonna think about that, is, you know, if we're looking here at these flowers, it's, like, well. I wanna drain the hue out it. I just wanna think of each one of these pixels as being. Dark, or, dark or light. Just having some amount of brightness, and obviously, there's, you know, there's many examples in this, in this image. So suppose, so the problem is gonna be looking at a pixel, how dark or light is it? That's what I wanna [inaudible], reduce this down to. So suppose I, I picked three pixels. Out of that image and I put them in this table and now I want to think about which one of these pixels is darkest and lightest. So here's the first pixel and here's the second pixel and here's the third pixel. And here, I'll zoom in on this a little bit. So I'm just trying to judge light versus dark. Who's the, what's the lightest, what's the darkest here? So suppose, if I was just looking at the red values. I'd see that this first pixel has a red of 200. And then that's, that's just much brighter than the others, right? I mean, high numbers are bright, 255 is the max. And zero is black, so. It looks like, oh yeah, this first pixel. 200, that's clearly the brightest. But then, if I look over. In the at the green value. And then it's like, oh gosh, but this third pixel actually has a really high value for green even though it's kinda low for red. So I, I'm not quite sure how that balances against the other pixels. But it's hard because what it, essentially what we see is that you can't just look at one of red, green, blue to judge how bright the thing is, you sorta want to count them all. So, our solution in this case, which I have in the, the fourth column here, is to compute the average for each pixel. So each pixel has a red, green and blue value. What I'm gonna do is just compute the average of those three numbers, and the way to do that. Is you just add'em up, so I'm just gonna compute red plus green plus blue for each pixel, and then just divide by three. So that'll give us the average value of the red, green and blue. And that average value is gonna work as a pretty nice summary of just how bright the pixel is. Right, so that the average is zero or ten or twenty, some low number. We don't know what hue it is exactly, but we know it's dark. And at the other end, if the average is 220 or 240, again we don't know what the hue is but, but we know it's bright. لذا فإن المتوسط سيعمل كنوع من ملخص البيكسل ، حيث يسقط من هوى ويعطينا فقط رقم واحد ، صفر إلى 255 ، الذي يلتقط فقط سطوع. الآن يجب أن أقول ، هناك طرق أخرى للقيام بذلك ولكن فقط حساب المتوسط بسيط وهو جيد. إنه أمر سيئ ، إنه سيعمل بشكل جيد أغراضنا. حتى في هذه الحالة ، أنا ، كان لدي هذه بكسلات الثلاثة وهكذا هنا على الجانب الأيمن أنا فقط حساب المتوسط. وما نراه هو ، حقا الثالث هو إلى حد بعيد ألمع. إذا كنت تعرف أنظر إلى الثلاثة من الأحمر والأخضر والأزرق ، ثم الأوسط هو أحلك والأول هو نوع من متوسط. حسنا. لذلك يمكنني استخدام هذا. هذه الفكرة أن لدي متوسط ، وذلك نوع من يجعل هذا ملخص رقم واحد لطيف. يمكنني استخدام هذا لتحويل شيء ل ، رمادي. لذلك دعونا نجرب هذا. حتى هنا لدي ، سأقوم بتشغيل هذا فقط. وبالتالي في داخل الحلقة ، لا يوجد كود هنا لذلك ، إذا قمت بتشغيله الآن فقط سنرى الصورة دون تغيير. لذلك أود القيام به هو إضافة الكود هنا. لتغيير هذا إلى تدرج الرمادي. لذلك يجب أن أقول ما هي استراتيجيتي ستكون. إذن ما سأفعله هو الحلقة لكل بكسل سأحسب هذا الرقم المتوسط ؛ حتى مجرد الحصول عليها رقم واحد. لذلك قد يكون 27 أو 100 أو أي شيء لكل بكسل. ثم أنا كذلك سيأخذ هذا الرقم ، ووضعه في الأحمر والأخضر والأزرق. إذا كان الأمر كذلك المتوسط هو 27 ، سأعمل الأحمر والأخضر والأزرق جميعهم يكون 27. وإذا كان المتوسط هو 211 ، ثم سأعمل على جعل اللون الأحمر والأخضر والأزرق 211. لذا ، هذا يتحول كل بكسل في ، الطيف تدرج الرمادي رأينا من قبل. لذلك أولا قبالة أنا يجب أن ، حساب ، المتوسط هنا. لذلك أنا فقط سأعمل. كما قلت ، إضافة لأعلى. لذلك سأقول pixel.getRed () + pixel.getGreen () + pixel.getBlue (). و ثم سأضع هؤلاء الثلاثة داخل هذه المجموعة الخارجية من الأقواس فقط ترتيب العمليات. لذلك أريد أن أقوم بالإضافة وبعد ذلك أقول شرطة مائلة ثلاثة. لذلك سأقسم على ثلاثة. وهذا يعني الإضافة في الأقواس. و بعد أن حصلت على هذا المبلغ ، قسّمه على ثلاثة. وانا ذاهب فقط لتخزين ذلك في متغير يسمى متوسط. وهذا الخط ، سيتحول إلى نوع من خطوط الأسهم لنا. هناك العديد من التقنيات أو المشكلات التي قد نرغب في حلها في المستقبل ، حيث نريد أن نحسب المتوسط ، وهذا حتما ، الخط سوف يخرج من هذا القبيل. حسنا ، إذن ماذا أقول؟ لذلك استراتيجيتي هي ، وأنا حساب المتوسط ، ثم قمت بتعيين الأحمر والأخضر والأزرق لاستخدام كل ذلك. وبالتالي سأقول ، pixel.setRed. ثم هنا ، لقد قمت بتخزين المتوسط. هذه هو مجرد متغير. لذلك قمت بتخزين الرقم هناك. وبعد ذلك ، في الداخل ، هكذا أستطيع فقط أن أقول متوسط. سأذهب فقط إلى هذا المتغير ، وأحصل على الرقم مرة أخرى. و وبالمثل ، يمكنني القول ، setGreen (avg) و pixel.setBlue (avg) ، حسنًا ، لذلك دعونا جرب ذلك. جيد جدا. حتى تستطيع أن ترى ، وهذا هو العمل. لذلك مرت كل شيء هذه بكسل ، كما تعلمون ، الأحمر ، الأخضر أو أيا كان. انها خفضت إلى هذا واحد متوسط عدد السطوع ثم أعد ذلك. حتى نحصل على هذا الرمادي نوعا ما مقياس. في الواقع بعد اختباره على الزهور ، سأعود إلى ... صورة الخشخاش التي أعتقد أنها تظهر في أحد التدريبات. حتى هنا إذا علقت هذه الخطوط الثلاثة خارج وتشغيلها فقط الآن سنرى ، فقط سنرى الخشخاش الصورة ، هناك هو عليه. لذلك سوف ننتقل إلى اليمين قليلاً هنا. اذا انت تسطيع الرؤية من الواضح ، كما تعلمون ، أنها حصلت على مظهر الخشخاش البرتقالي من نوع كاليفورنيا والخلفية تلاشى هنا. حتى الآن سوف أضع هذه الخطوط مرة أخرى. ويمكننا أن نحاول لدينا عفوا ، خوارزمية على ذلك. هناك نذهب ، وهذا يعمل بشكل جيد للغاية. اذا انت تسطيع الرؤية، من الواضح أنه تم استنزاف اللون البرتقالي والأخضر وكل بكسل تم تخفيض إلى مجرد سطوع. وأنا أحب هنا كيف ، و نسيج على الجزء الأمامي من الخشخاش لا يزال ، لا يزال كيندا مرئية. اذن هناك لديك ، ومناسبة لتأطير. حسنا. لذلك ، وهو السؤال الذي غالبا ما يأتي فوق. النظر في هذا الرمز. هو. هذا الخط ، متوسط يساوي ، ثم هذه الصيغة لـ معدل. هل يجب أن يكون ذلك داخل الحلقة؟ إنه ، إنه ، إنه ، يبدو وكأنه ، ربما ، يمكن أن يكون هنا فقط. أعلى ، أعلى ، أعلى بعد ، الصورة تساوي علامة. والجواب هو. لا ، لا يمكن أن يكون هناك ، يجب أن يكون داخل الحلقة. والسبب هو. ما يمكن أن يفكر. أن هذا النوع من الخط يضع علاقة حول المتوسط هذا ، يجب أن يكون صحيحًا في كل الأوقات كما لو كان صحيحًا تمامًا في جميع الأوقات كبرنامج أشواط. وهذه ليست الطريقة التي يعمل بها رمز الكمبيوتر. رمز الكمبيوتر أقل متطورة من ذلك. ما يفعله هذا الخط بالتساوي ، هل هو فقط يقيم الجانب الأيمن. ويعينها في هذا المتغير على الجانب الأيسر عند هذا يتم تشغيل الخط. لذلك إذا أردنا وضع هذا الأمر في الأعلى فسوف يعمل مرة واحدة فقط سيخزن بعض الرقم في المتوسط وسيكون ذلك. في هذه الحالة تذكر نحن داخل هذا عن حلقة هنا. واسمحوا لي كيندا تسليط الضوء على الجسم. وحتى هذا الرمز ذلك تشغيل الآلاف أو ربما ملايين المرات ، مرة واحدة لكل بكسل. وتلك تحتوي كل بكسل على قيم حمراء وخضراء وزرقاء مختلفة So the average is going to work as a kind of a summary of the pixel, where it drops out the hue and just gives us one number, zero to 255, that just captures the brightness. Now I should say, there's other ways of doing this but just computing the average is simple and it's fine. It wor-, it's gonna work fine for our purposes. So in this case, I, I had these three pixels and so here on the right hand side I just compute the average. And what we see is, really the third one is by far the brightest. If you, you know look at all three of red, green and blue, and then the middle one is the darkest and the first one is kind of medium. Alright. So I can use this. This idea that I've got the average, and it sort of makes this nice one number summary. I can use this to, convert something to, gray. So let's try this. So here I've got the, I'll just run this. So in, inside the loop there's no code here so, if I just run it now we just see the image unchanged. So I'd like to do is add the code here. To change this to grayscale. So I should say what my strategy is going to be. So what I'm going to do is in the loop for each pixel I'm going to compute this average number; so just get one number. So it might be 27 or 100 or whatever for each pixel. And then I'm gonna take that number, and set it into the red, green, and blue. So if the average is 27, I'm gonna make red, green and blue all be 27. And if the average is 211, then I'm gonna make red, green, and blue all be 211. So that, that converts each pixel into the, the grayscale spectrum we saw before. So first off I have to, compute, the average here. So I'm just gonna. As I said, add'em up. So I'll say pixel.getRed() + pixel.getGreen() + pixel.getBlue(). And then I'm going to put those three inside of this outer set of parentheses just for the order of operations. So I want to do the addition and then I'll say slash three. So I'll divide by three. So this does the addition in the parentheses. And having gotten that sum, divide by three. And I'm just going to store that in a variable called avg. And this line, it's gonna turn out to be kind of a stock line for us. There's, there's many little techniques or problems we might wanna do in the future, where we wanna compute the average, and it, inevitably, the line would come out like that. Alright, so what'd I say? So my strategy is, I compute the average, and then I set red, green, and blue to all use that. So I'm gonna say, pixel.setRed. And then here, I've stored the average. This is just a variable. So I've stored the number in there. And then, inside here, so I can just say avg. I'll just go to that variable, and get the number back out. And likewise, I can say, setGreen(avg) and pixel.setBlue(avg), okay, so let's try that. Very good. So you can see, this is it works. So it's gone through all these pixels, you know, red, green or whatever. It's reduced it down to this one average brightness number and then set that back. So we get this nice sorta gray scale. So actually. Having tested it on flowers, I'm gonna go back to... The poppy image which I think appears in one of the exercises. So here if I comment these three lines out and just run it right now we'll, we'll just see the poppy image, there it is. So we'll scroll to the right here a little bit. So you can see that it's obviously, you know, it's got this sorta orange California poppy look and the faded background here. So now I'll put these lines back. And we can try our oops, algorithm on that one. There we go, that works very nicely. So you can see, obviously the, the orange and the green it's all been drained out and each pixel has been reduced to just, just a brightness. And I like here how the, the texture on the front of the of the poppy is still, still kinda visible. So, there you have it, suitable for framing. Alright. So a, a question that often comes up. Looking at this code. Is. That line, average equals, and then this formula for the average. Does that need to be inside the loop? It, it, it, it feels like, perhaps, it could be just here. Up, up, up after the, the image equals sign. And the answer is. No. It can't be up there, it does need to be inside the loop. And the reason is. What you could think. That this line sort of sets up a relationship about average that, must be true for all time like as if its just true at all times as the program runs. And that is not how a computer code works. A computer code is less sophisticated than that. What this line does with equals, is it just evaluates the right hand side. And assigns it into this variable on the left hand side when this line is run. So if we were to put this up at the top it would just run once and it would store some number in avg and that would be it. In this case remember we're inside of this for-loop here. Let me kinda highlight the body. And so this code it running thousands or maybe millions of times, once for each pixel. And those pixels each have different red, green, and blue values صورة الخشخاش التي أعتقد أنها تظهر في أحد التدريبات. حتى هنا إذا علقت هذه الخطوط الثلاثة خارج وتشغيلها فقط الآن سنرى ، فقط سنرى الخشخاش الصورة ، هناك هو عليه. لذلك سوف ننتقل إلى اليمين قليلاً هنا. اذا انت تسطيع الرؤية من الواضح ، كما تعلمون ، أنها حصلت على مظهر الخشخاش البرتقالي من نوع كاليفورنيا والخلفية تلاشى هنا. حتى الآن سوف أضع هذه الخطوط مرة أخرى. ويمكننا أن نحاول لدينا عفوا ، خوارزمية على ذلك. هناك نذهب ، وهذا يعمل بشكل جيد للغاية. اذا انت تسطيع الرؤية، من الواضح أنه تم استنزاف اللون البرتقالي والأخضر وكل بكسل تم تخفيض إلى مجرد سطوع. وأنا أحب هنا كيف ، و نسيج على الجزء الأمامي من الخشخاش لا يزال ، لا يزال كيندا مرئية. اذن هناك لديك ، ومناسبة لتأطير. حسنا. لذلك ، وهو السؤال الذي غالبا ما يأتي فوق. النظر في هذا الرمز. هو. هذا الخط ، متوسط يساوي ، ثم هذه الصيغة لـ معدل. هل يجب أن يكون ذلك داخل الحلقة؟ إنه ، إنه ، إنه ، يبدو وكأنه ، ربما ، يمكن أن يكون هنا فقط. أعلى ، أعلى ، أعلى بعد ، الصورة تساوي علامة. والجواب هو. لا ، لا يمكن أن يكون هناك ، يجب أن يكون داخل الحلقة. والسبب هو. ما يمكن أن يفكر. أن هذا النوع من الخط يضع علاقة حول المتوسط هذا ، يجب أن يكون صحيحًا في كل الأوقات كما لو كان صحيحًا تمامًا في جميع الأوقات كبرنامج أشواط. وهذه ليست الطريقة التي يعمل بها رمز الكمبيوتر. رمز الكمبيوتر أقل متطورة من ذلك. ما يفعله هذا الخط بالتساوي ، هل هو فقط يقيم الجانب الأيمن. ويعينها في هذا المتغير على الجانب الأيسر عند هذا يتم تشغيل الخط. لذلك إذا أردنا وضع هذا الأمر في الأعلى فسوف يعمل مرة واحدة فقط سيخزن بعض الرقم في المتوسط وسيكون ذلك. في هذه الحالة تذكر نحن داخل هذا عن حلقة هنا. واسمحوا لي كيندا تسليط الضوء على الجسم. وحتى هذا الرمز ذلك تشغيل الآلاف أو ربما ملايين المرات ، مرة واحدة لكل بكسل. وتلك تحتوي كل بكسل على قيم حمراء وخضراء وزرقاء مختلفة. حسنا ، لذلك هذا المبلغ. هو آلاف مختلفة من المرات. وما نحتاج إليه هو حساب هذا المبلغ من جديد كل بكسل. في كل مرة نرى بكسل جديد ، نحتاج إلى إعادة هذه الرياضيات. وهكذا ، الطريق علامة يساوي يعمل هو ، هو ، يتم تقييمه فقط عند تشغيل الكمبيوتر عبرها. ولهذا السبب ، لأن كل واحد من هذه بكسل هو مختلفة ، ونحن ، سنقوم ، نحتاج إلى وضعه ، في كثير من الأحيان سنضعه كأول خط داخل ل. مجرد حساب المتوسط. لهذا السبب ، هذا هو السبب يجب أن يكون هناك. حسنا. لذلك ، فقط لتلخيص كيندا. لذلك تعلمنا هذا جودة ، إذا كانت الأحمر والأخضر والأزرق والأحمر والأخضر والأزرق متساوية ، هذا هو ظلال رمادية. ولدينا هذه التقنية حيث يمكننا حساب معدل. وهذا يعطينا فقط رقم سطوع واحد ، من الأساس إلى الصفر 255. وهذا سيصبح ، أنا أستخدمه هنا للتدرج الرمادي. ولكن في الواقع ، في في المستقبل ، سنستخدم ذلك لبعض الأشياء الأخرى. إنه مجرد شيء مفيد لمعرفة. وأخيرا ، سأقول أن هذا الخط ، الذي كنت أبرزه من قبل ، متوسط يساوي إضافة الثلاثة للأعلى وقسمها على ثلاثة. هذا سيكون نوع من خط الأسهم ، وبالتالي سأعمل ، سننتهي باستخدام هذا الخط تمامًا لاحقًا وفي حقيقة يجب أن تظهر في بعض التمارين. surat alkhashkhash alty 'aetaqi The poppy image which I think appears in one of the exercises. So here if I comment these three lines out and just run it right now we'll, we'll just see the poppy image, there it is. So we'll scroll to the right here a little bit. So you can see that it's obviously, you know, it's got this sorta orange California poppy look and the faded background here. So now I'll put these lines back. And we can try our oops, algorithm on that one. There we go, that works very nicely. So you can see, obviously the, the orange and the green it's all been drained out and each pixel has been reduced to just, just a brightness. And I like here how the, the texture on the front of the of the poppy is still, still kinda visible. So, there you have it, suitable for framing. Alright. So a, a question that often comes up. Looking at this code. Is. That line, average equals, and then this formula for the average. Does that need to be inside the loop? It, it, it, it feels like, perhaps, it could be just here. Up, up, up after the, the image equals sign. And the answer is. No. It can't be up there, it does need to be inside the loop. And the reason is. What you could think. That this line sort of sets up a relationship about average that, must be true for all time like as if its just true at all times as the program runs. And that is not how a computer code works. A computer code is less sophisticated than that. What this line does with equals, is it just evaluates the right hand side. And assigns it into this variable on the left hand side when this line is run. So if we were to put this up at the top it would just run once and it would store some number in avg and that would be it. In this case remember we're inside of this for-loop here. Let me kinda highlight the body. And so this code it running thousands or maybe millions of times, once for each pixel. And those pixels each have different red, green, and blue values. Alright, so this sum. Is different thousands of times. And so what we need is to compute this sum anew for each pixel. Each time we see a new pixel, we need to redo this math. And so, the way the equals sign works is it's, it's, it's just evaluated when the computer runs across it. And so for that reason, because each, each one of these pixels is different, we, we'll, we need to put it, very often we'll just put it as the first line inside the for. Just compute the average. So that's why, that's why that needs to be there. Alright. So, just to kinda summarize. So we've learned this quality that, if the red, green, and blue, red, green, and blue are all equal, that's a shade of gray. And we've got this technique where we could compute the average. And that just gives us this one brightness number, basically, from zero to 255. And that's gonna be, I'm using it here for grayscale. But actually, in the future, we're gonna use that for some other stuff. It's just a, a useful thing to know. And, finally I'll say that this line, which I was highlighting before, average equals add the three up and divide it by three. That's gonna be kind of a stock line, and so I'm gonna, we're gonna end up using exactly that line later, and in fact it should show up in some exercises. |
Skill TwoSed ut perspiciatis unde omnis iste natus error sit voluptatem accusant doloremque laudantium, totam rem.
|
Skill ThreeSed ut perspiciatis unde omnis iste natus error sit voluptatem accusant doloremque laudantium, totam rem.
|