Advanced Sorting Visualizer with JavaScript

This is part of a Sorting Tutorial Series I'm making. In this video You'll learn how to make a really advanced sorting visualizer with an animated character. I made this using HTML Canvas and vanilla JavaScript and in this video you'll see my full thought process as I develop this application.

My other Sorting Visualizer tutorials are here:

⭐️LINKS⭐️

Visualizer I was inspired by:

My Visual Web Development (VWD) Course:

My Melody Maker Tutorial:

My Interpolation Lesson:

⭐️ TABLE OF CONTENT ️⭐️

0:00 Intro
1:49 HTML Canvas Project Setup
2:25 Array with Random values
6:30 Visualizing the Objects to be Sorted
24:51 Animating the Swaps
1:07:17 Physics (Verlet Integration)
2:18:58 Styling the Socks
2:47:37 Character Design and Animation
3:56:20 Fine-tuning animation with easing
4:29:11 Styling the Animated Character
5:50:55 Trying different Layouts

[Radu]

What do you guys think? Should I make more videos like this?

[outsomnia]

You're the best programming channel i've ever seen, and i've seen almost all the channels out there(another best channel i can compare you to is "Bro Code"). other channels focus on new technologies and try to make a quick buck by uploading 1-2 hour videos of basic usage of some language/framework with the simple todo list apps and explaining basics for 100th time. meanwhile you're literally adding physics on the visualization part of the tutorial and even explain how you made it. i don't use advanced 3d physics in my everyday work in JS and i mostly work on the backend but i improved significantly as a programmer by watching your content and i gotta say, thank you for that big man. you're the gigachad of the programming channels.

[henrmota]

You are insane. 💥. I'm an experienced programmer and I learn so much with your videos!!!!

[pesterenan]

I'm just a third of the way watching the video, and I have to say that it's really awesome to see you programming, making mistakes, thinking on how to solve them, and also explaining what you're doing! I find it amusing that you can achieve so many things with just vanilla JS. The animations always look superb, and I had the same reaction watching the socks spring to life at around 02:08:00 hahah
Awesome work Radu!

[matiassomoza]

This is awesome. You are really creative. I would love to learn more data structures and algorithms this way. Thank you Rudu.

[KostasOreopoulos]

What an amazing video and inspiration to delve into various topics.

[sameerahmad]

I love this approach so that thought process can be convey make some more DSA project so that we can see real use of algorithms by doing...love you radu..

[average.dude.]

31:39 i think the reason it is not clearing is because of the event loop, the browser doesnt execute the next paint so even though it is cleared the ui is not updated yet

[davidarnold]

How do you not have more subscribers - you are

[kanikakaushikofficial]

aAt the very first ...i am very thankful to you that you are helping everyone a lot and the way of your teaching is fabulous ... please make a video for all type of soting visualizer in one project only

[imonraj]

Fantastic channel, different from most of frontend videos

[uc_cursor]

Hello Radu, please make one DSA course based beginning to advance level problems in javascript....

[gaming_zen_]

Will you be doing videos about DSA in the future..? 🤨

[chandansinghtanwar]

So in this visualizer project are there any sorting algorithms deployed or we can implement all the sorting algorithms ourselves by watching the video?

[ibjzzmp]

can you implement bubble sort and all....?

[javifontalva]

I added blinking to the bird.


I create a time variable than I add in the animate function in script:
let time = 0
function animate(){
time = 0.01

..
then pass time ont the draw onto bird.draw

changed = bird.draw(ctx, time, tweenLength) || changed;

then in bird.js I add the property this.blinking = false and
in draw methond I add the paramenter time as well as in #drawHead and inside drawHead I added this


this.blinking = time % 8 <= 0.7 ? true : false;

if (this.blinking) {
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.ellipse(
this.head.x - radius * 0.5,
this.head.y,
eyeSize * 0.6,
eyeSize * 0.1,
-0.3,
0,
Math.PI * 2
);
ctx.ellipse(
this.head.x + radius * 0.5,
this.head.y,
eyeSize * 0.6,
eyeSize * 0.1,
+0.3,
0,
Math.PI * 2
);
ctx.fill();
}
if (!this.blinking) {
ctx.ellipse(
this.head.x - radius * 0.5,
this.head.y,
eyeSize * 0.6,
eyeSize * 0.8,
-0.3,
0,
Math.PI * 2
);
ctx.ellipse(
this.head.x + radius * 0.5,
this.head.y,
eyeSize * 0.6,
eyeSize * 0.8,
+0.3,
0,
Math.PI * 2
);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.save()
ctx.fillStyle = "black";
ctx.ellipse(
this.head.x - radius * 0.6,
this.head.y -13,
eyeSize * 0.9,
eyeSize * 0.20,
+0.2,
0,
Math.PI * 2
);
ctx.ellipse(
this.head.x + radius * 0.6,
this.head.y -13,
eyeSize * 0.9,
eyeSize * 0.20,
-0.2,
0,
Math.PI * 2
);
ctx.fill();



quite cute birdie!! I hope you like it.

P.S: I am really enjoying coding with you Radu. THANKS A LOT!!