Crypto Random Demo

Crypto Random function for https://lizaonair.com/giveaway/

by Vladimir Sobolev

HTML

<canvas id="x"></canvas>
<ins id="n"></ins>

SCSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  background: #111;
  height: 100%;
  overflow: hidden;
}

canvas {
  background: #222;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

ins {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  font-size: 64px;
  opacity: 0.5;
  color: #fff;
  transform: translate(-50%, -50%);
  text-decoration: none;
  font-family: monospace;
}

JavaScript

function pick_random_property(obj) {
	var keys = Object.keys(obj),
		random_index = keys.length * crypto_random() << 0,
		random = keys[random_index];
	return obj[random];
}

function crypto_random() {
	if (window.crypto && window.crypto.getRandomValues) {
		
		var ints = new Uint32Array(2);
		window.crypto.getRandomValues(ints);
		
		// keep all 32 bits of the the first, top 20 of the second for 52 random bits
		var mantissa = (ints[0] * Math.pow(2, 20)) + (ints[1] >>> 12);
		
		// shift all 52 bits to the right of the decimal point
		var result = mantissa * Math.pow(2, -52);
		
		return result;
	} else {
		return Math.random();
	}
}

// VISUALIZATION

var random_object_x = {},
    random_object_y = {},
    canvas = document.getElementById("x"),
    canvas_width,
    canvas_height,
    context = canvas.getContext("2d"),
    counter = document.getElementById("n"),
	reinit = false;

init();
draw_star();

function init() {
	window.requestAnimationFrame(function(){
	
		random_object_x = {};
		random_object_y = {};
		
		canvas_width = window.innerWidth;
		canvas_height = window.innerHeight;

		canvas.width = canvas_width;
		canvas.height = canvas_height;
		
		context.clearRect(0, 0, canvas_width, canvas_height);
		
		context.globalCompositeOperation = 'overlay';
		context.fillStyle = "rgba(255,0,0,.6)";

		for	(i=0;i<canvas_width;i++) random_object_x[i] = i;
		for	(i=0;i<canvas_height;i++) random_object_y[i] = i;
		
		counter.innerHTML = 0;

	});
}

function draw_star(start) {
	var n = 5,
  		r = 4,
  		x = pick_random_property(random_object_x),
		y = pick_random_property(random_object_y),
		inset = 2,
 		rotate = crypto_random() * Math.PI;
      
    //ctx.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16);

    context.save();
    context.beginPath();
    context.translate(x, y);
    context.rotate(rotate);
    context.moveTo(0,0-r);
    for (var i = 0; i < n; i++) {
        context.rotate(Math.PI / n);
        context.lineTo(0, 0 - (r*inset));
       ...