This repository has been archived by the owner on Jan 5, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathPI_APPROXIMATION.html
765 lines (709 loc) · 53.2 KB
/
PI_APPROXIMATION.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
<hr>
<p><strong>PI_APPROXIMATION</strong></p>
<hr>
<p><span style="background:#ffff00">The <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Single-page_application" target="_blank" rel="noopener">single web page application</a> featured in this tutorial web page substantiates a Monte Carlo dart-throwing simulation which plots a pixel-sized dot within a square canvas whose side length is 400 pixels once per second for a total of 3600 seconds (such that each dot is plotted at some random <a style="background:#000000;color:#00ff00" href="https://karlinaobject.wordpress.com/point/" target="_blank" rel="noopener">point</a> whose two Cartesian plane coordinate values are each whole numbers). Dots which are plotted within a 200-pixel radius of the center of the canvas will be colored <strong style="background:#000000;color:#ff0000">red</strong>. Dots which are plotted further than 200 pixels away from the center of the canvas will be colored <strong style="background:#000000;color:#0000ff">blue</strong>. The quotient produced by dividing the total number of red dots by the sum of the total number of red dots and the total number of blue dots is the approximate value of <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/Pi" target="_blank" rel="noopener">Pi</a>.</span></p>
<p><em>To view hidden text inside each of the preformatted text boxes below, scroll horizontally.</em></p>
<pre>pi := (circle.circumference / circle.diameter). // true for all circles</pre>
<pre>pi_approximation := (4 * (red_pixel_count / (red_pixel_count + blue_pixel_count))).</pre>
<p>Note that, like the <a style="background:#000000;color:#00ff00" href="https://karlinaobject.wordpress.com/golden_ratio_approximation/" target="_blank" rel="noopener">Golden Ratio</a>, Pi is an <a style="background:#000000;color:#ff9000" href="https://karlinaobject.wordpress.com/numbers/" target="_blank" rel="noopener">irrational number</a>. Unlike each rational number, each irrational number cannot be represented as any integer divided by any nonzero integer.</p>
<p>A <strong>circle</strong> is a finite two-dimensional region such that each one of the points on the boundary of that region is the same distance away from exactly one center point (and that distance is a real number larger than zero).</p>
<p>The <strong>diameter</strong> of a circle is the length of the line segment which intersects the center of that circle and two unique points on the edge of that circle. The length of a circle’s diameter is twice the length of that circle’s radius.</p>
<p>A circle’s <strong>radius</strong> is the length between any point on the edge of that circle and the point which is located at the center of that circle.</p>
<p>A circle’s <strong>circumference</strong> is the length of the curved edge of that circle.</p>
<hr>
<p><strong>SOFTWARE_APPLICATION_COMPONENTS</strong></p>
<hr>
<p>Hyper-Text-Markup-Language_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation.html" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation.html</a></p>
<p>Cascading-Style-Sheet_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css</a></p>
<p>JavaScript_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT/main/pi_approximation.js" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT/main/pi_approximation.js</a></p>
<hr>
<p><strong>Hyper-Text-Markup-Language Code</strong></p>
<hr>
<p>The following Hyper-Text-Markup-Language (<a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/HTML" target="_blank" rel="noopener">HTML</a>) code defines the user interface component of the PI_APPROXIMATION web page application. Copy the HTML code from the source code file which is linked below into a text editor and save that file as <strong>pi_approximation.html</strong>. Use a web browser such as <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Firefox" target="_blank" rel="noopener">Firefox</a> to open that HTML file (and ensure that the JavaScript and Cascading-Style-Sheet files are in the same file directory as the HTML file).</p>
<p><em>(Note that angle brackets which resemble <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/HTML" target="_blank" rel="noopener">HTML</a> tags (i.e. an “is less than” symbol (i.e. ‘<‘) followed by an “is greater than” symbol (i.e. ‘>’)) displayed on this web page have been replaced (at the source code level of this web page) with the Unicode symbols <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/Less-than_sign" target="_blank" rel="noopener">U+003C</a> (which is rendered by the web browser as ‘<‘) and <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/Greater-than_sign" target="_blank" rel="noopener">U+003E</a> (which is rendered by the web browser as ‘>’). That is because the <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/WordPress.com" target="_blank" rel="noopener">WordPress</a> web page editor or web browser interprets a plain-text version of an “is less than” symbol followed by an “is greater than” symbol as being an opening HTML tag (which means that the WordPress web page editor or web browser deletes or fails to display those (plain-text) inequality symbols and the content between those (plain-text) inequality symbols)).</em></p>
<p><em><strong>If copy-pasting the following HTML code from the preformatted text box below into a text editor, remove the <a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/Zero-width_space" target="_blank" rel="noopener">zero-width space</a> Unicode character (<span style="background:#000000;color:#fe9eff">&​#8203;</span>) which is located between the ‘s’ and the ‘r’ in the script tag(s) which each link to a <a style="background:#ff9000;color:#000000" href="https://en.wikipedia.org/wiki/JavaScript" target="_blank" rel="noopener">JavaScript</a> file.</em></strong></p>
<p>Hyper-Text-Markup-Language_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation.html" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation.html</a></p>
<p>image_link: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation_html_code_screenshot.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation_html_code_screenshot.png</a></p>
<hr>
<pre>
<!--
/**
* file: pi_approximation.html
* type: Hyper-Text-Markup-Language
* date: 10_JULY_2023
* author: karbytes
* license: PUBLIC_DOMAIN
*/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PI_APPROXIMATION</title>
<link rel="stylesheet" href="karbytes_aesthetic.css">
<script s​rc="pi_approximation.js"></script>
<style>
#cartesian_plane {
background: #ffffff;
border-width: 0px;
}
</style>
</head>
<body onload="initialize_application()">
<h1>PI_APPROXIMATION</h1>
<p>
This single page web application implements a 3600 second Monte Carlo dart
throwing simulation to approximate the irrational number Pi by dividing the
number of darts which land within 200 pixels of the center of a square canvas
(whose side length is 400 pixels) by the total number of darts which are
plotted on that canvas. One pixel-sized dart is plotted at a random location
onto the square canvas per second of the 3600 second timer interval. Darts which
are plotted within 200 pixels of the center of the canvas are colored
<span style="background:#000000;color:#ff0000">RED</span>.
Darts which are plotted farther than 200 pixels away from the center of the
canvas are colored <span style="background:#000000;color:#0000ff">BLUE</span>.
</p>
<p class="console">pi = (circle.circumference / circle.diameter)</p>
<p class="console">pi_approximation = (4 * (red_pixel_count / (red_pixel_count + blue_pixel_count)))</p>
<p><input type="button" id="start_button" value="START" onclick="start_monte_carlo_simulation()"></p>
<p><input type="button" id="reset_button" value="RESET" onclick="initialize_application()"></p>
<canvas id="cartesian_plane" width="400" height="400"></canvas>
<div id="output">
<p>seconds_remaining: <span id="seconds_remaining_span">???</span></p>
<p>red_pixel_count: <span id="red_pixel_count_span">???</span></p>
<p>blue_pixel_count: <span id="blue_pixel_count_span">???</span></p>
<p>pi_approximation: <span id="pi_approximation_span">???</span></p>
</div>
<div id="timestamped_events_log" class="console"></div>
</body>
</html>
</pre>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="21884" data-permalink="https://karlinaobject.wordpress.com/pi_approximation/pi_approximation_html_code_screenshot-2/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_html_code_screenshot.png" data-orig-size="1324,1591" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="pi_approximation_html_code_screenshot" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_html_code_screenshot.png?w=250" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_html_code_screenshot.png?w=852" width="1324" height="1591" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_html_code_screenshot.png" alt="" class="wp-image-21884" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_html_code_screenshot.png 1324w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_html_code_screenshot.png?w=125&h=150 125w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_html_code_screenshot.png?w=250&h=300 250w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_html_code_screenshot.png?w=768&h=923 768w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_html_code_screenshot.png?w=852&h=1024 852w" sizes="(max-width: 1324px) 100vw, 1324px" /></figure>
<hr>
<p><strong>Cascading-Style-Sheet Code</strong></p>
<hr>
<p>The following Cascading-Style-Sheet (<a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/CSS" target="_blank" rel="noopener">CSS</a>) code defines a stylesheet which customizes the appearance of interface components of the PI_APPROXIMATION web page application. Copy the CSS code from the source code file which is linked below into a text editor and save that file as <strong>karbytes_aesthetic.css</strong>.</p>
<p>Cascading-Style-Sheet_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css</a></p>
<hr>
<pre>/**
* file: karbytes_aesthetic.css
* type: Cascading-Style-Sheet
* date: 10_JULY_2023
* author: karbytes
* license: PUBLIC_DOMAIN
*/
/** Make the page background BLACK, the text orange and monospace, and the page content width 800 pixels or less. */
body {
background: #000000;
color: #ff9000;
font-family: monospace;
font-size: 16px;
padding: 10px;
width: 800px;
}
/** Make input elements and select elements have an orange rounded border, a BLACK background, and orange monospace text. */
input, select {
background: #000000;
color: #ff9000;
border-color: #ff9000;
border-width: 1px;
border-style: solid;
border-radius: 5px;
padding: 10px;
appearance: none;
font-family: monospace;
font-size: 16px;
}
/** Invert the text color and background color of INPUT and SELECT elements when the cursor (i.e. mouse) hovers over them. */
input:hover, select:hover {
background: #ff9000;
color: #000000;
}
/** Make table data borders one pixel thick and CYAN. Give table data content 10 pixels in padding on all four sides. */
td {
color: #00ffff;
border-color: #00ffff;
border-width: 1px;
border-style: solid;
padding: 10px;
}
/** Set the text color of elements whose identifier (id) is "output" to CYAN. */
#output {
color: #00ffff;
}
/** Set the text color of elements whose class is "console" to GREEN and make the text background of those elements BLACK. */
.console {
color: #00ff00;
background: #000000;
}
</pre>
<hr>
<p><strong>JavaScript Code</strong></p>
<hr>
<p>The following JavaScript (<a style="background: #ff9000;color: #000000" href="https://en.wikipedia.org/wiki/JavaScript" target="_blank" rel="noopener">JS</a>) code defines the functions which control the behavior of the PI_APPROXIMATION web page application. Copy the JS code from the source code file which is linked below into a text editor and save that file as <strong>pi_approximation.js</strong>.</p>
<p>JavaScript_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT/main/pi_approximation.js" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT/main/pi_approximation.js</a></p>
<hr>
<pre>/**
* file: pi_approximation.js
* type: JavaScript
* date: 29_DECEMBER_2024
* author: karbytes
* license: PUBLIC_DOMAIN
*/
/**
* Generate a random x-value or a random y-value for a planar coordinate pair.
*
* @return {Number} an integer no smaller than -200 and no larger than 200.
*/
function generate_random_coordinate_scalar() {
let random_nonnegative_integer_less_than_201 = Math.floor(Math.random() * 201);
let random_number_sign = (Math.floor(Math.random() * 100) % 2 === 0) ? 1 : -1;
return random_number_sign * random_nonnegative_integer_less_than_201;
}
/**
* Generate a random coordinate pair for plotting points on a Cartesian plane whose origin is represented by
* the coordinate pair { x_coordinate: 0, y_coordinate: 0} and whose side lengths are no less than 400 units.
*
* @return {Object} a planar point representation where the x-coordinate (i.e. horizontal position)
* and the y-coordinate (i.e. vertical position) is each no smaller than -200 and no larger than 200.
*/
function generate_random_planar_point() {
return { x_coordinate : generate_random_coordinate_scalar(), y_coordinate: generate_random_coordinate_scalar() };
}
/**
* Compute the approximate square root of input such that the output has an arbitrary number of significant digits.
* The product, approximate_square_root(input) * approximate_square_root(input), is approximately equal to input.
*
* @param {Number} input is assumed to be a nonnegative integer.
*
* @return {Number} the approximate square root of input.
*/
function approximate_square_root(input) {
let n = 0, a = 0, b = 0, c = 0;
try {
if (arguments.length !== 1) throw "exactly one function argument is required.";
if (typeof arguments[0] !== "number") throw "the function argument must be a Number type value.";
if (input < 0) throw "the function argument must be no smaller than zero.";
n = input;
a = n;
b = 1;
c = 0.000000001; // precision control
while ((a - b) > c) {
a = (a + b) / 2;
b = n / a;
}
return a;
}
catch(exception) {
console.log("An exception to expected functioning occurred in approximate_square_root(input): " + exception);
return 0;
}
}
/**
* Determine whether or not a given input value is a valid planar point object (as defined in the generate_random_planar_point() function).
*
* @param {Object} input is assumed to be an object with the following properties:
* {Number} x_coordinate is assumed to be an integer no smaller than -200 and no larger than 200.
* {Number} y_coordinate is assumed to be an integer no smaller than -200 and no larger than 200.
*
* @return {Boolean} true if input satisfies the conditions defined above; false otherwise.
*/
function is_point(input) {
try {
if (arguments.length !== 1) throw "exactly one function argument is required.";
if (typeof input.x_coordinate !== "number") throw "the x_coordinate property of input must be a Number type value.";
if (typeof input.y_coordinate !== "number") throw "the y_coordinate property of input must be a Number type value.";
if (Math.floor(input.x_coordinate) !== input.x_coordinate) throw "the x_coordinate property of the input object must be a whole number value.";
if (Math.floor(input.y_coordinate) !== input.y_coordinate) throw "the y_coordinate property of the input object must be a whole number value.";
if ((input.x_coordinate < -200) || (input.x_coordinate > 200)) throw "the x_coordinate property of the input object must be no smaller than -200 and no larger than 200.";
if ((input.y_coordinate < -200) || (input.y_coordinate > 200)) throw "the y_coordinate property of the input object must be no smaller than -200 and no larger than 200.";
return true;
}
catch(exception) {
console.log("An exception to expected functioning occurred in is_point(input): " + exception);
return false;
}
}
/**
* Use the Distance Formula to calculate the nonnegative real number distance between planar points A and B.
*
* distance_formula(A, B) = square_root( ((A.x - B.x) ^ 2) + ((A.y - B.y) ^ 2) )
*
* @param {Object} A is assumed to be an object with the following properties:
* {Number} x_coordinate is assumed to be an integer no smaller than -200 and no larger than 200.
* {Number} y_coordinate is assumed to be an integer no smaller than -200 and no larger than 200.
*
* @param {Object} B is assumed to be an object with the following properties:
* {Number} x_coordinate is assumed to be an integer no smaller than -200 and no larger than 200.
* {Number} y_coordinate is assumed to be an integer no smaller than -200 and no larger than 200.
*
* @return {Number} the length of the shortest path between planar points A and B.
*/
function compute_distance_between_two_planar_points(A, B) {
let horizontal_difference = 0, vertical_difference = 0;
try {
if (arguments.length !== 2) throw "exactly two function arguments are required.";
if (!is_point(A)) throw "A must be an object whose properties are as follows: { x_coordinate : integer in range [-200,200], y_coordinate : integer in range [-200,200] }.";
if (!is_point(B)) throw "B must be an object whose properties are as follows: { x_coordinate : integer in range [-200,200], y_coordinate : integer in range [-200,200] }.";
horizontal_difference = A.x_coordinate - B.x_coordinate;
vertical_difference = A.y_coordinate - B.y_coordinate;
return approximate_square_root((horizontal_difference * horizontal_difference) + (vertical_difference * vertical_difference));
}
catch(exception) {
console.log("An exception to expected functioning occurred in compute_distance_between_two_planar_points(A, B): " + exception);
return 0;
}
}
/**
* Add one to the number which is enclosed inside the HTML span element whose id is "red_pixel_count_span" on the corresponding web page.
*
* Assume that the number of red pixels is a nonnnegative integer no larger than 3600.
*/
function increment_red_pixel_count() {
let red_pixel_count_span = undefined, red_pixel_count = 0;
try {
red_pixel_count_span = document.getElementById("red_pixel_count_span");
red_pixel_count = parseInt(red_pixel_count_span.innerHTML);
if ((red_pixel_count < 0) || (red_pixel_count > 3600)) throw "red_pixel_count must be an integer no smaller than 0 and no larger than 3600.";
red_pixel_count += 1;
red_pixel_count_span.innerHTML = red_pixel_count;
}
catch(exception) {
console.log("An exception to expected functioning occurred in increment_red_pixel_count(): " + exception);
}
}
/**
* Add one to the number which is enclosed inside the HTML span element whose id is "blue_pixel_count_span" on the corresponding web page.
*
* Assume that the number of blue pixels is a nonnnegative integer no larger than 3600.
*/
function increment_blue_pixel_count() {
let blue_pixel_count_span = undefined, blue_pixel_count = 0;
try {
blue_pixel_count_span = document.getElementById("blue_pixel_count_span");
blue_pixel_count = parseInt(blue_pixel_count_span.innerHTML);
if ((blue_pixel_count < 0) || (blue_pixel_count > 3600)) throw "blue_pixel_count must be an integer no smaller than 0 and no larger than 3600.";
blue_pixel_count += 1;
blue_pixel_count_span.innerHTML = blue_pixel_count;
}
catch(exception) {
console.log("An exception to expected functioning occurred in increment_blue_pixel_count(): " + exception);
}
}
/**
* Retrieve the number which is enclosed inside the HTML span element whose id is "red_pixel_count_span" on the corresponding web page.
*
* Assume that the number of red pixels is a nonnnegative integer no larger than 3600.
*
* @return {Number} an integer representing the total number of red pixel-sized "darts" which have been plotted on the HTML canvas element on the corresponding web page.
*/
function get_red_pixel_count() {
let red_pixel_count_span = undefined, red_pixel_count = 0;
try {
red_pixel_count_span = document.getElementById("red_pixel_count_span");
red_pixel_count = parseInt(red_pixel_count_span.innerHTML);
if ((red_pixel_count < 0) || (red_pixel_count > 3600)) throw "red_pixel_count must be an integer no smaller than 0 and no larger than 3600.";
return red_pixel_count;
}
catch(exception) {
console.log("An exception to expected functioning occurred in get_red_pixel_count(): " + exception);
return 0;
}
}
/**
* Retrieve the number which is enclosed inside the HTML span element whose id is "blue_pixel_count_span" on the corresponding web page.
*
* Assume that the number of blue pixels is a nonnnegative integer no larger than 3600.
*
* @return {Number} an integer representing the total number of blue pixel-sized "darts" which have been plotted on the HTML canvas element on the corresponding web page.
*/
function get_blue_pixel_count() {
let blue_pixel_count_span = undefined, blue_pixel_count = 0;
try {
blue_pixel_count_span = document.getElementById("blue_pixel_count_span");
blue_pixel_count = parseInt(blue_pixel_count_span.innerHTML);
if ((blue_pixel_count < 0) || (blue_pixel_count > 3600)) throw "blue_pixel_count must be an integer no smaller than 0 and no larger than 3600.";
return blue_pixel_count;
}
catch(exception) {
console.log("An exception to expected functioning occurred in get_blue_pixel_count(): " + exception);
return 0;
}
}
/**
* Set the number which is enclosed inside the HTML span element whose id is "pi_approximation_span" to the result of the following computation:
*
* (4 * (red_pixel_count / (red_pixel_count + blue_pixel_count)))
*
* where red_pixel_count represents the total number of red pixel-sized "darts" which have been plotted on the HTML canvas and
* where blue_pixel_count represents the total number of blue pixel-sized "darts" which have been plotted on the same HTML canvas
* on the corresponding web page.
*
* Assume that this function is called once per second of the 3600 timed simulation.
*/
function update_pi_approximation() {
let pi_approximation_span = undefined, pi_approximation = 0, red_pixel_count = 0, blue_pixel_count = 0;
try {
red_pixel_count = get_red_pixel_count();
blue_pixel_count = get_blue_pixel_count();
pi_approximation_span = document.getElementById("pi_approximation_span");
pi_approximation = (4 * (red_pixel_count / (red_pixel_count + blue_pixel_count)));
pi_approximation_span.innerHTML = pi_approximation;
}
catch(exception) {
console.log("An exception to expected functioning occurred in update_pi_approximation(): " + exception);
}
}
/**
* Retrieve the number which is enclosed inside of the HTML span element whose id is "seconds_remaining_span" on the corresponding web page.
*
* @return {Number} an integer which is assumed to be no smaller than 0 and no larger than 3600.
*/
function get_seconds_remaining() {
let seconds_remaining_span = undefined, seconds_remaining = 0;
try {
seconds_remaining_span = document.getElementById("seconds_remaining_span");
seconds_remaining = parseInt(seconds_remaining_span.innerHTML);
if ((seconds_remaining < 0) || (seconds_remaining > 3600)) throw "seconds_remaining must be an integer no smaller than 0 and no larger than 3600.";
return seconds_remaining;
}
catch(exception) {
console.log("An exception to expected functioning occurred in get_seconds_remaining(): " + exception);
}
}
/**
* Subtract one from the total number of seconds remaining (which is displayed inside the HTML span element whose id is "seconds_remaining_span" on the corresponding web page).
*
* Assume that the number of seconds remaining is always an integer which is no smaller than 0 and no larger than 3600.
*/
function decrement_seconds_remaining() {
let seconds_remaining_span = undefined, seconds_remaining = 0;
try {
seconds_remaining_span = document.getElementById("seconds_remaining_span");
seconds_remaining = parseInt(seconds_remaining_span.innerHTML);
if ((seconds_remaining < 0) || (seconds_remaining > 3600)) throw "seconds_remaining must be an integer no smaller than 0 and no larger than 3600.";
seconds_remaining -= 1;
seconds_remaining_span.innerHTML = seconds_remaining;
}
catch(exception) {
console.log("An exception to expected functioning occurred in decrement_seconds_remaining(): " + exception);
return 0;
}
}
/**
* Translate a coordinate pair from its Cartesian point representation to its HTML canvas coordinate pair.
*
* The Cartesian point coordinates treat the center of the HTML canvas as the origin of the Cartesian plane (i.e. where the x-coordinate is 0 and where the y-coordinate is 0).
*
* The HTML canvas (which is a square area whose side lengths are each 400 pixels) is formatted such that the upper left corner has an x-coordinate of 0 and a y-coordinate of 0.
*
* @param {Object} point is assumed to be an object with the following properties:
* {Number} x_coordinate is assumed to be an integer no smaller than -200 and no larger than 200.
* {Number} y_coordinate is assumed to be an integer no smaller than -200 and no larger than 200.
*
* @return {Object} an object whose properties are as follows:
* {Number} x is assumed to be an integer no smaller than 0 and no larger than 400.
* {Number} y is assumed to be an integer no smaller than 0 and no larger than 400.
*/
function convert_point_to_pixel(point) {
let pixel = { x : 0, y : 0 }; // initialize pixel to represent the top left corner of the HTML5 canvas.
try {
if (!is_point(point)) throw "point must be an object whose properties are as follows: { x_coordinate : integer in range [-200,200], y_coordinate : integer in range [-200,200] }.";
pixel.x = point.x_coordinate + 200;
pixel.y = 200 - point.y_coordinate;
return pixel;
}
catch(exception) {
console.log("An exception to expected functioning occurred in convert_point_to_pixel(point): " + exception);
}
}
/**
* Convert a Cartesian planar point to its corresponding HTML canvas point and plot it on the 400-by-400 pixel canvas element on the corresponding web page.
*
* If that pixel-sized "dart" is plotted within 200 pixels of the center of the square canvas, then color the "dart" red.
*
* If that pixel-sized "dart" is plotted farther than 200 pixels away from the center of the square canvas, then color the "dart" blue.
*
* @param {Object} point is assumed to be an object with the following properties:
* {Number} x_coordinate is assumed to be an integer no smaller than -200 and no larger than 200.
* {Number} y_coordinate is assumed to be an integer no smaller than -200 and no larger than 200.
*/
function plot_point_on_html_canvas(point) {
let canvas = undefined, context = undefined, pixel = {}, distance_from_origin = 0;
try {
if (!is_point(point)) point = { x_coordinate : 0, y_coordinate : 0 };
distance_from_origin = compute_distance_between_two_planar_points(point, { x_coordinate : 0, y_coordinate : 0 });
pixel = convert_point_to_pixel(point);
canvas = document.getElementById("cartesian_plane");
context = canvas.getContext("2d");
if (distance_from_origin > 200) { // outside of radius of circle inscribed inside of 400-pixel square canvas
context.beginPath();
context.rect(pixel.x, pixel.y, 1, 1); // 1 pixel has a width of 1 and a height of 1
context.strokeStyle = "#0000ff"; // HTML color code for blue.
context.stroke();
increment_blue_pixel_count();
}
else if (distance_from_origin <= 200) { // inside of radius of circle inscribed inside of 400-pixel square canvas
context.beginPath();
context.rect(pixel.x, pixel.y, 1, 1); // 1 pixel has a width of 1 and a height of 1
context.strokeStyle = "#ff0000"; // HTML color code for red.
context.stroke();
increment_red_pixel_count();
}
else {
throw "the pixel appears to be neither red nor blue.";
}
update_pi_approximation();
}
catch(exception) {
console.log("An exception to expected functioning occurred in plot_point_on_html_canvas(point): " + exception);
}
}
/**
* Draw a line whose thickness is one pixel and whose color is black from the middle of the left edge of the HTML canvas to the middle of the right edge of that canvas.
*
* Assume that the canvas is 400 pixels in length on all sides.
*/
function draw_horizontal_line_through_middle_of_canvas() {
let canvas = undefined, context = undefined;
try {
canvas = document.getElementById("cartesian_plane");
context = canvas.getContext("2d");
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.beginPath();
context.moveTo(0, 200); // middle point of left square canvas edge
context.lineTo(400, 200); // middle point of right square canvas edge
context.stroke();
}
catch(exception) {
console.log("An exception to expected functioning occurred in draw_horizontal_line_through_middle_of_canvas(): " + exception);
}
}
/**
* Draw a line whose thickness is one pixel and whose color is black from the middle of the top edge of the HTML canvas to the middle of the bottom edge of that canvas.
*
* Assume that the canvas is 400 pixels in length on all sides.
*/
function draw_vertical_line_through_middle_of_canvas() {
let canvas = undefined, context = undefined;
try {
canvas = document.getElementById("cartesian_plane");
context = canvas.getContext("2d");
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.beginPath();
context.moveTo(200, 0); // middle point of top square canvas edge
context.lineTo(200, 400); // middle point of bottom square canvas edge
context.stroke();
}
catch(exception) {
console.log("An exception to expected functioning occurred in draw_vertical_line_through_middle_of_canvas(): " + exception);
}
}
/**
* Remove any shapes which were plotted on the HTML canvas whose id is "cartesian_plane" on the corresponding web page.
*
* Assume that this function is called in response to the RESET button being clicked.
*/
function clear_canvas() {
let canvas = undefined, context = undefined;
try {
canvas = document.getElementById("cartesian_plane");
context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.closePath();
}
catch(exception) {
console.log("An exception to expected functioning occurred in clear_canvas(): " + exception);
}
}
/**
* Make the START button invisible as soon as it is clicked and for the duration of the 3600 timed Monte Carlo dart-throwing simulation.
*
* Assume that this function is called in response to the START button being clicked.
*/
function hide_start_button() {
try {
let start_button = document.getElementById("start_button");
start_button.style.display = "none";
}
catch(exception) {
console.log("An exception to expected functioning occurred in hide_start_button(): " + exception);
}
}
/**
* Make the START button visible as soon as the RESET button is clicked or after the web page is loaded by the web browser.
*
* Assume that this function is called in response to the RESET button being clicked.
*/
function unhide_start_button() {
try {
let start_button = document.getElementById("start_button");
start_button.style.display = "block";
}
catch(exception) {
console.log("An exception to expected functioning occurred in unhide_start_button(): " + exception);
}
}
/**
* Make the RESET button invisible after the RESET button is clicked or after the web page is loaded by the web browser.
*/
function hide_reset_button() {
try {
let reset_button = document.getElementById("reset_button");
reset_button.style.display = "none";
}
catch(exception) {
console.log("An exception to expected functioning occurred in hide_reset_button(): " + exception);
}
}
/**
* Make the RESET button visible as soon as the 3600 timed Monte Carlo dart-throwing simulation finishes.
*/
function unhide_reset_button() {
try {
let reset_button = document.getElementById("reset_button");
reset_button.style.display = "block";
}
catch(exception) {
console.log("An exception to expected functioning occurred in unhide_reset_button(): " + exception);
}
}
/**
* Set the HTML canvas whose id is "cartesian_plane" to its initial state: no colored darts and two perpendicular axis intersecting at the center of the canvas.
*
* Make the RESET button invisible (and therefore unclickable).
*
* Make the START button visible (and therefore clickable).
*
* Set the value enclosed by the span element whose id is "seconds_remaining_span" to 3600.
*
* Set the value enclosed by the span element whose id is "red_pixel_count_span" to 0.
*
* Set the value enclosed by the span element whose id is "blue_pixel_count_span" to 0.
*
* Set the value enclosed by the span element whose id is "pi_approximation" to 0.
*/
function initialize_application() {
const time_point = Date.now(), p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>';
let seconds_remaining_span, red_pixel_count_span, blue_pixel_count_span, pi_approximation_span, timestamp, message, console_div;
try {
message = "The initialize_application() function was called at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).";
console.log(message);
hide_reset_button();
unhide_start_button();
clear_canvas();
draw_horizontal_line_through_middle_of_canvas();
draw_vertical_line_through_middle_of_canvas();
seconds_remaining_span = document.getElementById("seconds_remaining_span");
red_pixel_count_span = document.getElementById("red_pixel_count_span");
blue_pixel_count_span = document.getElementById("blue_pixel_count_span");
pi_approximation_span = document.getElementById("pi_approximation_span");
console_div = document.getElementById("timestamped_events_log");
seconds_remaining_span.innerHTML = 3600;
red_pixel_count_span.innerHTML = 0;
blue_pixel_count_span.innerHTML = 0;
pi_approximation_span.innerHTML = 0;
console_div.innerHTML += p0 + message + p1;
}
catch(exception) {
console.log("An exception to expected functioning occurred in initialize_page(): " + exception);
}
}
/**
* Print a time-stamped message to the web browser console which indicates that the timed simulation has finished.
*
* Assume that this function is called in response to a timer interval session completing some finite number of 3600 iterations
* such that each iteration is temporally spaced by one second.
*
* Assume that plot_random_pixel_on_square_canvas(simulation) is the function which is called 3600 times
* such that each plot_random_pixel_on_square_canvas(simulation) call is temporarlly spaced by one second.
*/
function finish_simulation() {
const time_point = Date.now(), p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>';
const message = "The Monte Carlo simulation ended at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).";
console.log(message);
document.getElementById("timestamped_events_log").innerHTML += p0 + message + p1;
}
/**
* Call plot_random_pixel_on_square_canvas(simulation) once per second until seconds_remaining is 0.
*
* Each time plot_random_pixel_on_square_canvas(simulation) is called, decrement seconds_remaining by 1.
*
* @param {Object} simulation is assumed to be a timer interval handler (as defined in the start_monte_carlo_simulation() function).
*/
function plot_random_pixel_on_square_canvas(simulation) {
let point, seconds_remaining;
point = generate_random_planar_point();
decrement_seconds_remaining();
seconds_remaining = get_seconds_remaining();
plot_point_on_html_canvas(point);
if (seconds_remaining === 0) {
clearInterval(simulation);
unhide_reset_button();
finish_simulation();
}
}
/**
* Begin the 3600 second Monte Carlo dart throwing simulation.
*
* Assume that this function is called in response to the START button being clicked.
*
* Throw one random pixel-sized dart onto the square canvas per second for a total of 3600 seconds.
*
* Use the setInterval function to space plot_random_pixel_on_square_canvas(simulation) function calls apart by one second.
*/
function start_monte_carlo_simulation() {
const time_point = Date.now(), p0 = '', p1 = '';
let simulation; // timer interval handler
const message = "The Monte Carlo simulation started at time: " + time_point + " milliseconds since 01_JANUARY_1970 00:00:00 (Coordinated Universal Time (UTC)).";
console.log(message);
document.getElementById("timestamped_events_log").innerHTML += p0 + message + p1;
initialize_application();
hide_start_button();
simulation = setInterval( function() { plot_random_pixel_on_square_canvas(simulation); }, 1000); // The plot_random_pixel_on_square_canvas(simulation) function is called once every 1000 milliseconds until the timer interval is cleared.
}
</pre>
<hr>
<p><strong>PI_APPROXIMATION Interface (Initial)</strong></p>
<hr>
<p>The screenshot image below depicts what the PI_APPROXIMATION web page interface is supposed to look like when the web page is initially loaded by a web browser or after the RESET button is clicked.</p>
<p>(Note that the RESET button is hidden until the 3600-second Monte Carlo dart-throwing simulation finishes).</p>
<p>image_link: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation_interface_initial.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation_interface_initial.png</a></p>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="21882" data-permalink="https://karlinaobject.wordpress.com/pi_approximation/pi_approximation_interface_initial-3/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_initial.png" data-orig-size="844,1074" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="pi_approximation_interface_initial" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_initial.png?w=236" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_initial.png?w=805" width="844" height="1074" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_initial.png" alt="" class="wp-image-21882" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_initial.png 844w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_initial.png?w=118&h=150 118w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_initial.png?w=236&h=300 236w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_initial.png?w=768&h=977 768w" sizes="(max-width: 844px) 100vw, 844px" /></figure>
<hr>
<p><strong>PI_APPROXIMATION Interface (Progress 0)</strong></p>
<hr>
<p>The screenshot image below depicts what the PI_APPROXIMATION web page interface could look like 260 seconds after the START button is clicked.</p>
<p>(Notice that the START button is hidden while the 3600-second Monte Carlo dart-throwing simulation is in progress).</p>
<p>image_link: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation_interface_progress_0.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation_interface_progress_0.png</a></p>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="21880" data-permalink="https://karlinaobject.wordpress.com/pi_approximation/pi_approximation_interface_progress_0-3/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_0.png" data-orig-size="822,850" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="pi_approximation_interface_progress_0" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_0.png?w=290" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_0.png?w=822" width="822" height="850" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_0.png" alt="" class="wp-image-21880" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_0.png 822w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_0.png?w=145&h=150 145w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_0.png?w=290&h=300 290w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_0.png?w=768&h=794 768w" sizes="(max-width: 822px) 100vw, 822px" /></figure>
<hr>
<p><strong>PI_APPROXIMATION Interface (Progress 1)</strong></p>
<hr>
<p>The screenshot image below depicts what the PI_APPROXIMATION web page interface could look like 895 seconds after the START button is clicked.</p>
<p>image_link: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation_interface_progress_1.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation_interface_progress_1.png</a></p>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="21879" data-permalink="https://karlinaobject.wordpress.com/pi_approximation/pi_approximation_interface_progress_1-3/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_1.png" data-orig-size="819,860" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="pi_approximation_interface_progress_1" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_1.png?w=286" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_1.png?w=819" loading="lazy" width="819" height="860" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_1.png" alt="" class="wp-image-21879" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_1.png 819w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_1.png?w=143&h=150 143w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_1.png?w=286&h=300 286w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_1.png?w=768&h=806 768w" sizes="(max-width: 819px) 100vw, 819px" /></figure>
<hr>
<p><strong>PI_APPROXIMATION Interface (Progress 2)</strong></p>
<hr>
<p>The screenshot image below depicts what the PI_APPROXIMATION web page interface could look like 2435 seconds after the START button is clicked.</p>
<p>image_link: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation_interface_progress_2.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation_interface_progress_2.png</a></p>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="21876" data-permalink="https://karlinaobject.wordpress.com/pi_approximation/pi_approximation_interface_progress_2-3/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_2.png" data-orig-size="802,850" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="pi_approximation_interface_progress_2" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_2.png?w=283" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_2.png?w=802" loading="lazy" width="802" height="850" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_2.png" alt="" class="wp-image-21876" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_2.png 802w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_2.png?w=142&h=150 142w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_2.png?w=283&h=300 283w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_progress_2.png?w=768&h=814 768w" sizes="(max-width: 802px) 100vw, 802px" /></figure>
<hr>
<p><strong>PI_APPROXIMATION Interface (Final)</strong></p>
<hr>
<p>The screenshot image below depicts what the PI_APPROXIMATION web page interface could look like 3600 seconds after the START button is clicked.</p>
<p>(Notice that the RESET button appears after the 3600-second Monte Carlo dart-throwing simulation finishes).</p>
<p>image_link: <a style="background: #000000;color: #ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation_interface_final.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/pi_approximation_interface_final.png</a></p>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="21875" data-permalink="https://karlinaobject.wordpress.com/pi_approximation/pi_approximation_interface_final-3/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_final.png" data-orig-size="798,970" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="pi_approximation_interface_final" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_final.png?w=247" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_final.png?w=798" loading="lazy" width="798" height="970" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_final.png" alt="" class="wp-image-21875" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_final.png 798w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_final.png?w=123&h=150 123w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_final.png?w=247&h=300 247w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/pi_approximation_interface_final.png?w=768&h=934 768w" sizes="(max-width: 798px) 100vw, 798px" /></figure>
<hr>
<p>This web page was last updated on 29_DECEMBER_2024. The content displayed on this web page is licensed as <a style="background: #000000;color: #ff9000" href="https://karlinaobject.wordpress.com/public_domain/" target="_blank" rel="noopener">PUBLIC_DOMAIN</a> intellectual property.</p>
<hr>