the home site for me: also iteration 3 or 4 of my site
feat: better autoscaling
+26
-5
+26
-5
templates/shortcodes/lensDiagram.html
+26
-5
templates/shortcodes/lensDiagram.html
···
13
13
</div>
14
14
<div>
15
15
<label>Radius of Curvature:</label>
16
-
<input type="number" id="radius" value="20" min="1" />
16
+
<input
17
+
type="number"
18
+
id="radius"
19
+
value="20"
20
+
min="0.2"
21
+
step="0.2"
22
+
/>
17
23
</div>
18
24
<div>
19
25
<label>Object Distance:</label>
20
-
<input type="number" id="objectDist" value="30" min="1" />
26
+
<input
27
+
type="number"
28
+
id="objectDist"
29
+
value="30"
30
+
min="0.2"
31
+
step="0.2"
32
+
/>
21
33
</div>
22
34
</div>
23
35
<div style="display: flex; gap: 20px; align-items: center; width: 100%">
···
72
84
const objectDistInput = document.getElementById("objectDist");
73
85
const objectHeightInput = document.getElementById("objectHeight");
74
86
const zoomInput = document.getElementById("zoom");
75
-
76
-
objectHeightInput.value = Math.round(radiusInput.value / 3);
77
87
78
88
let offsetX = 0;
79
89
let offsetY = 0;
···
583
593
drawRays(isConcave, R, objDist);
584
594
}
585
595
596
+
function resetHeight() {
597
+
objectHeightInput.value = Math.max(
598
+
parseFloat(((radiusInput.value * 2) / 3).toFixed(2)),
599
+
0.1,
600
+
);
601
+
}
602
+
586
603
mirrorType.addEventListener("change", update);
587
-
radiusInput.addEventListener("input", update);
604
+
radiusInput.addEventListener("input", () => {
605
+
resetHeight();
606
+
update();
607
+
});
588
608
objectDistInput.addEventListener("input", update);
589
609
objectHeightInput.addEventListener("input", update);
590
610
zoomInput.addEventListener("input", update);
591
611
window.addEventListener("resize", update);
592
612
613
+
resetHeight();
593
614
update();
594
615
595
616
let isCanvasHovered = false;