1. Particle()
  2. Particle.color
  3. Particle.gravityX
  4. Particle.gravityY
  5. Particle.move()
  6. Particle.ttl
  7. Particle.velocityX
  8. Particle.velocityY
  9. Particle.x
  10. Particle.y
  11. ParticleSlider()
  12. ParticleSlider.$()
  13. ParticleSlider.arrowPadding
  14. ParticleSlider.color
  15. ParticleSlider.drawParticles()
  16. ParticleSlider.getCh()
  17. ParticleSlider.getCw()
  18. ParticleSlider.getPixelFromImageData()
  19. ParticleSlider.height
  20. ParticleSlider.hoverColor
  21. ParticleSlider.init()
  22. ParticleSlider.loadingStep()
  23. ParticleSlider.monochrome
  24. ParticleSlider.mouseForce
  25. ParticleSlider.nextFrame()
  26. ParticleSlider.nextSlide()
  27. ParticleSlider.onNextSlide
  28. ParticleSlider.parseColor()
  29. ParticleSlider.ptlGap
  30. ParticleSlider.ptlSize
  31. ParticleSlider.resize()
  32. ParticleSlider.showArrowControls
  33. ParticleSlider.slideDelay
  34. ParticleSlider.sliderId
  35. ParticleSlider.swapList()
  36. ParticleSlider.width

ParticleSlider Reference

 Particle(ps)

Creates a Particle object.

Parameters

ps
object
Reference to ParticleSlider

Returns: object Returns new Particle object

Usage

// Create a new Particle
var ps = new ParticleSlider();
var ptl = new ps.Particle(ps);

 Particle.color

array

Color holds 4 bytes in an array. Possible Values: 0..255 Possible Values: 0..255 Possible Values: 0..255 Possible Values: 0..255

Default:

  1. value parsed from @ParticleSlider.color if
  2. @ParticleSlider.monochrome is `true`

or

  1. value parsed from current slide if
  2. @ParticleSlider.monochrome is `false`

Usage

// Set particle color to white.
ptl.color = [255,255,255,255];
// Set particle color to half transparent white.
ptl.color = [255,255,255,127];

 Particle.gravityX

number

Home coordinate (x) from Particle. The Particle is forced to get this coordinates See Particle.gravityY

Default: 0

Usage

// Set particle home to left border.
ptl.gravityX = 0;
// Set particle home to right border.
ptl.gravityX = ps.width - 1;
// Set particle home to horizontal center.
ptl.gravityX = ps.width / 2;

 Particle.gravityY

number

Home coordinate (y) from Particle. The Particle is forced to get this coordinates. See Particle.gravityX

Default: 0

Usage

// Set particle home to top border.
ptl.gravityY = 0;
// Set particle home to bottom border.
ptl.gravityY = ps.height - 1;
// Set particle home to vertical center.
ptl.gravityY = ps.height / 2;

 Particle.move()

Particle moves under the action of the given forces. See Particle.x See Particle.y See Particle.gravityX See Particle.gravityY See Particle.velocityX See Particle.velocityY See ParticleSlider.mouseForce

Usage

// Example moves Particle under the action of the given forces.
ptl.move();

 Particle.ttl

number

Time to live counts down every frame, and destroys Particle if ttl reaches 0. Disabled if value is null

Default: null

Usage

// Set time to live of Particle to 20 frames.
ptl.ttl = 20;
// Disable time to live
ptl.ttl = null;

 Particle.velocityX

number

Current velocity in horizontal direction. See Particle.velocityY

Default: Random value between -5 and +5

Usage

// Set horizontal particle velocity targeting left border.
ptl.velocityX = -10;
// Accelerate particle targeting left border.
ptl.velocityX -= 10;
// Set horizontal particle velocity targeting right border.
ptl.velocityX = 10;
// Accelerate particle targeting right border.
ptl.velocityX += 10;
// Stop horizontal particle velocity.
ptl.velocityX = 0;

 Particle.velocityY

number

Current velocity in vertical direction. See Particle.velocityX

Default: Random value between -5 and +5

Usage

// Set vertical particle velocity targeting top border.
ptl.velocityY = -10;
// Accelerate particle targeting top border.
ptl.velocityY -= 10;
// Set vertical particle velocity targeting bottom border.
ptl.velocityY = 10;
// Accelerate particle targeting bottom border.
ptl.velocityY += 10;
// Stop vertical particle velocity.
ptl.velocityY = 0;

 Particle.x

number

Current coordinate (x) from Particle. See Particle.y

Default: Random value between 0 and ParticleSlider.width

Usage

