1 <!DOCTYPE html>
  2 
  3 <html>
  4 
  5   <head>
  6 
  7     <meta charset="utf-8">
  8 
  9     <title>kubgen.js</title>
 10 
 11   </head>
 12 
 13   <body>
 14 
 15 <div align=center>
 16 
 17 
 18 
 19 <br><br>
 20 type something in the box below
 21 <br>
 22 <br><input type="text" id="iberb"  size=30 value="">
 23 
 24 <br><br>
 25 
 26 
 27 
 28 <canvas class="myCanvas">
 29   <p>canvas no worky</p>
 30 </canvas>
 31 
 32 </div>
 33 
 34     <script>
 35 
 36 updatey();
 37 
 38 document.getElementById("iberb").oninput = function() {updatey()};
 39 
 40 function updatey() {
 41 
 42 var canvas = document.querySelector('.myCanvas');
 43 var width = canvas.width = 565;
 44 var height = canvas.height = 565;
 45 //var width = canvas.width = window.innerWidth;
 46 //var height = canvas.height = window.innerHeight;
 47 
 48 
 49 var ctx = canvas.getContext('2d');
 50 
 51 var cclr = ["#ff9966", "#ffcc99", "#99cc66", "#99cc99",
 52             "#cc66ff", "#cc99ff", "#0099ff", "#6699ff"];
 53     
 54 ctx.fillStyle = 'rgb(255, 255, 255)';
 55 //ctx.fillStyle = "#000000";
 56 ctx.fillRect(0, 0, width, height);
 57 
 58 var berb;
 59 berb = document.getElementById("iberb").value;
 60 if (berb == "") { berb="1"};
 61 var step;
 62 var ostep;
 63 var kstep;
 64 var xd = 5;
 65 var yd = 5 ;
 66 var hsh="7ef0742612e4db668ea2a7b5779f69cf13762b48d36812fd72eda69207460a71bd2e2c901b8f46991249bd566e98b9e2b31e897029c54c20f57a31e8e23f452f";
 67 //var fourhash = parseInt(hsh[0], 16).toString(4);
 68 //var fourhash = hsh[1];
 69 var hlen = hsh.length;
 70 var blen = berb.length;
 71 var fourhash = "";
 72 var mixy = 0;
 73 var churn = 0;
 74 
 75 for (kstep = 0; kstep < blen; kstep++) {
 76     mixy += berb.charCodeAt(kstep);
 77 
 78 
 79     }
 80 mixy = mixy % 119;
 81 
 82 for (ostep = 0; ostep < hlen; ostep++) {
 83 // the following line takes each hex digit converts to base 4 and pads with zeros so it has two digits
 84     fourhash += parseInt(hsh[ostep], 16).toString(4).padStart(2, '0');
 85     }
 86 
 87 var fourhlen = fourhash.length;
 88 console.log(fourhash);
 89 
 90 
 91 
 92 for (step = 0; step < fourhlen; step++) {
 93 
 94     
 95 //    xd = 200 + 35 * step;
 96 //    yd = 50 + 35 * ostep;
 97     
 98     
 99     churn = (mixy + parseInt(fourhash[(step+mixy)%127], 16) + (berb.charCodeAt(step%blen))+1)%4;
100     ctx.fillStyle = cclr[churn];
101     ctx.fillRect(xd + 35 * (step%16), yd + 35 * (Math.floor(step / 16)), 30, 30);
102 
103     }
104 
105 
106 
107 //ctx.strokeStyle = 'black';
108 //ctx.font = '12px arial';
109 //ctx.strokeText(berb,50 ,70);
110 //ctx.strokeText(mixy,50 ,110);
111 
112 return;
113 }
114 
115     </script>
116 
117 
118 
119 
120   </body>
121 
122 </html>