diff --git a/README.md b/README.md new file mode 100644 index 0000000..f7b4cba --- /dev/null +++ b/README.md @@ -0,0 +1,36 @@ +# Proximity Structures + +A procedurally generated and interactive animation created with +[PixiJS](http://www.pixijs.com/). + +![GIF of the animation in action](/img/proximity-structures.gif) + +A number of points are placed randomly on a canvas. They move in random +directions with their own movement behavior. Each is assigned a random color. If +other points travel close enough, a connection is drawn between them and each +point's color becomes an average of all of its connected points' colors. + +### Interaction + +Your mouse on the canvas will repel points away, but clicking and holding will +attract points towards your mouse until you let go, which will explode the +points outwards in all directions. + +Scrolling your mouse will speed up or slow down time. + +### Keybindings + +| Key | Action | +| ----- | --------------------------------------------------- | +| left | hold to restrict points to the left of the screen | +| right | hold to restrict points to the right of the screen | +| up | hold to restrict points to the top of the screen | +| down | hold to restrict points to the bottom of the screen | +| 1 | makes points move uniformly gradual | +| 2 | makes points meander | +| 3 | makes points snappy | +| 4 | makes points bouncy | +| 5 | makes points elastic | +| 6 | makes points overshoot | +| f | enables FPS counter | +| d | enables debug mode (including FPS counter) | diff --git a/img/proximity-structures.gif b/img/proximity-structures.gif new file mode 100644 index 0000000..64fd63c Binary files /dev/null and b/img/proximity-structures.gif differ