Uploaded December 2022 | Updated September 2026, 2 weeks ago

---

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:
1. youtu.be/_AwSlHlpFuc
2. youtu.be/UfbQFoMhux8


⭐️LINKS⭐️

Visualizer I was inspired by:
youtu.be/TZRWRjq2CAg

My Visual Web Development (VWD) Course:
https://www.youtube.com/playlist?list...

My Melody Maker Tutorial:
youtu.be/JNtuLw2fybo

My Interpolation Lesson:
youtu.be/J_puRs40GhM

Code on my website: radufromfinland.com


⭐️ 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