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.
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
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
Colorful circles that respond to mouse movement with smooth animations.
- Dynamic color patterns
- Size-based mouse interaction
- Smooth movement animations
- Collision detection with boundaries
A physics-based particle system demonstrating elastic collisions between multiple objects.
- Realistic particle collisions
- Velocity-based movement
- Colorful particle borders
- Mouse interaction capabilities
- HTML5 Canvas
- Vanilla JavaScript
- CSS3
- No external libraries or frameworks
- Clone the repository:
git clone https://github.com/your-username/canvas-projects.git- Navigate to the project directory:
cd canvas-projects- Open
index.htmlin your browser or use a local server:
# Using Python 3
python -m http.server 8000
# Using Node.js http-server
npx http-server- Visit
http://localhost:8000in your browser
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
- 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
Contributions are welcome! Feel free to submit issues and pull requests.
- Fork the repository
- Create your feature branch:
git checkout -b feature/AmazingFeature - Commit your changes:
git commit -m 'Add some AmazingFeature' - Push to the branch:
git push origin feature/AmazingFeature - Open a pull request
This project is open source and available under the MIT License.
- Inspiration from various canvas tutorials and demonstrations
- Special thanks to the JavaScript and HTML5 Canvas communities