The end goal is so awesome! I guess people don't appreciate how much effort you put in these videos. Every little hint, like changing attributes in the inspector before changing them on the code, or abstracting away and calling the functions using arguments, that is so important in web dev, and you make it look so natural, this is really wonderful!
Thank you. Means a lot :-) After doing videos for a while, I also look differently at other creators. There's a lot of thought going on behind the scenes that people don't really notice.
i always has the starting music stucked in my head for a while, Coding with Radu, coding with Radu 🎵🎶🎵🎶🎶🎶 Thanks Radu, nice video, waiting for the next.
Very good video. I have developed a sorting visualizer project. And this was the first video I watched last year that motivated me and taught me how to approach the project. Very good explanation.
You are awesome, it's so abstract and boring to learn data structures and algorithms and only being able to watch endless nested objects in the console; I've been looking for this kind of content for the last year and a half. Thank you!!
Another great video! I also like all sorts of puns you make at the beginning of your videos... Get it? All *sorts* ? Because this video... No, no, no...
You can go to my website (linked in the description) and look for the sorting visualizers. You can download the code if you register on the website... but also if you right click and save the page locally on the computer (so, no login really necessary).
Because the original gets sorted when collecting the moves. We need to reproduce these moves during the animation on the same array we had in the beginning. That's why we need a copy.
I do have a video where I show how to adapt it to... quicksort and... insertion sort (if I remember right), using ChatGPT. Let me know if you can't find it on my channel.
Well... it depends what UI elements you want to use. Maybe using an input field where you separate numbers by comma ',' and then parse it to separate according to the comma using split.
function quicksort(arr, left, right) { const swaps = []; var p; if (arr.length > 1) { p = partition(arr, left, right, swaps); // animate(swaps); } if (left < p - 1) { quicksort(arr, left, p - 1); } if (right > p + 1) { quicksort(arr, p + 1, right); } return swaps; } function partition(arr, left, right, swaps) { var pivot = (left + right) / 2; var i = left; var j = right; while (i
I'm on holiday and won't be testing any code anytime soon, but I think your pivot should be Math.floor((left + right) / 2); otherwise you'll get problems when you try to access floating point indices in an array.
I know its a year late but ... its possible to adapt this visualizer to a non- swapping sorting algorithms like insertion sort, quick sort or bucket sort ?
I added a new effect to the animation when this is over. in the if (moves.length ==0) . changed it to. if (moves.length == 0) { const bars = document.querySelectorAll(".bar"); for (let i = bars.length - 1; i >= 0; i--) { const bar = bars[i]; const previousBar = bars[i + 1]; setTimeout(function() { bar.style.backgroundColor = "green"; playNote(200 + array[i] * 500); if (previousBar) { previousBar.style.backgroundColor = "black"; playNote(200 + array[i+1] * 500) if (i == 0){ bars[0].style.backgroundColor = "black"; }
Great video Radu ! I was wondering if you have done any implementations with other sorting algorithms (insertion, merge, quick, heap, etc.) that preserve the cool audio effects from this bubble sort algorithm.
No, but this visualizer is so generic it can be applied to any sorting algorithm. You just have to log which swap is made and then it will be replayed afterwards.
@@Radu can u explain it any further i dont quite get it im a beginner, i just made a button stop and made a function stop() where i put inti() but how can i stop it, by above mentioned i get the clearTimeout(t) but what do we store in the variable t? u said we need to store timeout in a variable but timeout is an inuilt funtion i guess... pls help
@@Radu hhhhhh, I just saw the video, keep it up, bytheway I really want to master well JavaScript, don't know if there is any suggestion you can give or any help. Thank you
@@gabrielntera5679 :-)) hope you don't take the video seriously. All I can recommend is practice... Work on projects you find interesting so you stay motivated and like what you do.
@@Radu hhhhhh! It's funny yeah, but I've got the message behind. Yeah sure, thank you, and thank you for your reply, bytheway your courses are interesting but also advanced level, I'll try to continue going through them and at and see where I can get. Once again thank you, your channel end teaching skills should be a reference for many
As for the performance, it would be better to not recreate all bars every time you swap two bars. Better get them by id and change their heights. (This then can also be animated.)
Check out the 3 visualizers and their source code on my website :-)
The end goal is so awesome! I guess people don't appreciate how much effort you put in these videos. Every little hint, like changing attributes in the inspector before changing them on the code, or abstracting away and calling the functions using arguments, that is so important in web dev, and you make it look so natural, this is really wonderful!
Thank you. Means a lot :-)
After doing videos for a while, I also look differently at other creators. There's a lot of thought going on behind the scenes that people don't really notice.
man your sense of humor is innocent and your calm nature is fun to watch.
I knew it! I do have a sense of humor.
@@Radu do some distributed programming project. like in real how fb uses messenger.
Will consider it, thanks!
I swear I was searching for this a month ago RADU IS A LEGEND
Good you found what you were looking for :-)
i always has the starting music stucked in my head for a while, Coding with Radu, coding with Radu 🎵🎶🎵🎶🎶🎶 Thanks Radu, nice video, waiting for the next.
Haha :-) guess I made a hit!
I will never not laugh at the _"Get it? Because of this? oh no no no!"_ hahahahah
I have several videos recorded already where I don't do it, but... maybe I'll try to do it more often in the future :-)
Very good video. I have developed a sorting visualizer project. And this was the first video I watched last year that motivated me and taught me how to approach the project. Very good explanation.
Glad it was helpful!
I love your content. You mix all my favorite subjects together: mathematics, computer science, data science, and web development. Great job!
Great to hear :-) Thanks for watching!
You are awesome, it's so abstract and boring to learn data structures and algorithms and only being able to watch endless nested objects in the console; I've been looking for this kind of content for the last year and a half. Thank you!!
Great to hear it helped you out :-)
very well explained just finished the project and it is working really great
Great to hear!
Another great video!
I also like all sorts of puns you make at the beginning of your videos... Get it? All *sorts* ? Because this video... No, no, no...
Experimenting with those puns from time to time. Maybe I'll make it a habit on the channel :-)
I like the puns, please do
Just simply put the code, it works! thanks!
You're welcome!
Amazing tuto, I've just redid it with Canvas and Typescript and implemented the insertion algorithm, you inspire me a lot, thank you
Awesome! I would also like to visualize more algorithms. Maybe I will at some point :-)
This is my first time practically using a do while loop
It might be the first time I used one in a RUclips video :-D not 100% about that.
the logging mechanism is a really good idea thank you Radu :D
You're welcome :-)
Keep going radu, we're loving your creativity .Love and support from ⚪🟠🟢 🇮🇳. ♥♥♥
Thanks :-)
Oh yeah!
Glad to see you're excited :-)
Great teaching sir...need more projects like these...love learning from you...
Thank you :-) more will come!
Hey Thanks Radu, I have followed u r lecture and written code Thanks man
Glad to hear that!
i really apreciate your help with dowloanding this software
You can go to my website (linked in the description) and look for the sorting visualizers. You can download the code if you register on the website... but also if you right click and save the page locally on the computer (so, no login really necessary).
Love your content! I would love to see and play that sorting algorithm game.
Ok, noted. Let's see when I have time for this one!
wow! as always you suprise us with new and fresh content.
I always had a feeling that sorting visualizers are... old news. But maybe I can do something different, let's see!
Great video (as always)! I always learn a lot from your videos!
Good to hear!
17:36 I didn't understood why we need another copy of the array ? Can you please explain that again? Please !?
Because the original gets sorted when collecting the moves. We need to reproduce these moves during the animation on the same array we had in the beginning. That's why we need a copy.
@@Radu Oh ! Now I get it. Thanks a lot!
@@kafkatamura2461 No problem :-)
Thanks for such an amazing video sir
Thanks for watching :-)
Thanks! Easy and clear tutorial!
You're welcome!
Like always your video is an inspiration, so fill of content and so well explained, thanks.
Happy to hear :-)
works, chock-full thanks!
You're welcome!
I tried to add it to all the sorting algorithms
But I am getting error for selection and merge sort
I do have a video where I show how to adapt it to... quicksort and... insertion sort (if I remember right), using ChatGPT. Let me know if you can't find it on my channel.
Learnt a lot. Thanks! ❤❤
You're welcome 😊
Awesome! Thank you!
You're welcome!
this project creates a random array i want to make it as per the users input how can i do that - i mean user will enter the array size and elements
Well... it depends what UI elements you want to use.
Maybe using an input field where you separate numbers by comma ',' and then parse it to separate according to the comma using split.
Really cool video! Thank you!
Glad you liked it!
function quicksort(arr, left, right) {
const swaps = [];
var p;
if (arr.length > 1) {
p = partition(arr, left, right, swaps);
// animate(swaps);
}
if (left < p - 1) {
quicksort(arr, left, p - 1);
}
if (right > p + 1) {
quicksort(arr, p + 1, right);
}
return swaps;
}
function partition(arr, left, right, swaps) {
var pivot = (left + right) / 2;
var i = left;
var j = right;
while (i
I'm on holiday and won't be testing any code anytime soon, but I think your pivot should be Math.floor((left + right) / 2); otherwise you'll get problems when you try to access floating point indices in an array.
@@Radu thnxs
I know its a year late but ... its possible to adapt this visualizer to a non- swapping sorting algorithms like insertion sort, quick sort or bucket sort ?
I *think* that all in-place sorting algorithms swap things around.
And, I did do this video recently: ruclips.net/video/of0CBt4RDM4/видео.html
I added a new effect to the animation when this is over. in the
if (moves.length ==0) . changed it to.
if (moves.length == 0) {
const bars = document.querySelectorAll(".bar");
for (let i = bars.length - 1; i >= 0; i--) {
const bar = bars[i];
const previousBar = bars[i + 1];
setTimeout(function() {
bar.style.backgroundColor = "green";
playNote(200 + array[i] * 500);
if (previousBar) {
previousBar.style.backgroundColor = "black";
playNote(200 + array[i+1] * 500)
if (i == 0){
bars[0].style.backgroundColor = "black";
}
;}
}, 100 * (bars.length - i));
}
return;
}
Nice :-) the green bar going from right to left and the melody mark that the sorting was done!
Radu, thank you very much!!! Great video!!!
Thanks! :-)
Thanks ❤❤❤❤
No problem :-)
Speechless😮
Glad you liked it :-)
Most awaited video man
Yeah, hope it was worth it :-))
Great video Radu ! I was wondering if you have done any implementations with other sorting algorithms (insertion, merge, quick, heap, etc.) that preserve the cool audio effects from this bubble sort algorithm.
No, but this visualizer is so generic it can be applied to any sorting algorithm. You just have to log which swap is made and then it will be replayed afterwards.
Very interested in the AudioAPI part, I’ll check your video on it !
Ok. I hope it was explained well enough there... haven't seen that material for a while. Let me know if I should redo it!
Great video ❤️..I have a doubt my bubble sort keep on happening even if I press init button. How to reset it.
You would need to store the timeout into a variable. Let's call it 't'. Then, you can call clearTimeout(t); to stop the animation.
@@Radu can u explain it any further i dont quite get it im a beginner, i just made a button stop and made a function stop() where i put inti() but how can i stop it, by above mentioned i get the clearTimeout(t) but what do we store in the variable t? u said we need to store timeout in a variable but timeout is an inuilt funtion i guess... pls help
Radu bhau no.1
:-)
in the elements section container div is not showing any style div
Would be nice if I can have a look at your code (maybe share it on my Discord?)
You are best ;) Thank You !!!!!!!!!!!!!!!!
You're welcome!
loved your content 🎉
Thank you! :-)
nice song
Thank you :-)
Grazie.
Did I just get payed? :-O
i want to add pause function . and i will add prompt for user input but how to add delay in prompt plzz any one know , tell me
I'm not sure what you mean by adding delay in prompt.
In prompt setTimeOut i want use but there is not work
You might want to share the code with me somehow (like on my discord).
is it possible to develop a code editor like vscode in javascript with syntax highlighting, intelligent code completion features?
Sure it is, like what codepen has. I don't think it has code completion features, but those are possible to add, I'm sure.
Can anyone send me the code for this project I want it in urgent.
It's on my website (linked in the description).
working, thx
You're welcome :-)
You're so good, I'm wondering what it took you like to get to that level of algorithm and programing knowledge. Anyways we appreciate , thank you
Ah, yes, my training. Very well documented here at (1:25) ruclips.net/video/FODkJ0zG0QQ/видео.html
@@Radu hhhhhh, I just saw the video, keep it up, bytheway I really want to master well JavaScript, don't know if there is any suggestion you can give or any help. Thank you
@@gabrielntera5679 :-)) hope you don't take the video seriously. All I can recommend is practice... Work on projects you find interesting so you stay motivated and like what you do.
@@Radu hhhhhh! It's funny yeah, but I've got the message behind. Yeah sure, thank you, and thank you for your reply, bytheway your courses are interesting but also advanced level, I'll try to continue going through them and at and see where I can get. Once again thank you, your channel end teaching skills should be a reference for many
@@gabrielntera5679 Thanks for the nice words. Good luck with your studies!
I am your 900th like!
How so? :-) video has only 149 at the moment.
I love the intro song
Haha, thanks :-)
Dont know why the function call from html(init, play) are not working 😢
Share your code somehow? (Like on my Discord)
@@Radu problem is solved, was using oneclick, insted of onclick 😶.
@@tushar5359 Ah, ok :-)
great video!
Thanks!
Hey on your intro ,its you or your body animation?
It's me... looks weird, or what? :-)
Very good 👍
Thanks!
As for the performance, it would be better to not recreate all bars every time you swap two bars. Better get them by id and change their heights. (This then can also be animated.)
Sure! Thanks for the tip :-)
More videos likes this sir
I'll try :-)
The video works perfectly with playback speed of 1.5
Cool :-) It's how I watch it as well when I do the editing to save time :-D
@@Radu Thanks man. I now have a way to add sound to my own project.
Watch later. I have exams soon.😢
Good luck at the exams :-)
sarcasm.
ok.
I was going to subscrib you lol until you singing(joke ....
Hope you don't find my other singing videos :-D
Using AI to make the video
No, just some weird camera settings that make it look strange :-P
Fantastic and fun! I'm sharing it! Send loves
Thanks! Glad you liked it.