Its supposed to be representative of how birds might flock together.Each "bird" on the screen is a member of one of two distinct flocks. Sometimes they come together, sometimes they diverge. Each flock has a separate goal destination, in 3-D space.

But how does it work?

Each "bird" follows a fairly simple set of rules:

Each bird has a velocity, direction, and an angle and accelerates or decelerates a small percentage at a time. They will accelerate when it is going towards its destination, and decelerate when it is going away. Each one decides if it should turn left or right, or up or down, depending which way is best.

How many sprites / birds can I run?

Chrome appears to work best. Should be able to run 8-10,000 sprites at 50-60fps on an average PC.

How does acceleration, deceleration, and compactness work?

Each frame, it applies that value as a multiplier to either speed up or slow down the bird.

Compactness is harder to express. The higher the value, the less clumpy they will be. Without this factor, they would all focus on a single point. I designed it so it should scale at least somewhat successfully based on the number of birds. That is, as you add more birds to the flock, the flock should maintain the same relative density.

Your code is bad and you should feel bad

It is and I do.

Why didn't you just use HTML5's 3D context instead of 2D?

Because.