title
10.4: Pixels! (The Pixels Array) - Processing Tutorial

description
This video covers the basics of reading from and writing to the pixels array in Processing / Java. This is foundation for all image processing and computer vision applications and examples I'll show in the rest of image and video in Processing (Java) videos. Video for Chapter: 15 of http://learningprocessing.com/ Learning Processing A Beginner's Guide to Programming, Images,Animation, and Interaction Twitter: https://twitter.com/shiffman Help us caption & translate this video! http://amara.org/v/Qbwy/ 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail
{'title': '10.4: Pixels! (The Pixels Array) - Processing Tutorial', 'heatmap': [{'end': 514.172, 'start': 500.131, 'weight': 0.922}, {'end': 713.216, 'start': 689.997, 'weight': 0.735}, {'end': 1174.207, 'start': 1081.556, 'weight': 0.749}], 'summary': 'The tutorial explores pixels in computer graphics and processing algorithms, covering image manipulation in photoshop, pixel manipulation in processing, working with pixel data structures, setting pixel colors, and applying image processing algorithms for computer vision.', 'chapters': [{'end': 96.92, 'segs': [{'end': 96.92, 'src': 'embed', 'start': 54.365, 'weight': 0, 'content': [{'end': 55.746, 'text': 'Processing has an algorithm.', 'start': 54.365, 'duration': 1.381}, {'end': 65.65, 'text': 'When it gets two points, it knows how to fill in all of the pixels between those two points to create the illusion of that line on the screen.', 'start': 56.406, 'duration': 9.244}, {'end': 71.492, 'text': "I don't know if it's really a line or not, but that's a metaphysical question we don't have to answer.", 'start': 66.75, 'duration': 4.742}, {'end': 76.056, 'text': 'This exists because we need to do this stuff all the time.', 'start': 72.793, 'duration': 3.263}, {'end': 79.52, 'text': 'We want to draw lines and circles and rectangles and triangles and put images, all this kind of stuff.', 'start': 76.076, 'duration': 3.444}, {'end': 83.644, 'text': "We don't want to have to figure out which pixels we need to set, which colors.", 'start': 79.54, 'duration': 4.104}, {'end': 87.428, 'text': "Every single time we want to draw a shape, that's what these functions are doing for us.", 'start': 84.064, 'duration': 3.364}, {'end': 92.877, 'text': 'our lives when we might want to do that.', 'start': 89.835, 'duration': 3.042}, {'end': 96.92, 'text': 'We might want to say, these functions are not good enough for me.', 'start': 92.937, 'duration': 3.983}], 'summary': 'Processing uses algorithm to draw shapes, fill pixels, and create illusions on the screen.', 'duration': 42.555, 'max_score': 54.365, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE54365.jpg'}], 'start': 6.015, 'title': 'Understanding pixels in computer graphics', 'summary': 'Explores the concept of pixels in computer graphics and how processing algorithms manipulate pixels to create shapes and images on the screen, simplifying the task of drawing lines and shapes for users.', 'chapters': [{'end': 96.92, 'start': 6.015, 'title': 'Understanding pixels in computer graphics', 'summary': 'Explores the concept of pixels in computer graphics, emphasizing how processing algorithms manipulate pixels to create shapes and images on the screen, ultimately simplifying the task of drawing lines and shapes for users.', 'duration': 90.905, 'highlights': ['Processing algorithms manipulate pixels to create the illusion of lines and shapes on the screen. The processing algorithm fills in all the pixels between two points to create the illusion of lines on the screen.', 'Functions in computer graphics simplify the task of drawing shapes by determining which pixels to set and which colors to use. Functions in computer graphics handle the complexity of setting pixels and choosing colors when drawing shapes, simplifying the process for users.', 'The video emphasizes the role of algorithms in generating lines and shapes on the screen, highlighting the practical need for such functionality in computer graphics. The video emphasizes the practical necessity of algorithms in creating lines and shapes on the screen, addressing the common need for drawing shapes in computer graphics.']}], 'duration': 90.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE6015.jpg', 'highlights': ['Functions in computer graphics simplify drawing shapes by determining pixels and colors.', 'Processing algorithms manipulate pixels to create the illusion of lines and shapes on the screen.', 'The video emphasizes the practical necessity of algorithms in creating lines and shapes on the screen.']}, {'end': 199.261, 'segs': [{'end': 156.273, 'src': 'embed', 'start': 119.955, 'weight': 0, 'content': [{'end': 125.936, 'text': "But if there is something you want to do to an image that isn't available as part of the tools of Photoshop,", 'start': 119.955, 'duration': 5.981}, {'end': 128.497, 'text': 'you need to invent your own image processing algorithm.', 'start': 125.936, 'duration': 2.561}, {'end': 137.619, 'text': 'The way to do that would be by reading the pixels and setting the pixels of an image one by one at a time with your own algorithm.', 'start': 128.797, 'duration': 8.822}, {'end': 143.543, 'text': 'with your own piece of software, and this is what i want to examine how to do in this video and the next one and the next one,', 'start': 137.719, 'duration': 5.824}, {'end': 147.266, 'text': "and i don't know if there's another one after that there's a few videos where i want to look at what.", 'start': 143.543, 'duration': 3.723}, {'end': 153.17, 'text': 'what happens when you can, you know, actually just individually set every pixel on the screen?', 'start': 147.266, 'duration': 5.904}, {'end': 154.231, 'text': 'what? what?', 'start': 153.17, 'duration': 1.061}, {'end': 156.273, 'text': "there's nothing you could draw in theory.", 'start': 154.231, 'duration': 2.042}], 'summary': 'Creating custom image processing algorithms by setting pixels individually in photoshop can be examined in a series of videos.', 'duration': 36.318, 'max_score': 119.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE119955.jpg'}, {'end': 214.51, 'src': 'embed', 'start': 182.911, 'weight': 2, 'content': [{'end': 184.072, 'text': 'Now, these functions are useful.', 'start': 182.911, 'duration': 1.161}, {'end': 190.136, 'text': "And maybe actually let's demonstrate set really quickly, although in the end, what we're going to see is these aren't very efficient.", 'start': 184.112, 'duration': 6.024}, {'end': 196.279, 'text': 'And when we want to actually do something to all of the pixels, then we want to look at the pixel array itself.', 'start': 190.536, 'duration': 5.743}, {'end': 199.261, 'text': 'These are kind of helper functions for just the moment.', 'start': 196.299, 'duration': 2.962}, {'end': 203.624, 'text': "Here's a scenario where you, and I'll give this to you as an exercise, where you might use get.", 'start': 199.781, 'duration': 3.843}, {'end': 207.886, 'text': "This is kind of off on a little tangent here, but it's worth it for a second.", 'start': 203.644, 'duration': 4.242}, {'end': 214.51, 'text': "Let's say you are working on a program where you have a map of the United States.", 'start': 208.707, 'duration': 5.803}], 'summary': "Helper functions for pixel manipulation, with mention of efficiency concerns and a scenario for using 'get'.", 'duration': 31.599, 'max_score': 182.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE182911.jpg'}], 'start': 97.2, 'title': 'Image processing in photoshop and custom algorithms', 'summary': 'Explores image processing, discusses limitations of photoshop tools, and the need for custom algorithms. it delves into individual pixel manipulation and optimization using functions such as get and set before optimizing with pixel array.', 'chapters': [{'end': 199.261, 'start': 97.2, 'title': 'Image processing in photoshop and custom algorithms', 'summary': 'Explores the concept of image processing, including the limitations of photoshop tools and the need to develop custom image processing algorithms to individually manipulate pixels in an image, using functions such as get and set before optimizing with pixel array.', 'duration': 102.061, 'highlights': ['The limitations of Photoshop tools for image processing, leading to the need for custom image processing algorithms, are discussed.', 'The concept of individually setting every pixel on the screen and the potential for drawing anything in theory, given access to every single pixel, are explored.', 'The functions get and set in image processing are explained, with a demonstration of their usage, highlighting their limitations in efficiency when processing all pixels.']}], 'duration': 102.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE97200.jpg', 'highlights': ['The limitations of Photoshop tools for image processing, leading to the need for custom image processing algorithms, are discussed.', 'The concept of individually setting every pixel on the screen and the potential for drawing anything in theory, given access to every single pixel, are explored.', 'The functions get and set in image processing are explained, with a demonstration of their usage, highlighting their limitations in efficiency when processing all pixels.']}, {'end': 354.86, 'segs': [{'end': 270.087, 'src': 'embed', 'start': 239.271, 'weight': 1, 'content': [{'end': 243.756, 'text': 'if you just looked at the pixel underneath the mouse coordinates to see what color that was?', 'start': 239.271, 'duration': 4.485}, {'end': 246.56, 'text': 'you could then know which state the user clicked on.', 'start': 244.176, 'duration': 2.384}, {'end': 252.929, 'text': "So anyway, this is a kind of cockamamie scenario that we're not looking at right now, but it would be a great topic for a video.", 'start': 246.58, 'duration': 6.349}, {'end': 256.894, 'text': 'But this is why you might want to just retrieve a color of a single pixel.', 'start': 252.949, 'duration': 3.945}, {'end': 260.959, 'text': "Let's go back and let's look at set for a second.", 'start': 258.797, 'duration': 2.162}, {'end': 270.087, 'text': "So if I come over here and I have a processing sketch already kind of going here, here's a blank screen.", 'start': 261.358, 'duration': 8.729}], 'summary': "Suggests retrieving color of a single pixel to determine user's click on a state for a processing sketch.", 'duration': 30.816, 'max_score': 239.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE239271.jpg'}, {'end': 337.851, 'src': 'embed', 'start': 294.317, 'weight': 0, 'content': [{'end': 297.52, 'text': 'So you can see right there, that little pixel is red.', 'start': 294.317, 'duration': 3.203}, {'end': 300.002, 'text': "We've set that one individual pixel red.", 'start': 297.54, 'duration': 2.462}, {'end': 306.026, 'text': "So there's no reason why I couldn't do something like, I don't know, 4 into x equals 0.", 'start': 300.402, 'duration': 5.624}, {'end': 306.927, 'text': 'x is less than width.', 'start': 306.026, 'duration': 0.901}, {'end': 308.929, 'text': 'x plus plus.', 'start': 307.368, 'duration': 1.561}, {'end': 312.743, 'text': 'Set x comma 200 to red.', 'start': 310.22, 'duration': 2.523}, {'end': 316.506, 'text': 'And look, I now have a line of all those pixels going red across the screen.', 'start': 312.763, 'duration': 3.743}, {'end': 324.194, 'text': "So we can see how there's a function in processing set which says for this particular x, for this particular y,", 'start': 316.787, 'duration': 7.407}, {'end': 326.256, 'text': 'stick this particular color in that location.', 'start': 324.194, 'duration': 2.062}, {'end': 327.798, 'text': 'And this will actually work.', 'start': 326.797, 'duration': 1.001}, {'end': 330.38, 'text': 'And we could start to build this example out more and more.', 'start': 328.098, 'duration': 2.282}, {'end': 337.851, 'text': "There's a detail about set, which I will explain in a moment.", 'start': 333.128, 'duration': 4.723}], 'summary': 'Using the set function in processing to set individual pixels to red and create a line of red pixels across the screen.', 'duration': 43.534, 'max_score': 294.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE294317.jpg'}], 'start': 199.781, 'title': 'Pixel manipulation in processing', 'summary': 'Explains the use of get and set functions in processing, demonstrating how to retrieve and manipulate individual pixels in an image, with an example of setting a specific pixel to a color and creating a pattern of colored pixels.', 'chapters': [{'end': 354.86, 'start': 199.781, 'title': 'Pixel manipulation in processing', 'summary': 'Explains the use of get and set functions in processing, demonstrating how to retrieve and manipulate individual pixels in an image, with an example of setting a specific pixel to a color and creating a pattern of colored pixels.', 'duration': 155.079, 'highlights': ['The chapter explains the use of get and set functions in Processing. The focus of the chapter is on demonstrating the use of get and set functions in Processing for pixel manipulation.', 'Demonstrates how to retrieve and manipulate individual pixels in an image. The chapter gives an example of setting a specific pixel to a color and creating a pattern of colored pixels, illustrating the manipulation of individual pixels in an image.', 'Example of setting a specific pixel to a color and creating a pattern of colored pixels. An example is provided where a specific pixel is set to a color, and a pattern of colored pixels is created, showcasing the practical application of pixel manipulation in Processing.']}], 'duration': 155.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE199781.jpg', 'highlights': ['The chapter explains the use of get and set functions in Processing for pixel manipulation.', 'Demonstrates how to retrieve and manipulate individual pixels in an image.', 'Example of setting a specific pixel to a color and creating a pattern of colored pixels.']}, {'end': 503.574, 'segs': [{'end': 503.574, 'src': 'embed', 'start': 354.86, 'weight': 0, 'content': [{'end': 363.324, 'text': "not really so secretly, but processing is keeping track of, for you, all of the pixels in your window or, as we're going to see in a moment,", 'start': 354.86, 'duration': 8.464}, {'end': 365.945, 'text': 'all of the pixels in a p-image.', 'start': 363.324, 'duration': 2.621}, {'end': 367.725, 'text': "it's keeping track of it in a data structure.", 'start': 365.945, 'duration': 1.78}, {'end': 369.546, 'text': 'That data structure is an array.', 'start': 368.025, 'duration': 1.521}, {'end': 375.868, 'text': 'Processing is built-in variables.', 'start': 374.487, 'duration': 1.381}, {'end': 379.769, 'text': 'A built-in variable that you are probably quite familiar with is mouse x.', 'start': 375.968, 'duration': 3.801}, {'end': 382.65, 'text': 'Whenever I say mouse x, I get the x-coordinate of the mouse.', 'start': 379.769, 'duration': 2.881}, {'end': 383.81, 'text': "I don't have to declare it.", 'start': 382.97, 'duration': 0.84}, {'end': 384.611, 'text': "It's just there.", 'start': 383.83, 'duration': 0.781}, {'end': 385.391, 'text': "It's a variable.", 'start': 384.831, 'duration': 0.56}, {'end': 386.051, 'text': 'I get it for free.', 'start': 385.471, 'duration': 0.58}, {'end': 389.072, 'text': "There's another variable you get for free, pixels.", 'start': 386.231, 'duration': 2.841}, {'end': 396.894, 'text': 'Whenever I say pixels, that variable holds all of the pixels, all of the colors on the screen.', 'start': 390.691, 'duration': 6.203}, {'end': 402.558, 'text': 'But what is this data structure? I mean, the window itself you could think of as a grid.', 'start': 396.914, 'duration': 5.644}, {'end': 409.281, 'text': 'If we were zoomed way in, every single pixel is a square, rectangle.', 'start': 403.638, 'duration': 5.643}, {'end': 410.062, 'text': "I don't know.", 'start': 409.301, 'duration': 0.761}, {'end': 410.722, 'text': 'You decide.', 'start': 410.102, 'duration': 0.62}, {'end': 414.144, 'text': 'And each one of them has a number.', 'start': 412.043, 'duration': 2.101}, {'end': 422.715, 'text': '0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, et cetera, et cetera, et cetera.', 'start': 415.372, 'duration': 7.343}, {'end': 424.615, 'text': 'Each one of these is in an array.', 'start': 423.135, 'duration': 1.48}, {'end': 431.558, 'text': 'The pixels are actually an array of integers, or you could think of them as an array of colors.', 'start': 425.416, 'duration': 6.142}, {'end': 437.54, 'text': 'The color gate type is really just an integer, the integer that has the red, green, and blue component.', 'start': 432.498, 'duration': 5.042}, {'end': 444.402, 'text': 'This pixel array is one long array of pixels.', 'start': 439.24, 'duration': 5.162}, {'end': 460.232, 'text': 'So if I wanted to set pixel number 9, I could say pixels index 9 equals color 25500.', 'start': 445.663, 'duration': 14.569}, {'end': 463.194, 'text': 'This is just like the set function.', 'start': 460.232, 'duration': 2.962}, {'end': 471.399, 'text': "only I'm accessing the array and a particular index in the array, which is a particular pixel number.", 'start': 463.194, 'duration': 8.205}, {'end': 482.099, 'text': "Oh, I'm here, I'm here, I'm here.", 'start': 481.058, 'duration': 1.041}, {'end': 489.843, 'text': "Okay, so let's comment this out, and let's say, oh, right, there's some pixel, right? Pixels index 9 equals color 255, 0, 0.", 'start': 482.199, 'duration': 7.644}, {'end': 493.987, 'text': "This should work, right? There's no reason why this is going to fail.", 'start': 489.844, 'duration': 4.143}, {'end': 496.429, 'text': "Let's run this, and look, I got an error.", 'start': 494.267, 'duration': 2.162}, {'end': 500.031, 'text': 'What error did I get? Null pointer exception.', 'start': 496.649, 'duration': 3.382}, {'end': 501.252, 'text': 'Null pointer exception.', 'start': 500.131, 'duration': 1.121}, {'end': 502.513, 'text': 'The pixels were null.', 'start': 501.312, 'duration': 1.201}, {'end': 503.574, 'text': 'There are no pixels.', 'start': 502.573, 'duration': 1.001}], 'summary': 'Processing keeps track of pixels in data structure, enabling access and manipulation for visual programming.', 'duration': 148.714, 'max_score': 354.86, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE354860.jpg'}], 'start': 354.86, 'title': 'Processing pixels and data structures', 'summary': 'Explains how processing keeps track of pixels in a data structure, particularly an array, and highlights the use of built-in variables like mouse x and pixels, along with addressing pixels using array indices and colors.', 'chapters': [{'end': 503.574, 'start': 354.86, 'title': 'Processing pixels and data structures', 'summary': 'Explains how processing keeps track of pixels in a data structure, particularly an array, and highlights the built-in variables like mouse x and pixels, along with addressing pixels using array indices and colors.', 'duration': 148.714, 'highlights': ['Processing keeps track of all the pixels in a window or an image using a data structure, specifically an array.', 'Built-in variables like mouse x and pixels allow access to the x-coordinate of the mouse and all the colors on the screen without declaration.', 'The pixels are represented as an array of integers or colors, and each pixel is assigned a specific index in the array.', 'Addressing pixels involves accessing the array at a particular index and setting it to a specific color, similar to the set function.', 'The chapter also addresses common errors like null pointer exceptions when attempting to manipulate pixels without initialization.']}], 'duration': 148.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE354860.jpg', 'highlights': ['Processing uses a data structure, specifically an array, to keep track of all pixels in a window or image.', "Built-in variables like mouse x and pixels provide access to the mouse's x-coordinate and all screen colors without declaration.", 'Pixels are represented as an array of integers or colors, with each pixel assigned a specific index in the array.', 'Addressing pixels involves accessing the array at a particular index and setting it to a specific color, similar to the set function.', 'The chapter addresses common errors like null pointer exceptions when attempting to manipulate pixels without initialization.']}, {'end': 646.919, 'segs': [{'end': 554.535, 'src': 'embed', 'start': 522.659, 'weight': 2, 'content': [{'end': 525.841, 'text': "It's going to load those pixels into memory and give you access to them.", 'start': 522.659, 'duration': 3.182}, {'end': 529.624, 'text': 'And the way that we do that is by saying load pixels.', 'start': 526.182, 'duration': 3.442}, {'end': 534.748, 'text': 'So any time we do an operation with pixels, we need to first call loadPixels.', 'start': 529.965, 'duration': 4.783}, {'end': 538.769, 'text': "By the way, right now I'm speaking about pixels in this sort of general way.", 'start': 535.288, 'duration': 3.481}, {'end': 548.453, 'text': "Pixels being the pixels of the display window, but soon we're going to start seeing things like image.pixels or image.loadPixels.", 'start': 539.329, 'duration': 9.124}, {'end': 554.535, 'text': "So, right now we're talking in generic terms about manipulating the pixels of the display window, but later, as we're going to see,", 'start': 548.693, 'duration': 5.842}], 'summary': 'To manipulate pixels, call loadpixels to access them.', 'duration': 31.876, 'max_score': 522.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE522659.jpg'}, {'end': 632.337, 'src': 'embed', 'start': 577.827, 'weight': 0, 'content': [{'end': 580.749, 'text': 'the pixels, please update your display accordingly.', 'start': 577.827, 'duration': 2.922}, {'end': 583.13, 'text': 'And the way you do that is with updatePixels.', 'start': 581.149, 'duration': 1.981}, {'end': 590.374, 'text': 'So now we can see that I can look into that pixel array, specify a particular pixel, give it a certain color, and call updatePixels.', 'start': 583.43, 'duration': 6.944}, {'end': 594.697, 'text': "And now, I'm not going to pause.", 'start': 592.235, 'duration': 2.462}, {'end': 595.798, 'text': 'Oh, there it is.', 'start': 594.717, 'duration': 1.081}, {'end': 596.178, 'text': 'There it is.', 'start': 595.818, 'duration': 0.36}, {'end': 597.679, 'text': "There's that red pixel.", 'start': 596.518, 'duration': 1.161}, {'end': 600.4, 'text': 'Pixel number nine right up there is red.', 'start': 597.899, 'duration': 2.501}, {'end': 602.922, 'text': 'Beautiful We have now set a pixel in the window.', 'start': 600.5, 'duration': 2.422}, {'end': 610.751, 'text': 'By the way, this should This should give you an idea, right? Well, a pixel is an array.', 'start': 602.982, 'duration': 7.769}, {'end': 614.272, 'text': 'It must have a length.', 'start': 612.191, 'duration': 2.081}, {'end': 629.036, 'text': "And why couldn't I write a loop which says, do something to every single pixel in the window? Now I have a fully read window.", 'start': 614.652, 'duration': 14.384}, {'end': 632.337, 'text': 'We just wrote the algorithm for the background function, essentially.', 'start': 629.056, 'duration': 3.281}], 'summary': 'Demonstration of accessing and modifying pixels in a window using updatepixels and array manipulation.', 'duration': 54.51, 'max_score': 577.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE577827.jpg'}], 'start': 504.564, 'title': 'Working with pixels', 'summary': 'Explains the process of working with pixels in a display window, emphasizing the importance of calling loadpixels and updatepixels, and demonstrates setting a specific pixel color and iterating through all pixels to achieve a fully red window.', 'chapters': [{'end': 646.919, 'start': 504.564, 'title': 'Working with pixels in processing', 'summary': 'Explains the process of working with pixels in a display window, highlighting the importance of calling loadpixels before any pixel operation, followed by updatepixels to reflect the changes, and demonstrates setting a specific pixel color and iterating through all pixels to achieve a fully red window.', 'duration': 142.355, 'highlights': ["The importance of calling loadPixels before any pixel operation It's necessary to call loadPixels before any pixel operation to load the pixels into memory and gain access to them.", 'The process of using updatePixels to reflect changes in the display window After manipulating the pixels, calling updatePixels updates the display window to reflect the changes made to the pixel array.', 'Demonstration of setting a specific pixel color and iterating through all pixels The chapter demonstrates the ability to specify a particular pixel, assign it a certain color, and then iterate through all pixels to achieve a fully red window, showcasing the power of pixel manipulation.']}], 'duration': 142.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE504564.jpg', 'highlights': ['Demonstration of setting a specific pixel color and iterating through all pixels to achieve a fully red window, showcasing the power of pixel manipulation.', 'The process of using updatePixels to reflect changes in the display window after manipulating the pixels.', 'The importance of calling loadPixels before any pixel operation to load the pixels into memory and gain access to them.']}, {'end': 1284.217, 'segs': [{'end': 713.216, 'src': 'heatmap', 'start': 647.159, 'weight': 3, 'content': [{'end': 652.761, 'text': "And if you think about this, if I'm setting every pixel individually, there's no reason why every pixel needs to have the same color.", 'start': 647.159, 'duration': 5.602}, {'end': 661.601, 'text': 'Random 255, random 5200.', 'start': 652.781, 'duration': 8.82}, {'end': 663.783, 'text': "So now I'm going to set each pixel with some random colors.", 'start': 661.601, 'duration': 2.182}, {'end': 668.808, 'text': 'So we can see I have this kind of purpley, bluey, random set of colors.', 'start': 663.803, 'duration': 5.005}, {'end': 675.694, 'text': 'So this might actually be your first project here, which is our first exercise to think about.', 'start': 669.629, 'duration': 6.065}, {'end': 680.118, 'text': "This isn't the most, and I want to take this a few steps further.", 'start': 676.635, 'duration': 3.483}, {'end': 680.999, 'text': 'Actually, you know what?', 'start': 680.138, 'duration': 0.861}, {'end': 686.295, 'text': 'But what might be a different way of thinking about this?', 'start': 683.572, 'duration': 2.723}, {'end': 689.677, 'text': "You know, the first thing I could come up with is, just like I don't know, make some random colors.", 'start': 686.335, 'duration': 3.342}, {'end': 696.522, 'text': 'But what if you wanted to have the colors from go get like progressively more and more blue as you went across the screen,', 'start': 689.997, 'duration': 6.525}, {'end': 700.585, 'text': 'or all the colors closer to the edge more red?', 'start': 696.522, 'duration': 4.063}, {'end': 702.327, 'text': 'There are lots and lots of possibilities here.', 'start': 700.745, 'duration': 1.582}, {'end': 706.53, 'text': "The truth of the matter is and actually this is why this video can't end here, it has to keep going,", 'start': 702.607, 'duration': 3.923}, {'end': 713.216, 'text': "even though we're about 12 minutes in is that we're missing a really key, key, important piece of information.", 'start': 706.53, 'duration': 6.686}], 'summary': 'Setting pixels with random colors, exploring progressive color changes and possibilities for further development', 'duration': 49.363, 'max_score': 647.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE647159.jpg'}, {'end': 781.925, 'src': 'embed', 'start': 758.721, 'weight': 2, 'content': [{'end': 766.884, 'text': 'The pixels are in this one-dimensional array, numerically indexed 0, 1, 2, 3, 4, blah, blah, blah, blah, blah, blah.', 'start': 758.721, 'duration': 8.163}, {'end': 772.687, 'text': 'This list of pixels is arranged on the screen in a grid where the pixels count like this.', 'start': 767.045, 'duration': 5.642}, {'end': 781.925, 'text': '0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13,, 14, 15, 16, 17,, 18, 19,, 20, 21,.', 'start': 772.707, 'duration': 9.218}], 'summary': 'One-dimensional array of pixels arranged in a grid on the screen.', 'duration': 23.204, 'max_score': 758.721, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE758721.jpg'}, {'end': 1174.207, 'src': 'heatmap', 'start': 1081.556, 'weight': 0.749, 'content': [{'end': 1092.905, 'text': "So if I were to say this and I'm going to take loadPixels and put it down here, and updatePixels and put it down here,", 'start': 1081.556, 'duration': 11.349}, {'end': 1097.468, 'text': "And then I'm going to comment out this old way of doing it and save it?", 'start': 1093.925, 'duration': 3.543}, {'end': 1102.732, 'text': 'Whoops Pixels 2.', 'start': 1098.068, 'duration': 4.664}, {'end': 1103.713, 'text': 'And save it in here.', 'start': 1102.732, 'duration': 0.981}, {'end': 1106.355, 'text': "I'll try to figure out where to put these so that you guys can find them.", 'start': 1103.773, 'duration': 2.582}, {'end': 1108.156, 'text': 'Now I have an entire green window.', 'start': 1106.615, 'duration': 1.541}, {'end': 1114.381, 'text': "Again, I've rewritten the background function, but now I have access to every single pixel's xy location.", 'start': 1108.176, 'duration': 6.205}, {'end': 1119.906, 'text': 'This is very powerful, because what if I said y divided by 2,, for example?', 'start': 1114.741, 'duration': 5.165}, {'end': 1125.767, 'text': 'Now you can see the pixels get more and more green as they go down to the bottom.', 'start': 1120.726, 'duration': 5.041}, {'end': 1129.488, 'text': 'And what if I set it in the blue like x, divided by 2?', 'start': 1126.067, 'duration': 3.421}, {'end': 1136.53, 'text': "Now we can start to see I'm creating these gradients of color because I can arrange the colors I'm picking according to their xy values.", 'start': 1129.488, 'duration': 7.042}, {'end': 1139.691, 'text': "Let's go ahead and do that distance idea.", 'start': 1137.25, 'duration': 2.441}, {'end': 1148.713, 'text': "Let's say I want to get the distance between that particular xy coordinate and the center of the window.", 'start': 1142.471, 'duration': 6.242}, {'end': 1154.824, 'text': 'The center of the window being the width divided by 2 and the height divided by 2.', 'start': 1151.203, 'duration': 3.621}, {'end': 1159.384, 'text': 'What if I set the color equal to that distance? Now look what I have.', 'start': 1154.824, 'duration': 4.56}, {'end': 1162.525, 'text': 'When that distance is small, I have that black color.', 'start': 1159.744, 'duration': 2.781}, {'end': 1164.805, 'text': 'When that distance is big, I have a white color.', 'start': 1162.545, 'duration': 2.26}, {'end': 1166.606, 'text': 'What if I did something random?', 'start': 1165.365, 'duration': 1.241}, {'end': 1174.207, 'text': 'What if I put this in the draw loop and instead of having it just be the center, I set the pixels according to their distance from the actual mouse?', 'start': 1166.786, 'duration': 7.421}], 'summary': 'The transcript discusses manipulating pixels to create gradients and distance-based coloring in a visual display.', 'duration': 92.651, 'max_score': 1081.556, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE1081556.jpg'}, {'end': 1202.183, 'src': 'embed', 'start': 1176.827, 'weight': 0, 'content': [{'end': 1185.131, 'text': 'This core algorithm of looking through every x, every Y and setting every pixel according to that X and Y.', 'start': 1176.827, 'duration': 8.304}, {'end': 1189.614, 'text': 'this is the basis behind every single image processing algorithm.', 'start': 1185.131, 'duration': 4.483}, {'end': 1194.017, 'text': "Image processing, computer vision, all the things we're going to look, all of the code is always going to have this in it.", 'start': 1189.854, 'duration': 4.163}, {'end': 1196.399, 'text': 'So this is worth taking some time to get used to.', 'start': 1194.257, 'duration': 2.142}, {'end': 1202.183, 'text': 'I would say take this, download it, copy it, whatever makes it help, and then just try doing it a lot of different ways.', 'start': 1196.719, 'duration': 5.464}], 'summary': 'Algorithm sets every pixel based on x and y, fundamental to image processing and computer vision.', 'duration': 25.356, 'max_score': 1176.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE1176827.jpg'}], 'start': 647.159, 'title': 'Pixel color setting and image processing algorithms', 'summary': 'Covers setting random colors for pixels and understanding the essential algorithm of mapping pixels from a 2d grid to a 1d array. it includes examples and explanations of using different colors for pixels and the application of the mapping algorithm in image processing and computer vision.', 'chapters': [{'end': 696.522, 'start': 647.159, 'title': 'Setting random colors for pixels', 'summary': 'Discusses setting random colors for pixels, with examples of using different colors for each pixel and the idea of progressively changing colors across the screen.', 'duration': 49.363, 'highlights': ['The chapter discusses setting random colors for pixels, with examples of using different colors for each pixel and the idea of progressively changing colors across the screen.', 'The speaker mentions setting each pixel with some random colors, demonstrating a random set of colors, possibly serving as a first project or exercise.', 'The speaker suggests the idea of progressively changing colors across the screen, indicating a desire to take the concept a few steps further.']}, {'end': 1284.217, 'start': 696.522, 'title': 'Understanding image processing algorithms', 'summary': 'Discusses the crucial algorithm of mapping pixels from a 2d grid to a 1d array, using the formula x + y times width, with examples and explanations of its application in image processing and computer vision.', 'duration': 587.695, 'highlights': ['The pixels are in a one-dimensional array indexed numerically, but their two-dimensional location can be determined using the x and y coordinates, crucial for algorithms in image processing and computer vision. This highlights the key concept of mapping pixels from a 2D grid to a 1D array using the formula x + y times width, and emphasizes its importance in image processing and computer vision.', 'The algorithm of looping through every x and y value covers every single pixel on the screen, forming the core of image processing algorithms. This emphasizes the significance of looping through every x and y value as the core algorithm for image processing, highlighting its importance in manipulating and processing pixels.', 'The ability to manipulate pixels based on their x and y values allows for creating color gradients and applying various functions, serving as the basis for experimenting with different image processing techniques. This highlights how the x and y values of pixels can be manipulated to create color gradients and apply different functions, emphasizing its role as the basis for experimenting with image processing techniques.']}], 'duration': 637.058, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EmtU0eloTlE/pics/EmtU0eloTlE647159.jpg', 'highlights': ['The ability to manipulate pixels based on their x and y values allows for creating color gradients and applying various functions, serving as the basis for experimenting with different image processing techniques.', 'The algorithm of looping through every x and y value covers every single pixel on the screen, forming the core of image processing algorithms.', 'The pixels are in a one-dimensional array indexed numerically, but their two-dimensional location can be determined using the x and y coordinates, crucial for algorithms in image processing and computer vision.', 'The chapter discusses setting random colors for pixels, with examples of using different colors for each pixel and the idea of progressively changing colors across the screen.', 'The speaker suggests the idea of progressively changing colors across the screen, indicating a desire to take the concept a few steps further.', 'The speaker mentions setting each pixel with some random colors, demonstrating a random set of colors, possibly serving as a first project or exercise.']}], 'highlights': ['The video emphasizes the practical necessity of algorithms in creating lines and shapes on the screen.', 'The concept of individually setting every pixel on the screen and the potential for drawing anything in theory, given access to every single pixel, are explored.', 'The limitations of Photoshop tools for image processing, leading to the need for custom image processing algorithms, are discussed.', 'Demonstration of setting a specific pixel color and iterating through all pixels to achieve a fully red window, showcasing the power of pixel manipulation.', 'The ability to manipulate pixels based on their x and y values allows for creating color gradients and applying various functions, serving as the basis for experimenting with different image processing techniques.']}