What I've learned about flow fields so far
damoonrashidi.meNice! Playing around with the widget under the section "Experimenting with lines" I'm reminded of Bret Victor's Inventing on Principle talk [0] (an absolute must watch, if anyone hasn't yet). In particular, changing the smoothness reveals a sort of scaling effect that I'd probably never know about if not playing around with sliders and having it update in real time rather than setting individual values. Very interesting and beautiful!
I haven't seen that talk yet but will for sure watch it tonight!
I wrote an article on the basics of Flow Fields in the context of Generative Art (no AI stuff, just for loops and if cases). It has some fun interactive illustrations and code samples for anyone looking to get into the field.
Very nice blog post, thank you for sharing!
I spotted a small error in the Finally, Colors. section:
...should probably beconst color = floor(random() * palette.length);const paletteIdx = floor(random() * palette.length); const color = palette[paletteIdx];ah, of course! thanks for reading and noticing. It's been updated.
Really nice, I love the interactive explanations. We covered flow fields in a chapter for the second edition of our book 'Coding Art' [0]. We use p5.js to match the earlier Processing parts in the book. Btw, Tyler's page is referenced, but yours will be in a future edition. Thanks for writing this up!
Ah, super cool! Looking forward to reading the future edition!
Very nice article, thanks for posting!
If you don't know about it already, Gorilla Sun has a newsletter that this would be perfect for [0].
My all-seeing eye sees your comment XD definitely including this post in the newsletter!
Cool! Thank you very much!
ha! Of course you're here.
Love your newsletter!
This is very nice! I remember drawing direction fields and integral lines through them in my numerical PDE class but I guess I lacked artistic mindset to push it further :)
I see that some of your generative art i this styles has multicoloured flow lines, is that just random or are the splits computed somehow?
Thanks! Some splits are randomly generated by traversing the line and each point has a small chance (5% or so) to create a split and change color. I've tried other techniques as well where lines change color by which region of the the canvas they are in etc.
I even wrote a small UI using Rust and egui to render the drawings in real-time just to play around with that specific part. It looks like this https://imgur.com/a/Zfp1ls3 and is open source https://github.com/damoonrashidi/generative-art/tree/develop...
This is awesome! I noticed on the 'Experimenting with lines' section, when smoothness is low, warp is high and length is high, that the lines end up mostly coalescing into big roads. It reminded me of ants forming paths, but it's interesting that this required no communication between the lines. Is this a particular feature of the noise function or does it always do that?
This is how I think about the ant like paths: Since we're warping the angles lines that turn a little will turn more, and lines that turn almost nothing will continue turning very little. Lines will start to converge against points that turn very little, after which all lines are grouped up and all go through the same points. I.e. turn until the turn-vector is small. That only happens when the smoothing is low, since the difference in noise values will still be high enough to cause this effect.
I don't know it that mess of a paragraph was understandable, but hopefully it answers your question!
This kind of work always reminds me of the Complexification website: http://www.complexification.net/gallery/
Every time I visit though, I can see it hasn't been updated to replace the java or flash bits.
As a trained physicist, it's weird to see such "unnatural", ad hoc fields used. I have the feeling that using a fluid dynamics solver might generate more realistic looking fields. One issue with the smoothing is that it introduces a discontinuous correlation function. When you crank down smoothing, you can see this artifact as horizontal lines that get closer and closer together as smoothing is lowered. Simulated fluid flow with a few sources, sinks would mean there's no need for ad hoc smoothing.
Been a while since I dabbled with fluid physics, but I was thinking how about ensuring the input noise field was divergence free[2]?
[1]: https://en.wikipedia.org/wiki/Projection_method_(fluid_dynam...
Yes! A friend and I had the same thought a while back and then remembered the curl operator from vector calculus is divergence free, so you can take the curl of any 3d field to get a divergence free result, and then use a 2d slice of that if you want. It does look like fluid flow when you do that. I’ve even used this trick in CG films back when I worked at DreamWorks. We wrote a bit about this divergence free noise field fake fluid flow in a Siggraph course. A few years later, another researcher came up with some techniques for putting boundaries and obstacles into the noise field. He may have come up with the same idea for using the curl of noise independently, but he referenced the article my friend and I wrote. https://www.cs.ubc.ca/~rbridson/docs/bridson-siggraph2007-cu...
But! I’m not sure divergence free noise would necessarily solve any problems for what this artist is trying to achieve. The art he’s generating is currently making use of the field’s divergence and convergence properties; in the images it’s important that lines move further apart and become less dense sometimes, and then converge and become more dense in other places. The divergence can be ugly if you see too much of it or identify the pattern, and that’s a big reason the article uses collision detection to terminate converging lines. But the finished images he shows are also setting the noise scale and framing the image manually in order to maximize the benefits of the divergent noise, and minimize the downsides.
When I googled for the paper I found a few interesting links about curl noise:
2d example: https://al-ro.github.io/projects/curl/
3d example: https://al-ro.github.io/projects/embers/
Houdini offers curl noise. Houdini is amazing for generative art, btw, and has a free personal learning edition.
Docs: https://www.sidefx.com/docs/houdini/nodes/vop/curlnoise.html
Example usage: https://entagma.com/houdini-curl-noise-flow/
Very interesting, thanks for sharing.
I get that a perfectly divergence-free field might not be what the artist is after, but if you go the projection route where you "subtract out the divergence" so to speak, I was thinking you could just do a scaled subtraction to not take all of it out. Alternatively perhaps it could be artistically interesting to do a non-linear scaling.
Anyway, seems like a fun rabbit hole.
First rule of computer graphics: simple and plausible beats complex and realistic, every time. A noise function you likely have anyway, as noise has a myriad uses in graphics. An FD solver, not so much, at least if you're not working on water/smoke/fire simulations.
I love simple and plausible over complex, but there is a consistent trend over time in CG of adopting the realistic simulation approaches as we tame them. See my sibling comment about curl noise for examples of fake fluid flow, but I have to caveat that writing a simple fluid solver for generative art is pretty easy and a lot less demanding than for simulation or production work. A fluid solver is also, interestingly, less compute than Perlin or simplex noise. Those noise functions are quite expensive to evaluate at a point, compared to the amount of math needed to process fluid for a voxel’s timestep (I’m talking 1-2 orders of magnitude). You can amortize the noise cost if it’s static and you sample it onto a grid, but otherwise, surprisingly, it’s possible for noise to be a more complex and less plausible choice, depending on what the artist wants.
Why should the fields be realistic looking? I guess this is one of the dangers of presenting working interactive illustrations and tutorials for generative art; it lets people look behind the curtain and identify the illusion, and you lose the magic of the finished artwork. The artist was careful and deliberate in their final examples to not crank down the smoothing enough to see horizontal lines. Simulated fluid flow wouldn’t be able to easily produce any of the first three images in the article very easily, if at all, and people doing simulated fluid flows still frequently inject turbulence (ad hoc noise) anyway in order to give it texture.
As a generative artist, I experimented with flow fields for a while but found them rather limited, especially given how many people use them. It's hard to distinguish yourself if you do what everyone else is doing.
I still feel like a lot of variation that can be achieved if you dig pretty deep, but I do agree that it's difficult to do something meaningful that other people aren't also doing since everything can easily become "same-y looking". What's great about flow fields is that they're easy to understand and you can get pretty interesting results for not that much effort, making them a great and accessible introduction to generative art for people who haven't tried it before.
Can a higher dimensional flow fields projected down along different 2d planes generate something good? And animating the 2d plane or rotating the flow field generate good visuals?
Yeah, I guess it’s probably hard to stand out with flow fields since you have really famous gen artists like Tyler Hobbs using them quite heavily. What have you found to be less limiting or more expressive? Other expressions of noise?
Whats your portfolio? Do you use AI now?
Nice! Could this be loosely related to neural cellular automata? https://youtu.be/3H79ZcBuw4M?si=-B7RRoz2RdVgkz6p
I'm not an expert but as far as I can see the overlap is "only" that they both use a grid to propagate values through. Which admittedly is a pretty fundamental way to structure things. The high-level concepts seem quite different otherwise.
I suspect you could encode (some) flow fields in neural cellular automata though. "Some" because "flow fields" aren't too strictly defined I'd say, so some of the more creative variations might not quite fit within the constraints of neural cellular automata.
So I guess it depends on the angle from which you approach it. Probably not from the "default" angles that most people use for either topic. OTOH finding an unexpected connection by looking at both in a non-obvious way might be fruitful though!
These are vector fields. https://en.wikipedia.org/wiki/Vector_field
For collision detection using screen space might be easier, i.e. instead of looking for collisions between lines one wants to draw analytically, just try to draw them and check if all the pixels are background pixels.
Great point! Unfortunately I do most of these generative art experiments as SVGs to feed to an axidraw machine (https://shop.evilmadscientist.com/productsmenu/846), but gut feeling says that in these canvas examples where sampling screen colors is possible your suggested method would be faster, and much more so for smaller lines and if the canvas is big.
I'll try to make an edit to the article where I try it out when I'm off work.
Thanks for the tip!
SVG also has functions for hit testing [1][2] but I have no experience or at least memories of using them. So no idea if they could be useful and performant enough. But given that interactive SVGs might require finding the object under the mouse cursor as it moves, I would expect this to be reasonable performant, but it might of course still be too slow when used while drawing hundreds or thousands of objects.
[1] https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometry...
[2] https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometry...
This is lovely.
First, I could only imagine playing ASCII like games (such as old Roguelikes, especially ones with outside worlds, such as OMEGA[0], with this as animating the fields, waters, etc - would be interesting.
However, I was really drawn to how this might be used on GIS pointclouds, topographical maps (for animating flows down topographic GIS data?)
[0] http://crpgaddict.blogspot.com/2011/05/game-55-omega-1988.ht...
I played around with some similar ideas, it's a really interesting corner of generative art, with lots of prior work.
For mine, I make fields by superimposing a bunch of harmonic functions. By playing with different periods, phases, etc. you can get some cool patterns that look irregular and interesting, though I think they have a different feel from some of these noise-based examples.
I also make some fields by using sources and sinks: a collection of points that push out or in. You don't need that many to make an interesting field.
For collision detection I use the trick @danbruc mentioned in another comment: I draw to an offscreen canvas, and just check pixel color to see if a trace is already there. It's probably very costly in terms of memory as a data structure, but it's very convenient :) https://www.instagram.com/p/CMi4QcXn6_y/?img_index=1
For me the interest has come in coloring the lines — by deferring rendering until after the path has been plotted, you can color different traces according to how long they are, how much they curve or change, etc. which can reveal interesting bits about the flow structure. https://www.instagram.com/p/CMvqZjkHYpV/?img_index=1
Thanks for this great writeup @tehrash, the explanations and examples are great!
I implemented something similar[0] a while back in rototiller[1], there's a short low-res youtube clip here[2].
It was a fun little hack, I didn't realize this is a thing. I was just messing around with an idea of pushing particles through a cube of tri-linearly interpolated direction vectors, without simulating any actual physics like mass/friction/fluids or anything like that.
Something which surprised me was during development I just populated the cube of vectors with randomized vectors, fully expecting I'd have to do something more intentional and clever before it was interesting to watch. But the emergent structure of the flow paths even with the pseudo-random vectors was surprisingly interesting and I just left it at that, with the addition of a second randomized field the direction vectors would be interpolated between in a ping-pong manner. When one field is dominant, it re-randomized the other, resulting in a continuously-looking evolving field...
Tinkering with graphics hacks is loads of fun.
[0] https://github.com/vcaputo/rototiller/blob/master/src/module...
A lot of the examples here feel very simar to Tyler Hobbs work... https://tylerxhobbs.com/essays/2020/flow-fields
Yes, I reference that as being pretty much the seminal work on the topic within generative art in the beginning of the article (and link to the same article even!)
What I hoped to add to the topic was making it even more accessible for people who maybe haven't even heard of generative art yet, as well as provide some interactive illustrations to help showcase their behaviors. Hopefully that doesn't come across as me trying to take credit for his work, because I find the stuff he makes (his articles even more than his artworks sometimes) super influential.
Ah i'm very sorry. I ctrl+f'd his name, but should obviously have just read a bit more carefully.
No worries! It's important that proper credit is given especially when he's done so much to push things forward in the generative art space.
A great demonstration that is very easy to follow and interactive without compromising anything on mobile.
Thanks for noticing the mobile support! I put a lot of effort in making it work well both on smaller screens as well as with touch/mouse support and light/dark mode while trying to ship minimal amount of js to the browser.. even the canvas elements re-render responsively in regards to size+theme.
I feel justified now and can finally sleep well knowing the time I spent manually formatting the code blocks so they wouldn't have horizontal scroll wasn't wasted!
Flow fields are fun but they’re not ideal for movement and collision detection. They’re relatively unstable and expensive to build.