Coding Challenge #143: Quicksort Visualization

References:

Videos:

Related Coding Challenges:

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

#sortingvisualization #quicksortalgorithm #p5js #javascript

[Birbone]

19:40 When your quick sort algorithm is so quick that you had to add sleep timeout to slow it down.

[NormalizedNerd]

was looking for the visualization of quick sort....glad you made this video :)

[ryaneakins]

This is very nice, but have you seen sorting algorithms visualised as Hungarian dances?

[hankhill-]

I've waited so long for this video! 👍

Actually I have to confess: Last August (once you made the video about your bubble sort visualization) I decided to use 'Visualization of Sorting Algorithms' as the topic for my upcoming term paper in computer science at school. And so I did it. All the time I was hoping that you are going to continue this series. But unfortunately you haven't.
So I was forced to work on my own for the rest of the term paper. I've made research on five different sorting algorithms and visualized them in javascript using p5.
Retrospectively this outcome was even better than expected. It helped me to understand the whole topic and taught me that cheating in something like this isn't helpful at all.

Nevertheless thank you so much for your great, funny and awesome work all the time!!! 👍

P.S.: I'm 17 currently, doing my A-Levels, come from Germany and really got the best grade possible for this project (in GER it's 15 Points ;D ). My english isn't that good... I know but I hope you could understand it ;D Keep up with your great work!!!

[jcjeong]

Thank you so much for taking the time to do this! PS instead of swap function, easy way to swap array elements in ES6 is: [ arr[a], arr[b] ] = [ arr[b], arr[a] ];

[MajorMandyKitten]

Can I just say that I always appreciate your videos? they're super inspiring!

[bapolino]

15:40 typical debugging.... was this the only mistake. Oh no nevermind

[cosmiccatnap]

This was incredible, thank you so much I feel like i've made more progress on understanding this in the last half hour than I have all afternoon.

[Taterzz]

i swear this dude is the bob ross of coding. he manages to make something intricate and often irritating to deal with entertaining and insightful.

[rafaelgpontes]

I actually had to implement this algorithm last week! It's comforting knowing that I'm not the only one who struggled with a bunch of errors doing this! Hahaha

[dcts]

Wow this is by far the best explenation for QuickSort!! You have such an incredible talent abstract things in a simple way. I loved that you didnt explain the partition algorithm at first, explaining the overall strategy first and then breaking down part by part...! I can see the beauty of quicksort now so clearly! Thanks so much for your work!

[yuli]

"Maybe my diagraming and explaining isn't the greatest..."

Bro, your whiteboard explanation was so to the point that I learned how a quick sort algorithm works in 6 minutes

[mattshu]

I was obsessed with those sorting visualization videos and tried tinkering with making it in Java but this makes it much easier thank you!!

[akruijff]

For a better pivot: pivot = start/2 + end/2. This works better when the array is (already) sorted.

[grainfrizz]

I'm not a JavaScript programmer but when you where doing await to both quickSort I was shouting that's now synchronous, lol! And then I was hoping there's Task.All() you could use. Then voilà, Promise.All(); :)

I never thought JS would be so much similar to C#.

[atelektase]

A *quick* explanation of QuickSort:
1. Pick a random element. That's your pivot.
2. Move elements larger than the pivot to the right, and elements smaller than the pivot to the left.
3. Put your pivot back between the 2 subarrays you just created. BOOM your pivot is in its sorted place!
4. Go to the first subarray and repeat the first 3 steps. Continue when you're at the start of the array.
5. After going all the way down, go back up subarray by subarray (ignoring the already sorted stuff) until you're at the top.
6. Done.

[kevnar]

I have a theory that Daniel Shiffman is actually an ultra genius, thinking 9 levels deep and doing 5D chess in his head on the fly. The mistakes he makes are on purpose, planned out exactly, just to help us all learn the process of debugging. If you've seen the 4D coordinate rotation stuff he did in his tesseract video, you know he's no dummy.

Thanks, Daniel. You're a beautiful person.

[erjonfanaj]

Hoare has a shuffle method first
- lo at [0], i at [1], hi at array.length - 1
- 1st element in the array will be the pivot and you just need to follow the rules
1.If lo < i ; i++
2.else if hi > lo; hi- -
3.else swap lo <-> i
4. If swap ... lo is pivot.
And every time you use rules, you continue with the rule that was true in the preview step. Simple

[minijimi]

Good job, I like the fact you made a plan on the white board and then implemented it. Of course it will not work the first time, things take time to debug and optimize.

[geoffwagner]

this array handling in a function is very interesting. i didn't know could be a third constructor space to hold an array and flip through with more place holders