JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<script src="https://raw.github.com/jwagner/simplex-noise.js/master/simplex-noise.js"></script>
<canvas id="c" width=256 height=256 style="width:512px;height:512px;"></canvas>

JavaScript

var simplex = new SimplexNoise(),
    canvas = document.getElementById('c'),
    ctx = canvas.getContext('2d'),
    imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height),
    data = imgdata.data,
    t = 0;

window.setInterval(function () {
    for (var x = 0; x < 256; x++) {
        for (var y = 0; y < 256; y++) {
            var r = simplex.noise3D(x / 32, y / 32, t / 32);
            var g = simplex.noise3D(x / 32, y / 32, t / 32);
            var b = simplex.noise3D(x / 64, y / 64, t / 64);
            //var a = simplex.noise3D(x / 2, y / 2, t / 8) * 0.5 + 0.5;
            var blackv = Math.sin(r+g+b)*254;
            data[(x + y * 256) * 4 + 0] = blackv; 
            data[(x + y * 256) * 4 + 1] = blackv; 
            data[(x + y * 256) * 4 + 2] = blackv;
            data[(x + y * 256) * 4 + 3] = 255;
        }
    }
    t++;
    ctx.putImageData(imgdata, 0, 0);
}, 1000/60);
/*// g * 255;
// r * 255;
*/