tooloud

Collection of noise functions written in JavaScript

Simple jsFiddle demo.

tooloud
Noise

Installation

npm install tooloud

var tooloud = require ('tooloud');

git clone https://github.com/jackunion/tooloud

<script src="path/to/tooloud/dist/tooloud.min.js"></script>

Available noise functions

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 and tooloud.Simplex will run without any seed
tooloud.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.

Using tooloud with canvas

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.

Note on using smaller canvas

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.

Note on using tooloud.Worley

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.

Note on using tooloud.Fractal

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.

Examples

Noise

General

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

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

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

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

Fractal noise

"Turbulence in HTML5 Canvas"

alexwaeseperlman / tooloud