-
Notifications
You must be signed in to change notification settings - Fork 0
/
hilbert.html
106 lines (86 loc) · 1.98 KB
/
hilbert.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
<html>
<head><title>Hilbert Curves</title></head>
<script type="text/javascript">
function Ctxt(canvas, x, y, unit) {
this.x = x;
this.y = y;
this.c = canvas;
this.c.moveTo(x, y);
this.u = unit;
this.lineUp = function() {
this.y = this.y - this.u;
this.draw();
}
this.lineRight = function() {
this.x = this.x + this.u;
this.draw();
}
this.lineDown = function() {
this.y = this.y + this.u;
this.draw();
}
this.lineLeft = function() {
this.x = this.x - this.u;
this.draw();
}
this.draw = function() {
this.c.lineTo(this.x, this.y);
this.c.stroke();
}
}
function A(ctxt, i) {
if (i == 0)
return;
D(ctxt, i - 1); ctxt.lineLeft();
A(ctxt, i - 1); ctxt.lineDown();
A(ctxt, i - 1); ctxt.lineRight();
B(ctxt, i - 1);
}
function B(ctxt, i) {
if (i == 0)
return;
C(ctxt, i - 1); ctxt.lineUp();
B(ctxt, i - 1); ctxt.lineRight();
B(ctxt, i - 1); ctxt.lineDown();
A(ctxt, i - 1);
}
function C(ctxt, i) {
if (i == 0)
return;
B(ctxt, i - 1); ctxt.lineRight();
C(ctxt, i - 1); ctxt.lineUp();
C(ctxt, i - 1); ctxt.lineLeft();
D(ctxt, i - 1);
}
function D(ctxt, i) {
if (i == 0)
return;
A(ctxt, i - 1); ctxt.lineDown();
D(ctxt, i - 1); ctxt.lineLeft();
D(ctxt, i - 1); ctxt.lineUp();
C(ctxt, i - 1);
}
function draw() {
var e = document.getElementById("H");
var c = e.getContext("2d");
c.strokeStyle = "darkGrey";
c.strokeRect(0, 0, e.width, e.height);
c.strokeStyle = "black";
var x = 0;
var y = e.height;
var u = e.height;
for (var i = 0; i < 6; i++) {
x = x + u / 2;
y = y - u / 2;
c.beginPath();
var ctxt = new Ctxt(c, x, y, u);
A(ctxt, i);
c.closePath();
u = u / 2;
}
}
</script>
<body onload="draw()">
<canvas id="H" width="1024" height="1024"></canvas>
</body>
</html>