// Set particle position to left border.
ptl.x = 0;
// Set particle position to right border.
ptl.x = ps.width - 1;
// Set particle position to horizontal center.
ptl.x = ps.width / 2;

 Particle.y

number

Current coordinate (y) from Particle. See Particle.x

Default: Random value between 0 and ParticleSlider.height

Usage

// Set particle position to top border.
ptl.y = 0;
// Set particle position to bottom border.
ptl.y = ps.height - 1;
// Set particle position to vertical center.
ptl.y = ps.height / 2;

 ParticleSlider([params])

Creates a ParticleSlider object.

Parameters

params
optional
object
final attributes of the ParticleSlider

Possible parameters

  1. sliderIdstringID which contains source for slides and canvas elements. Default: particle-slider
  2. colorstringColor (rgb,rgba,hex,shorthex) for controls and slide (if monochrome = true). Default: #fff
  3. hoverColorstringColor (rgb,rgba,hex,shorthex) for controls on hover. Default: #f88
  4. widthnumberwidth of slider. Default: 800
  5. heightnumberheight of slider. Default: 400
  6. ptlGapnumbergap between particles. Default: 0
  7. ptlSizenumberparticle-size (usually used in combination with pxlGap). Default: 1
  8. slideDelaynumbertime between slides. Default: 10
  9. arrowPaddingnumberpadding between arrows and slider-border. Default: 10
  10. showArrowControlsbooleanshows/hides arrows to change slide. Default: true
  11. onNextSlidefunctionfunction is called after slide changes. Default: null
  12. monochromebooleantints source images in given color. Default: false
  13. mouseForcenumberforce which pushes the particle from cursor away. Default: 10000

Returns: object ParticleSlider

Usage

// Each of the following examples creates a ParticleSlider
// 800px wide by 400px high.
// ParticleSlider is created with default-values
var ps = new ParticleSlider();
// ParticleSlider is created with given width and height
var ps = new ParticleSlider({
    width: 800,
    height: 400
});
// ParticleSlider is created with 1px gap between particles
var ps = new ParticleSlider({
    ptlGap: 1
});
// ParticleSlider is created 200px wide by 200px high,
// with a monochrome half transparent white slide
// without controls, bound on ID #logos
var ps = new ParticleSlider({
    sliderId: 'logos',
    width: 200,
    height: 200,
    color: 'rgba(255,255,255,0.5)',
    monochrome: true,
    showArrowControls: false
});

 ParticleSlider.$(…)

Parameters

query
string
pattern to search

