title
Coding Challenge #47: Pixel Sorting in Processing

description
In this coding challenge, I implement “Pixel Sorting” in Processing (Java). Using a “selection sort” algorithm, I sort the pixels of an image by brightness and hue. Code: https://thecodingtrain.com/challenges/47-pixel-sorting-in-processing 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/zxruKuft9 🎥 Previous video: https://youtu.be/hacZU523FyM?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Next video: https://youtu.be/UrznYJltZrU?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 🔖 Sorting Algorithms Visualized: https://bost.ocks.org/mike/algorithms/ Videos: 🎥 Livestream Archive: https://youtu.be/VFnF87-JNtY Related Coding Challenges: 🚂 #114 Bubble Sort Visualization: https://youtu.be/67k3I2GxTH8 Timestamps: 0:00 Introduction to Pixel Sorting! 0:38 You can download image and code from the code examples 1:00 Starting to Code! 1:27 Creating a blank image 1:50 Manually adding each pixel to a blank image 4:20 Discussing sorting algorithms! 5:18 Implementing the selection sort algorithm to sort the pixels by their brightness 12:23 Sorting by hue 13:12 Things you could do! 13:45 Animating the sorting process! 15:32 Testing and refactoring! 19:36 Conclusion! 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 #pixelsorting #selectionsort #processing #java

