3D Landscape Generation in p5.js (no moving around)

Channel:
United States Steve's Makerspace
Subscribers:
7,360
Published on ● Video Link: https://www.youtube.com/watch?v=VoFsB0toORk


Duration: 31:45
1,286 views
38

In this video I show how to make a 3D landscape in p5.js Javascript using Perlin noise. This is just a static image - no moving around the generative landscape.

Landscape Code made during video:
https://editor.p5js.org/StevesMakerspace/sketches/kjw_kQYYj

Landscape Code with more bells & whistles - made previously:
https://editor.p5js.org/StevesMakerspace/sketches/kiy4ecWze

3D Rovercam code:
https://github.com/freshfork/p5.RoverCam

Mazerunner code:
https://github.com/jrc03c/queasycam/tree/master/examples/MazeRunner

Join my Discord: https://discord.gg/FSW6zzU

Follow me on Twitter: https://twitter.com/SteveMakerspace

0:00 Intro
1:16 3D Setup & camera angles
2:49 Drawing flat grass
8:10 Adding Perlin noise
10:43 Adding water
12:49 Adding stones
16:28 Adding a tree line / mountain
18:48 Adding tree trunks
22:14 Adding tree leaves - sphere
23:18 Perlin noise for forests
25:26 Minecraft-style tree leaves
27:29 Perlin noise for color changes
29:30 Possible additions

Music:
Funk Down (Sting) by MK2 (theme)



Other Videos By Steve's Makerspace


2022-08-07Rectangle Packing in a Perlin Flow Field - Part 1 of 2 - p5.js generative art
2022-07-31Coding a Quad Art-Maker in p5.js
2022-07-26Adding Perlin Noise to My WIP Art Maker - p5.js generative art
2022-07-17Art Maker WIP - p5.js generative art
2022-07-10Making Simple Patterns in p5.js
2022-06-26Fan Creations in Scrap Mechanic - including an entire city!
2022-06-25MidJourney - Awesome AI Art Generated from Text Prompts
2022-06-22Perlin Noise Art - p5.js
2022-06-09Color Mixing for Generative Artists in p5.js
2022-06-05Generative Art from a 3D Landscape in p5.js
2022-06-043D Landscape Generation in p5.js (no moving around)
2022-05-20Making Art from Random Photos - p5.js generative art
2022-05-16You Need to Protect Your API Keys in p5.js. Here's How.
2022-05-11I Made Art from Random Satellite Images: p5.js generative art / creative coding
2022-05-06What Does It Mean to Be An Artist? - p5.js generative art / creative coding
2022-04-20Rotating Tiles and Animation in Tiles - part 2 of Tile Sampling - p5.js Generative Art
2022-04-19Sample Part of an Image or Drawing, and Put Samples into Tiles - p5.js Generative Art
2022-04-17Finally Making Progress - Ancestors Game #2
2022-04-11I'm a Prehistoric Ape! - Ancestors survival game #1
2022-04-10Mashing Up My p5.js Generative Art with Deep Dream Generator Style Transfer to Create New Art
2022-04-07Revisiting My First World in Scrap Mechanic from 2016! (and not because someone else just did)


Tags:
p5js landscape
javascript landscape
p5js terrain
javascript terrain
p5js generative landscape
generative landscape
perlin noise
landscape tutorial
p5js perlin landscape
landscape generation