lissajous-loader's Introduction

@okcid/lissajous-loader

A loader for your site that draws Lissajous curves

Installation

Authenticate to GitHub Packages
Create file .npmrc in your repository and add the following:
```
@okcid:registry=https://npm.pkg.github.com
```
npm i @okcid/lissajous-loader

Example

HTML:

<html>
    <head>
    </head>
    <body>
        <canvas id="loader" width="50" height="50" />
    </body>
</html>

Javascript:

import LissajousLoader from 'lissajous-loader';

const canvas = document.getElementById('loader');

const loader = new LissajousLoader(canvas, {
    xFrequency: 3,
    yFrequency: 2,
    delta: Math.PI / 2,
});
loader.start();

callApi()
    .then(() => {
        loader.stop();
    });

API

constructor

const loader = new LissajousLoader(canvas, props);

canvas – instance of HTMLCanvasElement to draw the loader on;
Note: canvas is recommended to be square (height property should equal the width property)

props – an object with loader props

$\begin{equation*} \begin{cases} x = A \sin(\alpha t + \delta); \\ y = B \sin(\beta t) \end{cases} \end{equation*}$

Note: A and B are both equal to 1 for simplicity
Note: ❗ means required prop, ❓ – optional prop

	Name	Type	Default	Description
❗	`xFrequency`	number		$\alpha$
❗	`yFrequency`	number		$\beta$
❗	`delta`	number		$\delta$ , it is better to be a fraction of Pi (e.g. Pi/2, Pi/6, etc)
❓	`step`	number	0.05	A step for t param – the less it is, the more accurate the curve is
❓	`padding`	number	16	Padding inside canvas element
❓	`colour`	string	000000	HEX code of lines colour
❓	`lineWidth`	number	1	The width of the curve's line
❓	`pause`	number	1000	The time to wait before erasing the curve