title
Coding Challenge #90: Floyd-Steinberg Dithering

description
In this coding challenge, I attempt to implement the Floyd-Steinberg Dithering algorithm and create a "image stippling" effect on an image (kitten, of course) using Processing. Code: https://thecodingtrain.com/challenges/90-dithering 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/-YkMaf9Ea 🎥 Previous video: https://youtu.be/G1EgjgMo48U?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Next video: https://youtu.be/JrRO3OnWs5s?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 📓 DHALF.txt: https://github.com/SixLabors/ImageSharp/blob/master/src/ImageSharp/Processing/Processors/Dithering/DHALF.TXT 📚 Processing Tutorial on 2D Arrays: https://processing.org/tutorials/2darray/ 🔗 Dither on Wikipedia: https://en.wikipedia.org/wiki/Dither 🔗 Floyd–Steinberg dithering on Wikipedia: https://en.wikipedia.org/wiki/Floyd%E2%80%93Steinberg_dithering Videos: 🚂 My Tutorial on Pixels in Processing: https://youtu.be/EmtU0eloTlE 🚂 My Video on 2D Arrays: https://www.youtube.com/watch?v=OTNpiLUSiB4 🔴 Coding Train Live 114: https://youtu.be/iCxqLVm2H3w?t=8474s Related Coding Challenges: 🚂 #50 Circle Packing: https://youtu.be/QHEQuoIKgNE 🚂 #85 The Game of Life: https://youtu.be/FWSR_7kZuYg 🚂 #107 Sandpiles: https://youtu.be/diGjw5tghYU Timestamps: 0:00 Introducing today's topic 1:20 Let's start coding! 2:44 An image is a grid of pixels 3:25 Quantizing an image to reduce the number of possible colors 6:24 Pull the red, green, and blue values of the pixel 7:11 Quantize the r, g, b values 8:21 Add loadPixels() and updatePixels() 9:11 Filter the image to make it greyscale 11:01 Add more color possibilities 13:01 Quantization of the error 16:01 Funnel the error 17:10 Write an index function 21:08 Update r, g, b values 24:13 Deal with the edges 26:55 Conclusion and suggstions for variations Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide 🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://discord.gg/hPuGy2g 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 🖋️ Twitter: https://twitter.com/thecodingtrain 📸 Instagram: https://www.instagram.com/the.coding.train/ 🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 p5.js Web Editor: https://editor.p5js.org/ 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #dithering #stippling #floydsteinbergdithering #processing

