JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<canvas id="canvas" width="300" height="300"></canvas>

JavaScript

var numNoiseValues = 256;

var rand = function(min, max){
	var min = min || 0;
	var max = max || 1;
	var range = max - min;
	return Math.random() * range + min;
};

var shuffle = function (arr) {
    var len = arr.length;
    var t, i, r;
    for (i = 0; i < len; i++) {
        do {} while ((r = Math.floor(rand(0, len))) === i);
        t = arr[i];
        arr[i] = arr[r];
        arr[r] = t;
    }
}

var lerp = function (t, a, b) {
    return (b - a) * t + a; // (1 - t) * a + b * t;
}

var NOISE_VALUES = [];

for (var i = 0; i < numNoiseValues; i++) NOISE_VALUES[i] = i;

shuffle(NOISE_VALUES);

NOISE_VALUES = NOISE_VALUES.concat(NOISE_VALUES);

function grad(x, y, z, dx, dy, dz) {
    var h = NOISE_VALUES[NOISE_VALUES[NOISE_VALUES[x] + y] + z] & 15;

    var u = h < 8 || h === 12 || h === 13 ? dx : dy;
    var v = h < 4 || h === 12 || h === 13 ? dy : dz;
    return ((h & 1) ? -u : u) + ((h & 2) ? -v : v);
}

function weight(t) {
    var t3 = t * t * t;
    var t4 = t3 * t;
    return 6 * t4 * t - 15 * t4 + 10 * t3;
}

var getNoise = function (x, y, z) {
    var ix = Math.floor(x),
        iy = Math.floor(y),
        iz = Math.floor(z);
    var dx = x - ix,
        dy = y - iy,
        dz = z - iz;

    ix &= (numNoiseValues - 1);
    iy &= (numNoiseValues - 1);
    iz &= (numNoiseValues - 1);

    var g000 = grad(ix, iy, iz, dx, dy, dz);
    var g100 = grad(ix + 1, iy, iz, dx - 1, dy, dz);
    var g010 = grad(ix, iy + 1, iz, dx, dy - 1, dz);
    var g110 = grad(ix + 1, iy + 1, iz, dx - 1, dy - 1, dz);
    var g001 = grad(ix, iy, iz + 1, dx, dy, dz - 1);
    var g101 = grad(ix + 1, iy, iz + 1, dx - 1, dy, dz - 1);
    var g011 = grad(ix, iy + 1, iz + 1, dx, dy - 1, dz - 1);
    var g111 = grad(ix + 1, iy + 1, iz + 1, dx - 1, dy - 1, dz - 1);

    var wx = weight(dx),
        wy = weight(dy),
        wz = weight(dz);

    var x00 = lerp(wx, g000, g100);
    var x10 = lerp(wx, g010, g110);
    var x01 = lerp(wx, g001, g101);
    var x11 = lerp(wx, g011, g111);
   ...