npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tooloud

v2.0.4

Published

Collection of noise functions written in JavaScript

Downloads

136

Readme

tooloud

Collection of noise functions written in JavaScript

Simple jsFiddle demo.

Contents

Installation

npm install tooloud

import tooloud from 'tooloud';

// Optionally destructure
// const { Perlin, Simplex } = tooloud;

or

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, all three noise functions will be supplied with seed (defaults to 3000)

Calling setSeed() without an argument will reset the seed.

Important: seeding the noise can increase the execution time.

Each tooloud noise 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:

const anotherPerlin = tooloud.Perlin.create(seed);
const anotherSimplex = tooloud.Simplex.create(seed);
const anotherWorley = tooloud.Worley.create(seed);

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 can increase the execution time.

Using tooloud with canvas

import tooloud from 'tooloud'; // Omit if tooloud was included via the script tag

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
const canvasWidth = 640;
const canvasHeight = 480;

canvas.width = canvasWidth;
canvas.height = canvasHeight;

// Seed your noise
// This is optional
tooloud.Perlin.setSeed(Math.floor(Math.random() * 10000));

let data = imageData.data;
for (let i = 0; i < canvasWidth; i++) {
    for (let j = 0; j < canvasHeight; j++) {
        const index = (i + j * canvasWidth) * 4;
        
        /*
        let 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:
        const scale = 10;
        x = scale * x;
        y = scale * y;
        */
        
        // In one go:
        const x = 15 * (i / canvasWidth);
        const y = 5 * (j / canvasHeight);         // You can use different scale values for each coordinate
        const z = 0;

        const n = tooloud.Perlin.noise(x, y, z);  // Calculate noise value at x, y, z
        const r = Math.floor(255 * n);
        const g = Math.floor(255 * n);
        const 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

If you need to rerun the same noise function with different input values, 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:

const 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:

const 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);

const 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;

    const n = tooloud.Worley.Euclidean(x, y, z);
    return n[1] - n[0];
}

// ...Loop
const 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

Perlin noise

Simplex noise

Worley noise

Fractal noise