
Show HN: Vector Toy – Visualize and manipulate vector field functions - dandelany
http://dandelany.github.io/vector-toy/
======
dandelany
Hi! This is a side project I've been working on for a couple weeks, inspired
by the famous Nullschool Earth wind map.[1] I wanted to implement the same
style of visualization for arbitrary 2D vector field functions, and to do so
in a way that allows you to experiment with the functions direct-manipulation-
style in the browser. Hope you enjoy playing with it as much as I do :) A few
notes:

\- The code is available on Github [2], bugs/feature requests/PRs welcome.

\- High-quality renders can be made by setting Fade to zero, # of Particles to
a high number, and Line Width to a low number.

\- Add interactivity easily by using the globals `mouseX` and `mouseY` in the
vector functions, which represent the mouse cursor's current X and Y
coordinates in the _field 's_ coordinate system (not pixel coords).

\- The URL contains all of your settings, so you can share what you make by
using the built-in link shortener at the top. Note that these links allow
execution of arbitrary JS, so be aware that links from others may crash your
tab or redirect you somewhere else. Never host this code on a domain where
XSRF-style attack could be a concern.

\- Some challenges, for the adventurous... Try to make a human face or figure,
a Starry Night styled sky, or a realistic cross section of a fruit. Then send
it to me so I can include it as one of the default presets, since I failed to
make them myself :)

