Different types of random...

by Alex

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<main>

  <div class="columns">
    <div class="column case-1">

    </div>
    <div class="column case-2">

    </div>
  </div>
  <div class="columns">
    <div class="column case-3">

    </div>
    <div class="column case-4">

    </div>
  </div>
  
</main>

CSS

html,
body {
  margin: 0;
  padding: 0;
  background-color: black;
}

div.pxl {
  width: 5px;
  height: 5px;
  float: left;
  background-color: white;
}

.case-1,
.case-2,
.case-3,
.case-4 {
  outline:10px solid black;
  height: 50vh;
  overflow: hidden;
}

.case-1:before {
  position: absolute;
  top: 0px;
  left: 0px;
  content: 'Math.random';
  z-index: 9;
  font-family: mono;
  font-weight: bold;
  font-size: 11px;
  color: #eee;
  background-color: #222;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.case-2:before {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 9;
  font-size: 11px;



  content: 'PRNG';
  font-family: mono;
  font-weight: bold;
  color: #eee;
  background-color: #222;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.case-3:before {
    position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 9;
  font-size: 11px;
  
  content: 'xoshiro';
  font-family: mono;
  font-weight: bold;
  color: #eee;
  background-color: #222;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.case-4:before {
   position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  font-size: 11px;
  content: 'wrong';
  font-family: mono;
  font-weight: bold;
  color: #eee;
  background-color: #222;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}

JavaScript

prng = (function () {
  var seed = Date.now()
  return function () {
    // Robert Jenkins' 32 bit integer hash function.
    seed = seed & 0xffffffff
    seed = (seed + 0x7ed55d16 + (seed << 12)) & 0xffffffff
    seed = (seed ^ 0xc761c23c ^ (seed >>> 19)) & 0xffffffff
    seed = (seed + 0x165667b1 + (seed << 5)) & 0xffffffff
    seed = ((seed + 0xd3a2646c) ^ (seed << 9)) & 0xffffffff
    seed = (seed + 0xfd7046c5 + (seed << 3)) & 0xffffffff
    seed = (seed ^ 0xb55a4f09 ^ (seed >>> 16)) & 0xffffffff
    return (seed & 0xfffffff) / 0x10000000
  }
})();

xoshiro128p = (function xoshiro128p() {
  // Using the same value for each seed is _screamingly_ wrong
  // but this is 'good enough' for a toy function.
  let a = Date.now(),
    b = Date.now(),
    c = Date.now(),
    d = Date.now()
  return function () {
    let t = b << 9,
      r = a + d
    c = c ^ a
    d = d ^ b
    b = b ^ c
    a = a ^ d
    c = c ^ t
    d = (d << 11) | (d >>> 21)
    return (r >>> 0) / 4294967296
  }
})()

wrong = (function xoshiro128p() {
  // Using the same value for each seed is _screamingly_ wrong
  // but this is 'good enough' for a toy function.
  let a = Date.now(),
    b = Date.now(),
    c = Date.now(),
    d = Date.now()
  return function () {
    let t = b << 9,
      r = a + d
    c = c ^ a
    d = d ^ b
    b = b ^ c
    a = a ^ d
    c = c ^ t
    d = (d << 11) | (d >>> 21)
    let resp = (r >>> 0) / 4294967296
    return Math.round(resp)
  }
})()


for(var i = 0; i<5000; i++){
	// case 1
  var newDiv = document.createElement("div"); 
  newDiv.style.opacity = Math.random();
  newDiv.className = 'pxl';
  document.querySelector('.case-1').appendChild(newDiv);
  
  // case 2
  var newDiv = document.createElement("div"); 
  newDiv.style.opacity =prng();
  newDiv.className = 'pxl';
  document.querySelector('.case-2').appendChild(newDiv);

  // case 3
  var newDiv = document.createElement("div"); 
  newDiv.style.opacity =xoshiro128p();
  newDiv.className = 'pxl';
 ...