Ajax Loader
×

Particles Explosion with Canvas v2 - Mouse Controlled and Gravity

This is a cool modification of my previous experiment by imbcmdth. He added some cool features to the experiment like

  • The particles now explode from the mouse cursor's position.
  • Addition of gravity so particles have now downward acceleration.
  • Particles will get the momentum of mouse on it's movement.

It's really great and works much better than the previous one. You can see two new variables dx and dy in the recreate function which depicts the change in velocity. Also, a global variable gravity has been defined to render some gravity making the particles to fall down. Now check out the line 96, which is a function that will be called each time when the mouse cursor changes its position. In this function, four variables are assigned some values. The velocityX and velocityY are used as the change in velocity when the mouse moves so particles will get a momentum when the mouse is moved.

The values midPointX and midPointY are used for positioning the emitting point of the particles so that when the mouse cursor is moved, it will move with it. Now lines 79 - 83 are responsible for the movement of particles. You can see that first, the particle positions are changed, then their velocities and finally their y-velocity which, now, includes the gravity. Pretty sweet!

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Particles Explosion with Canvas v2 - Mouse Controlled and Gravity

    CSSDeck G+