blava
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

The Blava logo

Blava

Performant artful blob generator using canvas 📋

Install

Via npm, Yarn, pnpm

pnpm i blava

How to use

  1. Import with

    import { Blava, Point } from 'blava';

  2. Place a blank canvas element into a parent container. The canvas will be resized to cover the parent element, which is assumed to be square in aspect ratio

  3. Initialize the Blava object with new Blava(canvas) where canvas is a reference to the canvas element. An additional configuration object can also be included. Animation automatically begins. To toggle the animation, call Blava.pause and Blava.play

Configuration options

parameter default value options notes
seed undefined Any string A seed on which all random generation (such as movement, initial positioning, & gradient hue) will be based
variance {x:5,y:10} Any object with x and y number parameters The extent of movement in each direction
gradient 'auto' 'auto' or an object with either from and to color string properties or from and to property objects, each containing a color color string property and a position object with x and y properties describing the position of the stop The gradient fill of the Blava
movementSpeed 'slow' One of ['molasses', 'slow', 'medium', 'fast', 'jelly'] or any number The speed of movement in point animation. Typically any number between 0.000_05 and 0.01 works well
points null null, an array of Points, or an array of objects with x and y number parameters The points to build the Blava blob with
pointCount 6 Any number The number of points to build the Blava blob with. Does nothing if points parameter is supplied
style 'wave' One of ['wave','blob'] The style of Blava to generate. Does nothing if points parameter is supplied
beforePaint undefined Any function Function called before painting the Blava on the canvas. The points and path of the Blava are calculated by this step. First argument is the Blava instance
afterPaint undefined Any function Function called after painting the Blava on the canvas. First argument is the Blava instance

Other notes

Canvas coordinates & animation

A Blava is generated on a canvas whose container element is assumed to be a square. Points are placed on a 100×100 grid, with {x: 0, y: 0} being the top left corner of the canvas. The variance setting determines the maximum distance the point can travel vertically or horizontally during animation (assuming the Point's animated property for that dimension is set to true)

Points

A custom Point class is included to track positioning and per-direction animation state of each point in the Blava. The constructor takes an x and y position as well as an optional configuration object. The configuration object can have an animated property with either a boolean to determine whether the Point is animated at all or an object with x and y properties to set animation state per dimension

Hooks

The beforePaint and afterPaint configuration options allow for a function before and after the Blava paint operation respectively. Both functions have full access to the Blava instance as the first passed argument. Point calculation is completed before running either function, so they can be manipulated before or after the paint operation.

Readme

Keywords

none

Package Sidebar

Install

npm i blava

Weekly Downloads

12

Version

3.0.0

License

MIT

Unpacked Size

67.9 kB

Total Files

7

Last publish

Collaborators

  • tonyketcham
  • greatnews-dev