-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
45 lines (41 loc) · 1.47 KB
/
index.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
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Collatz Visualization</title>
<link href="default.css" rel="stylesheet" title="Default Style">
<script src="collatz.js" type="module"></script>
</head>
<body>
<h1>Collatz Visualization</h1>
<p>The following two charts visualize Collatz paths. Surprisingly
interesting patterns emerge. The charts are independently
scrollable.</p>
<p>The upper chart plots Collatz paths on a log scale. Each path starts
from the integer shown in the top left corner of the chart, and
continues until 1 is reached; at which point, the next path is
plotted.</p>
<p>As paths are completed, their lengths are plotted on the lower chart.
The resulting image begins as two "forks" at the left end of the chart,
and evolves into widening radial arcs. Intensity (on a gray scale)
shows how far each path wanders from its start point, as a multiple of
the initial value.</p>
<div class="control">
<h2>Path</h2>
<button id='pause'>Start</button>
<p id="title"></p>
<div class="collatz">
<canvas id="collatz">
This page requires <canvas> element support.
</canvas>
</div>
</div>
<br />
<div class="control">
<h2>Path Lengths</h2>
<div class="lengths">
<canvas id="lengths"></canvas>
</div>
</div>
</body>
</html>