-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (103 loc) · 8.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<title>Domonic Milesi</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="author" content="Domonic Milesi" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Hangboard Calculator and Equations</h1>
<p>
This is a set of calculators about hangboarding edge sizes, converting between them and the like. All the math is based on the equations in <a href="https://doi.org/10.1080/02640414.2012.658845">this study</a>; I write more about how I derived everything <a href="#">here</a>.
A couple use notes:
<ol>
<li>
According to the model there is an optimal, Platonic ideal edge on which everyone can pull the most weight (about 32mm), and after that making the edge bigger decreases the weight you can hang on it as much as does making it smaller. This means for every weight, there's two edges (one bigger than the optimal edge and one smaller) where you can hang that weight. That's why all the calculators that give you an edge size have two outputs.
</li>
<li>
Sometimes these equations will spit out answers that don't really make sense, e.g. negative edge depths. Checking 'sensible outputs' mitigates that as follows:
<ul>
<li>no negative values; outputs 0 instead.</li>
<li>when calculating weight: if input edge is the same as the target edge, output the input weight.</li>
<li>when calculating edge: if the target weight is more than your maximum possible weight, output 0.</li>
</ul>
Whether you set sensible outputs or not, sometimes the equations will still come up with no real values; in which case the output will just be 'X'.
</li>
</ol>
</p>
<input type="radio" id="sensible" name="calc_output" value="sensible" checked><label for="sensible">sensible outputs</label>
<input type="radio" id="raw" name="calc_output" value="raw"><label for="raw">raw outputs</label>
<form id="solve-for-percent" autocomplete="off">
<h3>What percentage of my max weight can I hang on a <input type="number" min="0" step="any" value="" required id="init-edge-percent"> mm edge?</h3>
</form>
<div class="table-container">
<table id="percent-results">
<thead>
<tr><th scope="col">Average</th><th scope="col" style="border-left:solid #fff;">Half crimp</th><th scope="col" style="border-left:solid #fff;">Full crimp</th><th scope="col" style="border-left:solid #fff;">Slope</th></tr>
</thead>
<tbody>
<tr><td id="avg-percent-results">-</td><td id="half-crimp-percent-results-1" style="border-left:solid #fff;">-</td><td id="full-crimp-percent-results-1" style="border-left:solid #fff;">-</td><td id="slope-percent-results-1" style="border-left:solid #fff;">-</td></tr>
</tbody>
</table>
</div>
<form id="solve-for-weight" autocomplete="off">
<h3>If I can hang <input type="number" min="0" step="any" value="" required id="init-weight-weight"> total weight on a <input type="number" min="0" step="any" value="" required id="init-edge-weight"> mm edge, how much weight total can I hang on a <input type="number" min="0" step="any" value="" required id="target-edge-weight"> mm edge?</h3>
</form>
<div class="table-container">
<table id="weight-results">
<thead>
<tr><th scope="col">Average</th><th scope="col" style="border-left:solid #fff;">Half crimp</th><th scope="col" style="border-left:solid #fff;">Full crimp</th><th scope="col" style="border-left:solid #fff;">Slope</th></tr>
</thead>
<tbody>
<tr><td id="avg-weight-results">-</td><td id="half-crimp-weight-results-1" style="border-left:solid #fff;">-</td><td id="full-crimp-weight-results-1" style="border-left:solid #fff;">-</td><td id="slope-weight-results-1" style="border-left:solid #fff;">-</td></tr>
</tbody>
</table>
</div>
<form id="solve-for-edge" autocomplete="off">
<h3>If I can hang <input type="number" min="0" step="any" value="" required id="init-weight-edge"> total weight on a <input type="number" min="0" step="any" value="" required id="init-edge-edge"> mm edge, on what size edge (mm) can I hang
<input type="number" min="0" step="any" value="" required id="target-weight-edge"> total weight?</h3>
</form>
<div class="table-container">
<table id="edge-results">
<thead>
<tr><th scope="col">Average</th><th scope="col" colspan="2" style="border-left:solid #fff;">Half crimp</th><th scope="col" colspan="2" style="border-left:solid #fff;">Full crimp</th><th scope="col" colspan="2" style="border-left:solid #fff;">Slope</th></tr>
</thead>
<tbody>
<tr><td id="avg-edge-results">-</td><td id="half-crimp-edge-results-1" style="border-left:solid #fff; border-right:thin solid #fff;">-</td><td id="half-crimp-edge-results-2">-</td><td id="full-crimp-edge-results-1" style="border-left:solid #fff; border-right:thin solid #fff;">-</td><td id="full-crimp-edge-results-2">-</td><td id="slope-edge-results-1" style="border-left:solid #fff; border-right:thin solid #fff;">-</td><td id="slope-edge-results-2">-</td></tr>
</tbody>
</table>
</div>
<form id="solve-for-max" autocomplete="off">
<h3>If I can hang <input type="number" min="0" step="any" value="" required id="init-weight-max"> total weight on a <input type="number" min="0" step="any" value="" required id="init-edge-max"> mm edge, what is the maximum total weight I can hang, and on what edge size?</h3>
</form>
<div class="table-container">
<table id="max-results">
<thead><tr><th scope="col"></th><th scope="col" style="border-left:solid #fff;">Average</th><th scope="col" style="border-left:solid #fff;">Half crimp</th><th scope="col" style="border-left:solid #fff;">Full crimp</th><th scope="col" style="border-left:solid #fff;">Slope</th></tr>
</thead>
<tbody>
<tr><th scope="row" style="border-bottom:none;">Weight</th><td id="avg-max-results" style="border-left:solid #fff;">-</td><td id="half-crimp-max-results-1" style="border-left:solid #fff;">-</td><td id="full-crimp-max-results-1" style="border-left:solid #fff;">-</td><td id="slope-max-results-1" style="border-left:solid #fff;">-</td></tr></tr><tr><th scope="row" style="border-bottom:none; border-top:thin solid #fff;">Edge (mm)</th><td style="border-left:solid #fff; border-top:thin solid #fff;">32.8</td><td style="border-left:solid #fff; border-top:thin solid #fff;">32.6</td><td style="border-left:solid #fff; border-top:thin solid #fff;">26.2</td><td style="border-left:solid #fff; border-top:thin solid #fff;">39.5</td></tr>
</tbody>
</table>
</div>
<form id="solve-for-smallest" autocomplete="off">
<h3>If I can hang with <input type="number" min="0" step="any" value="" required id="init-weight-smallest"> weight added to <input type="number" min="0" step="any" value="" required id="bodyweight-smallest"> bodyweight on a <input type="number" min="0" step="any" value="" required id="init-edge-smallest"> mm edge, what is the smallest/largest edge I can hang at just bodyweight?</h3>
</form>
<div class="table-container">
<table id="smallest-results">
<thead>
<tr><th scope="col">Average</th><th scope="col" colspan="2" style="border-left:solid #fff;">Half crimp</th><th scope="col" colspan="2" style="border-left:solid #fff;">Full crimp</th><th scope="col" colspan="2" style="border-left:solid #fff;">Slope</th></tr>
</thead>
<tbody>
<tr><td id="avg-smallest-results">-</td><td id="half-crimp-smallest-results-1" style="border-left:solid #fff; border-right:thin solid #fff;">-</td><td id="half-crimp-smallest-results-2">-</td><td id="full-crimp-smallest-results-1" style="border-left:solid #fff; border-right:thin solid #fff;">-</td><td id="full-crimp-smallest-results-2">-</td><td id="slope-smallest-results-1" style="border-left:solid #fff; border-right:thin solid #fff;">-</td><td id="slope-smallest-results-2">-</td></tr>
</tbody>
</table>
</div>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script type="text/javascript" src="math.min.js"></script>
<script type="text/javascript" src="formulas.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>