thallada/proximity-structures
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
60 Commits 1 Branch 0 Tags 7.7 MiB
JavaScript 81.7%
HTML 15.7%
CSS 2.6%
b350f1b271
Go to file
Tyler Hallada b350f1b271 Fix occasional failure to init event handlers 
If the 'load' event fired on the `window` before Pixi.js ran `.load()`, then the
canvas element would not be in the DOM and an exception would be thrown before
the event handlers could be registered. Now, the event handlers are added at the
end of `loopStart`, the function called on Pixi's `.load()`.
2018-06-07 22:33:02 -04:00
css Fix scrollbar bug on certain viewport sizes 2017-08-19 13:53:59 -04:00
img Add 3rd dimension, use sprite instead of circle 2017-08-10 01:07:09 -04:00
js Fix occasional failure to init event handlers 2018-06-07 22:33:02 -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 Put script tags at end of body, after canvas 2018-03-30 23:30:07 -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 Dynamically add/remove points as numPoints changes 2017-08-13 15:11:44 -04:00
package.json Some cleaning up and organization, eslint 2017-05-07 20:44:46 -04:00
README.md Lazily implemented help modal 2017-08-11 01:24:18 -04:00

README.md

Proximity Structures

A procedurally generated and interactive animation created with PixiJS.

Play with it here: http://proximity.hallada.net

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 cause the points to explode 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 linearly
2 makes points meander
3 makes points snappy
4 makes points bouncy
5 makes points elastic
6 makes points overshoot
f toggles FPS counter
d toggles debug mode (including FPS counter)
n toggles display of nodes
l toggles display of lines
? toggles display of help modal

Tweaking

There are many more configurable values that affect the animation which don't have an interaction or keybinding. You can find all of these at the top of proximity.js. If you are feeling experimental, you can clone the repo and edit those yourself.