0.3.3 • Published 1 year ago

water-animation-2d v0.3.3

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
1 year ago

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

Author

Vladislav Nikolaev, react frontend developer

vladisnotlove@gmail.com telegram | gitlab | github

0.3.3

1 year ago

0.3.0

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.3.2

2 years ago

0.3.1

2 years ago

0.2.2

2 years ago

0.1.5

2 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago