Go to file
2017-08-04 16:32:50 -04:00
css Some cleaning up and organization, eslint 2017-05-07 20:44:46 -04:00
img Add README and gif 2017-08-04 01:50:47 -04:00
js Tweak click end rebound inertia 2017-08-04 11:30:12 -04:00
.eslintrc.json Actually use eslint and fix errors 2017-07-31 23:59:24 -04:00
.gitignore Actually use eslint and fix errors 2017-07-31 23:59:24 -04:00
CNAME Create CNAME 2017-08-04 01:55:01 -04:00
index.html Add open graph meta tags 2017-08-04 16:32:50 -04:00
LICENSE-3RD-PARTY.txt Add comments and licences 2017-08-04 00:50:37 -04:00
LICENSE.txt Add comments and licences 2017-08-04 00:50:37 -04:00
notes.md Hover, tweeningSets, rebound, scroll time, debug 2017-08-03 00:17:17 -04:00
package.json Some cleaning up and organization, eslint 2017-05-07 20:44:46 -04:00
README.md Add README and gif 2017-08-04 01:50:47 -04:00

Proximity Structures

A procedurally generated and interactive animation created with PixiJS.

GIF of the animation in action

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)