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/E...
Canvas Boilerplate: https://github.com/christopher4lis/ca...
Watch video How to Code: Mace Windu's Lightsaber but With Like 10 Other Colors online without registration, duration hours minute second in high quality. This video was added by user Chris Courses 23 August 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 12,265 once and liked it 259 people.