DEV Community

Cover image for ๐ŸŒŒ Explore Particle Systems with Acceleration and Friction!
Sababa T
Sababa T

Posted on

๐ŸŒŒ Explore Particle Systems with Acceleration and Friction!

Hello Dev Community!

I'm excited to share my latest project:

Particle Systems with Acceleration and Friction!

A particle system built using HTML5 canvas and vanilla JavaScript, showcasing real-world physics principles.

๐ŸŽฎ Live Demo:

Check out the live demo here to see the particles in action!

https://algomystique.github.io/ParticleSystems-Physics

๐Ÿ”‘ Key Features:

Fully Responsive Canvas: The canvas adjusts dynamically to different screen sizes while maintaining functionality.

Particle Interaction: Particles respond to mouse events, like clicks, with realistic movement and collisions.

Physics-Based Movement: Acceleration and friction create smooth, realistic motion for the particles.

๐Ÿ” How It Works

Canvas Setup: A responsive HTML5 canvas initializes, generating random particles with positions, velocities, and accelerations.

Particle Motion: Each particleโ€™s velocity is updated by its acceleration, with friction applied to simulate resistance.

Rendering: Every frame, particles are drawn on the canvas, updating positions based on motion laws.

Mouse Interaction: Particles react to mouse movement or clicks, accelerating away or towards the pointer.

๐Ÿ›  Technologies Used

HTML5 Canvas
CSS3
Vanilla JavaScript

Iโ€™d love your feedback, suggestions, or any contributions! Check it out on GitHub: [https://github.com/AlgoMystique/ParticleSystems-Physics].

This project was inspired by concepts learned in the "Creative Coding in JS - Masterclass" by Frank Dvorak on Udemy.

Find his Udemy Course here: https://www.udemy.com/user/frantisek-dvorak

Happy coding! ๐ŸŽ‰

Top comments (0)