JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<p></p>
<span></span>

<canvas id='myCanvas' style='border: 1px solid black'></canvas>

JavaScript

blur = 5;

rand = [];
for (x = 0; x < 100; x++) {
    rand[x] = [];
    for (y = 0; y < 100; y++) {
        rand[x][y] = Math.round(Math.random() * 10) / 10;
    }
}
// $("p").text(JSON.stringify(rand));
size = rand.length;
fixed = [];
blur_sq = Math.pow(blur * 2, 2);
for (x = blur; x < size - blur; x++) {
    fixed[x] = [];
    for (y = blur; y < size - blur; y++) {
        total = 0;
        for (shiftx = -blur; shiftx <= blur; shiftx++) {
            for (shifty = -blur; shifty <= blur; shifty++) {
                total += rand[x + shiftx][y + shifty];
            }
        }
        fixed[x][y] = total / blur_sq;
    }
}
// $("span").text(JSON.stringify(fixed));


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.width = fixed.length;
canvas.height = fixed.length;
size = fixed.length

for (x = blur; x < size - blur; x++) {
    for (y = blur; y < size - blur; y++) {
        context.beginPath();
        context.rect(x, y, 1, 1);
        context.fillStyle = 'rgba(0,0,0,' + fixed[x][y] + ')';
        context.fill();
    }
}