WEBVTT

00:00:00.840 --> 00:00:05.826
This is just a short section to introduce
a type of puzzle, which is built on

00:00:05.826 --> 00:00:10.873
the sort of image manipulation code we've been doing. So the idea is, there's a picture of some

00:00:10.873 --> 00:00:15.798
mystery object. And the red, green and blue values in the image have just been

00:00:15.798 --> 00:00:21.027
messed up in some way. And so, what
you need to do is write code to fix the

00:00:21.027 --> 00:00:26.446
red, green, and blue values, and so reveal
the original image, and, and see what it is.

00:00:26.446 --> 00:00:31.935
So, here is an example I'm gonna do
here. This is the so called "Gold Puzzle".

00:00:32.140 --> 00:00:37.492
And, the idea, so there's, there's, some
object is shown here. And what's happened with this

00:00:37.492 --> 00:00:43.375
is that, first of all, the green
and blue values in the image have been just

00:00:43.375 --> 00:00:49.425
set with random values between zero
and 255. And actually, if you look at it,

00:00:49.425 --> 00:00:52.706
so it gives a kind of a, a snowy
appearance. And it, you can kinda see, there's,

00:00:52.706 --> 00:00:56.662
so there's some pixels where the
green is very high, some pixels where the blue is very high,

00:00:56.662 --> 00:01:00.426
they just look blue or green; and then there's these sort of turquoise pixels scattered through;

00:01:00.426 --> 00:01:04.334
so those are cases where, both the blue and the green are high. So that's one,

00:01:04.334 --> 00:01:08.242
one level of mess-up in this image. The other thing that's happened

00:01:08.242 --> 00:01:12.912
is that the image that we wanna recover, it's in the

00:01:12.912 --> 00:01:17.685
red values. In fact, it's exclusively in the red values. The green and blue are just, sort of, garbage.

00:01:17.685 --> 00:01:22.643
But the values have been divided by ten, so they're very dark. So, kind of what we're seeing here

00:01:22.643 --> 00:01:27.168
in the obscure version, is, there's, there's a dark red image

00:01:27.168 --> 00:01:32.002
behind there. And it's been covered with this, sort of bright random

00:01:32.002 --> 00:01:37.615
green blue snow, so we can't see it. So what we want to do is, write code to fix it.

00:01:37.615 --> 00:01:46.022
So let me start off here. So as usual, for these, I'm going to start off

NOTE Paragraph

00:01:46.022 --> 00:01:50.590
with just a blank text area to just write the code. And then down here there's a solution,

00:01:50.590 --> 00:01:55.214
"Show solution" button. So if you wanted to visit this page and try it yourself, you can, you can get the code that way.

00:01:55.214 --> 00:01:59.448
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:

00:01:59.448 --> 00:02:03.626
the loop is empty; so if I run it, we just, we just get the, the puzzle image raw.

00:02:03.626 --> 00:02:07.749
Alright, so the first thing I'm going to do is I'll say

00:02:07.749 --> 00:02:12.150
pixel.setGreen(0)

00:02:12.150 --> 00:02:16.551
I'm going to punch out the green
values. I'm just going to get rid of them

00:02:16.551 --> 00:02:22.111
and we'll see what we get. Hmm, alright,
So now, well, it's better. Now, we just

00:02:22.111 --> 00:02:29.371
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.

00:02:29.371 --> 00:02:36.020
So I'll say, pixel.SetBlue(0), we'll try that.

00:02:37.220 --> 00:02:42.797
Alright, hmm, So, I, I've got rid of the
snow. But now the problem is that the

00:02:42.797 --> 00:02:48.832
image, which is in the red values. It's
just so dark, we can't see it. So it is,

00:02:48.832 --> 00:02:54.562
it's technically there, but it's invisible. So what I need to is scale it back up,

00:02:54.562 --> 00:03:00.215
right? It's down there, I just need to make it brighter. So I'll say pixel.setRed of

00:03:00.215 --> 00:03:05.001
pixel-dot-getRed" Looks a little bit like the five, ten, twenty

00:03:05.001 --> 00:03:09.831
puzzles here. So I'm gonna, in this case, the instructions say that it was scaled down

00:03:09.831 --> 00:03:14.544
by a factor of ten. So I'll scale the red back up by a factor of ten.

00:03:14.544 --> 00:03:19.888
Huh, there we go. So that, that is the solution image. So,

00:03:19.888 --> 00:03:25.064
this is a picture of the Golden Gate Bridge, as seen from
the San Francisco side. Now,

00:03:25.064 --> 00:03:30.513
it's a little, obviously, it doesn't look quite
right. What's happened, is that, because

00:03:30.513 --> 00:03:35.826
the data is exclusively in the red, even
when we recover it, it just looks red. I mean, what's,

00:03:35.826 --> 00:03:40.680
what's happened, actually. Is this
is an essentially a black and white image

00:03:40.680 --> 00:03:45.212
and normally those are shown on a, on a
sort of black to white spectrum. In this case,

00:03:45.212 --> 00:03:49.915
the image is being shown on a black
to red spectrum. So it is the right image but it just,

00:03:49.915 --> 00:03:54.619
it has this red cast. For this sections we're gonna say that's good enough: you know,

00:03:54.619 --> 00:03:59.380
you can see what it's supposed to be. In a later section I'll show how to,

00:03:59.380 --> 00:04:04.255
how to fix that. And get it to look like a, a proper black and white image.