-1

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?

john
  • 19
  • 4
  • 2
    If you're creative, you should be able to do it with pure CSS3. I suppose you could reverse something like this: https://www.zachstronaut.com/lab/smoke.html – rdiz May 23 '17 at 19:16
  • thats not smoke though that looks like a typical fade out – john May 23 '17 at 19:20
  • @john What browser are you using? There is definitely a smoke effect that is accomplished through shadows, animation and fading. – Scott Marcus May 23 '17 at 19:22
  • google chrome lol – john May 23 '17 at 19:25
  • 1
    When you ask "is there a simple way to do this?" the short answer is "no, your example code is already way too simple." Short of a ready-made lib somewhere for writing particle text, you will need to write a LOT more code. I proposed an algorithm for you. Maybe zero in on what the hard parts are for you. – Erik Hermansen May 23 '17 at 19:30

2 Answers2

3

I think the algorithm can be like...

  1. Get a vector representation of text. Search for a lib to do this, e.g 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. E.g. 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.

Erik Hermansen
  • 2,200
  • 3
  • 21
  • 41
  • This is basically the best advice you could get, OP. Short of someone writing hundreds of lines of code for you, these are good targets to implement. – R. McManaman May 23 '17 at 19:32
  • interesting ideas to get started thank you. i also found something called autodesk smoke whch is much easier. regardless, something i've always wanted to do with javascript, this helps a lot, appreciate it!! – john May 23 '17 at 20:53
0

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.

Ethan Coe
  • 47
  • 1
  • 4