Javascript letters created out of smoke particles

Question

I would like to have my title heading be created from a smoke animation using javascript. Like here this type of smoke moving to create letters but how would i be able to manipulate the smoke here?: http://jsfiddle.net/Ujz4P/1563/ How do I for example make it form into 'john'

function draw() {
// Clear the drawing surface and fill it with a black background
//context.fillStyle = "rgba(0, 0, 0, 0.5)";
//context.fillRect(0, 0, 400, 400);
context.clearRect(0,0,400,400);
// Go through all of the particles and draw them.
particles.forEach(function(particle) {
    particle.draw();
});
}

Is there a simpler way to do this?

Answer 1

I think the algorithm can be like...

1. Get a vector representation of text. Search for a lib to do this, eg Google "js font to vector path".
2. You'll end up with a collection of vectors representing your text. Further segment the vectors so that there are points along the lines. Eg a capital "L" might be first depicted with just 2 vectors for its 2 sides, but you want to segment the vectors so that each side can have multiple points.
3. All of the points generated by step 1 and 2 are your destination coordinates for the smoke particles. In other words, if your smoke particles were drawn at these destination coordinates, they would spell out the text you want.
4. Assign random coords to the smoke particles.
5. On each render, move the smoke particles closer to its assigned destination coord using tweening. (You can also accomplish this with CSS transform). For a more natural look, you might add some random wandering to the particle movements so that they eventually get to their destination coords without beelining.

That's the gist, and feel free to ask for clarification on anything.

Answer 2

There are plenty of great websites that generates gifs for title sequences. Perhaps you could just embed a gif into your HTML.

Hope this helps.