-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstereocalculatorv15.html
125 lines (103 loc) · 4.81 KB
/
stereocalculatorv15.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stereoscopic Photography Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.slider-container {
margin-bottom: 20px;
}
.slider-container label {
display: block;
margin-bottom: 5px;
}
.slider-container input {
width: 100%;
}
.result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Stereoscopic Photography Calculator</h1>
<div class="slider-container">
<label for="ia">Interaxial Base (IA) in cm: <span id="iaValue">19</span></label>
<input type="range" id="ia" min="1" max="100" value="19" step="0.1" oninput="calculateDisparity()">
</div>
<div class="slider-container">
<label for="distance">Distance to Subject in meters: <span id="distanceValue">3</span></label>
<input type="range" id="distance" min="0.0001" max="2" value="0.477" step="0.0001" oninput="calculateDisparity()">
</div>
<div class="slider-container">
<label for="farDistance">Far Distance in meters: <span id="farDistanceValue">10</span></label>
<input type="range" id="farDistance" min="0.001" max="3" value="1" step="0.0001" oninput="calculateDisparity()">
</div>
<div class="slider-container">
<label for="lens">Lens Focal Length in mm: <span id="lensValue">50</span></label>
<input type="range" id="lens" min="10" max="800" value="50" step="1" oninput="calculateDisparity()">
</div>
<div class="slider-container">
<label for="tvSize">TV Screen Size in inches: <span id="tvSizeValue">52</span></label>
<input type="range" id="tvSize" min="10" max="100" value="52" step="1" oninput="calculateDisparity()">
</div>
<div class="slider-container">
<label for="eyeSeparation">Eye Separation in cm: <span id="eyeSeparationValue">6.4</span></label>
<input type="range" id="eyeSeparation" min="5.5" max="7.3" value="6.4" step="0.1" oninput="calculateDisparity()">
</div>
<div class="result" id="result"></div>
<script>
function calculateDisparity() {
// Get input values
const ia = parseFloat(document.getElementById('ia').value);
const distanceLog = parseFloat(document.getElementById('distance').value);
const farDistanceLog = parseFloat(document.getElementById('farDistance').value);
const lens = parseFloat(document.getElementById('lens').value);
const tvSize = parseFloat(document.getElementById('tvSize').value);
const eyeSeparation = parseFloat(document.getElementById('eyeSeparation').value);
// Convert logarithmic values back to linear scale
const distance = Math.pow(10, distanceLog);
const farDistance = Math.pow(10, farDistanceLog);
// Update displayed values
document.getElementById('iaValue').innerText = ia;
document.getElementById('distanceValue').innerText = distance.toFixed(2);
document.getElementById('farDistanceValue').innerText = farDistance.toFixed(2);
document.getElementById('lensValue').innerText = lens;
document.getElementById('tvSizeValue').innerText = tvSize;
document.getElementById('eyeSeparationValue').innerText = eyeSeparation;
// Convert TV size to cm
const diagonal = tvSize * 2.54;
const screenWidth = Math.sqrt(16 * 16 / (16 * 16 + 9 * 9)) * diagonal;
// Calculate disparity
const disparity = (ia * (farDistance - distance)) / (farDistance * distance);
// Calculate magnification factor based on focal length
const magnification = lens / 36; // assuming a full-frame sensor with a width of 36 mm
// Calculate the disparity in cm on the screen
const disparityCm = disparity * magnification * screenWidth / 100;
// Calculate disparity percentage
const disparityPercent = (disparityCm / screenWidth) * 100;
// Calculate disparity as a fraction
const disparityFraction = 100 / disparityPercent;
// Calculate the distance from the eye to the projection plane
const eyeToProjectionDistance = 1.5 * diagonal;
// Calculate parallax angle (theta)
const theta = 2 * Math.atan((disparityCm / 2) / eyeToProjectionDistance) * (180 / Math.PI);
// Display the results
document.getElementById('result').innerHTML = `
Disparity on Screen: ${disparityCm.toFixed(2)} cm<br>
Disparity Percentage: ${disparityPercent.toFixed(2)}%<br>
Disparity as a Fraction: 1/${disparityFraction.toFixed(2)}<br>
Parallax Angle (theta): ${theta.toFixed(2)} degrees
`;
}
// Initial calculation
calculateDisparity();
</script>
</body>
</html>