That is an awesome animation! From a technical viewpoint, I find it neat how you render the flakes into a PNG represented by a data URI.

Realism

A lot of the snowflakes look quite nice. But I see some square, pentagonal and heptagonal snowflakes! What kind of chemicals are you using? Is that even mathematically possible? Is some atmospheric condition causing water to form quasi-crystals?

The repulsive force pushes aside snowflakes that were originally within 100 pixels of the cursor. The flakes that are thus selected for repulsion continue to fly away with sideways momentum, even though other at that radius continue to fall unaffected. I would expect viscous forces to dominate over inertial forces (a "low Reynolds number" condition). (In programming terms, each flake should act as if it were "stateless", and shouldn't store xForce.)

Implementation

The vast majority of the flakes are falling straight down with constant vertical velocity. Since there are only 18 possible discrete values of Gravity, you could assign flakes to one of 18 divs, each div acting as a continuously scrolling layer. Then, within each layer, you only have to move the flakes that are close enough to the cursor to be affected by the simulated wind.

Functions should have lowerCase names by convention. Names such as Direction look like constructors.

That is an awesome animation! From a technical viewpoint, I find it neat how you render the flakes into a PNG represented by a data URI.

Realism

A lot of the snowflakes look quite nice. But I see some square, pentagonal and heptagonal snowflakes! What kind of chemicals are you using? Is that even mathematically possible? Is some atmospheric condition causing water to form quasi-crystals?

The repulsive force pushes aside snowflakes that were originally within 100 pixels of the cursor. The flakes that are thus selected for repulsion continue to fly away with sideways momentum, even though other at that radius continue to fall unaffected. I would expect viscous forces to dominate over inertial forces (a "low Reynolds number" condition). (In programming terms, each flake should act as if it were "stateless", and shouldn't store xForce.)

Implementation

The vast majority of the flakes are falling straight down with constant vertical velocity. Since there are only 18 possible discrete values of Gravity, you could assign flakes to one of 18 divs, each div acting as a continuously scrolling layer. Then, within each layer, you only have to move the flakes that are close enough to the cursor to be affected by the simulated wind.

Functions should have lowerCase names by convention. Names such as Direction look like constructors.

The Direction() function would be more elegant without the pi +. Just use Math.atan() more strategically and write return Math.atan2(y0 - y1, x0 - x1);.