YoVDO

How to Code - Mace Windu's Lightsaber but With Like 10 Other Colors

Offered By: Chris Courses via YouTube

Tags

Javascript Courses Game Development Courses Animation Courses Trigonometry Courses GSAP (GreenSock Animation Platform) Courses Canvas API Courses Visual Effects Courses

Course Description

Overview

Learn to create an interactive lightsaber-inspired effect using HTML5 Canvas in this 43-minute tutorial. Explore essential concepts for canvas game development, including circular motion with sine and cosine functions, and object rotation based on mouse positioning using atan2. Master techniques for rendering particles, implementing colorful effects, and adding smooth animations with GSAP. Follow along as the instructor guides you through initial setup, particle manipulation, background customization, and advanced interpolation techniques. Gain valuable insights into canvas game development while creating an engaging visual effect inspired by Mace Windu's lightsaber with multiple color variations.

Syllabus

Introduction
Project overview
Initial canvas setup
Render particles on screen
Space particles out in line formation
Sine + cosine lesson on whiteboard
Rotate line based on init
Math.atan2 lesson to obtain angle of mouse coordinate
Rotate line based on mouse coordinates
Colorize background, add fade effect, and add rainbow particles
Add interpolation and easing with GSAP
Messing around with variables for funsies
Introduction to chriscourses.com


Taught by

Chris Courses

Related Courses

Learn Phaser.js: Fundamentals
Codecademy
HTML5 Canvas Fundamentals
Pluralsight
Le jeu HTML5 à partir de zéro étape en apprenant JavaScript
Skillshare
Make Your Own 2048
Udacity
Advanced HTML5 Tutorial for Web Developers
Udemy