···

       
13
       
 
       
            </div>

     

       
14
       
 
       
            <div>

     

       
15
       
 
       
                <label>Radius of Curvature:</label>

     

       
16
       
-
       
                <input type="number" id="radius" value="20" min="1" />

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
17
       
 
       
            </div>

     

       
18
       
 
       
            <div>

     

       
19
       
 
       
                <label>Object Distance:</label>

     

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

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
21
       
 
       
            </div>

     

       
22
       
 
       
        </div>

     

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

     
···

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

     

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

     

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

     

       
75
       
-
       


     

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

     

       
77
       
 
       


     

       
78
       
 
       
    let offsetX = 0;

     

       
79
       
 
       
    let offsetY = 0;

     
···

       
583
       
 
       
        drawRays(isConcave, R, objDist);

     

       
584
       
 
       
    }

     

       
585
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

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

     

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

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

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

     

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

     

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

     

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

     

       
592
       
 
       


     

       
0
       
 
       

     

       
593
       
 
       
    update();

     

       
594
       
 
       


     

       
595
       
 
       
    let isCanvasHovered = false;

     

···

       
13
       
 
       
            </div>

     

       
14
       
 
       
            <div>

     

       
15
       
 
       
                <label>Radius of Curvature:</label>

     

       
16
       
+
       
                <input

     

       
17
       
+
       
                    type="number"

     

       
18
       
+
       
                    id="radius"

     

       
19
       
+
       
                    value="20"

     

       
20
       
+
       
                    min="0.2"

     

       
21
       
+
       
                    step="0.2"

     

       
22
       
+
       
                />

     

       
23
       
 
       
            </div>

     

       
24
       
 
       
            <div>

     

       
25
       
 
       
                <label>Object Distance:</label>

     

       
26
       
+
       
                <input

     

       
27
       
+
       
                    type="number"

     

       
28
       
+
       
                    id="objectDist"

     

       
29
       
+
       
                    value="30"

     

       
30
       
+
       
                    min="0.2"

     

       
31
       
+
       
                    step="0.2"

     

       
32
       
+
       
                />

     

       
33
       
 
       
            </div>

     

       
34
       
 
       
        </div>

     

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

     
···

       
84
       
 
       
    const objectDistInput = document.getElementById("objectDist");

     

       
85
       
 
       
    const objectHeightInput = document.getElementById("objectHeight");

     

       
86
       
 
       
    const zoomInput = document.getElementById("zoom");

     

       
0
       
 
       

     

       
0
       
 
       

     

       
87
       
 
       


     

       
88
       
 
       
    let offsetX = 0;

     

       
89
       
 
       
    let offsetY = 0;

     
···

       
593
       
 
       
        drawRays(isConcave, R, objDist);

     

       
594
       
 
       
    }

     

       
595
       
 
       


     

       
596
       
+
       
    function resetHeight() {

     

       
597
       
+
       
        objectHeightInput.value = Math.max(

     

       
598
       
+
       
            parseFloat(((radiusInput.value * 2) / 3).toFixed(2)),

     

       
599
       
+
       
            0.1,

     

       
600
       
+
       
        );

     

       
601
       
+
       
    }

     

       
602
       
+
       


     

       
603
       
 
       
    mirrorType.addEventListener("change", update);

     

       
604
       
+
       
    radiusInput.addEventListener("input", () => {

     

       
605
       
+
       
        resetHeight();

     

       
606
       
+
       
        update();

     

       
607
       
+
       
    });

     

       
608
       
 
       
    objectDistInput.addEventListener("input", update);

     

       
609
       
 
       
    objectHeightInput.addEventListener("input", update);

     

       
610
       
 
       
    zoomInput.addEventListener("input", update);

     

       
611
       
 
       
    window.addEventListener("resize", update);

     

       
612
       
 
       


     

       
613
       
+
       
    resetHeight();

     

       
614
       
 
       
    update();

     

       
615
       
 
       


     

       
616
       
 
       
    let isCanvasHovered = false;