1
2
3 <html>
4
5 <head>
6
7 <meta charset="utf-8">
8
9 <title>Kubgen v5 - rise of RFNG-2</title>
10 <style>
11 #diagrow {
12 display: flex;
13 justify-content: center;
14 gap: 12px;
15 margin-top: 20px;
16 }
17
18 .diagbox {
19 border: 1px solid #888;
20 padding: 8px;
21 width: 170px;
22 }
23
24 .diagbox pre {
25 margin: 0;
26 font-family: monospace;
27 white-space: pre;
28 }
29 .diagbox h4 {
30 margin-top: 0;
31 margin-bottom: 6px;
32 text-align: center;
33 }
34 </style>
35
36 </head>
37
38 <body>
39
40 <div align=center>
41 <br><br>
42 <h3>kubgen</h3> (pronounced "cube-gen")
43 <h4>generate a unique pattern with a hash function</h4>
44 type something in the box below
45 <br>
46 <br><input type="text" id="iberb" size=30 value="">
47
48 <br><br>
49
50 <canvas class="myCanvas">
51 <p>canvas no worky</p>
52 </canvas>
53
54 <br><br>
55
56
57
58 <div id="diagrow">
59
60
61
62
63
64
65
66
67
68
69
70 <div class="diagbox">
71 <h4>fourhash</h4>
72 <pre id="box2"></pre>
73 </div>
74
75 <div class="diagbox">
76 <h4>hex hash</h4>
77 <pre id="box3"></pre>
78 </div>
79
80 </div>
81
82 <div style="width:565px; margin:auto;">
83 <h4>What is this?</h4>
84 <div align=left>
85 <p>This square of coloured squares is a
86 representation of the hash generated by
87 a hash function using the text typed in
88 the box.</p>
89 <p>A hash function takes some stuff, in
90 this case the text in the box, and mixes
91 it up to produce a fixed string, in this
92 case a 256-character string of the digits from
93 0 to 3.</p>
94 <p>You can see these numbers above in the
95 "fourhash" box above. These numbers are
96 then mapped to four colors to produce the
97 coloured square!</p>
98 <p>So if you are still reading and still
99 wondering why anyone would do this and
100 waste your time, there are a few reasons:
101 </p>
102 <ul>
103 <li>it's beautiful!</li>
104 <li>it's (probably) unique!</li>
105 <li>it demonstrates several neat properties
106 of hash functions</li>
107 </ul>
108 <p>Those properties are:</p>
109 <ul>
110 <li>a small change in the text produces
111 a large change in the output of the
112 hash function!</li>
113 <li>the exact same text produces the
114 exact same hash output</li>
115 <li>the odds of two strings of text
116 producing the same hash might be very small,
117 like one out of the number of grains
118 of sand on all the beaches small!</li>
119 <li> and if I give you the hash and
120 the function that made it, it's
121 impossible(ish) for you to figure out
122 what the original text is!</li>
123 </ul>
124 <p>Pretty cool, huh?!</p>
125 <p>So, if you have further questions, you'd
126 probably make a pretty good cryptographer.
127 Hash functions are important for keeping
128 communications secure, but, they have a
129 beauty and elegance, I think. It's fun to
130 look for patterns in what looks random,
131 but isn't (or is it?) I like to type letters
132 and watch the colours change.</p>
133 <p>Originally I made this with a beefy common
134 hash function SHA-1, but that seemed like overkill
135 and I wanted to make my own hash function so
136 this uses RFNG-2, or "Robbie's Fragile Number
137 Garden, version 2". If you read the code, you
138 can get an idea how it works. It is fragile, so
139 don't use it to verify encrypted messages to
140 grandma. I'm working on writing up the
141 algorithm it uses, and it's way better than
142 RFNG-1!</p>
143
144
145 </div>
146 </div>
147
148
149 </div>
150
151
152 <script>
153
154
155
156
157 function gridify(str, width) {
158 let out = "";
159
160 for (let i = 0; i < str.length; i += width) {
161 out += str.slice(i, i + width) + "\n";
162 }
163
164 return out;
165 }
166
167 function string_letter(strng,indx) {
168 if (strng.length == 0) {
169 return 0;
170 }
171 else {
172 return strng.charCodeAt(indx%(strng.length));
173 }
174 }
175
176 const hsh="7ef0742612e4db668ea2a7b5779f69cf13762b48d36812fd72eda69207460a71bd2e2c901b8f46991249bd566e98b9e2b31e897029c54c20f57a31e8e23f452f";
177
178
179
180 const hlen = hsh.length;
181 let fourhash = "";
182 for (let ostep = 0; ostep < hlen; ostep++) {
183 const n = parseInt(hsh[ostep], 16);
184 const first = (n >> 2) & 3;
185 const second = n & 3;
186 fourhash += `${first}${second}`;
187 }
188
189 const fourhlen = fourhash.length;
190
191
192
193
194
195
196 updatey();
197
198 document.getElementById("iberb").oninput = function() {updatey()};
199
200 function updatey() {
201
202 var canvas = document.querySelector('.myCanvas');
203 var width = canvas.width = 565;
204 var height = canvas.height = 565;
205
206
207 var ctx = canvas.getContext('2d');
208
209 const cclr = ["#ff9966", "#ffcc99", "#99cc66", "#99cc99",
210 "#cc66ff", "#cc99ff", "#0099ff", "#6699ff"];
211
212 ctx.fillStyle = 'rgb(255, 255, 255)';
213 ctx.fillRect(0, 0, width, height);
214
215 var berb;
216 berb = document.getElementById("iberb").value;
217
218 var step;
219 var kstep;
220 var xd = 5;
221 var yd = 5 ;
222
223
224 var blen = berb.length;
225 var mixy = 0;
226 var churn = 0;
227
228
229 for (kstep = 0; kstep < blen; kstep++) {
230 mixy += berb.charCodeAt(kstep);
231
232
233 }
234 mixy = (mixy * 3 + 119 + berb.length) % 256;
235
236
237
238
239
240 let churnlist = "";
241
242 for (step = 0; step < fourhlen; step++) {
243
244 churn = (mixy + parseInt(fourhash[(step+mixy)%256]) + (string_letter(berb,step)))%4;
245 ctx.fillStyle = cclr[churn];
246 ctx.fillRect(xd + 35 * (step%16), yd + 35 * (Math.floor(step / 16)), 30, 30);
247 churnlist += churn;
248 }
249
250 document.getElementById("box2").textContent =
251 gridify(churnlist, 16);
252
253 let churnhex = "";
254
255
256
257
258
259
260
261 for (step = 0; step < churnlist.length; step += 2) {
262 const dig1 = Number(churnlist[step]);
263 const dig2 = Number(churnlist[step + 1]);
264
265 churnhex += ((dig1 << 2) | dig2).toString(16);
266 }
267
268
269 document.getElementById("box3").textContent =
270 gridify(churnhex, 8);
271
272 return;
273 }
274
275 </script>
276
277
278
279
280
281 </body>
282
283 </html>