Patt Vira | p5.js Coding Tutorial | Flow Fields (Perlin Noise) @pattvira | Uploaded December 2023 | Updated October 2024, 16 hours ago.
✨ Get your 'Basic toolkit to Getting Started with Creative Coding' on my website: https://www.pattvira.com. Let me know if you find it useful! ✨
—
Links:
🔗 p5.js editor: editor.p5js.org
🔗 Flow Fields Code: editor.p5js.org/pattvira/sketches/R5sp8PVXl
🔗 Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn
🔗 Perlin Noise Series:
🔗 Coding Math: Perlin Noise: youtu.be/XevTlomtG3g
🔗 Bezier Curves (1D): youtu.be/uctX1P3H3xM
🔗 Disco Grid (2D / 3D): youtu.be/sN7JotC3vdM
🔗 3D Terrain Generation (2D / 3D): youtu.be/fN0Wa9mvT60

Timestamps:
0:00 Intro
0:22 The mechanics of a flow field
1:19 Other Perlin Noise videos
1:45 Approach
2:06 Creating a grid of force vectors
13:18 Creating a Particle class
17:17 Putting particles on the grid
28:06 Beautifying my flow field