-
Notifications
You must be signed in to change notification settings - Fork 3
/
main.js
325 lines (280 loc) · 10.2 KB
/
main.js
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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
// @ts-nocheck
let count = 0;
let data;
let colors = []
let color1, color2, color3, color4, color5
let piSimple
let verticalSpace = 20
let symbolWidth = 80
let symbolHeight = 60
let horizontalSpace = 20
let maximumCanvasSize = 300
let inputNumber = ''
let inputNumberElement
let symbolsPerLine = 4
let cnv
function saveSVGtoFile() {
console.log('saving svg...')
let svgTag = document.getElementById('defaultCanvas0')
let svgdata = svgTag.innerHTML
let blob = [svgdata]
let oMyBlob = new Blob(blob, { type: 'image/svg+xml' })
downloadBlob(oMyBlob, 'test.svg')
}
function downloadBlob(blob, filename) {
// Create an object URL for the blob object
const url = URL.createObjectURL(blob);
// Create a new anchor element
const a = document.createElement('a');
// Set the href and download attributes for the anchor element
// You can optionally set other attributes like `title`, etc
// Especially, if the anchor element will be attached to the DOM
a.href = url;
a.download = filename || 'download';
// Click handler that releases the object URL after the element has been clicked
// This is required for one-off downloads of the blob content
const clickHandler = () => {
setTimeout(() => {
URL.revokeObjectURL(url);
this.removeEventListener('click', clickHandler);
}, 150);
};
// Add the click event listener on the anchor element
// Comment out this line if you don't want a one-off download of the blob content
a.addEventListener('click', clickHandler, false);
// Programmatically trigger a click on the anchor element
// Useful if you want the download to happen automatically
// Without attaching the anchor element to the DOM
// Comment out this line if you don't want an automatic download of the blob content
a.click();
// Return the anchor element
// Useful if you want a reference to the element
// in order to attach it to the DOM or use it in some other way
return a;
}
function preload() {
inputNumberElement = document.getElementById('number')
inputNumber = inputNumberElement.value
inputNumberElement.addEventListener('input', (event) => {
console.log(event.target.value)
inputNumber = event.target.value.toString()
updateCanvas()
})
}
function updateCanvas() {
let scisserionNum = new ScisserionEnsemble(inputNumber, [0, 0])
let numberOfSymbols = scisserionNum.getNumberOfSymbols()
let newCanvasDimensions = determineCanvasDimensions(scisserionNum.numberOfSymbols)
let cWidth = newCanvasDimensions[0]
let cHeight = newCanvasDimensions[1]
// resizeCanvas(symbolWidth * numberOfSymbols + 20, symbolHeight + 40)
let myCanvas = document.getElementById('defaultCanvas0')
document.getElementById('canvasParent').appendChild(myCanvas)
resizeCanvas(cWidth, cHeight)
stroke(255, 255, 255)
background('#333')
scisserionNum.draw()
}
function determineCanvasDimensions(numberOfSymbols) {
let newCanvasWidth
let newCanvasHeight
if (numberOfSymbols <= symbolsPerLine) {
newCanvasWidth = symbolWidth * numberOfSymbols + 2 * horizontalSpace
newCanvasHeight = symbolHeight + verticalSpace * 3
} else if (numberOfSymbols % symbolsPerLine === 0) {
newCanvasWidth = symbolWidth * symbolsPerLine + horizontalSpace * 2
newCanvasHeight = (Math.trunc(numberOfSymbols / symbolsPerLine)) * symbolHeight * 1.5 + verticalSpace * 2
} else {
newCanvasWidth = symbolWidth * symbolsPerLine + horizontalSpace * 2
newCanvasHeight = (Math.trunc(numberOfSymbols / symbolsPerLine) + 1) * symbolHeight * 1.5 + verticalSpace * 2
}
return [newCanvasWidth, newCanvasHeight]
}
function setup() {
cnv = createCanvas(400, 400); // aspect ratio for standard printing on the CNC
noLoop();
strokeWeight(5)
updateCanvas()
stroke(0);
noFill();
}
class ScisserionEnsemble {
constructor(num, position) {
this.symbolWidth = symbolWidth
this.symbolHeight = symbolHeight
this.position = position
this.array = num.split('')
this.scisserionNums = []
this.symbolPosition = [...this.position]
this.symbolNum = this.array.join('')
this.numberOfSymbols = 0
this.index = 0
while (this.array.length > 0) {
let numToSplice = 4
this.numberOfSymbols++
let scisserionNumber = this.array.splice(0, numToSplice)
// console.log('before', scisserionNumber)
this.scisserionNums.push(new ScisserionSymbol(scisserionNumber, [...this.symbolPosition], this.symbolWidth, this.symbolHeight, this.index))
this.index++
}
}
draw() {
for (let i = 0; i < this.scisserionNums.length; i++) {
this.scisserionNums[i].draw()
}
}
getNumberOfSymbols() {
return this.numberOfSymbols
}
}
class ScisserionSymbol {
constructor(num, position, symbolWidth, symbolHeight, index) {
this.verticalExtension = 3
this.index = index
this.position = position
// go to next line if too wide
this.height = symbolWidth
this.width = symbolHeight
while (this.position[0] >= maximumCanvasSize) {
this.position[0] -= maximumCanvasSize
// this.position[1] += this.height + verticalSpace
}
this.quadran = 'ne'
this.array = num
// console.log('symbol :', this.array)
while (this.array.length < 4) {
this.array.unshift('0') // fill with zero in order to keep 42 as 0042
}
this.calculatePositionOfSymbol()
// console.log('new number ', this.array)
}
calculatePositionOfSymbol() {
let lineIndex = Math.trunc(this.index / symbolsPerLine)
let columnIndex = this.index % symbolsPerLine
this.position[0] = this.position[0] + (symbolWidth * columnIndex + horizontalSpace)
this.position[1] = this.position[1] + ((symbolHeight * 1.5) * lineIndex + verticalSpace)
}
draw() {
// console.log('will draw ', this.array, 'at', this.quadran)
for (let i = 0; i < this.array.length; i++) {
this.num = this.array[i]
if (i % 4 === 0) {
this.quadran = 'sw'
} else if (i % 4 === 1) {
this.quadran = 'se'
} else if (i % 4 === 2) {
this.quadran = 'nw'
} else if (i % 4 === 3) {
this.quadran = 'ne'
} else {
throw new Error('unrecognized size of number')
}
this.drawQuadraticDigit()
}
}
drawQuadraticDigit() {
// we want to draw only one time ber symbol the vertical 0 bar
if (this.quadran === 'ne') {
push()
translate(this.position[0] + this.width / 2, this.position[1])
this.drawOrigin()
pop()
}
push()
translate(this.position[0] + this.width / 2, this.position[1] + this.height / 2)
if (this.quadran === 'se' || this.quadran === 'sw')
rotate(PI)
// let horizonInvert = true
let horizonInvert = false
if (this.quadran === 'nw' || this.quadran === 'se')
horizonInvert = true
this.drawDigit(horizonInvert)
pop()
}
drawOrigin() {
let org = [0, 0]
let end = [0, this.height]
line(org[0], org[1], end[0], end[1])
}
drawDigit(horizonInvert) {
switch (this.num) {
case '0':
break
case '1':
this.drawOne(horizonInvert)
break
case '2':
this.drawTwo(horizonInvert)
break
case '3':
this.drawThree(horizonInvert)
break
case '4':
this.drawFour(horizonInvert)
break
case '5':
this.drawOne(horizonInvert)
this.drawFour(horizonInvert)
break
case '6':
this.drawSix(horizonInvert)
break
case '7':
this.drawOne(horizonInvert)
this.drawSix(horizonInvert)
break
case '8':
this.drawTwo(horizonInvert)
this.drawSix(horizonInvert)
break
case '9':
this.drawOne(horizonInvert)
this.drawTwo(horizonInvert)
this.drawSix(horizonInvert)
break
}
}
drawOne(horizonInvert) {
let mOrigin = [0, - this.height / 2]
let mEnd = [this.width / 2, - this.height / 2]
if (horizonInvert === true)
mEnd[0] *= -1
line(mOrigin[0], mOrigin[1], mEnd[0], mEnd[1])
}
drawTwo(horizonInvert) {
let mOrigin = [0, -this.height / 2 + this.height / this.verticalExtension]
let mEnd = [this.width / 2, - this.height / 2 + this.height / this.verticalExtension]
if (horizonInvert === true)
mEnd[0] *= -1
line(mOrigin[0], mOrigin[1], mEnd[0], mEnd[1])
}
drawThree(horizonInvert) {
let mOrigin = [0, -this.height / 2]
let mEnd = [this.width / 2, -this.height / 2 + this.height / this.verticalExtension]
if (horizonInvert === true)
mEnd[0] *= -1
line(mOrigin[0], mOrigin[1], mEnd[0], mEnd[1])
}
drawFour(horizonInvert) {
let mOrigin = [0, -this.height / 2 + this.height / this.verticalExtension]
let mEnd = [this.width / 2, - this.height / 2]
if (horizonInvert === true)
mEnd[0] *= -1
line(mOrigin[0], mOrigin[1], mEnd[0], mEnd[1])
}
drawSix(horizonInvert) {
let mOrigin = [this.width / 2, -this.height / 2]
let mEnd = [this.width / 2, -this.height / 2 + this.height / this.verticalExtension]
if (horizonInvert === true) {
mOrigin[0] *= -1
mEnd[0] *= -1
}
line(mOrigin[0], mOrigin[1], mEnd[0], mEnd[1])
}
}
function numbersonly(field, e) {
let key;
let keychar;
let acceptedNums = "0123456789"
return acceptedNums.indexOf((e.key).toString()) != -1
}