-
Notifications
You must be signed in to change notification settings - Fork 0
/
tartan.html
188 lines (167 loc) · 4.04 KB
/
tartan.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<html>
<head>
<title>Tartan</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name = "viewport" content = "user-scalable=no, width=320">
<style>
body {
margin: 10;
font: 15px arial, sans-serif;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 12px;
margin-bottom: 0px;
}
#canvas {
border: 1px solid black;
margin-bottom: 20px;
}
#key {
display: block;
overflow:hidden;
}
</style>
<script type="application/javascript">
// Globals
// These are just starters, PLEASE feel free to change
var palettes = [
['#FE938C', '#E6B89C', '#EAD2AC', '#9CAFB7'],
['#FF4E00', '#8EA604', '#F5BB00', '#EC9F05'],
['#011627', '#2EC4B6', '#E71D36', '#FF9F1C'],
['#F0B67F', '#FE5F55', '#D6D1B1', '#C7EFCF'],
['#028090', '#00A896', '#02C39A', '#F0F3BD'],
['#1BE7FF', '#6EEB83', '#E4FF1A', '#E8AA14'],
['#CBE896', '#AAC0AA', '#FCDFA6', '#A18276'],
['#D3F8E2', '#F694C1', '#EDE7B1', '#A9DEF9'],
['#E3B505', '#95190C', '#610345', '#107E7D'],
[],
[],
[],
[],
[],
[],
[],
];
var palette;
var pIndex = 0;
var cells = 4;
var cellw = 320/cells;
/* generateKey()
Create a 64 byte hex string.
A bit magical, just combining Math and String calls. Convert random number
to a hex string, pad with 0s and hack off the front
*/
function generateKey() {
var key = "";
if (typeof window.crypto.getRandomValues == 'function') {
bytes = new Uint32Array(16);
window.crypto.getRandomValues(bytes);
for (n=0; n<bytes.length; n++) {
key += bytes[n].toString().slice(2, 6) + " ";
}
} else {
for (i=0; i<16; i++) {
key += (Math.random().toString(16) + '0000').slice(2, 6) + " ";
}
}
return key;
}
// break up the hex string into array of 16 4 byte strings
// empty array means incorrect length string
function breakupKey(key) {
var result = [];
if (typeof key == "string") {
key = key.replace(/\s/g, '');
if (key.length == 64) {
for (i=0; i<64; i+=4) {
result.push(key.substring(i, i+4));
}
}
}
return result;
}
// Width of this line
function getWidth(chunk) {
var i = parseInt(chunk, 16);
var ratio = i / 0xffff;
var w = Math.floor(ratio*cellw*.9) + (cellw *.1);
return w;
}
// Color and opacity of this line
function setColor(context, chunk) {
// set color
var i = parseInt(chunk, 16);
var color = palette[i % 4];
console.log(i % 4);
context.strokeStyle = color;
// set opacity
var ratio = i / 0xffff;
var opac = (Math.floor(ratio*70)+30)/100;
context.globalAlpha = opac;
}
// Which palette to use for this Tartan
function setPalette(chunk) {
var i = parseInt(chunk, 16);
palette = palettes[i % 9];
pIndex = 0;
}
function drawRandomKey() {
var key = document.getElementById("key");
key.value = generateKey();
drawKey(key.value);
}
function drawGivenKey() {
var key = document.getElementById("key").value;
drawKey(key);
}
function drawKey(key) {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 320, 320);
var keyArray = breakupKey(key);
var keyIndex = 0;
setPalette(keyArray[0]);
for (i=0; i<cells; i++) {
ctx.beginPath();
var w = getWidth(keyArray[keyIndex++]);
var x= i*cellw+(w/2);
ctx.moveTo(x,0);
ctx.lineWidth=w;
ctx.lineTo(x,320);
ctx.closePath();
setColor(ctx, keyArray[keyIndex++]);
ctx.stroke();
}
for (j=0; j<cells; j++) {
ctx.beginPath();
var w = getWidth(keyArray[keyIndex++]);
var y= j*cellw+(w/2);
ctx.moveTo(0,y);
ctx.lineTo(320,y);
ctx.closePath();
ctx.lineWidth=w;
setColor(ctx, keyArray[keyIndex++]);
ctx.stroke();
}
console.log("Final keyIndex" + keyIndex);
}
</script>
</head>
<body onload="drawGivenKey();">
<h1>CryptoTartan</h1>
<h2>Turn 64 byte hex keys into a quasi unique pattern</h2>
<canvas id="canvas" width=320 height=320></canvas>
<h3>Paste something in here</h3>
<textarea id="key" rows="2" cols="35">
43be 04ce 97ec 2159 f7c3 4ff6 adc6 f90d 32b5 d417 73ea e704 cada 629d cfc7 6899
</textarea>
<button id="decode" type="button" onclick="drawGivenKey()">Decode</button>
<button id="random" type="button" onclick="drawRandomKey()">Random</button>
</body>
</html>