Ajax Loader
×

Particles Gravity Effect

Edit: Here's a black and white version of the same (black particles and white background, pretty nice)

This is a never-ending rain of particles which are in the action of gravity. The gravity simulation in canvas is a lot similar to the fundamentals that we apply in real physics.

Note: If the experiment is running slow for you and you are on chrome, then change the count variable to a lower number, maybe 200 or 300 and it will work fine :)

Here, we are just varying the vertical velocity component vy of the particles according to an acceleration constant acc that we already defined earlier. To bounce the particles off the floor, we multiply the velocity with a negative factor bounce constant so that it will change the direction of the velocity component from positive y to negative y and the action of gravity will make it again positive after reaching some point making it bounce again and again with some loss of energy.

If we make the bounce constant -1, then there will be no loss of energy and the particles will bounce to the height they were generated at.

I made the particles generation infinite by calculating the number of "hits" it made to the floor and if it's greater than 4, then replace that particle with a new one with new properties. Take a look at the code and you'll clearly understand what I did.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Particles Gravity Effect

    CSSDeck G+