Published On May 4, 2016
In this coding challenge, I create a 3D procedural terrain using Perlin Noise and the beginShape() function in Processing. Code: https://thecodingtrain.com/challenges...
š¹ļø p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/s...
š„ Previous video: Ā Ā Ā ā¢Ā CodingĀ ChallengeĀ #10.1:Ā MazeĀ Generato...Ā Ā
š„ Next video: Ā Ā Ā ā¢Ā CodingĀ ChallengeĀ #12:Ā TheĀ LorenzĀ Attr...Ā Ā
š„ All videos: Ā Ā Ā ā¢Ā CodingĀ ChallengesĀ Ā
References:
š¾ beginShape() reference: https://processing.org/reference/begi...
š¾ noise() reference: https://processing.org/reference/nois...
Videos:
š What is Perlin Noise?: https://thecodingtrain.com/tracks/the...
š“ Coding Train Live 37: Ā Ā Ā ā¢Ā CodingĀ TrainĀ LiveĀ 37:Ā 3DĀ TerrainĀ Gene...Ā Ā
Related Coding Challenges:
š #18 3D Fractal Trees: Ā Ā Ā ā¢Ā CodingĀ ChallengeĀ #18:Ā 3DĀ FractalĀ TreesĀ Ā
š #24 Perlin Noise Flow Field: Ā Ā Ā ā¢Ā CodingĀ ChallengeĀ #24:Ā PerlinĀ NoiseĀ Fl...Ā Ā
š #112 3D Rendering with Rotation and Projection: Ā Ā Ā ā¢Ā CodingĀ ChallengeĀ #112:Ā 3DĀ RenderingĀ w...Ā Ā
Timestamps:
00:00 Introduction to the Challenge
00:46 What do we need to do?
02:14 Draw a rectangular grid!
04:13 Create a flat triangle strip mesh!
06:51 Rotate the surface in 3D!
08:47 Set the z-values of the vertices randomly!
11:04 Create a 2D array to store the z values!
13:31 How do we make the terrain infinite? What is Perlin Noise?
17:03 How do we make the terrain smooth?
17:43 Reduce offsets to get smoother z values
19:17 How do we make it appear as if we are moving over the terrain?
20:30 Change y-offset per frame to create the illusion of flying!
22:05 Thanks for watching!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
š Website: http://thecodingtrain.com/
š¾ Share Your Creation! https://thecodingtrain.com/guides/pas...
š© Suggest Topics: https://github.com/CodingTrain/Sugges...
š” GitHub: https://github.com/CodingTrain
š¬ Discord: Ā Ā /Ā discordĀ Ā
š Membership: http://youtube.com/thecodingtrain/join
š Store: https://standard.tv/codingtrain
šļø Twitter: Ā Ā /Ā thecodingtrainĀ Ā
šø Instagram: Ā Ā /Ā the.coding.trainĀ Ā
š„ Coding Challenges: Ā Ā Ā ā¢Ā CodingĀ ChallengesĀ Ā
š„ Intro to Programming: Ā Ā Ā ā¢Ā StartĀ learningĀ here!Ā Ā
š p5.js: https://p5js.org
š p5.js Web Editor: https://editor.p5js.org/
š Processing: https://processing.org
š Code of Conduct: https://github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecod...
#perlinnoise #terraingeneration #procedural #processing