-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (90 loc) · 5.46 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>π POND</title>
</head>
<body>
<h1 style="text-align: center;">Welcome to the <span style="font-size:125%;">π</span> Pond.</h1>
<div id="resultsContainer">
<div id="totalShotsFiredRow" class="resultsRow">
<span>TOTAL SHOTS FIRED:</span>
<span id="totalShotsFiredSpan">0</span>
</div>
<div id="shotsInsidePondRow" class="resultsRow">
<span>SHOTS THAT LANDED INSIDE POND:</span>
<span id="shotsInsidePondSpan">0</span>
</div>
<div id="calculationOfPiRow" class="resultsRow">
<span>APPROXIMATION OF π AFTER <span id="numberOfIterationsSpan">0</span> SHOTS: </span>
<span id="approximationOfPiSpan">0</span>
</div>
</div>
<canvas id="pondCanvas"></canvas>
<div id="explanation">
<h3><i>SO WHAT IS THIS, ANYWAY?</i></h3>
<p>The <b>π Pond</b> calculates π (Pi) by firing cannonballs at random into a pond.</p>
<p>In its own, strange, way, the π Pond is a way of getting <strong>data out of randomness</strong>.</p>
<h4>THE MATH(S)</h4>
<p>Imagine a square and a circle of equal width.</p>
<img class="illo" src="assets/images/illustration-01.svg" />
<p>The area of the circle is, of course, πr<sup>2</sup>, which means the area of the square is (2r)<sup>2</sup>.</p>
<img class="illo" src="assets/images/illustration-02.svg" />
<p>(2r)<sup>2</sup> is the same as (2r)(2r), and can be simplified to 4r<sup>2</sup>.</p>
<img class="illo" src="assets/images/illustration-03.svg" />
<p>The ratio of the two areas is πr<sup>2</sup> divided by 4r<sup>2</sup>.</p>
<img class="illo" src="assets/images/illustration-04.svg" />
<p>The r<sup>2</sup>'s cancel each other out…</p>
<img class="illo" src="assets/images/illustration-05.svg" />
<p>…leaving us with π divided by four.</p>
<img class="illo" src="assets/images/illustration-06.svg" />
<p>If we multiply the ratio by four, we can get π by itself.</p>
<p><strong>Therefore, π is the ratio of the area of a circle and the area of a square,
multiplied by four.
</strong></p>
<p>In the case of the <b>π Pond</b>, π is approximated as the number of cannonballs that land in the pond,
divided by the total number of cannonballs fired, multiplied by four.
</p>
<p>By plotting coordinates onto the field (the square) at random, and checking which coordinates fall within the
pond (the circle),
we can approximate the area of the two shapes. The more random coordinates that are plotted, the closer the
approximation of π.</p>
<p>The <strong>π Pond</strong> plots random coordinates (the cannonballs) onto a grid (the pond). By counting
the number of shots that land in the pond, versus the total number of shots fired, the program can approximate
the ratio of the two areas. When this ratio is multiplied by four, you get an approximation of π.</p>
<p>The <strong>π Pond</strong> is limited by resolution, and by limitations of the random-number generator used.</p>
<p>The program is currently using JavaScript's built-in Math.random() method, which in turn is probably using the <a href="https://en.wikipedia.org/wiki/Xorshift">xorshift128+</a> algorithm
adopted by most web browsers. xorshift128+ produces numbers which <em>appear</em> random enough,
but are far from truly random.</p>
<p>Even then, the <strong>π Pond</strong> will consistently return 3.1 after 1,000 shots.</p>
<h3>INSπRATION</h3>
<p>The <b>π Pond</b> was inspired by a challenge in A.K. Dewdney's <a
href="https://www.amazon.com/Armchair-Universe-Exploration-Computer-Worlds/dp/0716719398"><i>The
Armchair Universe</i></a>, a collection of articles about recreational computer science from
<i>Scientific American</i>.
</p>
<p>The <b>π Pond</b> was programmed using Vanilla JS and the HTML5 Canvas element.</p>
<h3>CREDITS</h3>
<ul>
<li><strong>π Pond created by Nicholas Bernhard</strong></li>
<li><a href="https://freesound.org/people/OtisJames/sounds/215162/">Thud.wav</a> by Otis James, Public
Domain</li>
<li><a href="https://freesound.org/people/Isaac200000/sounds/184650/">Cannon1.wav</a> by Isaac200000, Public
Domain</li>
<li><a href="https://freesound.org/people/SpliceSound/sounds/260131/">Cannonball off dock, splashing,
swimming.wav</a> by SpliceSound, Public Domain</li>
<li><a href="https://upload.wikimedia.org/wikipedia/commons/5/5c/Komargorod_pond_2013_G3.jpg">Background</a>
by <a href="https://commons.wikimedia.org/wiki/User:George_Chernilevsky">George Chernilevsky</a>, Public Domain.</li>
</ul>
</div>
<div id="pleaseRotateDevice">
<div id="pleaseRotateDeviceMessage">
<h1>PLEASE ROTATE DEVICE TO PORTAIT MODE</h1>
</div>
</div>
</body>
<script src="logic.js"></script>
</html>