JSFiddle - React, Tailwind, and code Playground

by SimoneGianni

HTML

<html>
    <body>
        <canvas id="c" style="height: 512px; width: 512px"/>                        
    </body>

</html>

JavaScript

var perm = [];
for (var i = 0; i < 256; i++) perm[i] = i;

perm.sort(function() { return (Math.random() * 2) - 1; });

for (var i = 0; i < perm.length; i++) perm.push(perm[i]);

var dirs = [];
for (var i = 0; i < 256; i++) {
    dirs.push([
        Math.cos(i * 2.0 * Math.pi / 256),
        Math.sin(i * 2.0 * Math.pi / 256)
    ]);
}

function noise(x, y, per) {
    function surflet(gridX, gridY) {
        var distX = abs(x-gridX);
        var distY = abs(y-gridY);
        var polyX = 1 - 6*distX**5 + 15*distX**4 - 10*distX**3;
        var polyY = 1 - 6*distY**5 + 15*distY**4 - 10*distY**3;
        var hashed = perm[perm[int(gridX)%per] + int(gridY)%per];
        var grad = (x-gridX)*dirs[hashed][0] + (y-gridY)*dirs[hashed][1];
        return polyX * polyY * grad;
    }
    var intX = Math.floor(x);
    var intY = Math.floor(y);
    return (surflet(intX+0, intY+0) + surflet(intX+1, intY+0) +
            surflet(intX+0, intY+1) + surflet(intX+1, intY+1));
}
    

function fBm(x, y, per, octs) {
    var val = 0;
    for (var o = 0; o < octs, o++) {
        val += 0.5**o * noise(x*2**o, y*2**o, per*2**o);
    }
    return val
}
        
$(function() {
    var freq = 1/32;
    var octs = 5;
    var size = 256;
    var ctx = $('#c')[0].getContext('2d');
    for (var ax = 0; ax < size; ax++) {
        for (var ay = 0; ay < size; ay++) {
            var v = fBm(x*freq, y*freq, int(size*freq), octs);
            v = Math.floor(v);
            ctx.fillStyle = 'rgb(' + v + ',' + v + ',' + v + ')';
            ctx.fillRect(ax,ay,1,1);
        }
    }
});