Coding Challenge 11: 3D Terrain Generation with Perlin Noise in Processing
Why Stack Overflow recommends it
Stack Overflow users link it when people ask about procedural terrain, noise-driven meshes or grid-based 3D landscapes in Processing, p5.js and other engines.
Recommended by 2 people across 2 different months, 2016 to 2024.
What it is
Daniel Shiffman of The Coding Train builds a 3D procedural terrain in Processing, using beginShape() triangle strips, a 2D array of z-values and Perlin noise. He walks through it live, from a flat grid to a 3D rotated mesh to an infinitely scrolling landscape. It is part of his Coding Challenge series.
What people said
Recommends Michael Curry · 2018-01 · Stack Overflow · on “Procedural terrain generation with blocks”
There's a really good video on infinite terrain here: [this video] It's in processing, but the same concept can be applied to whichever noise library you're using - I'm going to assume that you're using Perlin noise. In which case, you need to look at the values you're passing into this function and change them based on how big your blocks are. For example, imagine a 3x3 grid of blocks. If your middle block is (x, y), and each block is 10x10 units in size, if you move 'north' (for lack of a better term), you'd need to be getting (x, y - 10) from your noise function. The video explains it way better than I can, but hopefully this has helped. Without more knowledge of the function you're using I ca
Recommends programming_ritual · 2021-05 · Stack Overflow · on “How to make a nested for loop for cylinders around a sphere(coronavirus) in p5.js?”
Have you considered using vectors to draw your sphere. Then you can have one for loop and draw a cylinder at the origin of each vector? Here are two video tutorials you might find helpful Spherical Geometry [LINK] and Terrain Generation with Perlin Noise in Processing [this video]
Cites NoSenseSenpai · 2016-12 · Stack Overflow · on “Graphics (2D) Rotation: Rotate x Axis”
@AndrewThompson I do not want to mirror it at the X axis, so no scaling. Here is a visualisation [this video] of what I ment.
Cites Phoebus · 2020-06 · Stack Overflow · on “Extra edges are generated between vertices when I move camera in game or in editor”
I'm trying generate custom procedural landscape in unreal engine 4 To implement this I'm using this class [LINK] and for nice noise generation on Z axis I'm using this plugin [LINK] from this library the only method I use is: USimplexNoiseBPLibrary::SimplexNoise2D How to implement whole process I inspired from this video: [this video] I will try to describe flow of whole process: define vertices count in row and column iterate through row and column and create vertex vectors on (x scale, y scale, FMath::Lerp((-maxFallOff, maxHeight, USimplexNoiseBPLibrary::SimplexNoise2D(x perlinScale,y perlinScale))) generate triangles using this method: [LINK] generate UVs That is all, at this point I can say e
Cites Daniel Yucua · 2021-11 · Stack Overflow · on “Is there a way to efficiently update a grid in Javascript”
I'm creating a project site that is essentially a music visualizer. [LINK] Tutorial was taken from "The Coding Train" [this video] The problem that I'm running into is that the algorithm to compute the and update the grid in the draw() function is running in n squared time. for (var y = 0; y < rows - 1; y++) { beginShape(TRIANGLE_STRIP); var xoff = 0; for (var x = y; x < cols - y; x++) { terrain[x][y] = map(noise(xoff, yoff), 0, 1, -100, 100); xoff += 0.2; vertex(x * scl, y * scl, terrain[x][y] * size); vertex(x * scl, (y + 1) * scl, terrain[x][y] * size); } yoff += 0.2; endShape(); } The current site takes about 30% of my gpu's capacity to run smoothly. However, that is on a 2080ti with a 10700
Cites Shivam Singh · 2023-08 · Stack Overflow · on “p5.js sketch: I want to use another sketch as an animated background”
I have created a p5.js sketch similar to: [this video] I want to give it an animated "background" which would be another p5.js sketch (the goal is to make a sketch that is like a starry sky"). I have only completed the terrain generation, and I wanted to know if it was even possible to do what I have in mind
Cites SandWood Jones · 2024-07 · Stack Overflow · on “Trouble with reading a noise texture in GLSL”
I'm writing a Perlin noise terrain generator with p5js, following this tutorial [this video] . The app ran poorly so I decided to rewrite it with shaders, something i've never used before. I started by generating a subdivided plane of varying resolution to work with, then created a noise image using p5js' perlin noise function and finally, created, loaded a set uniforms for my shader. const SCALE = 50; const NOISE_OFFSET = 0.05; const NOISE_LO_BOUND = -300; const NOISE_HI_BOUND = 300; const SHIFT_SPEED = -0.01; var TERRAIN_W; var TERRAIN_H; var NUM_COLS; var NUM_ROWS; var plane_model; var terrain_texture; var fly_offset = 0; var default_shader; p5.disableFriendlyErrors = true; // disables FES var