The Bouncing Ring Simulation is an interactive web application built with Next.js and React. It simulates a ring bouncing within a circular border, creating a visually engaging and interactive experience.
- Dynamic ring movement with gravity and collision detection
- Colorful background with customizable gradient effects
- Customizable trace color for the bouncing ring
- Adjustable sound effects for collisions
- Multiple physics presets for varied simulation behavior
- Real-time statistics display (speed, bounce count, clear progress, current physics)
- Responsive design for various screen sizes
- Next.js
- React
- TypeScript
- HTML5 Canvas
- Web Audio API
- Node.js (v14 or later)
- npm or yarn
-
Clone the repository:
git clone https://github.com/your-username/bouncing-ring-simulation.git -
Navigate to the project directory:
cd bouncing-ring-simulation -
Install dependencies:
npm install # or yarn install -
Run the development server:
npm run dev # or yarn dev -
Open http://localhost:3000 in your browser to see the application.
- Click the "Start Simulation" button to begin the animation.
- Use the color picker to change the trace color of the bouncing ring.
- Select different sound types and frequencies for collision effects.
- Choose from various physics presets to change the simulation behavior.
- The simulation will automatically complete when 99% of the area is cleared.
- Click "Reset" to start over at any time.
You can adjust various parameters in the components/bouncing-ring-simulation.tsx file:
BORDER_RADIUS: Size of the circular borderRING_RADIUS: Size of the bouncing ringINITIAL_SPEED: Starting speed of the ringphysicsPresets: Define new physics presets or modify existing ones
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.