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.