water-animation-2d
v0.3.3
Published
2D animation of water with canvas
Downloads
12
Maintainers
vladisnotloveReadme
water-animation-2d
Library for adding simple 2d water animation by a canvas
Install
npm i water-animation-2dHow to use
- Add canvas on html
<DOCTYPE html />
<html>
...
<canvas id="canvas" width="200px" height="200px">
</canvas>
...
</html>- Create waterAnimation2d
const canvas = document.getElementById("canvas");
const waterAnim = new WaterAnimation2d(canvas);- Run animation
waterAnim.run();- Apply force
const canvasRect = canvas.getBoundingClientRect();
// applying force downward into the center
const forceId = waterAnim.applyForce(canvasRect.width * 0.5, {
x: 0,
y: 500
});- Cancel force
setTimeout(() => {
waterAnim.cancelForce(forceId)
}, 200)Example projects
Author
Vladislav Nikolaev, react frontend developer
[email protected] telegram | gitlab | github