(starts with . if matching class is searched.) (starts with # if matching id is searched.)

elems
optional
array
array of HtmlElements to filter.

searches in children of ParticleSlider.sliderId if empty

asArray
boolean
forces array as result. Default: false

Returns: array returns array if multiple matches, or asArray is true

or

Returns: object returns HtmlElement if single element matches and asArray is false

or

Returns: string returns id or class of searched element

if no element matches and asArray is false Searches jQuery like in HtmlElements.

Usage

// Example returns current drawing Canvas
ps.$('.draw');
// short hex
ps.parseColor('#fff');
// rgb
ps.parseColor('rgba(255,255,255)');
// rgba
ps.parseColor('rgba(255,255,255,1)');

 ParticleSlider.arrowPadding

number

Inner distance between canvas border and controls in px. The slider checks this value on every change of slide or change of size.

Default: 10

Usage

// Create a ParticleSlider with
// 25px padding.
var ps = new ParticleSlider({
    arrowPadding: 25
});
// Create a ParticleSlider without padding.
var ps = new ParticleSlider({
    arrowPadding: 0
});
// Create a ParticleSlider with default
// padding and change padding to 25px
var ps = new ParticleSlider();
ps.arrowPadding = 25;

 ParticleSlider.color

string

Color (rgb,rgba,hex,shorthex) for controls and slide (if monochrome = true). Can only be specified on slider creation.

Default: #fff

Usage

// Each of the following examples creates a
// ParticleSlider with white color.
// short hex
var ps = new ParticleSlider({
    color: '#fff'
});
// hex
var ps = new ParticleSlider({
    color: '#ffffff'
});
// rgb
var ps = new ParticleSlider({
    color: 'rgb(255,255,255)'
});
// rgba
var ps = new ParticleSlider({
    color: 'rgba(255,255,255,1)'
});

 ParticleSlider.drawParticles()

Draws all Particle to canvas

Usage

// Draw all particles
ps.drawParticles();

 ParticleSlider.getCh()

Returns: number Desired height of drawing canvas

Get current desired height of canvas. Override function to special responsive layouts. Default function fits canvas to minimum of ParticleSlider.height and document height. Returned value is checked every keyframe.

Usage

// Get desired height
ps.getCh();
// Override default behavior with mehtod that
// sets desired height to size of specific html element
ps.getCw = function(){return specificElement.clientWidth};

 ParticleSlider.getCw()

Returns: number Desired width of drawing canvas

Get current desired width of canvas. Override function to special responsive layouts. Default function fits canvas to minimum of ParticleSlider.width and document width. Returned value is checked every keyframe.

Usage

// Get desired width
ps.getCw();
// Override default behavior with mehtod that
// sets desired width to size of specific html element
ps.getCw = function(){return specificElement.clientWidth};

 ParticleSlider.getPixelFromImageData(…)

Parameters

imageData
object
image data from canvas. Array of colors

and alpha with width and height attributes

offsetX
number
offset would be added to x value of image.
offsetY
number
offset would be added to y value of image.

Returns: array Array of objects with following form:

  1. {
    1. xnumbervertical position
    2. ynumberhorizontal position
    3. colorarraycolor array with [red, green, blue, alpha]
  2. }

Method extracts all non transparent pixels to result array. Offset x,y would be added to original coodinates.

Usage

// Extracts non transparent pixel from image data without offset
ps.getPixelFromImageData(imageData, 0, 0);
// Extracts non transparent pixel from image data with 50px vertical offset
ps.getPixelFromImageData(imageData, 50, 0);
// Extracts non transparent pixel from image data with 50px horizontal offset
ps.getPixelFromImageData(imageData, 0, 50);

 ParticleSlider.height

number

Height in px of slider. Can set while running. The slider checks this value every keyframe.

Default: 400

Usage

// Create a 100px high ParticleSlider.
var ps = new ParticleSlider({
    height: 100
});
// Create a ParticleSlider with default height
// and change height to 100px.
var ps = new ParticleSlider();
ps.height = 100;

 ParticleSlider.hoverColor

string

Color (rgb,rgba,hex,shorthex) for controls on hover. Can only be specified on slider creation.

Default: #88f

Usage

// Each of the following examples creates a
// ParticleSlider with white hover color.
// short hex
var ps = new ParticleSlider({
    hoverColor: '#fff'
});
// hex
var ps = new ParticleSlider({
    hoverColor: '#ffffff'
});
// rgb
var ps = new ParticleSlider({
    hoverColor: 'rgb(255,255,255)'
});
// rgba
var ps = new ParticleSlider({
    hoverColor: 'rgba(255,255,255,1)'
});

 ParticleSlider.init()

Initializes ParticleSlider and extracts Particle from current slide.

Usage

// Initializes ParticleSlider
ps.init();

 ParticleSlider.loadingStep()

Every loaded element calls this function. If all necessary ressources are loaded, the slider starts his timers and begins to generate and render Particles

Usage

// Function should called after necessary ressource is loaded.
ps.loadingStep();

 ParticleSlider.monochrome

function

Tints source images in ParticleSlider.color if value is true. The slider checks this value on every change of slide or change of size.

Default: false

Usage

// Creates a monochrome ParticleSlider.
var ps = new ParticleSlider({
    monochrome: true
});
// Creates a colored ParticleSlider.
var ps = new ParticleSlider({
    monochrome: false
});
// Create a colored ParticleSlider and
// switch to monochrome after creation.
var ps = new ParticleSlider();
ps.monochrome = true;

 ParticleSlider.mouseForce

number

Force which pushes the particle from cursor away. Set value to 0 to turn off particle manipulation.

Default: 10000

Usage

// Creates a ParticleSLider with low manipulation force.
var ps = new ParticleSlider({
    mouseForce: 500
});
// Creates a ParticleSLider with high manipulation force.
var ps = new ParticleSlider({
    mouseForce: 15000
});
// Creates a ParticleSLider without manipulation force.
var ps = new ParticleSlider({
    mouseForce: 0
});
// Create a colored ParticleSlider and
// lower manipulation force.
var ps = new ParticleSlider();
ps.mouseForce -= 1000;

 ParticleSlider.nextFrame()

Moves all Particles and render particles afterwards.

Usage

// Render next frame
ps.nextFrame();

 ParticleSlider.nextSlide([count])

Parameters

count
optional
number
slide-index would moved count slides. Default: 1

Method switches slides or refreshes slide if count is 0

Usage

// Show next slide
ps.nextSlide();
// or
ps.nextSlide(1);
// Show previous slide
ps.nextSlide(-1);
// Refresh slide
ps.nextSlide(0);

 ParticleSlider.onNextSlide

function

This function is called after the slide changes.

Default: null

Usage

// Creates a ParticleSlider which shows an
// alert after slide change.
var ps = new ParticleSlider({
    onNextSlide: function(){alert('next slide');}
});
// Create a ParticleSlider and attach
// function onNextSlide after creation.
var ps = new ParticleSlider();
ps.onNextSlide = function(){alert('next slide');};

 ParticleSlider.parseColor()

Parameters

  1. colorstringHexadecimal color. Example: #ffffff

or

  1. colorstringshort Hexadecimal color. Example: #fff

or

  1. colorstringrgb color. Example: rgb(255,255,255)

or

  1. colorstringrgba color. Example: rgba(255,255,255,1)

Returns: array returns for fields long color [red,green,blue,alpha]

Parse color to array [red,green,blue,alpha]. red: 0..255 green: 0..255 blue: 0..255 alpha: 0..255

See ParticleSlider.color See ParticleSlider.hoverColor

Usage

// All function calls return [255,255,255,255]
// hex
ps.parseColor('#ffffff');
// short hex
ps.parseColor('#fff');
// rgb
ps.parseColor('rgba(255,255,255)');
// rgba
ps.parseColor('rgba(255,255,255,1)');

 ParticleSlider.ptlGap

number

Gap in px between Particles. Can set while running. The slider checks this value on every change of slide or change of size.

Default: 0

Usage

// Create a ParticleSlider with
// 1px gap between Particles.
var ps = new ParticleSlider({
    ptlGap: 1
});
// Create a ParticleSlider with default gap
// and change gap to 1px
var ps = new ParticleSlider();
ps.ptlGap = 1;

 ParticleSlider.ptlSize

number

Size in px of Particles. Can set while running.

Default: 1

Usage

// Create a ParticleSlider with
// 2px x 2px big Particles.
var ps = new ParticleSlider({
    ptlSize: 2
});
// Create Particles with default size
// and change size to 2px
var ps = new ParticleSlider();
ps.ptlSize = 2;

 ParticleSlider.resize()

Resizes canvas to values got from ParticleSlider.getCw and ParticleSlider.getCh

Usage

// Resize ParticleSlider
ps.resize();

 ParticleSlider.showArrowControls

boolean

Show / Hide controls. Slider sets value to false, if only one slide is given. The slider checks this value on every change of slide or change of size.

Default: true

Usage

// Create a ParticleSlider with controls.
var ps = new ParticleSlider({
    showArrowControls: true
});
// Create a ParticleSlider without controls.
var ps = new ParticleSlider({
    showArrowControls: false
});
// Create a ParticleSlider with controls
// and hide them after creation.
var ps = new ParticleSlider();
ps.showArrowControls = false;

 ParticleSlider.slideDelay

number

Delay in seconds of autmoatic slide change. Set to 0 if no automatic change is wanted. The slider checks this value on every change of slide. Call ParticleSlider.nextSlide() with count 0 to start the timer.

Default: 10

Usage

// Create a ParticleSlider with
// 30s delay between slides.
var ps = new ParticleSlider({
    slideDelay: 30
});
// Create a ParticleSlider without
// automatically slide change.
var ps = new ParticleSlider({
    slideDelay: 0
});
// Set slide delay to 30s and trigger timer.
ps.slideDelay = 30;
ps.nextSlide(0);

 ParticleSlider.sliderId

string

ID which contains source for slides and canvas elements. Can only be specified on slider creation.

Default: particle-slider

Usage

// Create new ParticleSlider on HtmlElement with ID `logos`
var ps = new ParticleSlider({
    sliderId: 'logos'
});

 ParticleSlider.swapList([p], srcList, dstList)

Parameters

p
optional
object
Particle which should be swaped between two lists
srcList
object
Root-element of a double linked list. Attribute first needed
dstList
object
Target-element of a double linked list. Attribute first needed

Method removes Particle p from srcList. If no Particle is given, a new would created. Afterwards p was added to the beginning of dstList.

Usage

// Example removes p from buffer and moves p to trash.
ps.swapList(p, buffer, trash);
// Example adds new Particle to buffer or recycles Particle from trash.
ps.swapList(trash.first, trash, buffer);

 ParticleSlider.width

number

Width in px of slider. Can set while running. The slider checks this value every keyframe.

Default: 800

Usage

// Create a 100px wide ParticleSlider.
var ps = new ParticleSlider({
    width: 100
});
// Create a ParticleSlider with default width
// and change width to 100px.
var ps = new ParticleSlider();
ps.width = 100;