صورة الألغاز
هذا مقطع قصير للنظر في نوع الألغاز المبني على كود معالجة الصورة.
رمز لإصلاح بكسل
هناك صورة لبعض وجوه لغز غير معروفة
تم تشويه القيم أحمر / أخضر / أزرق ، إخفاء الصورة الحقيقية
اكتب رمزًا لإصلاح وحدات البكسل
استعادة الصورة الأصلية لحل اللغز
لغز الذهب
هنا لدينا صورة لغز "الذهب" - قم بإصلاحها لترى صورة لغز الصورة الذهبية الحقيقية
معلمات لغز الذهب:
القيمان الخضراء والزرقاء كلها مجرد قيم عشوائية في النطاق 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.
كتابة التعليمات البرمجية
في هذا القسم ، اكتب بعض التعليمات البرمجية وقم بتشغيلها
كل إجراء في الكمبيوتر يأتي إلى رمز
لفهم طبيعة أجهزة الكمبيوتر ...
عليك أن تلعب مع رمز قليلا
يشير الرمز إلى اللغة التي يمكن للكمبيوتر فهمها. بالنسبة لهذه المحاضرات ، سنقوم بكتابة وتشغيل قصاصات قصيرة من التعليمات البرمجية لفهم ما هي الصفات الأساسية لأجهزة الكمبيوتر ، وخاصة نقاط القوة والقيود.
بتجربة استخدام الكود ، ستظهر طبيعة أجهزة الكمبيوتر بوضوح شديد ... قوية بطريقتها الخاصة ، ولكن بنوعية ميكانيكية محدودة. IMHO ، هذه الطبيعة المختلطة لأجهزة الكمبيوتر هي شيء يجب أن يفهمه الجميع ، لاستخدامهم بشكل جيد ، حتى لا يخيفهم.
قبل الترميز - الصبر
سنبدأ ببعض الترميز البسيط أدناه
أمثلة التعليمات البرمجية الأولى ليست براقة
رمز يشبه الطوب ليغو ...
القطع الفردية بسيطة للغاية
-بناء ما يصل بناء مجموعات كبيرة
ولكن علينا أن نبدأ الصغيرة
ينذر
في غضون ساعات قليلة من المحاضرة ، سنقوم بكتابة رمز التأثير المرئي البسيط مع القرد والقمر والموز:
لعبة قرد القمر سطح الموز
لكن الآن لدينا فقط print ()
الصبر سنبدأ بتعلم بعض عناصر البرمجة ، وسنقوم فيما بعد بإعادة تجميع هذه العناصر القليلة لحل العديد من المشكلات. هذه العناصر الأولى بسيطة ، لذا فهي ليست كافية للنظر إليها بمفردها. التحلي بالصبر ، سرعان ما سنضع هذه العناصر معًا - مثل الطوب ليغو - للقيام بمشاريع جميلة وأنيقة.
جافا سكريبت Lang Lang الكمبيوتر
"Javascript" هي لغة كمبيوتر شائعة
تشفير CS101: Javascript + بعض ميزات CS101 المحددة
ليست كلها لغة جافا سكريبت ، فقط بت
مجرد رمز يكفي لتجربة الأفكار الرئيسية
بالنسبة لهذه الفئة ، سنستخدم متغيرًا للغة المعروفة باسم "Javascript" ، مع بعض الميزات المضافة لهذه الدورة. تعمل لغة Javascript في متصفح الويب ، بحيث يمكن لجميع تجاربنا أن تعيش مباشرة في المتصفح دون الحاجة إلى أي شيء آخر. سنلقي نظرة على جافا سكريبت اللازمة لتجاربنا ، وليس اللغة الكاملة التي يمكن للمرء أن يرى باستخدام جافا سكريبت باحتراف. ومع ذلك ، فإن Javascript هي لغة حقيقية ورمزنا رمز حقيقي. تُظهر برامجنا الصغيرة الميزات المهمة للرمز ، مع إبقاء الأمور سريعة وصغيرة.
1. مثال الرمز الأول - طباعة
هنا هو رمز الذي يدعو وظيفة "طباعة". انقر فوق الزر "تشغيل" أدناه ، وسيقوم جهاز الكمبيوتر الخاص بك بتشغيل هذا الرمز ، وسيظهر إخراج الرمز إلى اليمين.
طباعة (6)؛
طباعة (1 ، 2) ؛
ينفذ Run كل سطر مرة واحدة ، ويمتد من أعلى إلى أسفل
الطباعة هي وظيفة - مثل الفعل في الشفرة
يتم تمرير الأرقام الموجودة داخل الأقواس (...) إلى وظيفة الطباعة
قيم متعددة مفصولة بفواصل
التجارب تغير الكود وتعمل بعد أن يرى كل تغيير المخرجات الجديدة:
تغيير رقم
-إضافة المزيد من الأرقام مفصولة بفواصل داخل الطباعة (...)
- انسخ السطر الأول والصقه مرتين بعد السطر الأخير
من أنا أعدكم أن إنتاجنا سيصبح أكثر إثارة للاهتمام!
بناء جملة التعليمات البرمجية ليست حرة شكل
-Syntax من رمز محدودة للغاية وصارمة
- انعكاس للطبيعة الداخلية والميكانيكية / الغبية للكمبيوتر
لا يمكن تأجيله - "عندما تكون في روما ..."
- نحن في زيارة لعالم الكمبيوتر
ملاحظة "طباعة" ليست جزءًا طبيعيًا من Javascript ، لقد أضفتها إلى CS101
تذكير: Video + Document - أوقف الفيديو مؤقتًا وجربه بنفسك
2. طباعة سلسلة
// السطر أدناه يطبع رقمًا واحدًا وسلسلة واحدة
طباعة (6 ، "مرحبا") ؛
طباعة ("مرحبًا" ، 2 ، "وداعًا") ؛
حتى الآن لدينا أرقام ، على سبيل المثال 6
السلسلة عبارة عن سلسلة من الحروف المكتوبة ضمن علامات اقتباس لاستخدامها كبيانات داخل الكود
-e.g. "مرحبا"
- السلاسل تعمل مع وظيفة الطباعة ، بالإضافة إلى الأرقام
- تعليق في نص مخزن الكمبيوتر ، مثل عناوين url أو نص الفقرات ، إلخ.
يبدأ التعليق بـ // ويمتد حتى نهاية السطر. طريقة لكتابة ملاحظات حول الكود ، يتم تجاهلها بواسطة الكمبيوتر.
التجارب:
، تحرير النص داخل سلسلة
-إضافة المزيد من السلاسل مفصولة بفواصل
-إضافة سلسلة "طباعة" - داخل السلسلة هو مجرد بيانات ، لا يعامل كرمز
رمز مقابل البيانات
كود = التعليمات التي يتم تشغيلها
البيانات = الأرقام الخاملة ، الأوتار ، يتم التعامل معها بواسطة الكود
لاحظ أنه يتم التعرف على الطباعة كدالة في الكود مقابل سلسلة "الترحيب" والتي هي مجرد بيانات غير فعالة (مثل الأفعال والأسماء) يتجاهل الكمبيوتر التعليقات ، لذلك فهي مجرد وسيلة لك لتدوين ملاحظات لنفسك حول ما الرمز يفعل. يمكن استخدام التعليقات لإزالة سطر من الشفرة مؤقتًا - "تعليق" الكود ، عن طريق وضع "//" على
التفكير في بناء الجملة والأخطاء (رسالة رئيسية!)
بناء جملة - نص التعليمات البرمجية منظم للكمبيوتر
خطأ شائع جدا - تكتب في التعليمات البرمجية ، مع مشكلة في بناء الجملة طفيفة
المبرمجين المحترفين يقومون بهذا النوع من "الخطأ" طوال الوقت
لحسن الحظ ، من السهل جدا إصلاح ... لا تقلق بشأن ذلك
ليس انعكاسًا لبعض عيوب المؤلف
يحصل المحترفون على أخطاء في بناء الجملة طوال الوقت
يمكن إخراج المبتدئين عن طريق أخطاء بناء الجملة ، معتقدين أنهم يرتكبون بعض الأخطاء الكبيرة
أمثلة أدناه لتلقيحك: مجموعة من الأخطاء اللغوية النموذجية + إصلاحها
إصلاح هذه الأخطاء الصغيرة هو صغير طبيعي
Code Writing
In this section, write some code and run it
Every action in the computer comes down to code
To understand the nature of computers...
You have to play with code a little
Code refers to the language the computer can understand. For these lectures, we'll write and run short snippets of code to understand what the essential qualities of computers, and especially their strengths and limitations.
Experimenting with code, the nature of computers will come through very clearly ... powerful in their own way, but with a limited, mechanical quality. IMHO, this mixed nature of computers is something everyone should understand, to use them well, to not be intimidated by them.
Before Coding - Patience
We'll start with some simple coding below
First code examples are not flashy
Code is like lego bricks...
-Individual pieces are super simple
-Eventually build up great combinations
But we have to start small
Foreshadowing
Within a few hours of lecture, we'll be writing simple visual effect code with the monkey, moon, and banana:
toy monkey moon surface banana
But for now we just have print()
Patience We're going to start by learning a few programming elements, and later we'll recombine these few elements to solve many problems. These first elements are simple, so they are not much to look at on their own. Be patient, soon we'll put these elements together -- like lego bricks -- to make pretty neat projects.
Javascript Computer Langauge
"Javascript" is a popular computer language
CS101 coding: Javascript + some CS101 specific features
Not the whole Javascript language, just bits
Just enough code to experiment with key ideas
For this class, we'll use a variant of the language known as "Javascript", with some added features for this course. The Javascript language works in the web browser, so all of our experiments can live right in the browser with nothing else required. We'll look at just the of Javascript needed for our experiments, not the full language one would see using Javascript professionally. That said, Javascript is a real language and our code is real code. Our small programs show the important features of code, while keeping things fast and small.
1. First Code Example - Print
Here is code which calls the "print" function. Click the Run button below, and your computer will run this code, and the output of the code will appear to the right.
print(6);
print(1, 2);
Run executes each line once, running from top to bottom
print is a function -- like a verb in the code
Numbers within the parenthesis ( ... ) are passed in to the print function
Multiple values separated by commas
Experiments change the code and run after each change see the new output:
-Change a number
-Add more numbers separated by commas inside the print(...)
-Copy the first line and paste it in twice after the last line
-I promise our output will get much more interesting!
Syntax the code is not free form
-Syntax of the code is very limited and strict
-A reflection of the inner, mechanical/dumb nature of the computer
-Don't be put off - "When in Rome..."
-We're visiting the world of the computer
Note "print" is not a normal part of Javascript, I added it for CS101
Reminder: Video + Document - pause the video and try it yourself
2. Print String
// The line below prints one number and one string
print(6, "hi");
print("hello", 2, "bye");
Thus far we have numbers, e.g. 6
A string is a sequence of letters written within quotes to be used as data within the code
-e.g. "hello"
-Strings work with the print function, in addition to numbers
-Strings in the computer store text, such as urls or the text of paragraphs, etc.
A comment begins with // and extends through the end of the line. A way to write notes about the code, ignored by the computer.
Experiments:
-Edit the text within a string
-Add more strings separated by commas
-Add the string "print" - inside of string is just data, not treated as code
Code vs. Data
Code = instructions that are Run
Data = passive numbers, strings, handled by the code
Note that print is recognized as a function in the code vs. the "hello" string which is just passive data (like verbs and nouns) The computer ignores the comments, so they are just a way for you to write notes to yourself about what the code is doing. Comments can be use it to temporarily remove a line of code -- "commenting out" the code, by placing a "//" to its
Thinking About Syntax and Errors (key message!)
Syntax - code text structured for the computer
Very common error - you type in code, with slight syntax problem
Professional programmers make that sort of "error" all the time
Fortunately, very easy to fix ... don't worry about it
Not a reflection of some author flaw
Professionals get syntax errors all the time
Beginners can be derailed by syntax errors, thinking they are making some big error
Examples below to inoculate you: a bunch of typical syntax errors + fixing them
Fixing these little errors is a small, normal
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ستانفورد CS101 مقدمة
نيك بارلانتي - جامعة ستانفورد (صفحة نيك الرئيسية)
CS101 على ستانفورد أونلاين
الأفكار الأساسية لكيفية عمل أجهزة الكمبيوتر
ليس مربع السحر ، أساسيات مفهومة
انظر من الداخل ، وكيف تعمل (اللعب)
فهم ما يمكنهم القيام به
لا خلفية الكمبيوتر المطلوبة على الإطلاق
فضولي .. الخطوة التالية
يستكشف هذا الفصل الصفات الأساسية لأجهزة الكمبيوتر ، وكيفية عملها ، وما الذي يمكن أن يفعله وما لا يستطيع القيام به ، ولا يحتاج إلى أي خلفية للكمبيوتر على الإطلاق.
شكر وتقدير: شكرًا لـ Google لدعمها بحثي المبكر الذي ساعدني في إنشاء هذا الفصل.
ملاحظة التنسيق: فيديو + وثيقة
يحتوي كل فيديو على مستند مكتوب مصاحب
تفسيرات مكتوبة ، رسوم بيانية ، أمثلة حية للكود
قم بالتبديل أو إعادة زيارة المستند من الفيديو
مراجعة ، غريبة عن الرابط ... كل شيء هناك
المعادلة الأساسية لأجهزة الكمبيوتر
المعادلة الأساسية لأجهزة الكمبيوتر هي:
كشف المعادلة
قوية - انظر من خلال كتل البيانات
- مليارات "العمليات" في الثانية
غبي
- العمليات بسيطة و ميكانيكية
- لا شيء مثل "البصيرة" أو "التفاهم"
في الأفلام - الغباء الميكانيكي لأجهزة الكمبيوتر مفقود
(فيديو HAL 9000)
تمارين: قوية + غبية ... تأتي بوضوح
غبي ، لكن مفيد جدا. كيف هذا؟
هذا ما يدور حول CS101
-زيارة هذا العالم الكمبيوتر مضحك ، اللعب ، معرفة كيف يعمل
-فهم كيف تحصل أجهزة الكمبيوتر على عمل مفيد
، في نهاية المطاف لا تخيف ، الكمبيوتر ليس مربع سحري
أجندة خفية: عيون مفتوحة لبعض دورات علوم الحاسوب
أجهزة الكمبيوتر قوية جدًا ، حيث تبحث في كميات كبيرة من البيانات بسرعة. يمكن لأجهزة الكمبيوتر أن تؤدي حرفيا مليارات العمليات في الثانية.
ومع ذلك ، فإن "العمليات" الفردية التي يمكن لأجهزة الكمبيوتر القيام بها هي بسيطة للغاية والميكانيكية ، لا شيء مثل الفكر الإنساني أو البصيرة. عملية نموذجية في لغة أجهزة الكمبيوتر تضيف رقمين معًا.
وعلى الرغم من أن أجهزة الكمبيوتر سريعة في ما يقومون به ، إلا أن العمليات التي يمكنهم القيام بها صارمة للغاية وبسيطة وميكانيكية. الكمبيوتر يفتقر إلى أي شيء مثل البصيرة الحقيقية. أو بعبارة أخرى ، ليست أجهزة الكمبيوتر مثل HAL 9000 من فيلم 2001: A Space Odyssey.
إذا لم يكن هناك شيء آخر ، فيجب ألا يخيفك الكمبيوتر كما لو أنه نوع من الدماغ. يعد الكمبيوتر أداة ميكانيكية يمكنها القيام بأشياء مذهلة ، لكنه يتطلب من الإنسان أن يخبرها بما يجب القيام به.
المستوى العالي - كيف يعمل الكمبيوتر؟
يتم تشغيل الكمبيوتر بواسطة تعليمات "الكود" (الكثير لاحقًا)
تعليمات بسيطة ، ميكانيكية ، على سبيل المثال إضافة 2 أرقام
الكمبيوتر "يعمل" سلسلة طويلة من التعليمات
تشغيل من خلال التعليمات ، ميكانيكية بحتة
السؤال: إذا كان الكمبيوتر الميكانيكية ...
الكمبيوتر تشغيل تعليماتها البسيطة
لكن الكثير من الميزات المفيدة
فكر في جميع ميزات الكمبيوتر المفيدة (الهاتف ، الكاميرا)
- البريد الإلكتروني ، والرسائل الفورية
- MP3 الصوت
--تقليل العين الحمراء
إذا كانت أجهزة الكمبيوتر غبية جدًا ... كيف تكون مفيدة جدًا؟
ما يربط بين الجانبين؟
الكمبيوتر مقابل الحد من العين الحمراء
المبرمجين جعله يحدث
مبرمج بشري يفكر في ميزة مفيدة
- الإبداع ، والبصيرة حول المشاكل وأجهزة الكمبيوتر
مبرمج يفكر في الحل
"خوارزمية" - خطوات لتحقيقه
تقسيمها ، كتابة التعليمات البرمجية للكمبيوتر
يسقط عليه للكمبيوتر
هذا هو برمجة الكمبيوتر
كل ميزة مفيدة استخدمتها من قبل لديها هذا النمط
هذه صورة رائعة
أفضل الميزات لكلا الجانبين: غير مكلفة / سريع + البصيرة الإبداعية
استكشافات CS101: الكود والخوارزمية
مبرمج يكتب رمز لتنفيذ فكرة الميزة الخاصة بهم
نظرًا لأن الكمبيوتر ميكانيكي وغبي تمامًا - كيف يتمكنون من القيام بالكثير من الأشياء المفيدة؟ الفجوة بين الكمبيوتر والقيام بشيء مفيد هو حيث يقوم المبرمج البشري بإنشاء الحلول. تتعلق البرمجة بشخص يستخدم رؤيته حول ما يمكن أن يكون مفيدًا وكيف يمكن القيام به ، وتقسيم الخطوات إلى رمز يمكن للكمبيوتر اتباعها.
التالي: ابدأ بالكود
Stanford CS101 Introduction
Nick Parlante - Stanford University (Nick's Home Page)
CS101 on Stanford Online
Basic ideas of how computers work
Not a magic box, basics understandable
Look inside, how they work (play)
Understand what they can do
No computer background required at all
Curious .. next step
This class explores the essential qualities of computers, how they work, what they can and cannot do, and requires no computer background at all.
Acknowledgements: thanks to Google for supporting my early research that has helped me create this class.
Format note: Video + Document
Each video has a companion written document
Written explanations, diagrams, live code examples
Switch or revisit the document from the video
Review, curious about link ... it's all there
Fundamental Equation of Computers
The fundamental equation of computers is:
Reveal Equation
Powerful - look through masses of a data
-Billions of "operations" per second
Stupid
-Operations are simple and mechanical
-Nothing like "insight" or "understanding"
In movies - the mechanical stupidity of computers is missing
(HAL 9000 video)
Exercises: Powerful + Stupid ... comes through vividly
Stupid, but very useful. How is that?
That's what CS101 is about
-Visit this funny computer world, play, see how it works
-Understand how computers get useful work done
-Ultimately not intimidated, computer is not some magic box
Hidden agenda: open eyes for some, more computer science courses
Computers are very powerful, looking through large amounts of data quickly. Computers can literally perform billions of operations per second.
However, the individual "operations" that computers can perform are extremely simple and mechanical, nothing like a human thought or insight. A typical operation in the language of computers is adding two numbers together.
So although the computers are fast at what they do, the operations that they can do are extremely rigid, simple, and mechanical. The computer lacks anything like real insight. Or put another way, computers are not like the HAL 9000 from the movie 2001: A Space Odyssey.
If nothing else, you should not be intimidated by the computer as if it's some sort of brain. The computer is a mechanical tool which can do amazing things, but it requires a human to tell it what to do.
High Level - How Does a Computer Work?
Computer is driven by "code" instructions (lots more later)
Instructions simple, mechanical, e.g. add 2 numbers
The computer "runs" a long series of instructions
Run through the instructions, purely mechanical
Question: if the computer is so mechanical...
computer running its simple instructions
But So Many Useful Features
Think of all the useful computer features (phone, camera)
--Email, instant messaging
--MP3 audio
--Red-eye reduction
If computers are so stupid... how are they so useful?
What connects the two sides?
computer vs. red-eye reduction
Programmers Make It Happen
Human programmer thinks of a useful feature
--Creativity, insight about problems, computers
Programmer thinks through the solution
"Algorithm" -- steps to accomplish
Breaking it down, writing code for the computer
Dumbing it down for the computer
This is computer programming
Every useful feature you've ever used has this pattern
This is a great picture
Best features of both sides: inexpensive/fast + creative insight
CS101 explorations: code and algorithm
programmer writes code to implement their feature idea
Since the computer is totally mechanical and stupid -- how do they manage to do so many useful things? The gap between the computer and doing something useful is where the human programmer creates solutions. Programming is about a person using their insight about what would be useful and how it could be done, and breaking the steps down into code the computer can follow.
Next: start with code
كتابة التعليمات البرمجية
في هذا القسم ، اكتب بعض التعليمات البرمجية وقم بتشغيلها
كل إجراء في الكمبيوتر يأتي إلى رمز
لفهم طبيعة أجهزة الكمبيوتر ...
عليك أن تلعب مع رمز قليلا
يشير الرمز إلى اللغة التي يمكن للكمبيوتر فهمها. بالنسبة لهذه المحاضرات ، سنقوم بكتابة وتشغيل قصاصات قصيرة من التعليمات البرمجية لفهم ما هي الصفات الأساسية لأجهزة الكمبيوتر ، وخاصة نقاط القوة والقيود.
بتجربة استخدام الكود ، ستظهر طبيعة أجهزة الكمبيوتر بوضوح شديد ... قوية بطريقتها الخاصة ، ولكن بنوعية ميكانيكية محدودة. IMHO ، هذه الطبيعة المختلطة لأجهزة الكمبيوتر هي شيء يجب أن يفهمه الجميع ، لاستخدامهم بشكل جيد ، حتى لا يخيفهم.
قبل الترميز - الصبر
سنبدأ ببعض الترميز البسيط أدناه
أمثلة التعليمات البرمجية الأولى ليست براقة
رمز يشبه الطوب ليغو ...
القطع الفردية بسيطة للغاية
-بناء ما يصل بناء مجموعات كبيرة
ولكن علينا أن نبدأ الصغيرة
ينذر
في غضون ساعات قليلة من المحاضرة ، سنقوم بكتابة رمز التأثير المرئي البسيط مع القرد والقمر والموز:
لعبة قرد القمر سطح الموز
لكن الآن لدينا فقط print ()
الصبر سنبدأ بتعلم بعض عناصر البرمجة ، وسنقوم فيما بعد بإعادة تجميع هذه العناصر القليلة لحل العديد من المشكلات. هذه العناصر الأولى بسيطة ، لذا فهي ليست كافية للنظر إليها بمفردها. التحلي بالصبر ، سرعان ما سنضع هذه العناصر معًا - مثل الطوب ليغو - للقيام بمشاريع جميلة وأنيقة.
جافا سكريبت Lang Lang الكمبيوتر
"Javascript" هي لغة كمبيوتر شائعة
تشفير CS101: Javascript + بعض ميزات CS101 المحددة
ليست كلها لغة جافا سكريبت ، فقط بت
مجرد رمز يكفي لتجربة الأفكار الرئيسية
بالنسبة لهذه الفئة ، سنستخدم متغيرًا للغة المعروفة باسم "Javascript" ، مع بعض الميزات المضافة لهذه الدورة. تعمل لغة Javascript في متصفح الويب ، بحيث يمكن لجميع تجاربنا أن تعيش مباشرة في المتصفح دون الحاجة إلى أي شيء آخر. سنلقي نظرة على جافا سكريبت اللازمة لتجاربنا ، وليس اللغة الكاملة التي يمكن للمرء أن يرى باستخدام جافا سكريبت باحتراف. ومع ذلك ، فإن Javascript هي لغة حقيقية ورمزنا رمز حقيقي. تُظهر برامجنا الصغيرة الميزات المهمة للرمز ، مع إبقاء الأمور سريعة وصغيرة.
1. مثال الرمز الأول - طباعة
هنا هو رمز الذي يدعو وظيفة "طباعة". انقر فوق الزر "تشغيل" أدناه ، وسيقوم جهاز الكمبيوتر الخاص بك بتشغيل هذا الرمز ، وسيظهر إخراج الرمز إلى اليمين.
طباعة (6)؛
طباعة (1 ، 2) ؛
ينفذ Run كل سطر مرة واحدة ، ويمتد من أعلى إلى أسفل
الطباعة هي وظيفة - مثل الفعل في الشفرة
يتم تمرير الأرقام الموجودة داخل الأقواس (...) إلى وظيفة الطباعة
قيم متعددة مفصولة بفواصل
التجارب تغير الكود وتعمل بعد أن يرى كل تغيير المخرجات الجديدة:
تغيير رقم
-إضافة المزيد من الأرقام مفصولة بفواصل داخل الطباعة (...)
- انسخ السطر الأول والصقه مرتين بعد السطر الأخير
من أنا أعدكم أن إنتاجنا سيصبح أكثر إثارة للاهتمام!
بناء جملة التعليمات البرمجية ليست حرة شكل
-Syntax من رمز محدودة للغاية وصارمة
- انعكاس للطبيعة الداخلية والميكانيكية / الغبية للكمبيوتر
لا يمكن تأجيله - "عندما تكون في روما ..."
- نحن في زيارة لعالم الكمبيوتر
ملاحظة "طباعة" ليست جزءًا طبيعيًا من Javascript ، لقد أضفتها إلى CS101
تذكير: Video + Document - أوقف الفيديو مؤقتًا وجربه بنفسك
2. طباعة سلسلة
// السطر أدناه يطبع رقمًا واحدًا وسلسلة واحدة
طباعة (6 ، "مرحبا") ؛
طباعة ("مرحبًا" ، 2 ، "وداعًا") ؛
حتى الآن لدينا أرقام ، على سبيل المثال 6
السلسلة عبارة عن سلسلة من الحروف المكتوبة ضمن علامات اقتباس لاستخدامها كبيانات داخل الكود
-e.g. "مرحبا"
- السلاسل تعمل مع وظيفة الطباعة ، بالإضافة إلى الأرقام
- تعليق في نص مخزن الكمبيوتر ، مثل عناوين url أو نص الفقرات ، إلخ.
يبدأ التعليق بـ // ويمتد حتى نهاية السطر. طريقة لكتابة ملاحظات حول الكود ، يتم تجاهلها بواسطة الكمبيوتر.
التجارب:
، تحرير النص داخل سلسلة
-إضافة المزيد من السلاسل مفصولة بفواصل
-إضافة سلسلة "طباعة" - داخل السلسلة هو مجرد بيانات ، لا يعامل كرمز
رمز مقابل البيانات
كود = التعليمات التي يتم تشغيلها
البيانات = الأرقام الخاملة ، الأوتار ، يتم التعامل معها بواسطة الكود
لاحظ أنه يتم التعرف على الطباعة كدالة في الكود مقابل سلسلة "الترحيب" والتي هي مجرد بيانات غير فعالة (مثل الأفعال والأسماء) يتجاهل الكمبيوتر التعليقات ، لذلك فهي مجرد وسيلة لك لتدوين ملاحظات لنفسك حول ما الرمز يفعل. يمكن استخدام التعليقات لإزالة سطر من الشفرة مؤقتًا - "تعليق" الكود ، عن طريق وضع "//" على
التفكير في بناء الجملة والأخطاء (رسالة رئيسية!)
بناء جملة - نص التعليمات البرمجية منظم للكمبيوتر
خطأ شائع جدا - تكتب في التعليمات البرمجية ، مع مشكلة في بناء الجملة طفيفة
المبرمجين المحترفين يقومون بهذا النوع من "الخطأ" طوال الوقت
لحسن الحظ ، من السهل جدا إصلاح ... لا تقلق بشأن ذلك
ليس انعكاسًا لبعض عيوب المؤلف
يحصل المحترفون على أخطاء في بناء الجملة طوال الوقت
يمكن إخراج المبتدئين عن طريق أخطاء بناء الجملة ، معتقدين أنهم يرتكبون بعض الأخطاء الكبيرة
أمثلة أدناه لتلقيحك: مجموعة من الأخطاء اللغوية النموذجية + إصلاحها
إصلاح هذه الأخطاء الصغيرة هو صغير طبيعي
Code Writing
In this section, write some code and run it
Every action in the computer comes down to code
To understand the nature of computers...
You have to play with code a little
Code refers to the language the computer can understand. For these lectures, we'll write and run short snippets of code to understand what the essential qualities of computers, and especially their strengths and limitations.
Experimenting with code, the nature of computers will come through very clearly ... powerful in their own way, but with a limited, mechanical quality. IMHO, this mixed nature of computers is something everyone should understand, to use them well, to not be intimidated by them.
Before Coding - Patience
We'll start with some simple coding below
First code examples are not flashy
Code is like lego bricks...
-Individual pieces are super simple
-Eventually build up great combinations
But we have to start small
Foreshadowing
Within a few hours of lecture, we'll be writing simple visual effect code with the monkey, moon, and banana:
toy monkey moon surface banana
But for now we just have print()
Patience We're going to start by learning a few programming elements, and later we'll recombine these few elements to solve many problems. These first elements are simple, so they are not much to look at on their own. Be patient, soon we'll put these elements together -- like lego bricks -- to make pretty neat projects.
Javascript Computer Langauge
"Javascript" is a popular computer language
CS101 coding: Javascript + some CS101 specific features
Not the whole Javascript language, just bits
Just enough code to experiment with key ideas
For this class, we'll use a variant of the language known as "Javascript", with some added features for this course. The Javascript language works in the web browser, so all of our experiments can live right in the browser with nothing else required. We'll look at just the of Javascript needed for our experiments, not the full language one would see using Javascript professionally. That said, Javascript is a real language and our code is real code. Our small programs show the important features of code, while keeping things fast and small.
1. First Code Example - Print
Here is code which calls the "print" function. Click the Run button below, and your computer will run this code, and the output of the code will appear to the right.
print(6);
print(1, 2);
Run executes each line once, running from top to bottom
print is a function -- like a verb in the code
Numbers within the parenthesis ( ... ) are passed in to the print function
Multiple values separated by commas
Experiments change the code and run after each change see the new output:
-Change a number
-Add more numbers separated by commas inside the print(...)
-Copy the first line and paste it in twice after the last line
-I promise our output will get much more interesting!
Syntax the code is not free form
-Syntax of the code is very limited and strict
-A reflection of the inner, mechanical/dumb nature of the computer
-Don't be put off - "When in Rome..."
-We're visiting the world of the computer
Note "print" is not a normal part of Javascript, I added it for CS101
Reminder: Video + Document - pause the video and try it yourself
2. Print String
// The line below prints one number and one string
print(6, "hi");
print("hello", 2, "bye");
Thus far we have numbers, e.g. 6
A string is a sequence of letters written within quotes to be used as data within the code
-e.g. "hello"
-Strings work with the print function, in addition to numbers
-Strings in the computer store text, such as urls or the text of paragraphs, etc.
A comment begins with // and extends through the end of the line. A way to write notes about the code, ignored by the computer.
Experiments:
-Edit the text within a string
-Add more strings separated by commas
-Add the string "print" - inside of string is just data, not treated as code
Code vs. Data
Code = instructions that are Run
Data = passive numbers, strings, handled by the code
Note that print is recognized as a function in the code vs. the "hello" string which is just passive data (like verbs and nouns) The computer ignores the comments, so they are just a way for you to write notes to yourself about what the code is doing. Comments can be use it to temporarily remove a line of code -- "commenting out" the code, by placing a "//" to its
Thinking About Syntax and Errors (key message!)
Syntax - code text structured for the computer
Very common error - you type in code, with slight syntax problem
Professional programmers make that sort of "error" all the time
Fortunately, very easy to fix ... don't worry about it
Not a reflection of some author flaw
Professionals get syntax errors all the time
Beginners can be derailed by syntax errors, thinking they are making some big error
Examples below to inoculate you: a bunch of typical syntax errors + fixing them
Fixing these little errors is a small, normal
هذا مقطع قصير للنظر في نوع الألغاز المبني على كود معالجة الصورة.
رمز لإصلاح بكسل
هناك صورة لبعض وجوه لغز غير معروفة
تم تشويه القيم أحمر / أخضر / أزرق ، إخفاء الصورة الحقيقية
اكتب رمزًا لإصلاح وحدات البكسل
استعادة الصورة الأصلية لحل اللغز
لغز الذهب
هنا لدينا صورة لغز "الذهب" - قم بإصلاحها لترى صورة لغز الصورة الذهبية الحقيقية
معلمات لغز الذهب:
القيمان الخضراء والزرقاء كلها مجرد قيم عشوائية في النطاق 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.
كتابة التعليمات البرمجية
في هذا القسم ، اكتب بعض التعليمات البرمجية وقم بتشغيلها
كل إجراء في الكمبيوتر يأتي إلى رمز
لفهم طبيعة أجهزة الكمبيوتر ...
عليك أن تلعب مع رمز قليلا
يشير الرمز إلى اللغة التي يمكن للكمبيوتر فهمها. بالنسبة لهذه المحاضرات ، سنقوم بكتابة وتشغيل قصاصات قصيرة من التعليمات البرمجية لفهم ما هي الصفات الأساسية لأجهزة الكمبيوتر ، وخاصة نقاط القوة والقيود.
بتجربة استخدام الكود ، ستظهر طبيعة أجهزة الكمبيوتر بوضوح شديد ... قوية بطريقتها الخاصة ، ولكن بنوعية ميكانيكية محدودة. IMHO ، هذه الطبيعة المختلطة لأجهزة الكمبيوتر هي شيء يجب أن يفهمه الجميع ، لاستخدامهم بشكل جيد ، حتى لا يخيفهم.
قبل الترميز - الصبر
سنبدأ ببعض الترميز البسيط أدناه
أمثلة التعليمات البرمجية الأولى ليست براقة
رمز يشبه الطوب ليغو ...
القطع الفردية بسيطة للغاية
-بناء ما يصل بناء مجموعات كبيرة
ولكن علينا أن نبدأ الصغيرة
ينذر
في غضون ساعات قليلة من المحاضرة ، سنقوم بكتابة رمز التأثير المرئي البسيط مع القرد والقمر والموز:
لعبة قرد القمر سطح الموز
لكن الآن لدينا فقط print ()
الصبر سنبدأ بتعلم بعض عناصر البرمجة ، وسنقوم فيما بعد بإعادة تجميع هذه العناصر القليلة لحل العديد من المشكلات. هذه العناصر الأولى بسيطة ، لذا فهي ليست كافية للنظر إليها بمفردها. التحلي بالصبر ، سرعان ما سنضع هذه العناصر معًا - مثل الطوب ليغو - للقيام بمشاريع جميلة وأنيقة.
جافا سكريبت Lang Lang الكمبيوتر
"Javascript" هي لغة كمبيوتر شائعة
تشفير CS101: Javascript + بعض ميزات CS101 المحددة
ليست كلها لغة جافا سكريبت ، فقط بت
مجرد رمز يكفي لتجربة الأفكار الرئيسية
بالنسبة لهذه الفئة ، سنستخدم متغيرًا للغة المعروفة باسم "Javascript" ، مع بعض الميزات المضافة لهذه الدورة. تعمل لغة Javascript في متصفح الويب ، بحيث يمكن لجميع تجاربنا أن تعيش مباشرة في المتصفح دون الحاجة إلى أي شيء آخر. سنلقي نظرة على جافا سكريبت اللازمة لتجاربنا ، وليس اللغة الكاملة التي يمكن للمرء أن يرى باستخدام جافا سكريبت باحتراف. ومع ذلك ، فإن Javascript هي لغة حقيقية ورمزنا رمز حقيقي. تُظهر برامجنا الصغيرة الميزات المهمة للرمز ، مع إبقاء الأمور سريعة وصغيرة.
1. مثال الرمز الأول - طباعة
هنا هو رمز الذي يدعو وظيفة "طباعة". انقر فوق الزر "تشغيل" أدناه ، وسيقوم جهاز الكمبيوتر الخاص بك بتشغيل هذا الرمز ، وسيظهر إخراج الرمز إلى اليمين.
طباعة (6)؛
طباعة (1 ، 2) ؛
ينفذ Run كل سطر مرة واحدة ، ويمتد من أعلى إلى أسفل
الطباعة هي وظيفة - مثل الفعل في الشفرة
يتم تمرير الأرقام الموجودة داخل الأقواس (...) إلى وظيفة الطباعة
قيم متعددة مفصولة بفواصل
التجارب تغير الكود وتعمل بعد أن يرى كل تغيير المخرجات الجديدة:
تغيير رقم
-إضافة المزيد من الأرقام مفصولة بفواصل داخل الطباعة (...)
- انسخ السطر الأول والصقه مرتين بعد السطر الأخير
من أنا أعدكم أن إنتاجنا سيصبح أكثر إثارة للاهتمام!
بناء جملة التعليمات البرمجية ليست حرة شكل
-Syntax من رمز محدودة للغاية وصارمة
- انعكاس للطبيعة الداخلية والميكانيكية / الغبية للكمبيوتر
لا يمكن تأجيله - "عندما تكون في روما ..."
- نحن في زيارة لعالم الكمبيوتر
ملاحظة "طباعة" ليست جزءًا طبيعيًا من Javascript ، لقد أضفتها إلى CS101
تذكير: Video + Document - أوقف الفيديو مؤقتًا وجربه بنفسك
2. طباعة سلسلة
// السطر أدناه يطبع رقمًا واحدًا وسلسلة واحدة
طباعة (6 ، "مرحبا") ؛
طباعة ("مرحبًا" ، 2 ، "وداعًا") ؛
حتى الآن لدينا أرقام ، على سبيل المثال 6
السلسلة عبارة عن سلسلة من الحروف المكتوبة ضمن علامات اقتباس لاستخدامها كبيانات داخل الكود
-e.g. "مرحبا"
- السلاسل تعمل مع وظيفة الطباعة ، بالإضافة إلى الأرقام
- تعليق في نص مخزن الكمبيوتر ، مثل عناوين url أو نص الفقرات ، إلخ.
يبدأ التعليق بـ // ويمتد حتى نهاية السطر. طريقة لكتابة ملاحظات حول الكود ، يتم تجاهلها بواسطة الكمبيوتر.
التجارب:
، تحرير النص داخل سلسلة
-إضافة المزيد من السلاسل مفصولة بفواصل
-إضافة سلسلة "طباعة" - داخل السلسلة هو مجرد بيانات ، لا يعامل كرمز
رمز مقابل البيانات
كود = التعليمات التي يتم تشغيلها
البيانات = الأرقام الخاملة ، الأوتار ، يتم التعامل معها بواسطة الكود
لاحظ أنه يتم التعرف على الطباعة كدالة في الكود مقابل سلسلة "الترحيب" والتي هي مجرد بيانات غير فعالة (مثل الأفعال والأسماء) يتجاهل الكمبيوتر التعليقات ، لذلك فهي مجرد وسيلة لك لتدوين ملاحظات لنفسك حول ما الرمز يفعل. يمكن استخدام التعليقات لإزالة سطر من الشفرة مؤقتًا - "تعليق" الكود ، عن طريق وضع "//" على
التفكير في بناء الجملة والأخطاء (رسالة رئيسية!)
بناء جملة - نص التعليمات البرمجية منظم للكمبيوتر
خطأ شائع جدا - تكتب في التعليمات البرمجية ، مع مشكلة في بناء الجملة طفيفة
المبرمجين المحترفين يقومون بهذا النوع من "الخطأ" طوال الوقت
لحسن الحظ ، من السهل جدا إصلاح ... لا تقلق بشأن ذلك
ليس انعكاسًا لبعض عيوب المؤلف
يحصل المحترفون على أخطاء في بناء الجملة طوال الوقت
يمكن إخراج المبتدئين عن طريق أخطاء بناء الجملة ، معتقدين أنهم يرتكبون بعض الأخطاء الكبيرة
أمثلة أدناه لتلقيحك: مجموعة من الأخطاء اللغوية النموذجية + إصلاحها
إصلاح هذه الأخطاء الصغيرة هو صغير طبيعي
Code Writing
In this section, write some code and run it
Every action in the computer comes down to code
To understand the nature of computers...
You have to play with code a little
Code refers to the language the computer can understand. For these lectures, we'll write and run short snippets of code to understand what the essential qualities of computers, and especially their strengths and limitations.
Experimenting with code, the nature of computers will come through very clearly ... powerful in their own way, but with a limited, mechanical quality. IMHO, this mixed nature of computers is something everyone should understand, to use them well, to not be intimidated by them.
Before Coding - Patience
We'll start with some simple coding below
First code examples are not flashy
Code is like lego bricks...
-Individual pieces are super simple
-Eventually build up great combinations
But we have to start small
Foreshadowing
Within a few hours of lecture, we'll be writing simple visual effect code with the monkey, moon, and banana:
toy monkey moon surface banana
But for now we just have print()
Patience We're going to start by learning a few programming elements, and later we'll recombine these few elements to solve many problems. These first elements are simple, so they are not much to look at on their own. Be patient, soon we'll put these elements together -- like lego bricks -- to make pretty neat projects.
Javascript Computer Langauge
"Javascript" is a popular computer language
CS101 coding: Javascript + some CS101 specific features
Not the whole Javascript language, just bits
Just enough code to experiment with key ideas
For this class, we'll use a variant of the language known as "Javascript", with some added features for this course. The Javascript language works in the web browser, so all of our experiments can live right in the browser with nothing else required. We'll look at just the of Javascript needed for our experiments, not the full language one would see using Javascript professionally. That said, Javascript is a real language and our code is real code. Our small programs show the important features of code, while keeping things fast and small.
1. First Code Example - Print
Here is code which calls the "print" function. Click the Run button below, and your computer will run this code, and the output of the code will appear to the right.
print(6);
print(1, 2);
Run executes each line once, running from top to bottom
print is a function -- like a verb in the code
Numbers within the parenthesis ( ... ) are passed in to the print function
Multiple values separated by commas
Experiments change the code and run after each change see the new output:
-Change a number
-Add more numbers separated by commas inside the print(...)
-Copy the first line and paste it in twice after the last line
-I promise our output will get much more interesting!
Syntax the code is not free form
-Syntax of the code is very limited and strict
-A reflection of the inner, mechanical/dumb nature of the computer
-Don't be put off - "When in Rome..."
-We're visiting the world of the computer
Note "print" is not a normal part of Javascript, I added it for CS101
Reminder: Video + Document - pause the video and try it yourself
2. Print String
// The line below prints one number and one string
print(6, "hi");
print("hello", 2, "bye");
Thus far we have numbers, e.g. 6
A string is a sequence of letters written within quotes to be used as data within the code
-e.g. "hello"
-Strings work with the print function, in addition to numbers
-Strings in the computer store text, such as urls or the text of paragraphs, etc.
A comment begins with // and extends through the end of the line. A way to write notes about the code, ignored by the computer.
Experiments:
-Edit the text within a string
-Add more strings separated by commas
-Add the string "print" - inside of string is just data, not treated as code
Code vs. Data
Code = instructions that are Run
Data = passive numbers, strings, handled by the code
Note that print is recognized as a function in the code vs. the "hello" string which is just passive data (like verbs and nouns) The computer ignores the comments, so they are just a way for you to write notes to yourself about what the code is doing. Comments can be use it to temporarily remove a line of code -- "commenting out" the code, by placing a "//" to its
Thinking About Syntax and Errors (key message!)
Syntax - code text structured for the computer
Very common error - you type in code, with slight syntax problem
Professional programmers make that sort of "error" all the time
Fortunately, very easy to fix ... don't worry about it
Not a reflection of some author flaw
Professionals get syntax errors all the time
Beginners can be derailed by syntax errors, thinking they are making some big error
Examples below to inoculate you: a bunch of typical syntax errors + fixing them
Fixing these little errors is a small, normal
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ستانفورد CS101 مقدمة
نيك بارلانتي - جامعة ستانفورد (صفحة نيك الرئيسية)
CS101 على ستانفورد أونلاين
الأفكار الأساسية لكيفية عمل أجهزة الكمبيوتر
ليس مربع السحر ، أساسيات مفهومة
انظر من الداخل ، وكيف تعمل (اللعب)
فهم ما يمكنهم القيام به
لا خلفية الكمبيوتر المطلوبة على الإطلاق
فضولي .. الخطوة التالية
يستكشف هذا الفصل الصفات الأساسية لأجهزة الكمبيوتر ، وكيفية عملها ، وما الذي يمكن أن يفعله وما لا يستطيع القيام به ، ولا يحتاج إلى أي خلفية للكمبيوتر على الإطلاق.
شكر وتقدير: شكرًا لـ Google لدعمها بحثي المبكر الذي ساعدني في إنشاء هذا الفصل.
ملاحظة التنسيق: فيديو + وثيقة
يحتوي كل فيديو على مستند مكتوب مصاحب
تفسيرات مكتوبة ، رسوم بيانية ، أمثلة حية للكود
قم بالتبديل أو إعادة زيارة المستند من الفيديو
مراجعة ، غريبة عن الرابط ... كل شيء هناك
المعادلة الأساسية لأجهزة الكمبيوتر
المعادلة الأساسية لأجهزة الكمبيوتر هي:
كشف المعادلة
قوية - انظر من خلال كتل البيانات
- مليارات "العمليات" في الثانية
غبي
- العمليات بسيطة و ميكانيكية
- لا شيء مثل "البصيرة" أو "التفاهم"
في الأفلام - الغباء الميكانيكي لأجهزة الكمبيوتر مفقود
(فيديو HAL 9000)
تمارين: قوية + غبية ... تأتي بوضوح
غبي ، لكن مفيد جدا. كيف هذا؟
هذا ما يدور حول CS101
-زيارة هذا العالم الكمبيوتر مضحك ، اللعب ، معرفة كيف يعمل
-فهم كيف تحصل أجهزة الكمبيوتر على عمل مفيد
، في نهاية المطاف لا تخيف ، الكمبيوتر ليس مربع سحري
أجندة خفية: عيون مفتوحة لبعض دورات علوم الحاسوب
أجهزة الكمبيوتر قوية جدًا ، حيث تبحث في كميات كبيرة من البيانات بسرعة. يمكن لأجهزة الكمبيوتر أن تؤدي حرفيا مليارات العمليات في الثانية.
ومع ذلك ، فإن "العمليات" الفردية التي يمكن لأجهزة الكمبيوتر القيام بها هي بسيطة للغاية والميكانيكية ، لا شيء مثل الفكر الإنساني أو البصيرة. عملية نموذجية في لغة أجهزة الكمبيوتر تضيف رقمين معًا.
وعلى الرغم من أن أجهزة الكمبيوتر سريعة في ما يقومون به ، إلا أن العمليات التي يمكنهم القيام بها صارمة للغاية وبسيطة وميكانيكية. الكمبيوتر يفتقر إلى أي شيء مثل البصيرة الحقيقية. أو بعبارة أخرى ، ليست أجهزة الكمبيوتر مثل HAL 9000 من فيلم 2001: A Space Odyssey.
إذا لم يكن هناك شيء آخر ، فيجب ألا يخيفك الكمبيوتر كما لو أنه نوع من الدماغ. يعد الكمبيوتر أداة ميكانيكية يمكنها القيام بأشياء مذهلة ، لكنه يتطلب من الإنسان أن يخبرها بما يجب القيام به.
المستوى العالي - كيف يعمل الكمبيوتر؟
يتم تشغيل الكمبيوتر بواسطة تعليمات "الكود" (الكثير لاحقًا)
تعليمات بسيطة ، ميكانيكية ، على سبيل المثال إضافة 2 أرقام
الكمبيوتر "يعمل" سلسلة طويلة من التعليمات
تشغيل من خلال التعليمات ، ميكانيكية بحتة
السؤال: إذا كان الكمبيوتر الميكانيكية ...
الكمبيوتر تشغيل تعليماتها البسيطة
لكن الكثير من الميزات المفيدة
فكر في جميع ميزات الكمبيوتر المفيدة (الهاتف ، الكاميرا)
- البريد الإلكتروني ، والرسائل الفورية
- MP3 الصوت
--تقليل العين الحمراء
إذا كانت أجهزة الكمبيوتر غبية جدًا ... كيف تكون مفيدة جدًا؟
ما يربط بين الجانبين؟
الكمبيوتر مقابل الحد من العين الحمراء
المبرمجين جعله يحدث
مبرمج بشري يفكر في ميزة مفيدة
- الإبداع ، والبصيرة حول المشاكل وأجهزة الكمبيوتر
مبرمج يفكر في الحل
"خوارزمية" - خطوات لتحقيقه
تقسيمها ، كتابة التعليمات البرمجية للكمبيوتر
يسقط عليه للكمبيوتر
هذا هو برمجة الكمبيوتر
كل ميزة مفيدة استخدمتها من قبل لديها هذا النمط
هذه صورة رائعة
أفضل الميزات لكلا الجانبين: غير مكلفة / سريع + البصيرة الإبداعية
استكشافات CS101: الكود والخوارزمية
مبرمج يكتب رمز لتنفيذ فكرة الميزة الخاصة بهم
نظرًا لأن الكمبيوتر ميكانيكي وغبي تمامًا - كيف يتمكنون من القيام بالكثير من الأشياء المفيدة؟ الفجوة بين الكمبيوتر والقيام بشيء مفيد هو حيث يقوم المبرمج البشري بإنشاء الحلول. تتعلق البرمجة بشخص يستخدم رؤيته حول ما يمكن أن يكون مفيدًا وكيف يمكن القيام به ، وتقسيم الخطوات إلى رمز يمكن للكمبيوتر اتباعها.
التالي: ابدأ بالكود
Stanford CS101 Introduction
Nick Parlante - Stanford University (Nick's Home Page)
CS101 on Stanford Online
Basic ideas of how computers work
Not a magic box, basics understandable
Look inside, how they work (play)
Understand what they can do
No computer background required at all
Curious .. next step
This class explores the essential qualities of computers, how they work, what they can and cannot do, and requires no computer background at all.
Acknowledgements: thanks to Google for supporting my early research that has helped me create this class.
Format note: Video + Document
Each video has a companion written document
Written explanations, diagrams, live code examples
Switch or revisit the document from the video
Review, curious about link ... it's all there
Fundamental Equation of Computers
The fundamental equation of computers is:
Reveal Equation
Powerful - look through masses of a data
-Billions of "operations" per second
Stupid
-Operations are simple and mechanical
-Nothing like "insight" or "understanding"
In movies - the mechanical stupidity of computers is missing
(HAL 9000 video)
Exercises: Powerful + Stupid ... comes through vividly
Stupid, but very useful. How is that?
That's what CS101 is about
-Visit this funny computer world, play, see how it works
-Understand how computers get useful work done
-Ultimately not intimidated, computer is not some magic box
Hidden agenda: open eyes for some, more computer science courses
Computers are very powerful, looking through large amounts of data quickly. Computers can literally perform billions of operations per second.
However, the individual "operations" that computers can perform are extremely simple and mechanical, nothing like a human thought or insight. A typical operation in the language of computers is adding two numbers together.
So although the computers are fast at what they do, the operations that they can do are extremely rigid, simple, and mechanical. The computer lacks anything like real insight. Or put another way, computers are not like the HAL 9000 from the movie 2001: A Space Odyssey.
If nothing else, you should not be intimidated by the computer as if it's some sort of brain. The computer is a mechanical tool which can do amazing things, but it requires a human to tell it what to do.
High Level - How Does a Computer Work?
Computer is driven by "code" instructions (lots more later)
Instructions simple, mechanical, e.g. add 2 numbers
The computer "runs" a long series of instructions
Run through the instructions, purely mechanical
Question: if the computer is so mechanical...
computer running its simple instructions
But So Many Useful Features
Think of all the useful computer features (phone, camera)
--Email, instant messaging
--MP3 audio
--Red-eye reduction
If computers are so stupid... how are they so useful?
What connects the two sides?
computer vs. red-eye reduction
Programmers Make It Happen
Human programmer thinks of a useful feature
--Creativity, insight about problems, computers
Programmer thinks through the solution
"Algorithm" -- steps to accomplish
Breaking it down, writing code for the computer
Dumbing it down for the computer
This is computer programming
Every useful feature you've ever used has this pattern
This is a great picture
Best features of both sides: inexpensive/fast + creative insight
CS101 explorations: code and algorithm
programmer writes code to implement their feature idea
Since the computer is totally mechanical and stupid -- how do they manage to do so many useful things? The gap between the computer and doing something useful is where the human programmer creates solutions. Programming is about a person using their insight about what would be useful and how it could be done, and breaking the steps down into code the computer can follow.
Next: start with code
كتابة التعليمات البرمجية
في هذا القسم ، اكتب بعض التعليمات البرمجية وقم بتشغيلها
كل إجراء في الكمبيوتر يأتي إلى رمز
لفهم طبيعة أجهزة الكمبيوتر ...
عليك أن تلعب مع رمز قليلا
يشير الرمز إلى اللغة التي يمكن للكمبيوتر فهمها. بالنسبة لهذه المحاضرات ، سنقوم بكتابة وتشغيل قصاصات قصيرة من التعليمات البرمجية لفهم ما هي الصفات الأساسية لأجهزة الكمبيوتر ، وخاصة نقاط القوة والقيود.
بتجربة استخدام الكود ، ستظهر طبيعة أجهزة الكمبيوتر بوضوح شديد ... قوية بطريقتها الخاصة ، ولكن بنوعية ميكانيكية محدودة. IMHO ، هذه الطبيعة المختلطة لأجهزة الكمبيوتر هي شيء يجب أن يفهمه الجميع ، لاستخدامهم بشكل جيد ، حتى لا يخيفهم.
قبل الترميز - الصبر
سنبدأ ببعض الترميز البسيط أدناه
أمثلة التعليمات البرمجية الأولى ليست براقة
رمز يشبه الطوب ليغو ...
القطع الفردية بسيطة للغاية
-بناء ما يصل بناء مجموعات كبيرة
ولكن علينا أن نبدأ الصغيرة
ينذر
في غضون ساعات قليلة من المحاضرة ، سنقوم بكتابة رمز التأثير المرئي البسيط مع القرد والقمر والموز:
لعبة قرد القمر سطح الموز
لكن الآن لدينا فقط print ()
الصبر سنبدأ بتعلم بعض عناصر البرمجة ، وسنقوم فيما بعد بإعادة تجميع هذه العناصر القليلة لحل العديد من المشكلات. هذه العناصر الأولى بسيطة ، لذا فهي ليست كافية للنظر إليها بمفردها. التحلي بالصبر ، سرعان ما سنضع هذه العناصر معًا - مثل الطوب ليغو - للقيام بمشاريع جميلة وأنيقة.
جافا سكريبت Lang Lang الكمبيوتر
"Javascript" هي لغة كمبيوتر شائعة
تشفير CS101: Javascript + بعض ميزات CS101 المحددة
ليست كلها لغة جافا سكريبت ، فقط بت
مجرد رمز يكفي لتجربة الأفكار الرئيسية
بالنسبة لهذه الفئة ، سنستخدم متغيرًا للغة المعروفة باسم "Javascript" ، مع بعض الميزات المضافة لهذه الدورة. تعمل لغة Javascript في متصفح الويب ، بحيث يمكن لجميع تجاربنا أن تعيش مباشرة في المتصفح دون الحاجة إلى أي شيء آخر. سنلقي نظرة على جافا سكريبت اللازمة لتجاربنا ، وليس اللغة الكاملة التي يمكن للمرء أن يرى باستخدام جافا سكريبت باحتراف. ومع ذلك ، فإن Javascript هي لغة حقيقية ورمزنا رمز حقيقي. تُظهر برامجنا الصغيرة الميزات المهمة للرمز ، مع إبقاء الأمور سريعة وصغيرة.
1. مثال الرمز الأول - طباعة
هنا هو رمز الذي يدعو وظيفة "طباعة". انقر فوق الزر "تشغيل" أدناه ، وسيقوم جهاز الكمبيوتر الخاص بك بتشغيل هذا الرمز ، وسيظهر إخراج الرمز إلى اليمين.
طباعة (6)؛
طباعة (1 ، 2) ؛
ينفذ Run كل سطر مرة واحدة ، ويمتد من أعلى إلى أسفل
الطباعة هي وظيفة - مثل الفعل في الشفرة
يتم تمرير الأرقام الموجودة داخل الأقواس (...) إلى وظيفة الطباعة
قيم متعددة مفصولة بفواصل
التجارب تغير الكود وتعمل بعد أن يرى كل تغيير المخرجات الجديدة:
تغيير رقم
-إضافة المزيد من الأرقام مفصولة بفواصل داخل الطباعة (...)
- انسخ السطر الأول والصقه مرتين بعد السطر الأخير
من أنا أعدكم أن إنتاجنا سيصبح أكثر إثارة للاهتمام!
بناء جملة التعليمات البرمجية ليست حرة شكل
-Syntax من رمز محدودة للغاية وصارمة
- انعكاس للطبيعة الداخلية والميكانيكية / الغبية للكمبيوتر
لا يمكن تأجيله - "عندما تكون في روما ..."
- نحن في زيارة لعالم الكمبيوتر
ملاحظة "طباعة" ليست جزءًا طبيعيًا من Javascript ، لقد أضفتها إلى CS101
تذكير: Video + Document - أوقف الفيديو مؤقتًا وجربه بنفسك
2. طباعة سلسلة
// السطر أدناه يطبع رقمًا واحدًا وسلسلة واحدة
طباعة (6 ، "مرحبا") ؛
طباعة ("مرحبًا" ، 2 ، "وداعًا") ؛
حتى الآن لدينا أرقام ، على سبيل المثال 6
السلسلة عبارة عن سلسلة من الحروف المكتوبة ضمن علامات اقتباس لاستخدامها كبيانات داخل الكود
-e.g. "مرحبا"
- السلاسل تعمل مع وظيفة الطباعة ، بالإضافة إلى الأرقام
- تعليق في نص مخزن الكمبيوتر ، مثل عناوين url أو نص الفقرات ، إلخ.
يبدأ التعليق بـ // ويمتد حتى نهاية السطر. طريقة لكتابة ملاحظات حول الكود ، يتم تجاهلها بواسطة الكمبيوتر.
التجارب:
، تحرير النص داخل سلسلة
-إضافة المزيد من السلاسل مفصولة بفواصل
-إضافة سلسلة "طباعة" - داخل السلسلة هو مجرد بيانات ، لا يعامل كرمز
رمز مقابل البيانات
كود = التعليمات التي يتم تشغيلها
البيانات = الأرقام الخاملة ، الأوتار ، يتم التعامل معها بواسطة الكود
لاحظ أنه يتم التعرف على الطباعة كدالة في الكود مقابل سلسلة "الترحيب" والتي هي مجرد بيانات غير فعالة (مثل الأفعال والأسماء) يتجاهل الكمبيوتر التعليقات ، لذلك فهي مجرد وسيلة لك لتدوين ملاحظات لنفسك حول ما الرمز يفعل. يمكن استخدام التعليقات لإزالة سطر من الشفرة مؤقتًا - "تعليق" الكود ، عن طريق وضع "//" على
التفكير في بناء الجملة والأخطاء (رسالة رئيسية!)
بناء جملة - نص التعليمات البرمجية منظم للكمبيوتر
خطأ شائع جدا - تكتب في التعليمات البرمجية ، مع مشكلة في بناء الجملة طفيفة
المبرمجين المحترفين يقومون بهذا النوع من "الخطأ" طوال الوقت
لحسن الحظ ، من السهل جدا إصلاح ... لا تقلق بشأن ذلك
ليس انعكاسًا لبعض عيوب المؤلف
يحصل المحترفون على أخطاء في بناء الجملة طوال الوقت
يمكن إخراج المبتدئين عن طريق أخطاء بناء الجملة ، معتقدين أنهم يرتكبون بعض الأخطاء الكبيرة
أمثلة أدناه لتلقيحك: مجموعة من الأخطاء اللغوية النموذجية + إصلاحها
إصلاح هذه الأخطاء الصغيرة هو صغير طبيعي
Code Writing
In this section, write some code and run it
Every action in the computer comes down to code
To understand the nature of computers...
You have to play with code a little
Code refers to the language the computer can understand. For these lectures, we'll write and run short snippets of code to understand what the essential qualities of computers, and especially their strengths and limitations.
Experimenting with code, the nature of computers will come through very clearly ... powerful in their own way, but with a limited, mechanical quality. IMHO, this mixed nature of computers is something everyone should understand, to use them well, to not be intimidated by them.
Before Coding - Patience
We'll start with some simple coding below
First code examples are not flashy
Code is like lego bricks...
-Individual pieces are super simple
-Eventually build up great combinations
But we have to start small
Foreshadowing
Within a few hours of lecture, we'll be writing simple visual effect code with the monkey, moon, and banana:
toy monkey moon surface banana
But for now we just have print()
Patience We're going to start by learning a few programming elements, and later we'll recombine these few elements to solve many problems. These first elements are simple, so they are not much to look at on their own. Be patient, soon we'll put these elements together -- like lego bricks -- to make pretty neat projects.
Javascript Computer Langauge
"Javascript" is a popular computer language
CS101 coding: Javascript + some CS101 specific features
Not the whole Javascript language, just bits
Just enough code to experiment with key ideas
For this class, we'll use a variant of the language known as "Javascript", with some added features for this course. The Javascript language works in the web browser, so all of our experiments can live right in the browser with nothing else required. We'll look at just the of Javascript needed for our experiments, not the full language one would see using Javascript professionally. That said, Javascript is a real language and our code is real code. Our small programs show the important features of code, while keeping things fast and small.
1. First Code Example - Print
Here is code which calls the "print" function. Click the Run button below, and your computer will run this code, and the output of the code will appear to the right.
print(6);
print(1, 2);
Run executes each line once, running from top to bottom
print is a function -- like a verb in the code
Numbers within the parenthesis ( ... ) are passed in to the print function
Multiple values separated by commas
Experiments change the code and run after each change see the new output:
-Change a number
-Add more numbers separated by commas inside the print(...)
-Copy the first line and paste it in twice after the last line
-I promise our output will get much more interesting!
Syntax the code is not free form
-Syntax of the code is very limited and strict
-A reflection of the inner, mechanical/dumb nature of the computer
-Don't be put off - "When in Rome..."
-We're visiting the world of the computer
Note "print" is not a normal part of Javascript, I added it for CS101
Reminder: Video + Document - pause the video and try it yourself
2. Print String
// The line below prints one number and one string
print(6, "hi");
print("hello", 2, "bye");
Thus far we have numbers, e.g. 6
A string is a sequence of letters written within quotes to be used as data within the code
-e.g. "hello"
-Strings work with the print function, in addition to numbers
-Strings in the computer store text, such as urls or the text of paragraphs, etc.
A comment begins with // and extends through the end of the line. A way to write notes about the code, ignored by the computer.
Experiments:
-Edit the text within a string
-Add more strings separated by commas
-Add the string "print" - inside of string is just data, not treated as code
Code vs. Data
Code = instructions that are Run
Data = passive numbers, strings, handled by the code
Note that print is recognized as a function in the code vs. the "hello" string which is just passive data (like verbs and nouns) The computer ignores the comments, so they are just a way for you to write notes to yourself about what the code is doing. Comments can be use it to temporarily remove a line of code -- "commenting out" the code, by placing a "//" to its
Thinking About Syntax and Errors (key message!)
Syntax - code text structured for the computer
Very common error - you type in code, with slight syntax problem
Professional programmers make that sort of "error" all the time
Fortunately, very easy to fix ... don't worry about it
Not a reflection of some author flaw
Professionals get syntax errors all the time
Beginners can be derailed by syntax errors, thinking they are making some big error
Examples below to inoculate you: a bunch of typical syntax errors + fixing them
Fixing these little errors is a small, normal
Skill OneSed ut perspiciatis unde omnis iste natus error sit voluptatem accusant doloremque laudantium, totam rem.
|
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.
|