SimplexGenerator

Simplex Generator that can generate random numbers in multiple dimensions with zero "jutter" between intervals.

It works very similar to Perlin Noise but has much less complexity (O(N^2)) and easier to work in higher dimensions.

For more please see the Noise Visualization tutorial.

Simple example:

const generator = utils.random.simplexGenerator();
generator.simplex(0.1, 0.2); // (some number between -1 and 1)

More Complex Example:

utils.ijs.htmlScript({
    width: 400,
    height: 400,
    data: { cellSize: 150 },
    utilityFunctions: ({ simplex: utils.random.simplexGenerator }),
    html: '<canvas id="draw-target" />',
    onReady: ({ rootEl, options, utilityFunctions, data }) => {
        const canvas = rootEl.querySelector('canvas#draw-target');
        
        const noise = utilityFunctions.simplex();
        
        canvas.width = parseInt(options.width);
        canvas.height = parseInt(options.height);

        var ctx = canvas.getContext('2d');

        var image = ctx.createImageData(canvas.width, canvas.height);
        var imageData = image.data;
        
        function setCanvasColor(index, { red, green, blue, alpha }) {
            imageData[index + 0] = red;
            imageData[index + 1] = green;
            imageData[index + 2] = blue;
            imageData[index + 3] = alpha;
        }

        for (var x = 0; x < canvas.width; x++) {
          for (var y = 0; y < canvas.height; y++) {
            var value = noise.simplex2d(x / data.cellSize, y / data.cellSize) * 256;
              
            var cell = (x + y * canvas.width) * 4;

            //-- cells are for each pixel
            //-- and in sets of 4: [red, green, blue, alpha]
            setCanvasColor(
              cell,
              {
                red: value < 0 ? Math.abs(value) : 0,
                green: value > 0 ? value : 0,
                blue: 0,
                alpha: 255
              }
            );
          }
        }
        
        ctx.fillColor = 'black';
        ctx.fillRect(0, 0, 100, 100);
        ctx.putImageData(image, 0, 0);
    }
});