Uploaded November 2021 | Updated September 2026, 1 week ago
HTML canvas offers two ways to draw smooth elastic curves, what's the difference? 'quadraticCurveTo' is used to draw ONE curve and 'bezierCurveTo' can draw TWO curves, let's use it in a project! We will draw animated audio visualizers with JavaScript and learn about CSS3 animations, HTML5 canvas and Web Audio API in the process. Maybe I played too much Pokémon RPGs back in the day, sorry :D
Longer DEEP DIVE version of this tutorial available here:
🎵 Audio Magic with JavaScript youtu.be/qNEb9of714U
⭐️TABLE OF CONTENT ⭐️
00:00 quadraticCurveTo and bezierCurveTo explained
00:33 Vanilla JavaScript audio visualizers
01:27 SVG images in HTML
02:40 CSS styles, stroke-dasharray, stroke-dashoffset
03:43 HTML canvas setup with JavaScript
04:21 ES6 classes
04:54 Animation loop
06:02 How to use Web Audio API to capture microphone audio
11:09 Connecting audio data and canvas animations
14:15 'Snail shell' circular audio visualizer
24:24 Seahorse visualizer with bezierCurveTo
🎨 SVG code: 🎨 (feel free to use these for your own art)
SNAIL frankslaboratory.co.uk/downloads/svg/snail.svg
SEAHORSE frankslaboratory.co.uk/downloads/svg/seahorse.svg
BAT frankslaboratory.co.uk/downloads/svg/bat.svg
FOX frankslaboratory.co.uk/downloads/svg/fox.svg
ANGLERFISH frankslaboratory.co.uk/downloads/svg/anglerfish.svg
OWL frankslaboratory.co.uk/downloads/svg/owl.svg
DEER frankslaboratory.co.uk/downloads/svg/deer.svg
DINOSAUR frankslaboratory.co.uk/downloads/svg/dinosaur.svg
MOTH frankslaboratory.co.uk/downloads/svg/moth.svg
CHAMELEON frankslaboratory.co.uk/downloads/svg/chameleon.svg
❤ Related Audio Tutorials (Web Audio API) ❤
🎵 JavaScript sound complete course (from basics to visualizers) youtu.be/VXWvfrmpapI
🎵 10 audio visualizer experiments youtu.be/f0dwg99EVfo
🎵 Audio Magic with JavaScript youtu.be/qNEb9of714U
🎵 Talking Pumpkin Audio Visualizer with Radu youtu.be/plnhFAHEfrM
🎵 Melody Maker app with Radu youtu.be/JNtuLw2fybo
Recommended Udemy courses (get solid understanding of the basics and then use it to build projects):
☕ Object-oriented Programming in JavaScript (Mosh Hamedani) bit.ly/3f4Otu0
☕ JavaScript Basics for Beginners (Mosh Hamedani) bit.ly/32Tn5wq
☕ Modern JavaScript From The Beginning (Brad Traversy) bit.ly/3fWJgWk
☕ JavaScript: Understanding the Weird Parts bit.ly/2WVe0zn
☕ Modern HTML & CSS From The Beginning (Including Sass) bit.ly/2Ec6Cch
☕ Advanced CSS and Sass: Flexbox, Grid, Animations and More! bit.ly/3g0uqxT
☕ JavaScript: The Advanced Concepts (2021) bit.ly/2Uk6Wyk
☕ JavaScript - The Complete Guide 2021 (Beginner + Advanced) bit.ly/37Hlxqq
☕ The Complete JavaScript Course 2021: From Zero to Expert! bit.ly/3fXGwaZ
☕ 20 Web Projects With Vanilla JavaScript bit.ly/3anlCQR
☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid bit.ly/3tu9ghD
☕ Modern HTML & CSS From The Beginning (Including Sass) bit.ly/2Ec6Cch
☕ Advanced CSS and Sass: Flexbox, Grid, Animations and More! bit.ly/3g0uqxT
Free good quality courses:
Object-oriented Programming in JavaScript: Made Super Simple | Mosh youtu.be/PFmuCDHHpwk
JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour youtu.be/W6NZfCO5SIk
JavaScript: Understanding the Weird Parts - The First 3.5 Hours youtu.be/Bv_5Zv5c-Ts
🎵 Music: (YouTube audio library) Dub Hub - Jimmy Fontanez Media Right Productions
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory
HTML canvas offers two ways to draw smooth elastic curves, what's the difference? 'quadraticCurveTo' is used to draw ONE curve and 'bezierCurveTo' can draw TWO curves, let's use it in a project! We will draw animated audio visualizers with JavaScript and learn about CSS3 animations, HTML5 canvas and Web Audio API in the process. Maybe I played too much Pokémon RPGs back in the day, sorry :D
Longer DEEP DIVE version of this tutorial available here:
🎵 Audio Magic with JavaScript youtu.be/qNEb9of714U
⭐️TABLE OF CONTENT ⭐️
00:00 quadraticCurveTo and bezierCurveTo explained
00:33 Vanilla JavaScript audio visualizers
01:27 SVG images in HTML
02:40 CSS styles, stroke-dasharray, stroke-dashoffset
03:43 HTML canvas setup with JavaScript
04:21 ES6 classes
04:54 Animation loop
06:02 How to use Web Audio API to capture microphone audio
11:09 Connecting audio data and canvas animations
14:15 'Snail shell' circular audio visualizer
24:24 Seahorse visualizer with bezierCurveTo
🎨 SVG code: 🎨 (feel free to use these for your own art)
SNAIL frankslaboratory.co.uk/downloads/svg/snail.svg
SEAHORSE frankslaboratory.co.uk/downloads/svg/seahorse.svg
BAT frankslaboratory.co.uk/downloads/svg/bat.svg
FOX frankslaboratory.co.uk/downloads/svg/fox.svg
ANGLERFISH frankslaboratory.co.uk/downloads/svg/anglerfish.svg
OWL frankslaboratory.co.uk/downloads/svg/owl.svg
DEER frankslaboratory.co.uk/downloads/svg/deer.svg
DINOSAUR frankslaboratory.co.uk/downloads/svg/dinosaur.svg
MOTH frankslaboratory.co.uk/downloads/svg/moth.svg
CHAMELEON frankslaboratory.co.uk/downloads/svg/chameleon.svg
❤ Related Audio Tutorials (Web Audio API) ❤
🎵 JavaScript sound complete course (from basics to visualizers) youtu.be/VXWvfrmpapI
🎵 10 audio visualizer experiments youtu.be/f0dwg99EVfo
🎵 Audio Magic with JavaScript youtu.be/qNEb9of714U
🎵 Talking Pumpkin Audio Visualizer with Radu youtu.be/plnhFAHEfrM
🎵 Melody Maker app with Radu youtu.be/JNtuLw2fybo
Recommended Udemy courses (get solid understanding of the basics and then use it to build projects):
☕ Object-oriented Programming in JavaScript (Mosh Hamedani) bit.ly/3f4Otu0
☕ JavaScript Basics for Beginners (Mosh Hamedani) bit.ly/32Tn5wq
☕ Modern JavaScript From The Beginning (Brad Traversy) bit.ly/3fWJgWk
☕ JavaScript: Understanding the Weird Parts bit.ly/2WVe0zn
☕ Modern HTML & CSS From The Beginning (Including Sass) bit.ly/2Ec6Cch
☕ Advanced CSS and Sass: Flexbox, Grid, Animations and More! bit.ly/3g0uqxT
☕ JavaScript: The Advanced Concepts (2021) bit.ly/2Uk6Wyk
☕ JavaScript - The Complete Guide 2021 (Beginner + Advanced) bit.ly/37Hlxqq
☕ The Complete JavaScript Course 2021: From Zero to Expert! bit.ly/3fXGwaZ
☕ 20 Web Projects With Vanilla JavaScript bit.ly/3anlCQR
☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid bit.ly/3tu9ghD
☕ Modern HTML & CSS From The Beginning (Including Sass) bit.ly/2Ec6Cch
☕ Advanced CSS and Sass: Flexbox, Grid, Animations and More! bit.ly/3g0uqxT
Free good quality courses:
Object-oriented Programming in JavaScript: Made Super Simple | Mosh youtu.be/PFmuCDHHpwk
JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour youtu.be/W6NZfCO5SIk
JavaScript: Understanding the Weird Parts - The First 3.5 Hours youtu.be/Bv_5Zv5c-Ts
🎵 Music: (YouTube audio library) Dub Hub - Jimmy Fontanez Media Right Productions
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory
![Vanilla JavaScript Text Animation Tutorial [Particles & Physics effect]](https://i.ytimg.com/vi/XGioNBHrFU4/mqdefault.jpg "Vanilla JavaScript Text Animation Tutorial [Particles & Physics effect]
Improved extended version with full source code and source code for 10 bonus variations here https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01
Lets take any letter, word or a sentence and in three steps convert it into interactive particles effect. All in Vanilla JavaScript, no frameworks and no libraries.
In todays vanilla JavaScript text animation tutorial we will learn how to give particles some motion physics and apply forces such as friction and acceleration, then we will get the particles to form any shape we want, in this case letter shapes, and connect individual particles with lines similar to famous particles.js library, but we will use no libraries, everything we build today is from scratch using just plain vanilla JavaScript. I will explain all the code line by line as I always do.
LIKE the video please if youre getting value out of my tutorials and SUBSCRIBE if you want to learn more vanilla JavaScript!
More pixel manipulation tutorials, including updated and improved version of this codebase:
https://youtube.com/playlist?list=PLYElE_rzEw_t0 arG7_fu1uqkwOht1Jg
Some of my favorite UDEMY courses:
Object-oriented Programming in JavaScript https://bit.ly/3f4Otu0
Creative:
How to Program Games: Tile Classics in JS for HTML5 Canvas https://bit.ly/2ZUfKuG
Next Level CSS Creative Hover & Animation Effects https://bit.ly/3jEkzju
CSS / Webdev skills:
The Web Developer Bootcamp (Older but still very relevant) https://bit.ly/2ZZJM0d
Modern HTML & CSS From The Beginning (Including Sass) https://bit.ly/2Ec6Cch
Advanced CSS and Sass: Flexbox, Grid, Animations and More! https://bit.ly/3g0uqxT
Vanilla JavaScript from beginner to advanced:
JavaScript Basics for Beginners https://bit.ly/32Tn5wq
JavaScript: Understanding the Weird Parts (Basic JavaScript rules that will never change, must know) https://bit.ly/2WVe0zn
The Complete JavaScript Course 2020: Build Real Projects! https://bit.ly/3fXGwaZ
Modern JavaScript From The Beginning https://bit.ly/3fWJgWk
Related videos:
https://youtu.be/afdHgwn1XCY Animated Particles from any image
https://youtu.be/d620nV6bp0A Particles JS effect with no libraties
This vanilla JavaScript text animation tutorial will have 3 main parts, in the first part we will create particles randomly spread around canvas and we implement some physics on them. We will apply forces like friction and acceleration and give each particle different weight to make the movement more realistic.
Then in the second part of this video we will take these particles and shape them into letters or images, both is possible with the code we will build today
And lastly in the third section we will take famous constellations effect from particles js library and we will connect particles that are near enough to each other with lines but we will not use any libraries, we will write our own vanilla JavaScript code that does that.
This tutorial is part of a series - Creative coding with vanilla JavaScript and HTML canvas COMPLETE PLAYLIST:
https://www.youtube.com/watch?v=lGJ9i6CYKyQ&list=PLYElE_rzEw_siuo-kkHh5h7Sk 6IPYNh
Tools every front-end web developer needs:
Adobe Creative Cloud (Adobe Photoshop, Illustrator) https://bit.ly/3e60cI0 (official Adobe website to buy Creative Suite applications)
You can message me on TWITTER https://twitter.com/code_laboratory
Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory
#javascript #htmlcanvas #frankslaboratory
Music:
Business / Corporate by Mixaund | https://mixaund.bandcamp.com
Music promoted by https://www.free-stock-music.com
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, Ill receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!")
