JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<img id = "buffer">

JavaScript

var url = "https://rawcdn.githack.com/zsoltc/worley-noise/dev/dist/worley-noise.js"
var s = document.createElement('script');
s.src = url;
document.head.appendChild(s);

   var canvas = document.createElement('canvas');
   canvas.setAttribute("width", "100px")
   canvas.setAttribute("height", "100px")
   document.body.appendChild(canvas)
    
            var ctx = canvas.getContext('2d');
s.onload = function(){

            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            var pixels = imageData.data;
            var noise = new WorleyNoise({ numPoints: 50 });
            var img = noise.renderImage(imageData.width, { normalize: true });

            for (var y = 0; y < imageData.height; ++y) {
                for (var x = 0; x < imageData.width; ++x) {
                    base = (y * imageData.width + x) * 4;
                    pixels[base] = img[y * imageData.width + x] * 255;
                    pixels[base + 1] = img[y * imageData.width + x] * 255;
                    pixels[base + 2] = img[y * imageData.width + x] * 255;
                    pixels[base + 3] = 255;
                }
            }

            ctx.putImageData(imageData, 0, 0);
            
            var image = document.getElementById("buffer")
            image.src = canvas.toDataURL('image/png')
            
            }