title
Coding Challenge #143: Quicksort Visualization

description
Let's try implementing a famously faster sorting algorithm: the Quicksort! And visualize the process with p5.js! Code: https://thecodingtrain.com/challenges/143-quicksort 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/vic6Qzo-j 🎥 Previous video: https://youtu.be/9PGfL4t-uqE?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Next video: https://youtu.be/Iaz9TqYWUmA?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 📄 Quicksort on Wikipedia: https://en.wikipedia.org/wiki/Quicksort Videos: 🎞️ 15 Sorting Algorithms in 6 Minutes: https://youtu.be/kPRA0W1kECg 🎥 async/await: https://youtu.be/XO77Fib9tSI 🔴 Coding Train Live 173: https://youtu.be/277611ExU9A?t=5538s Related Coding Challenges: 🚂 #114 Bubble Sort Visualization: https://youtu.be/67k3I2GxTH8 Timestamps: 0:02 Introducing the Quicksort algorithm and the Big O Notation! 1:19 A walk-through of the Quicksort algorithm 6:05 Starting to code! 8:12 Figuring out the partition function! 12:44 Writing out the partition function 14:11 Testing and debugging the algorithm 16:57 Adding delays to visualize Quicksort 21:12 Coloring the pivot points! 25:59 Some more debugging and customizations! 26:59 Discussing partition schemes and things you could do! 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://thecodingtrain.com/discord 💖 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 #sortingvisualization #quicksortalgorithm #p5js #javascript 🤖This video is sponsored by Brilliant: https://brilliant.org/codingtrain 🤖

