Flow-field.js – A library for generating flow fields (opens in new tab)

(github.com)

82 pointsromellogoodman4y ago15 comments

15 comments

mkl4y ago

Looks neat! I'm wondering why/how the first two results pictures (under "Values For num_steps") in https://tylerxhobbs.com/essays/2020/flow-fields have flow lines that are crossing each other. The paths follow a direction field, so that shouldn't happen except where the gradient vector vanishes, which doesn't seem to be the case there.

nrjames4y ago

There are many different ways to move objects through a flow field. Some people use the vectors to accelerate particles, others as instructions for instantaneous rotation, etc. The crossing lines aren't necessarily following the flow field in those images, but likely are just using vectors as an input to another set of instructions.

mkl4y ago

Yes, okay, but the algorithm described just before that treats the vectors as tangents to the path. The pseudocode does a complicated-seeming grid lookup instead of just evaluating the function, but apart from that it's just following the vectors as tangents.

psytrx4y ago

I love flow fields. They are simple, yet elegant and efficient. They are flexible, which Tyler Hobbs shows very nicely in the linked article.

A few months ago I stumbled over that article, and it made me instantly want to try them out. Here's an experiment I made for my website (WIP):

https://preview.fdumont.net/generative/flow-field

joeberon4y ago

Tyler Hobbs usually keeps a large distance between the exposition of the algorithm and the actual artistic example for the sake of maintaining artistic technique secrecy.

imdsm4y ago

A demo would be great for those with more curiosity than time

romellogoodmanOP4y ago

Added to the readme but here is a demo https://codesandbox.io/s/flow-field-demo-kkzmg

code_biologist4y ago

The GUI library that demo uses is pretty slick: https://github.com/pmndrs/leva

mkl4y ago

Click the very first link.

darkhorse134y ago

This is freaking awesome! 2 questions:

- Can I set the result as the background of a <div> element? Or does it have to be on a canvas? Either way, an actual usage example in the README would do wonders.

- Does anyone know of anything similar like this but in Python?

romellogoodmanOP4y ago

I added an example to the readme but generally speaking this framework is pretty agnostic and you can use the x, y coordinates in each line with any library

darkhorse134y ago

Thank you, this is excellent.

roland354y ago

I have recently gotten into pen plotters (like the axi-draw) and needed some tools for generative code for art! This looks like an interesting base for a variety of styles

marstall4y ago

very cool! would love to try to play around with this within a web page's design. kind of like how one might use gradients but on a whole new level ...

dave_sullivan4y ago

Nice, I've been looking for something like this, will play around with it.

j / k navigate · click thread line to collapse

15 comments

mkl4y ago

nrjames4y ago

mkl4y ago

psytrx4y ago

I love flow fields. They are simple, yet elegant and efficient. They are flexible, which Tyler Hobbs shows very nicely in the linked article.

A few months ago I stumbled over that article, and it made me instantly want to try them out. Here's an experiment I made for my website (WIP):

https://preview.fdumont.net/generative/flow-field

joeberon4y ago

Tyler Hobbs usually keeps a large distance between the exposition of the algorithm and the actual artistic example for the sake of maintaining artistic technique secrecy.

imdsm4y ago

A demo would be great for those with more curiosity than time

romellogoodmanOP4y ago

Added to the readme but here is a demo https://codesandbox.io/s/flow-field-demo-kkzmg

code_biologist4y ago

The GUI library that demo uses is pretty slick: https://github.com/pmndrs/leva

mkl4y ago

Click the very first link.

darkhorse134y ago

This is freaking awesome! 2 questions:

- Can I set the result as the background of a <div> element? Or does it have to be on a canvas? Either way, an actual usage example in the README would do wonders.

- Does anyone know of anything similar like this but in Python?

romellogoodmanOP4y ago

I added an example to the readme but generally speaking this framework is pretty agnostic and you can use the x, y coordinates in each line with any library

darkhorse134y ago

Thank you, this is excellent.

roland354y ago

I have recently gotten into pen plotters (like the axi-draw) and needed some tools for generative code for art! This looks like an interesting base for a variety of styles

marstall4y ago

very cool! would love to try to play around with this within a web page's design. kind of like how one might use gradients but on a whole new level ...

dave_sullivan4y ago

Nice, I've been looking for something like this, will play around with it.

j / k navigate · click thread line to collapse