home
usage
settings
editor
Usage
BLOB is animated, interactive and highly customizable 3D background. Created as Javascript plugin based on HTML5 Canvas.
Installation
Add 2 scripts to your page:
<script src="js/libs/jsband-min.js"></script>
<script src="js/blob-min.js"></script>
Now BLOB is ready for use!
Create BLOB
Create an empty DIV and give it an ID (e.g. "DIV_ID").
Create a BLOB instance, indicating the DIV ID and settings:
var blob = new BlobAnimation("DIV_ID",{
//settings
});
Done!
You can even create multiple BLOB instances on your page.
Each setting has a default value and can be ignored. Here is a complete list of settings.
Replace BLOB
Let's say your DIV already contains BLOB.
Create a new BLOB instance for the same DIV:
blob = new BlobAnimation("DIV_ID",{
//new settings
});
A new instance will replace the old one.
Remove BLOB
To remove BLOB instance, you should use a special method:
blob.destroy();
It stops all animations, frees memory and removes everything related to BLOB.
Advanced API
Methods
blob.resize();   Мakes canvas size equal to your DIV size. In most cases, you will not need this method. It should be used only when you change DIV size by JavaScript.
blob.morphTo(value);   Morphing current BLOB shape to new shape. value can be new shape's index or an object describing new shape. To learn more, read about MORPHING_SHAPES setting here.
Properties
Complete list of BLOB settings is located here. Some of them can be changed on the fly using JavaScript.
Below is the list of BLOB instance properties.
blob.blobSize — size of the BLOB
blob.blobDistance — imaginary distance between BLOB center and screen surface
blob.rotationSpeed — BLOB rotation speed at rest (i.e. when mouse does not affect it)
blob.perspectiveDistortion — perspective distortion of the BLOB
blob.dotSize — size of BLOB's dot
blob.dotColor — color of BLOB's dot
blob.offsetX — BLOB displacement along the X axis measured in pixels.
blob.offsetY — BLOB displacement along the Y axis measured in pixels.
blob.percentageOffsetX — BLOB displacement along the X axis measured as a percentage of the scene width.
blob.percentageOffsetY — BLOB displacement along the Y axis measured as a percentage of the scene height.
blob.mouseDistanceMin — maximum distance between mouse pointer and BLOB center at which BLOB is most sensitive to mouse movements
blob.mouseDistanceMax — minimum distance between mouse pointer and BLOB center at which BLOB is not sensitive to mouse movements
blob.mouseSensitivity — sensitivity level to mouse movements
blob.inertialTime — time between mouse motion and the moment when BLOB rotation speed came to a normal value

The following properties specify BLOB shape. BLOB is essentially distorted sphere. Distortion is achieved due to three types of waves on sphere surface. The wave of each type is defined by amplitude, frequency and phase.
blob.wave1Amplitude — first type wave amplitude
blob.wave1Frequency — first type wave frequency
blob.wave1Phase — first type wave phase
blob.wave2Amplitude — second type wave amplitude
blob.wave2Frequency — second type wave frequency
blob.wave2Phase — second type wave phase
blob.wave3Amplitude — third type wave amplitude
blob.wave3Frequency — third type wave frequency
blob.wave3Phase — third type wave phase