Canvas animation of bouncy circles in JavaScript.
Each circle bounces off of the canvas bounds and lines with varying opacity are drawn between neighbouring circles within a given distance. Circles within a given distance of the mouse will be pushed in the direction of mouse movement.
You can either download the circles.js
file from this repository, or use the following NPM package:
npm i @j055y/circle-bounce
When creating a new instance of a CircleCanvas object, there are three arguments you need to be aware of.
let circleCanvas = new CircleCanvas(numberOfCircles, velocity, colour);
numberOfCircles
takes a positive integervelocity
takes any valid numbercolour
takes a string of either a hexadecimal colour value or "random"
For most use cases, you can simply copy the following snippet and alter the given arguments as needed.
<script>
let circleCanvas = new CircleCanvas(200, 4, "random");
document.querySelector("canvas").id = Object.keys({circleCanvas})[0];
</script>