commit e514fe58a919a4cb371930ecb43927c4c6dfaafd · dunkirk.sh/zera

+146

content/blog/2025-02-26_spherical-ray-diagrams.md

···

       1
       1
       +
       +++

     

       2
       2
       +
       title = "Determining the properties of a spherical mirror with ray diagrams"

     

       3
       3
       +
       date = 2025-02-26

     

       4
       4
       +
       slug = "spherical-ray-diagrams"

     

       5
       5
       +
       description = "yes i made a tool to help with it :)"

     

       6
       6
       +
       

     

       7
       7
       +
       [taxonomies]

     

       8
       8
       +
       tags = ["tool", "fancy", "physics"]

     

       9
       9
       +
       

     

       10
       10
       +
       [extra]

     

       11
       11
       +
       has_toc = true

     

       12
       12
       +
       +++

     

       13
       13
       +
       

     

       14
       14
       +
       I was recently working through the Geometric Optics section of my physics textbook and was having trouble drawing all the ray diagrams (my wrist is still in a cast though that should come off in a few weeks) so I decided to try and make a tool to make them for me instead! I rather expected this to be a fairly simple process but instead it ended up being one of the most math intensive, most difficult — and also most rewarding — projects I've made recently!

     

       15
       15
       +
       

     

       16
       16
       +
       <!-- more -->

     

       17
       17
       +
       

     

       18
       18
       +
       ## the tool (🥁 roll please)

     

       19
       19
       +
       

     

       20
       20
       +
       {{ lensDiagram() }}

     

       21
       21
       +
       

     

       22
       22
       +
       ## the math

     

       23
       23
       +
       

     

       24
       24
       +
       I was able to make it a bit simpler by restricting the domain of this tool to spherical mirrors (the only type used in this Module of my physics textbook) but I did tackle both concave and convex mirrors. It generates 3 rays: a horizontal ray, a ray through the focal point, and a ray through the radius of curvature. The first and last are quite easy to generate but the third was a bit more difficult. I ended up using a formula that I don't quite understand to get the point on the mirror where the ray intersects but it does work so 🤷.

     

       25
       25
       +
       

     

       26
       26
       +
       The horizontal ray was dead simple. Draw a line from the top of the arrow to the edge of the mirror and then draw another line from focal point through the intersection point in the mirror. The part of that ray that is behind the mirror is simply the extension of the ray for virtual images but the part in front of the mirror is the actual path of the ray.

     

       27
       27
       +
       

     

       28
       28
       +
       ```javascript

     

       29
       29
       +
       // Draw the horizontal ray

     

       30
       30
       +
       ctx.strokeStyle = "green";

     

       31
       31
       +
       ctx.beginPath();

     

       32
       32
       +
       ctx.lineTo(objX, objY - h);

     

       33
       33
       +
       let intersectionX =

     

       34
       34
       +
           Math.sqrt((R * scale) ** 2 - h ** 2) + circleCenterX;

     

       35
       35
       +
       ctx.lineTo(intersectionX, objY - h);

     

       36
       36
       +
       extendRayToCanvasEdge(

     

       37
       37
       +
           intersectionX,

     

       38
       38
       +
           objY - h,

     

       39
       39
       +
           centerX - F * scale,

     

       40
       40
       +
           centerY,

     

       41
       41
       +
       );

     

       42
       42
       +
       ctx.stroke();

     

       43
       43
       +
       ```

     

       44
       44
       +
       

     

       45
       45
       +
       The ray through the radius of curvature was also fairly simple but alot more fun to figure out the math for. Since we know that there is a right angle triange between the arrow, center line, and the radius we can use the pythagorean theorem to find the missing side of the intersection height and then we can use the ratio of the radius to the arrow base to find the proper x offset.

     

       46
       46
       +
       

     

       47
       47
       +
       ```javascript

     

       48
       48
       +
       // Draw the ray through the radius of curvature

     

       49
       49
       +
       ctx.strokeStyle = "orange";

     

       50
       50
       +
       ctx.beginPath();

     

       51
       51
       +
       ctx.lineTo(objX, objY - h);

     

       52
       52
       +
       ctx.lineTo(circleCenterX, centerY);

     

       53
       53
       +
       const extendedRay3 = findCircleIntersection(

     

       54
       54
       +
           R * scale,

     

       55
       55
       +
           objX,

     

       56
       56
       +
           h,

     

       57
       57
       +
           circleCenterX,

     

       58
       58
       +
           centerY,

     

       59
       59
       +
           circleCenterX,

     

       60
       60
       +
           centerY,

     

       61
       61
       +
       );

     

       62
       62
       +
       ctx.lineTo(extendedRay3[0].x, extendedRay3[0].y);

     

       63
       63
       +
       extendRayToCanvasEdge(

     

       64
       64
       +
           extendedRay3[0].x,

     

       65
       65
       +
           extendedRay3[0].y,

     

       66
       66
       +
           centerX - R * scale,

     

       67
       67
       +
           centerY,

     

       68
       68
       +
       );

     

       69
       69
       +
       ctx.stroke();

     

       70
       70
       +
       ```

     

       71
       71
       +
       

     

       72
       72
       +
       The last ray, the one through the focal point, was the most difficult to figure out. I had to do quite a bit of geometry to find where this ray intersects the mirror. To find this intersection point I used a method that finds where a line intersects with a circle by solving a quadratic equation. This was necessary because the mirror is actually just part of a circle, and by finding where the ray intersects with that circle I can then determine if that intersection point is actually on the mirror's surface.

     

       73
       73
       +
       

     

       74
       74
       +
       ```javascript

     

       75
       75
       +
       // Draw the ray through the focal point

     

       76
       76
       +
       ctx.strokeStyle = "purple";

     

       77
       77
       +
       ctx.beginPath();

     

       78
       78
       +
       ctx.lineTo(objX, objY - h);

     

       79
       79
       +
       ctx.lineTo(centerX - F * scale, centerY);

     

       80
       80
       +
       const extendedRay2 = findCircleIntersection(

     

       81
       81
       +
           R * scale,

     

       82
       82
       +
           objX,

     

       83
       83
       +
           h,

     

       84
       84
       +
           centerX - F * scale,

     

       85
       85
       +
           centerY,

     

       86
       86
       +
           circleCenterX,

     

       87
       87
       +
           centerY,

     

       88
       88
       +
       );

     

       89
       89
       +
       ctx.lineTo(extendedRay2[0].x, extendedRay2[0].y);

     

       90
       90
       +
       ctx.lineTo(0, extendedRay2[0].y);

     

       91
       91
       +
       ctx.stroke();

     

       92
       92
       +
       ```

     

       93
       93
       +
       

     

       94
       94
       +
       The method works by taking the equation of the line between our arrow tip and focal point (y = mx + b) and the equation of our mirror's circle ((x-h)² + (y-k)² = r²) and substituting one into the other. This gives us a quadratic equation that we can solve to find the x coordinates of the intersection points. Once we have these x values, we can plug them back into our line equation to get the y coordinates.

     

       95
       95
       +
       

     

       96
       96
       +
       Then we just need to check which of these intersection points is actually on the mirror's surface (since a line can intersect a circle in up to two points) and use that for our ray. From there, we can draw the reflected ray just like with the other two methods.

     

       97
       97
       +
       

     

       98
       98
       +
       I will freely admit that I made heavy use of gpt-4o to figure out the inital equations as thats a bit beyond the current scope of my knowledge. The rest of the ray logic was too complex for gemini or claude to figure out so that bit was all me 😎

     

       99
       99
       +
       

     

       100
       100
       +
       ```javascript

     

       101
       101
       +
       // fancy complex scary math 👻

     

       102
       102
       +
       function findCircleIntersection(radius, x1, h, x3, y3, centerX, centerY) {

     

       103
       103
       +
           // Check if the input values are valid

     

       104
       104
       +
           if (radius <= 0) {

     

       105
       105
       +
               throw new Error("Invalid input values.");

     

       106
       106
       +
           }

     

       107
       107
       +
       

     

       108
       108
       +
           // Calculate the slope of the line from (x1, h) to (x3, y3)

     

       109
       109
       +
           const m = (y3 - (centerY - h)) / (x3 - x1);

     

       110
       110
       +
       

     

       111
       111
       +
           // Define the line equation: y = h + m * (x - x1)

     

       112
       112
       +
           // Substitute into circle equation: (x-centerX)^2 + (y-centerY)^2 = radius^2

     

       113
       113
       +
           // y = h + m * (x - x1)

     

       114
       114
       +
           // (x-centerX)^2 + (h + m*(x-x1) - centerY)^2 = radius^2

     

       115
       115
       +
       

     

       116
       116
       +
           // Coefficients for the quadratic equation

     

       117
       117
       +
           const a = 1 + m * m;

     

       118
       118
       +
           const b = -2 * centerX + 2 * m * (centerY - h - centerY - m * x1);

     

       119
       119
       +
           const c =

     

       120
       120
       +
               centerX * centerX +

     

       121
       121
       +
               (centerY - h - centerY - m * x1) *

     

       122
       122
       +
                   (centerY - h - centerY - m * x1) -

     

       123
       123
       +
               radius * radius;

     

       124
       124
       +
       

     

       125
       125
       +
           // Calculate the discriminant

     

       126
       126
       +
           const discriminant = b * b - 4 * a * c;

     

       127
       127
       +
       

     

       128
       128
       +
           if (discriminant < 0) {

     

       129
       129
       +
               throw new Error("No intersection found.");

     

       130
       130
       +
           }

     

       131
       131
       +
       

     

       132
       132
       +
           // Calculate the two possible x values

     

       133
       133
       +
           const xIntersect1 = (-b + Math.sqrt(discriminant)) / (2 * a);

     

       134
       134
       +
           const xIntersect2 = (-b - Math.sqrt(discriminant)) / (2 * a);

     

       135
       135
       +
       

     

       136
       136
       +
           // Calculate the corresponding y values

     

       137
       137
       +
           const yIntersect1 = centerY - h + m * (xIntersect1 - x1);

     

       138
       138
       +
           const yIntersect2 = centerY - h + m * (xIntersect2 - x1);

     

       139
       139
       +
       

     

       140
       140
       +
           // Return the intersection points

     

       141
       141
       +
           return [

     

       142
       142
       +
               { x: xIntersect1, y: yIntersect1 },

     

       143
       143
       +
               { x: xIntersect2, y: yIntersect2 },

     

       144
       144
       +
           ];

     

       145
       145
       +
       }

     

       146
       146
       +
       ```

