StrangeOrbits

A JavaScript plugin for figures out of strange moving particles. This includes an optional force field generated by the mouse pointer or your fingers on the touch pad which lets the particles push away. It works in any browser that supports HTML5 canvas.

See a demo

Usage

var element = document.getElementById('your-element');
var strangeOrbits = new StrangeOrbits(element);

Methods

StrangeOrbits exposes methods which can be used to interact with your StrangeOrbits instance.

var element = document.getElementById('your-element');
var strangeOrbits = new StrangeOrbits(element);
strangeOrbits.start();

start()

Starts the animation.

stop()

Stops the animation.

showFigure(url, duration[[, easing], callback])

It lets appear a point figure using a PNG image as template. The engine considers every non-transparent pixel.

hideFigure(duration[[, easing], callback])

Lets disappear the current point figure.

Options

Options can be set by passing an options object to the constructor or by setting via reference.

Here are two examples of setting the color of the particles and the background:

var strangeOrbits = new StrangeOrbits(element, {
    color: 'orange',
    backgroundColor: '#080808'
});

and

var strangeOrbits = new StrangeOrbits(element);
strangeOrbits.options.color = 'orange';
strangeOrbits.options.backgroundColor = '#080808';

Here is a full list of options, and their default values:

color

#FFFFFF

Sets the color of the particles.

backgroundColor

#080808

Sets the color of the background.

pointDensity

0.0075

Sets the density of the particles. The number represents the probability of a non-transparent pixel to become a particle.

minParticleRadius

Sets the minimum particle radius.

maxParticleRadius

Sets the maximum particle radius.

minParticleOpacity

0.15

Sets the minimum particle opacity.

maxParticleOpacity

0.85

Sets the maximum particle opacity.

minTrembleOffset

Sets the minimum tremble offset of the particles.

maxTrembleOffset

Sets the maximum tremble offset of the particles.

minTrembleDuration

Sets the minimum travel time for trembles of the particles.

maxTrembleDuration

Sets the maximum travel time for trembles of the particles.

pointForceActivated

true

Activates the point force field (mouse or touch).

pointForceRadius

Sets the point force field radius.

clickedMouseForceActivated

true

Activates the point force field boost while holding the mouse button pressed.

clickedMouseForceRadius

Sets the boosted point force field radius.

animationEasings

{
    'ease': new BezierEasing(0.25, 0.1, 0.25, 1.0),
    'linear': new BezierEasing(0.00, 0.0, 1.00, 1.0),
    'ease-in': new BezierEasing(0.42, 0.0, 1.00, 1.0),
    'ease-out': new BezierEasing(0.00, 0.0, 0.58, 1.0),
    'ease-in-out': new BezierEasing(0.42, 0.0, 0.58, 1.0),
    'strange': new BezierEasing(0.7, 0, 0.3, 1)
}

Defines a list of easings defined with a Bézier curve. You can add new BezierEasings in this list. Click here to get more informations about BezierEasing.

sahithyen/StrangeOrbits