0:00:01.140,0:00:04.160 A little BIT about Pixels 0:00:06.480,0:00:09.519 (camera clicks) Good. 0:00:09.519,0:00:14.000 I created Instagram with my co-founder 0:00:14.000,0:00:19.009 Mike, initially we saw the mobile phone as[br]an opportunity to create something new. Because 0:00:19.009,0:00:23.270 for the first time people were carrying around[br]a computer in their pocket. And we decided 0:00:23.270,0:00:27.730 that sharing imagery was probably the biggest[br]opportunity for the next five years, and one 0:00:27.730,0:00:32.360 that we held close to our hearts, something we wanted to spend our time on. It's 0:00:32.360,0:00:37.280 great to say you have an app or an idea that[br]does x, y, or z but unless that solves a real 0:00:37.280,0:00:42.489 problem for people they're not going to use[br]it. And the question is: What problem are 0:00:42.489,0:00:46.970 you solving? (Piper - Photographer) When people[br]first faced the problem of how to show a picture 0:00:46.970,0:00:52.480 on a screen, they had to come up with a way[br]to break the image down into data. In 1957, 0:00:52.480,0:00:56.770 an early computer engineer named Russell Kirsch[br]took a picture of his infant son and scanned 0:00:56.770,0:01:01.469 it. It was the first digital image, a grainy[br]black and white baby picture-- and that's 0:01:01.469,0:01:07.640 how the pixel was born! Pixels are an interesting[br]concept because you can't see them very easily. 0:01:07.640,0:01:13.130 But actually, if you get a magnifying glass[br]and you go up to a screen you actually can 0:01:13.130,0:01:17.630 see that your screen is made up of tiny dots[br]of little light. What's more interesting is 0:01:17.630,0:01:22.439 that those tiny dots of little light are actually[br]multiple tiny dots of little light of different 0:01:22.439,0:01:28.060 colors. There's red, green, and blue. Pixels[br]together, from far away, create an image and 0:01:28.060,0:01:32.560 upfront they are just little lights that are[br]on and off. The combination of those create 0:01:32.560,0:01:36.990 images and what you see on your screen every[br]single day you use your computer. So you'll 0:01:36.990,0:01:42.259 hear the term resolution a lot, both in computer[br]science and manufacturers of devices will 0:01:42.259,0:01:48.209 talk about it. Resolution is basically the[br]dimensions by which you can measure how many 0:01:48.209,0:01:53.219 pixels are on a screen. So back in the day[br]when I was a high school student, it was 640 0:01:53.219,0:01:58.079 by 480 pixels. And today it's a lot bigger.[br]And then there's the question not only of 0:01:58.079,0:02:02.279 resolution, but also density. For instance,[br]on modern smartphones they fit the same number 0:02:02.279,0:02:06.929 of little lights called pixels but in a denser[br]space and that's what allows you to get sharper 0:02:06.929,0:02:13.640 images. Now, how do you store those values[br]of the pixels in a file? What you do is you 0:02:13.640,0:02:18.700 store red, green, and blue values in little[br]triplets, effectively. With different values 0:02:18.700,0:02:29.190 that each make up a single pixel. The values[br]range from 0 to 255. 0 would be very dark, 0:02:29.190,0:02:37.730 255 would be very bright. Triplets of these[br]values together compose a single pixel. An 0:02:37.730,0:02:43.110 image file, whether it's a jpeg, gif, png,[br]etc. contains millions of these RGB (red-green-blue) 0:02:43.110,0:02:48.200 triplets. So how does a computer store all[br]that data? All computing and visual data are 0:02:48.200,0:02:53.430 represented by bits. A bit has two states:[br]it's on or it's off. But instead of on or 0:02:53.430,0:03:00.980 off, computers use 1 and 0 -- binary! An image[br]file is actually just a bunch of 1s and 0s. 0:03:00.980,0:03:08.240 But why do RGB values go from 0 to 255? Turns[br]out that each color channel, RGB, is represented 0:03:08.240,0:03:13.930 by 8 bits, which together are called a byte.[br]If you know the binary number system, you 0:03:13.930,0:03:20.250 know that the maximum number 8 bits can represent[br]is 255. 255 is equal to eight 1s in a row. 0:03:20.250,0:03:28.900 And the lowest is 0 or eight 0s in a row.[br]Therefore, 0 to 255 gives us 256 different 0:03:28.900,0:03:36.260 intensities per color channel. We can represent[br]a pixel of the color turquoise for example, 0:03:36.260,0:03:42.710 in our traditional decimal based number system[br]as 64 (for a little red), 224 (for a lot of 0:03:42.710,0:03:53.870 green), and 208 (for some blue). But a computer[br]would have stored it as 0100 0000 1110 0000 0:03:53.870,0:04:03.330 1101 0000. We use 24 binary digits to represent[br]this one pixel. So rather than binary, digital 0:04:03.330,0:04:08.370 artists often use the hexadecimal number system[br]to represent colors. So we can represent the 0:04:08.370,0:04:16.279 same color turquoise using only six hexadecimal[br]digits: 40 E0 D0. Which is a lot shorter. 0:04:16.279,0:04:21.949 Let's say you want to modify the colors of[br]the image. How do you do that? Basically there 0:04:21.949,0:04:26.039 are ways of mapping functions where you take[br]the input value of the pixel. So you take 0:04:26.039,0:04:31.439 an input of a red, green, and blue value,[br]which represents that color. Then you map 0:04:31.439,0:04:37.360 it using a function to a new red, green, and[br]blue value. Let's say you wanted to make an 0:04:37.360,0:04:42.479 image darker. One way of doing that is by[br]taking the red, green, and blue values that 0:04:42.479,0:04:49.080 come in and let's just say subtracting a fixed[br]constant from each of them, say subtract 50. 0:04:49.080,0:04:54.029 Obviously you can't go below 0, but you just[br]subtract 50 from each of them and that's the 0:04:54.029,0:05:02.419 output. So the input is R, G, B and the output[br]is R-50, G-50, B-50. What you'll see is you've 0:05:02.419,0:05:06.009 taken an image with a certain brightness,[br]and you get out an image with a much darker 0:05:06.009,0:05:11.789 brightness. What a lot of people don't realize[br]about Instagram is that initially people thought 0:05:11.789,0:05:17.300 what it was was a way of filtering images,[br]making your images look cool in some way or 0:05:17.300,0:05:21.710 retro. And what it grew into was actually[br]much more important, it was a way of people 0:05:21.710,0:05:27.300 connecting. It's not just about seeing photos[br]of your friends and your family, but actually 0:05:27.300,0:05:32.460 being able to discover things happening all[br]around the world. Whether that's a riot overseas, 0:05:32.460,0:05:38.099 a social movement, you're able to basically[br]consume that information in a visual way. 0:05:38.099,0:05:41.069 And that allowed us to grow very quickly and[br]be a universal platform. 0:05:42.880,0:05:49.060 Learn more at studio.code.org.