home
usage
settings
editor
Usage
TUBE 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/tube-min.js"></script>
Now TUBE is ready for use!
Create TUBE
Create an empty DIV and give it an ID (e.g. "DIV_ID").
Create a TUBE instance, indicating the DIV ID and settings:
var tube = new TubeAnimation("DIV_ID",{
//settings
});
Done!
You can even create multiple TUBE instances on your page.
Each setting has a default value and can be ignored. Here is a complete list of settings.
Replace TUBE
Let's say your DIV already contains TUBE.
Create a new TUBE instance for the same DIV:
tube = new TubeAnimation("DIV_ID",{
//new settings
});
A new instance will replace the old one.
Remove TUBE
To remove TUBE instance, you should use a special method:
tube.destroy();
It stops all animations, frees memory and removes everything related to TUBE.
Advanced API
Methods
tube.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.
tube.mainMorphTo(value);   Morphing current TUBE shape to new shape by varying main settings. value can be stage index or an object describing main settings. To learn more, read about MAIN_MORPHING_STAGES setting here.
tube.surfaceMorphTo(value);   Morphing current TUBE shape to new shape by varying surface distortion. value can be stage index or an object describing surface distortion. To learn more, read about SURFACE_MORPHING_STAGES setting here.
Properties
Complete list of TUBE settings is located here. Most of them can be changed on the fly using JavaScript.
Below is the list of TUBE instance properties.
tube.tubeSize — size of the TUBE
tube.tubeWidth — width of the TUBE
tube.tubeDistance — imaginary distance between TUBE center and screen surface
tube.perspectiveDistortion — perspective distortion of the TUBE
tube.tubeTorsion — TUBE torsion ratio
tube.tubeStretch — TUBE stretch ratio
tube.rotationSpeed — TUBE rotation speed at rest (i.e. when mouse does not affect it)
tube.dotColor — color of TUBE's dot
tube.dotSize — size of TUBE's dot
tube.detalization — dot density on TUBE surface
tube.meshDistribution — a number defining dot distribution on TUBE surface
tube.meshRatio — a number defining mesh cell aspect ratio
tube.offsetX — TUBE displacement along the X axis measured in pixels
tube.offsetY — TUBE displacement along the Y axis measured in pixels
tube.percentageOffsetX — TUBE displacement along the X axis measured as a percentage of the scene width
tube.percentageOffsetY — TUBE displacement along the Y axis measured as a percentage of the scene height
tube.mouseDistanceMin — maximum distance between mouse pointer and TUBE center at which TUBE is most sensitive to mouse movements
tube.mouseDistanceMax — minimum distance between mouse pointer and TUBE center at which TUBE is not sensitive to mouse movements
tube.mouseSensitivity — sensitivity level to mouse movements
tube.inertialTime — time between mouse motion and the moment when TUBE rotation speed came to a normal value

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