Back to Browse

Vanilla JavaScript Character Animation

6.3K views
Nov 12, 2021
41:16

Learn how to animate a talking character using vanilla JavaScript and HTML Canvas. We build a character from scratch, using basic shapes like ellipses, triangles, rectangles, polygons. We animate it using HTML canvas context methods: translation, scale and a little bit of math. It's possible to link the character so that it talks to what you say in the microphone. Frank shows you how to get the microphone input here: https://youtu.be/qNEb9of714U ⭐️Check out my other Halloween video⭐️ https://youtu.be/Q_SbeuxHUzA ⭐️Learn more JavaScript from my course⭐️ https://www.youtube.com/playlist?list=PLB0Tybl0UNfb3hTHPfEIg1SPw_-Ca9iIw ⭐️TABLE OF CONTENT ⭐️ 0:00 Introduction (Demo) 0:19 Canvas Project Setup 4:10 Pumpkin Class & Bounding Region 9:20 Drawing the Head 17:37 Drawing the Eyes 20:30 Drawing the Nose 22:13 Drawing the Mouth 27:07 Animation 38:20 Incorporating the Microphone #characteranimation #javascript

Download

1 formats

Video Formats

360pmp460.1 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

Vanilla JavaScript Character Animation | NatokHD