JSFiddle - React, Tailwind, and code Playground

by Charles Cavalcante

HTML

<canvas width="192" height="192" style="border:2px solid black;" id="parallax1">Nope.</canvas>

JavaScript

function parallaxCipher(size, color, speed, grid, sector, seed){

  var scr = document.getElementById("parallax" + sector);
  var ctx = scr.getContext("2d");
  ctx.fillStyle = "#000";
  ctx.fillRect(0,0,scr.width,scr.height);
  var xGridMax = Math.ceil(scr.width / grid);
  var yGridMax = Math.ceil(scr.height / grid) + 1;

  var seedList = prng(seed,yGridMax * 2);
  
  for(var c = 0; c < yGridMax;c++){
    seedList[c] += seedList[c + yGridMax] * 256;
  }
  seedList.length = yGridMax;
  var rotation = Math.floor(Math.floor(Date.now() / speed) / grid) % yGridMax;
  rotation = yGridMax - rotation - 1;
  if(rotation > 0){
    seedList = seedList.slice(seedList.length-rotation).concat(seedList.slice(0,seedList.length - rotation));
  }
  ctx.fillStyle = color;
  for(var a = 0;a<yGridMax;a++){
    var row = prng(seedList[a],Math.ceil((xGridMax + 1)/8));
    var row2 = [];
    for(var d = 0;d<row.length;d++){
      row[d] = row[d].toString(2);
      row[d] = "0".repeat(8 - row[d].length) + row[d];
      row2 = row2.concat(row[d].split(''));
    }
    row2.length = xGridMax + 1;
    var rotation2 = Math.floor(Math.floor(Date.now() / speed) / grid) % xGridMax;
    if(rotation2 > 0){
      row2 = row2.slice(row2.length-rotation2).concat(row2.slice(0,row2.length - rotation2));
    }
    
    for(var b = -1;b<xGridMax;b++){
      ctx.font = size + "px monospace";
      ctx.fillText(row2[b + 1],(b * grid) - (size * 11 / 30) + ((Date.now() / speed) % grid),(a * grid) + (size / 2) - ((Date.now() / speed) % grid));
      
    }
  }
}
function prng(seed, instances){
  //PRNG takes a 16 bit seed
  var primes =...