<div id="title">
  <h1>Procedurally Generated People</h1>
  <h2>Generating Genders</h2>
  <h4>Male, Female, Other</h4>
  <span>* Create a random selection of 625 people, either Male,Female,Other. *<br /><br />
    Explained and Explored at:<br>
    <a href="http://www.failedsleep.com/2016/07/PGP-2.html" target=""><b>failedsleep.com/../Pesudo Random Numbers Revisted</b></a>
  </span>
</div>
<div id="output"></div>
#title {
  width: 100%;
  text-align: center;
}

#title H1, H2, H4{
  margin: 0px;
}
#title H1{
  color: #00f;
}

#title SPAN {
  position: fixed;
  left: 0px;
  width: 100%;
  bottom: 5px;
}

#output SPAN {
  float: left;
  width: calc(4% - 2px);
  height: calc(4% - 2px);
  margin: 1px;
}

.male {
  color: #00F;
  background: #00F;
}
.female {
  color: #FF69B4;
  background: #FF69B4;
}
.other {
  color: #0A0;
  background: #0A0;
}

#output {
  background: #eee;
  position: fixed;
  left: 20%;
  right: 20%;
  top: 25%;
  height: 50%;
  overflow-x: hidden;
  overflow-y: auto;
}
/*  Pesudo Random Number Generator  */
function Prng(seed,name) {
  /*  force uppercase name */
  if (typeof(name)==="string") {
    name = name.toUpperCase();
  }
  /*  multiply-with-carry (MWC)  */
  function MWC(seed) {
    /*
     * Modified from:     http://stackoverflow.com/questions/521295/javascript-random-seeds
     * credits:  user3158327, undefined
     */
  var m_w = 987654321 + seed;
  var m_z = 123456789 - seed;
  var mask = 0xffffffff;

    return function(max,min) {
      max = max || 1;
      min = min || 0;

      m_z = (36969 * (m_z & 65535) + (m_z >> 16)) & mask;
      m_w = (18000 * (m_w & 65535) + (m_w >> 16)) & mask;

      var result = ((m_z << 16) + m_w) & mask;
      result /= 4294967296;

      var rnd = result + 0.5;
      return min + rnd * (max - min);
    }
  }
  /*  PRNG from indiegamr.com  */
  function INDIEGAMR(seed) {
    /*   Modified from:     http://indiegamr.com/generate-repeatable-random-numbers-in-js/   */
    // the initial seed
    if (!seed) {
      seed = 6;
    }

    // in order to work 'seed' must NOT be undefined,
    // so in any case, you HAVE to provide a seed
    return function(max,min) {
      max = max || 1;
      min = min || 0;

      seed = (seed * 9301 + 49297) % 233280;
      var rnd = seed / 233280;

      return min + rnd * (max - min);
    };
  }
  /*
  *  Prng - Main Code
  */
  switch (name) {
    case "2":
    case "INDIEGAMR":
      return INDIEGAMR(seed);
      break;
    case "1":
    case "MWC":
    default:
      return MWC(seed);
  }
  
}


/*
 *
 * Example Code
 *
 *
*/
var prng = Prng(1234);
var prng2 = Prng(4321,"INDIEGAMR");
var maxNums = 625;

var id = setInterval(function() {
  var output = document.getElementById('output');
  var person = document.createElement('span');

  var gender = Math.round( prng(2) );

  switch (gender) {
    case 2:
      person.setAttribute("class","other");
      break;
    case 1:
      person.setAttribute("class","female");
      break;
    default:
      person.setAttribute("class","male");
  }
  output.appendChild(person);
//  output.scrollTop = output.scrollHeight;
  maxNums--;
  if (maxNums<=0) {
    clearInterval(id);
  }
},0);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.