-
Notifications
You must be signed in to change notification settings - Fork 3
/
binary-tree.html
62 lines (62 loc) · 2.29 KB
/
binary-tree.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
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Binary Tree</title>
<meta name="author" content="Ben Williams" />
<script type="text/javascript">
function draw(levels) {
var c = document.getElementById("btree");
var w = c.width;
var h = c.height;
var ctx = c.getContext("2d");
var repeat_delay = 3000;
var teardown_delay = 1000;
var level_delay = 500;
var margins = 10;
// If h_frac is changed, slope will need to be adjusted to
// prevent overlap. I might fix this in the future.
var h_frac = 2;
var slope = ((h - margins * 2) / 2) / (w - margins * 2);
ctx.clearRect(0, 0, w, h);
// This goes in here so that above variables will be in scope
function lines(dist, loc, depth, delay=0) {
function render_lines(dist, loc) {
ctx.beginPath();
ctx.moveTo(loc[0], loc[1]);
ctx.lineTo(loc[0] + dist, loc[1] + slope * -dist);
ctx.moveTo(loc[0], loc[1]);
ctx.lineTo(loc[0] + dist, loc[1] + slope * dist);
ctx.stroke();
}
setTimeout(render_lines, delay, dist, loc);
setTimeout(function (x) {ctx.clearRect(x, 0, w, h)},
level_delay * levels * 2 + teardown_delay - delay,
loc[0]);
depth--;
if (depth) {
lines((dist / h_frac) * (h_frac - 1),
[loc[0] + dist, loc[1] + slope * -dist],
depth,
delay + level_delay);
lines((dist / h_frac) * (h_frac - 1),
[loc[0] + dist, loc[1] + slope * dist],
depth,
delay + level_delay);
}
}
lines((w - margins * 2) / h_frac, [margins, h/2], levels);
setTimeout(draw, repeat_delay + teardown_delay + levels * level_delay * 2, levels);
}
</script>
</head>
<body onload="draw(6)">
<div>
<canvas id="btree" width="400" height="500" style="border:1px solid #000000;"></canvas>
</div>
<h1>Binary Tree by Ben Williams</h1>
</body>
</html>