Smoke

Smoke is very similar to fire. In fact, the forces we use to simulate smoke are the same. We just need to tweak the values a bit and create some new textures (see Figure 6-6). To make this a bit more interesting, we will emit the smoke at the cursor location.

Figure 6-6. Smoke demo in action

Creating the textures

To create the 64 × 64 textures for the smoke particles, I have simply used some noise with a radial gradient as layer mask. The result is shown in Figure 6-7.

Figure 6-7. Individual smoke sprites

Implementing the emitter

The emitter for smoke is very similar to the one we used to create the fire effect. This makes a lot of sense because they are both simulating hot gas! To make the smoke a bit more interesting, we will emit it from the cursor. So our emitter will get the x, y coordinates of the mouse rather than the dimensions of the canvas we used in the fire emitter. As all the textures now have the same size, the code to make smaller particles faster is no longer needed. I increased the angularVelocity and maxAge a bit to match the behavior of smoke a bit better.  The new emitter looks like this: