Interactive Canvas Projects Gallery

A collection of interactive canvas-based animations and physics simulations built with vanilla JavaScript. Each project demonstrates different aspects of HTML5 Canvas and JavaScript programming.

🎨 Projects

1. Gravity Simulation

An interactive physics simulation featuring multiple balls affected by gravity and bounce mechanics.

• Multiple bouncing balls with realistic physics
• Ground collision detection
• Adjustable gravity and bounce parameters

2. Spider Web Effect

A mesmerizing interactive web-like effect that responds to mouse movement.

• Dynamic line connections
• Mouse-based interaction
• Grid-based point system
• White on black aesthetic

3. Interactive Circles

Colorful circles that respond to mouse movement with smooth animations.

• Dynamic color patterns
• Size-based mouse interaction
• Smooth movement animations
• Collision detection with boundaries

4. Collision System

A physics-based particle system demonstrating elastic collisions between multiple objects.

• Realistic particle collisions
• Velocity-based movement
• Colorful particle borders
• Mouse interaction capabilities

🛠️ Technologies Used

• HTML5 Canvas
• Vanilla JavaScript
• CSS3
• No external libraries or frameworks

💻 Local Development

1. Clone the repository:

git clone https://github.com/your-username/canvas-projects.git

2. Navigate to the project directory:

cd canvas-projects

3. Open index.html in your browser or use a local server:

# Using Python 3
python -m http.server 8000

# Using Node.js http-server
npx http-server

4. Visit http://localhost:8000 in your browser

📁 Project Structure

canvas-projects/
├── index.html          # Main gallery page
├── gravity.html        # Gravity simulation
├── gravity.js
├── spider.html         # Spider web effect
├── canvas2.js
├── canvas.html         # Interactive circles
├── canvas.js
├── collid.html         # Collision system
└── collid.js

🎮 Usage

• Click on any project card to view the full-screen animation
• Move your mouse around to interact with the animations
• Each project has different interaction mechanics:
  • Gravity: Watch balls bounce and interact with physics
  • Spider Web: Move mouse to create web-like connections
  • Circles: Move mouse to influence circle sizes and movements
  • Collision: Watch particles collide and interact

🤝 Contributing

Contributions are welcome! Feel free to submit issues and pull requests.

1. Fork the repository
2. Create your feature branch: git checkout -b feature/AmazingFeature
3. Commit your changes: git commit -m 'Add some AmazingFeature'
4. Push to the branch: git push origin feature/AmazingFeature
5. Open a pull request

📜 License

This project is open source and available under the MIT License.

👏 Acknowledgments

• Inspiration from various canvas tutorials and demonstrations
• Special thanks to the JavaScript and HTML5 Canvas communities