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/E...
Canvas Boilerplate: https://github.com/christopher4lis/ca...