Mouse Reactive Particle Playground banner

Mouse Reactive Particle Playground

Created by: Dushyant Acharya
2 devlogs
2h 28m 8s

I built a cool visual experiment using HTML Canvas where a bunch of fiery particles react to your mouse. Basically, they float around in this 3D-looking neon space, and when you move your cursor near them, they scatter away. You can also click to …

I built a cool visual experiment using HTML Canvas where a bunch of fiery particles react to your mouse. Basically, they float around in this 3D-looking neon space, and when you move your cursor near them, they scatter away. You can also click to trigger little explosions, and I added a button to toggle gravity on and off which completely changes how the physics work. It was just me working on this because I wanted to get better at canvas animations and math/physics in JavaScript. Next up, I might try adding different color themes or audio reactivity!

This project uses AI

I used AI as a coding assistant to help debug some of the JavaScript canvas animations and generate boilerplate for the UI.

Demo Repository

README

Loading README...
Dushyant Acharya
Dushyant Acharya worked on Mouse Reactive Particle Playground
about 5 hours ago
0h 15m logged

I used AI as a coding assistant to help debug some of the JavaScript canvas animations and generate boilerplate for the UI. Also used AI to write README.md file in the code.

Attachment
0
Dushyant Acharya
Dushyant Acharya shipped Mouse Reactive Particle Playground
about 5 hours ago

Shipped this project!

I built Mouse Reactive Particle Playground! It’s a highly interactive web experiment using HTML5 Canvas where fiery sparks react to your mouse movements over a scrolling 3D-perspective grid. The hardest part was getting the math right for the physics engine—specifically calculating the mouse repulsion forces so the particles smoothly scatter without flying off-screen, and rendering the 3D perspective lines dynamically based on mouse position. I’m really proud of how the gravity button completely changes the feel of the simulation and how polished the glassmorphism UI turned out!

Dushyant Acharya
Dushyant Acharya worked on Mouse Reactive Particle Playground
about 6 hours ago
2h 12m logged

For this session, I focused on building out the core particle engine and getting the styling right. I started by setting up the HTML5 canvas and getting the basic sparks to render with random velocities. The trickiest part was writing the math for the mouse repulsion so the particles realistically scatter away when the cursor gets close. After tweaking the physics to make it feel smooth, I spent the rest of the time designing the central UI card with a frosted glass effect and wiring up the buttons to toggle gravity and reset the canvas.

Attachment
0