···

       
20
       
20
       
 
       
                <input type="number" id="objectDist" value="30" min="1" />

     

       
21
       
21
       
 
       
            </div>

     

       
22
       
22
       
 
       
        </div>

     

       
23
       
23
       
-
       
        <div>

     

       
24
       
24
       
-
       
            <label>Zoom:</label>

     

       
25
       
25
       
-
       
            <input

     

       
26
       
26
       
-
       
                type="range"

     

       
27
       
27
       
-
       
                id="zoom"

     

       
28
       
28
       
-
       
                min="0.01"

     

       
29
       
29
       
-
       
                max="8"

     

       
30
       
30
       
-
       
                step="0.01"

     

       
31
       
31
       
-
       
                value="1"

     

       
32
       
32
       
-
       
                style="width: 100%"

     

       
33
       
33
       
-
       
            />

     

       
23
       
23
       
+
       
        <div style="display: flex; gap: 20px; align-items: center; width: 100%">

     

       
24
       
24
       
+
       
            <div>

     

       
25
       
25
       
+
       
                <label>Object Height:</label>

     

       
26
       
26
       
+
       
                <input

     

       
27
       
27
       
+
       
                    type="number"

     

       
28
       
28
       
+
       
                    id="objectHeight"

     

       
29
       
29
       
+
       
                    value="20"

     

       
30
       
30
       
+
       
                    min="0.1"

     

       
31
       
31
       
+
       
                    step="0.1"

     

       
32
       
32
       
+
       
                />

     

       
33
       
33
       
+
       
            </div>

     

       
34
       
34
       
+
       
            <div style="flex: 1">

     

       
35
       
35
       
+
       
                <label>Zoom:</label>

     

       
36
       
36
       
+
       
                <input

     

       
37
       
37
       
+
       
                    type="range"

     

       
38
       
38
       
+
       
                    id="zoom"

     

       
39
       
39
       
+
       
                    min="0.01"

     

       
40
       
40
       
+
       
                    max="8"

     

       
41
       
41
       
+
       
                    step="0.01"

     

       
42
       
42
       
+
       
                    value="1"

     

       
43
       
43
       
+
       
                    style="width: 100%"

     

       
44
       
44
       
+
       
                />

     

       
45
       
45
       
+
       
            </div>

     

       
34
       
46
       
 
       
        </div>

     

       
35
       
47
       
 
       
    </div>

     

       
36
       
48
       
 
       
    <canvas id="canvas" style="flex: 1; cursor: move"></canvas>

     
···

       
58
       
70
       
 
       
    const mirrorType = document.getElementById("mirrorType");

     

       
59
       
71
       
 
       
    const radiusInput = document.getElementById("radius");

     

       
60
       
72
       
 
       
    const objectDistInput = document.getElementById("objectDist");

     

       
73
       
73
       
+
       
    const objectHeightInput = document.getElementById("objectHeight");

     

       
61
       
74
       
 
       
    const zoomInput = document.getElementById("zoom");

     

       
75
       
75
       
+
       


     

       
76
       
76
       
+
       
    objectHeightInput.value = Math.round(radiusInput.value / 3);

     

       
62
       
77
       
 
       


     

       
63
       
78
       
 
       
    let offsetX = 0;

     

       
64
       
79
       
 
       
    let offsetY = 0;

     
···

       
244
       
259
       
 
       
    function drawRays(isConcave, R, objDist) {

     

       
245
       
260
       
 
       
        const scale = (canvas.width / (R * 6)) * parseFloat(zoomInput.value);

     

       
246
       
261
       
 
       
        const F = R / 2;

     

       
247
       
247
       
-
       
        const h = (R * scale) / 3;

     

       
262
       
262
       
+
       
        const h = parseFloat(objectHeightInput.value) * scale;

     

       
248
       
263
       
 
       
        const centerX = canvas.width / 2 + R * scale + offsetX;

     

       
249
       
264
       
 
       
        const centerY = canvas.height / 2 + offsetY;

     

       
250
       
265
       
 
       
        const objX =

     
···

       
571
       
586
       
 
       
    mirrorType.addEventListener("change", update);

     

       
572
       
587
       
 
       
    radiusInput.addEventListener("input", update);

     

       
573
       
588
       
 
       
    objectDistInput.addEventListener("input", update);

     

       
589
       
589
       
+
       
    objectHeightInput.addEventListener("input", update);

     

       
574
       
590
       
 
       
    zoomInput.addEventListener("input", update);

     

       
575
       
591
       
 
       
    window.addEventListener("resize", update);

     

       
576
       
592