static/blog/spherical-ray-diagrams/og.png

This is a binary file and will not be displayed.

static/tags/fancy/og.png

This is a binary file and will not be displayed.

static/tags/physics/og.png

This is a binary file and will not be displayed.

static/tags/tool/og.png

This is a binary file and will not be displayed.

+618

templates/shortcodes/lensDiagram.html

···

       1
       1
       +
       <div

     

       2
       2
       +
           id="rayTracer"

     

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

     

       4
       4
       +
       >

     

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

     

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

     

       7
       7
       +
                   <div>

     

       8
       8
       +
                       <label>Mirror Type:</label>

     

       9
       9
       +
                       <select id="mirrorType">

     

       10
       10
       +
                           <option value="concave">Concave Mirror</option>

     

       11
       11
       +
                           <option value="convex">Convex Mirror</option>

     

       12
       12
       +
                       </select>

     

       13
       13
       +
                   </div>

     

       14
       14
       +
                   <div>

     

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

     

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

     

       17
       17
       +
                   </div>

     

       18
       18
       +
                   <div>

     

       19
       19
       +
                       <label>Object Distance:</label>

     

       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
       +
                   />

     

       34
       34
       +
               </div>

     

       35
       35
       +
           </div>

     

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

     

       37
       37
       +
       </div>

     

       38
       38
       +
       

     

       39
       39
       +
       <style>

     

       40
       40
       +
           #rayTracer {

     

       41
       41
       +
               padding: 20px;

     

       42
       42
       +
           }

     

       43
       43
       +
           .controls {

     

       44
       44
       +
               margin-bottom: 20px;

     

       45
       45
       +
           }

     

       46
       46
       +
           .controls div {

     

       47
       47
       +
               margin: 0.2rem 0;

     

       48
       48
       +
           }

     

       49
       49
       +
           #canvas {

     

       50
       50
       +
               border: 1px solid #ccc;

     

       51
       51
       +
               width: 100%;

     

       52
       52
       +
           }

     

       53
       53
       +
       </style>

     

       54
       54
       +
       

     

       55
       55
       +
       <script>

     

       56
       56
       +
           const canvas = document.getElementById("canvas");

     

       57
       57
       +
           const ctx = canvas.getContext("2d");

     

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

     

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

     

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

     

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

     

       62
       62
       +
       

     

       63
       63
       +
           let offsetX = 0;

     

       64
       64
       +
           let offsetY = 0;

     

       65
       65
       +
           let isDragging = false;

     

       66
       66
       +
           let lastX = 0;

     

       67
       67
       +
           let lastY = 0;

     

       68
       68
       +
       

     

       69
       69
       +
           canvas.addEventListener("mousedown", (e) => {

     

       70
       70
       +
               isDragging = true;

     

       71
       71
       +
               lastX = e.clientX;

     

       72
       72
       +
               lastY = e.clientY;

     

       73
       73
       +
           });

     

       74
       74
       +
       

     

       75
       75
       +
           canvas.addEventListener("mousemove", (e) => {

     

       76
       76
       +
               if (isDragging) {

     

       77
       77
       +
                   offsetX += e.clientX - lastX;

     

       78
       78
       +
                   offsetY += e.clientY - lastY;

     

       79
       79
       +
                   lastX = e.clientX;

     

       80
       80
       +
                   lastY = e.clientY;

     

       81
       81
       +
                   update();

     

       82
       82
       +
               }

     

       83
       83
       +
           });

     

       84
       84
       +
       

     

       85
       85
       +
           canvas.addEventListener("mouseup", () => {

     

       86
       86
       +
               isDragging = false;

     

       87
       87
       +
           });

     

       88
       88
       +
       

     

       89
       89
       +
           canvas.addEventListener("mouseleave", () => {

     

       90
       90
       +
               isDragging = false;

     

       91
       91
       +
           });

     

       92
       92
       +
       

     

       93
       93
       +
           canvas.addEventListener("wheel", (e) => {

     

       94
       94
       +
               e.preventDefault();

     

       95
       95
       +
               const zoomSpeed = 0.001;

     

       96
       96
       +
               const newZoom = parseFloat(zoomInput.value) - e.deltaY * zoomSpeed;

     

       97
       97
       +
               zoomInput.value = Math.min(Math.max(newZoom, 0.01), 8);

     

       98
       98
       +
               update();

     

       99
       99
       +
           });

     

       100
       100
       +
       

     

       101
       101
       +
           function calculateReflectedRay(

     

       102
       102
       +
               startX,

     

       103
       103
       +
               startY,

     

       104
       104
       +
               incidentX,

     

       105
       105
       +
               incidentY,

     

       106
       106
       +
               centerX,

     

       107
       107
       +
               centerY,

     

       108
       108
       +
               radius,

     

       109
       109
       +
           ) {

     

       110
       110
       +
               // Calculate normal vector at intersection point

     

       111
       111
       +
               const nx = (incidentX - centerX) / radius;

     

       112
       112
       +
               const ny = (incidentY - centerY) / radius;

     

       113
       113
       +
       

     

       114
       114
       +
               // Calculate incident vector

     

       115
       115
       +
               const ix = incidentX - startX;

     

       116
       116
       +
               const iy = incidentY - startY;

     

       117
       117
       +
               const iLen = Math.sqrt(ix * ix + iy * iy);

     

       118
       118
       +
               const dirX = ix / iLen;

     

       119
       119
       +
               const dirY = iy / iLen;

     

       120
       120
       +
       

     

       121
       121
       +
               // Calculate reflection using r = i - 2(i·n)n

     

       122
       122
       +
               const dot = dirX * nx + dirY * ny;

     

       123
       123
       +
               const reflectX = dirX - 2 * dot * nx;

     

       124
       124
       +
               const reflectY = dirY - 2 * dot * ny;

     

       125
       125
       +
       

     

       126
       126
       +
               // Extend reflected ray to edge of canvas

     

       127
       127
       +
               const t = Math.max(

     

       128
       128
       +
                   Math.abs((0 - incidentX) / reflectX),

     

       129
       129
       +
                   Math.abs((canvas.width - incidentX) / reflectX),

     

       130
       130
       +
                   Math.abs((0 - incidentY) / reflectY),

     

       131
       131
       +
                   Math.abs((canvas.height - incidentY) / reflectY),

     

       132
       132
       +
               );

     

       133
       133
       +
       

     

       134
       134
       +
               return {

     

       135
       135
       +
                   x: incidentX + reflectX * t,

     

       136
       136
       +
                   y: incidentY + reflectY * t,

     

       137
       137
       +
               };

     

       138
       138
       +
           }

     

       139
       139
       +
       

     

       140
       140
       +
           function drawMirror(isConcave, R) {

     

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

     

       142
       142
       +
               const centerX = canvas.width / 2 + R * scale * isConcave + offsetX;

     

       143
       143
       +
               const centerY = canvas.height / 2 + offsetY;

     

       144
       144
       +
       

     

       145
       145
       +
               ctx.beginPath();

     

       146
       146
       +
               ctx.strokeStyle = "black";

     

       147
       147
       +
               if (isConcave) {

     

       148
       148
       +
                   ctx.arc(

     

       149
       149
       +
                       centerX - R * scale,

     

       150
       150
       +
                       centerY,

     

       151
       151
       +
                       R * scale,

     

       152
       152
       +
                       -Math.PI / 3,

     

       153
       153
       +
                       Math.PI / 3,

     

       154
       154
       +
                   );

     

       155
       155
       +
               } else {

     

       156
       156
       +
                   ctx.arc(

     

       157
       157
       +
                       centerX + R * scale,

     

       158
       158
       +
                       centerY,

     

       159
       159
       +
                       R * scale,

     

       160
       160
       +
                       (2 * Math.PI) / 3,

     

       161
       161
       +
                       (4 * Math.PI) / 3,

     

       162
       162
       +
                   );

     

       163
       163
       +
               }

     

       164
       164
       +
               ctx.stroke();

     

       165
       165
       +
           }

     

       166
       166
       +
       

     

       167
       167
       +
           function drawArrow(x, y, height) {

     

       168
       168
       +
               const arrowHeadSize = height * 0.1; // Scale arrow head with height

     

       169
       169
       +
               ctx.lineWidth = 1;

     

       170
       170
       +
               ctx.beginPath();

     

       171
       171
       +
       

     

       172
       172
       +
               // Draw the main shaft

     

       173
       173
       +
               ctx.moveTo(x, y);

     

       174
       174
       +
               ctx.lineTo(x, y - height * 0.9);

     

       175
       175
       +
       

     

       176
       176
       +
               // Draw the arrow head

     

       177
       177
       +
               ctx.moveTo(x, y - height);

     

       178
       178
       +
               ctx.lineTo(x - arrowHeadSize, y - height + arrowHeadSize);

     

       179
       179
       +
               ctx.moveTo(x, y - height);

     

       180
       180
       +
               ctx.lineTo(x + arrowHeadSize, y - height + arrowHeadSize);

     

       181
       181
       +
               ctx.moveTo(x - arrowHeadSize, y - height + arrowHeadSize);

     

       182
       182
       +
               ctx.lineTo(x + arrowHeadSize, y - height + arrowHeadSize);

     

       183
       183
       +
       

     

       184
       184
       +
               ctx.stroke();

     

       185
       185
       +
           }

     

       186
       186
       +
       

     

       187
       187
       +
           function extendRayToCanvasEdge(x1, y1, x2, y2) {

     

       188
       188
       +
               const rayDirX = x2 - x1;

     

       189
       189
       +
               const rayDirY = y2 - y1;

     

       190
       190
       +
               const t = Math.max(

     

       191
       191
       +
                   Math.abs((0 - x2) / rayDirX),

     

       192
       192
       +
                   Math.abs((canvas.width - x2) / rayDirX),

     

       193
       193
       +
                   Math.abs((0 - y2) / rayDirY),

     

       194
       194
       +
                   Math.abs((canvas.height - y2) / rayDirY),

     

       195
       195
       +
               );

     

       196
       196
       +
               ctx.lineTo(x2 + rayDirX * t, y2 + rayDirY * t);

     

       197
       197
       +
           }

     

       198
       198
       +
       

     

       199
       199
       +
           function findCircleIntersection(radius, x1, h, x3, y3, centerX, centerY) {

     

       200
       200
       +
               // Check if the input values are valid

     

       201
       201
       +
               if (radius <= 0) {

     

       202
       202
       +
                   throw new Error("Invalid input values.");

     

       203
       203
       +
               }

     

       204
       204
       +
       

     

       205
       205
       +
               // Calculate the slope of the line from (x1, h) to (x3, y3)

     

       206
       206
       +
               const m = (y3 - (centerY - h)) / (x3 - x1);

     

       207
       207
       +
       

     

       208
       208
       +
               // Define the line equation: y = h + m * (x - x1)

     

       209
       209
       +
               // Substitute into circle equation: (x-centerX)^2 + (y-centerY)^2 = radius^2

     

       210
       210
       +
               // y = h + m * (x - x1)

     

       211
       211
       +
               // (x-centerX)^2 + (h + m*(x-x1) - centerY)^2 = radius^2

     

       212
       212
       +
       

     

       213
       213
       +
               // Coefficients for the quadratic equation

     

       214
       214
       +
               const a = 1 + m * m;

     

       215
       215
       +
               const b = -2 * centerX + 2 * m * (centerY - h - centerY - m * x1);

     

       216
       216
       +
               const c =

     

       217
       217
       +
                   centerX * centerX +

     

       218
       218
       +
                   (centerY - h - centerY - m * x1) *

     

       219
       219
       +
                       (centerY - h - centerY - m * x1) -

     

       220
       220
       +
                   radius * radius;

     

       221
       221
       +
       

     

       222
       222
       +
               // Calculate the discriminant

     

       223
       223
       +
               const discriminant = b * b - 4 * a * c;

     

       224
       224
       +
       

     

       225
       225
       +
               if (discriminant < 0) {

     

       226
       226
       +
                   throw new Error("No intersection found.");

     

       227
       227
       +
               }

     

       228
       228
       +
       

     

       229
       229
       +
               // Calculate the two possible x values

     

       230
       230
       +
               const xIntersect1 = (-b + Math.sqrt(discriminant)) / (2 * a);

     

       231
       231
       +
               const xIntersect2 = (-b - Math.sqrt(discriminant)) / (2 * a);

     

       232
       232
       +
       

     

       233
       233
       +
               // Calculate the corresponding y values

     

       234
       234
       +
               const yIntersect1 = centerY - h + m * (xIntersect1 - x1);

     

       235
       235
       +
               const yIntersect2 = centerY - h + m * (xIntersect2 - x1);

     

       236
       236
       +
       

     

       237
       237
       +
               // Return the intersection points

     

       238
       238
       +
               return [

     

       239
       239
       +
                   { x: xIntersect1, y: yIntersect1 },

     

       240
       240
       +
                   { x: xIntersect2, y: yIntersect2 },

     

       241
       241
       +
               ];

     

       242
       242
       +
           }

     

       243
       243
       +
       

     

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

     

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

     

       246
       246
       +
               const F = R / 2;

     

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

     

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

     

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

     

       250
       250
       +
               const objX =

     

       251
       251
       +
                   centerX +

     

       252
       252
       +
                   objDist * scale * (isConcave ? -1 : -1) -

     

       253
       253
       +
                   R * scale * !isConcave;

     

       254
       254
       +
               const objY = centerY;

     

       255
       255
       +
       

     

       256
       256
       +
               drawArrow(objX, objY, h);

     

       257
       257
       +
       

     

       258
       258
       +
               ctx.beginPath();

     

       259
       259
       +
               ctx.moveTo(0, centerY);

     

       260
       260
       +
               ctx.lineTo(canvas.width, centerY);

     

       261
       261
       +
               ctx.stroke();

     

       262
       262
       +
       

     

       263
       263
       +
               ctx.fillStyle = "red";

     

       264
       264
       +
               ctx.beginPath();

     

       265
       265
       +
               ctx.arc(centerX - F * scale, centerY, 3, 0, 2 * Math.PI);

     

       266
       266
       +
               ctx.fill();

     

       267
       267
       +
       

     

       268
       268
       +
               ctx.fillStyle = "blue";

     

       269
       269
       +
               ctx.beginPath();

     

       270
       270
       +
               ctx.arc(centerX - R * scale * isConcave, centerY, 3, 0, 2 * Math.PI);

     

       271
       271
       +
               ctx.fill();

     

       272
       272
       +
       

     

       273
       273
       +
               const circleCenterX = isConcave

     

       274
       274
       +
                   ? centerX - R * scale

     

       275
       275
       +
                   : centerX - R * scale;

     

       276
       276
       +
       

     

       277
       277
       +
               if (isConcave) {

     

       278
       278
       +
                   // ray that travels from the top of the object towards the mirror and then calculating the bounce angle it goes in that direction

     

       279
       279
       +
                   ctx.strokeStyle = "green";

     

       280
       280
       +
                   ctx.beginPath();

     

       281
       281
       +
                   ctx.lineTo(objX, objY - h);

     

       282
       282
       +
                   let intersectionX =

     

       283
       283
       +
                       Math.sqrt((R * scale) ** 2 - h ** 2) + circleCenterX;

     

       284
       284
       +
                   ctx.lineTo(intersectionX, objY - h);

     

       285
       285
       +
                   extendRayToCanvasEdge(

     

       286
       286
       +
                       intersectionX,

     

       287
       287
       +
                       objY - h,

     

       288
       288
       +
                       centerX - F * scale,

     

       289
       289
       +
                       centerY,

     

       290
       290
       +
                   );

     

       291
       291
       +
                   ctx.stroke();

     

       292
       292
       +
       

     

       293
       293
       +
                   // draw an extension of the ray through the mirror in a slightly opacified color

     

       294
       294
       +
                   ctx.strokeStyle = "rgba(0, 128, 0, 0.5)";

     

       295
       295
       +
                   ctx.beginPath();

     

       296
       296
       +
                   ctx.lineTo(intersectionX, objY - h);

     

       297
       297
       +
                   extendRayToCanvasEdge(

     

       298
       298
       +
                       centerX - F * scale,

     

       299
       299
       +
                       centerY,

     

       300
       300
       +
                       intersectionX,

     

       301
       301
       +
                       objY - h,

     

       302
       302
       +
                   );

     

       303
       303
       +
                   ctx.stroke();

     

       304
       304
       +
       

     

       305
       305
       +
                   // draw a point at the intersection of the ray and the mirror

     

       306
       306
       +
                   ctx.fillStyle = "black";

     

       307
       307
       +
                   ctx.beginPath();

     

       308
       308
       +
                   ctx.arc(intersectionX, objY - h, 3, 0, 2 * Math.PI);

     

       309
       309
       +
                   ctx.fill();

     

       310
       310
       +
       

     

       311
       311
       +
                   // draw a ray that travels from the top of the object towards the focal point of the mirror and through the focal point till it reaches the mirror

     

       312
       312
       +
                   ctx.strokeStyle = "purple";

     

       313
       313
       +
                   ctx.beginPath();

     

       314
       314
       +
                   ctx.lineTo(objX, objY - h);

     

       315
       315
       +
                   ctx.lineTo(centerX - F * scale, centerY);

     

       316
       316
       +
                   const extendedRay2 = findCircleIntersection(

     

       317
       317
       +
                       R * scale,

     

       318
       318
       +
                       objX,

     

       319
       319
       +
                       h,

     

       320
       320
       +
                       centerX - F * scale,

     

       321
       321
       +
                       centerY,

     

       322
       322
       +
                       circleCenterX,

     

       323
       323
       +
                       centerY,

     

       324
       324
       +
                   );

     

       325
       325
       +
                   ctx.lineTo(extendedRay2[0].x, extendedRay2[0].y);

     

       326
       326
       +
                   ctx.lineTo(0, extendedRay2[0].y);

     

       327
       327
       +
                   ctx.stroke();

     

       328
       328
       +
       

     

       329
       329
       +
                   // draw an extension of the ray through the mirror in a slightly opacified color

     

       330
       330
       +
                   ctx.strokeStyle = "rgba(128, 0, 128, 0.5)";

     

       331
       331
       +
                   ctx.beginPath();

     

       332
       332
       +
                   ctx.lineTo(extendedRay2[0].x, extendedRay2[0].y);

     

       333
       333
       +
                   ctx.lineTo(canvas.width, extendedRay2[0].y);

     

       334
       334
       +
                   ctx.stroke();

     

       335
       335
       +
       

     

       336
       336
       +
                   // draw a point at the intersection of the ray and the mirror

     

       337
       337
       +
                   ctx.fillStyle = "black";

     

       338
       338
       +
                   ctx.beginPath();

     

       339
       339
       +
                   ctx.arc(extendedRay2[0].x, extendedRay2[0].y, 3, 0, 2 * Math.PI);

     

       340
       340
       +
                   ctx.fill();

     

       341
       341
       +
       

     

       342
       342
       +
                   // draw a ray that travels from the top of the object through the radius of curvature of the mirror

     

       343
       343
       +
                   ctx.strokeStyle = "orange";

     

       344
       344
       +
                   ctx.beginPath();

     

       345
       345
       +
                   ctx.lineTo(objX, objY - h);

     

       346
       346
       +
                   ctx.lineTo(circleCenterX, centerY);

     

       347
       347
       +
                   const extendedRay3 = findCircleIntersection(

     

       348
       348
       +
                       R * scale,

     

       349
       349
       +
                       objX,

     

       350
       350
       +
                       h,

     

       351
       351
       +
                       circleCenterX,

     

       352
       352
       +
                       centerY,

     

       353
       353
       +
                       circleCenterX,

     

       354
       354
       +
                       centerY,

     

       355
       355
       +
                   );

     

       356
       356
       +
                   ctx.lineTo(extendedRay3[0].x, extendedRay3[0].y);

     

       357
       357
       +
                   extendRayToCanvasEdge(

     

       358
       358
       +
                       extendedRay3[0].x,

     

       359
       359
       +
                       extendedRay3[0].y,

     

       360
       360
       +
                       centerX - R * scale,

     

       361
       361
       +
                       centerY,

     

       362
       362
       +
                   );

     

       363
       363
       +
                   ctx.stroke();

     

       364
       364
       +
       

     

       365
       365
       +
                   // draw an extension of the ray through the mirror in a slightly opacified color

     

       366
       366
       +
                   ctx.strokeStyle = "rgba(255, 165, 0, 0.5)";

     

       367
       367
       +
                   ctx.beginPath();

     

       368
       368
       +
                   ctx.lineTo(extendedRay3[0].x, extendedRay3[0].y);

     

       369
       369
       +
                   extendRayToCanvasEdge(

     

       370
       370
       +
                       centerX - R * scale,

     

       371
       371
       +
                       centerY,

     

       372
       372
       +
                       extendedRay3[0].x,

     

       373
       373
       +
                       extendedRay3[0].y,

     

       374
       374
       +
                   );

     

       375
       375
       +
                   ctx.stroke();

     

       376
       376
       +
       

     

       377
       377
       +
                   // draw a point at the intersection of the ray and the mirror

     

       378
       378
       +
                   ctx.fillStyle = "black";

     

       379
       379
       +
                   ctx.beginPath();

     

       380
       380
       +
                   ctx.arc(extendedRay3[0].x, extendedRay3[0].y, 3, 0, 2 * Math.PI);

     

       381
       381
       +
                   ctx.fill();

     

       382
       382
       +
               } else {

     

       383
       383
       +
                   // draw a ray that travels from the top of the object horizontally towards the mirror

     

       384
       384
       +
                   ctx.strokeStyle = "green";

     

       385
       385
       +
                   ctx.beginPath();

     

       386
       386
       +
                   ctx.lineTo(objX, objY - h);

     

       387
       387
       +
                   ctx.lineTo(

     

       388
       388
       +
                       centerX - Math.sqrt((R * scale) ** 2 - h ** 2),

     

       389
       389
       +
                       objY - h,

     

       390
       390
       +
                   );

     

       391
       391
       +
                   extendRayToCanvasEdge(

     

       392
       392
       +
                       centerX - F * scale,

     

       393
       393
       +
                       centerY,

     

       394
       394
       +
                       centerX - Math.sqrt((R * scale) ** 2 - h ** 2),

     

       395
       395
       +
                       objY - h,

     

       396
       396
       +
                   );

     

       397
       397
       +
                   ctx.stroke();

     

       398
       398
       +
       

     

       399
       399
       +
                   // draw an extension of the ray through the mirror in a slightly opacified color

     

       400
       400
       +
                   ctx.strokeStyle = "rgba(0, 128, 0, 0.5)";

     

       401
       401
       +
                   ctx.beginPath();

     

       402
       402
       +
                   ctx.lineTo(

     

       403
       403
       +
                       centerX - Math.sqrt((R * scale) ** 2 - h ** 2),

     

       404
       404
       +
                       objY - h,

     

       405
       405
       +
                   );

     

       406
       406
       +
                   ctx.lineTo(centerX - F * scale, centerY);

     

       407
       407
       +
                   ctx.stroke();

     

       408
       408
       +
       

     

       409
       409
       +
                   // draw a point at the intersection of the ray and the mirror

     

       410
       410
       +
                   ctx.fillStyle = "black";

     

       411
       411
       +
                   ctx.beginPath();

     

       412
       412
       +
                   ctx.arc(

     

       413
       413
       +
                       centerX - Math.sqrt((R * scale) ** 2 - h ** 2),

     

       414
       414
       +
                       objY - h,

     

       415
       415
       +
                       3,

     

       416
       416
       +
                       0,

     

       417
       417
       +
                       2 * Math.PI,

     

       418
       418
       +
                   );

     

       419
       419
       +
                   ctx.fill();

     

       420
       420
       +
       

     

       421
       421
       +
                   // draw a ray that travels from the top of the object towards the focal point of the mirror and through the focal point till it reaches the mirror

     

       422
       422
       +
                   ctx.strokeStyle = "purple";

     

       423
       423
       +
                   ctx.beginPath();

     

       424
       424
       +
                   ctx.lineTo(objX, objY - h);

     

       425
       425
       +
                   const extendedRay2 = findCircleIntersection(

     

       426
       426
       +
                       R * scale,

     

       427
       427
       +
                       objX,

     

       428
       428
       +
                       h,

     

       429
       429
       +
                       centerX - F * scale,

     

       430
       430
       +
                       centerY,

     

       431
       431
       +
                       circleCenterX,

     

       432
       432
       +
                       centerY,

     

       433
       433
       +
                   );

     

       434
       434
       +
                   const extendedRay2Y = centerY - (extendedRay2[0].y - centerY);

     

       435
       435
       +
                   ctx.lineTo(

     

       436
       436
       +
                       centerX -

     

       437
       437
       +
                           Math.sqrt(

     

       438
       438
       +
                               (R * scale) ** 2 - (centerY - extendedRay2Y) ** 2,

     

       439
       439
       +
                           ),

     

       440
       440
       +
                       centerY - (extendedRay2[0].y - centerY),

     

       441
       441
       +
                   );

     

       442
       442
       +
                   ctx.lineTo(0, centerY - (extendedRay2[0].y - centerY));

     

       443
       443
       +
                   ctx.stroke();

     

       444
       444
       +
       

     

       445
       445
       +
                   // draw an extension of the ray through the mirror in a slightly opacified color

     

       446
       446
       +
                   ctx.strokeStyle = "rgba(128, 0, 128, 0.5)";

     

       447
       447
       +
                   ctx.beginPath();

     

       448
       448
       +
                   ctx.lineTo(

     

       449
       449
       +
                       centerX -

     

       450
       450
       +
                           Math.sqrt(

     

       451
       451
       +
                               (R * scale) ** 2 - (centerY - extendedRay2Y) ** 2,

     

       452
       452
       +
                           ),

     

       453
       453
       +
                       centerY - (extendedRay2[0].y - centerY),

     

       454
       454
       +
                   );

     

       455
       455
       +
                   ctx.lineTo(canvas.width, centerY - (extendedRay2[0].y - centerY));

     

       456
       456
       +
                   ctx.stroke();

     

       457
       457
       +
       

     

       458
       458
       +
                   ctx.fillStyle = "black";

     

       459
       459
       +
                   ctx.beginPath();

     

       460
       460
       +
                   ctx.arc(

     

       461
       461
       +
                       centerX -

     

       462
       462
       +
                           Math.sqrt(

     

       463
       463
       +
                               (R * scale) ** 2 - (centerY - extendedRay2Y) ** 2,

     

       464
       464
       +
                           ),

     

       465
       465
       +
                       centerY - (extendedRay2[0].y - centerY),

     

       466
       466
       +
                       3,

     

       467
       467
       +
                       0,

     

       468
       468
       +
                       2 * Math.PI,

     

       469
       469
       +
                   );

     

       470
       470
       +
                   ctx.fill();

     

       471
       471
       +
       

     

       472
       472
       +
                   // draw a ray that travels from the top of the object through the radius of curvature of the mirror

     

       473
       473
       +
                   ctx.strokeStyle = "orange";

     

       474
       474
       +
                   ctx.beginPath();

     

       475
       475
       +
                   ctx.lineTo(objX, objY - h);

     

       476
       476
       +
                   // ctx.lineTo(centerX, centerY);

     

       477
       477
       +
                   const extendedRay3ScaleFactor =

     

       478
       478
       +
                       (R * scale) / Math.abs(objX - centerX);

     

       479
       479
       +
                   ctx.lineTo(

     

       480
       480
       +
                       centerX -

     

       481
       481
       +
                           Math.sqrt(

     

       482
       482
       +
                               (R * scale) ** 2 - (h * extendedRay3ScaleFactor) ** 2,

     

       483
       483
       +
                           ),

     

       484
       484
       +
                       centerY - h * extendedRay3ScaleFactor,

     

       485
       485
       +
                   );

     

       486
       486
       +
                   extendRayToCanvasEdge(

     

       487
       487
       +
                       centerX -

     

       488
       488
       +
                           Math.sqrt(

     

       489
       489
       +
                               (R * scale) ** 2 - (h * extendedRay3ScaleFactor) ** 2,

     

       490
       490
       +
                           ),

     

       491
       491
       +
                       centerY - h * extendedRay3ScaleFactor,

     

       492
       492
       +
                       objX,

     

       493
       493
       +
                       objY - h,

     

       494
       494
       +
                   );

     

       495
       495
       +
                   ctx.stroke();

     

       496
       496
       +
       

     

       497
       497
       +
                   // draw an extension of the ray through the mirror in a slightly opacified color

     

       498
       498
       +
                   ctx.strokeStyle = "rgba(255, 165, 0, 0.5)";

     

       499
       499
       +
                   ctx.beginPath();

     

       500
       500
       +
                   ctx.lineTo(

     

       501
       501
       +
                       centerX -

     

       502
       502
       +
                           Math.sqrt(

     

       503
       503
       +
                               (R * scale) ** 2 - (h * extendedRay3ScaleFactor) ** 2,

     

       504
       504
       +
                           ),

     

       505
       505
       +
                       centerY - h * extendedRay3ScaleFactor,

     

       506
       506
       +
                   );

     

       507
       507
       +
                   extendRayToCanvasEdge(

     

       508
       508
       +
                       centerX -

     

       509
       509
       +
                           Math.sqrt(

     

       510
       510
       +
                               (R * scale) ** 2 - (h * extendedRay3ScaleFactor) ** 2,

     

       511
       511
       +
                           ),

     

       512
       512
       +
                       centerY - h * extendedRay3ScaleFactor,

     

       513
       513
       +
                       centerX,

     

       514
       514
       +
                       centerY,

     

       515
       515
       +
                   );

     

       516
       516
       +
                   ctx.stroke();

     

       517
       517
       +
       

     

       518
       518
       +
                   // draw a point at the intersection of the ray and the mirror

     

       519
       519
       +
       

     

       520
       520
       +
                   ctx.fillStyle = "black";

     

       521
       521
       +
                   ctx.beginPath();

     

       522
       522
       +
                   ctx.arc(

     

       523
       523
       +
                       centerX -

     

       524
       524
       +
                           Math.sqrt(

     

       525
       525
       +
                               (R * scale) ** 2 - (h * extendedRay3ScaleFactor) ** 2,

     

       526
       526
       +
                           ),

     

       527
       527
       +
                       centerY - h * extendedRay3ScaleFactor,

     

       528
       528
       +
                       3,

     

       529
       529
       +
                       0,

     

       530
       530
       +
                       2 * Math.PI,

     

       531
       531
       +
                   );

     

       532
       532
       +
                   ctx.fill();

     

       533
       533
       +
       

     

       534
       534
       +
                   // draw an extension of the ray through the mirror in a slightly opacified color

     

       535
       535
       +
                   ctx.strokeStyle = "rgba(255, 165, 0, 0.5)";

     

       536
       536
       +
                   ctx.beginPath();

     

       537
       537
       +
                   ctx.lineTo(

     

       538
       538
       +
                       centerX -

     

       539
       539
       +
                           Math.sqrt(

     

       540
       540
       +
                               (R * scale) ** 2 - (centerY - extendedRay3Y) ** 2,

     

       541
       541
       +
                           ),

     

       542
       542
       +
                       centerY - (extendedRay3[0].y - centerY),

     

       543
       543
       +
                   );

     

       544
       544
       +
                   extendRayToCanvasEdge(

     

       545
       545
       +
                       centerX - R * scale,

     

       546
       546
       +
                       centerY,

     

       547
       547
       +
                       centerX -

     

       548
       548
       +
                           Math.sqrt(

     

       549
       549
       +
                               (R * scale) ** 2 - (centerY - extendedRay3Y) ** 2,

     

       550
       550
       +
                           ),

     

       551
       551
       +
                       centerY - (extendedRay3[0].y - centerY),

     

       552
       552
       +
                   );

     

       553
       553
       +
                   ctx.stroke();

     

       554
       554
       +
               }

     

       555
       555
       +
           }

     

       556
       556
       +
       

     

       557
       557
       +
           function update() {

     

       558
       558
       +
               canvas.width = canvas.offsetWidth;

     

       559
       559
       +
               canvas.height = canvas.offsetHeight * 0.8;

     

       560
       560
       +
               ctx.clearRect(0, 0, canvas.width, canvas.height);

     

       561
       561
       +
               ctx.fillStyle = "#f0f0f0";

     

       562
       562
       +
               ctx.fillRect(0, 0, canvas.width, canvas.height);

     

       563
       563
       +
               const isConcave = mirrorType.value === "concave";

     

       564
       564
       +
               const R = parseFloat(radiusInput.value);

     

       565
       565
       +
               const objDist = parseFloat(objectDistInput.value);

     

       566
       566
       +
       

     

       567
       567
       +
               drawMirror(isConcave, R);

     

       568
       568
       +
               drawRays(isConcave, R, objDist);

     

       569
       569
       +
           }

     

       570
       570
       +
       

     

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

     

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

     

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

     

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

     

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

     

       576
       576
       +
       

     

       577
       577
       +
           update();

     

       578
       578
       +
       

     

       579
       579
       +
           let isCanvasHovered = false;

     

       580
       580
       +
       

     

       581
       581
       +
           canvas.addEventListener("mouseenter", () => {

     

       582
       582
       +
               isCanvasHovered = true;

     

       583
       583
       +
           });

     

       584
       584
       +
       

     

       585
       585
       +
           canvas.addEventListener("mouseleave", () => {

     

       586
       586
       +
               isCanvasHovered = false;

     

       587
       587
       +
           });

     

       588
       588
       +
       

     

       589
       589
       +
           document.addEventListener("keydown", (e) => {

     

       590
       590
       +
               if (!isCanvasHovered) return;

     

       591
       591
       +
               if (e.key === "+" || e.key === "=") {

     

       592
       592
       +
                   zoomInput.value = Math.min(parseFloat(zoomInput.value) + 0.1, 8);

     

       593
       593
       +
                   update();

     

       594
       594
       +
               }

     

       595
       595
       +
               if (e.key === "-" || e.key === "_") {

     

       596
       596
       +
                   zoomInput.value = Math.max(parseFloat(zoomInput.value) - 0.1, 0.1);

     

       597
       597
       +
                   update();

     

       598
       598
       +
               }

     

       599
       599
       +
       

     

       600
       600
       +
               // translate the canvas

     

       601
       601
       +
               if (e.key === "ArrowUp") {

     

       602
       602
       +
                   offsetY -= 25;

     

       603
       603
       +
                   update();

     

       604
       604
       +
               }

     

       605
       605
       +
               if (e.key === "ArrowDown") {

     

       606
       606
       +
                   offsetY += 25;

     

       607
       607
       +
                   update();

     

       608
       608
       +
               }

     

       609
       609
       +
               if (e.key === "ArrowLeft") {

     

       610
       610
       +
                   offsetX -= 25;

     

       611
       611
       +
                   update();

     

       612
       612
       +
               }

     

       613
       613
       +
               if (e.key === "ArrowRight") {

     

       614
       614
       +
                   offsetX += 25;

     

       615
       615
       +
                   update();

     

       616
       616
       +
               }

     

       617
       617
       +
           });

     

       618
       618
       +
       </script>