To achieve the effect of particles expanding outwards in ring formation, you need to know a little bit of trigonometry. The real question is, "How do you get particles to be placed evenly along the edge of a circle?" By using sine and cosine functions, you can return coordinates for each particle, where if you're increasing the radian value that goes into sine and cosine over time, you get different locations along a circle's edge. Using these values as a particles velocity, you can create a ring expansion effect, where if used correctly, gets the end result we're looking for.
Get access to over 50+ free and premium tutorials at chriscourses.com
📃Table of Contents
00:00 Project overview
00:33 Initial canvas setup
03:00 Populate canvas with particles
06:39 Whiteboard explanation of sine / cosine
11:44 Create a ring of circles
17:34 Ring expansion animation
21:15 Generate multiple rings over time
22:46 Remove off-screen particles
25:20 Spawn from mouse coordinates
26:44 Colorize background and particles over time
32:40 Speed-run / particle effect examples
34:07 Outro / Intro to chriscourses.com
🔗 Links
CodePen Example: codepen.io/chriscourses/pen/r...
Canvas Boilerplate: github.com/christopher4lis/ca...