Hey ! First off, I wanna say that this video is incredibly pretty AND informative :) Thank you very much for the inspiration and ideas ! Second, I was wondering if it would be possible for you to post the source code for some of these ? (especially the attractors and perlin noise ones). If not, i was at least wondering which framework and language you made those on, if they were cpu- or gpu-bound, and if they were real-time or renders. Lastly : How did you find the formulas/algorithms/functions for those attractors ? Are they an example you found somewhere on the internet, or did you pick attractor points and then construct the formulas/functions yourself ? Once again, great video, surprised it has only (relatively to the quality, although 2k is still pretty impressive !) 2k views :O EDIT : I'm particularly interested in how you draw those limited trails (and how performant it is, because i haven't really found anything good myself ;-;), as well as "where" the points come from in fields that "trap" points in certain positions or send them off the screen (i.e. what/where are the sources, when do you decide to "generate" a new point, etc...)
I'm planning to release source code for future videos, but not this one. I used pixi.js for this, and it was all cpu, and it wasn't really performant enough to run in real-time - all the animations in this video were renders. The code for the perlin noise fields was super simple - if your noise is on the range 0-1, just multiply it by 2pi, and move your particle in the direction of that angle. One important thing about my implementation in this video is that the field directly controls the instantaneous velocity of the particles. In some other implementations the field influences acceleration rather than the instantaneous velocity. That approach can produce nice results too, but just know that if you do things that way they won't look quite the same as they do in this video. The attractor-ish flow fields are a bit more complicated, and they're something I came up with myself, so unfortunately I don't have any resources to point you to. I might make another video about flow fields at some point though, and if I do I'll be sure to include some more info about how those work, or at least release some source code for them. To achieve the limited trails I had to just redraw everything each frame, so this approach is a lot less efficient than if you just draw a bit of the line onto a persistent texture each frame like most other flow field implementations. I'm not sure if it could feasibly be done in real-time for any sizable number of particles (unless maybe you're a much better GPU programmer than I am 😅) Re particles getting trapped or going off screen, each field in this video has a fixed number of particles active at a given time. The particles all just start off on random positions on the screen. If one goes off screen, or gets trapped in a fixed point, then it's destroyed, and another particle is created at a random location on the screen. You can detect when a particle is trapped in a fixed point by looking at how much it moves each frame - if the distance it moves is under some tiny threshold, then destroy it (if this doesn't work well, like if it sometimes destroys particles that shouldn't be destroyed, then you can instead only destroy a particle when it's movement is under the threshold for several frames in a row).
@@GenerativeGarden Yeah I ended up doing the same thing for peeling noise in the end, and my implementation also assigned an instant velocity to each particle instead of acceleration, as that is even more data to compute on each frame (mine can run in real time !). As for the trails, I ended up slowly fading them by drawing everything to a persistent texture and then drawing a semi-transparent rectangle on top of it on each frame. I have no idea whether it is more performant or not, but my code is definitely cleaner that way (although it's still kind of a mess). For the attractors I have found a *few* clues thus far but it's still quite puzzling to me (and one of my professors as well) how to implement those with instaneous velocity only, so I'll keep on searching >:) Shame about the source code, but I'm sure looking forward to your next videos ! Oh and thanks for the inspiration, just watching this video again gave me a few ideas and a motivation boost ! ^^
Lookup electrostatic fields. As for circular vectors, just swap both dx,dy vectors, negate one of the vectors (no additional maths) to create a perpendicular vector. From there, extremely easy to create vortexes (not in the video). No reason why you shouldn't be getting 60fps with conventional canvas draw, let alone webGL which would be blazing hot.
Hi, can you please help me with my project. I need to create something similar to the 2 d flow field at 01:20. Can you please share a link for that code file? I would really appreciate it.
This is cool. What kind of processing time do you get for these. We are making an underwater game and I have been looking at vector fields for ai. But curious what times in say ms it takes for a frame. Good video thanks very well done
Fish don’t really move like this, but luckily there is an easy algorithm for how they move called bioids. It should be very fast to run in a compute shader.
I don't think there's really a name for it, it's just something I came up with. If you're looking to implement it, the way it works is basically just: find the angle from your particle to the rotator point, and then add 90 degrees to it to get the direction the particle should move in (or subtract 90 degrees, to move it in the other direction). If you have multiple rotator points, do this for each of them, and then add each of the movements together, weighting each one by the inverse of the distance between the particle and the attractor point.
I hate to say it, but I couldn't even watch this because it was so loud in my left ear. Couldn't figure out how to equalize my channels either :c Seemed like a great video though!
Why is this video audio ALL in my left ear? I'm dying. Gotta have to skip out on this one. This is horrendous. I'm sure it's a good video, but this hurts to listen to. Take a Like at least.
FYI... the audio is mixed distractingly heavy on the left if you listen in stereo.
Thanks for letting me know, I'll make sure to fix that for future videos!
A simple fix when listening to mis-mixed audio on youtube. On windows, go to Ease of Access settings, Audio, then "Turn on mono audio".
By far one of the best generative art channels I've found. Much love, and I appreciate the hard work you put into making these videos!
I wish there were more of these videos. Seriously.
So awesome
Reminds me of DFIELD and PPLANE apps from my course in nonlinear dynamics.
Fantastic! This helped a lot when I was working out how curl noise worked. Thanks and I look forward to seeing more great content.
Great video! Only a small complaint, the left audio channel is a lot louder than the right. Might be a problem on my end though.
thought it was just me, the voice is only coming from my left speaker
same here
Amazing, great work! I'm actually using perlin noise but I didn't know I could use them to make flowfields. Looking forward for more :D
My left ear likes that
Yes! Moar content like this!
Great work, well done!
Keep putting more such great videos..
Plz more videos , maybe sharing code too at certain key points.. good content,
Your explanation and video, both are sooo nice. I would love to see more like the 4d and 5d.. if one day you do some...I want to see it
thank you that was well done ... I'm trying to learn flow fields and this helped
Explained so well! 🎉
Hi! Could you expand more on how you implemented the attractor points? I looked for references online but couldnt find anything!
super interesting!
Awesome
Great video! Subscribed!!
Thank you!
Hey ! First off, I wanna say that this video is incredibly pretty AND informative :) Thank you very much for the inspiration and ideas !
Second, I was wondering if it would be possible for you to post the source code for some of these ? (especially the attractors and perlin noise ones). If not, i was at least wondering which framework and language you made those on, if they were cpu- or gpu-bound, and if they were real-time or renders.
Lastly : How did you find the formulas/algorithms/functions for those attractors ? Are they an example you found somewhere on the internet, or did you pick attractor points and then construct the formulas/functions yourself ?
Once again, great video, surprised it has only (relatively to the quality, although 2k is still pretty impressive !) 2k views :O
EDIT : I'm particularly interested in how you draw those limited trails (and how performant it is, because i haven't really found anything good myself ;-;), as well as "where" the points come from in fields that "trap" points in certain positions or send them off the screen (i.e. what/where are the sources, when do you decide to "generate" a new point, etc...)
I'm planning to release source code for future videos, but not this one. I used pixi.js for this, and it was all cpu, and it wasn't really performant enough to run in real-time - all the animations in this video were renders.
The code for the perlin noise fields was super simple - if your noise is on the range 0-1, just multiply it by 2pi, and move your particle in the direction of that angle. One important thing about my implementation in this video is that the field directly controls the instantaneous velocity of the particles. In some other implementations the field influences acceleration rather than the instantaneous velocity. That approach can produce nice results too, but just know that if you do things that way they won't look quite the same as they do in this video.
The attractor-ish flow fields are a bit more complicated, and they're something I came up with myself, so unfortunately I don't have any resources to point you to. I might make another video about flow fields at some point though, and if I do I'll be sure to include some more info about how those work, or at least release some source code for them.
To achieve the limited trails I had to just redraw everything each frame, so this approach is a lot less efficient than if you just draw a bit of the line onto a persistent texture each frame like most other flow field implementations. I'm not sure if it could feasibly be done in real-time for any sizable number of particles (unless maybe you're a much better GPU programmer than I am 😅)
Re particles getting trapped or going off screen, each field in this video has a fixed number of particles active at a given time. The particles all just start off on random positions on the screen. If one goes off screen, or gets trapped in a fixed point, then it's destroyed, and another particle is created at a random location on the screen. You can detect when a particle is trapped in a fixed point by looking at how much it moves each frame - if the distance it moves is under some tiny threshold, then destroy it (if this doesn't work well, like if it sometimes destroys particles that shouldn't be destroyed, then you can instead only destroy a particle when it's movement is under the threshold for several frames in a row).
@@GenerativeGarden Yeah I ended up doing the same thing for peeling noise in the end, and my implementation also assigned an instant velocity to each particle instead of acceleration, as that is even more data to compute on each frame (mine can run in real time !). As for the trails, I ended up slowly fading them by drawing everything to a persistent texture and then drawing a semi-transparent rectangle on top of it on each frame. I have no idea whether it is more performant or not, but my code is definitely cleaner that way (although it's still kind of a mess).
For the attractors I have found a *few* clues thus far but it's still quite puzzling to me (and one of my professors as well) how to implement those with instaneous velocity only, so I'll keep on searching >:)
Shame about the source code, but I'm sure looking forward to your next videos ! Oh and thanks for the inspiration, just watching this video again gave me a few ideas and a motivation boost ! ^^
Lookup electrostatic fields. As for circular vectors, just swap both dx,dy vectors, negate one of the vectors (no additional maths) to create a perpendicular vector. From there, extremely easy to create vortexes (not in the video). No reason why you shouldn't be getting 60fps with conventional canvas draw, let alone webGL which would be blazing hot.
Which programming language did you use for the actual flow field? Or is it a simulation software?
You think this can be achieved in p5.js?
Hi, can you please help me with my project. I need to create something similar to the 2 d flow field at 01:20. Can you please share a link for that code file? I would really appreciate it.
This is cool. What kind of processing time do you get for these. We are making an underwater game and I have been looking at vector fields for ai. But curious what times in say ms it takes for a frame. Good video thanks very well done
Fish don’t really move like this, but luckily there is an easy algorithm for how they move called bioids. It should be very fast to run in a compute shader.
What's the name for the technique that causes the particles to rotate around your generators?
I don't think there's really a name for it, it's just something I came up with. If you're looking to implement it, the way it works is basically just: find the angle from your particle to the rotator point, and then add 90 degrees to it to get the direction the particle should move in (or subtract 90 degrees, to move it in the other direction). If you have multiple rotator points, do this for each of them, and then add each of the movements together, weighting each one by the inverse of the distance between the particle and the attractor point.
I hate to say it, but I couldn't even watch this because it was so loud in my left ear. Couldn't figure out how to equalize my channels either :c
Seemed like a great video though!
Why is this video audio ALL in my left ear? I'm dying. Gotta have to skip out on this one. This is horrendous. I'm sure it's a good video, but this hurts to listen to. Take a Like at least.
Thank you!