Create high-quality 2D Perlin noise heightmaps for game development and procedural terrain design. Adjust parameters in real-time and export to PNG instantly.
AI Generation Prompt
Perlin Noise 2D Heightmap Generator
A professional-grade, browser-based tool designed for game developers and texture artists to generate procedural 2D heightmaps. The application focuses on performance, precision, and ease of use, allowing users to visualize and export noise maps without any external dependencies.
Core Features
- Real-time Rendering: Instant updates on the canvas as parameters change.
- Advanced Noise Controls:
- Seed: Randomize or set a specific integer seed for reproducible maps.
- Octaves: Control the layers of detail (1-8).
- Frequency: Define the scale of the noise.
- Persistence: Control how much detail is added per octave.
- Lacunarity: Define the frequency multiplier per octave.
- Visual Presets: Toggle between Grayscale (Standard Heightmap), Heatmap (Elevation visualization), and Greyscale Gradient (Normal map simulation).
- High-Resolution Export: Download the generated noise as a clean, lossless PNG file.
- Responsive Canvas: The generator scales to fit the viewport while maintaining aspect ratio control.
UI Layout
- Header: Minimalist title area with an 'Export to PNG' button that triggers a download of the current canvas state.
- Main Tool Area (Left Sidebar): A vertical stack of control groups. Each group contains labeled inputs (numeric fields, sliders for range control).
- Display Area (Center/Right): A central canvas display. It includes a subtle "Checkerboard" background pattern to visualize transparency if necessary. The canvas is centered with a soft drop shadow to separate it from the background.
Color Palette (Light Mode Only)
- Background:
#F9FAFB(Neutral off-white). - Sidebar Surface:
#FFFFFFwith a subtle#E5E7EBborder. - Primary Accents:
#2563EB(Bright blue for active sliders and buttons). - Typography:
#111827(Dark grey/black for high readability). - Secondary Text:
#6B7280(Medium grey for labels).
Interactions & Animations
- Smooth Transitions: All inputs and sliders utilize CSS
transition: all 0.2s easeto ensure responsive feedback during adjustment. - Loading States: A clean, CSS-based spinner overlay appears on the canvas during intense generation steps.
- Micro-interactions: Hover effects on the 'Export' button change the background color slightly and scale up by 1% to signify clickability.
Technical Directives
- Single File: The entire application must be contained in a single
.htmlfile, including CSS in<style>tags and JS in<script>tags. - Sandboxed Environment:
- Absolutely NO usage of
localStorage,sessionStorage, or cookies. - All state management must reside in a single
const state = {}object in memory. - Use
window.requestAnimationFramefor rendering the canvas to ensure performance.
- Absolutely NO usage of
- No Build Step: Use native ESM or standard script tags. No npm, no React, no Vue.
- Iframe Safe: The application will be sandboxed; ensure no cross-origin requests are made. All UI elements (modals, toasts) must be custom HTML/CSS elements.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How does Perlin noise work in heightmap generation?
Perlin noise is a type of gradient noise that creates smooth, organic-looking transitions compared to standard random white noise. In the context of heightmap generation, it calculates spatial coherence, allowing adjacent pixels to have related values that mimic the natural curves of mountains, valleys, and riverbeds. This mathematical approach produces realistic topographical data essential for procedural landscapes. By layering multiple octaves of Perlin noise—where each octave adds finer detail at a higher frequency—you can create complex terrains that look hand-sculpted. Adjusting parameters like persistence and lacunarity allows you to fine-tune the resulting roughness and geological features of your heightmap, making it a powerful tool for procedural content creation.
Can I use these heightmaps in Unity, Unreal Engine, or Godot?
Yes, these generated heightmaps are fully compatible with all major game engines, including Unity, Unreal Engine, and Godot. Once you download your generated heightmap as a high-quality PNG image, you can import it directly into your game engine's terrain system as a heightmap asset. Most modern game engines will automatically convert the grayscale values of the PNG file into vertex heights. To ensure the best results, it is recommended that you generate the heightmap at a power-of-two resolution (such as 1024x1024 or 2048x2048) and use 16-bit depth if your workflow requires high-precision elevation data, though 8-bit PNGs are usually sufficient for standard stylized terrain.
Is this tool secure and does it store my data?
This application operates entirely on the client-side within your browser environment. No images, seeds, or configuration data are ever uploaded to a server or stored in persistent storage like cookies or databases. Your privacy is protected because the entire generation process happens locally on your computer's CPU. Because the tool is stateless and does not utilize external databases or tracking, it complies with strict privacy standards. Every time you refresh the page, the application resets, ensuring that no sensitive data is retained between sessions. This makes it a secure choice for developers working on proprietary game assets.
How do I control the terrain features like mountains and valleys?
You can manipulate the terrain features by adjusting the specific noise parameters available in the sidebar. Increasing the 'Octaves' will add more complex details to the terrain, making it look more jagged or rocky, while lower octave counts will result in smoother, simpler landmasses. The 'Persistence' value determines the amplitude of each successive octave, which significantly impacts the contrast between high peaks and low valleys. Additionally, the 'Frequency' setting dictates the overall scale of the noise features. A lower frequency creates massive, expansive landscapes with wide, sweeping terrain features, whereas a higher frequency creates tight, condensed features that appear more crowded or noisy. By experimenting with these values, you can achieve a wide variety of biomes, from flat plains to high-altitude mountain ranges.
