Live Stream #46: Perlin Noise and Flow Fields

Live from!
This live stream is all about Perlin Noise! I explain how Perlin noise is created and how to visualize it. Then I get into 2D Perlin noise and use it to create a flow field with the p5.js library.

4:38 – Presenting today’s topic
22:00 – Video #1 – Intro to Perlin noise
38:34 – Video #2 – Difference between noise() and random()
51:56 – Video #3 – Graphing values of Perlin noise
1:21:24 – Video #4 – 2D Perlin noise
1:40:58 – Video #5 – noiseDetail()
1:53:53 – Video #6 – Perlin noise flow field
2:32:15 – Conclusion/Q&A

Support this channel on Patreon:

Send me your questions and coding challenges!


Links discussed in this video:
Book of Shaders:
Perlin Noise Terrain Generator Video:
Nature of Code video on the topic of Perlin noise:
Pixel Array in p5.js video:

Source Code for the Video Lessons:


For More Coding Challenges:

Help us caption & translate this video!






20 responses to “Live Stream #46: Perlin Noise and Flow Fields”

  1. MadRajib Lab Avatar

    Rather Than Sending the full flowField array , we could just ask for the index of the particle and send just the vector of that index to the particle object.
    It increase the rendering speed to a great extent.

  2. Roger Keulen Avatar

    2:26:20 Your alpha blending picels but not adding them…
    canvas.context.globalCompositeOperation = 'lighter';

  3. Roger Keulen Avatar

    2….or 3 short video's……. after 22 minutes.

  4. Akarsh Rastogi Avatar


  5. Marc Leonard Avatar

    This video is freaking amazing. Not only is there a ton of awesome information, but it's like watching the worlds slowest train wreck.

  6. justanotheruserish Avatar

    keep up the great work!

  7. Polla Fattah Avatar

    You got my thumbs up solely for your dance

  8. Christian Jaeger Avatar

    Wow. I like your mode of presentation. Tweaking parameters and seeing results almost instantly is incredibly helpful. Thanks for the videos.

  9. Oscar Nak Avatar

    tu as un bon français ! 🙂

  10. dahahaka Avatar

    I love this guy, but it gets so cringy sometimes xD

  11. Linas Nikiperavicius Avatar

    Write a program which switches between cameras automatically when you walk to another area.

  12. Vishal Menon Avatar

    on openFrameworks when I use begin/end shape a line is drawn between the last vertex point and the first, cutting through the entire graph – this makes sense because a polygon must be closed. How did you bypass that and get a clean graph in p5.js?

  13. Anatole Avatar

    This guy is living the life i want to live

  14. Nulono Avatar

    You should link the color to the direction of the flow field.

  15. Oliver Lardner Avatar

    Please make an obscurus, like in Fantastic Beasts and Where to Find Them

  16. Pierre K Avatar

    Found your channel by accident yesterday, immediatly suscribed and already watched half of your videos.
    I think you're my new hero.

  17. Melih Durmaz Avatar

    it was very funny at the begining when he was talking cheerfully without knowing we could hear nothing 😀 and with the music,it was really like soundless movies, i expected a nostalgic text screen to show up, which would be awesome 🙂

  18. Gustavo Pezzi Avatar

    Where do I access the chat (for future live sessions)?

Leave a Reply

Your email address will not be published. Required fields are marked *