Collection of noise functions written in JavaScript
Simple jsFiddle demo.
npm install tooloud
var tooloud = require ('tooloud');
or
git clone https://github.com/jackunion/tooloud
<script src="path/to/tooloud/dist/tooloud.min.js"></script>
tooloud.Perlin.noise(x, y, z);
tooloud.Simplex.noise(x, y, z);
tooloud.Worley.Euclidean(x, y, z);
tooloud.Worley.Manhattan(x, y, z);
tooloud.Fractal(x, y, z, octaves, noiseCallback);
Each tooloud
object exposes a function that can be used to seed the noise:
tooloud.Perlin.setSeed(seed);
tooloud.Simplex.setSeed(seed);
tooloud.Worley.setSeed(seed);
If seed wasn't set:
tooloud.Perlin
andtooloud.Simplex
will run without any seedtooloud.Worley
will supply the noise function with seed (defaults to 3000)
Calling setSeed()
without an argument will reset the seed.
Important: seeding the noise may increase the execution time.
Each tooloud
object exposes a function that can be used to create another instance of that object. You can pass an optional seed value as an argument:
var anotherPerlin = tooloud.Perlin.create(seed);
var anotherSimplex = tooloud.Simplex.create(seed);
var anotherWorley = tooloud.Worley.create(seed);
var anotherFractal = tooloud.Fractal.create();
Each newly created instance exposes two functions: instance.noise(x, y, z)
and instance.setSeed(seed)
(tooloud.Worley
instances expose three functions: instance.Euclidean(x, y, z)
, instance.Manhattan(x, y, z)
and instance.setSeed(seed)
).
Important: working with multiple instances may increase the execution time.
var tooloud = require('tooloud'); // omit if tooloud was included via the script tag
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight),
data = imageData.data,
canvasWidth = 640,
canvasHeight = 480;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
// seed your noise
// this is optional
tooloud.Perlin.setSeed(Math.floor(Math.random() * 10000));
for (var i = 0; i < canvasWidth; i++) {
for (var j = 0; j < canvasHeight; j++) {
var index = (i + j * canvasWidth) * 4;
/*
var x, y, z;
Normalize:
x = i / canvasWidth;
y = j / canvasHeight;
z = 0;
// fixing one of the coordinates turns 3D noise into 2D noise
// fixing two of the coordinates turns 3D noise into 1D noise
// fixed coordinate will serve as a seed, i.e. you'll get different results for different values
// Scale:
var scale = 10;
x = scale * x;
y = scale * y;
*/
// In one go:
var x = 15 * (i / canvasWidth),
y = 5 * (j / canvasHeight), // You can use different scale values for each coordinate
z = 0;
var n = tooloud.Perlin.noise(x, y, z), // calculate noise value at x, y, z
r = Math.floor(255 * n),
g = Math.floor(255 * n),
b = Math.floor(255 * n);
data[index + 0] = r; // R
data[index + 1] = g; // G
data[index + 2] = b; // B
data[index + 3] = 255; // A
}
}
ctx.putImageData(imageData, 0, 0);
The naive way of using a noise function would be to set your RGB values using context.fillStylle
and then draw a rectangle at the pixel's coordiantes:
// loop
context.fillStyle = 'rgba(' + [r,g,b,255].join(',') + ')';
contex.fillRect(i, j, 1, 1);
Despite the fact that you need less code to get the same result, this approach is incredibly slower than one involving ImageData
.
In case you would like to know more, you can read about pixel manipulation with canvas on Mozilla Developer Network.
Sometimes you find yourself in need of rerunning the same noise function with different input values. In this case, consider scaling your canvas down for a faster performance until the desired output is found.
Instead of returning a certain value, tooloud.Worley
returns an array containing distances to three closest feature points.
To use tooloud.Worley
with canvas you just need to slightly change the way you calculate your RGB values:
var n = tooloud.Worley.Euclidean(x, y, z);
// n is an array containing three numbers
// using indexes from 0 to 2 you can access one of them
data[index + 0] = Math.floor(255 * n[0]); // R
data[index + 1] = Math.floor(255 * n[0]); // G
data[index + 2] = Math.floor(255 * n[0]); // B
data[index + 3] = 255; // A
The idea behind this decision is simple: you can generate different textures by combining those distances (adding, multiplying or using the n-th closest feature point):
See Worley noise examples for code and texture samples.
tooloud.Fractal.noise
accepts five arguments:
- x, y and z coordinates
- number of octaves
- a noise function you want to apply fractal noise to
You can simply pass the desired noise function to your fractal noise like this:
var n = tooloud.Fractal.noise(x, y, z, octaves, tooloud.Perlin.noise);
The better way to use it would be to define a separate function outside the loop and use it as an argument for tooloud.Fractal.noise
later on. Inside that function you would call the desired noise function, process the output the way you want and return the result:
// optionally seed the noise
// tooloud.Perlin.setSeed(1234);
// tooloud.Simplex.setSeed(12);
tooloud.Worley.setSeed(123);
function fractalCallback(x, y, z) {
// you can use different noise functions
// return tooloud.Perlin.noise(x, y, z);
// return (1 + tooloud.Simplex.noise(x, y, z)) / 2;
var n = tooloud.Worley.Euclidean(x, y, z);
return n[1] - n[0];
}
// loop
var n = tooloud.Fractal.noise(x, y, z, octaves, fractalCallback);
data[index + 0] = Math.floor(255 * n); // R
data[index + 1] = Math.floor(255 * n); // G
data[index + 2] = Math.floor(255 * n); // B
data[index + 3] = 255; // A
Important: tooloud.Fractal.noise
adds rescaled versions of the same noise onto itself, which may create some artifacts radiating from the origin. In case you find yourself unsatisfied with the output, you can always use available tooloud
noise functions to create your own version of fractal noise.
- Gradient noise on Wikipedia
- Value noise on Wikipedia
- "Introduction to noise functions" on RedBlobGames
- "Generating Noise for applications" - an article on four different types of noise generation algorithms
- Perlin noise on Wikipedia
- Original Java implementation of Improved Perlin noise
- "Perlin Noise in JavaScript" - a brief introduction to Perlin noise
- "Understanding Perlin Noise" - an in depth explanation of Perlin noise
- "Procedural Textures in HTML5 Canvas" - a blog post on Perlin noise usage (with code and texture samples)
- Simplex noise on Wikipedia
- Original Java implementation of Simplex noise (Appendix B)
- "Simplex noise demystified" by Stefan Gustavson
- A blog post on optimized GPU noise functions and utilities (with a discussion in comments)
- Worley noise on Wikipedia
- An in depth cell noise tutorial
- Steven Worley's article on cell noise: A Cellular Texture Basis Function
- Carl-Johan Rosén's paper on cell noise: Cell Noise and Processing