A Javascript implementation of a region quadtree (or at least my interpretation of it). The two-dimensional field is split into regions, which may only contain a set maximum amount of points (Capacity per Region). The color of each region indicates its "load" – the lighter the color, the more points still fit into the region.

Inspired by this article on Wikipedia. To get a picture similar to the one in the article, set Capacity per Region to 1 and disable Fill Regions!

Your browser does not support the HTML5 canvas!ClearAdd Random Points|Fill Regions| Capacity per Region:123456789

Click on the canvas to add a point.

And yet another tiny demo.

more...

A small HTML5 <canvas> demo after the break!

more...

Calculating intersections between two lines in 2D space is a common problem, at least for me. One possible approach to find out if there is an intersection and, if yes, where the collision exactly is uses vector analysis.

Speaking in vectors, a line between two points A and B can be defined the following way:

• a is the support vector. It is measured from the origin of the coordinate system to point A (A₁ stands for the x-coordinate, A₂ for the y-coordinate).
  
• b is the direction vector. It can be calculated by subtracting the coordinates of B and A.
  

Together these two vectors form the equation of the line between A and B:



This means that every point on the line can be described as a plus any multiple r of b. Of course points not "between" A and B are also included. To let two lines collide, one just has to equalize the two lines in the above style.

more...

Your browser does not support the HTML5 canvas!
Stop| Toggle:FadeFreaky|Shuffle

Your browser does not support the HTML5 canvas!
StepPlayStop| Speed:+–|RandomizeClear|Wrap around Edges