Classic noise-based terrain generation rendered to canvas as an additive point cloud. I'm considering a webgl renderer for it as well for a more "conventional" terrain patch look for a drop-in procedural or texture backed terrain system for html5 projects. Let me know if you'd be interested!


Arrows: rotate view

R: regenerate all

E: erode

T: regenerate terrain

F: regenerate colour map

(You might need to click on the terrain before the keys work.)

Uses J Wagner's simplex-noise.js and a liberal sprinkling of fairy dust.

Heavily inspired by the lovely terrain-related work of Loren Schmidt and Titouan Millet.

Also available on

Published Jun 06, 2017
AuthorMax Cahill
TagsProcedural Generation


Log in with your account to leave a comment.

Is there a way to save the file as png as transparent background ?

Anyways, Thanks :-)


If you save it out somewhere that "should" be as simple as clearing the canvas with transparent black before rendering but there's no built-in support I'm afraid!