-
Notifications
You must be signed in to change notification settings - Fork 0
/
stereocalculatorv17.html
131 lines (108 loc) · 5.48 KB
/
stereocalculatorv17.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
<!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);
// Determine colors based on conditions
const thetaColor = Math.abs(theta) > 1.5 ? 'red' : 'black';
const disparityPercentColor = disparityPercent > 3 ? 'red' : (disparityPercent > 2 ? 'orange' : 'black');
const disparityCmColor = disparityCm > eyeSeparation && disparityPercentColor === 'red' ? 'red' : (disparityCm > eyeSeparation ? 'orange' : 'black');
const disparityFractionColor = disparityFraction < 20 ? 'orange' : 'black';
// Display the results with color coding
document.getElementById('result').innerHTML = `
<span style="color:${disparityCmColor}">Disparity on Screen: ${disparityCm.toFixed(2)} cm</span><br>
<span style="color:${disparityPercentColor}">Disparity Percentage: ${disparityPercent.toFixed(2)}%</span><br>
<span style="color:${disparityFractionColor}">Disparity as a Fraction: 1/${disparityFraction.toFixed(2)}</span><br>
<span style="color:${thetaColor}">Parallax Angle (theta): ${theta.toFixed(2)} degrees</span>
`;
}
// Initial calculation
calculateDisparity();
</script>
</body>
</html>