detail
{'title': 'Coding Challenge #143: Quicksort Visualization', 'heatmap': [{'end': 382.885, 'start': 360.926, 'weight': 0.983}, {'end': 705.66, 'start': 629.806, 'weight': 0.75}, {'end': 1032.069, 'start': 992.583, 'weight': 0.86}, {'end': 1626.735, 'start': 1607.272, 'weight': 0.852}], 'summary': 'Covers the efficient quicksort algorithm with o(n log n) time complexity, recursive divide and conquer strategy, and partitioning an array, as well as async and await in quicksort, async delay function, and optimizing quicksort visualization with promise.all for efficient and asynchronous execution, while also emphasizing visualizing the algorithm and creating unique visualizations.', 'chapters': [{'end': 382.885, 'segs': [{'end': 74.648, 'src': 'embed', 'start': 44.916, 'weight': 0, 'content': [{'end': 53.659, 'text': 'Now the quicksort algorithm is on average a Big O, n log n algorithm.', 'start': 44.916, 'duration': 8.743}, {'end': 56.9, 'text': "And maybe at the end, I'll come back to unpack why is this.", 'start': 53.719, 'duration': 3.181}, {'end': 65.163, 'text': 'But one of the things I love about the quicksort is its divide and conquer approach that requires recursion.', 'start': 56.98, 'duration': 8.183}, {'end': 74.648, 'text': "So I've done a lot of things with recursion on this channel before more in computer graphics or drawing a fractal tree or some other type of recursive pattern.", 'start': 66.906, 'duration': 7.742}], 'summary': 'Quicksort algorithm is on average o(n log n). it uses recursion and divide and conquer approach.', 'duration': 29.732, 'max_score': 44.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU44916.jpg'}, {'end': 141.212, 'src': 'embed', 'start': 113.223, 'weight': 1, 'content': [{'end': 119.788, 'text': 'And then it also requires the idea of the quicksort to say, I want to apply this algorithm, the quicksort, to some part of the array.', 'start': 113.223, 'duration': 6.565}, {'end': 126.013, 'text': "And we're going to recursively subdivide and subdivide and subdivide the array and keep quicksorting different parts of it till the whole thing is sorted.", 'start': 120.229, 'duration': 5.784}, {'end': 126.854, 'text': "It's like magic.", 'start': 126.053, 'duration': 0.801}, {'end': 136.63, 'text': "But when we're starting, what's going to get passed in is index 0 and 1, 2, 3, and index 4.", 'start': 127.514, 'duration': 9.116}, {'end': 141.212, 'text': "So the first time I call quicksort, I'm going to say, sort the array from 0 to 4.", 'start': 136.63, 'duration': 4.582}], 'summary': 'Applying quicksort algorithm to recursively subdivide and sort array parts till fully sorted.', 'duration': 27.989, 'max_score': 113.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU113223.jpg'}, {'end': 191.222, 'src': 'embed', 'start': 158.785, 'weight': 2, 'content': [{'end': 160.427, 'text': "So that's going to be the first step here.", 'start': 158.785, 'duration': 1.642}, {'end': 167.313, 'text': 'I think I could just say if start is greater than or equal to end, something like return.', 'start': 161.027, 'duration': 6.286}, {'end': 168.755, 'text': "That's going to get me out of it.", 'start': 167.774, 'duration': 0.981}, {'end': 171.854, 'text': "All right, but here's the key.", 'start': 169.753, 'duration': 2.101}, {'end': 179.677, 'text': 'The idea of the quicksort is basically to say I want to do a step which is called partition,', 'start': 172.254, 'duration': 7.423}, {'end': 185.179, 'text': 'and I need to pick some part of the array that is called a pivot point.', 'start': 179.677, 'duration': 5.502}, {'end': 191.222, 'text': "So I'm going to make a nice sort of easy way to pick that is always just have the pivot be the end spot.", 'start': 185.699, 'duration': 5.523}], 'summary': 'The quicksort algorithm involves partitioning and choosing a pivot point, typically set as the end spot.', 'duration': 32.437, 'max_score': 158.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU158785.jpg'}, {'end': 324.518, 'src': 'embed', 'start': 259.925, 'weight': 3, 'content': [{'end': 263.668, 'text': "So I'll figure that out as I code it, but bear stay with me here.", 'start': 259.925, 'duration': 3.743}, {'end': 270.492, 'text': 'So in this case, what this actually ends up returning is the index one.', 'start': 264.168, 'duration': 6.324}, {'end': 280.5, 'text': 'Because what I then can do is I can say, hey, now that I got that index of where that pivot is, I want to just quick sort.', 'start': 271.092, 'duration': 9.408}, {'end': 294.131, 'text': "So I'm going to recursively call quick sort on that array from start to that index.", 'start': 281.901, 'duration': 12.23}, {'end': 298.566, 'text': 'Minus one and then, and also quick sort.', 'start': 295.305, 'duration': 3.261}, {'end': 305.469, 'text': 'this is dividing and conquering from that array, from index plus one to end.', 'start': 298.566, 'duration': 6.903}, {'end': 309.651, 'text': 'so basically, These are the steps we get.', 'start': 305.469, 'duration': 4.182}, {'end': 313.113, 'text': 'we start with the array, we find, we pick an arbitrary pivot,', 'start': 309.651, 'duration': 3.462}, {'end': 319.535, 'text': 'we put everything on one side or the other and then we figure out where that that pivot ended up.', 'start': 313.113, 'duration': 6.422}, {'end': 324.518, 'text': 'and then we just quick sort and Both sides and those will put something to this.', 'start': 319.535, 'duration': 4.983}], 'summary': 'The transcript discusses the process of quick sort, including picking a pivot, dividing and conquering, and recursively calling quick sort.', 'duration': 64.593, 'max_score': 259.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU259925.jpg'}, {'end': 391.549, 'src': 'heatmap', 'start': 360.926, 'weight': 0.983, 'content': [{'end': 361.686, 'text': "But let's start.", 'start': 360.926, 'duration': 0.76}, {'end': 364.988, 'text': "I think now let's take, let's go over to the code and start writing it in our code.", 'start': 361.686, 'duration': 3.302}, {'end': 367.13, 'text': 'All right, so here I am with my code.', 'start': 365.709, 'duration': 1.421}, {'end': 369.011, 'text': "I'm going to remove the bubble sort.", 'start': 367.15, 'duration': 1.861}, {'end': 372.6, 'text': "And I'm just going to leave the drawing of the array.", 'start': 370.479, 'duration': 2.121}, {'end': 375.461, 'text': "And I'll take out this frame rate five thing for right now.", 'start': 372.62, 'duration': 2.841}, {'end': 376.262, 'text': "Actually, I'll leave that in there.", 'start': 375.481, 'duration': 0.781}, {'end': 378.383, 'text': 'And now if I go and refresh, we should see, there it is.', 'start': 376.282, 'duration': 2.101}, {'end': 382.885, 'text': "Every time I refresh, I'm looking at the array of random values, unsorted.", 'start': 378.443, 'duration': 4.442}, {'end': 385.946, 'text': 'So the first thing I want to do is just see, can I get the sorting to work?', 'start': 383.265, 'duration': 2.681}, {'end': 387.487, 'text': "And then I'll figure out, visualizing.", 'start': 386.226, 'duration': 1.261}, {'end': 389.848, 'text': 'it is, I guess, the interesting part here in some ways.', 'start': 387.487, 'duration': 2.361}, {'end': 391.549, 'text': "But let's get it to work first.", 'start': 390.168, 'duration': 1.381}], 'summary': 'Code demonstration focuses on sorting array of random values for visualization.', 'duration': 30.623, 'max_score': 360.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU360926.jpg'}], 'start': 0.229, 'title': 'Quicksort algorithm', 'summary': 'Explains the efficient quicksort algorithm with an average time complexity of o(n log n), recursive divide and conquer strategy, and the process of partitioning an array. it also delves into the partition function, demonstrating the pivot selection, array division, and recursive sorting, resulting in the index of the pivot and the sorted array.', 'chapters': [{'end': 231.067, 'start': 0.229, 'title': 'Quicksort algorithm explained', 'summary': 'Explains the quicksort algorithm as a more efficient sorting approach compared to bubble sort, with an average time complexity of o(n log n) and its recursive divide and conquer strategy, demonstrated through the process of partitioning an array.', 'duration': 230.838, 'highlights': ["Quicksort is on average a Big O, n log n algorithm, making it more efficient than bubble sort which typically takes O n squared. Quicksort has an average time complexity of O(n log n) compared to bubble sort's O n squared.", 'The key feature of quicksort is its divide and conquer approach using recursion to recursively subdivide and sort different parts of the array until the entire array is sorted. Quicksort utilizes a divide and conquer approach with recursion to sort different parts of the array until the entire array is sorted.', 'The partition step in quicksort involves selecting a pivot point and arranging the elements such that those less than the pivot are placed on one side of the array, and those greater are placed on the other side. In the partition step, quicksort selects a pivot point and arranges the elements based on whether they are less than or greater than the pivot.']}, {'end': 382.885, 'start': 231.087, 'title': 'Quick sort and partition function', 'summary': 'Explains the quick sort algorithm and the partition function, which involves picking an arbitrary pivot, dividing and conquering the array, and recursively sorting both sides, resulting in the index of the pivot and the sorted array.', 'duration': 151.798, 'highlights': ['The chapter explains the steps of the Quick Sort algorithm, including picking an arbitrary pivot, dividing and conquering the array, and recursively sorting both sides, resulting in the index of the pivot and the sorted array.', 'The function is designed to return the index value where the pivot ended up, and then recursively call Quick Sort on the array from start to that index minus one and from index plus one to end.', 'The chapter discusses the process of partitioning the array, placing elements on either side of the pivot, and achieving a sorted array through recursive quick sorting, resulting in the final sorted array.']}], 'duration': 382.656, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU229.jpg', 'highlights': ['Quicksort is on average a Big O, n log n algorithm, making it more efficient than bubble sort which typically takes O n squared.', 'The key feature of quicksort is its divide and conquer approach using recursion to recursively subdivide and sort different parts of the array until the entire array is sorted.', 'The partition step in quicksort involves selecting a pivot point and arranging the elements such that those less than the pivot are placed on one side of the array, and those greater are placed on the other side.', 'The chapter explains the steps of the Quick Sort algorithm, including picking an arbitrary pivot, dividing and conquering the array, and recursively sorting both sides, resulting in the index of the pivot and the sorted array.', 'The function is designed to return the index value where the pivot ended up, and then recursively call Quick Sort on the array from start to that index minus one and from index plus one to end.', 'The chapter discusses the process of partitioning the array, placing elements on either side of the pivot, and achieving a sorted array through recursive quick sorting, resulting in the final sorted array.']}, {'end': 1037.792, 'segs': [{'end': 415.373, 'src': 'embed', 'start': 383.265, 'weight': 1, 'content': [{'end': 385.946, 'text': 'So the first thing I want to do is just see, can I get the sorting to work?', 'start': 383.265, 'duration': 2.681}, {'end': 387.487, 'text': "And then I'll figure out, visualizing.", 'start': 386.226, 'duration': 1.261}, {'end': 389.848, 'text': 'it is, I guess, the interesting part here in some ways.', 'start': 387.487, 'duration': 2.361}, {'end': 391.549, 'text': "But let's get it to work first.", 'start': 390.168, 'duration': 1.381}, {'end': 395.811, 'text': 'So the idea, right, we need to write a function called quick sort.', 'start': 391.589, 'duration': 4.222}, {'end': 400.13, 'text': "It's going to receive an array and a start and an end.", 'start': 396.829, 'duration': 3.301}, {'end': 407.331, 'text': 'And I said if start is greater than or equal to end, then just return, like jump out of there.', 'start': 400.59, 'duration': 6.741}, {'end': 415.373, 'text': "Otherwise, I need to get this pivot index where I'm going to partition the array from start to end.", 'start': 407.711, 'duration': 7.662}], 'summary': 'Testing sorting functionality and implementing quick sort function with start, end, and pivot index.', 'duration': 32.108, 'max_score': 383.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU383265.jpg'}, {'end': 490.655, 'src': 'embed', 'start': 461.565, 'weight': 2, 'content': [{'end': 471.205, 'text': "So this is the basic idea of the recursive algorithm divide and conquer, and I'm going to call The array.", 'start': 461.565, 'duration': 9.64}, {'end': 477.048, 'text': "I'm going to call it first with values and go from zero to values.length.", 'start': 471.205, 'duration': 5.843}, {'end': 480.77, 'text': 'Now do I want to say values.length minus one? Probably.', 'start': 477.548, 'duration': 3.222}, {'end': 482.831, 'text': "So I'll figure that out as we go.", 'start': 481.09, 'duration': 1.741}, {'end': 487.232, 'text': "Because the last element is not the length, it's the length minus one.", 'start': 483.391, 'duration': 3.841}, {'end': 490.655, 'text': 'Okay So now, of course, we really have this.', 'start': 488.053, 'duration': 2.602}], 'summary': 'Introduction to recursive algorithm divide and conquer for array manipulation', 'duration': 29.09, 'max_score': 461.565, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU461565.jpg'}, {'end': 545.784, 'src': 'embed', 'start': 515.659, 'weight': 3, 'content': [{'end': 517.32, 'text': 'I think an example will work out better this way.', 'start': 515.659, 'duration': 1.661}, {'end': 520.102, 'text': 'Obviously, any order, the sorting algorithm will work.', 'start': 517.72, 'duration': 2.382}, {'end': 532.53, 'text': 'So the idea of the partition function is when you call the function, you give it the array, this is the array, you give it a start and an end.', 'start': 520.582, 'duration': 11.948}, {'end': 536.7, 'text': 'So in this case, the start is going to be zero, This is the start.', 'start': 532.61, 'duration': 4.09}, {'end': 543.023, 'text': 'And the end is going to be in position 0, 1, 2, 3, 4, in index 4.', 'start': 537.8, 'duration': 5.223}, {'end': 545.784, 'text': 'So this is the first time I call partition.', 'start': 543.023, 'duration': 2.761}], 'summary': 'Explanation of partition function for sorting algorithm with start at 0 and end at index 4', 'duration': 30.125, 'max_score': 515.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU515659.jpg'}, {'end': 705.66, 'src': 'heatmap', 'start': 629.806, 'weight': 0.75, 'content': [{'end': 635.39, 'text': '9 is 9 greater than 5.', 'start': 629.806, 'duration': 5.584}, {'end': 636.331, 'text': "It's greater than five.", 'start': 635.39, 'duration': 0.941}, {'end': 637.091, 'text': 'I know that.', 'start': 636.531, 'duration': 0.56}, {'end': 638.512, 'text': 'That means I do nothing.', 'start': 637.431, 'duration': 1.081}, {'end': 645.576, 'text': "So I'm checking if array index i is, I'm checking if it's less than actually.", 'start': 638.732, 'duration': 6.844}, {'end': 647.777, 'text': "It's not less than.", 'start': 646.977, 'duration': 0.8}, {'end': 649.958, 'text': "If it's less than the pivot value.", 'start': 648.097, 'duration': 1.861}, {'end': 653.86, 'text': "So if it's not less than the pivot value, I don't do anything.", 'start': 650.379, 'duration': 3.481}, {'end': 656.842, 'text': 'Okay, now i goes up, so i is now here.', 'start': 654.141, 'duration': 2.701}, {'end': 660.404, 'text': 'Is three less than five? Aha, it is.', 'start': 657.963, 'duration': 2.441}, {'end': 663.286, 'text': 'So guess what I do? I now swap.', 'start': 660.704, 'duration': 2.582}, {'end': 667.569, 'text': 'i and wherever the pivot index is.', 'start': 665.167, 'duration': 2.402}, {'end': 670.13, 'text': 'Remember, the pivot index was at zero.', 'start': 667.869, 'duration': 2.261}, {'end': 671.772, 'text': 'So three and nine are going to swap.', 'start': 670.311, 'duration': 1.461}, {'end': 675.574, 'text': 'So three goes here, and nine goes here.', 'start': 673.373, 'duration': 2.201}, {'end': 678.936, 'text': 'And then guess what I do? I move that pivot index.', 'start': 675.634, 'duration': 3.302}, {'end': 684.059, 'text': "So the pivot index is now here, and then I move i, and I'm checking four.", 'start': 679.316, 'duration': 4.743}, {'end': 687.362, 'text': 'Is four less than five? It is.', 'start': 684.7, 'duration': 2.662}, {'end': 688.382, 'text': 'So I do this again.', 'start': 687.642, 'duration': 0.74}, {'end': 690.644, 'text': 'Swap i in the pivot index.', 'start': 688.622, 'duration': 2.022}, {'end': 692.005, 'text': 'So four goes here.', 'start': 690.924, 'duration': 1.081}, {'end': 693.666, 'text': '9 goes here.', 'start': 693.146, 'duration': 0.52}, {'end': 695.248, 'text': 'And the pivot index goes up.', 'start': 694.007, 'duration': 1.241}, {'end': 696.91, 'text': 'So the pivot index is here.', 'start': 695.588, 'duration': 1.322}, {'end': 699.333, 'text': 'Then I go here for i.', 'start': 697.33, 'duration': 2.003}, {'end': 700.714, 'text': 'This is the last one I need to check.', 'start': 699.333, 'duration': 1.381}, {'end': 702.817, 'text': 'Is i less than 5? No.', 'start': 701.155, 'duration': 1.662}, {'end': 703.538, 'text': 'Do nothing.', 'start': 703.037, 'duration': 0.501}, {'end': 704.439, 'text': "So I'm done.", 'start': 703.998, 'duration': 0.441}, {'end': 705.66, 'text': 'This is the array.', 'start': 705.039, 'duration': 0.621}], 'summary': 'Array elements compared and swapped based on pivot value.', 'duration': 75.854, 'max_score': 629.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU629806.jpg'}, {'end': 792.259, 'src': 'embed', 'start': 760.968, 'weight': 0, 'content': [{'end': 764.469, 'text': "That's being very long-winded, but I think it'll make it more clear.", 'start': 760.968, 'duration': 3.501}, {'end': 765.789, 'text': "So let's go write that code now.", 'start': 764.549, 'duration': 1.24}, {'end': 770.811, 'text': 'So if I come back to the code, all I need to do is write the partition function.', 'start': 766.85, 'duration': 3.961}, {'end': 774.612, 'text': "So I'm going to write a function called partition.", 'start': 771.391, 'duration': 3.221}, {'end': 779.173, 'text': "It's going to receive an array and a start and an end.", 'start': 776.052, 'duration': 3.121}, {'end': 784.635, 'text': 'And then what did I say I want to do? I need to have a pivot index.', 'start': 781.334, 'duration': 3.301}, {'end': 792.259, 'text': 'which is going to start at zero, I need to have a pivot value, which is going to be the array at end.', 'start': 785.612, 'duration': 6.647}], 'summary': 'Writing a partition function for arrays with start, end, pivot index and value.', 'duration': 31.291, 'max_score': 760.968, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU760968.jpg'}, {'end': 1032.069, 'src': 'heatmap', 'start': 959.96, 'weight': 4, 'content': [{'end': 963.764, 'text': 'so that you can divide and conquer and do the right and left halves.', 'start': 959.96, 'duration': 3.804}, {'end': 965.599, 'text': 'Look at this.', 'start': 965.199, 'duration': 0.4}, {'end': 967.001, 'text': "I don't return that anywhere.", 'start': 965.94, 'duration': 1.061}, {'end': 969.283, 'text': "I just finish, and I'm like, I'm done.", 'start': 967.021, 'duration': 2.262}, {'end': 971.345, 'text': "Here's an undefined pivot index.", 'start': 969.363, 'duration': 1.982}, {'end': 974.908, 'text': 'I need to actually say return pivot index.', 'start': 971.705, 'duration': 3.203}, {'end': 978.752, 'text': 'What an important, important key line of code.', 'start': 975.089, 'duration': 3.663}, {'end': 987.461, 'text': "And I'm getting closer, everybody.", 'start': 981.515, 'duration': 5.946}, {'end': 990.742, 'text': 'And another mistake.', 'start': 989.301, 'duration': 1.441}, {'end': 992.423, 'text': "Oh, I've made so many mistakes.", 'start': 990.762, 'duration': 1.661}, {'end': 993.343, 'text': "I'm the worst.", 'start': 992.583, 'duration': 0.76}, {'end': 1002.207, 'text': "This is also from start, right? I'm so focused on thinking about the beginning first step, where you go from the beginning to the end of the array.", 'start': 994.223, 'duration': 7.984}, {'end': 1006.289, 'text': "But the whole idea of this partition function is that you're anywhere in the array.", 'start': 1002.407, 'duration': 3.882}, {'end': 1009.01, 'text': 'So this goes also from start to end.', 'start': 1006.609, 'duration': 2.401}, {'end': 1010.991, 'text': 'There we go.', 'start': 1010.031, 'duration': 0.96}, {'end': 1013.532, 'text': "So now there's my sorted array.", 'start': 1011.411, 'duration': 2.121}, {'end': 1016.554, 'text': 'You can see that the quick sort actually works.', 'start': 1013.953, 'duration': 2.601}, {'end': 1024.123, 'text': "All right, whoa, now that we're about three hours into this video, I should visualize it.", 'start': 1018.439, 'duration': 5.684}, {'end': 1032.069, 'text': "It's really tricky to visualize something that's happening recursively because it's not happening in an obvious first step, second step, third step.", 'start': 1024.423, 'duration': 7.646}], 'summary': 'Debugging process while implementing quick sort algorithm, emphasizing the importance of pivot index and the visualization challenge of recursive operations.', 'duration': 33.383, 'max_score': 959.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU959960.jpg'}], 'start': 383.265, 'title': 'Quicksort algorithm', 'summary': 'Covers implementing and understanding the quicksort algorithm, emphasizing the process, function, and recursive algorithm divide and conquer, and resolving errors in the partition function code.', 'chapters': [{'end': 460.965, 'start': 383.265, 'title': 'Implementing quick sort algorithm', 'summary': 'Illustrates the process of implementing the quick sort algorithm, emphasizing the need to write a function called quick sort, receiving an array, start, and end, to partition the array and utilize the partition function, with a focus on getting the sorting to work and visualizing the process.', 'duration': 77.7, 'highlights': ['The need to write a function called quick sort, receiving an array, start, and end, to partition the array and utilize the partition function The chapter emphasizes the necessity to write a function named quick sort that receives an array, start, and end parameters to partition the array and utilize the partition function.', 'Emphasizing the focus on getting the sorting to work and visualizing the process The chapter stresses the importance of focusing on getting the sorting to work and visualizing the quick sort algorithm.']}, {'end': 1037.792, 'start': 461.565, 'title': 'Understanding quicksort algorithm', 'summary': 'Introduces the recursive algorithm divide and conquer, explaining the partition function of the quicksort algorithm by sorting an array and resolving errors in the partition function code.', 'duration': 576.227, 'highlights': ['The chapter introduces the recursive algorithm divide and conquer The speaker introduces the basic idea of the recursive algorithm divide and conquer as the foundation for the QuickSort algorithm.', 'Explaining the partition function of the QuickSort algorithm The speaker elaborates on the partition function, illustrating its core algorithm and demonstrating its functionality by sorting an array.', 'Resolving errors in the partition function code The speaker encounters and rectifies multiple errors in the partition function code, emphasizing the importance of returning the pivot index for the algorithm to function correctly.']}], 'duration': 654.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU383265.jpg', 'highlights': ['The chapter emphasizes the necessity to write a function named quick sort that receives an array, start, and end parameters to partition the array and utilize the partition function.', 'The chapter stresses the importance of focusing on getting the sorting to work and visualizing the quick sort algorithm.', 'The speaker introduces the basic idea of the recursive algorithm divide and conquer as the foundation for the QuickSort algorithm.', 'The speaker elaborates on the partition function, illustrating its core algorithm and demonstrating its functionality by sorting an array.', 'The speaker encounters and rectifies multiple errors in the partition function code, emphasizing the importance of returning the pivot index for the algorithm to function correctly.']}, {'end': 1275.678, 'segs': [{'end': 1089.819, 'src': 'embed', 'start': 1066.108, 'weight': 0, 'content': [{'end': 1074.61, 'text': "If I'm making the quicksort function async, I'm going to want to await quicksort both calls to quicksort.", 'start': 1066.108, 'duration': 8.502}, {'end': 1083.875, 'text': 'I want to be able, those are happening asynchronously, and I want to await them, because I want everything to happen in the correct order.', 'start': 1074.95, 'duration': 8.925}, {'end': 1089.819, 'text': "I also want my partition function to happen asynchronously, so I'm going to put await in front of that.", 'start': 1083.895, 'duration': 5.924}], 'summary': 'Async quicksort function with partition happening asynchronously.', 'duration': 23.711, 'max_score': 1066.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU1066108.jpg'}, {'end': 1134.938, 'src': 'embed', 'start': 1106.651, 'weight': 2, 'content': [{'end': 1111.617, 'text': "There's like a little blip there, that little blip where you see it, but it sorts it so fast.", 'start': 1106.651, 'duration': 4.966}, {'end': 1118.326, 'text': "What this means is if I could just make something happen, and let's make swap asynchronous.", 'start': 1111.978, 'duration': 6.348}, {'end': 1122.24, 'text': "and let's await it everywhere.", 'start': 1120.618, 'duration': 1.622}, {'end': 1131.594, 'text': 'If I could just add a little delay somewhere, I could force the actual sorting algorithm to slow down, but draw would still be animating.', 'start': 1123.082, 'duration': 8.512}, {'end': 1134.938, 'text': 'So there are other places where swap happens there, swap and swap.', 'start': 1131.974, 'duration': 2.964}], 'summary': 'Algorithm can be slowed down by adding delay to force animation, making swap asynchronous and awaiting it everywhere.', 'duration': 28.287, 'max_score': 1106.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU1106651.jpg'}, {'end': 1172.131, 'src': 'embed', 'start': 1148.634, 'weight': 5, 'content': [{'end': 1157.163, 'text': 'So on Stack Overflow, I found this nice piece of code that basically takes setTimeout, the setTimeout JavaScript function, which has a callback.', 'start': 1148.634, 'duration': 8.529}, {'end': 1161.585, 'text': 'which is callback-based and resolves a promise when setTimeout finishes.', 'start': 1157.563, 'duration': 4.022}, {'end': 1165.347, 'text': 'And this is the equivalent of an asynchronous sleep function.', 'start': 1162.046, 'duration': 3.301}, {'end': 1169.47, 'text': "It's kind of like await and don't do anything, wait and don't do anything for this amount of time.", 'start': 1165.387, 'duration': 4.083}, {'end': 1172.131, 'text': "So I'm going to bring this function into my code.", 'start': 1169.73, 'duration': 2.401}], 'summary': 'Code from stack overflow implements an asynchronous sleep function using settimeout and promises.', 'duration': 23.497, 'max_score': 1148.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU1148634.jpg'}, {'end': 1263.827, 'src': 'embed', 'start': 1225.92, 'weight': 1, 'content': [{'end': 1227.321, 'text': "and that's really really fast.", 'start': 1225.92, 'duration': 1.401}, {'end': 1234.784, 'text': "I'm going to put a sleep time of like 25 milliseconds and you can sort of see how this is happening, little bit by bit, by bit by bit,", 'start': 1227.681, 'duration': 7.103}, {'end': 1235.424, 'text': "and then it's done.", 'start': 1234.784, 'duration': 0.64}, {'end': 1240.767, 'text': 'However, I forgot that I could use promise.all.', 'start': 1235.984, 'duration': 4.783}, {'end': 1250.673, 'text': 'So I could await promise.all, both of these calls to quicksort at the same time.', 'start': 1241.187, 'duration': 9.486}, {'end': 1263.827, 'text': 'So if I do that and just paste this one up here, this is getting to be pretty goofy advanced JavaScript stuff, but this is basically saying hey,', 'start': 1252.235, 'duration': 11.592}], 'summary': 'Demonstrating fast execution with a sleep time of 25 milliseconds and using promise.all for simultaneous calls to quicksort.', 'duration': 37.907, 'max_score': 1225.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU1225920.jpg'}], 'start': 1037.913, 'title': 'Async quicksort and delay function', 'summary': 'Demonstrates async and await in quicksort, async delay function, and optimizing quick sort visualization with promise.all, enabling efficient and asynchronous execution, and adding a delay for animation purposes.', 'chapters': [{'end': 1131.594, 'start': 1037.913, 'title': 'Async quicksort demonstration', 'summary': 'Demonstrates the implementation of async and await keywords in a quicksort function, enabling asynchronous calls and ensuring correct order of execution, while also considering the possibility of adding a delay to slow down the sorting algorithm for animation purposes.', 'duration': 93.681, 'highlights': ['The implementation of async and await keywords in the quicksort function allows for asynchronous calls and ensures the correct order of execution, enhancing the efficiency of the sorting algorithm.', 'Considering the addition of a delay to the sorting algorithm to slow down the process for animation purposes, while still allowing other tasks to proceed asynchronously.', 'The importance of using the await keyword to ensure that all asynchronous calls to quicksort and partition function happen in the correct order for efficient execution.']}, {'end': 1200.464, 'start': 1131.974, 'title': 'Creating async delay function', 'summary': 'Discusses the creation of an asynchronous delay function using settimeout in javascript, allowing the user to await a specified amount of time before continuing, exemplified by awaiting a sleep of 10 milliseconds before performing a swap operation.', 'duration': 68.49, 'highlights': ['The function focuses on creating an asynchronous delay function in JavaScript using setTimeout, allowing the user to await a specified amount of time before continuing.', 'The code exemplifies awaiting a sleep of 10 milliseconds before performing a swap operation.', 'The speaker initially considers using setTimeout to slow down the process, but ultimately decides to create a custom delay function that can be used with await.']}, {'end': 1275.678, 'start': 1200.704, 'title': 'Optimizing quick sort visualization', 'summary': 'Discusses optimizing the quick sort visualization by using promise.all to perform both sorting calls simultaneously, enhancing the visualization speed and efficiency.', 'duration': 74.974, 'highlights': ['Using promise.all to perform both sorting calls simultaneously enhances the visualization speed and efficiency.', 'Utilizing promise.all allows for both quicksort calls to happen at the same time, improving performance and speed.', "Visualizing the difference between using promise.all and the previous method allows for a clearer understanding of the optimization's impact."]}], 'duration': 237.765, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU1037913.jpg', 'highlights': ['The implementation of async and await keywords in the quicksort function allows for asynchronous calls and ensures the correct order of execution, enhancing the efficiency of the sorting algorithm.', 'Using promise.all to perform both sorting calls simultaneously enhances the visualization speed and efficiency.', 'Considering the addition of a delay to the sorting algorithm to slow down the process for animation purposes, while still allowing other tasks to proceed asynchronously.', 'Utilizing promise.all allows for both quicksort calls to happen at the same time, improving performance and speed.', 'The importance of using the await keyword to ensure that all asynchronous calls to quicksort and partition function happen in the correct order for efficient execution.', 'The function focuses on creating an asynchronous delay function in JavaScript using setTimeout, allowing the user to await a specified amount of time before continuing.']}, {'end': 1795.463, 'segs': [{'end': 1627.555, 'src': 'heatmap', 'start': 1597.003, 'weight': 1, 'content': [{'end': 1599.145, 'text': "All right, I've got the code in the state that I want.", 'start': 1597.003, 'duration': 2.142}, {'end': 1606.492, 'text': "I'm going to play you out and let you enjoy this last visualization of the quicksort.", 'start': 1599.545, 'duration': 6.947}, {'end': 1609.535, 'text': 'And please, make a nicer version of this.', 'start': 1607.272, 'duration': 2.263}, {'end': 1613.498, 'text': 'Add sound, add better colors, do all sorts of stuff.', 'start': 1610.115, 'duration': 3.383}, {'end': 1615.24, 'text': "Here I'm going to hit Refresh.", 'start': 1614.299, 'duration': 0.941}, {'end': 1623.693, 'text': 'Thank you for watching this coding challenge, visualizing the quicksort algorithm.', 'start': 1620.011, 'duration': 3.682}, {'end': 1626.735, 'text': 'You might notice that the version that I made looks OK.', 'start': 1624.033, 'duration': 2.702}, {'end': 1627.555, 'text': 'I did fine.', 'start': 1626.755, 'duration': 0.8}], 'summary': 'Visualized quicksort algorithm with improved aesthetics and functionality.', 'duration': 30.552, 'max_score': 1597.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU1597003.jpg'}, {'end': 1722.524, 'src': 'embed', 'start': 1695.313, 'weight': 0, 'content': [{'end': 1701.655, 'text': 'And maybe you have other ideas for your own version, for your own way of visualizing this quicksort algorithm using color, using sound,', 'start': 1695.313, 'duration': 6.342}, {'end': 1703.456, 'text': 'using shapes and design in a different way.', 'start': 1701.655, 'duration': 1.801}, {'end': 1709.298, 'text': "You don't have to be so literal about the array as just a bunch of bars going horizontally across the canvas.", 'start': 1703.676, 'duration': 5.622}, {'end': 1714.7, 'text': "Please share with me your version at thecodingtrain.com and I'll put a link in this video's description.", 'start': 1709.578, 'duration': 5.122}, {'end': 1717.642, 'text': "And there you'll find pages for all of my coding challenges.", 'start': 1714.96, 'duration': 2.682}, {'end': 1722.524, 'text': "Now, one of the things I really struggle with these days is how do I think of a new idea for next week's coding challenge?", 'start': 1717.662, 'duration': 4.862}], 'summary': 'Encourages creativity in visualizing quicksort algorithm, invites sharing of versions at thecodingtrain.com.', 'duration': 27.211, 'max_score': 1695.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU1695313.jpg'}, {'end': 1754.805, 'src': 'embed', 'start': 1728.148, 'weight': 2, 'content': [{'end': 1733.651, 'text': "But I'm excited to tell you about the sponsor of this video, where I is a treasure trove of more ideas for coding challenges.", 'start': 1728.148, 'duration': 5.503}, {'end': 1735.992, 'text': "and that's brilliant.org.", 'start': 1734.011, 'duration': 1.981}, {'end': 1740.135, 'text': 'Brilliant has a wide range of content, math and science and computer science.', 'start': 1736.253, 'duration': 3.882}, {'end': 1742.497, 'text': 'They have daily puzzles, they have courses.', 'start': 1740.315, 'duration': 2.182}, {'end': 1748.2, 'text': "I've actually been enjoying looking at their daily puzzles and trying to solve them with JavaScript.", 'start': 1742.877, 'duration': 5.323}, {'end': 1754.805, 'text': "And that's been a sort of fun way for me to try to learn something new and also practice a little more coding.", 'start': 1749.181, 'duration': 5.624}], 'summary': 'Brilliant.org offers a wide range of math, science, and computer science content, with daily puzzles and courses for learning and practicing coding.', 'duration': 26.657, 'max_score': 1728.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU1728148.jpg'}], 'start': 1275.978, 'title': 'Visualizing the quicksort algorithm', 'summary': 'Explores visualizing the quicksort algorithm, discussing different partition schemes, and encourages creating unique visualizations. it demonstrates a specific visualization with code and mentions a sponsor, brilliant.org.', 'chapters': [{'end': 1795.463, 'start': 1275.978, 'title': 'Visualizing the quicksort algorithm', 'summary': 'Explores visualizing the quicksort algorithm, discussing different partition schemes, and encourages creating unique visualizations. it demonstrates a specific visualization with code and mentions a sponsor, brilliant.org.', 'duration': 519.485, 'highlights': ['The chapter explores visualizing the quicksort algorithm, discussing different partition schemes, and encourages creating unique visualizations. The transcript covers the process of visualizing the quicksort algorithm, discusses different partition schemes, and encourages creating unique visualizations.', 'It demonstrates a specific visualization with code. The speaker demonstrates a specific visualization of the quicksort algorithm using code, showcasing the visual representation of the algorithm.', 'Mentions a sponsor, Brilliant.org, and encourages the audience to explore their content and courses. The transcript includes a mention of the sponsor, Brilliant.org, and encourages the audience to explore their content and courses related to math, science, and computer science.']}], 'duration': 519.485, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eqo2LxRADhU/pics/eqo2LxRADhU1275978.jpg', 'highlights': ['The chapter explores visualizing the quicksort algorithm, discussing different partition schemes, and encourages creating unique visualizations.', 'It demonstrates a specific visualization with code.', 'Mentions a sponsor, Brilliant.org, and encourages the audience to explore their content and courses.']}], 'highlights': ['Quicksort is on average a Big O, n log n algorithm, making it more efficient than bubble sort which typically takes O n squared.', 'The key feature of quicksort is its divide and conquer approach using recursion to recursively subdivide and sort different parts of the array until the entire array is sorted.', 'The implementation of async and await keywords in the quicksort function allows for asynchronous calls and ensures the correct order of execution, enhancing the efficiency of the sorting algorithm.', 'Using promise.all to perform both sorting calls simultaneously enhances the visualization speed and efficiency.', 'The chapter explores visualizing the quicksort algorithm, discussing different partition schemes, and encourages creating unique visualizations.']}