JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<script src="https://rawgithub.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 / 64, y / 64, t/16) * 0.5 + 0.5;
        var g = simplex.noise3D(x / 128, y / 128, t/16) * 0.5 + 0.5;
        data[(x + y * 256) * 4 + 0] = (r*100);
        data[(x + y * 256) * 4 + 1] = (r*100);
        data[(x + y * 256) * 4 + 2] = (r*200);
        data[(x + y * 256) * 4 + 3] = 200-(r*100);
    }
}
                   t++;
ctx.putImageData(imgdata, 0, 0);
}, 1000/60);