Skip to content

Latest commit

 

History

History
348 lines (280 loc) · 9.85 KB

Emitter.md

File metadata and controls

348 lines (280 loc) · 9.85 KB
Raw

Emitter

Kind: global class

new Emitter()

Emitter is a particle system that emits and controls particles and renders on a canvas element. It comes with some basic physic features such as gravity, force, bounce and world boundary.

import { Emitter } from 'ad-particles'

The default setting is in js/EmitterData.js that comes with standard-particles template. To tweak the default data, launch particle simulator in AdApp and work with the interface. When you have reached your desired effect, copy the genrated code back to js/EmitterData.js.

For more info about the simulator, visit {@link https://confluence.ff0000.com/display/AT/PARTICLES }

Example

//create a canvas element
View.main.particleCanvas = new UICanvas({
	id: 'particle-canvas',
	target: View.main,
	css: {
		width: adParams.adWidth,
		height: adParams.adHeight
	}
});

// create an instance of Emitter
adData.particleSystem = new Emitter()
// initiate the emitter with the target canvas element
adData.particleSystem.init(View.main.particleCanvas)

// start emitting
adData.particleSystem.emit()

// stop emitting
adData.particleSystem.stopEmitting()

Emitter.tween

Creates a object to hold tween functions:

Kind: static property of Emitter
Properties

Name Type Description
tween.to function to

Emitter.init(canvasElement, setting)

Initiates the Emitter.

Kind: static method of Emitter

Param Type Description
canvasElement CanvasElement a canvas element
setting object optional, contains fps and emitterData as properties to overide the frame rate and EmitterData, see Properties for more info:

Properties

Name Type Description
emitterData EmitterData
fps number default fps(60)

Example

var myEmitter = new Emitter()

// init emitter with default setting
myEmitter.init(canvasElement)

// init emitter with custom setting
var customSetting = {
	fps: 30,
	emitterData: myCustomEmitterData
}
myEmitter.init(canvasElement, customSetting)

Emitter.set(key, val, triggerChange)

Sets a sinlge property of emitter properties. To set multiple properties at once, please use setProperties.

Kind: static method of Emitter

Param Type Description
key string the name of the property (supports nested object key)
val number | string | object | array the value of the property
triggerChange boolean optional, it is for internal use

Example

myEmitter.set('emitRate', 0.1)

myEmitter.set('origin.value.x', 0)

Emitter.get(key) ⇒ number | string | object | array

Gets a sinlge property of emitter properties.

Kind: static method of Emitter
Returns: number | string | object | array - The value of the property

Param Type Description
key string the name of the property (supports nested object key)

Example

var rate = myEmitter.get('emitRate')
var lifeSpanValue = myEmitter.get('lifeSpan.value')

Emitter.setProperties(obj)

Sets a group of properties of emitter properties (supports nested object key)

Kind: static method of Emitter

Param Type Description
obj object an object containing properties and values

Example

myEmitter.setProperties({
	'emitRate': 0.1,
	'background.type': 'none',
	'origin.value.x': 100
})

Emitter.addCustomBehavier(type, func)

Adds on custom behavier in the run loop. If the type is 'particle' function, it will be called in each particle iteration in the run loop with the iterated particle as the first parameter and an array of all particles as the second. If the type is 'emitter', it will be called in each run loop with the emitter as a parameter.

Kind: static method of Emitter

Param Type Description
type string 'particle' or 'emitter'
func function function to add

Example

function customParticleBehavier1 ( particle, particleGroup ) {
	var particleLocation = particle.properties.location;
	var i;
	//if there is another particle in the range of 60, set the color to red
	//otherwise set it to yellow
	for( i=0; i<particleGroup.length; i++ ) {
		var particle2 = particleGroup[ i ];
		var dist = particleLocation.dist( particle2.properties.location );
		if( dist < 60 ) {
			particle.properties.style.color = [ 255, 0, 0 ];
		} else {
			particle.properties.style.color = [ 255, 255, 0 ];
		}
	}
}
function customParticleBehavier2 ( particle, particleGroup ) {
particle.properties.style.scale = particle.properties.location.y * 0.1;
} 
function customEmitterBehavier ( emitter ) {
	//animate the gravityAmount using frameCount
	emitter.set( 'gravityAmount', Math.sin( emitter.frameCount * 0.1 ));
}

myEmitter.addCustomBehavier('particle', customParticleBehavier1)
myEmitter.addCustomBehavier('particle', customParticleBehavier2)
myEmitter.addCustomBehavier('emitter', customEmitterBehavier)

Emitter.removeCustomBehavier(type, func)

Removes the custom behavier added.

Kind: static method of Emitter

Param Type Description
type string 'particle' or 'emitter'
func function function to remove

Example

myEmitter.removeCustomBehavier('particle', customParticleBehavier1)
myEmitter.removeCustomBehavier('emitter', customEmitterBehavier)

Emitter.emit()

Starts emitting particles.

Kind: static method of Emitter
Example

myEmitter.emit()

Emitter.stopEmitting()

Stops emitting particles.

Kind: static method of Emitter
Example

myEmitter.stopEmitting()

Emitter.empty()

Emptys all particles.

Kind: static method of Emitter
Example

myEmitter.empty()

Emitter.pause()

Pause the run loop ( freeze it! ).

Kind: static method of Emitter
Example

myEmitter.pause()

Emitter.resume()

Resume the run loop after pause.

Kind: static method of Emitter
Example

myEmitter.resume()

Emitter.to(duration, props)

It creates a TweenLite animation for tweening emitter properties. ( The purpose of this is to tween multiple nested keys in property object, since TweenLite doesn't support nested keys. )

NOTE!!! This method is on the tween object!

Kind: static method of Emitter

Param Type Description
duration number duration of the tween in seconds
props object properties to use

Example

myEmitter.tween.to( 0.3, {
	'emitRate': 1,
	'velocity.value.angle': 45,
	'origin.value.x': 100,
	'origin.value.y': 350,
	delay: 1,
	onComplete: function () {
		console.log( 'Done!' );
	}
})

Emitter.createParticles(amount)

Creates particles from the particle models of the emitter.

Kind: static method of Emitter

Param Type Description
amount number the amount of particles to create

Emitter.addModel(modelObj)

Add a particle model

Kind: static method of Emitter

Param Type Description
modelObj object the object of the particle model to be added

Example

var modelObj = {
	type: "Circle",
    width: 12,
    properties: {},
    id: 'model5'
};
myEmitter.addModel(modelObj)

Emitter.removeModel(id)

Remove a particle model by its id

Kind: static method of Emitter

Param Type Description
id string the id of the particle model to be removed

Example

myEmitter.removeModel('model5')