JSFiddle - React, Tailwind, and code Playground

by dievardump

JavaScript

for(let n = 0; n < 50; n++) {
  const seed = parseInt(Math.random() * 0xffffff);
  const size = 64;
  let mod = ~~(11 + seed % 21);
  while (seed % mod == 0) { mod += 3; }
  const half_size = Math.ceil(size / 2);
  const cell_size = 4;
  const minDraw = parseInt(seed % (mod - 5));
  const draws = [];
  for(let i = 0; i < 5 ; i++) { draws.push(minDraw + i); }  
  const $canvas = document.createElement('canvas');
  $canvas.width = (size-1) * cell_size;
  $canvas.height = (size-1) * cell_size;
  const ctx = $canvas.getContext('2d');
  const ns = [];
  const colors = {};
  const ONE = 100000000000;
  let xSeed; let ySeed;
  for (var y = -half_size + 1; y < half_size; y++) {
    ySeed = y * seed;
    if (seed % 3 == 1) { ySeed = -ySeed; }
    else if (seed  % 3 == 2) { ySeed = Math.abs(ySeed); }
    for (var x = -half_size + 1; x < half_size; x++) {
      xSeed = x * seed;
      if (seed % 2 == 1) {
        xSeed = Math.abs(xSeed);
      }
      // using Math.abs here but it should be "uint(xSeed * ySeed)"
      const n = Math.floor(Math.abs(xSeed * ySeed) / ONE) % mod;
      if (ns.indexOf(n) == -1) {ns.push(n);}
   //   if (draws.indexOf(n) !== -1) { 
        if (!colors[n % 5]) {
          colors[n % 5] = '#' + (~~(Math.random() * 0xffffff)).toString(16).padStart(6, 'f');
        }
        ctx.fillStyle = colors[n % 5];
        ctx.fillRect((x-1+half_size) * cell_size, (y-1+half_size) * cell_size, cell_size, cell_size);
      }
    //}
  }
  $canvas.setAttribute('data-seed', seed);
  $canvas.setAttribute('data-mod', mod);
  $canvas.setAttribute('data-ns', ns.join(','));
  $canvas.setAttribute('data-draws', draws.join(','));
  document.body.appendChild($canvas);
}