🟠 Open Source Visual Art Project

A cool physics and art simulation I created for fun. Perfect for learning HTML canvas animations and basic game physics :)

• 30+ colorful balls with random sizes and velocities
• Realistic wall collisions with momentum preservation
• Dynamic color changes on collisions
• Responsive design that adapts to your browser/device window size
• Pause/Resume functionality with interactive button and P key
• Speed control with variable multipliers (0.5x, 1x, 2x) via button or S key
• Gravity toggle to apply downward force with button or G key
• Mouse attraction to pull balls toward the cursor with button or A key
• Ball count control (10, 30, 50, 100) with button or B key
• FPS counter displaying performance in the top-left corner
• Info / Contributing button (C key) linking to community guidelines and shortcuts

• Pause/Resume Button or P: Toggle animation state
• Speed Button or S: Cycle through 0.5x, 1x, and 2x speeds
• Gravity Button or G: Enable/disable downward gravity
• Attraction Button or A: Toggle mouse attraction with visual indicator
• Balls Button or B: Cycle through ball counts (10, 30, 50, 100)
• Info / Contributing Button or C: Visit the Info / Contributing page with guidelines and shortcuts

1. Clone the repo:

   git clone https://github.com/alicelee2735/Cosmic-Bouncer.git
   

2. Open index.html in your browser:

Edit main.js to tweak the simulation:

```js
// Change number of balls
let ballCount = 30; // ← Modify this number

// Modify size range
random(10, 20) // ← Modify ball sizes

// Change background fade effect
ctx.fillStyle = 'rgba(0, 0, 0, 0.25)' // ← Trail effect opacity

// Adjust speed multiplier
let speedMultiplier = 1; // ← Modify default speed (0.5, 1, 2)

// Toggle gravity
const GRAVITY = { enabled: false, amount: 0.1 }; // ← Adjust gravity strength

// Configure attraction
const attraction = { enabled: false, distance: 100, factor: 0.02 }; // ← Tweak range and force
```

• Pause/Resume Button: Toggle animation state
• Speed Button: Cycle through 0.5x, 1x, and 2x speeds
• Gravity Button: Enable/disable downward gravity
• Attraction Button: Toggle mouse attraction with visual indicator
• Contribute Button: Visit contribution guidelines

Edit main.js to modify in main.js:

// Change number of balls
while (balls.length < 30) { // ← Modify this number

// Adjust speed ranges
random(-7, 7) // ← Modify velocity values

// Modify size range
random(10, 20) // ← Modify ball sizes

// Change background fade effect
ctx.fillStyle = 'rgba(0, 0, 0, 0.25)' // ← Trail effect opacity

// Adjust speed multiplier
let speedMultiplier = 1; // ← Modify default speed (0.5, 1, 2)

• Pause/Resume Button: Toggle animation state
• Speed Button: Cycle through 0.5x, 1x, and 2x speeds

Hosted on GitHub Pages: Demo Website

All contributions are welcome! See CONTRIBUTING.md for guidelines. First-time contributors can try:

• Add new collision effects

• Adding new collision effects

• Enhancing user interaction (e.g., sliders, keyboard controls)

• Implementing your own cool ideas!

Check TODO.md for more inspiration.

MIT © Alice Lee - See LICENSE for details

Leave a Star if you liked it! ⭐