water-animation-2d

water-animation-2d

Library for adding simple 2d water animation by a canvas

Install

npm i water-animation-2d

How to use

1. Add canvas on html

<DOCTYPE html />
<html>
    ...
    <canvas id="canvas" width="200px" height="200px">
    </canvas>
    ...
</html>

1. Create waterAnimation2d

const canvas = document.getElementById("canvas");
const waterAnim = new WaterAnimation2d(canvas);

1. Run animation

waterAnim.run();

1. Apply force

const canvasRect = canvas.getBoundingClientRect();

// applying force downward into the center
const forceId = waterAnim.applyForce(canvasRect.width * 0.5, {
  x: 0,
  y: 500
});

1. Cancel force

setTimeout(() => {
  waterAnim.cancelForce(forceId)
}, 200)

Example projects

water-animation-2d-example

Author

Vladislav Nikolaev, react frontend developer

vladisnotlove@gmail.com
telegram | gitlab | github