The Beauty of Code: Flow Fields

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ก.ย. 2024
  • Learn more from in-depth development tutorials and courses at chriscourses.com/
    A flow field is a grid of vectors where neighboring values relate to one another. It's used to create generative effects where objects that travel over it look as if they're "flowing" through some sort of stream, or gust in the wind. It creates for some truly beautiful effects, which I why I decided to make this video in the first place.
    The creation of the flow field starts with laying out an array of points on a 2D (or 3D) canvas.
    From there, a line is drawn from each individual point to help visualize which direction they will push any particle that travels over them. With the lines drawn on the grid, a flow field can be formed by using a two-dimensional Perlin noise function that for each iteration, returns a value that's related to the previous one, varying from 0-1. To access the full degrees of a circular rotation, we multiply this 0-1 Perlin Noise value by 3.14 (PI) * 2.
    With the rotation taking effect, a flow field should form, giving us the ability to create art in more than a number of ways.

ความคิดเห็น • 130

  • @ChrisCourses
    @ChrisCourses  11 หลายเดือนก่อน +40

    I recorded this in a closet btw

    • @reid_makes_art
      @reid_makes_art 7 หลายเดือนก่อน +2

      nice, I converted my closet into a recording room too lol

    • @Suav58
      @Suav58 3 หลายเดือนก่อน

      Around 2:30 a characteristically American point of view. This is putting collective self (of [re-]creators [discoverers, rather] and explorers of the world and mathematics in particular) in a position of transcendence. Yes, there is this feeling of transcendence, but I find it somehow more sane to think about it and this is, I believe, in the spirit of Kurt Gödel, as an aspiration to the true transcendence.
      Otherwise thank you for all your work and sharing.

    • @Ixion125
      @Ixion125 3 หลายเดือนก่อน

      %

  • @alirahmani5601
    @alirahmani5601 3 ปีที่แล้ว +201

    WOW, I can't imagine how much time, energy, and love is spent on this 7-minute video. The presentation was as exciting as the flow itself. BIG THANKS for this one.

    • @ChrisCourses
      @ChrisCourses  3 ปีที่แล้ว +33

      Thanks homie, this was all done remotely on my laptop, and recorded inside a closet lol. Don't need anything crazy to get the quality goin, def expect even more though when I'm back home on my supercharged PC 🔥

    • @alirahmani5601
      @alirahmani5601 3 ปีที่แล้ว +3

      @@ChrisCourses 🤗😋

  • @theangry0077
    @theangry0077 ปีที่แล้ว +49

    very nice video! quick note: to find the magnitude (or “strength”) of a vector, you can use Pythagoras to find the distance between (0,0) and the vector. if the distance is greater than the desired strength then divide the x and y by the vectors strength and then multiply them by the desired strength.
    example:
    x: 6
    y: 8
    desired strength: 5
    strength: sqrt(6^2 + 8^2) = 10
    new x: 6 / 10 * 5 = 3
    new y: 8 / 10 * 5 = 4
    the new strength is now 5.

  • @ernststravoblofeld
    @ernststravoblofeld ปีที่แล้ว +7

    Perlin created his noise function to do stuff he couldn't do while working on Tron. Won an Oscar for it.

  • @Teflora
    @Teflora 2 ปีที่แล้ว +24

    Nice video! Here's a super small trick that can make a huge difference: rotate the vectors of the flow field by 90°! That makes it a curl noise, and the particles don't clump together into ant-lines anymore!

    • @mrbjjackson
      @mrbjjackson 2 ปีที่แล้ว +3

      Hi, do you mind explaining this a bit more please. I've been experimenting with flow fields recently and I've noticed my flows all seem to go in one direction. I'm guessing that's because Perkin noise goes from 0 - 1 but doesn't cross over from 1 back to 0 or vice versa. Is that right? Is your comment about how to avoid that? Thanks very much.

    • @Teflora
      @Teflora 2 ปีที่แล้ว +18

      @@mrbjjackson ok let me try: usually random generated flow fields are converging (clumping together) or diverging (spreading out), they have these characteristics just by chance basically. Rotating all the vectors by 90° is just a very simple operation to get rid of these.
      Imagine you have a flow field with all vectors pointing to one point. It's like a sink everything would get sucked into that point. Rotate each vector by 90° you get a whirlpool where every vector circles around that point instead. They don't clump anymore. You get rid of convergence and divergence, also called non-compressable (you often hear that in fluid simulations)

    • @mrbjjackson
      @mrbjjackson 2 ปีที่แล้ว +2

      @@Teflora Thanks so much for the reply! Great example.

  • @kyliegrass9026
    @kyliegrass9026 2 ปีที่แล้ว +2

    Who knew math could be art!! This is stunning!

  • @Way_Of_The_Light
    @Way_Of_The_Light 3 ปีที่แล้ว +6

    Your channel is so underrated man 😭 Keep up the good work. You deserve a million subscribers 👏👏👏✨✨

    • @ChrisCourses
      @ChrisCourses  2 ปีที่แล้ว +1

      Thanks man, one day we'll get there 😎

  • @elliot_yoyo
    @elliot_yoyo 3 ปีที่แล้ว +3

    The quality of the video is insane. Good job!

    • @ChrisCourses
      @ChrisCourses  3 ปีที่แล้ว

      Thanks a ton homie, do something enough and eventually you get better at it 😆

  • @jeroencommandeur
    @jeroencommandeur 11 หลายเดือนก่อน +1

    Love the combination of the music with the flowfields in the later part of the vid. Well done (besides all the coding)!

  • @nomadtrails
    @nomadtrails 3 ปีที่แล้ว +29

    Awesome man, this is an enormous level up from your past videos (at least the ones I watched a year or two ago), and I have complete confidence that you could transition away from teaching/tutorials to just publishing your own explorations of your own interests, for the rest of us to consume as _entertainment_. This is on the level with fireship and other greats in the space. Cheers.

    • @ChrisCourses
      @ChrisCourses  3 ปีที่แล้ว +4

      That's my goal tbh, one day I'll be able to do this kind of stuff full-time 😅
      Nevertheless, thanks man, really appreciate comments like this, they always bring me up if I'm ever feeling down.

    • @newuser689
      @newuser689 2 ปีที่แล้ว +1

      I agree, but I wouldn't mind more teaching/tutorials in the meantime :)

  • @FiftyKcal
    @FiftyKcal 3 ปีที่แล้ว +7

    wow, the end results are beautiful, great vid!

    • @ChrisCourses
      @ChrisCourses  3 ปีที่แล้ว

      Thank you, glad you enjoyed it 🙌

  • @ExodiumTM
    @ExodiumTM 11 หลายเดือนก่อน +4

    Pretty sure these are standard vector fields/field lines. Very widely used in STEM: electromagnetism, fluid mechanics, gravity, climatology, movement of particles/bacteria/etc. in body fluids, geology (good job pointing out 2:08), and a lot more

  • @DemetrioTorgan
    @DemetrioTorgan 3 หลายเดือนก่อน

    Truly inspiring. Thank you very much. I can't understand how this can be so fascinating.

  • @Hersatz
    @Hersatz 11 หลายเดือนก่อน +17

    Flowfields are used in video games for some specific use cases related mostly -as far as my knowledge goes anyway- to AI path finding.
    One recent, and very good demonstration of this is A Plague Tale, where the rat swarms use a flow field to move around instead of calculating individually a new path every N frames.
    It's mostly an optimization thing compared to the usual pathfinding suspects.

    • @MrSofazocker
      @MrSofazocker 11 หลายเดือนก่อน +1

      Great thing you mention this!
      Flow Fields are being used in many VFX for video games.
      The rats you mention in A Plagues Tale are actually not individual AI Agents, that would be too much. FlowFields are what allowed to do this.
      You can learn more from the GDC talk about their work. It is really fascinating!

  • @sayochikun3288
    @sayochikun3288 3 ปีที่แล้ว +1

    I agree with comments. presentation was in whole another level

  • @NoiseCommander3DS
    @NoiseCommander3DS หลายเดือนก่อน

    Very inspiring, I need to try this at home

  • @deathdefier45
    @deathdefier45 ปีที่แล้ว

    Love you Chris you're a legend for us mere mortals ❤

  • @julianjacobs8956
    @julianjacobs8956 3 ปีที่แล้ว +1

    this is incredible! really cool intersection of math, code, video production and lofi 😂great video!

  • @benjaminguma9962
    @benjaminguma9962 3 ปีที่แล้ว +2

    This guy is a Legend

    • @ChrisCourses
      @ChrisCourses  3 ปีที่แล้ว

      Just a nerd passionate about continued learning 😆

  • @MrPhenixStudio
    @MrPhenixStudio หลายเดือนก่อน

    The end credits music is She Is Still Alive , by Brightarm Orchestra

  • @Me__me1-2
    @Me__me1-2 3 หลายเดือนก่อน

    It's beautiful 🥺🥺

  • @tofflan555
    @tofflan555 3 ปีที่แล้ว +2

    Nicely done, beautiful video!

  • @urssounds
    @urssounds 2 ปีที่แล้ว

    Stellar channel, content and infos! Thx! That’s why I love YT! Keep it coming! 🙏

  • @Nothing-cx4jt
    @Nothing-cx4jt 2 ปีที่แล้ว

    This is an interesting approach! Love the way you presented your thinking process. Thanks for sharing

  • @leonamteixeira3292
    @leonamteixeira3292 11 หลายเดือนก่อน

    This is pure art!

  • @christopher7540
    @christopher7540 3 ปีที่แล้ว +2

    fantastic animations dude, keep it up

  • @MaxMohammadi
    @MaxMohammadi 3 ปีที่แล้ว +2

    Bro quality of your videos getting exponentially better. Keep up the good work. These tutorials are entertaining and nicely edited

    • @ChrisCourses
      @ChrisCourses  3 ปีที่แล้ว

      Thanks man, pretty excited for the next one of these-will be doing it back home where I have a computer that doesn't force me to wait a minute to watch 5 seconds of rendering 😆

  • @zalodias123
    @zalodias123 2 ปีที่แล้ว +8

    Incredible video, Chris! Would love to see the behind-the-scenes of how you made this. Great animation and sound design all throughout.

  • @synergydevelopment3666
    @synergydevelopment3666 ปีที่แล้ว

    really nice explained and the flow of the video was awesome ! We want more ! :D

  • @yannncs
    @yannncs 4 หลายเดือนก่อน

    This is amazing ! Thanks for sharing

  • @yadav-r
    @yadav-r 2 ปีที่แล้ว

    insightful, very beautifully explained

  • @dingleferry736
    @dingleferry736 2 ปีที่แล้ว

    Great video! I learned a bunch and those visuals are gorgeous!

  • @CyCloNeReactorCore
    @CyCloNeReactorCore 2 ปีที่แล้ว +1

    This video has an amazing amount of effort put into it! great video :)

  • @dbroche
    @dbroche 2 ปีที่แล้ว

    👏🏼👏🏼👏🏼 bravo! Standing ovation!

  • @raunitshrivastava8480
    @raunitshrivastava8480 3 ปีที่แล้ว +1

    Wtf bro this is amazing omg

  • @Four_Eyes
    @Four_Eyes 2 ปีที่แล้ว

    after my own heart ✨

  • @hadee.guitarist
    @hadee.guitarist 9 หลายเดือนก่อน

    brilliant and beautiful thank you

  •  2 ปีที่แล้ว

    Excellent video my friend

  • @bloodylupin
    @bloodylupin 8 หลายเดือนก่อน

    amazing video and art 🔥

  • @gabrielle1962
    @gabrielle1962 ปีที่แล้ว

    This is amazing! This was super inspiring

  • @benrobo8
    @benrobo8 3 ปีที่แล้ว +2

    I just love this guy, Chris thanks for this 👏👏😍😍😍

  • @AVCD44
    @AVCD44 11 หลายเดือนก่อน

    Amazing

  • @genericmainer
    @genericmainer 3 ปีที่แล้ว

    Dude this is incredible..

  • @ryanchew2171
    @ryanchew2171 2 ปีที่แล้ว

    This video is amazing!

  • @abdelrahman5094
    @abdelrahman5094 3 ปีที่แล้ว +1

    insane video quality

    • @ChrisCourses
      @ChrisCourses  3 ปีที่แล้ว

      Thanks man, excited for the next one

  • @carlosamaya4141
    @carlosamaya4141 2 ปีที่แล้ว

    Just amazing! Thanks

  • @jstro-hobbytech
    @jstro-hobbytech 9 หลายเดือนก่อน

    Good video. I hope the nft comment was sarcasm that went over my head.

  • @neutron417
    @neutron417 11 หลายเดือนก่อน +2

    This is ART disguised as coding

    • @drioko
      @drioko 2 หลายเดือนก่อน +1

      No. This is coding disguised as Art

  • @benrobo8
    @benrobo8 3 ปีที่แล้ว +2

    Am shut of words, like WOW 👏👌👌😍😍!! This is Great, well done Chris. Was wandering if a crash course is available on this flow fields algorithm.

    • @sofakinguseless32
      @sofakinguseless32 3 ปีที่แล้ว +1

      😆😆🤣

    • @ChrisCourses
      @ChrisCourses  3 ปีที่แล้ว +1

      Hell yeah man, appreciate the response! Don't have anything in store at the moment since my course backlog is so full right now, but wouldn't be a bad idea to get something out within the next week while it's still fresh in my mind lol. Will prob post on my tutorial site at some point if I do decide to go through with it, but either way, can always send you the code if you'd like to get a look at the full thing 🙌

    • @benrobo8
      @benrobo8 3 ปีที่แล้ว

      @@ChrisCourses sure chris appreciate

  • @JohnWasinger
    @JohnWasinger ปีที่แล้ว

    Awesome shout out to the coding train!

  • @abdulsalamaboubakar4059
    @abdulsalamaboubakar4059 3 ปีที่แล้ว +1

    Beautiful video

  • @hectorfoss6180
    @hectorfoss6180 11 หลายเดือนก่อน

    OMG LOVE THIS

  • @atomictraveller
    @atomictraveller ปีที่แล้ว

    re: "ken perlin the third (not really)"
    julius orion smith III at stanford's ccrma provides the most heroically extensive reference for audio dsp you'll find ;)

  • @tachrayonic2982
    @tachrayonic2982 11 หลายเดือนก่อน +1

    Instead of capping the speed at 5, I wonder what would happen if you "Made the velocity approach the desired value"
    That is to say, each flow field point can be multiplied by your desired speed to create a desired velocity at that point.
    Then, you use a drag function (Multiplying the velocity by something less than 1, such as 0.95) to control the velocity.
    In this case, you would subtract the desired velocity, apply the drag, then add the desired velocity back in.
    What this does is it makes the velocity approach the desired value, in the same way the a drag function used on its own would make the velocity approach 0.

    • @tachrayonic2982
      @tachrayonic2982 11 หลายเดือนก่อน

      Having messed around with homing projectiles in Unity, I would take this another step further.
      I would assign each object an Angular Velocity, that is to say a measure of how the direction it is moving is rotating with time.
      Using the desired direction taken from the flow field, I would accelerate this Angular velocity towards the desired direction.
      Without angular drag, this would absolutely overshoot the desired direction, potentially creating really interesting effects.
      I have used this exact system in 3 dimensions, when I set out with the goal to get a cluster of homing projectiles to avoid clumping up when given the same target. I can't say it was super successful, but it was certainly interesting. Unfortunately you couldn't really see the spread from the point of the one launching the projectiles.

  • @FlyingParrot225
    @FlyingParrot225 11 หลายเดือนก่อน

    Loved the vid! I wonder if you did some form of interpolation between the generated vectors surrounding the position of the particle then the particles wouldn't bunch up into a line

  • @blackrack2008
    @blackrack2008 ปีที่แล้ว

    Your particles and paths are clumping up because you're using a convergent noise. You can fix this by using curl noise, you'll get much better results

  • @seanballais
    @seanballais 3 หลายเดือนก่อน

    What's the name for the closing music? I love it!

  • @ynschannel_
    @ynschannel_ 11 หลายเดือนก่อน

    It's all Javascript?. Love it.

  • @sagielevy
    @sagielevy 2 ปีที่แล้ว +3

    Great stuff man!
    How did you get it to run this well in realtime? Did you eventually implement it for the GPU?

  • @MsAnihi
    @MsAnihi ปีที่แล้ว

    Damn, this was good.

  • @oswinbijuchacko2682
    @oswinbijuchacko2682 3 ปีที่แล้ว

    That is so cool !!

  • @maderxyz
    @maderxyz 11 หลายเดือนก่อน

    Very cool!

  • @AKU666
    @AKU666 9 หลายเดือนก่อน

    I know about Flow Fields because i'm in community of Beyond All Reason game. We don't use it in pathfinding system though.

  • @htspencer9084
    @htspencer9084 11 หลายเดือนก่อน

    I've been using perlin noise for yonks but had no idea it was invented for Tron!

  • @BrainInACat
    @BrainInACat 2 ปีที่แล้ว

    cant tell what language your using here ( I am new) is it javascript or maybe python? would love to know~

  • @claudiusraphael9423
    @claudiusraphael9423 ปีที่แล้ว

    Nice backgroundmusic! lol, that aside: it reminds me hard of the boundary when waves intersections become foam due to the difference in air contained/submerged. Tried to film that, but humans have laserfocus and much of the beauty is lost when tracked with just a camera. But the Flow Fields are very similar if not identical.

  • @baronvonbeandip
    @baronvonbeandip 11 หลายเดือนก่อน

    Commenting for the algorithm

  • @fortedexe8273
    @fortedexe8273 2 ปีที่แล้ว

    wow, that really impress

  • @QuentinProvent-Ravenet
    @QuentinProvent-Ravenet ปีที่แล้ว

    Isn't your vectory-lib still available ? I can't find it... is there an equivalent ? I want to use Perlin noise and mouse-hover effects like shown at the end of your video

  • @erturkyorulmaz7376
    @erturkyorulmaz7376 10 หลายเดือนก่อน

    👏Have you shared your Perlin Noice code in any other video?

  • @vachila643
    @vachila643 2 ปีที่แล้ว

    My Gosh...why is this video so underrated aaahhhh, it is so entertaining and informative
    How did you even find theses sound effects Haha You're doing awesome man!!!

  • @aubisoka
    @aubisoka ปีที่แล้ว

    Amazing! Where can i learn to do this? I did not find it on your Homepage.

  • @PixelatedBrain7
    @PixelatedBrain7 3 ปีที่แล้ว +2

    Nice you should collab with frank laboratory.

  • @freya7455
    @freya7455 2 ปีที่แล้ว

    This is absolutely stunning! Does anyone know the best way to achieve the effect shown at the end where the flow fields follow the mouse coordinates?

    • @HatsuneSquidward
      @HatsuneSquidward ปีที่แล้ว

      Lots of vector math. Probably a lot of ways to do it, but I would get the mouse position and have all the vectors slowly track towards it. You'd have to ditch the perlin noise

  • @coldman91
    @coldman91 ปีที่แล้ว

    Hey! Have you tried using wave amplitude?

  • @g4l4h4d1
    @g4l4h4d1 11 หลายเดือนก่อน

    What programmes do you use?

  • @WhateverOwO
    @WhateverOwO 11 หลายเดือนก่อน

    2:15
    Water DOES follow a vector field to move and interact, it's the velocity field and that field follows the Navier-Stokes equations

    • @WhateverOwO
      @WhateverOwO 11 หลายเดือนก่อน

      water has one condition to have a valid velocity field tho, that's that the divergence of the velocity field has to be 0 because water is not compressible and because of the mass conservation rule

  • @simplyD11
    @simplyD11 11 หลายเดือนก่อน

    Go 3d with this, for example using it for murmuration of birds in the sky 🙂

  • @mickyr171
    @mickyr171 2 ปีที่แล้ว

    Lol, i used to build fields this way, as a grid, its the same way everyone does them, all you need is a function that takes in an x,y coordinate and spits out a vector based on some math, then you can make a field to represent any force at any location, far easier and far more powerful because you dont have an entire grid cell taking up the same vector

  • @Zenzicubic
    @Zenzicubic ปีที่แล้ว +1

    Cool, your next challenge is to write the Perlin noise function yourself. It really is not that difficult if you research vector math. Also as someone who knows a bit about physics, the mathematical basis of flowing water (the Navier Stokes equations) do use something similar to flow fields.

  • @BrianHagertyLawyer
    @BrianHagertyLawyer 5 หลายเดือนก่อน

    Have you made any of this code available?

  • @VADYCAN
    @VADYCAN 2 หลายเดือนก่อน

    Bro made the PS3 background thingy 😎

  • @Wrigggy
    @Wrigggy 10 หลายเดือนก่อน

    change it so the particles affect the field itself (gravity).

  • @JonathanZigler
    @JonathanZigler 11 หลายเดือนก่อน +1

    Unit vectors could have normalized the field

  • @bhanubhattarai13
    @bhanubhattarai13 11 หลายเดือนก่อน

    Similar to recent Apple event animation.

  • @deepgawande6511
    @deepgawande6511 3 ปีที่แล้ว

    That was awesome (maja aya)

  • @arktessellator_10
    @arktessellator_10 6 หลายเดือนก่อน

    should have simply studied code base of manim and how vector flow field is evaluated in general using numerical math methods used to solve differential equations like runge kutta method (all available in manim library), that would have been a lot quicker and more correct way for you.

  • @whoami-404
    @whoami-404 3 ปีที่แล้ว

    use it as an audio visualizer

    • @epicm999
      @epicm999 9 หลายเดือนก่อน

      Interesting use case

  • @sanjaysinghbhandari3793
    @sanjaysinghbhandari3793 3 ปีที่แล้ว

    niceeee

  • @Liam-tv7hx
    @Liam-tv7hx 2 หลายเดือนก่อน

    so this is coding, very interesting

  • @anon89461
    @anon89461 3 ปีที่แล้ว

    Q U A L I T Y

  • @DerSolinski
    @DerSolinski 11 หลายเดือนก่อน

    Who need Boids lol

  • @ThankYouESM
    @ThankYouESM 2 ปีที่แล้ว

    Hi, I am a Python beginner, here asking if you can please build for the public an open source Python application that will convert our Python script close as possible into purely a Javascript code basically making it 1000* times easier for the vast majority of people to develop Javascript applications to quite an extent, therefore... we can have the best of both worlds. It doesn't have to be anywhere complicated like a 3D game engine, Thanks.

  • @garlic-os
    @garlic-os 11 หลายเดือนก่อน +1

    Such a cool video! Too bad you participate in NFTs.

  • @DiamondDF
    @DiamondDF 11 หลายเดือนก่อน

    The Beauty of Math*

  • @dreamer2178
    @dreamer2178 2 ปีที่แล้ว

    Cool video but NFTs? Really? Man I can't escape those scams anywhere, can I?

  • @prouddesk6577
    @prouddesk6577 ปีที่แล้ว

    the voice 💀

  • @__hannibaal__
    @__hannibaal__ 11 หลายเดือนก่อน

    Ha ha ha; it s look easy… ha; you need too much mathematic, numerical analysis, mechanics, fluid mechanics; continuum medium mechanics; partiel differential equations, …………. Finit element method, ……, theory of matrix, linear algebra; differential geometry……..;
    Programming skill : fortran or C/C++ preference…… real simulation

  • @gameworkerty
    @gameworkerty 11 หลายเดือนก่อน

    "NFT", ope Im out.