Beetles Animation

Animation of moving beetles for HTML5 canvas. This package provides classes to control the animation, create beetles and control the size of the canvas.

Installation

Install the package via npm:

npm install beetles

Usage

After installing the package, import and create an instance of BeetlesAnimation to initialize the beetles animation on your canvas.

import BeetlesAnimation from 'beetles';

// Initialize the animation on the kanvas with the specified ID
var beetlesAnimation = new BeetlesAnimation({
    canvasId: 'canvas',         // Canvas ID 
    quantity: 100,              // Number of beetles on the screen
    maxSpeed: 5,                // Maximum speed of beetles
    beetleWidth: 12,            // Beetle width
    beetleHeight: 19,           // Beetle height
    imgSrc: 'img/beetle.webp'   // Path to beetle sprite
});

React.js Example:

import { useEffect } from "react";
import BeetlesAnimation from 'beetles';

function App() {

  useEffect(() => {
    new BeetlesAnimation({
        canvasId: 'canvas123',
        quantity: 300,
        beetleWidth: 8,
        beetleHeight: 15
    });
  }, []);

  return (
    <>
      <canvas id="canvas123"></canvas>
    </>
  );
}

export default App;

| Parameter | Type | Description (optional) | Default value | |---------------|---------|-------------------------------|--------------------| | canvasId | string | canvas element ID | 'canvas' | | quantity | number | number of bugs on screen | 100 | | maxSpeed | number | Maximum speed of the beetles | 5 | | beetleWidth | number | beetle width (in pixels) | 12 | | beetleHeight | number | beetle height (in pixels) | 19 | | imgSrc | string | beetle image path | 'beetle.webp' |

Have fun