random histogram

by mohayonao

HTML

<canvas id="canvas"></canvas>
<pre><code>
    pow(50 / rand()) * (1/50)
</code></pre>

CSS

canvas {
    width: 100%; height: 100 %;
    background: #2c3e50
}

JavaScript

function random() {
    var curve = 0.02;
    return Math.pow(1 / curve, Math.random()) * curve;
}

var bin = new Float32Array(128);

for (var i = 0; i < 10000; i++) {
    var x = random();
    bin[(x * bin.length)|0]++;
}

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

canvas.width = 1024;
canvas.height = 1024;

context.fillStyle = "#f1c40f";

var maxValue = Math.max.apply(null, [].slice.call(bin));

for (var i = 0; i < bin.length; i++) {
    var x = (i / bin.length) * canvas.width;
    var y = canvas.height - (canvas.height * (bin[i] / maxValue));
    
    context.fillRect(x-1, y-1, 20, 20);
}