A beautiful topographic texture or contour line creator, with PNG and SVG exports.
The Problem
I’ve always looked at topographic textures with a desire to create my own; the only issue is that it’s actually kind of labor-intensive if you do it in something like Adobe Illustrator. Draw some natural-looking shapes, make it 3D, apply this and do that, and, finally, you’ve got your way to something half-decent.
The contour map creators I’ve found online all need longitude/latitude coordinates of places on Earth, but I want random.
I originally wanted to create images like this as a placeholder background image for my portfolio’s project picker. Of course, the route I picked wasn’t the easiest, but it makes life much easier in the future for me and others.
The Solution
Seeded random-noise-powered topographic map creation through Three with a custom GLSL shader.
The “terrain” is randomly generated with Simplex Noise, a simple n-dimensional noise function with fewer directional artifacts than Perlin noise. This noise is used to generate a 3D object with mountains and valleys, to which the GLSL shader is applied to only show lines around elevation levels through a Fragment Shader.
Color gradients are applied based on height as well. These can be set by the user and through presets.
This site is highly customizable for any kind of random topographic texture. The SVG export makes it usable in any design application, infinitely scalable.
I could not be happier with the result, and I can’t wait to include these EVERYWHERE.
Features
- Seed-based randomness
- Beautiful presets like Black on White, Gradient Black on White, and the invert of each.
- Tiled image exports for massive, super high-quality images.
- Easy-to-understand previews for exports
- Automatically obfuscated public code
- Uses Vite to develop, build and roll-up content
- Builds on GitHub Actions and webhooks Jenkins to push to live site.
- Infinite terrain. Drag or use WASD (+ Shift for speed) to navigate the infinite world looking for the perfect spot.
- Export without PNG and SVG without backgrounds! (SVGs are also true SVGs, with paths for lines.).
Drawbacks
Exporting large images is great, but creating lines that don’t have sharp corners sometimes and weird glitches is tough. Raising the resolution works well, but a browser can only handle so much. The shader needs refining to reach better levels of ‘smoothness’, and I’ll be working towards that. Currently, it’s not bad at all.
Other than that, minimize the sidebar and enjoy.
