This repository has been archived by the owner on Dec 29, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathP28_TRIANGLE_GRAPHING.html
949 lines (910 loc) · 70.6 KB
/
P28_TRIANGLE_GRAPHING.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
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
<hr>
<p><strong>TRIANGLE_GRAPHING</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 allows the user to select four integer input values to use as the coordinates for three unique <a style="background:#000000;color:#00ff00" href="https://karlinaobject.wordpress.com/point/" target="_blank" rel="noopener">points</a> which comprise a non-degenerate <a style="background:#000000;color:#00ff00" href="https://karlinaobject.wordpress.com/triangle/" target="_blank" rel="noopener">triangle</a> which will be drawn inside of an HTML5 canvas element whose dimensions are 750 pixels on each side and which is scaled to depict a Cartesian grid whose origin is the center of the canvas and whose maximum x-axis and y-axis values are 100.</span></p>
<p><span style="background:#00ffff">Note that the software application featured in this tutorial web page is an older version of the software application which is featured on the web page whose Uniform Resource Locator is as follows: <a style="background:#000000;color:#00ff00" href="https://karbytesforlifeblog.wordpress.com/triangle_graphing_two/" target="_blank" rel="noopener">https://karbytesforlifeblog.wordpress.com/triangle_graphing_two/</a></span></p>
<p><em>To view hidden text inside of the preformatted text boxes below, scroll horizontally.</em></p>
<hr>
<p><strong>TRIANGLE_GRAPHING 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/triangle_graphing.html" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/triangle_graphing.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_extension_pack_0/main/triangle_graphing.js" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_0/main/triangle_graphing.js</a></p>
<hr>
<p><strong>TRIANGLE_GRAPHING 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 TRIANGLE_GRAPHING 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>triangle_graphing.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/triangle_graphing.html" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/triangle_graphing.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/triangle_graphing_html_code_screenshot.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/triangle_graphing_html_code_screenshot.png</a></p>
<hr>
<pre>
<!--
/**
* file: triangle_graphing.html
* type: Hyper-Text-Markup-Language
* author: karbytes
* date: 10_JULY_2023
* license: PUBLIC_DOMAIN
*/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TRIANGLE_GRAPHING</title>
<link rel="stylesheet" href="karbytes_aesthetic.css">
<script s​rc="triangle_graphing.js"></script>
<style>
div {
border-color: #ff00ff;
border-width: 2px;
border-style: solid;
padding: 10px;
margin: 10px;
border-radius: 5px;
}
</style>
</head>
<body onload="initialize_application()">
<div>
<h1>TRIANGLE_GRAPHING</h1>
<p>Select integer values for three unique coordinate pairs which will be used to construct a triangle on a Cartesian grid.</p>
</div>
<!-- input field # 1 of 7 -->
<div>
<p>STEP_0: Select a horizontal position (i.e. x-axis value) for point A from the list below.</p>
<p id="a_x_menu_container" class="console">#a_x_menu_container</p>
</div>
<!-- input field # 2 of 7 -->
<div>
<p>STEP_1: Select a vertical position (i.e. y-axis value) for point A from the list below.</p>
<p id="a_y_menu_container" class="console">#a_y_menu_container</p>
</div>
<!-- input field # 3 of 7 -->
<div>
<p>STEP_2: Select a horizontal position (i.e. x-axis value) for point B from the list below.</p>
<p id="b_x_menu_container" class="console">#b_x_menu_container</p>
</div>
<!-- input field # 4 of 7 -->
<div>
<p>STEP_3: Select a vertical position (i.e. y-axis value) for point B from the list below.</p>
<p id="b_y_menu_container" class="console">#b_y_menu_container</p>
</div>
<!-- input field # 5 of 7 -->
<div>
<p>STEP_4: Select a horizontal position (i.e. x-axis value) for point C from the list below.</p>
<p id="c_x_menu_container" class="console">#c_x_menu_container</p>
</div>
<!-- input field # 6 of 7 -->
<div>
<p>STEP_5: Select a vertical position (i.e. y-axis value) for point C from the list below.</p>
<p id="c_y_menu_container" class="console">#c_y_menu_container</p>
</div>
<!-- input field # 7 of 7 -->
<div>
<p>STEP_6: Click the GENERATE button to validate the point values and to construct their respective triangle.</p>
<p id="generate_button_container" class="console">#generate_button_container</p>
</div>
<!-- output field # 1 of 3 -->
<div id="canvas_container">
<p>#canvas_container</p>
</div>
<!-- output field # 2 of 3 -->
<div id="output">
<p>#output</p>
</div>
<!-- output field # 3 of 3 -->
<div id="events_log" class="console" >
<p>#events_log</p>
</div>
</body>
</html>
</pre>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="21979" data-permalink="https://karlinaobject.wordpress.com/triangle_graphing/triangle_graphing_html_code_screenshot-2/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_html_code_screenshot.png" data-orig-size="1777,2828" 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="triangle_graphing_html_code_screenshot" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_html_code_screenshot.png?w=189" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_html_code_screenshot.png?w=643" tabindex="0" role="button" width="1777" height="2828" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_html_code_screenshot.png" alt="" class="wp-image-21979" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_html_code_screenshot.png 1777w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_html_code_screenshot.png?w=94&h=150 94w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_html_code_screenshot.png?w=189&h=300 189w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_html_code_screenshot.png?w=768&h=1222 768w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_html_code_screenshot.png?w=643&h=1024 643w" sizes="(max-width: 1777px) 100vw, 1777px" /></figure>
<hr>
<p><strong>TRIANGLE_GRAPHING 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 TRIANGLE_GRAPHING web page application. Copy the CSS code from the preformatted text box below or 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>TRIANGLE_GRAPHING 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 TRIANGLE_GRAPHING web page application. Copy the JS code from the preformatted text box below or from the source code file which is linked below into a text editor and save that file as <strong>triangle_graphing.js</strong>.</p>
<p>JavaScript_file: <a style="background: #000000;color: #00ff00" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_0/main/triangle_graphing.js" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_0/main/triangle_graphing.js</a></p>
<hr>
<pre>
/**
* file: triangle_graphing.js
* type: JavaScript
* author: karbytes
* date: 21_JULY_2023
* license: PUBLIC_DOMAIN
*/
/**
* Return a String type value which describes the number of milliseconds which have elapsed since the Unix Epoch.
*
* Note that the Unix Epoch is 01_JANUARY_1970 at 0 hours, 0 minutes, 0 seconds, and 0 seconds
* (i.e. 00:00:00) (i.e. midnight) (Coordinated Universal Time (UTC)).
*
* @return {String} text which denotes the number of milliseconds which have elapsed since the Unix Epoch.
*/
function generate_time_stamp() {
const milliseconds_elapsed_since_unix_epoch = Date.now();
return milliseconds_elapsed_since_unix_epoch + " milliseconds since midnight on 01_JANUARY_1970.";
}
/**
* Return a String type value which is used to instantiate a paragraph type web page element such that
* the String type value which is passed into this function as its only input is that paragraph element's
* inner HTML content.
*
* Note that the String type constant variable values are broken up into single-character String type values
* to avoid causing the WordPress web page editor to interpret HTML tags in the web page body with
* source code which is hosted on that web page inside of PRE (preformatted) web page elements.
*
* @param {String} inner_HTML is assumed to be plain text or HTML content.
*
* @return {String} a sequence of text characters which is used to instantiate a paragraph (P) web page element.
*/
function generate_paragraph_html_element(inner_html) {
const opening_paragraph_tag = ('<' + 'p' + '>'), closing_paragraph_tag = ('<' + '/' + 'p' + '>');
try {
if (typeof inner_html.length !== "number") throw 'The expression (typeof inner_html.length !== "number") was evaluated to be true.';
return opening_paragraph_tag + inner_html + closing_paragraph_tag;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of generate_paragraph_html_element(inner_html): " + exception);
}
}
/**
* Return a String type value which is used to instantiate a select type web page element such that
* the String type value which is passed into this function as its only input is that select menu element's
* id property value.
*
* When clicked on, the select menu interface element will expand to display a list of all integers which are
* no smaller than -100 and no larger than 100 in ascending order (with the smallest integer option at the top
* of the list).
*
* @param {String} select_id is assumed to be either
* "a_x_menu" or else
* "a_y_menu" or else
* "b_x_menu" or else
* "b_y_menu" or else
* "c_x_menu" or else
* "c_y_menu".
*
* @return {String} a sequence of text characters which is used to instantiate an expandable list menu (SELECT) web page element.
*/
function generate_coordinate_menu_select_html_element(select_id) {
let select_menu = '', option = '', i = 0;
try {
if (typeof select_id.length !== "number") throw 'The expression (typeof select_id.length !== "number") was evaluated to be true.';
if ((select_id !== "a_x_menu") && (select_id !== "a_y_menu") &&
(select_id !== "b_x_menu") && (select_id !== "b_y_menu") &&
(select_id !== "c_x_menu") && (select_id !== "c_y_menu"))
throw 'select_id must either be "a_x_menu" or else "a_y_menu" or ' +
'else "b_x_menu" or else "b_y_menu" or ' +
'else "c_x_menu" or else "c_y_menu".';
select_menu = ('<' + 'select id="' + select_id + '" style="text-align:center"' + '>');
for (i = -100; i <= 100; i += 1) {
if (i === 0) option = ('<' + 'option value="0" selected' + '>');
else option = ('<' + 'option value="' + i + '"' + '>');
option += (i + ('<' + '/' + 'option' + '>'));
select_menu += option;
}
select_menu += ('<' + '/' + 'select' + '>');
return select_menu;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of generate_coordinate_menu_select_html_element(select_id): " + exception);
}
}
/**
* Return the String type value of the selected menu option of a SELECT menu element.
*
* Assume that select_menu_identifier is a String type value and the id of an existing select HTML element.
*
* @param {String} select_menu_identififier is assumed to be the id of an existing SELECT menu web page element.
*
* @return {String} value of an OPTION of the SELECT whose id is select_menu_identifier.
*/
function get_selected_menu_option_value(select_menu_identifier) {
try {
let menu_object = {}, options_array = [], selected_option_index = 0, selected_option_object = {}, selected_option_value;
if (arguments.length !== 1) throw "Error: exactly one function input is required.";
if (typeof arguments[0] !== "string") throw "Error: select_menu_identifier is required to be a String type data value.";
menu_object = document.getElementById(select_menu_identifier);
options_array = menu_object.options;
selected_option_index = menu_object.selectedIndex;
selected_option_object = options_array[selected_option_index];
selected_option_value = selected_option_object.value
return selected_option_value;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of get_selected_menu_option(select_menu_identifier): " + exception);
}
}
/**
* Draw a line segment whose thickness is one pixel and whose color is black from the middle point of the left edge
* of the HTML canvas whose id is "cartesian_plane" to the middle of the right edge of that canvas.
*
* Assume that the length of each one of the four sides of that canvas is 750 pixels.
*/
function draw_horizontal_line_through_middle_of_canvas() {
const CANVAS_SIDE_LENGTH = 750;
let canvas = undefined, context = undefined, canvas_midpoint = 0;
try {
canvas = document.getElementById("cartesian_plane");
if (canvas.width !== canvas.height) throw "The expression (canvas.width !== canvas.height) was evaluated to be true.";
if (canvas.width !== CANVAS_SIDE_LENGTH) throw "The expression (canvas.width !== CANVAS_SIDE_LENGTH) was evaluated to be true.";
canvas_midpoint = (canvas.width / 2);
canvas_midpoint = parseInt(canvas_midpoint);
context = canvas.getContext("2d");
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.beginPath();
context.moveTo(0, canvas_midpoint); // the middle point of the left edge of the square canvas
context.lineTo((canvas_midpoint * 2), canvas_midpoint); // the middle point of the right edge of the square canvas
context.stroke();
}
catch(exception) {
console.log("An exception to expected functioning occurred in draw_horizontal_line_through_middle_of_canvas(): " + exception);
}
}
/**
* Draw a line segment whose thickness is one pixel and whose color is black from the middle point of the top edge
* of the HTML canvas whose id is "cartesian_plane" to the middle of the bottom edge of that canvas.
*
* Assume that the length of each one of the four sides of that canvas is 750 pixels.
*/
function draw_vertical_line_through_middle_of_canvas() {
const CANVAS_SIDE_LENGTH = 750;
let canvas = undefined, context = undefined, canvas_midpoint = 0;
try {
canvas = document.getElementById("cartesian_plane");
if (canvas.width !== canvas.height) throw "The expression (canvas.width !== canvas.height) was evaluated to be true.";
if (canvas.width !== CANVAS_SIDE_LENGTH) throw "The expression (canvas.width !== CANVAS_SIDE_LENGTH) was evaluated to be true.";
canvas_midpoint = (canvas.width / 2);
canvas_midpoint = parseInt(canvas_midpoint);
context = canvas.getContext("2d");
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.beginPath();
context.moveTo(canvas_midpoint, 0); // the middle point of the top edge of the square canvas
context.lineTo(canvas_midpoint, (canvas_midpoint * 2)); // the middle point of the bottom edge of the square canvas
context.stroke();
}
catch(exception) {
console.log("An exception to expected functioning occurred in draw_vertical_line_through_middle_of_canvas(): " + exception);
}
}
/**
* Respond to the event of the RESET button being clicked or the web page being loaded by a web browser.
*/
function initialize_application() {
let cartesian_plane_canvas = "";
let time_stamped_message = "", initial_output_message = "";
let canvas_container_div = undefined, output_div = undefined, events_log_div = undefined, generate_button_container_paragraph = undefined;
let a_x_menu_container_paragraph = undefined, a_y_menu_container_paragraph = undefined;
let b_x_menu_container_paragraph = undefined, b_y_menu_container_paragraph = undefined;
let c_x_menu_container_paragraph = undefined, c_y_menu_container_paragraph = undefined;
let generate_button_container = "";
try {
// Populate the "event_log" div with a time stamped message indicating that this function was called.
time_stamped_message = ("The function named initialize_application() was called at time: " + generate_time_stamp());
console.log(time_stamped_message);
time_stamped_message = generate_paragraph_html_element(time_stamped_message);
events_log_div = document.getElementById("events_log");
events_log_div.innerHTML = time_stamped_message;
// Populate the "output" div with placeholder text.
output_div = document.getElementById("output");
output_div.innerHTML = generate_paragraph_html_element("This sentence will disappear as a result of the GENERATE button being clicked.");
// Populate the "canvas_container" div with a canvas web page element.
cartesian_plane_canvas = (('<' + 'canvas id="cartesian_plane" width="750" height="750" style="background:#ffffff">') + ('<' + '/' + '>'));
canvas_container_div = document.getElementById("canvas_container");
canvas_container_div.innerHTML = generate_paragraph_html_element(cartesian_plane_canvas);
// Draw the horizontal axis of a Cartesian plane through the center of the square canvas.
draw_horizontal_line_through_middle_of_canvas();
// Draw the vertical axis of a Cartesian plane through the center of the square canvas.
draw_vertical_line_through_middle_of_canvas();
// Populate the "a_x_menu_container" paragraph element with a select menu for choosing an integer value for the X property of POINT object A.
a_x_menu_container_paragraph = document.getElementById("a_x_menu_container");
a_x_menu_container_paragraph.innerHTML = ('A.X := ' + generate_coordinate_menu_select_html_element("a_x_menu") + '. // horizontal position of two-dimensional POINT labeled A.');
// Populate the "a_y_menu_container" paragraph element with a select menu for choosing an integer value for the Y property of POINT object A.
a_y_menu_container_paragraph = document.getElementById("a_y_menu_container");
a_y_menu_container_paragraph.innerHTML = ('A.Y := ' + generate_coordinate_menu_select_html_element("a_y_menu") + '. // vertical position of two-dimensional POINT labeled A.');
// Populate the "b_x_menu_container" paragraph element with a select menu for choosing an integer value for the X property of POINT object B.
b_x_menu_container_paragraph = document.getElementById("b_x_menu_container");
b_x_menu_container_paragraph.innerHTML = ('B.X := ' + generate_coordinate_menu_select_html_element("b_x_menu") + '. // horizontal position of two-dimensional POINT labeled B.');
// Populate the "B_y_menu_container" paragraph element with a select menu for choosing an integer value for the Y property of POINT object B.
b_y_menu_container_paragraph = document.getElementById("b_y_menu_container");
b_y_menu_container_paragraph.innerHTML = ('B.Y := ' + generate_coordinate_menu_select_html_element("b_y_menu") + '. // vertical position of two-dimensional POINT labeled B.');
// Populate the "c_x_menu_container" paragraph element with a select menu for choosing an integer value for the X property of POINT object C.
c_x_menu_container_paragraph = document.getElementById("c_x_menu_container");
c_x_menu_container_paragraph.innerHTML = ('C.X := ' + generate_coordinate_menu_select_html_element("c_x_menu") + '. // horizontal position of two-dimensional POINT labeled C.');
// Populate the "C_y_menu_container" paragraph element with a select menu for choosing an integer value for the Y property of POINT object B.
c_y_menu_container_paragraph = document.getElementById("c_y_menu_container");
c_y_menu_container_paragraph.innerHTML = ('C.Y := ' + generate_coordinate_menu_select_html_element("c_y_menu") + '. // vertical position of two-dimensional POINT labeled C.');
// Populate the "generate_button_container" paragraph element with a button input web page element which calls the function named generate_triangle_using_input_coordinates().
generate_button_container = document.getElementById("generate_button_container");
generate_button_container.innerHTML = ('<' + 'input type="button" value="GENERATE" style="text-align:center" onclick="generate_triangle_using_input_coordinates()"' + '/' + '>');
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of initialize_application(): " + exception);
}
}
/**
* 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;
}
}
/**
* 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 type data value with the following properties:
* {Number} X is assumed to be an integer no smaller than -100 and no larger than 100.
* {Number} Y is assumed to be an integer no smaller than -100 and no larger than 100.
*
* @param {Object} B is assumed to be an Object type data value with the following properties:
* {Number} X is assumed to be an integer no smaller than -100 and no larger than 100.
* {Number} Y is assumed to be an integer no smaller than -100 and no larger than 100.
*
* @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 data properties are as follows: { X : integer in range [-100,100], Y : integer in range [-100,100] }.";
if (!is_point(B)) throw "B must be an object whose data properties are as follows: { X : integer in range [-100,100], Y : integer in range [-100,100] }.";
horizontal_difference = A.X - B.X
vertical_difference = A.Y - B.Y;
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;
}
}
/**
* Compute the rate at which the y-value changes in relation to the x-value in the function whose graph
* is the line which completely overlaps the line segment whose endpoints are A and B.
*
* // y := f(x),
* // b := f(0),
* // f is a function whose input is an x-axis position and whose output is a y-axis position.
* y := mx + b.
*
* // m is a constant which represents the rate at which y changes in relation to x changing.
* m := (y - b) / x.
*
* // m represents the difference of the two y-values divided by the difference of the two x-values.
* m := (A.Y - B.Y) / (A.X - B.X).
*
* @param {Object} A is assumed to be an Object type data value with the following properties:
* {Number} X is assumed to be an integer no smaller than -100 and no larger than 100.
* {Number} Y is assumed to be an integer no smaller than -100 and no larger than 100.
*
* @param {Object} B is assumed to be an Object type data value with the following properties:
* {Number} X is assumed to be an integer no smaller than -100 and no larger than 100.
* {Number} Y is assumed to be an integer no smaller than -100 and no larger than 100.
*
* @return {Number} the slope of the shortest path between planar points A and B.
*/
function get_slope_of_line_segment(A, B) {
let vertical_difference = 0, horizontal_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 data properties are as follows: { X : integer in range [-100,100], Y : integer in range [-100,100] }.";
if (!is_point(B)) throw "B must be an object whose data properties are as follows: { X : integer in range [-100,100], Y : integer in range [-100,100] }.";
horizontal_difference = A.X - B.X;
vertical_difference = A.Y - B.Y;
console.log("horizontal_difference := " + horizontal_difference + '.');
console.log("vertical_difference := " + vertical_difference + '.');
return (vertical_difference / horizontal_difference);
}
catch(exception) {
console.log("An exception to expected functioning occurred in get_slope_of_line_segment(A, B): " + exception);
return 0;
}
}
/**
* Determine whether or not a given input value is a valid planar point object (as defined in the generate_triangle_using_input_coordinates() function).
*
* @param {Object} input is assumed to be an Object type data value with the following properties:
* {Number} X is assumed to be an integer no smaller than -100 and no larger than 100.
* {Number} Y is assumed to be an integer no smaller than -100 and no larger than 100.
*
* @return {Boolean} true if input satisfies the conditions defined above; false otherwise.
*/
function is_point(input) {
// let properties = undefined, count = 0;
try {
if (arguments.length !== 1) throw "exactly one function argument (labeled input) is required.";
if (typeof input !== "object") throw "input must be an Object type value.";
if (typeof input.X !== "number") throw "the X property of input must be a Number type value.";
if (typeof input.Y !== "number") throw "the Y property of input must be a Number type value.";
if (Math.floor(input.X) !== input.X) throw "the X property of the input object must be a whole number value.";
if (Math.floor(input.Y) !== input.Y) throw "the Y property of the input object must be a whole number value.";
if ((input.X < -100) || (input.X > 100)) throw "the X of the input object must be no smaller than -100 and no larger than 100.";
if ((input.Y < -100) || (input.Y > 100)) throw "the X of the input object must be no smaller than -100 and no larger than 100.";
/*
// This is commented out due to the fact that karbytes wanted to allow indefinitely many function properties to be added to POINT "type" objects.
for (let properties in input) count += 1;
if (count !== 2) throw "input must be an object consisting of exactly two properties.";
*/
return true;
}
catch(exception) {
console.log("An exception to expected functioning occurred in is_point(input): " + exception);
return false;
}
}
/**
* Generate an Object type data value which represents a position on a two-dimensional Cartesian grid.
*
* If an exception is thrown while the try-catch block is being executed, return a POINT whose coordinate values are both zero.
*
* @param {Number} X is assumed to be an integer no smaller than -100 and no larger than 100.
*
* @param {Number} Y is assumed to be an integer no smaller than -100 and no larger than 100.
*
* @return {Object} an object consisting of exactly two key-value pairs named X and Y and
* exactly three functions named distance, slope, and description.
*/
function POINT(X,Y) {
let distance = function(P) { return compute_distance_between_two_planar_points(this, P) };
let slope = function(P) { return get_slope_of_line_segment(this, P) };
let description = function() {
return ('POINT(' + this.X + ',' + this.Y + ')');
};
try {
if (arguments.length !== 2) throw "exactly two function arguments are required.";
if (is_point({X:X,Y:Y})) return {X:X, Y:Y, DISTANCE:distance, SLOPE:slope, DESCRIPTION:description};
else throw "The expression (is_point({X:X,Y:Y})) was evaluated to be false.";
}
catch(exception) {
console.log("An exception to expected functioning occurred in POINT(X,Y): " + exception);
return {X:0, Y:0, DISTANCE:distance, SLOPE:slope, DESCRIPTION:description};
}
}
/**
* Generate an Object type data value which represents the triangular region of space whose corners
* are points represented by input POINT instances A, B, and C.
*
* If an exception is thrown while the try-catch block is being executed, return a POINT whose coordinate values are both zero.
*
* A, B, and C are assumed to represent unique points in two-dimensional space.
*
* The area of the two-dimensional space whose boundaries are the shortest paths between points A, B, and C
* is assumed to be a positive real number quantity. (Therefore, A, B, and C are required to not be located on the same line).
*
* @param {Object} A is assumed to be a value returned by the function POINT(X,Y).
*
* @param {Object} B is assumed to be a value returned by the function POINT(X,Y).
*
* @param {Object} C is assumed to be a value returned by the function POINT(X,Y).
*
* @return {Object} an object consisting of exactly three data attributes named A, B, and C
* and exactly nine function attributes named perimeter, area, angle_a, angle_b, angle,
* length_ab, length_bc, length_ca, and description.
*/
function TRIANGLE(A,B,C) {
let _A = {}, _B = {}, _C = {};
let perimeter = function() { return (this.LENGTH_AB() + this.LENGTH_BC() + this.LENGTH_CA()); };
let area = function() {
let s = 0.0, a = 0.0, b = 0.0, c = 0.0;
s = this.PERIMETER() / 2; // s is technically referred to as the semiperimter of the triangle which the caller TRIANGLE object of this function represents.
a = this.LENGTH_BC(); // a represents the length of the line segment whose endpoints are this.B and this.C.
b = this.LENGTH_CA(); // b represents the length of the line segment whose endpoints are this.C and this.A.
c = this.LENGTH_AB(); // c represents the length of the line segment whose endpoints are this.A and this.B.
return Math.sqrt(s * (s - a) * (s - b) * (s - c)); // Use Heron's Formula to compute the area of the triangle whose points are A, B, and C (and which are points of the caller TRIANGLE object of this function represents).
};
let angle_a = function() {
let a = 0.0, b = 0.0, c = 0.0, angle_opposite_of_a = 0.0, angle_opposite_of_b = 0.0, angle_opposite_of_c = 0.0;
a = this.LENGTH_BC(); // a represents the length of the line segment whose endpoints are this.B and this.C.
b = this.LENGTH_CA(); // b represents the length of the line segment whose endpoints are this.C and this.A.
c = this.LENGTH_AB(); // c represents the length of the line segment whose endpoints are this.A and this.B.
angle_opposite_of_a = Math.acos(((b * b) + (c * c) - (a * a)) / (2 * b * c)) * (180 / Math.PI); // acos implies inverse of cosine (and Math.acos() returns a nonnegative number of radians)
angle_opposite_of_b = Math.acos(((a * a) + (c * c) - (b * b)) / (2 * a * c)) * (180 / Math.PI); // acos implies inverse of cosine (and Math.acos() returns a nonnegative number of radians)
angle_opposite_of_c = Math.acos(((a * a) + (b * b) - (c * c)) / (2 * a * b)) * (180 / Math.PI); // acos implies inverse of cosine (and Math.acos() returns a nonnegative number of radians)
return angle_opposite_of_a; // in degrees (instead of in radians)
};
let angle_b = function() {
let a = 0.0, b = 0.0, c = 0.0, angle_opposite_of_a = 0.0, angle_opposite_of_b = 0.0, angle_opposite_of_c = 0.0;
a = this.LENGTH_BC(); // a represents the length of the line segment whose endpoints are this.B and this.C.
b = this.LENGTH_CA() // b represents the length of the line segment whose endpoints are this.C and this.A.
c = this.LENGTH_AB(); // c represents the length of the line segment whose endpoints are this.A and this.B.
angle_opposite_of_a = Math.acos(((b * b) + (c * c) - (a * a)) / (2 * b * c)) * (180 / Math.PI); // acos implies inverse of cosine (and Math.acos() returns a nonnegative number of radians)
angle_opposite_of_b = Math.acos(((a * a) + (c * c) - (b * b)) / (2 * a * c)) * (180 / Math.PI); // acos implies inverse of cosine (and Math.acos() returns a nonnegative number of radians)
angle_opposite_of_c = Math.acos(((a * a) + (b * b) - (c * c)) / (2 * a * b)) * (180 / Math.PI); // acos implies inverse of cosine (and Math.acos() returns a nonnegative number of radians)
return angle_opposite_of_b; // in degrees (instead of in radians)
};
let angle_c = function() {
let a = 0.0, b = 0.0, c = 0.0, angle_opposite_of_a = 0.0, angle_opposite_of_b = 0.0, angle_opposite_of_c = 0.0;
a = this.LENGTH_BC(); // a represents the length of the line segment whose endpoints are this.B and this.C.
b = this.LENGTH_CA() // b represents the length of the line segment whose endpoints are this.C and this.A.
c = this.LENGTH_AB(); // c represents the length of the line segment whose endpoints are this.A and this.B.
angle_opposite_of_a = Math.acos(((b * b) + (c * c) - (a * a)) / (2 * b * c)) * (180 / Math.PI); // acos implies inverse of cosine (and Math.acos() returns a nonnegative number of radians)
angle_opposite_of_b = Math.acos(((a * a) + (c * c) - (b * b)) / (2 * a * c)) * (180 / Math.PI); // acos implies inverse of cosine (and Math.acos() returns a nonnegative number of radians)
angle_opposite_of_c = Math.acos(((a * a) + (b * b) - (c * c)) / (2 * a * b)) * (180 / Math.PI); // acos implies inverse of cosine (and Math.acos() returns a nonnegative number of radians)
return angle_opposite_of_c; // in degrees (instead of in radians)
};
let length_ab = function(A,B) { return this.A.DISTANCE(this.B); };
let length_bc = function(B,C) { return this.B.DISTANCE(this.C); };
let length_ca = function(C,A) { return this.C.DISTANCE(this.A); };
let description = function() {
return ('TRIANGLE(A := ' + this.A.DESCRIPTION() + ', B:= ' + this.B.DESCRIPTION() + ', C := ' + this.C.DESCRIPTION() + ')');
};
try {
if (arguments.length !== 3) throw "exactly three function arguments are required.";
_A = POINT(A.X,A.Y);
_B = POINT(B.X,B.Y);
_C = POINT(C.X,C.Y);
if ((_A.X === _B.X) && (_A.Y === _B.Y)) throw "A and B appear to represent the same planar coordinates.";
if ((_A.X === _C.X) && (_A.Y === _C.Y)) throw "A and C appear to represent the same planar coordinates.";
if ((_C.X === _B.X) && (_C.Y === _B.Y)) throw "C and B appear to represent the same planar coordinates.";
return {A:_A, B:_B, C:_C, PERIMETER:perimeter, AREA:area, ANGLE_A:angle_a, ANGLE_B:angle_b, ANGLE_C:angle_c, LENGTH_AB:length_ab, LENGTH_BC:length_bc, LENGTH_CA:length_ca, DESCRIPTION:description};
}
catch(exception) {
console.log("An exception to expected functioning occurred in TRIANGLE(A,B,C): " + exception);
return {A:POINT(0,0), B:POINT(1,1), C:POINT(0,1), PERIMETER:perimeter, AREA:area, ANGLE_A:angle_a, ANGLE_B:angle_b, ANGLE_C:angle_c, LENGTH_AB:length_ab, LENGTH_BC:length_bc, LENGTH_CA:length_ca, DESCRIPTION:description};
}
}
/**
* Translate a POINT object's coordinate pair to its corresponding HTML canvas coordinates (which are each a nonnegative integer number of pixels)
* such that the POINT object can be graphically depicted as a two-dimensional Cartesian grid "spaceless" location precisely located on that grid
* (displayed inside of an HTML5 canvas element on the corresponding web page graphical user interface).
*
* Assume that the relevant canvas element is square shaped and has a side length of exactly 750 pixels.
*
* @param {Object} input_POINT is assumed to be an object whose abstracted properties are identical to objects returned by the function named POINT(X,Y).
*
* @param {String} canvas_id is assumed to be a sequence of text characters which represents the identifier (id) of the relevant HTML canvas element.
*
* @return {Object} an array whose elements are exactly two nonnegative integers.
*/
function convert_POINT_coordinate_to_HTML_canvas_coordinate(input_POINT, canvas_id) {
let the_canvas, canvas_width = 0, canvas_height = 0, output_canvas_coordinate_pair = [];
let minimum_input_x_value = -100, maximum_input_x_value = 100;
let minimum_input_y_value = -100, maximum_input_y_value = 100;
let minimum_output_x_value = -100, maximum_output_x_value = 100;
let minimum_output_y_value = -100, maximum_output_y_value = 100;
let output_x_value = 0, output_y_value = 0;
let output_origin_x_value = 0, output_origin_y_value = 0;
const CANVAS_SIDE_LENGTH = 750;
try {
if (arguments.length !== 2) throw "exactly two (2) function inputs value are required.";
if (typeof arguments[0].X !== "number") throw "input_POINT.X is required to be a Number type value.";
if (typeof arguments[0].Y !== "number") throw "input_POINT.Y is required to be a Number type value.";
if (typeof arguments[1] !== "string") throw "canvas_id is required to be a String type value.";
if (Math.floor(input_POINT.X) !== input_POINT.X) throw "input_POINT.X is required to be a whole number (i.e. integer) value.";
if (Math.floor(input_POINT.Y) !== input_POINT.Y) throw "input_POINT.Y is required to be a whole number (i.e. integer) value.";
if ((input_POINT.X < minimum_input_x_value) || (input_POINT.X > maximum_input_x_value)) throw "input_POINT.X must be an integer value inside the set [-100,100].";
if ((input_POINT.Y < minimum_input_y_value) || (input_POINT.Y > maximum_input_y_value)) throw "input_POINT.Y must be an integer value inside the set [-100,100].";
if (canvas_id.length < 1) throw "canvas_id is required to be a sequence of one (1) or more text characters.";
the_canvas = document.getElementById(canvas_id);
canvas_width = the_canvas.width;
canvas_height = the_canvas.height;
if (canvas_width !== canvas_height) throw "The canvas_width and canvas_height values are required to be identical values.";
if (canvas_width !== CANVAS_SIDE_LENGTH) throw "The canvas side lengths are each required to be exactly 750 pixels.";
output_origin_x_value = parseInt((the_canvas.width / 2));
output_origin_y_value = parseInt((the_canvas.height / 2));
// Determine whether or not the input_POINT is located on a Cartesian plane axis.
if (input_POINT.X === 0) output_x_value = output_origin_x_value;
if (input_POINT.Y === 0) output_y_value = output_origin_y_value;
// Determine whether or not the input_POINT is located on the right side of the y-axis of a Cartesian plane.
if (input_POINT.X > 0) output_x_value = (output_origin_x_value + (input_POINT.X * (canvas_width / (Math.abs(minimum_input_x_value) + Math.abs(maximum_input_x_value)))));
// Determine whether or not the input_POINT is located on the top side of the x-axis of a Cartesian plane.
if (input_POINT.Y > 0) output_y_value = (output_origin_y_value - (input_POINT.Y * (canvas_height / (Math.abs(minimum_input_y_value) + Math.abs(maximum_input_y_value)))));
// Determine whether or not the input_POINT is located on the right side of the y-axis of a Cartesian plane.
if (input_POINT.X < 0) output_x_value = output_origin_x_value - (Math.abs(input_POINT.X) * (canvas_width / (Math.abs(minimum_input_x_value) + Math.abs(maximum_input_x_value))));
// Determine whether or not the input_POINT is located on the top side of the x-axis of a Cartesian plane.
if (input_POINT.Y < 0) output_y_value = output_origin_y_value + (Math.abs(input_POINT.Y) * (canvas_width / (Math.abs(minimum_input_y_value) + Math.abs(maximum_input_y_value))));
output_canvas_coordinate_pair.push(output_x_value);
output_canvas_coordinate_pair.push(output_y_value);
return output_canvas_coordinate_pair;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of convert_POINT_coordinate_to_HTML_canvas_coordinate(input_POINT, canvas_id): " + exception);
return 0;
}
}
/**
* Plot a red pixel-sized dot on the canvas whose identifier (id) is "cartesian_plane" on the web page named triangle_graphing.html
* such that the horizontal position of the red pixel visually depicts the x-value coordinate value represented by input_POINT
* and such that the vertical position of the red pixel visually depicts the y-value cordinate value represented by input_POINT
*
* @param {Object} input_POINT is assumed to be an object whose abstracted properties are identical to objects returned by the function named POINT(X,Y).
*/
function plot_red_POINT_pixel_on_canvas(input_POINT) {
let canvas, context;
let output_canvas_coordinate_pair = [];
try {
canvas = document.getElementById("cartesian_plane");
context = canvas.getContext("2d");
output_canvas_coordinate_pair = convert_POINT_coordinate_to_HTML_canvas_coordinate(input_POINT, "cartesian_plane");
context.beginPath();
context.rect(output_canvas_coordinate_pair[0], output_canvas_coordinate_pair[1], 1, 1); // 1 pixel has a width of 1 and a height of 1
context.strokeStyle = "#ff0000"; // HTML color code for red
context.stroke();
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of plot_red_POINT_pixel_on_canvas(input_POINT): " + exception);
return 0;
}
}
/**
* Draw a red line segment which is one pixel thick on the canvas whose identifier (id) is "cartesian_plane" on the web page named triangle_graphing.html.
*
* @param {Object} input_POINT_0 is assumed to be an object whose abstracted properties are identical to objects returned by the function named POINT(X,Y).
*
* @param {Object} input_POINT_1 is assumed to be an object whose abstracted properties are identical to objects returned by the function named POINT(X,Y).
*/
/* function commented out on 21_JULY_2021
function draw_red_line_segment_on_canvas(input_POINT_0, input_POINT_1) {
let canvas, context;
let placeholder_array = [], ip0x = 0, ip0y = 0, ip1x = 0, ip1y = 0;
try {
placeholder_array = convert_POINT_coordinate_to_HTML_canvas_coordinate(input_POINT_0, "cartesian_plane");
ip0x = placeholder_array[0];
ip0y = placeholder_array[1];
placeholder_array = convert_POINT_coordinate_to_HTML_canvas_coordinate(input_POINT_1, "cartesian_plane");
ip1x = placeholder_array[0];
ip1y = placeholder_array[1];
canvas = document.getElementById("cartesian_plane");
context = canvas.getContext("2d");
context.strokeStyle = "#ff0000";
context.lineWidth = 1;
context.beginPath();
context.moveTo(ip0x, ip0y);
context.lineTo(ip1x, ip1y);
context.stroke();
}
catch(exception) {
console.log("An exception to expected functioning occurred in draw_red_line_segment_on_canvas(input_POINT_0, input_POINT_1): " + exception);
}
}
*/
/**
* Draw a "light green" filled triangle which visually represents input_TRIANGLE on the canvas whose identifier (id) is "cartesian_plane"
* on the web page named triangle_graphing.html.
*
* @param {Object} input_TRIANGLE is assumed to be an object whose abstracted properties are identical to objects returned by the function named TRIANGLE(A,B,C).
*/
function draw_green_filled_triangle(input_TRIANGLE) {
let canvas, context;
let placeholder_array = [], ax = 0, ay = 0, bx = 0, by = 0, cx = 0, cy = 0;
try {
placeholder_array = convert_POINT_coordinate_to_HTML_canvas_coordinate(input_TRIANGLE.A, "cartesian_plane");
ax = placeholder_array[0];
ay = placeholder_array[1];
placeholder_array = convert_POINT_coordinate_to_HTML_canvas_coordinate(input_TRIANGLE.B, "cartesian_plane");
bx = placeholder_array[0];
by = placeholder_array[1];
placeholder_array = convert_POINT_coordinate_to_HTML_canvas_coordinate(input_TRIANGLE.C, "cartesian_plane");
cx = placeholder_array[0];
cy = placeholder_array[1];
canvas = document.getElementById("cartesian_plane");
context = canvas.getContext("2d");
context.fillStyle = "#c2fab4"; // HTML color code for a particular shade of "light green"
context.beginPath();
context.moveTo(ax, ay); // point 0
context.lineTo(bx, by); // point 1
context.lineTo(cx, cy); // point 2
context.closePath(); // go back to point 0
context.strokeStyle = "#ff0000"; // red
context.lineWidth = 1;
context.fill();
context.stroke();
}
catch(exception) {
console.log("An exception to expected functioning occurred in draw_red_line_segment_on_canvas(input_POINT_0, input_POINT_1): " + exception);
}
}
/**
* Respond to the event of the GENERATE button being clicked.
*/
function generate_triangle_using_input_coordinates() {
let cartesian_plane_canvas = "";
let A = {}, B = {}, C = {}, T = {};
let time_stamped_message = "", selected_menu_option_value = 0, x_coordinate_value = 0, y_coordinate_value = 0;
let output_div = undefined, events_log_div = undefined, generate_button_container_paragraph = undefined;
let select_menu_container_paragraph = undefined;
let reset_button = undefined;
try {
// Append the bottom of the content inside of the "event_log" div with a time stamped message indicating that this function was called.
time_stamped_message = ("The function named generate_triangle_using_input_coordinates() was called at time: " + generate_time_stamp());
console.log(time_stamped_message);
time_stamped_message = generate_paragraph_html_element(time_stamped_message);
events_log_div = document.getElementById("events_log");
events_log_div.innerHTML += time_stamped_message;
// Replace the GENERATE button with a RESET button.
generate_button_container_paragraph = document.getElementById("generate_button_container");
generate_button_container_paragraph.innerHTML = ('<' + 'input type="button" value="RESET" onclick="initialize_application()"' + '/' + '>');
// Transform the first input select menu (for A.X) into plain text displaying its selected option.
select_menu_container_paragraph = document.getElementById("a_x_menu_container");
selected_menu_option_value = parseInt(get_selected_menu_option_value("a_x_menu"));
select_menu_container_paragraph.innerHTML = ('A.X := ' + selected_menu_option_value + '. // horizontal position of two-dimensional POINT labeled A.');
// Store the selected menu option in a variable to be used later as its corresponding POINT property (as the property labeled X of the object labeled A).
x_coordinate_value = selected_menu_option_value;
// Transform the second input select menu (for A.Y) into plain text displaying its selected option.
select_menu_container_paragraph = document.getElementById("a_y_menu_container");
selected_menu_option_value = parseInt(get_selected_menu_option_value("a_y_menu"));
select_menu_container_paragraph.innerHTML = ('A.Y := ' + selected_menu_option_value + '. // vertical position of two-dimensional POINT labeled A.');
// Store the selected menu option in a variable to be used later as its corresponding POINT property (as the property labeled Y of the object labeled A).
y_coordinate_value = selected_menu_option_value;
// Store an Object type value for representing the two-dimensional point labeled A.
A = POINT(x_coordinate_value,y_coordinate_value);
// Transform the third input select menu (for B.X) into plain text displaying its selected option.
select_menu_container_paragraph = document.getElementById("b_x_menu_container");
selected_menu_option_value = parseInt(get_selected_menu_option_value("b_x_menu"));
select_menu_container_paragraph.innerHTML = ('B.X := ' + selected_menu_option_value + '. // horizontal position of two-dimensional POINT labeled B.');
// Store the selected menu option in a variable to be used later as its corresponding POINT property (as the property labeled X of the object labeled B).
x_coordinate_value = selected_menu_option_value;
// Transform the fourth input select menu (for B.Y) into plain text displaying its selected option.
select_menu_container_paragraph = document.getElementById("b_y_menu_container");
selected_menu_option_value = parseInt(get_selected_menu_option_value("b_y_menu"));
select_menu_container_paragraph.innerHTML = ('B.Y := ' + selected_menu_option_value + '. // vertical position of two-dimensional POINT labeled B.');
// Store the selected menu option in a variable to be used later as its corresponding POINT property (as the property labeled Y of the object labeled B).
y_coordinate_value = selected_menu_option_value;
// Store an Object type value for representing the two-dimensional point labeled A.
B = POINT(x_coordinate_value,y_coordinate_value);
// Transform the fifth input select menu (for C.X) into plain text displaying its selected option.
select_menu_container_paragraph = document.getElementById("c_x_menu_container");
selected_menu_option_value = parseInt(get_selected_menu_option_value("c_x_menu"));
select_menu_container_paragraph.innerHTML = ('C.X := ' + selected_menu_option_value + '. // horizontal position of two-dimensional POINT labeled C.');
// Store the selected menu option in a variable to be used later as its corresponding POINT property (as the property labeled X of the object labeled C).
x_coordinate_value = selected_menu_option_value;
// Transform the sixth input select menu (for C.Y) into plain text displaying its selected option.
select_menu_container_paragraph = document.getElementById("c_y_menu_container");
selected_menu_option_value = parseInt(get_selected_menu_option_value("c_y_menu"));
select_menu_container_paragraph.innerHTML = ('C.Y := ' + selected_menu_option_value + '. // vertical position of two-dimensional POINT labeled C.');
// Store the selected menu option in a variable to be used later as its corresponding POINT property (as the property labeled Y of the object labeled C).
y_coordinate_value = selected_menu_option_value;
// Store an Object type value for representing the two-dimensional point labeled A.
C = POINT(x_coordinate_value,y_coordinate_value);
// Generate a TRIANGLE object using the POINT objects A, B, and C as the inputs to that "constructor" function.
T = TRIANGLE(A,B,C);
// Print the attributes of the TRIANGLE object as text inside of the div element whose id is "output". (Append those paragraphs to the bottom of the content in the output div).
output_div = document.getElementById("output");
output_div.innerHTML = generate_paragraph_html_element("T.DESCRIPTION() := " + T.DESCRIPTION() + ".");
output_div.innerHTML += generate_paragraph_html_element("T.LENGTH_AB() := " + T.LENGTH_AB() + ". // in Cartesian grid unit lengths");
output_div.innerHTML += generate_paragraph_html_element("T.LENGTH_BC() := " + T.LENGTH_BC() + ". // in Cartesian grid unit lengths");
output_div.innerHTML += generate_paragraph_html_element("T.LENGTH_CA() := " + T.LENGTH_CA() + ". // in Cartesian grid unit lengths");
output_div.innerHTML += generate_paragraph_html_element("T.PERIMETER() := " + T.PERIMETER() + ". // in Cartesian grid unit lengths");
output_div.innerHTML += generate_paragraph_html_element("T.ANGLE_A() := " + T.ANGLE_A() + ". // in degrees (non-obtuse between CA and AB)");
output_div.innerHTML += generate_paragraph_html_element("T.ANGLE_B() := " + T.ANGLE_B() + ". // in degrees (non-obtuse between AB and BC)");
output_div.innerHTML += generate_paragraph_html_element("T.ANGLE_C() := " + T.ANGLE_C() + ". // in degrees (non-obtuse between BC and CA)");
output_div.innerHTML += generate_paragraph_html_element("((T.ANGLE_A() + T.ANGLE_B()) + T.ANGLE_C()) = " + ((T.ANGLE_A() + T.ANGLE_B()) + T.ANGLE_C()) + ". // in degrees");
output_div.innerHTML += generate_paragraph_html_element("T.AREA() := " + T.AREA() + ". // in Cartesian grid unit square areas");
/*
console.log("testing POINT_coordinate_to_HTML_canvas_coordinate(input_POINT, canvas_id)...");
console.log('POINT_coordinate_to_HTML_canvas_coordinate(POINT(-20,-20), "cartesian_plane") := ' + POINT_coordinate_to_HTML_canvas_coordinate(POINT(-20,-20), "cartesian_plane") + '.');
console.log("testing plot_red_POINT_pixel_on_canvas(POINT(-20,-20))...");
plot_red_POINT_pixel_on_canvas(POINT(-20,-20));
*/
// Plot the three points of the TRIANGLE object as red pixel-sized dots on the canvas element whose id is "cartesian_plane".
plot_red_POINT_pixel_on_canvas(T.A);
plot_red_POINT_pixel_on_canvas(T.B);
plot_red_POINT_pixel_on_canvas(T.C);
//...
console.log("testing draw_red_line_segment_on_canvas(input_POINT_0, input_POINT_1)...");
console.log("testing draw_red_line_segment_on_canvas(POINT(0,0), POINT(100,100))...");
/* code block commented out on 21_JULY_2023
// draw_red_line_segment_on_canvas(POINT(0,0), POINT(100,100));
// Draw red line segments which are each one pixel thick and whose endpoints are each of the points in the TRIANGLE object.
draw_red_line_segment_on_canvas(T.A, T.B);
draw_red_line_segment_on_canvas(T.B, T.C);
draw_red_line_segment_on_canvas(T.C, T.A);
*/
// Draw a green triangular area inside of the red line segments which were previously drawn.
draw_green_filled_triangle(T);
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of generate_triangle_using_input_coordinates(): " + exception);
}
}
</pre>
<hr>
<p><strong>TRIANGLE_GRAPHING Interface (after selecting inputs)</strong></p>
<hr>
<p>image_link: <a style="background:#000000;color:#ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_0/main/triangle_graphing_web_page_interface_after_selecting_input_values.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_0/main/triangle_graphing_web_page_interface_after_selecting_input_values.png</a></p>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="22002" data-permalink="https://karlinaobject.wordpress.com/triangle_graphing/triangle_graphing_web_page_interface_after_selecting_input_values-1/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_selecting_input_values-1.png" data-orig-size="819,2443" 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="triangle_graphing_web_page_interface_after_selecting_input_values-1" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_selecting_input_values-1.png?w=101" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_selecting_input_values-1.png?w=343" tabindex="0" role="button" width="819" height="2443" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_selecting_input_values-1.png" alt="" class="wp-image-22002" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_selecting_input_values-1.png 819w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_selecting_input_values-1.png?w=50&h=150 50w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_selecting_input_values-1.png?w=101&h=300 101w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_selecting_input_values-1.png?w=768&h=2291 768w" sizes="(max-width: 819px) 100vw, 819px" /></figure>
<hr>
<p><strong>TRIANGLE_GRAPHING Interface (after clicking GENERATE)</strong></p>
<hr>
<p>image_link: <a style="background:#000000;color:#ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_0/main/triangle_graphing_web_page_interface_after_clicking_generate_button.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_0/main/triangle_graphing_web_page_interface_after_clicking_generate_button.png</a></p>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="22008" data-permalink="https://karlinaobject.wordpress.com/triangle_graphing/new_triangle_graphing_web_page_interface_after_clicking_generate_button/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/new_triangle_graphing_web_page_interface_after_clicking_generate_button.png" data-orig-size="816,2816" 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="new_triangle_graphing_web_page_interface_after_clicking_generate_button" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/new_triangle_graphing_web_page_interface_after_clicking_generate_button.png?w=87" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/new_triangle_graphing_web_page_interface_after_clicking_generate_button.png?w=297" tabindex="0" role="button" width="816" height="2816" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/new_triangle_graphing_web_page_interface_after_clicking_generate_button.png" alt="" class="wp-image-22008" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/new_triangle_graphing_web_page_interface_after_clicking_generate_button.png 816w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/new_triangle_graphing_web_page_interface_after_clicking_generate_button.png?w=87&h=300 87w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/new_triangle_graphing_web_page_interface_after_clicking_generate_button.png?w=768&h=2650 768w" sizes="(max-width: 816px) 100vw, 816px" /></figure>
<hr>
<p><strong>TRIANGLE_GRAPHING Interface (after clicking RESET)</strong></p>
<hr>
<p>image_link: <a style="background:#000000;color:#ff9000" href="https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_0/main/triangle_graphing_web_page_interface_after_clicking_reset_button.png" target="_blank" rel="noopener">https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_extension_pack_0/main/triangle_graphing_web_page_interface_after_clicking_reset_button.png</a></p>
<hr>
<figure class="wp-block-image size-full"><img data-attachment-id="22000" data-permalink="https://karlinaobject.wordpress.com/triangle_graphing/triangle_graphing_web_page_interface_after_clicking_reset_button-1/" data-orig-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_clicking_reset_button-1.png" data-orig-size="809,2439" 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="triangle_graphing_web_page_interface_after_clicking_reset_button-1" data-image-description="" data-image-caption="" data-medium-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_clicking_reset_button-1.png?w=100" data-large-file="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_clicking_reset_button-1.png?w=340" tabindex="0" role="button" loading="lazy" width="809" height="2439" src="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_clicking_reset_button-1.png" alt="" class="wp-image-22000" srcset="https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_clicking_reset_button-1.png 809w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_clicking_reset_button-1.png?w=50&h=150 50w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_clicking_reset_button-1.png?w=100&h=300 100w, https://karlinaobject.wordpress.com/wp-content/uploads/2023/07/triangle_graphing_web_page_interface_after_clicking_reset_button-1.png?w=768&h=2315 768w" sizes="(max-width: 809px) 100vw, 809px" /></figure>
<hr>
<p>This web page was last updated on 17_OCTOBER_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>