colliding_balls

Credits:

https://spicyyoghurt.com/tutorials/html5-javascript-game-development/collision-detection-physics

Example Usage

import { collidingBalls } from "colliding_balls";

const canvas = collidingBalls({
  $ele: document.querySelector("#playground"),
  id: "collider",
  isStatic: false,
  count: 500,
  size: 4,
  speed: 3,
  sameSize: false,
  color: ["#ff6b6b", "#ffd93d", "#1dd3b0"], // string | string[] | (ballIndex) => string
  hollow: true,
  borderWidth: 3,
  gravity: 0.08,
  followCursor: true,
  cursorForce: 0.0015,
});

The function still returns the canvas node so you can manipulate it further if required.

Options reference

• $ele (required): Container element that will receive the generated canvas.
• id: Canvas id attribute (default myCanvas).
• isStatic: When true, renders one frame and stops animating.
• count: Total balls to spawn (default 100).
• size: Base radius in pixels (default 5).
• speed: Maximum random speed per axis for initial velocity (default 7).
• sameSize: Force every ball to share size instead of randomizing up to it.
• color: Fill/stroke color. Accepts a string, an array (cycled), or a callback (index) => string.
• hollow: Draw rings instead of filled circles. Uses borderWidth.
• borderWidth: Stroke width for hollow balls (default 2).
• gravity: Downward acceleration added every frame. Set higher for a stronger pull.
• followCursor: When true, balls accelerate toward the cursor while it is over the canvas.
• cursorForce: Scalar applied to the cursor attraction (default 0.002). Reduce if motion feels too aggressive.

Publishing

1. Update package.json with the desired semantic version (npm version <major|minor|patch>).
2. Log in to npm if you have not already (npm login).
3. Run npm publish (or npm run publish to trigger the included helper script).
4. Create a GitHub release/tag to match the published version so consumers can track changes.