detail
{'title': 'Coding Challenge #90: Floyd-Steinberg Dithering', 'heatmap': [{'end': 1715.394, 'start': 1695.729, 'weight': 1}], 'summary': 'Explores implementing floyd steinberg dithering in processing, image quantization to 8 colors for smaller file sizes, image pixel manipulation, color error calculation, and color transformation algorithm, providing insights into dithering techniques and potential applications within a programming context.', 'chapters': [{'end': 77.871, 'segs': [{'end': 60.835, 'src': 'embed', 'start': 0.35, 'weight': 0, 'content': [{'end': 2.132, 'text': "Hello Welcome to today's coding challenge.", 'start': 0.35, 'duration': 1.782}, {'end': 6.56, 'text': "Today's coding challenge is to implement Floyd Steinberg dithering.", 'start': 2.433, 'duration': 4.127}, {'end': 8.042, 'text': 'Dithering, dithering, dithering.', 'start': 6.7, 'duration': 1.342}, {'end': 13.711, 'text': "And I'm going to do this dithering, which is the thing that I actually spend most of my day just dithering about.", 'start': 8.383, 'duration': 5.328}, {'end': 20.483, 'text': "I'm going to do this dithering in processing, which is a Java-based programming environment.", 'start': 15.396, 'duration': 5.087}, {'end': 21.504, 'text': 'Works great for graphics.', 'start': 20.583, 'duration': 0.921}, {'end': 22.265, 'text': 'I can load images.', 'start': 21.544, 'duration': 0.721}, {'end': 24.127, 'text': 'I can manipulate pixels, which is what I need to do.', 'start': 22.345, 'duration': 1.782}, {'end': 29.374, 'text': "Now. the reason why I'm doing this is because I'm interested in this overall topic of image stippling,", 'start': 24.187, 'duration': 5.187}, {'end': 32.658, 'text': 'which is a way of making an image basically out of dots.', 'start': 29.374, 'duration': 3.284}, {'end': 36.399, 'text': "And just as one reference for this, I'm going to show you the work of Robert Hodgin.", 'start': 33.158, 'duration': 3.241}, {'end': 44.002, 'text': 'Did some interesting attempts to do image stippling using like particle systems moving around and forces between the particles.', 'start': 37.54, 'duration': 6.462}, {'end': 46.504, 'text': "And I'd love to think about that as a follow up.", 'start': 44.343, 'duration': 2.161}, {'end': 54.83, 'text': "But I'm going to, in this video, look at a particular dithering algorithm, a way of quantizing an image and looking at errors,", 'start': 46.844, 'duration': 7.986}, {'end': 60.835, 'text': "and I'll kind of get to that as I go through it to get this type of look for an image.", 'start': 54.83, 'duration': 6.005}], 'summary': 'Implementing floyd steinberg dithering in java-based environment for image stippling.', 'duration': 60.485, 'max_score': 0.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI350.jpg'}], 'start': 0.35, 'title': 'Implementing floyd steinberg dithering in processing', 'summary': "Focuses on implementing floyd steinberg dithering in processing, a java-based graphics environment, as a precursor to image stippling with dots and potential exploration of particle systems, referencing robert hodgin's work.", 'chapters': [{'end': 77.871, 'start': 0.35, 'title': 'Implementing floyd steinberg dithering in processing', 'summary': "Discusses implementing floyd steinberg dithering in processing, a java-based environment for graphics, as a step towards image stippling using dots and potential future exploration of particle systems, with reference to robert hodgin's work.", 'duration': 77.521, 'highlights': ["The chapter explores implementing Floyd Steinberg dithering in Processing, a Java-based environment for graphics, as an initial step towards image stippling using dots and potential future exploration of particle systems, with reference to Robert Hodgin's work.", 'The speaker plans to use the dithering algorithm to quantize an image and analyze errors, potentially leading to a specific image look, which could serve as a foundation for considering the dots as particles that can move, experience physics, and be utilized for another image.', 'The work of Robert Hodgin is referenced as an example of image stippling using particle systems, providing inspiration for potential follow-up explorations in the future.', 'The speaker emphasizes the interest in the overall topic of image stippling as a motivating factor for the current coding challenge, demonstrating a strong focus on the potential applications and implications of the discussed concepts.']}], 'duration': 77.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI350.jpg', 'highlights': ["The chapter explores implementing Floyd Steinberg dithering in Processing, a Java-based environment for graphics, as an initial step towards image stippling using dots and potential future exploration of particle systems, with reference to Robert Hodgin's work.", 'The speaker emphasizes the interest in the overall topic of image stippling as a motivating factor for the current coding challenge, demonstrating a strong focus on the potential applications and implications of the discussed concepts.', 'The speaker plans to use the dithering algorithm to quantize an image and analyze errors, potentially leading to a specific image look, which could serve as a foundation for considering the dots as particles that can move, experience physics, and be utilized for another image.', 'The work of Robert Hodgin is referenced as an example of image stippling using particle systems, providing inspiration for potential follow-up explorations in the future.']}, {'end': 472.987, 'segs': [{'end': 274.797, 'src': 'embed', 'start': 220.148, 'weight': 0, 'content': [{'end': 222.729, 'text': 'But what if I wanted to reduce the number of possibilities?', 'start': 220.148, 'duration': 2.581}, {'end': 227.552, 'text': 'What if there are only four reds 0, 1, 2, and 3?', 'start': 223.01, 'duration': 4.542}, {'end': 240.201, 'text': 'for greens, I take an image that has the original full colors and I reduce it to a smaller subset of colors.', 'start': 227.552, 'duration': 12.649}, {'end': 247.646, 'text': 'And this kind of process is applied to make images smaller file sizes and to do various kinds of effects.', 'start': 240.241, 'duration': 7.405}, {'end': 248.987, 'text': "So actually, let's just do that first.", 'start': 247.666, 'duration': 1.321}, {'end': 254.952, 'text': "And actually, what I'm going to do is quantize this image so that there's only two possible colors.", 'start': 249.468, 'duration': 5.484}, {'end': 263.694, 'text': "There's basically 0 red or 255 red, 0 green or 255 green, and 0 blue or 255 blue.", 'start': 255.632, 'duration': 8.062}, {'end': 268.315, 'text': "So there's really 2 times 2 times 2 possible colors, 8 possible colors.", 'start': 263.754, 'duration': 4.561}, {'end': 274.797, 'text': 'So instead of 256 to the third power colors, I want to see what does this image look like with just 8 possible colors.', 'start': 268.595, 'duration': 6.202}], 'summary': 'Reducing image colors to 8 from 256 for smaller file sizes and effects.', 'duration': 54.649, 'max_score': 220.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI220148.jpg'}, {'end': 363.35, 'src': 'embed', 'start': 318.408, 'weight': 1, 'content': [{'end': 325.271, 'text': "And based on that image's width, sorry, I lost my, what I was doing here for a second.", 'start': 318.408, 'duration': 6.863}, {'end': 327.432, 'text': 'So I need a nested loop to look at every pixel.', 'start': 325.411, 'duration': 2.021}, {'end': 333.055, 'text': 'For every x and for every y.', 'start': 329.573, 'duration': 3.482}, {'end': 339.598, 'text': 'So this is going to allow me to look at a given pixel from the kitten.', 'start': 333.055, 'duration': 6.543}, {'end': 348.202, 'text': 'The problem is the pixels are actually stored in a one-dimensional array.', 'start': 343.476, 'duration': 4.726}, {'end': 355.872, 'text': "And I want to think about the pixels as their xy positions, because I'm going to need that later.", 'start': 349.744, 'duration': 6.128}, {'end': 363.35, 'text': "Luckily for us, there's a very simple formula, x plus y times kitten dot width.", 'start': 356.826, 'duration': 6.524}], 'summary': 'Using a nested loop to examine each pixel stored in a one-dimensional array, with the formula x + y times kitten dot width.', 'duration': 44.942, 'max_score': 318.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI318408.jpg'}, {'end': 414.714, 'src': 'embed', 'start': 387.407, 'weight': 5, 'content': [{'end': 397.424, 'text': 'of the pixel, the green value of the pixel and processing has these nice helper functions that if I just pass an RGB color to the red function,', 'start': 387.407, 'duration': 10.017}, {'end': 400.168, 'text': 'I get the red value and the blue value of the pixel.', 'start': 397.424, 'duration': 2.744}, {'end': 406.386, 'text': "Now, how can I quantize the image? Basically, what I want to say, it's kind of like a threshold effect.", 'start': 401.181, 'duration': 5.205}, {'end': 414.714, 'text': "I want to say if the range of colors between 0 and 255, if I'm above 127, just make it 255.", 'start': 406.806, 'duration': 7.908}], 'summary': 'Processing quantizes image colors using threshold effect at range 0-255.', 'duration': 27.307, 'max_score': 387.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI387407.jpg'}], 'start': 77.991, 'title': 'Image quantization', 'summary': 'Explains image quantization, reducing a 512x512 pixel image to 8 colors for smaller file sizes and effects, and quantizing rgb values to 0 or 255 based on a threshold of 127 using a straightforward formula and the round function.', 'chapters': [{'end': 274.797, 'start': 77.991, 'title': 'Image quantization process', 'summary': 'Discusses the process of quantizing an image to reduce the number of colors, demonstrating with an example of reducing the original 512x512 pixel image to only 8 possible colors for smaller file sizes and various effects.', 'duration': 196.806, 'highlights': ['The process of quantizing an image involves reducing the number of possible colors, demonstrated by converting a 512x512 pixel image to only 8 possible colors - 2 for red, 2 for green, and 2 for blue.', 'Explains the concept of quantization by reducing the original full colors to a smaller subset of colors, aiming for smaller file sizes and various effects.', 'Demonstrates the concept of quantizing an image by reducing the original 512x512 pixel image to only 8 possible colors - 2 for red, 2 for green, and 2 for blue.']}, {'end': 472.987, 'start': 275.117, 'title': 'Image quantization algorithm', 'summary': 'Discusses the process of quantizing an image by iterating through its pixels and converting their rgb values to either 0 or 255 based on a threshold of 127, using a straightforward formula and the round function for quantization.', 'duration': 197.87, 'highlights': ['The algorithm involves iterating through all the pixels of the image using a nested loop for every x and y position, which is necessary due to the one-dimensional array storage of the pixels.', 'A simple formula x + y times kitten dot width is used to derive the one-dimensional location of the pixel array from its xy position, facilitating the image quantization process.', 'Processing has helper functions for extracting the red, green, and blue values of a pixel, allowing for the quantization of the image based on specific conditions, such as converting RGB values to either 0 or 255 using the round function.']}], 'duration': 394.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI77991.jpg', 'highlights': ['The process of quantizing an image involves reducing the number of possible colors, demonstrated by converting a 512x512 pixel image to only 8 possible colors - 2 for red, 2 for green, and 2 for blue.', 'The algorithm involves iterating through all the pixels of the image using a nested loop for every x and y position, which is necessary due to the one-dimensional array storage of the pixels.', 'Explains the concept of quantization by reducing the original full colors to a smaller subset of colors, aiming for smaller file sizes and various effects.', 'A simple formula x + y times kitten dot width is used to derive the one-dimensional location of the pixel array from its xy position, facilitating the image quantization process.', 'Demonstrates the concept of quantizing an image by reducing the original 512x512 pixel image to only 8 possible colors - 2 for red, 2 for green, and 2 for blue.', 'Processing has helper functions for extracting the red, green, and blue values of a pixel, allowing for the quantization of the image based on specific conditions, such as converting RGB values to either 0 or 255 using the round function.']}, {'end': 787.185, 'segs': [{'end': 523.697, 'src': 'embed', 'start': 472.987, 'weight': 0, 'content': [{'end': 480.272, 'text': 'And now what am I going to do? I want to say kitten.pixels index equals a new color with those values.', 'start': 472.987, 'duration': 7.285}, {'end': 491.422, 'text': 'So this is me just saying pull the RGB values out, quantize them to a smaller number of possibilities, make a new color and set it back to the pixels.', 'start': 481.53, 'duration': 9.892}, {'end': 502.104, 'text': "So I've forgotten something kind of important, which is that when I operate on an image in processing, before I operate on the pixels,", 'start': 494.597, 'duration': 7.507}, {'end': 503.885, 'text': 'I should say kitten.updatePixels.', 'start': 502.104, 'duration': 1.781}, {'end': 505.847, 'text': "And then when I'm done, I should say kitten.", 'start': 504.226, 'duration': 1.621}, {'end': 507.128, 'text': 'No, no, no.', 'start': 505.867, 'duration': 1.261}, {'end': 508.83, 'text': "UpdatePixels is when I'm done.", 'start': 507.388, 'duration': 1.442}, {'end': 512.212, 'text': 'And before I operate on the pixels, I need to say loadPixels.', 'start': 509.45, 'duration': 2.762}, {'end': 514.193, 'text': 'Like loadPixels is saying like, hey, hey, you.', 'start': 512.573, 'duration': 1.62}, {'end': 515.936, 'text': 'I want to work on the pixels right now.', 'start': 514.695, 'duration': 1.241}, {'end': 517.778, 'text': "UpdatePixels is saying, hey, I'm done.", 'start': 516.296, 'duration': 1.482}, {'end': 520.24, 'text': 'My image processing algorithm is eh.', 'start': 518.558, 'duration': 1.682}, {'end': 523.697, 'text': "But I'm done, I'm done.", 'start': 521.735, 'duration': 1.962}], 'summary': 'Processing image pixels in code, using loadpixels and updatepixels for operations.', 'duration': 50.71, 'max_score': 472.987, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI472987.jpg'}, {'end': 584.522, 'src': 'embed', 'start': 555.142, 'weight': 3, 'content': [{'end': 559.963, 'text': 'So I can just quickly filter that image and make it grayscale with a filter function and processing.', 'start': 555.142, 'duration': 4.821}, {'end': 560.984, 'text': 'We can run it again.', 'start': 560.263, 'duration': 0.721}, {'end': 563.785, 'text': 'You can see how this is working.', 'start': 562.804, 'duration': 0.981}, {'end': 565.085, 'text': "Now there's only two possibilities.", 'start': 563.805, 'duration': 1.28}, {'end': 566.485, 'text': "It's either white or black.", 'start': 565.405, 'duration': 1.08}, {'end': 568.786, 'text': 'And so this is identical to a thresholding effect.', 'start': 566.505, 'duration': 2.281}, {'end': 574.868, 'text': "And here, oh, whoops, let's leave that in but comment it out.", 'start': 569.926, 'duration': 4.942}, {'end': 577.538, 'text': "because we'll come back to it later.", 'start': 576.357, 'duration': 1.181}, {'end': 584.522, 'text': 'Now, interestingly enough, what if I want to have more possibilities?', 'start': 578.959, 'duration': 5.563}], 'summary': 'Image filtered to grayscale, showing only white and black, resembling thresholding effect.', 'duration': 29.38, 'max_score': 555.142, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI555142.jpg'}, {'end': 745.195, 'src': 'embed', 'start': 706.932, 'weight': 1, 'content': [{'end': 718.038, 'text': "And so now I'm going to say a new r, new g, new b.", 'start': 706.932, 'duration': 11.106}, {'end': 720.099, 'text': "So let's now run this and see what happens.", 'start': 718.038, 'duration': 2.061}, {'end': 731.65, 'text': "There You can see how now I have more color possibilities, but still I've reduced the image to a smaller number of colors.", 'start': 723.086, 'duration': 8.564}, {'end': 738.292, 'text': 'This was actually 5 times 5 times 5, so 125 possible colors, I think.', 'start': 731.91, 'duration': 6.382}, {'end': 739.873, 'text': 'Not very many colors.', 'start': 739.093, 'duration': 0.78}, {'end': 743.775, 'text': 'OK I should probably make this a variable.', 'start': 741.094, 'duration': 2.681}, {'end': 745.195, 'text': "I'll call it factor.", 'start': 744.035, 'duration': 1.16}], 'summary': 'Reduced image to 125 possible colors by using new variables.', 'duration': 38.263, 'max_score': 706.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI706932.jpg'}, {'end': 807.99, 'src': 'embed', 'start': 768.176, 'weight': 2, 'content': [{'end': 771.597, 'text': "I want to have a separate image so I could change it on the fly, but I don't need that for right now.", 'start': 768.176, 'duration': 3.421}, {'end': 774.079, 'text': "Okay, so we've done the quantizing part.", 'start': 771.818, 'duration': 2.261}, {'end': 780, 'text': 'Now, the other thing that I need to understand is the quantization error.', 'start': 775.057, 'duration': 4.943}, {'end': 782.022, 'text': "Is that the right way to say that? I'm not entirely sure.", 'start': 780.1, 'duration': 1.922}, {'end': 787.185, 'text': "But what I mean by that is, let's say the actual, let's look at a particular example.", 'start': 782.542, 'duration': 4.643}, {'end': 789.927, 'text': 'The actual color is 255 comma 100 comma 10.', 'start': 787.485, 'duration': 2.442}, {'end': 791.188, 'text': 'This is an actual color.', 'start': 789.927, 'duration': 1.261}, {'end': 794.39, 'text': 'Or if I were to reduce this color with two levels.', 'start': 791.268, 'duration': 3.122}, {'end': 807.99, 'text': 'with a factor of one, two levels, I would get 25500, right?', 'start': 801.323, 'duration': 6.667}], 'summary': 'Discussion about quantizing and quantization error in image processing.', 'duration': 39.814, 'max_score': 768.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI768176.jpg'}], 'start': 472.987, 'title': 'Image processing and quantization', 'summary': 'Covers image pixel manipulation in processing, stressing the use of loadpixels and updatepixels functions. it also explores image quantization, grayscale conversion, and color manipulation, achieving 125 possible colors with a factor of 4 and considering quantization error.', 'chapters': [{'end': 523.697, 'start': 472.987, 'title': 'Image processing in processing', 'summary': 'Discusses the process of manipulating image pixels in the programming language processing, emphasizing the importance of using the loadpixels and updatepixels functions before and after operating on the pixels, respectively.', 'duration': 50.71, 'highlights': ['The importance of using the loadPixels function before operating on image pixels in Processing, and the updatePixels function after manipulation.', 'Understanding the process of quantizing RGB values to a smaller number of possibilities before setting them back to the pixels in an image.', 'Emphasizing the need to use the loadPixels function to indicate the intention to work on the pixels, and the updatePixels function to signal the completion of image processing.']}, {'end': 787.185, 'start': 524.458, 'title': 'Image quantization and color possibilities', 'summary': 'Discusses image quantization, grayscale conversion, and manipulating color possibilities, demonstrating how to reduce an image to a smaller number of colors, achieving 125 possible colors with a factor of 4, and considering quantization error.', 'duration': 262.727, 'highlights': ['The process of reducing an image to a smaller number of colors was demonstrated, achieving 125 possible colors with a factor of 4.', 'Grayscale conversion was shown to result in only two possibilities (white or black), identical to a thresholding effect.', 'Manipulating color possibilities was discussed, demonstrating the multiplication and division process to achieve a varying number of color possibilities.', 'An explanation of the quantization error and its implications was mentioned, indicating the need to understand and address this aspect of image processing.']}], 'duration': 314.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI472987.jpg', 'highlights': ['Understanding the process of quantizing RGB values to a smaller number of possibilities before setting them back to the pixels in an image.', 'The process of reducing an image to a smaller number of colors was demonstrated, achieving 125 possible colors with a factor of 4.', 'An explanation of the quantization error and its implications was mentioned, indicating the need to understand and address this aspect of image processing.', 'Grayscale conversion was shown to result in only two possibilities (white or black), identical to a thresholding effect.', 'Emphasizing the need to use the loadPixels function to indicate the intention to work on the pixels, and the updatePixels function to signal the completion of image processing.']}, {'end': 1159.024, 'segs': [{'end': 823.032, 'src': 'embed', 'start': 787.485, 'weight': 2, 'content': [{'end': 789.927, 'text': 'The actual color is 255 comma 100 comma 10.', 'start': 787.485, 'duration': 2.442}, {'end': 791.188, 'text': 'This is an actual color.', 'start': 789.927, 'duration': 1.261}, {'end': 794.39, 'text': 'Or if I were to reduce this color with two levels.', 'start': 791.268, 'duration': 3.122}, {'end': 807.99, 'text': 'with a factor of one, two levels, I would get 25500, right?', 'start': 801.323, 'duration': 6.667}, {'end': 814.936, 'text': 'Because this would round up to 255, this would round down to zero and this would round down to zero.', 'start': 808.59, 'duration': 6.346}, {'end': 819.649, 'text': 'So the error, is the difference between these two.', 'start': 815.337, 'duration': 4.312}, {'end': 821.631, 'text': 'This minus this is 0.', 'start': 820.089, 'duration': 1.542}, {'end': 823.032, 'text': 'This minus this is 100.', 'start': 821.631, 'duration': 1.401}], 'summary': 'Describes color reduction with quantifiable data to show rounding error.', 'duration': 35.547, 'max_score': 787.485, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI787485.jpg'}, {'end': 917.264, 'src': 'embed', 'start': 852.202, 'weight': 0, 'content': [{'end': 865.152, 'text': "So I'm going to say here, error r equals r minus nu r.", 'start': 852.202, 'duration': 12.95}, {'end': 868.274, 'text': 'Error g equals g minus nu g.', 'start': 865.152, 'duration': 3.122}, {'end': 873.786, 'text': 'And error b equals b minus new b.', 'start': 869.858, 'duration': 3.928}, {'end': 874.367, 'text': 'New b.', 'start': 873.786, 'duration': 0.581}, {'end': 880.28, 'text': "OK So the reason why I need this error is let's go back to that Wikipedia page.", 'start': 874.367, 'duration': 5.913}, {'end': 888.282, 'text': 'Basically, this algorithm achieves dithering using error diffusion,', 'start': 882.298, 'duration': 5.984}, {'end': 895.247, 'text': 'meaning it pushes the residual quantization error of a pixel onto its neighboring pixels to be dealt with later.', 'start': 888.282, 'duration': 6.965}, {'end': 898.169, 'text': "So in other words, it just keeps, ah, it's so different.", 'start': 895.647, 'duration': 2.522}, {'end': 904.033, 'text': 'It keeps pushing the colors further and further apart away from each other based on the error.', 'start': 898.769, 'duration': 5.264}, {'end': 909.156, 'text': 'And so the pixel indicated with a star indicates the pixel currently being scanned.', 'start': 904.473, 'duration': 4.683}, {'end': 912.238, 'text': 'And this is the amount of error it passes to its neighbors.', 'start': 909.416, 'duration': 2.822}, {'end': 917.264, 'text': "So in this case, ooh, and what's kind of the order matters here?", 'start': 913.46, 'duration': 3.804}], 'summary': 'Algorithm achieves dithering using error diffusion, pushing residual quantization error onto neighboring pixels.', 'duration': 65.062, 'max_score': 852.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI852202.jpg'}, {'end': 1080.367, 'src': 'embed', 'start': 1052.61, 'weight': 4, 'content': [{'end': 1057.651, 'text': "So what I'm going to do is whenever I have an x, y, I could just quickly get the index and return it.", 'start': 1052.61, 'duration': 5.041}, {'end': 1060.112, 'text': 'And that will be the correct index into the pixels array.', 'start': 1057.711, 'duration': 2.401}, {'end': 1061.812, 'text': 'I could have made this two lines of code.', 'start': 1060.392, 'duration': 1.42}, {'end': 1063.493, 'text': 'But I think we can follow this.', 'start': 1062.112, 'duration': 1.381}, {'end': 1064.133, 'text': 'I could follow this.', 'start': 1063.653, 'duration': 0.48}, {'end': 1064.913, 'text': 'Hopefully, you can follow this.', 'start': 1064.153, 'duration': 0.76}, {'end': 1080.367, 'text': 'The reason why I just did that is because I need to say kitten.pixels index I am rewriting exactly this pseudocode right here.', 'start': 1066.718, 'duration': 13.649}], 'summary': 'Rewriting the pseudocode to quickly get the index and return it for x, y coordinates.', 'duration': 27.757, 'max_score': 1052.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI1052610.jpg'}], 'start': 787.485, 'title': 'Color error calculation, image dithering algorithm, and optimizing pixel indexing', 'summary': 'Covers color error calculation with examples of positive and negative errors, an image dithering algorithm using error diffusion to spread residual quantization error, and optimizing pixel indexing by creating a function and manually calculating pixel values, with one calculation contributing to nearly half of the error.', 'chapters': [{'end': 850.901, 'start': 787.485, 'title': 'Color error calculation', 'summary': 'Discusses the calculation of color error using specific color values, showcasing how the error is determined by the difference between the original and adjusted color values, with examples of both positive and negative errors.', 'duration': 63.416, 'highlights': ['The error in the color calculation is determined by the difference between the original and adjusted color values, with specific examples showing the resulting positive and negative errors.', 'Using the example of the color 255, 100, 10 and reducing it by two levels, the error is found to be 0, 100, 10, showcasing the calculation method for color error.', 'Demonstrating the calculation with a different color value of 150, the resulting error is found to be -105, providing an example of a negative error in the color calculation.']}, {'end': 1005.569, 'start': 852.202, 'title': 'Image dithering algorithm', 'summary': 'Discusses an algorithm for achieving dithering using error diffusion, pushing residual quantization error of a pixel onto its neighboring pixels, with the algorithm involving color separation and error calculation, involving the use of neighboring pixels to spread the error, and the specific order of pixel scanning from top to bottom and left to right.', 'duration': 153.367, 'highlights': ['The algorithm achieves dithering using error diffusion, pushing residual quantization error of a pixel onto its neighboring pixels to be dealt with later.', 'The algorithm involves color separation and error calculation for each pixel, specifically with error being calculated for red, green, and blue components individually.', 'The specific order of pixel scanning from top to bottom and left to right is crucial for the algorithm, as it involves pushing the error based on pixels to the right first, followed by pixels to the left and down.']}, {'end': 1159.024, 'start': 1005.889, 'title': 'Optimizing pixel indexing and error calculation', 'summary': 'Discusses optimizing pixel indexing by creating a function and manually calculating pixel values, emphasizing the importance of specific pixel calculations and their impact on error, with one calculation contributing to nearly half of the error.', 'duration': 153.135, 'highlights': ['The importance of specific pixel calculations and their impact on error, with one calculation contributing to nearly half of the error, is emphasized.', 'Optimizing pixel indexing by creating a function to quickly retrieve the correct index into the pixels array is discussed.', 'Manually calculating pixel values and their specific impact on error, with one calculation contributing to nearly half of the error, is highlighted.']}], 'duration': 371.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI787485.jpg', 'highlights': ['The algorithm involves color separation and error calculation for each pixel, specifically with error being calculated for red, green, and blue components individually.', 'The importance of specific pixel calculations and their impact on error, with one calculation contributing to nearly half of the error, is emphasized.', 'The error in the color calculation is determined by the difference between the original and adjusted color values, with specific examples showing the resulting positive and negative errors.', 'The algorithm achieves dithering using error diffusion, pushing residual quantization error of a pixel onto its neighboring pixels to be dealt with later.', 'Optimizing pixel indexing by creating a function to quickly retrieve the correct index into the pixels array is discussed.']}, {'end': 1719.995, 'segs': [{'end': 1303.787, 'src': 'embed', 'start': 1267.861, 'weight': 0, 'content': [{'end': 1280.491, 'text': 'R should equal itself plus error R times seven divided by 16.', 'start': 1267.861, 'duration': 12.63}, {'end': 1285.316, 'text': 'Times seven divided by 16.', 'start': 1280.491, 'duration': 4.825}, {'end': 1290.159, 'text': 'Do you see why this is? So what I need to do is I need to do this for R, G, and B.', 'start': 1285.316, 'duration': 4.843}, {'end': 1291.82, 'text': 'G, B.', 'start': 1290.159, 'duration': 1.661}, {'end': 1293.801, 'text': 'G, B.', 'start': 1291.82, 'duration': 1.981}, {'end': 1295.322, 'text': 'G, B.', 'start': 1293.801, 'duration': 1.521}, {'end': 1296.463, 'text': 'And I have a mistake here.', 'start': 1295.322, 'duration': 1.141}, {'end': 1302.506, 'text': 'But for each one of these, and now I set it back to the color.', 'start': 1296.763, 'duration': 5.743}, {'end': 1303.787, 'text': "I'm passing the error.", 'start': 1302.766, 'duration': 1.021}], 'summary': 'Calculate r, g, and b values using the formula with error and color.', 'duration': 35.926, 'max_score': 1267.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI1267861.jpg'}, {'end': 1360.443, 'src': 'embed', 'start': 1329.693, 'weight': 5, 'content': [{'end': 1332.455, 'text': 'I need to explicitly say 0.0, because I want that to be a float.', 'start': 1329.693, 'duration': 2.762}, {'end': 1337.458, 'text': 'So now I just need to do this with every single one of these.', 'start': 1333.156, 'duration': 4.302}, {'end': 1341.321, 'text': 'So I need to do this over and over again, four times.', 'start': 1338.639, 'duration': 2.682}, {'end': 1349.795, 'text': "And each time I do it, I'm going to just use the same variable names, but not re-declare them.", 'start': 1345.191, 'duration': 4.604}, {'end': 1353.057, 'text': "I don't love this style, but it will do.", 'start': 1350.795, 'duration': 2.262}, {'end': 1360.443, 'text': 'So now I need, the next one is x minus 1, y plus 1.', 'start': 1353.498, 'duration': 6.945}], 'summary': 'Repeatedly assigning float value 0.0 to variables and performing x-1, y+1 four times.', 'duration': 30.75, 'max_score': 1329.693, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI1329693.jpg'}, {'end': 1462.225, 'src': 'embed', 'start': 1428.764, 'weight': 1, 'content': [{'end': 1431.866, 'text': "But for every single pixel, I'm dealing with neighboring pixels.", 'start': 1428.764, 'duration': 3.102}, {'end': 1440.83, 'text': "Right? I'm dealing with things like, for this pixel x, y, I'm dealing with x plus 1 comma y, which is this pixel.", 'start': 1432.628, 'duration': 8.202}, {'end': 1443.53, 'text': "It's 1 over an x, the same y.", 'start': 1441.03, 'duration': 2.5}, {'end': 1445.971, 'text': "But when I do this, there's no pixel over here.", 'start': 1443.53, 'duration': 2.441}, {'end': 1448.792, 'text': 'So I need to deal with the edges.', 'start': 1447.251, 'duration': 1.541}, {'end': 1454.273, 'text': "And I could be thoughtful about this, but just to get this algorithm to work, let's look at these.", 'start': 1449.372, 'duration': 4.901}, {'end': 1462.225, 'text': 'I am going to the right and the left, but only to the right of y, only down y-wise, y-wise.', 'start': 1456.042, 'duration': 6.183}], 'summary': 'Discussing pixel manipulation and edge handling in image processing.', 'duration': 33.461, 'max_score': 1428.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI1428764.jpg'}, {'end': 1601.833, 'src': 'embed', 'start': 1577.812, 'weight': 6, 'content': [{'end': 1584.979, 'text': "So ah, I think I've done something, which is that this video is not going to work very well on YouTube.", 'start': 1577.812, 'duration': 7.167}, {'end': 1588.204, 'text': "because you're not really going to be able to see this detail.", 'start': 1586.343, 'duration': 1.861}, {'end': 1594.428, 'text': 'But I think if I zoom in, I think you can kind of see, hopefully you can see this detail.', 'start': 1588.525, 'duration': 5.903}, {'end': 1597.831, 'text': "All right, so what could you do with this? I'm going to stop here.", 'start': 1594.709, 'duration': 3.122}, {'end': 1601.833, 'text': "I'm going to go back to taking out gray.", 'start': 1597.851, 'duration': 3.982}], 'summary': 'The video content may not work well on youtube due to lack of detail.', 'duration': 24.021, 'max_score': 1577.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI1577812.jpg'}, {'end': 1650.724, 'src': 'embed', 'start': 1626.096, 'weight': 3, 'content': [{'end': 1631.944, 'text': 'but display it at much higher resolution and maybe draw ellipses or particles as each one of these dots.', 'start': 1626.096, 'duration': 5.848}, {'end': 1636.268, 'text': "Whether it's a black dot or a white dot, draw it with some texture, some image or something.", 'start': 1632.284, 'duration': 3.984}, {'end': 1642.235, 'text': 'What if those dots somehow are the seeds of a particle system? And then I think eventually I want to come back.', 'start': 1636.769, 'duration': 5.466}, {'end': 1643.977, 'text': "Maybe I'll do a follow-up challenge like that.", 'start': 1642.255, 'duration': 1.722}, {'end': 1645.779, 'text': 'But those would be some exercises that I would try.', 'start': 1644.177, 'duration': 1.602}, {'end': 1650.724, 'text': "You can read over a link also to Robert Hodgins' description of this stippling.", 'start': 1646.019, 'duration': 4.705}], 'summary': 'Experiment with high-resolution display and stippling techniques for visual effects.', 'duration': 24.628, 'max_score': 1626.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI1626096.jpg'}, {'end': 1690.227, 'src': 'embed', 'start': 1662.493, 'weight': 4, 'content': [{'end': 1670.178, 'text': 'So this is kind of like a force-directed, self-organizing physics-based system that creates these white and black dots to represent an image.', 'start': 1662.493, 'duration': 7.685}, {'end': 1676.421, 'text': 'And certainly I will create, or somebody will pull request for me, a JavaScript version of this,', 'start': 1670.738, 'duration': 5.683}, {'end': 1678.582, 'text': 'so that you can also see a version that runs in the browser.', 'start': 1676.421, 'duration': 2.161}, {'end': 1683.824, 'text': 'Although the pixel array works differently in HTML5 Canvas and in p5.js.', 'start': 1678.902, 'duration': 4.922}, {'end': 1690.227, 'text': "And pixel operations in the browser, unless you're using shaders or some kind of advanced technique, often are very, very slow.", 'start': 1684.324, 'duration': 5.903}], 'summary': 'A force-directed system generates white and black dots to represent images, with plans for a javascript version for the browser, due to differences in pixel array and slower pixel operations.', 'duration': 27.734, 'max_score': 1662.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI1662493.jpg'}, {'end': 1719.995, 'src': 'heatmap', 'start': 1695.729, 'weight': 1, 'content': [{'end': 1696.629, 'text': 'Thank you, everybody.', 'start': 1695.729, 'duration': 0.9}, {'end': 1708.192, 'text': "Oh, if I stop moving, I'm told, just to show this to you, I'm told that if I zoom into it, and then I stop moving, it will resolve.", 'start': 1696.649, 'duration': 11.543}, {'end': 1709.912, 'text': 'This will be the thumbnail.', 'start': 1708.972, 'duration': 0.94}, {'end': 1713.253, 'text': "Let's get the mouse out of there.", 'start': 1712.113, 'duration': 1.14}, {'end': 1715.394, 'text': 'This will be my thumbnail.', 'start': 1714.514, 'duration': 0.88}, {'end': 1719.995, 'text': 'Okay Thanks for watching.', 'start': 1717.234, 'duration': 2.761}], 'summary': 'Presentation of a thumbnail with zooming and mouse removal. thanks for watching.', 'duration': 24.266, 'max_score': 1695.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI1695729.jpg'}], 'start': 1159.665, 'title': 'Color transformation and visual effects', 'summary': 'Details a color transformation algorithm using r, g, and b values, and discusses creating visual effects with low-resolution images, including dithering techniques and grayscale filtering, with potential applications and challenges mentioned, within a programming context.', 'chapters': [{'end': 1483.257, 'start': 1159.665, 'title': 'Color transformation algorithm', 'summary': 'Details the process of transforming colors in an algorithm, utilizing r, g, and b values, and performing calculations to handle errors and neighboring pixels in a programming context.', 'duration': 323.592, 'highlights': ['The algorithm involves transforming colors by manipulating the R, G, and B values, and performing calculations to handle errors and neighboring pixels.', 'Careful consideration of data types is crucial, as seen in the need to explicitly define float values to avoid integer division issues.', 'The process of transforming colors and handling neighboring pixels involves iterative steps and variable adjustments, with the possibility of optimizing the algorithm through functions and improved logic.', 'The approach to handling edge cases and neighboring pixels involves setting specific ranges for x and y coordinates to ensure valid pixel manipulation.']}, {'end': 1719.995, 'start': 1483.257, 'title': 'Visual effects with low resolution images', 'summary': 'Discusses creating visual effects using low-resolution images, including dithering techniques, grayscale filtering, and potential applications, such as using dots as seeds for a particle system, with a mention of potential challenges in displaying the detailed content on youtube.', 'duration': 236.738, 'highlights': ['The chapter discusses creating visual effects using low-resolution images and dithering techniques, including grayscale filtering and potential applications, such as using dots as seeds for a particle system.', 'The speaker mentions the challenges of displaying detailed content on YouTube due to low resolution and high detail.', 'The transcript introduces the concept of stippling and describes a force-directed, self-organizing physics-based system that creates white and black dots to represent an image.']}], 'duration': 560.33, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0L2n8Tg2FwI/pics/0L2n8Tg2FwI1159665.jpg', 'highlights': ['The algorithm involves transforming colors by manipulating the R, G, and B values, and performing calculations to handle errors and neighboring pixels.', 'The process of transforming colors and handling neighboring pixels involves iterative steps and variable adjustments, with the possibility of optimizing the algorithm through functions and improved logic.', 'The approach to handling edge cases and neighboring pixels involves setting specific ranges for x and y coordinates to ensure valid pixel manipulation.', 'The chapter discusses creating visual effects using low-resolution images and dithering techniques, including grayscale filtering and potential applications, such as using dots as seeds for a particle system.', 'The transcript introduces the concept of stippling and describes a force-directed, self-organizing physics-based system that creates white and black dots to represent an image.', 'Careful consideration of data types is crucial, as seen in the need to explicitly define float values to avoid integer division issues.', 'The speaker mentions the challenges of displaying detailed content on YouTube due to low resolution and high detail.']}], 'highlights': ['The algorithm involves color separation and error calculation for each pixel, specifically with error being calculated for red, green, and blue components individually.', 'The process of transforming colors and handling neighboring pixels involves iterative steps and variable adjustments, with the possibility of optimizing the algorithm through functions and improved logic.', 'The process of quantizing an image involves reducing the number of possible colors, demonstrated by converting a 512x512 pixel image to only 8 possible colors - 2 for red, 2 for green, and 2 for blue.', "The chapter explores implementing Floyd Steinberg dithering in Processing, a Java-based environment for graphics, as an initial step towards image stippling using dots and potential future exploration of particle systems, with reference to Robert Hodgin's work.", 'Understanding the process of quantizing RGB values to a smaller number of possibilities before setting them back to the pixels in an image.']}