nd-landscape-001

2 min read / October 4, 2022

After reading Building a Vaporwave scene with Three.js by Maxime Heckel I was super inspired to generate a pseudo random landscape based on a single plane in ThreeJS. The mountains and the road in the middle are sculpted out of the plane by using OffscreenCanvas to generate a low resolution grayscale displacement map: A dark color means no change to the plane = small mountains / flat road, where a light color means that the vertices are elevated = high mountains / road. The colourful grid texture is also generated with OffscreenCanvas: It has the same size as the displacement map, so that the lines match the displaced vertices. Just the resolution is much higher. The last part is a bloom effect (which is based on a shader) that lets the landscape glow… sometimes even too much.



The piece has 8 different features and there is a very small chance to receive a starlight.



This was the first time that I used a pseudo random number generator combined with a seed from fxhash to create a random artwork, that looks the same for a specific iteration. It was super much fun to enter this new realm of possibilities, especially because I love random AND parameterised visual experiences.

What is generative art for NERDDISCO? Let’s find out!



Interactive

License

MIT

 since 1985
CC BY 4.0 | Legal