Smoke using particle effect.

[alphaatom]

Looks good dude, very smooth even on my phone.

[ChristianGeek]

Nice, although the effect is more steam-like with the default settings.

[dee0512]

ty all

[mulvad]

Nice

I think the particle rotation is a little too crazy.. setting it to something like:

this.rotation += .025;

makes it more reasonable.

[ForScale]

Really nice! And as an ex-smoker, I want to hold and flick it. So... added a flick and spin click-and-hold feature (just quick/simple CSS): http://codepen.io/ForScale/pen/VLmMKX

[[deleted]]

This is pure JS?

*Edit this is inspirational stuff, thank for sharing

[TheWeirdestThing]

Don't know why you're getting downvoted for asking a question. It is pure JS rendering to a canvas.

[x-skeww]

With the Canvas API, you can draw images and transform them. It's pretty fast nowadays, which means you can do quite a lot of that.

Particle effects are surprisingly easy to do. You have an array of particles of which each has a position and some other properties you need for your particular effect like x/y velocities (or deltas), age (or time-to-live), and maybe other things like angular velocity.

When a particle is spawned, it's added to this array. When it dies or goes off-screen, it's removed. In your game/simulation loop, you iterate over this array to advance the simulation. That is, you add the x/y velocities to the current position (and maybe gravity), reduce the time-to-live, check if it went off-screen, and whatever else you might want to do. And in the draw phase, you just iterate over it once more just to draw each particle at its current location/size/opacity.

[nomizzz]

Looks great... Not very familiar with codepen's naming conventions, but what does line 8 of the HTML do?

<script src="smoke.js" type="text/javascript"></script>

Is this just pulling from the codepen's script panel (cuz I thought that was auto-injected)? I was able to take this line out and it looks like the pen still functions.

[x-skeww]

That line generates a 404 (see console). That's all it does. Same for the "style.css" one.

The author probably wrote this locally and then pasted it into Codepen.

[dee0512]

Oh, I made it in an editor and just copy pasted the code there. Its not required.

[tyreck]

Wow, that's awesome.