Three.js - Particle Engine II (Stream and Smoke)

After bringing the particle engine to life, here are some examples.

Startunnel

//startunnel
    var settings = {
      positionStyle  : Type.CUBE,
      positionBase   : new THREE.Vector3( 0, 0, 2 ),
      positionSpread : new THREE.Vector3( 0.1, 0.1, 0.1 ),

      velocityStyle  : Type.CUBE,
      velocityBase   : new THREE.Vector3( 10, 0, 0 ),
      velocitySpread : new THREE.Vector3( 5, 5, 5 ), 
      
      particleTexture : THREE.ImageUtils.loadTexture( 'images/spikey.png' ),

      sizeBase    : 2.0,
      sizeSpread  : 1.0,    
      colorBase   : new THREE.Vector3(0.05, 1.0, 0.8), // H,S,L
      colorSpread : new THREE.Vector3(0.1, 0.0, 0.3),
      opacityBase : 1,
      blendStyle  : THREE.AdditiveBlending,

      particlesPerSecond : 500,
      particleDeathAge   : 4.0,  
      emitterDeathAge    : 60
     };

Pillar

 //pillar
    var settings = {
      positionStyle  : Type.CUBE,
      positionBase   : new THREE.Vector3( 0, 0, 0 ),
      positionSpread : new THREE.Vector3( 2, 2, 2 ),

      velocityStyle  : Type.CUBE,
      velocityBase   : new THREE.Vector3( 0, 0, 10 ),
      velocitySpread : new THREE.Vector3( 0, 0, 0 ), 
      
      particleTexture : THREE.ImageUtils.loadTexture( 'images/beam2.png' ),

      sizeBase    : 1.0,
      sizeSpread  : 0.2,    
      colorBase   : new THREE.Vector3(0.55, 1.0, 0.5), // H,S,L
      colorSpread : new THREE.Vector3(0.0, 0.0, 0.1),
      opacityBase : 1,
      blendStyle  : THREE.AdditiveBlending,

      particlesPerSecond : 1000,
      particleDeathAge   : 2,  
      emitterDeathAge    : 60
     };

Smoke

    //smoke
    var settings = {
      positionStyle    : Type.CUBE,
      positionBase     : new THREE.Vector3( 0, 0, 0 ),
      positionSpread   : new THREE.Vector3( 0, 0, 0 ),

      velocityStyle    : Type.CUBE,
      velocityBase     : new THREE.Vector3( 0, 0, 5 ),
      velocitySpread   : new THREE.Vector3( 2, 2, 0 ), 
      accelerationBase : new THREE.Vector3( 0,0,-1 ),
      
      particleTexture : THREE.ImageUtils.loadTexture( 'images/smokeparticle.png'),

      angleBase               : 0,
      angleSpread             : 720,
      angleVelocityBase       : 0,
      angleVelocitySpread     : 1000,
      
      sizeTween    : new Tween( [0, 1], [2, 8] ),
      opacityTween : new Tween( [0.8, 2], [0.5, 0] ),
      colorTween   : new Tween( [0.4, 1], [ new THREE.Vector3(0,0,0.2), new THREE.Vector3(0, 0, 0.5) ] ),

      particlesPerSecond : 50,
      particleDeathAge   : 2.0,  
      emitterDeathAge    : 60
     };

Let's have a look at the new atributes.

Tween

 sizeTween    : new Tween( [0, 1], [2, 8] ),
 opacityTween : new Tween( [1, 2], [0.5, 0] ),

This changes the size and opacity over time. The Tween object gets 2 arrays: time (in secs) and values. In this example the size changes from 2 (at sec 0) to 8 (after 1 sec). The opacity changes to 0.5 after 1 sec and fades away (opacity 0) after 2 secs.

 sizeTween    : new Tween( [0, 1, 2, 3], [1,2,3,4] ),

This will +1 the size evey second (for 3 seconds total).

colorTween   : new Tween( [0.4, 1], [ new THREE.Vector3(0,0,0.2), new THREE.Vector3(0, 0, 0.5) ] ),

This changes the color like above. The color is defined as a vector in HSL.
Example:

colorTween   : new Tween( [0.4, 1], [ new THREE.Vector3(0,1,0.5), new THREE.Vector3(0.2, 1, 0.5) ] ),

Angle/Rotation

      angleBase               : 0,
      angleSpread             : 720,
      angleVelocityBase       : 0,
      angleVelocitySpread     : 1000,

This defines a rotation (base+spread) of the texture and the rotation speed (base+spread).
Rotation within smoke is nice to have.