detail
{'title': 'Coding Challenge #47: Pixel Sorting in Processing', 'heatmap': [{'end': 250.726, 'start': 198.334, 'weight': 0.749}, {'end': 752.748, 'start': 725.946, 'weight': 0.764}, {'end': 1127.422, 'start': 1107.494, 'weight': 1}, {'end': 1219.048, 'start': 1218.708, 'weight': 0.905}], 'summary': 'Covers pixel sorting in image processing, java, algorithm efficiency, and animation. it demonstrates creating a pixel sorting algorithm in processing, custom sorting in java for color arrays, and pixel sorting based on brightness and hue in various image sizes. it also explores pixel sorting animation achieving a speed of 30 frames per second and around 300 pixels per second.', 'chapters': [{'end': 252.587, 'segs': [{'end': 48.026, 'src': 'embed', 'start': 19.144, 'weight': 0, 'content': [{'end': 21.886, 'text': 'And you can see, if you Google an image search with pixel sorting,', 'start': 19.144, 'duration': 2.742}, {'end': 26.99, 'text': "you'll see a lot of artists and people making art and crazy projects with a pixel sorting algorithm.", 'start': 21.886, 'duration': 5.104}, {'end': 33.815, 'text': 'So I am now going to try to make pixel sorting in Processing, which is a Java-based programming environment.', 'start': 27.23, 'duration': 6.585}, {'end': 35.276, 'text': 'It looks something like this.', 'start': 34.196, 'duration': 1.08}, {'end': 38.299, 'text': 'You can go to Processing.org to download it yourself.', 'start': 35.557, 'duration': 2.742}, {'end': 45.484, 'text': "And the one thing that I've got going here is the code is in a PDE file called Pixelsorting.pde.", 'start': 38.739, 'duration': 6.745}, {'end': 48.026, 'text': "Check this video's description for a link to the code.", 'start': 45.704, 'duration': 2.322}], 'summary': 'Artists use pixel sorting algorithm for art projects. demonstrates pixel sorting in processing, a java-based environment.', 'duration': 28.882, 'max_score': 19.144, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o19144.jpg'}, {'end': 188.85, 'src': 'embed', 'start': 85.17, 'weight': 1, 'content': [{'end': 85.97, 'text': "Now, here's the thing.", 'start': 85.17, 'duration': 0.8}, {'end': 90.191, 'text': 'What I want now is another image called sorted.', 'start': 86.75, 'duration': 3.441}, {'end': 95.673, 'text': 'And I want to create a blank image equals create image.', 'start': 90.572, 'duration': 5.101}, {'end': 99.495, 'text': 'And I want it to be the same width and height.', 'start': 96.134, 'duration': 3.361}, {'end': 103.556, 'text': 'And I want it to be an RGB image as the image.', 'start': 100.075, 'duration': 3.481}, {'end': 105.997, 'text': 'So this, in processing, is how I load an image from the file.', 'start': 103.736, 'duration': 2.261}, {'end': 108.118, 'text': "Here's how I create a blank image.", 'start': 106.197, 'duration': 1.921}, {'end': 111.98, 'text': "And let's just do something really quickly now.", 'start': 109.099, 'duration': 2.881}, {'end': 116.198, 'text': "All images, oh look at this, there's a weird bar here.", 'start': 113.775, 'duration': 2.423}, {'end': 120.363, 'text': "I don't know, that's a glitch with my camera, I'm just gonna have to live with it.", 'start': 116.218, 'duration': 4.145}, {'end': 127.511, 'text': 'But all images, the pixels, we think of them as organized on a grid.', 'start': 120.704, 'duration': 6.807}, {'end': 132.094, 'text': "Like here's pixel 0, 1, 2 comma 0, 1.", 'start': 128.271, 'duration': 3.823}, {'end': 133.816, 'text': "That's pixel 2 comma 1.", 'start': 132.094, 'duration': 1.722}, {'end': 136.958, 'text': 'The computer stores all the pixels in a linear list.', 'start': 133.816, 'duration': 3.142}, {'end': 140.695, 'text': '0, 1, 2, 3, 4, 5, 6, 7.', 'start': 137.959, 'duration': 2.736}, {'end': 146.765, 'text': 'So to the computer, this is actually pixel index 7, which is actually the eighth pixel because I started counting from 0.', 'start': 140.701, 'duration': 6.064}, {'end': 153.611, 'text': 'And in processing, I can look at all of the pixels of an image, that array, by saying the image dot pixels itself.', 'start': 146.765, 'duration': 6.846}, {'end': 154.952, 'text': "So I'm going to come over here.", 'start': 153.911, 'duration': 1.041}, {'end': 161.238, 'text': 'I also need to do something like, say, sorted.loadPixels.', 'start': 154.972, 'duration': 6.266}, {'end': 164.461, 'text': "This is kind of like a little announcement, like, hey, I'm going to look at the pixels now.", 'start': 161.458, 'duration': 3.003}, {'end': 174.311, 'text': "And I'm going to say for, I'm going to write a for loop, i equals 0, i is less than sorted.pixels.length, i++.", 'start': 164.882, 'duration': 9.429}, {'end': 183.947, 'text': "And I'm going to say sorted dot pixels index i equals a color random 255.", 'start': 176.542, 'duration': 7.405}, {'end': 186.068, 'text': 'So processing has a function called color.', 'start': 183.947, 'duration': 2.121}, {'end': 188.85, 'text': "And if you give it a single number, it'll make a nice grayscale color.", 'start': 186.328, 'duration': 2.522}], 'summary': 'Creating a sorted image with random rgb pixels using a for loop in processing.', 'duration': 103.68, 'max_score': 85.17, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o85170.jpg'}, {'end': 250.726, 'src': 'heatmap', 'start': 198.334, 'weight': 0.749, 'content': [{'end': 206.838, 'text': 'If I in the draw function I say I draw up the image and I draw both the original image and this quote.', 'start': 198.334, 'duration': 8.504}, {'end': 209.359, 'text': 'unquote sorted image, which is now just random colors.', 'start': 206.838, 'duration': 2.521}, {'end': 210.159, 'text': 'I should see this.', 'start': 209.359, 'duration': 0.8}, {'end': 215.061, 'text': "So we can see I have an image that's loaded from a file and an image with pixels that I made up.", 'start': 210.639, 'duration': 4.422}, {'end': 219.723, 'text': 'So now what I need to do is take all of these pixels and put them in this one to sort it.', 'start': 215.422, 'duration': 4.301}, {'end': 227.627, 'text': 'So actually, something that I could do right here is I could say image.pixels, index i and I could say image.loadpixels.', 'start': 219.743, 'duration': 7.884}, {'end': 234.789, 'text': 'So now this is me manually, one at a time, copying every pixel from image into sorted.', 'start': 230.444, 'duration': 4.345}, {'end': 235.53, 'text': 'Here we go.', 'start': 235.049, 'duration': 0.481}, {'end': 237.492, 'text': 'Ta-da, two sunflowers.', 'start': 235.55, 'duration': 1.942}, {'end': 238.633, 'text': 'By the way, I love sunflowers.', 'start': 237.512, 'duration': 1.121}, {'end': 241.576, 'text': 'Do you love sunflowers? Tell me about your favorite flower in the comments.', 'start': 238.673, 'duration': 2.903}, {'end': 245.06, 'text': 'And then all of you can write, oh, cringe, cringe.', 'start': 242.797, 'duration': 2.263}, {'end': 250.726, 'text': 'This seems to be the thing that people write whenever I talk about flowers or kittens or puppies or rainbows or whatever.', 'start': 245.12, 'duration': 5.606}], 'summary': 'Copying pixels from one image to another to sort it manually.', 'duration': 52.392, 'max_score': 198.334, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o198334.jpg'}], 'start': 0.309, 'title': 'Pixel sorting in image processing', 'summary': "Delves into pixel sorting, exploring its application in art projects, and creating a pixel sorting algorithm in processing. it also explains the manipulation of image pixels, including indexing and accessing, resulting in a sorted image. additionally, it demonstrates the use of the 'color' function to generate random grayscale colors.", 'chapters': [{'end': 111.98, 'start': 0.309, 'title': 'Coding challenge: pixel sorting', 'summary': 'Explores the concept of pixel sorting, its application in art projects, and the attempt to create a pixel sorting algorithm in processing using a java-based programming environment.', 'duration': 111.671, 'highlights': ['Pixel sorting is an algorithm that reorganizes pixels in an image or video based on criteria such as brightness or hue, with artists and creators using it for various art projects.', 'The attempt to create a pixel sorting algorithm in Processing using a Java-based programming environment is demonstrated, along with the initial steps of loading and arranging an image for sorting.', 'The process involves creating a pImage variable, loading an image, and arranging the raw and sorted images for comparison within a canvas of 800 by 400 pixels.']}, {'end': 252.587, 'start': 113.775, 'title': 'Image pixel sorting', 'summary': "Explains the process of organizing and manipulating image pixels, including indexing, accessing, and updating pixels, and manually copying pixels from one image to another, resulting in a sorted image. the chapter also demonstrates the use of the processing function 'color' to generate random grayscale colors.", 'duration': 138.812, 'highlights': ['The process of accessing and updating image pixels is demonstrated, with the use of a for loop to iterate through the pixels and assign random grayscale colors to each pixel, resulting in a sorted image. Demonstrates the use of a for loop to iterate through all the pixels of an image and assign random grayscale colors to each pixel.', 'The manual copying of pixels from one image to another is showcased, resulting in the creation of a sorted image. Illustrates the process of manually copying pixels from one image to another, leading to the creation of a sorted image.', "The usage of the processing function 'color' to generate random grayscale colors and add them to the image pixels is explained. Explains the function of the processing function 'color' to generate random grayscale colors and add them to the image pixels."]}], 'duration': 252.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o309.jpg', 'highlights': ['Pixel sorting algorithm reorganizes image pixels based on brightness or hue for art projects.', 'Demonstrates creating a pixel sorting algorithm in Processing using a Java-based environment.', 'Process involves loading an image, arranging raw and sorted images for comparison within a canvas.', 'Demonstrates accessing and updating image pixels using a for loop to assign random grayscale colors.', 'Showcases manual copying of pixels from one image to another, resulting in a sorted image.', "Explains usage of the processing function 'color' to generate random grayscale colors for image pixels."]}, {'end': 671.702, 'segs': [{'end': 281.427, 'src': 'embed', 'start': 252.968, 'weight': 3, 'content': [{'end': 256.129, 'text': 'Can we have nice things, please? OK, so now I need time.', 'start': 252.968, 'duration': 3.161}, {'end': 256.969, 'text': "By the way, I'm avoiding.", 'start': 256.249, 'duration': 0.72}, {'end': 257.988, 'text': "I'm stressed out here.", 'start': 256.988, 'duration': 1}, {'end': 258.73, 'text': "I'm procrastinating.", 'start': 258.009, 'duration': 0.721}, {'end': 259.69, 'text': "I've got to get to the sorting.", 'start': 258.75, 'duration': 0.94}, {'end': 260.951, 'text': "So here's the thing.", 'start': 260.17, 'duration': 0.781}, {'end': 266.393, 'text': 'Most programming environments will come with some kind of function to sort an array.', 'start': 261.151, 'duration': 5.242}, {'end': 269.135, 'text': 'And Java is no exception.', 'start': 267.273, 'duration': 1.862}, {'end': 271.317, 'text': 'Even processing is no exception.', 'start': 269.295, 'duration': 2.022}, {'end': 272.278, 'text': 'It has a sort function.', 'start': 271.337, 'duration': 0.941}, {'end': 279.505, 'text': 'But the thing is, I need to do something kind of custom here, because this array is like this crazy array of colors.', 'start': 272.318, 'duration': 7.187}, {'end': 281.427, 'text': 'And I want to organize it.', 'start': 279.625, 'duration': 1.802}], 'summary': 'Custom sorting needed for array of colors in java and processing.', 'duration': 28.459, 'max_score': 252.968, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o252968.jpg'}, {'end': 451.956, 'src': 'embed', 'start': 422.784, 'weight': 0, 'content': [{'end': 428.328, 'text': "and now what I need to do is I need a selection sort, and So let's think about how I'm going to do this again.", 'start': 422.784, 'duration': 5.544}, {'end': 432.789, 'text': "I'm going to say for, and I do need sorted.loadPixels.", 'start': 428.928, 'duration': 3.861}, {'end': 444.934, 'text': "I'm going to say for int i equals 0, i is less than sorted.pixels.length i++.", 'start': 434.19, 'duration': 10.744}, {'end': 447.635, 'text': 'So this is looking at every single pixel.', 'start': 445.494, 'duration': 2.141}, {'end': 451.956, 'text': 'But for every single pixel, I need to look at all the pixels that come after it.', 'start': 447.695, 'duration': 4.261}], 'summary': 'Implement selection sort to iterate through pixels and compare with subsequent ones.', 'duration': 29.172, 'max_score': 422.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o422784.jpg'}], 'start': 252.968, 'title': 'Sorting pixels in java', 'summary': 'Discusses custom sorting in java for color arrays and sorting pixels in an image to find the brightest one using a selection sort algorithm. it explores the implementation of selection sort for organizing color arrays and rearranging pixels in an image.', 'chapters': [{'end': 329.846, 'start': 252.968, 'title': 'Custom sorting in java for color array', 'summary': 'Discusses the need for a custom sorting algorithm in java to organize a complex array of colors and explores the implementation of a selection sort algorithm for this purpose.', 'duration': 76.878, 'highlights': ['The need for a custom sorting algorithm in Java arises from the complexity of the array of colors, which consists of arbitrary numbers representing R, G, B, and alpha values.', 'Implementing a selection sort algorithm is chosen for simplicity, despite the availability of more efficient sorting algorithms like quick sort, due to the unique requirements of the color array.', 'The chapter mentions that sorting algorithms such as bubble sort, selection sort, and quick sort are typically complex and the domain of extensive study and research, highlighting the challenge of developing custom sorting methods.']}, {'end': 671.702, 'start': 329.966, 'title': 'Sorting pixels in an image', 'summary': 'Discusses the process of rearranging pixels in an image to find the brightest one using a selection sort algorithm, with a nested loop iterating through all pixels to determine the brightest one and rearrange them accordingly.', 'duration': 341.736, 'highlights': ['The process of rearranging pixels in an image to find the brightest one using a selection sort algorithm The speaker explains the process of rearranging pixels in an image to find the brightest one using a selection sort algorithm.', 'Nested loop iterating through all pixels to determine the brightest one and rearrange them accordingly The chapter describes a nested loop that iterates through all pixels to determine the brightest one and rearrange them accordingly.']}], 'duration': 418.734, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o252968.jpg', 'highlights': ['The need for a custom sorting algorithm in Java arises from the complexity of the array of colors, which consists of arbitrary numbers representing R, G, B, and alpha values.', 'Implementing a selection sort algorithm is chosen for simplicity, despite the availability of more efficient sorting algorithms like quick sort, due to the unique requirements of the color array.', 'The process of rearranging pixels in an image to find the brightest one using a selection sort algorithm The speaker explains the process of rearranging pixels in an image to find the brightest one using a selection sort algorithm.', 'Nested loop iterating through all pixels to determine the brightest one and rearrange them accordingly The chapter describes a nested loop that iterates through all pixels to determine the brightest one and rearrange them accordingly.', 'The chapter mentions that sorting algorithms such as bubble sort, selection sort, and quick sort are typically complex and the domain of extensive study and research, highlighting the challenge of developing custom sorting methods.']}, {'end': 817.501, 'segs': [{'end': 758.135, 'src': 'heatmap', 'start': 713.68, 'weight': 2, 'content': [{'end': 721.664, 'text': "So this I'm going to have to, I sampled the image down to a 200 by 200 image, which I think it can sort it in Java in about 14 seconds.", 'start': 713.68, 'duration': 7.984}, {'end': 722.964, 'text': "So I'm going to run that now.", 'start': 722.024, 'duration': 0.94}, {'end': 725.926, 'text': "And you can see the window's a little bit smaller, but I'll zoom into it.", 'start': 723.685, 'duration': 2.241}, {'end': 726.466, 'text': '1, 1,000, 2, 1,000.', 'start': 725.946, 'duration': 0.52}, {'end': 727.126, 'text': 'Come on, pixel sort.', 'start': 726.466, 'duration': 0.66}, {'end': 734.051, 'text': 'Come on, do the pixel sort cringe.', 'start': 730.928, 'duration': 3.123}, {'end': 735.292, 'text': "That's what you do while you're watching.", 'start': 734.111, 'duration': 1.181}, {'end': 737.213, 'text': 'You complain and type in the comments.', 'start': 735.492, 'duration': 1.721}, {'end': 737.713, 'text': 'Oh, there you go.', 'start': 737.253, 'duration': 0.46}, {'end': 742.717, 'text': 'So you can see this now sorted every pixel horizontally by brightness.', 'start': 738.014, 'duration': 4.703}, {'end': 746.54, 'text': "Let's see if we can sort it by hue, which I think will be interesting to try.", 'start': 743.118, 'duration': 3.422}, {'end': 752.748, 'text': "Okay, so instead of looking at the brightness, why don't I look at the hue?", 'start': 747.962, 'duration': 4.786}, {'end': 758.135, 'text': 'So processing has a function called hue, which will give me the hue value of a particular color.', 'start': 753.048, 'duration': 5.087}], 'summary': 'Image sorted in java in about 14 seconds, pixels sorted by brightness and hue.', 'duration': 44.455, 'max_score': 713.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o713680.jpg'}, {'end': 829.41, 'src': 'embed', 'start': 799.067, 'weight': 0, 'content': [{'end': 801.569, 'text': "I'm just ordering them horizontally?", 'start': 799.067, 'duration': 2.502}, {'end': 803.05, 'text': 'What if I order them vertically?', 'start': 801.809, 'duration': 1.241}, {'end': 807.213, 'text': 'Or what if I order them spiraling out from the center or coming in from the edges?', 'start': 803.27, 'duration': 3.943}, {'end': 809.074, 'text': 'What types of other strange?', 'start': 807.613, 'duration': 1.461}, {'end': 813.318, 'text': "What if I only sort part of the image? And you'll see lots of art.", 'start': 809.214, 'duration': 4.104}, {'end': 817.501, 'text': "Again, if you Google image search pixel sorting art, you'll find a lot of creative examples of this.", 'start': 813.738, 'duration': 3.763}, {'end': 818.922, 'text': 'And I hope you make something and send it to me.', 'start': 817.541, 'duration': 1.381}, {'end': 821.284, 'text': 'But before I go, I want to add one more thing to this.', 'start': 819.202, 'duration': 2.082}, {'end': 826.227, 'text': 'Because it takes so long, I think it would be interesting to watch it animate the sort.', 'start': 821.324, 'duration': 4.903}, {'end': 829.41, 'text': 'So in other words, the sorting happens right here.', 'start': 826.668, 'duration': 2.742}], 'summary': 'Experimenting with different ways to order images, creating pixel sorting art with potential for animation.', 'duration': 30.343, 'max_score': 799.067, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o799067.jpg'}], 'start': 672.022, 'title': 'Pixel sorting algorithm', 'summary': 'Explains the concept of pixel sorting algorithm using big o notation to analyze algorithm efficiency, and demonstrates the sorting of pixels based on brightness and hue in a 400 by 400 image, which is then optimized to 200 by 200 image for improved processing time.', 'chapters': [{'end': 817.501, 'start': 672.022, 'title': 'Pixel sorting algorithm', 'summary': 'Explains the concept of pixel sorting algorithm using big o notation to analyze algorithm efficiency, and demonstrates the sorting of pixels based on brightness and hue in a 400 by 400 image, which is then optimized to 200 by 200 image for improved processing time.', 'duration': 145.479, 'highlights': ['The algorithm efficiency is analyzed using big O notation, demonstrating the impact of increasing pixels on the number of checks, with 400 by 400 image resulting in 160,000 checks. The chapter explains the concept of big O notation in analyzing algorithm efficiency, illustrating the impact of increasing pixels on the number of checks, with a 400 by 400 image resulting in 160,000 checks.', 'Sorting pixels based on brightness and hue is demonstrated, with the optimization of processing time achieved by sampling the image down to a 200 by 200 image, reducing the sorting time to approximately 14 seconds. The chapter demonstrates sorting pixels based on brightness and hue, achieving an optimized processing time by sampling the image down to a 200 by 200 image, reducing the sorting time to approximately 14 seconds.', 'Encouragement is given to explore creative variations of pixel sorting, such as vertical sorting, spiraling out from the center, sorting part of the image, and exploring different sorting parameters, highlighting the artistic potential of pixel sorting. The chapter encourages exploring creative variations of pixel sorting, such as vertical sorting, spiraling out from the center, sorting part of the image, and exploring different sorting parameters, highlighting the artistic potential of pixel sorting.']}], 'duration': 145.479, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o672022.jpg', 'highlights': ['The algorithm efficiency is analyzed using big O notation, demonstrating the impact of increasing pixels on the number of checks, with 400 by 400 image resulting in 160,000 checks.', 'Sorting pixels based on brightness and hue is demonstrated, with the optimization of processing time achieved by sampling the image down to a 200 by 200 image, reducing the sorting time to approximately 14 seconds.', 'Encouragement is given to explore creative variations of pixel sorting, such as vertical sorting, spiraling out from the center, sorting part of the image, and exploring different sorting parameters, highlighting the artistic potential of pixel sorting.']}, {'end': 1219.048, 'segs': [{'end': 962.515, 'src': 'embed', 'start': 863.258, 'weight': 0, 'content': [{'end': 865.879, 'text': 'So i is something that can become a global variable.', 'start': 863.258, 'duration': 2.621}, {'end': 867.58, 'text': "I'm going to call it index.", 'start': 865.899, 'duration': 1.681}, {'end': 869.46, 'text': 'Set it equal to zero.', 'start': 868.42, 'duration': 1.04}, {'end': 871.661, 'text': "I don't need this anymore.", 'start': 870.521, 'duration': 1.14}, {'end': 873.982, 'text': "I don't need that outer loop anymore.", 'start': 872.522, 'duration': 1.46}, {'end': 879.625, 'text': 'This is going to do one, one pixel per frame of animation.', 'start': 874.002, 'duration': 5.623}, {'end': 882.306, 'text': 'So the selected pixel is index.', 'start': 880.085, 'duration': 2.221}, {'end': 884.907, 'text': 'J starts at index.', 'start': 883.746, 'duration': 1.161}, {'end': 887.814, 'text': 'And then, whoops.', 'start': 885.973, 'duration': 1.841}, {'end': 891.897, 'text': 'And then I swap at index.', 'start': 889.776, 'duration': 2.121}, {'end': 900.203, 'text': 'Index And then, what do I do? I say index plus plus.', 'start': 895.039, 'duration': 5.164}, {'end': 905.466, 'text': 'And I should also check if index is greater than or equal to sorted.pixels.length.', 'start': 900.323, 'duration': 5.143}, {'end': 913.246, 'text': "I don't want the, I can't spell length.", 'start': 911.825, 'duration': 1.421}, {'end': 914.627, 'text': 'How do you spell length? Oh my god.', 'start': 913.366, 'duration': 1.261}, {'end': 930.195, 'text': "If it's greater than length minus one, as long as it's less than length minus one, I can increase it by one, okay? So now, let's run this.", 'start': 915.607, 'duration': 14.588}, {'end': 935.296, 'text': "you can see like it's very, very slowly.", 'start': 932.895, 'duration': 2.401}, {'end': 937.217, 'text': 'you can see it kind of sorting up there, right?', 'start': 935.296, 'duration': 1.921}, {'end': 938.598, 'text': "I'm zooming all the way in.", 'start': 937.417, 'duration': 1.181}, {'end': 941.099, 'text': "it's happening very, very slowly, sorting by hue.", 'start': 938.598, 'duration': 2.501}, {'end': 944.962, 'text': "Now, again, this is such a tiny resolution image that we're barely seeing it.", 'start': 941.42, 'duration': 3.542}, {'end': 948.263, 'text': 'So now, I can actually, let me go with the larger image.', 'start': 945.182, 'duration': 3.081}, {'end': 953.147, 'text': "I'm going to change this to 800 by 400.", 'start': 948.764, 'duration': 4.383}, {'end': 959.452, 'text': "I'm going to load sunflower 400, a higher resolution sunflower, and I'm going to.", 'start': 953.147, 'duration': 6.305}, {'end': 962.515, 'text': "I just need to change where I'm drawing it at 400, comma 0.", 'start': 959.452, 'duration': 3.063}], 'summary': 'A coding session explaining pixel sorting with an example, demonstrating the sorting process on an image.', 'duration': 99.257, 'max_score': 863.258, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o863258.jpg'}, {'end': 1118.098, 'src': 'embed', 'start': 1085.763, 'weight': 4, 'content': [{'end': 1087.224, 'text': 'Please share them with me in the comments.', 'start': 1085.763, 'duration': 1.461}, {'end': 1090.085, 'text': 'Share them with me on Twitter, at Shiffman.', 'start': 1087.444, 'duration': 2.641}, {'end': 1093.567, 'text': 'I hope you enjoyed this coding challenge in processing about pixel sorting.', 'start': 1090.366, 'duration': 3.201}, {'end': 1096.329, 'text': 'You could do this at very high resolutions.', 'start': 1094.468, 'duration': 1.861}, {'end': 1101.291, 'text': "It'll take a long time to render, but then you can export it out as an image or something and make a big print.", 'start': 1096.529, 'duration': 4.762}, {'end': 1104.553, 'text': "And let me know if you make something, and I'll see you again in a future video.", 'start': 1101.611, 'duration': 2.942}, {'end': 1106.534, 'text': "Goodbye Hey, guess what, everybody? I'm back.", 'start': 1104.573, 'duration': 1.961}, {'end': 1107.434, 'text': 'Look at this.', 'start': 1107.054, 'duration': 0.38}, {'end': 1108.295, 'text': "That doesn't look right.", 'start': 1107.494, 'duration': 0.801}, {'end': 1112.136, 'text': "I'm getting this interesting, strange smear, but it's not actually sorting.", 'start': 1108.375, 'duration': 3.761}, {'end': 1118.098, 'text': "The reason why it's not actually sorting is I didn't notice when I move stuff around to animate it, look where the swap is happening.", 'start': 1112.856, 'duration': 5.242}], 'summary': 'Demonstrates pixel sorting in high-resolution processing, with potential for large print output and lengthy rendering time.', 'duration': 32.335, 'max_score': 1085.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o1085763.jpg'}, {'end': 1141.109, 'src': 'heatmap', 'start': 1107.494, 'weight': 1, 'content': [{'end': 1108.295, 'text': "That doesn't look right.", 'start': 1107.494, 'duration': 0.801}, {'end': 1112.136, 'text': "I'm getting this interesting, strange smear, but it's not actually sorting.", 'start': 1108.375, 'duration': 3.761}, {'end': 1118.098, 'text': "The reason why it's not actually sorting is I didn't notice when I move stuff around to animate it, look where the swap is happening.", 'start': 1112.856, 'duration': 5.242}, {'end': 1121.32, 'text': 'The swap is happening inside this J loop.', 'start': 1118.459, 'duration': 2.861}, {'end': 1127.422, 'text': 'I want to look through all the pixels, find the brightest or the ones with the highest hue, and at the end of that, swap it.', 'start': 1121.72, 'duration': 5.702}, {'end': 1131.284, 'text': 'So I just had a typo, essentially, where this closing bracket is in the wrong place.', 'start': 1127.482, 'duration': 3.802}, {'end': 1136.406, 'text': 'I need to close that J loop here, and now it should actually sort by hue.', 'start': 1131.664, 'duration': 4.742}, {'end': 1141.109, 'text': 'OK, so now we should see something more correct.', 'start': 1138.888, 'duration': 2.221}], 'summary': 'Corrected code to sort pixels by hue, resulting in more accurate output.', 'duration': 33.615, 'max_score': 1107.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o1107494.jpg'}, {'end': 1219.048, 'src': 'heatmap', 'start': 1218.708, 'weight': 0.905, 'content': [{'end': 1219.048, 'text': 'Goodbye.', 'start': 1218.708, 'duration': 0.34}], 'summary': 'No information available in the transcript', 'duration': 0.34, 'max_score': 1218.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o1218708.jpg'}], 'start': 817.541, 'title': 'Pixel sorting animation', 'summary': 'Explores creating a pixel sorting animation using processing, focusing on continuous sorting in the draw loop and achieving an animation speed of 30 frames per second. it delves into sorting pixels in an image and achieving around 300 pixels per second, exploring creative ways of pixel sorting.', 'chapters': [{'end': 862.918, 'start': 817.541, 'title': 'Pixel sorting animation', 'summary': 'Discusses the process of creating a pixel sorting animation using processing, emphasizing the need to sort in the draw loop for continuous sorting during the animation.', 'duration': 45.377, 'highlights': ['The need to sort in the draw loop for continuous sorting during the animation.', 'Demonstrating the process of creating a pixel sorting animation using Processing.', 'Emphasizing the importance of animating the sort process to make it interesting for the viewers.']}, {'end': 1219.048, 'start': 863.258, 'title': 'Pixel sorting animation', 'summary': 'Demonstrates the process of sorting pixels in an image using processing, improving the animation speed to 30 frames per second and exploring creative ways of pixel sorting, achieving around 300 pixels per second.', 'duration': 355.79, 'highlights': ['The chapter demonstrates the process of sorting pixels in an image using processing. Demonstrates sorting pixels, using processing', 'Improving the animation speed to 30 frames per second. Achieving 30 frames per second animation speed', 'Exploring creative ways of pixel sorting, achieving around 300 pixels per second. Exploring creative pixel sorting, achieving around 300 pixels per second']}], 'duration': 401.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JUDYkxU6J0o/pics/JUDYkxU6J0o817541.jpg', 'highlights': ['Achieving around 300 pixels per second in creative pixel sorting', 'Improving animation speed to 30 frames per second', 'Demonstrating the process of sorting pixels in an image using Processing', 'Emphasizing the importance of animating the sort process for viewer engagement', 'The need to sort in the draw loop for continuous sorting during the animation']}], 'highlights': ['Demonstrates creating a pixel sorting algorithm in Processing using a Java-based environment.', 'The process of rearranging pixels in an image to find the brightest one using a selection sort algorithm.', 'Sorting pixels based on brightness and hue is demonstrated, with the optimization of processing time achieved by sampling the image down to a 200 by 200 image, reducing the sorting time to approximately 14 seconds.', 'Achieving around 300 pixels per second in creative pixel sorting']}