0.1.2 • Published 4 years ago
@j055y/circle-bounce v0.1.2
CircleBounce
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.
Installation
You can either download the circles.js
file from this repository, or use the following NPM package:
npm i @j055y/circle-bounce
How to Use
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>