Ajax Loader
×

Particle System Leaving Trails

This is the second creation of my series where I show you how to make a particle system with trailing particles.

It's basically built on the previous experiment with few improvements and tweaks!

So what's the trick behind the trails anyway ? The trick is to repaint the background with a translucent color that makes the particle from previous frame visible but with lesser opacity.

The background repaint keeps on repeating which leads to the removal of old particles as multiple repaints leads to an opaque frame above those "old" particles.

So this is the code that does the trick:

// ctx.clearRect(0, 0, window_width, window_height);
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, window_width, window_height);

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Particle System Leaving Trails

    CSSDeck G+