Added particle trails for things like exhaust on a car.

samples/particles.html

Index: samples/particles.html
===================================================================
--- samples/particles.html	(revision 18491)
+++ samples/particles.html	(working copy)
@@ -64,7 +64,14 @@
 var g_clockParam;
 var g_textures = [];
 var g_emitters = [];  // so we can find in the debugger to edit in real time.
+var g_poofs = [];
+var g_keyDown = [];
+var g_poofIndex = 0;
+var g_trail;
+var g_trailParameters;
 
+var MAX_POOFS = 3;
+
 /**
  * Loads a texture.
  * @param {!o3djs.loader.Loader} loader Loader to use to load texture.
@@ -141,8 +148,6 @@
       [0, 200, 0],   // target
       [0, 1, 0]);  // up
 
-
-
   // Load textures. This happens asynchronously.
   var loader = o3djs.loader.createLoader(initStep3);
   loadTexture(loader, 'assets/particle-anim.png', 0);
@@ -174,13 +179,43 @@
   setupAnim();
   setupBall();
   setupCube();
+  setupPoof();
+  setupTrail();
 
+  window.addEventListener('keypress', onKeyPress, true);
+  window.addEventListener('keydown', onKeyDown, true);
+  window.addEventListener('keyup', onKeyUp, true);
+
   // Setup an onrender callback for animation.
   g_client.setRenderCallback(onrender);
 
   window.g_finished = true;  // for selenium testing.
 }
 
+function onKeyPress(event) {
+  event = event || window.event;
+
+  var keyChar = String.fromCharCode(o3djs.event.getEventKeyChar(event));
+  // Just in case they have capslock on.
+  keyChar = keyChar.toLowerCase();
+
+  switch (keyChar) {
+  case 'p':
+    triggerPoof();
+    break;
+  }
+}
+
+function onKeyDown(event) {
+  event = event || window.event;
+  g_keyDown[event.keyCode] = true;
+}
+
+function onKeyUp(event) {
+  event = event || window.event;
+  g_keyDown[event.keyCode] = false;
+}
+
 function setupFlame() {
   var transform = g_pack.createObject('Transform');
   transform.parent = g_client.root;
@@ -460,6 +495,67 @@
   transform.addShape(emitter.shape);
 }
 
+function setupPoof() {
+  var emitter = g_particleSystem.createParticleEmitter();
+  emitter.setState(o3djs.particles.ParticleStateIds.ADD);
+  emitter.setColorRamp(
+      [1, 1, 1, 0.3,
+       1, 1, 1, 0]);
+  emitter.setParameters({
+    numParticles: 30,
+    lifeTime: 1.5,
+    startTime: 0,
+    startSize: 50,
+    endSize: 200,
+    spinSpeedRange: 10},
+    function(index, parameters) {
+      var angle = Math.random() * 2 * Math.PI;
+      parameters.velocity = g_math.matrix4.transformPoint(
+          g_math.matrix4.rotationY(angle), [300, 0, 0]);
+      parameters.acceleration = g_math.mulVectorVector(
+          parameters.velocity, [-0.3, 0, -0.3]);
+    });
+  // make 3 poofs one shots
+  for (var ii = 0; ii < MAX_POOFS; ++ii) {
+    g_poofs[ii] = emitter.createOneShot(g_client.root);
+  }
+}
+
+function triggerPoof() {
+  // We have multiple poofs because if you only have one and it is still going
+  // when you trigger it a second time it will immediately start over.
+  g_poofs[g_poofIndex].trigger([100 + 100 * g_poofIndex, 0, 300]);
+  g_poofIndex++;
+  if (g_poofIndex == MAX_POOFS) {
+    g_poofIndex = 0;
+  }
+}
+
+function setupTrail() {
+  g_trailParameters = {
+    numParticles: 2,
+    lifeTime: 2,
+    startSize: 10,
+    endSize: 90,
+    velocityRange: [20, 20, 20],
+    spinSpeedRange: 4};
+  g_trail = g_particleSystem.createTrail(
+      g_client.root,
+      1000,
+      g_trailParameters);
+  g_trail.setState(o3djs.particles.ParticleStateIds.ADD);
+  g_trail.setColorRamp(
+      [1, 0, 0, 1,
+       1, 1, 0, 1,
+       1, 1, 1, 0]);
+}
+
+function leaveTrail() {
+  var trailClock = window.g_clock * -0.8;
+  g_trail.birthParticles(
+      [Math.sin(trailClock) * 400, 200, Math.cos(trailClock) * 400]);
+}
+
 /**
  * Called every frame.
  * @param {!o3d.RenderEvent} renderEvent Rendering Information.
@@ -468,6 +564,10 @@
   var elapsedTime = renderEvent.elapsedTime;
   window.g_clock += elapsedTime * window.g_timeMult;
 
+  if (g_keyDown[84]) {  // 'T' key.
+    leaveTrail();
+  }
+
   var cameraClock = window.g_clock * 0.3;
   g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
       [Math.sin(cameraClock) * 1500, 500, Math.cos(cameraClock) * 1500], // eye
@@ -493,5 +593,7 @@
 <!-- Start of O3D plugin -->
 <div id="o3d" style="width: 800px; height: 600px;"></div>
 <!-- End of O3D plugin -->
+Press 'P' to make a poof.<br/>
+Press 'T' to make a trail.
 </body>
 </html>