Patt Vira | p5.js Coding Tutorial | Procedural Terrain Generation (Perlin Noise) @pattvira | Uploaded November 2023 | Updated October 2024, 14 hours ago.
β¨ Get your FREE '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
π Procedural Terrain Generation Code: editor.p5js.org/pattvira/sketches/AYp1dlGoU
π Starter Code: Disco Grid (Perlin Noise): editor.p5js.org/pattvira/sketches/LJ_CY3104
π 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
Timestamps:
0:00 Intro
0:35 How to draw a box in 3D
4:56 How to draw grid of boxes in 3D
8:35 Walking through the Starter Code (Disco Grid w Perlin Noise)
9:37 Tweaking the code from 2D to 3D
β¨ Get your FREE '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
π Procedural Terrain Generation Code: editor.p5js.org/pattvira/sketches/AYp1dlGoU
π Starter Code: Disco Grid (Perlin Noise): editor.p5js.org/pattvira/sketches/LJ_CY3104
π 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
Timestamps:
0:00 Intro
0:35 How to draw a box in 3D
4:56 How to draw grid of boxes in 3D
8:35 Walking through the Starter Code (Disco Grid w Perlin Noise)
9:37 Tweaking the code from 2D to 3D