This repository has been archived by the owner on Jun 1, 2021. It is now read-only.
/
main.js
84 lines (65 loc) · 2.19 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
(function() {
"use strict";
// Based on http://ocanvas.org/demos/2
// TODO: use hidpi-canvas-polyfill
// https://github.com/jondavidjohn/hidpi-canvas-polyfill
var canvasElement = document.getElementById("hexagonif");
canvasElement.width = 800;
canvasElement.height = 1200;
var canvas = oCanvas.create({
canvas: "#hexagonif"
});
var hexagonSideLength = 100;
var linePrototype = canvas.display.line({
cap: "round",
stroke: "5px radial-gradient(center, center, 50% width, rgba(0,0,0,0.1), rgba(0,0,0,0.3))",
});
function Point(x, y) {
this.x = x;
this.y = y;
return this;
}
function draw(start, end) {
var line = linePrototype.clone({
start: {
x: start.x,
y: start.y
},
end: {
x: end.x,
y: end.y
}
});
canvas.addChild(line);
line
.bind("mouseenter", function(event) {
this.stroke = "10px #f0f";
this.zIndex = "front";
this.redraw();
})
.bind("mouseleave", function(event) {
this.stroke = "5px #ff0";
this.redraw();
});
}
function drawHexagonsLines(start, depth, size) {
var angle,
end;
if (start.x > size.x || start.y > size.y) {
return;
}
if (depth % 2) {
end = new Point(start.x + hexagonSideLength, start.y);
angle = (120 / 180) * Math.PI;
draw(start, new Point(start.x + hexagonSideLength * Math.cos(angle), start.y + hexagonSideLength * Math.sin(angle)));
} else {
angle = (60 / 180) * Math.PI;
end = new Point(start.x + hexagonSideLength * Math.cos(angle), start.y + hexagonSideLength * Math.sin(angle));
}
draw(start, end);
drawHexagonsLines(end, depth + 1, size);
}
var size = new Point(canvasElement.width, canvasElement.height);
drawHexagonsLines(new Point(0, 0), 0, size);
drawHexagonsLines(new Point(hexagonSideLength - 45, -hexagonSideLength), 1, size);
}());