···

       
17
       
17
       
 
       


     

       
18
       
18
       
 
       
## the tool (🥁 roll please)

     

       
19
       
19
       
 
       


     

       
20
       
20
       
+
       
> this tool does support keyboard navigation btw ^-^  

     

       
21
       
21
       
+
       
> `arrow keys` to move and `+` and `-` to zoom

     

       
22
       
22
       
+
       


     

       
20
       
23
       
 
       
{{ lensDiagram() }}

     

       
21
       
24
       
 
       


     

       
22
       
25
       
 
       
## the math

     

···

       
1
       
1
       
 
       
<div

     

       
2
       
2
       
 
       
    id="rayTracer"

     

       
3
       
3
       
-
       
    style="display: flex; flex-direction: column; min-height: 30rem"

     

       
3
       
3
       
+
       
    style="display: flex; flex-direction: column; min-height: 40rem"

     

       
4
       
4
       
 
       
>

     

       
5
       
5
       
 
       
    <div class="controls" style="display: flex; flex-direction: column">

     

       
6
       
6
       
 
       
        <div style="display: flex; gap: 20px; align-items: center">