Coding Train Live 37: 3D Terrain Generation

Live from sfpc.io!
In this video, I create a 3D moving terrain using Perlin Noise and the beginShape() function in Processing.
💻 thecodingtrain...
Timestamps:
28:55 - Coding Challenge: 3D Terrain Generator
51:40 - Conclusion
🚂 Website: thecodingtrain....
👾 Share Your Creation! thecodingtrain...
🚩 Suggest Topics: github.com/Cod...
💡 GitHub: github.com/Cod...
💬 Discord: thecodingtrain...
💖 Membership: kzbin.info...
🛒 Store: standard.tv/co...
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
Links discussed in this video:
Nature of Code class on Kadenze: www.kadenze.co...
My Perlin Noise video: • I.5: Perlin Noise - Th...
beginShape() reference: processing.org...
noise() reference: processing.org...
Help us caption & translate this video!
📄 Code of Conduct: github.com/Cod...

[@davidhuynh2560]

Coding from scratch begins at 28:55

[@nofacee94]

thanks, this is helpful in JavaScript.

[@MisterMajister]

Hey Daniel, long since you uploaded this, but loved the video! I removed the stroke added lights and filled with a lush green. Then I added a blue plane (4 closed vertices) with z-coordinates slightly above the lower mapping limit to produce lakes. It looks neat ;)

[@pearyd1204]

Or even 3D perlin noise caves would be simple but cool

[@JohnJ-xm3fg]

+Daniel Shiffman Is there P3D (or similar) in p5js?

[@arnaldoquinones7764]

Can someone tell what programing lenguaje uses for coding? Thanks!

[@cookieaceae1413]

Hey man, big fan. Love your video. I was always confused about using Perlin Noise but your video was so clear and easy to understand. Keep up the good work!

[@iAzazelHD]

Could u make a video painting the terrain according the the value terrain [x][y] gets pls?

[@dantecollet768]

Make this please in Javascript

[@beyondlwm]

Like your video but why the subtiles are closed?

[@thommiano9519]

I've found your materials to be rich yet very accessible. Thanks so much!

[@KamelOfficial]

could it be that the frameRate() bug at 39:00 is happening because you are writing it in the draw() function and not in the setup()? anyhow, thank you a lot for all the videos. i just started learning processing, and you and your books are my holy bible!

[@TheCodingTrain]

+FrancescoCameli aha, you are right! It doesn't work to change the frameRate in draw() for P3D. Thanks for the nice feedback!

[@ibgi1995]

skip to 28:00 id you want to see from beginning of the build

[@gamehelp16]

On the first part of the video before the coding challenge how do you make it so that some triangles are darker than the others creating a "bumpy" effect?

[@TheCodingTrain]

+gamehelp16 You can use fill() to color each triangle individually. You could try mapping the z-value to the fill brightness.

[@gamehelp16]

+Daniel Shiffman I have tried that but what I got is a "smooth" coloring, while in the video it's just some parts which get colored and some are not.

[@TheCodingTrain]

+gamehelp16 What you are seeing I think is that the triangles have an alpha so when they are near each other the overlapping color gets darker. I'm actually using the same fill() for all of them.

[@gamehelp16]

+Daniel Shiffman ah, okay!

[@gnkarn00]

can add fill(120, 222, 120, terrain[x][y + 1] + 105); at the end of the vertex loop, so the mesh will result being "coloured " , kind of better look .

[@rallymax2]

From chaos to solid 22min tutorial. You are da man. You make it look easy, your experience shows.

[@thomasroyez]

Yup very good lesson thank you, I am back to processing after years, and discover some news great functions. Playing with this code, I don't understand why I can't export an SVG. file from this code, using the SVG import function, that actually works good on others programs I wrote. Can someone help me ?

[@programmer1up286]

What about terrain on a sphere?

[@TheCodingTrain]

oh, love this idea! Take a look at my sphere video for more: kzbin.info/www/bejne/iJzYc4p7oKelkKM

[@programmer1up286]

Thank you so much for responding!! Perhaps you could record a tutorial featuring terrain on a sphere or planetary terrain? :D

[@TheSpectron3]

That was a good live, although it France it started at 10pm, which is prety late :D btw, I started making a series of challenges where I talked about you :)

[@TheCodingTrain]

+Spectron Cool, please share links!

[@codemix129]

Please show us a project with the Hype framework!

[@toastyPredicament]

Nyaaaaaaaa

[@obedotto4465]

you should add orbit controls :D

[@Ghanzo]

Is he using a server to test his results?

[@smootheddrake5481]

42:59 man, he lasted longer than i thought

[@Jimanator]

another way to give a smoothing effect wold be to add a random slope to the previous value.

[@TheCodingTrain]

+James Butler (Jim) Thanks for the tip!

[@Ghanzo]

Wow that was fast, well done!

[@HundredsScope]

very nice tutorial :)

[@pearyd1204]

Could we maybe get a part 2 with more advanced noise? Like more mountainous terrain with more rough detail in he terrain instead of regular old smooth 2d noise, I've done this prior to your video and use 2d perlin noise arrays a lot in my projects so a bit more advanced procedural terrain would be cool and quite helpful, great video keep them up!

[@pearyd1204]

Btw I ment mountainous in the way how regular 2d perlin noise only looks hilly, with smooth peaks, not large mountains with sharper peaks which would be cooler

[@TheCodingTrain]

+Peary D interesting, great suggestions, I will keep this in mind!

[@chimichangle]

I have no clue how to translate this into p5.js, my biggest problem being the lack of 2D arrays in javascript. Are there any resources you know that might help?

[@nofacee94]

2d arrays are simple in JavaScript = [[0,1,2,3],["a","b","c","d"]] is a 2D array; 2 arrays inside a single array.

[@chimichangle]

Noface are the arrays inside the arrays flexible in length like normal arrays?

[@nofacee94]

Yes but be careful when you iterate over them inside for loops. If you use something like: my2DArray = [ ["A","B","C"],["D","E"] ]; You can see the first array (A,B,C) contains 3 values, while the second array contains only 2. The length of any array is retrieved using .length e.g. my2DArray.length First you loop over the entire array (for all values in the array) -> for (i=0;i

[@EeVennSoh]

Is there a p5.js example of this?

[@TheCodingTrain]

yes, check the rainbow-code repo!

[@fallenmoon483]

Awesome!

[@lumstell]

thanks

[@katrix422]

lovely

[@eotikurac]

you need to start saying "daaaamn daniel" when you brake something that worked