Texture Generator

The Texture Generator builds procedural textures in the browser on an HTML5 canvas, evaluating noise pixel by pixel from a self-contained NoiseGenerator class seeded by a 256-entry permutation table (shuffled with a linear-congruential step, seed = seed * 16807 mod 2147483647). It offers eight pattern types in two families. The continuous-noise family is Perlin (the classic gradient noise using the 6t^5-15t^4+10t^3 fade curve), Simplex (the improved variant built on the F2/G2 skew constants, with its output scaled by 70), Voronoi (cell-based distance fields computed over a 3x3 neighborhood of feature points, giving organic stone/scale patterns), and Fractal Brownian Motion (FBM, which layers Perlin across multiple octaves). The geometric family adds Dots (a circular mask thresholded at radius 0.3), Lines (parallel sine bands), Grid (square cells with a 0.1 edge width), and Waves (a sine field modulated by a second sine), useful for backgrounds and overlays rather than organic surfaces.

Three sliders shape the result: Scale (1 to 20, step 0.5) sets the frequency/zoom of the pattern; Octaves (1 to 8) and Persistence (0.1 to 1, step 0.05) appear only for FBM and Perlin, since they are the layered-noise controls-each octave doubles frequency and multiplies amplitude by the persistence value (default 0.5), so higher octaves add fine detail while higher persistence keeps coarse structure dominant. Color comes from a multi-stop gradient editor holding 2 to 8 stops; each noise value (raw range -1..1) is remapped to 0..1 and linearly interpolated in RGB between the two surrounding stops, so the same noise field can read as marble, cloud, or fire purely by editing the ramp. Six presets prefill both pattern and gradient at once: Marble (FBM, scale 3, 6 octaves), Clouds (Perlin, scale 4), Fire (FBM, scale 2, 5 octaves, warm ramp), Ocean (Simplex, scale 5), Matrix (Lines, scale 20, green-on-black), and Cells (Voronoi, scale 8).

A Seamless tiling checkbox wraps coordinates around a torus using cosine/sine of the pixel angle so the texture repeats edge-to-edge; note that the full four-corner torus blend is implemented for the Perlin pattern, while the other modes fall back to non-wrapped sampling, so Perlin gives the cleanest seam-free tiles. When seamless is on, a live 2x2 tiled preview renders below the canvas (via background-repeat at 50% size) so you can spot any seam before exporting. Output is always a square PNG: the preview renders at 256, 512, or 1024 px, and download buttons export at 512, 1024, or 2048 (resized from the preview canvas via drawImage when the target differs), named like texture-perlin-1024x1024.png. A Randomize button reseeds the permutation table for a new variation, Regenerate re-renders, and the full configuration (pattern, scale, octaves, persistence, size, seamless) is encoded in the URL through useUrlStates so a texture setup can be shared by link. All generation runs locally on the canvas with no upload step.