This repository has been archived by the owner on Oct 10, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
92 lines (76 loc) · 2.44 KB
/
script.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
const board = document.getElementById('board');
const boardctx = board.getContext('2d');
const Shapes = [
[0, 1, -60, 0, 1],
[1, 1, 180, 60, 2],
[1, 1, 180, 60, 3],
[0, 0, 0, 90, 4],
[0, 0, 0, 108, 5],
[0, 0, 0, 120, 6]
]
function render(config) {
boardctx.clearRect(0, 0, board.width, board.height);
const shapeLineDef = Shapes[config.lines - 1];
for(var i = 0, column = 0, row = 0; i < config.repetation; i++, column++) {
const shapeCanvas = drawShape(shapeLineDef, config.angle * i, config.size);
if(config.spacing * (column + 2) + config.size > board.width){
row++;
column = 0;
}
boardctx.drawImage(shapeCanvas, config.spacing * column, row * config.heightspacing);
}
}
function drawShape(lineDef, lineAngle, Unit) {
var shapeCanvas = document.createElement('canvas');
shapeCanvas.width = board.width;
shapeCanvas.height = board.height;
var ctx = shapeCanvas.getContext('2d');
const [starterX, starterY, startAngle, angle, lines] = lineDef;
ctx.beginPath();
ctx.translate(Unit, Unit);
ctx.moveTo(starterX * Unit, starterY * Unit);
ctx.translate(starterX * Unit, starterY * Unit);
ctx.rotate(startAngle * Math.PI / 180);
const line = lineCanvas(lineAngle, Unit);
for(var i = 0; i < lines; i++) {
ctx.translate(0, -Unit / 2);
ctx.drawImage(line, 0, 0);
ctx.translate(Unit, Unit / 2);
ctx.rotate((180-angle) * Math.PI / 180);
}
ctx.stroke();
return shapeCanvas;
}
function lineCanvas(angle, Unit) {
var lineCanvas = document.createElement('canvas');
lineCanvas.width = Unit;
lineCanvas.height = Unit;
var ctx = lineCanvas.getContext('2d');
ctx.translate(Unit / 2, Unit / 2);
ctx.rotate(angle * Math.PI / 180);
ctx.translate(-Unit / 2, 0);
ctx.moveTo(0, 0);
ctx.lineTo(Unit, 0);
ctx.stroke();
return lineCanvas;
}
const config = { size: 48, lines: 1, angle: 10, repetation: 100, spacing: 54, heightspacing: 51 };
function updateProperties(event) {
const prop = event.target.name;
const val = parseInt(event.target.value);
config[prop] = val;
document.getElementsByName(event.target.name).forEach((node) => node.value = val);
render(config);
}
function addInputHook(name) {
document.getElementsByName(name).forEach(
(node) => node.addEventListener('input', updateProperties)
);
}
addInputHook('size');
addInputHook('lines');
addInputHook('angle');
addInputHook('repetation');
addInputHook('spacing');
addInputHook('heightspacing');
render(config);