[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:01.14,0:00:04.16,Default,,0000,0000,0000,,A little BIT about Pixels Dialogue: 0,0:00:06.48,0:00:09.52,Default,,0000,0000,0000,,(camera clicks) Good. Dialogue: 0,0:00:09.52,0:00:14.00,Default,,0000,0000,0000,,I created Instagram with my co-founder Dialogue: 0,0:00:14.00,0:00:19.01,Default,,0000,0000,0000,,Mike, initially we saw the mobile phone as\Nan opportunity to create something new. Because Dialogue: 0,0:00:19.01,0:00:23.27,Default,,0000,0000,0000,,for the first time people were carrying around\Na computer in their pocket. And we decided Dialogue: 0,0:00:23.27,0:00:27.73,Default,,0000,0000,0000,,that sharing imagery was probably the biggest\Nopportunity for the next five years, and one Dialogue: 0,0:00:27.73,0:00:32.36,Default,,0000,0000,0000,,that we held close to our hearts, something we wanted to spend our time on. It's Dialogue: 0,0:00:32.36,0:00:37.28,Default,,0000,0000,0000,,great to say you have an app or an idea that\Ndoes x, y, or z but unless that solves a real Dialogue: 0,0:00:37.28,0:00:42.49,Default,,0000,0000,0000,,problem for people they're not going to use\Nit. And the question is: What problem are Dialogue: 0,0:00:42.49,0:00:46.97,Default,,0000,0000,0000,,you solving? (Piper - Photographer) When people\Nfirst faced the problem of how to show a picture Dialogue: 0,0:00:46.97,0:00:52.48,Default,,0000,0000,0000,,on a screen, they had to come up with a way\Nto break the image down into data. In 1957, Dialogue: 0,0:00:52.48,0:00:56.77,Default,,0000,0000,0000,,an early computer engineer named Russell Kirsch\Ntook a picture of his infant son and scanned Dialogue: 0,0:00:56.77,0:01:01.47,Default,,0000,0000,0000,,it. It was the first digital image, a grainy\Nblack and white baby picture-- and that's Dialogue: 0,0:01:01.47,0:01:07.64,Default,,0000,0000,0000,,how the pixel was born! Pixels are an interesting\Nconcept because you can't see them very easily. Dialogue: 0,0:01:07.64,0:01:13.13,Default,,0000,0000,0000,,But actually, if you get a magnifying glass\Nand you go up to a screen you actually can Dialogue: 0,0:01:13.13,0:01:17.63,Default,,0000,0000,0000,,see that your screen is made up of tiny dots\Nof little light. What's more interesting is Dialogue: 0,0:01:17.63,0:01:22.44,Default,,0000,0000,0000,,that those tiny dots of little light are actually\Nmultiple tiny dots of little light of different Dialogue: 0,0:01:22.44,0:01:28.06,Default,,0000,0000,0000,,colors. There's red, green, and blue. Pixels\Ntogether, from far away, create an image and Dialogue: 0,0:01:28.06,0:01:32.56,Default,,0000,0000,0000,,upfront they are just little lights that are\Non and off. The combination of those create Dialogue: 0,0:01:32.56,0:01:36.99,Default,,0000,0000,0000,,images and what you see on your screen every\Nsingle day you use your computer. So you'll Dialogue: 0,0:01:36.99,0:01:42.26,Default,,0000,0000,0000,,hear the term resolution a lot, both in computer\Nscience and manufacturers of devices will Dialogue: 0,0:01:42.26,0:01:48.21,Default,,0000,0000,0000,,talk about it. Resolution is basically the\Ndimensions by which you can measure how many Dialogue: 0,0:01:48.21,0:01:53.22,Default,,0000,0000,0000,,pixels are on a screen. So back in the day\Nwhen I was a high school student, it was 640 Dialogue: 0,0:01:53.22,0:01:58.08,Default,,0000,0000,0000,,by 480 pixels. And today it's a lot bigger.\NAnd then there's the question not only of Dialogue: 0,0:01:58.08,0:02:02.28,Default,,0000,0000,0000,,resolution, but also density. For instance,\Non modern smartphones they fit the same number Dialogue: 0,0:02:02.28,0:02:06.93,Default,,0000,0000,0000,,of little lights called pixels but in a denser\Nspace and that's what allows you to get sharper Dialogue: 0,0:02:06.93,0:02:13.64,Default,,0000,0000,0000,,images. Now, how do you store those values\Nof the pixels in a file? What you do is you Dialogue: 0,0:02:13.64,0:02:18.70,Default,,0000,0000,0000,,store red, green, and blue values in little\Ntriplets, effectively. With different values Dialogue: 0,0:02:18.70,0:02:29.19,Default,,0000,0000,0000,,that each make up a single pixel. The values\Nrange from 0 to 255. 0 would be very dark, Dialogue: 0,0:02:29.19,0:02:37.73,Default,,0000,0000,0000,,255 would be very bright. Triplets of these\Nvalues together compose a single pixel. An Dialogue: 0,0:02:37.73,0:02:43.11,Default,,0000,0000,0000,,image file, whether it's a jpeg, gif, png,\Netc. contains millions of these RGB (red-green-blue) Dialogue: 0,0:02:43.11,0:02:48.20,Default,,0000,0000,0000,,triplets. So how does a computer store all\Nthat data? All computing and visual data are Dialogue: 0,0:02:48.20,0:02:53.43,Default,,0000,0000,0000,,represented by bits. A bit has two states:\Nit's on or it's off. But instead of on or Dialogue: 0,0:02:53.43,0:03:00.98,Default,,0000,0000,0000,,off, computers use 1 and 0 -- binary! An image\Nfile is actually just a bunch of 1s and 0s. Dialogue: 0,0:03:00.98,0:03:08.24,Default,,0000,0000,0000,,But why do RGB values go from 0 to 255? Turns\Nout that each color channel, RGB, is represented Dialogue: 0,0:03:08.24,0:03:13.93,Default,,0000,0000,0000,,by 8 bits, which together are called a byte.\NIf you know the binary number system, you Dialogue: 0,0:03:13.93,0:03:20.25,Default,,0000,0000,0000,,know that the maximum number 8 bits can represent\Nis 255. 255 is equal to eight 1s in a row. Dialogue: 0,0:03:20.25,0:03:28.90,Default,,0000,0000,0000,,And the lowest is 0 or eight 0s in a row.\NTherefore, 0 to 255 gives us 256 different Dialogue: 0,0:03:28.90,0:03:36.26,Default,,0000,0000,0000,,intensities per color channel. We can represent\Na pixel of the color turquoise for example, Dialogue: 0,0:03:36.26,0:03:42.71,Default,,0000,0000,0000,,in our traditional decimal based number system\Nas 64 (for a little red), 224 (for a lot of Dialogue: 0,0:03:42.71,0:03:53.87,Default,,0000,0000,0000,,green), and 208 (for some blue). But a computer\Nwould have stored it as 0100 0000 1110 0000 Dialogue: 0,0:03:53.87,0:04:03.33,Default,,0000,0000,0000,,1101 0000. We use 24 binary digits to represent\Nthis one pixel. So rather than binary, digital Dialogue: 0,0:04:03.33,0:04:08.37,Default,,0000,0000,0000,,artists often use the hexadecimal number system\Nto represent colors. So we can represent the Dialogue: 0,0:04:08.37,0:04:16.28,Default,,0000,0000,0000,,same color turquoise using only six hexadecimal\Ndigits: 40 E0 D0. Which is a lot shorter. Dialogue: 0,0:04:16.28,0:04:21.95,Default,,0000,0000,0000,,Let's say you want to modify the colors of\Nthe image. How do you do that? Basically there Dialogue: 0,0:04:21.95,0:04:26.04,Default,,0000,0000,0000,,are ways of mapping functions where you take\Nthe input value of the pixel. So you take Dialogue: 0,0:04:26.04,0:04:31.44,Default,,0000,0000,0000,,an input of a red, green, and blue value,\Nwhich represents that color. Then you map Dialogue: 0,0:04:31.44,0:04:37.36,Default,,0000,0000,0000,,it using a function to a new red, green, and\Nblue value. Let's say you wanted to make an Dialogue: 0,0:04:37.36,0:04:42.48,Default,,0000,0000,0000,,image darker. One way of doing that is by\Ntaking the red, green, and blue values that Dialogue: 0,0:04:42.48,0:04:49.08,Default,,0000,0000,0000,,come in and let's just say subtracting a fixed\Nconstant from each of them, say subtract 50. Dialogue: 0,0:04:49.08,0:04:54.03,Default,,0000,0000,0000,,Obviously you can't go below 0, but you just\Nsubtract 50 from each of them and that's the Dialogue: 0,0:04:54.03,0:05:02.42,Default,,0000,0000,0000,,output. So the input is R, G, B and the output\Nis R-50, G-50, B-50. What you'll see is you've Dialogue: 0,0:05:02.42,0:05:06.01,Default,,0000,0000,0000,,taken an image with a certain brightness,\Nand you get out an image with a much darker Dialogue: 0,0:05:06.01,0:05:11.79,Default,,0000,0000,0000,,brightness. What a lot of people don't realize\Nabout Instagram is that initially people thought Dialogue: 0,0:05:11.79,0:05:17.30,Default,,0000,0000,0000,,what it was was a way of filtering images,\Nmaking your images look cool in some way or Dialogue: 0,0:05:17.30,0:05:21.71,Default,,0000,0000,0000,,retro. And what it grew into was actually\Nmuch more important, it was a way of people Dialogue: 0,0:05:21.71,0:05:27.30,Default,,0000,0000,0000,,connecting. It's not just about seeing photos\Nof your friends and your family, but actually Dialogue: 0,0:05:27.30,0:05:32.46,Default,,0000,0000,0000,,being able to discover things happening all\Naround the world. Whether that's a riot overseas, Dialogue: 0,0:05:32.46,0:05:38.10,Default,,0000,0000,0000,,a social movement, you're able to basically\Nconsume that information in a visual way. Dialogue: 0,0:05:38.10,0:05:41.07,Default,,0000,0000,0000,,And that allowed us to grow very quickly and\Nbe a universal platform. Dialogue: 0,0:05:42.88,0:05:49.06,Default,,0000,0000,0000,,Learn more at studio.code.org.