README

Hygress

A 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.

Installation

Download the minified library and include it in your project:

<script src="/js/hygress.min.js"></script>

You can also install it with npm.

$ npm install hygress

Usage

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;

Documentation

API

Contributing

Maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

hygress

Usage no npm install needed!