YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← Instagram's Kevin Systrom explains pixels and how filters work

Get Embed Code
17 Languages

Showing Revision 1 created 01/05/2016 by Code.org.

  1. A little BIT about Pixels

  2. (camera clicks) Good.
  3. I created Instagram with my co-founder
  4. Mike, initially we saw the mobile phone as
    an opportunity to create something new. Because
  5. for the first time people were carrying around
    a computer in their pocket. And we decided
  6. that sharing imagery was probably the biggest
    opportunity for the next five years, and one
  7. that we held close to our hearts, something we wanted to spend our time on. It's
  8. great to say you have an app or an idea that
    does x, y, or z but unless that solves a real
  9. problem for people they're not going to use
    it. And the question is: What problem are
  10. you solving? (Piper - Photographer) When people
    first faced the problem of how to show a picture
  11. on a screen, they had to come up with a way
    to break the image down into data. In 1957,
  12. an early computer engineer named Russell Kirsch
    took a picture of his infant son and scanned
  13. it. It was the first digital image, a grainy
    black and white baby picture-- and that's
  14. how the pixel was born! Pixels are an interesting
    concept because you can't see them very easily.
  15. But actually, if you get a magnifying glass
    and you go up to a screen you actually can
  16. see that your screen is made up of tiny dots
    of little light. What's more interesting is
  17. that those tiny dots of little light are actually
    multiple tiny dots of little light of different
  18. colors. There's red, green, and blue. Pixels
    together, from far away, create an image and
  19. upfront they are just little lights that are
    on and off. The combination of those create
  20. images and what you see on your screen every
    single day you use your computer. So you'll
  21. hear the term resolution a lot, both in computer
    science and manufacturers of devices will
  22. talk about it. Resolution is basically the
    dimensions by which you can measure how many
  23. pixels are on a screen. So back in the day
    when I was a high school student, it was 640
  24. by 480 pixels. And today it's a lot bigger.
    And then there's the question not only of
  25. resolution, but also density. For instance,
    on modern smartphones they fit the same number
  26. of little lights called pixels but in a denser
    space and that's what allows you to get sharper
  27. images. Now, how do you store those values
    of the pixels in a file? What you do is you
  28. store red, green, and blue values in little
    triplets, effectively. With different values
  29. that each make up a single pixel. The values
    range from 0 to 255. 0 would be very dark,
  30. 255 would be very bright. Triplets of these
    values together compose a single pixel. An
  31. image file, whether it's a jpeg, gif, png,
    etc. contains millions of these RGB (red-green-blue)
  32. triplets. So how does a computer store all
    that data? All computing and visual data are
  33. represented by bits. A bit has two states:
    it's on or it's off. But instead of on or
  34. off, computers use 1 and 0 -- binary! An image
    file is actually just a bunch of 1s and 0s.
  35. But why do RGB values go from 0 to 255? Turns
    out that each color channel, RGB, is represented
  36. by 8 bits, which together are called a byte.
    If you know the binary number system, you
  37. know that the maximum number 8 bits can represent
    is 255. 255 is equal to eight 1s in a row.
  38. And the lowest is 0 or eight 0s in a row.
    Therefore, 0 to 255 gives us 256 different
  39. intensities per color channel. We can represent
    a pixel of the color turquoise for example,
  40. in our traditional decimal based number system
    as 64 (for a little red), 224 (for a lot of
  41. green), and 208 (for some blue). But a computer
    would have stored it as 0100 0000 1110 0000
  42. 1101 0000. We use 24 binary digits to represent
    this one pixel. So rather than binary, digital
  43. artists often use the hexadecimal number system
    to represent colors. So we can represent the
  44. same color turquoise using only six hexadecimal
    digits: 40 E0 D0. Which is a lot shorter.
  45. Let's say you want to modify the colors of
    the image. How do you do that? Basically there
  46. are ways of mapping functions where you take
    the input value of the pixel. So you take
  47. an input of a red, green, and blue value,
    which represents that color. Then you map
  48. it using a function to a new red, green, and
    blue value. Let's say you wanted to make an
  49. image darker. One way of doing that is by
    taking the red, green, and blue values that
  50. come in and let's just say subtracting a fixed
    constant from each of them, say subtract 50.
  51. Obviously you can't go below 0, but you just
    subtract 50 from each of them and that's the
  52. output. So the input is R, G, B and the output
    is R-50, G-50, B-50. What you'll see is you've
  53. taken an image with a certain brightness,
    and you get out an image with a much darker
  54. brightness. What a lot of people don't realize
    about Instagram is that initially people thought
  55. what it was was a way of filtering images,
    making your images look cool in some way or
  56. retro. And what it grew into was actually
    much more important, it was a way of people
  57. connecting. It's not just about seeing photos
    of your friends and your family, but actually
  58. being able to discover things happening all
    around the world. Whether that's a riot overseas,
  59. a social movement, you're able to basically
    consume that information in a visual way.
  60. And that allowed us to grow very quickly and
    be a universal platform.
  61. Learn more at studio.code.org.