A hy(potrochoid pro)gress visualisation library.
npm install hygressA hy(potrochoid pro)gress visualisation library. The animation that this module
provides can be combined with other rendering processes and doesn't use an
isolated animation loop. The decision of where, when and how Hygress should
draw something is entirely yours.
Download the minified library and include it in your project:
``html`
You can also install it with npm.
`sh`
$ npm install hygress
`javascript
import Hygress from "hygress";
// All parameters are optional and can always
// be adjusted later by accessing them as properties.
var hygress = new Hygress({
hypotrochoid: Hygress.Hypotrochoid.PENTAGRAM,
size: [400, 300],
scale: 1.0,
clearCanvas: false,
colourRoll: false,
saturation: 90.0,
luminance: 75.0,
opacity: 0.25,
hue: 180.0
});
// Grab the canvas and put it on the page.
document.body.appendChild(hygress.canvas);
// You can also give Hygress your own canvas if you want.
var myCanvas = document.createElement("canvas");
hygress.canvas = myCanvas;
document.body.appendChild(myCanvas);
// Define the current canvas' size.
hygress.size = [window.innerWidth, window.innerHeight];
// Specifically define the hypotrochoid's size.
hygress.htSize = 100.0;
// Step the animation.
requestAnimationFrame(hygress.render);
// You need to clear the canvas if the clearCanvas flag has been set to false.
var ctx = hygress.canvas.getContext("2d");
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// Sick of clearing manually?
hygress.clearCanvas = true;
// Linearly transition the opacity and scale.
hygress.transitionTime = 1.25; // seconds
hygress.opacity = 0.0;
hygress.scale = 0.0;
``