JSFiddle - React, Tailwind, and code Playground

by jmcjc5u

HTML

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

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 / 16, y / 16, t/16) * 0.5 + 0.5;
        var g = simplex.noise3D(x / 8, y / 8, t/16) * 0.5 + 0.5;
        data[(x + y * 256) * 4 + 0] = r * 255;
        data[(x + y * 256) * 4 + 1] = (r + g) * 200;
        data[(x + y * 256) * 4 + 2] = 0;
        data[(x + y * 256) * 4 + 3] = 255;
    }
}
                   t++;
ctx.putImageData(imgdata, 0, 0);
}, 1000/60);