This content originally appeared on DEV Community and was authored by Sababa T
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! 
This content originally appeared on DEV Community and was authored by Sababa T