HTML5 Canvas Tutorials for Beginners | Become a Canvas Pro 📋 - How to Code: Mace Windu's Lightsaber but With Like 10 Other Colors

A lightsaber, radar, spin effect (whatever you want to call it) contains concepts essential to learning canvas game development. This tutorial covers how to get objects moving along the outline of a circle with sine and cosine functions, and also covers the atan2 function which'll help you determine what angle something should be rotated to based on your mouse's positioning. Just to be clear, I messed up the equation a little bit on the first whiteboard example. The coordinates 1 and 0 (1,0) are the results of sin and cos when an angle of zero is inputted. You should actually multiply the resultant value by your particle's distance from center, which'll produce the offset effect between particles (can't multiply Math.sin(1) by zero and get something other than zero like shown in the video). Get access to over 50+ free and premium tutorials at https://chriscourses.com 📃Table of Contents 00:00 Introduction 01:02 Project overview 02:07 Initial canvas setup 04:37 Render particles on screen 08:26 Space particles out in line formation 10:32 Sine + cosine lesson on whiteboard 14:25 Rotate line based on init 20:08 Math.atan2() lesson to obtain angle of mouse coordinate 21:16 Rotate line based on mouse coordinates 24:24 Colorize background, add fade effect, and add rainbow particles 30:06 Add interpolation and easing with GSAP 🎉 34:49 Messing around with variables for funsies 42:05 Introduction to chriscourses.com 🔗 Links CodePen Example: https://codepen.io/chriscourses/pen/ExKZxoY Canvas Boilerplate: https://github.com/christopher4lis/canvas-boilerplate