[1] [http://earth.nullschool.net/](http://earth.nullschool.net/) [2]
[https://github.com/dandelany/vector-toy](https://github.com/dandelany/vector-
toy)

~~~
nitrogen
A very rough pixel face:

[https://dandelany.github.io/vector-
toy/?s=eyJpc1BvbGFyIjpmYW...](https://dandelany.github.io/vector-
toy/?s=eyJpc1BvbGFyIjpmYWxzZSwicGFydGljbGVDb3VudCI6ODAwMCwiZmFkZUFtb3VudCI6MCwibGluZVdpZHRoIjowLjUsImRvbWFpbiI6eyJ5IjpbLTQuOTk5LDQuOTk5XSwieCI6Wy00Ljk5OSw0Ljk5OV19LCJ2QSI6ImZ1bmN0aW9uIGFub255bW91cyh4LCB5LCByLCB0aCwgdCwgZnIsIHZ4LCB2eSkge1xuXCJ1c2Ugc3RyaWN0XCI7XG5cbnZhciBmYWNlWCA9IFtcbiAgWyAgIDAsICAgICAwLCAgICAgMSwgICAgIDAsICAgICAwLCAgICAgMCwgICAgLTEsICAgICAwLCAgICAgMCBdLFxuICBbICAgMCwgICAgIDAsICAgICAwLCAgICAgMCwgICAgIDAsICAgICAwLCAgICAgMCwgICAgIDAsICAgICAwIF0sXG4gIFsgICAwLCAgICAgMCwgICAgLTEsICAgICAwLCAgICAgMCwgICAgIDAsICAgICAxLCAgICAgMCwgICAgIDAgXSxcbiAgWyAgIDAsICAgICAwLCAgICAgMCwgICAgIDAsICAgICAwLCAgICAgMCwgICAgIDAsICAgICAwLCAgICAgMCBdLFxuICBbICAgMCwgICAgIDAsICAgICAwLCAgICAgMCwgIC0wLjUsICAgICAwLCAgICAgMCwgICAgIDAsICAgICAwIF0sXG4gIFsgICAwLCAgICAgMCwgICAgIDAsICAgICAwLCAgIDAuNSwgICAgIDAsICAgICAwLCAgICAgMCwgICAgIDAgXSxcbiAgWyAgIDAsICAgICAwLCAgICAgMSwgICAgIDAsICAgICAwLCAgICAgMCwgICAgIDEsICAgICAwLCAgICAgMCBdLFxuICBbICAgMCwgICAgIDAsICAgIC0xLCAgICAgMiwgICAgIDMsICAgICAyLCAgICAtMSwgICAgIDAsICAgICAwIF0sXG4gIFsgICAwLCAgICAgMCwgICAgIDAsICAgIC0yLCAgICAtMywgICAgLTIsICAgICAwLCAgICAgMCwgICAgIDAgXSxcbl07XG5cblxudmFyIGkgPSBwYXJzZUludChNYXRoLnJvdW5kKC15ICsgMy41ICsgTWF0aC5yYW5kb20oKSkpO1xudmFyIGogPSBwYXJzZUludChNYXRoLnJvdW5kKHggKyAzLjUgKyBNYXRoLnJhbmRvbSgpKSk7XG5cbmlmKGkgPCAwIHx8IGkgPiA4IHx8IGogPCAwIHx8IGogPiA4KSB7XG4gIHJldHVybiAwO1xufVxuXG5yZXR1cm4gZmFjZVhbaV1bal07XG59IiwidkIiOiJmdW5jdGlvbiBhbm9ueW1vdXMoeCwgeSwgciwgdGgsIHQsIGZyLCB2eCwgdnkpIHtcblwidXNlIHN0cmljdFwiO1xuXG52YXIgZmFjZVkgPSBbXG4gIFsgICAwLCAgICAgMCwgICAgIDAsICAgICAwLCAgICAgMCwgICAgIDAsICAgICAwLCAgICAgMCwgICAgIDAgXSxcbiAgWyAgIDAsICAgICAxLCAgICAgMCwgICAgLTEsICAgICAwLCAgICAtMSwgICAgIDAsICAgICAxLCAgICAgMCBdLFxuICBbICAgMCwgICAgIDAsICAgICAwLCAgICAgMCwgICAgIDAsICAgICAwLCAgICAgMCwgICAgIDAsICAgICAwIF0sXG4gIFsgICAwLCAgICAgMCwgICAgIDAsICAgICAwLCAgICAgMCwgICAgIDAsICAgICAwLCAgICAgMCwgICAgIDAgXSxcbiAgWyAgIDAsICAgICAwLCAgICAgMCwgICAgIDAsICAgIC00LCAgICAgMCwgICAgIDAsICAgICAwLCAgICAgMCBdLFxuICBbICAgMCwgICAgIDAsICAgICAwLCAgICAgMCwgICAgIDQsICAgICAwLCAgICAgMCwgICAgIDAsICAgICAwIF0sXG4gIFsgICAwLCAgICAgMCwgIC0wLjEsICAgICAwLCAgICAgMCwgICAgIDAsICAgMC4xLCAgICAgMCwgICAgIDAgXSxcbiAgWyAgIDAsICAgICAwLCAgIDIuMCwgIC0wLjUsICAgICAwLCAgIDAuNSwgIC0yLjAsICAgICAwLCAgICAgMCBdLFxuICBbICAgMCwgICAgIDAsICAgICAwLCAgIDAuNSwgICAgIDAsICAtMC41LCAgICAgMCwgICAgIDAsICAgICAwIF0sXG5cbl07XG5cbnZhciBpID0gcGFyc2VJbnQoTWF0aC5yb3VuZCgteSArIDMuNSArIE1hdGgucmFuZG9tKCkpKTtcbnZhciBqID0gcGFyc2VJbnQoTWF0aC5yb3VuZCh4ICsgMy41ICsgTWF0aC5yYW5kb20oKSkpO1xuXG5pZihpIDwgMCB8fCBpID4gOCB8fCBqIDwgMCB8fCBqID4gOCkge1xuICByZXR1cm4gMDtcbn1cblxuXG5yZXR1cm4gZmFjZVlbaV1bal07XG59IiwiY29sb3IiOiJmdW5jdGlvbiBhbm9ueW1vdXMoeCwgeSwgciwgdGgsIHQsIGZyKSB7XG5cInVzZSBzdHJpY3RcIjtcblxudmFyIHgyID0geCArIE1hdGgucmFuZG9tKCkgLSAwLjU7XG52YXIgeTIgPSB5ICsgTWF0aC5yYW5kb20oKSAtIDAuNTtcblxuaWYoeTIgPiAxLjIgJiYgTWF0aC5hYnMoeDIpID4gMSkge1xuICByZXR1cm4gZDMuaHNsKDAsIDAsIE1hdGgucmFuZG9tKCkgKiAyLjAgKiAoMyAtIE1hdGguYWJzKHgyKSkpO1xufVxuXG5pZih5MiA8IC0wLjUgJiYgTWF0aC5hYnMoeDIpID4gMS4wIHx8IHkyIDwgLTIuMCkge1xuICByZXR1cm4gd2luZG93LmQzLmhzbCgwLCAwLjksIChNYXRoLnJhbmRvbSgpICogMC40NSArIDAuNTUpICogKDAuNSAvICgxICsgTWF0aC5zcXJ0KHgyKngyKSkgKyAwLjUgLyAoMC41ICsgTWF0aC5zcXJ0KCh5MiArMy41KSooeTIrMy41KSkpKSk7XG59XG5cbnJldHVybiB3aW5kb3cuZDMuaHNsKDQwLCAwLjQsIDAuNzUgKiBNYXRoLnJhbmRvbSgpKS50b1N0cmluZygpO1xufSIsInNjcmVlbklkIjoxNDU2MTI4NTY1NTMzLCJmdW5jU3RycyI6WyJ2QSIsInZCIiwiY29sb3IiXX0=)

------
nitrogen
Including mouseX and mouseY in the functions is fun.

------
eightonrose
Looks awesome! +1

