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