< Return to Video

Puzzles

  • 0:01 - 0:06
    This is just a short section to introduce
    a type of puzzle, which is built on
  • 0:06 - 0:11
    the sort of image manipulation code we've been doing. So the idea is, there's a picture of some
  • 0:11 - 0:16
    mystery object. And the red, green and blue values in the image have just been
  • 0:16 - 0:21
    messed up in some way. And so, what
    you need to do is write code to fix the
  • 0:21 - 0:26
    red, green, and blue values, and so reveal
    the original image, and, and see what it is.
  • 0:26 - 0:32
    So, here is an example I'm gonna do
    here. This is the so called "Gold Puzzle".
  • 0:32 - 0:37
    And, the idea, so there's, there's, some
    object is shown here. And what's happened with this
  • 0:37 - 0:43
    is that, first of all, the green
    and blue values in the image have been just
  • 0:43 - 0:49
    set with random values between zero
    and 255. And actually, if you look at it,
  • 0:49 - 0:53
    so it gives a kind of a, a snowy
    appearance. And it, you can kinda see, there's,
  • 0:53 - 0:57
    so there's some pixels where the
    green is very high, some pixels where the blue is very high,
  • 0:57 - 1:00
    they just look blue or green; and then there's these sort of turquoise pixels scattered through;
  • 1:00 - 1:04
    so those are cases where, both the blue and the green are high. So that's one,
  • 1:04 - 1:08
    one level of mess-up in this image. The other thing that's happened
  • 1:08 - 1:13
    is that the image that we wanna recover, it's in the
  • 1:13 - 1:18
    red values. In fact, it's exclusively in the red values. The green and blue are just, sort of, garbage.
  • 1:18 - 1:23
    But the values have been divided by ten, so they're very dark. So, kind of what we're seeing here
  • 1:23 - 1:27
    in the obscure version, is, there's, there's a dark red image
  • 1:27 - 1:32
    behind there. And it's been covered with this, sort of bright random
  • 1:32 - 1:38
    green blue snow, so we can't see it. So what we want to do is, write code to fix it.
  • 1:38 - 1:46
    So let me start off here. So as usual, for these, I'm going to start off
  • 1:46 - 1:51
    with just a blank text area to just write the code. And then down here there's a solution,
  • 1:51 - 1:55
    "Show solution" button. So if you wanted to visit this page and try it yourself, you can, you can get the code that way.
  • 1:55 - 1:59
    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:
  • 1:59 - 2:04
    the loop is empty; so if I run it, we just, we just get the, the puzzle image raw.
  • 2:04 - 2:08
    Alright, so the first thing I'm going to do is I'll say
  • 2:08 - 2:12
    pixel.setGreen(0)
  • 2:12 - 2:17
    I'm going to punch out the green
    values. I'm just going to get rid of them
  • 2:17 - 2:22
    and we'll see what we get. Hmm, alright,
    So now, well, it's better. Now, we just
  • 2:22 - 2:29
    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.
  • 2:29 - 2:36
    So I'll say, pixel.SetBlue(0), we'll try that.
  • 2:37 - 2:43
    Alright, hmm, So, I, I've got rid of the
    snow. But now the problem is that the
  • 2:43 - 2:49
    image, which is in the red values. It's
    just so dark, we can't see it. So it is,
  • 2:49 - 2:55
    it's technically there, but it's invisible. So what I need to is scale it back up,
  • 2:55 - 3:00
    right? It's down there, I just need to make it brighter. So I'll say pixel.setRed of
  • 3:00 - 3:05
    pixel-dot-getRed" Looks a little bit like the five, ten, twenty
  • 3:05 - 3:10
    puzzles here. So I'm gonna, in this case, the instructions say that it was scaled down
  • 3:10 - 3:15
    by a factor of ten. So I'll scale the red back up by a factor of ten.
  • 3:15 - 3:20
    Huh, there we go. So that, that is the solution image. So,
  • 3:20 - 3:25
    this is a picture of the Golden Gate Bridge, as seen from
    the San Francisco side. Now,
  • 3:25 - 3:31
    it's a little, obviously, it doesn't look quite
    right. What's happened, is that, because
  • 3:31 - 3:36
    the data is exclusively in the red, even
    when we recover it, it just looks red. I mean, what's,
  • 3:36 - 3:41
    what's happened, actually. Is this
    is an essentially a black and white image
  • 3:41 - 3:45
    and normally those are shown on a, on a
    sort of black to white spectrum. In this case,
  • 3:45 - 3:50
    the image is being shown on a black
    to red spectrum. So it is the right image but it just,
  • 3:50 - 3:55
    it has this red cast. For this sections we're gonna say that's good enough: you know,
  • 3:55 - 3:59
    you can see what it's supposed to be. In a later section I'll show how to,
  • 3:59 - 4:04
    how to fix that. And get it to look like a, a proper black and white image.
Title:
Puzzles
Description:

Professor Nick Parlante exemplifies how to solve an image puzzle using JavaScript.

more » « less
Video Language:
English
Camilo Dorado edited English subtitles for Puzzles
Camilo Dorado edited English subtitles for Puzzles
Camilo Dorado edited English subtitles for Puzzles
Camilo Dorado edited English subtitles for Puzzles
Camilo Dorado edited English subtitles for Puzzles
Camilo Dorado edited English subtitles for Puzzles
duvin1 edited English subtitles for Puzzles
duvin1 edited English subtitles for Puzzles
Show all

English subtitles

Revisions