-
Notifications
You must be signed in to change notification settings - Fork 42
/
tetrahedron.html
156 lines (152 loc) · 9.72 KB
/
tetrahedron.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tetrahedron Calculator</title>
<link rel="stylesheet" href="tetrahedron.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Intuitive calculator for tetrahedrons that support combinations of length, angles and dihedral inputs.">
<meta name="keywords" content="tetrahedron calculator, tetrahedron properties, geometry, 3D visualization">
<meta name="author" content="Sichao Xiong">
</head>
<body>
<!--Wrapper for the table and SVG element-->
<div class="wrapper">
<!--Table for inputs-->
<table>
<!--Splits table into 6 columns to allow for three and two column splits-->
<colgroup>
<col style="width: 16.66%" />
<col style="width: 16.66%" />
<col style="width: 16.66%" />
<col style="width: 16.66%" />
<col style="width: 16.66%" />
<col style="width: 16.66%" />
</colgroup>
<tr>
<th colspan="6">Tetrahedron Type</th>
</tr>
<!--Splits table into 6 columns to allow for three and two column splits-->
<form name="formA">
<tr>
<td colspan="2"><input type="radio" name="special_tet" value="0" checked="checked"><label>Irregular tetrahedron</label></td>
<td colspan="2"><input type="radio" name="special_tet" value="1"><label>Triangular pyramid</label></td>
<td colspan="2"><input type="radio" name="special_tet" value="2"><label>Tetragonal disphenoid</label></td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="special_tet" value="3"><label>Digonal disphenoid</label></td>
<td colspan="2"><input type="radio" name="special_tet" value="4"><label>Rhombic disphenoid</label></td>
<td colspan="2"><input type="radio" name="special_tet" value="5"><label>Phyllic disphenoid</label></td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="special_tet" value="6"><label>Sphenoid</label></td>
<td colspan="2"><input type="radio" name="special_tet" value="7"><label>Regular tetrahedron</label></td>
<td colspan="2"><button id="clear">Clear all fields</button></td>
</tr>
</form>
<tr>
<th colspan="6">Lengths</th>
</tr>
<tr>
<td colspan="2">\(r_1\): <input id="label1" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(r_2\): <input id="label2" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(r_3\): <input id="label3" type="number" onfocusout="validate()"/></td>
</tr>
<tr>
<td colspan="2">\(r_4\): <input id="label4" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(r_5\): <input id="label5" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(r_6\): <input id="label6" type="number" onfocusout="validate()"/></td>
</tr>
<tr>
<td colspan="2">\(r_7\): <input id="label7" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(r_8\): <input id="label8" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(r_9\): <input id="label9" type="number" onfocusout="validate()"/></td>
</tr>
<tr>
<th colspan="6">Angles</th>
</tr>
<tr>
<td colspan="2">\(\theta_1\): <input id="angle1" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(\theta_2\): <input id="angle2" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(\theta_3\): <input id="angle3" type="number" onfocusout="validate()"/></td>
</tr>
<tr>
<td colspan="2">\(\theta_4\): <input id="angle4" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(\theta_5\): <input id="angle5" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(\theta_6\): <input id="angle6" type="number" onfocusout="validate()"/></td>
</tr>
<tr>
<td colspan="2">\(\theta_7\): <input id="angle7" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(\theta_8\): <input id="angle8" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(\theta_9\): <input id="angle9" type="number" onfocusout="validate()"/></td>
</tr>
<tr>
<td colspan="2">\(\theta_{10}\): <input id="angle10" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(\theta_{11}\): <input id="angle11" type="number" onfocusout="validate()"/></td>
<td colspan="2">\(\theta_{12}\): <input id="angle12" type="number" onfocusout="validate()"/></td>
</tr>
<tr>
<th colspan="6">Dihedrals</th>
</tr>
<tr>
<td colspan="3">ABC & ABD: <input id="dihedral1" type="number" placeholder="φ1" onfocusout="validate()"/></td>
<td colspan="3">ABC & ACD: <input id="dihedral2" type="number" placeholder="φ2" onfocusout="validate()"/></td>
</tr>
<tr>
<td colspan="3">ABD & ACD: <input id="dihedral3" type="number" placeholder="φ3" onfocusout="validate()"/></td>
<td colspan="3">ACD & BCD: <input id="dihedral4" type="number" placeholder="φ4" onfocusout="validate()"/></td>
</tr>
<tr>
<td colspan="3">ABD & BCD: <input id="dihedral5" type="number" placeholder="φ5" onfocusout="validate()"/></td>
<td colspan="3">ABC & BCD: <input id="dihedral6" type="number" placeholder="φ6" onfocusout="validate()"/></td>
</tr>
<tr>
<th colspan="6">Orange: A, Blue: B, Purple: C, Green: D</th>
</tr>
</table>
<!--SVG elements to render visualization-->
<svg width="36%" id="triangle" style="text-align:justify;display: inline-block;" viewBox="-8 -6.9282032302755105 416 360.26656797432656">
<!--Draws a hexagon and triangle to represent the net-->
<polygon id="svg-line" points="0 0, 400 0, 200 346.4101615137755"/>
<polygon id="svg-line1" points="200 0, 100 173.205081, 300 173.205081"/>
<!--Plots points which represents the 4-atoms-->
<circle id = "p1" cx="0" cy="0" r="1.5%" fill="orange" />
<circle id = "p2" cx="200" cy="0" r="1.5%" fill="blue" />
<circle id = "p3" cx="400" cy="0" r="1.5%" fill="orange" />
<circle id = "p4" cx="300" cy="173.205081" r="1.5%" fill="green" />
<circle id = "p5" cx="200" cy="346.4101615137755" r="1.5%" fill="orange" />
<circle id = "p6" cx="100" cy="173.205081" r="1.5%" fill="purple" />
<!--Elements to represent labels-->
<text id="pq1" x="184.4" y="204.40508075688774"><tspan dy="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">1</tspan></text>
<text id="pq2" x="265.6" y="86.60254037844388"><tspan dy="-10" dx="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">2</tspan></text>
<text id="pq3" x="118.8" y="86.60254037844388"><tspan dy="-10" dx="10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">3</tspan></text>
<text id="pq4" x="84.4" y="31.2"><tspan dy="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">4</tspan></text>
<text id="pq5" x="65.59999999999998" y="86.60254037844388"><tspan dy="-10" dx="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">5</tspan></text>
<text id="pq6" x="284.4" y="31.2"><tspan dy="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">6</tspan></text>
<text id="pq7" x="318.8" y="86.60254037844388"><tspan dy="-10" dx="10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">7</tspan></text>
<text id="pq8" x="165.59999999999994" y="259.8076211353316"><tspan dy="-10" dx="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">8</tspan></text>
<text id="pq9" x="218.79999999999998" y="259.8076211353316"><tspan dy="-10" dx="10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">9</tspan></text>
<text class="ang_label" x="190" y="40"><tspan class = "ang_label1">θ</tspan><tspan dy="5" class = "ang_label2">1</tspan></text>
<text class="ang_label" x="120" y="165"><tspan class = "ang_label1">θ</tspan><tspan dy="5" class = "ang_label2">2</tspan></text>
<text class="ang_label" x="255" y="165"><tspan class = "ang_label1">θ</tspan><tspan dy="5" class = "ang_label2">3</tspan></text>
<text class="ang_label" x="150" y="30"><tspan class = "ang_label1">θ</tspan><tspan dy="5" class = "ang_label2">4</tspan></text>
<text class="ang_label" x="25" y="30"><tspan class = "ang_label1">θ</tspan><tspan dy="5" class = "ang_label2">5</tspan></text>
<text class="ang_label" x="87.5" y="140"><tspan class = "ang_label1">θ</tspan><tspan dy="5" class = "ang_label2">6</tspan></text>
<text class="ang_label" x="220" y="30"><tspan class = "ang_label1">θ</tspan><tspan dy="5" class = "ang_label2">7</tspan></text>
<text class="ang_label" x="287.5" y="140"><tspan class = "ang_label1">θ</tspan><tspan dy="5" class = "ang_label2">8</tspan></text>
<text class="ang_label" x="350" y="30"><tspan class = "ang_label1">θ</tspan><tspan dy="5" class = "ang_label2">9</tspan></text>
<text class="ang_label" x="120" y="200"><tspan class = "ang_label1">θ</tspan><tspan dy="5" class = "ang_label2">10</tspan></text>
<text class="ang_label" x="180" y="300"><tspan class = "ang_label1">θ</tspan><tspan dy="5" class = "ang_label2">11</tspan></text>
<text class="ang_label" x="240" y="200"><tspan class = "ang_label1">θ</tspan><tspan dy="5" class = "ang_label2">12</tspan></text>
</svg>
</div>
<!--Links to javascript-->
<script src="tetrahedron.js"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<footer>
<div class="credits">
<p>© 2023 Sichao Xiong. All rights reserved.</p>
</div>
</footer>
</body>
</html>