body > .container, body > .dashboard-grid, .workspace, .container { display: flex !important; flex-direction: column !important; height: calc(100dvh - var(--mob-top) - var(--mob-tabs)) !important; overflow: hidden !important; padding: 0 !important; gap: 0 !important; } /* -- Viewport / canvas area: full remaining space -- */ .viewport, .main-content, .lab-viewport, [class*="viewport"], [class*="lab-area"], .flex-1 { flex: 1 1 0 !important; width: 100% !important; height: 0 !important; /* flex decides actual height */ min-height: 0 !important; position: relative !important; } canvas { width: 100% !important; height: 100% !important; display: block !important; } /* -- HUD: compact, top-right, never blocking canvas centre -- */ .hud, [class*="hud"], .results-hud, .stats-panel { position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important; transform: none !important; max-width: 48vw !important; min-width: 0 !important; padding: 6px 9px !important; font-size: 0.68rem !important; border-radius: 8px !important; z-index: 50 !important; } .hud-row { margin-bottom: 3px !important; gap: 6px !important; } .hud-val { font-size: 0.67rem !important; } .hud-status { font-size: 0.62rem !important; } /* -- Mobile Top Bar -- */ .nv-mob-topbar { display: flex !important; align-items: center; justify-content: space-between; background: #1e293b; border-bottom: 1px solid #334155; padding: 0 12px; height: var(--mob-top); flex-shrink: 0; z-index: 200; position: relative; } .nv-mob-brand { font-weight: 700; font-size: 0.88rem; display: flex; align-items: center; gap: 6px; color: #f8fafc; letter-spacing: .3px; } .nv-mob-brand-icon { color: #38bdf8; } .nv-ctrl-btn { background: #0f172a; border: 1px solid #475569; color: #f8fafc; border-radius: 7px; padding: 5px 13px; font-size: 0.75rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px; font-family: inherit; transition: background .15s; -webkit-tap-highlight-color: transparent; } .nv-ctrl-btn:active { background: #1e293b; } /* -- Mobile Lab Tabs -- */ .nv-mob-labtabs { display: flex !important; background: #1e293b; border-bottom: 1px solid #334155; height: var(--mob-tabs); flex-shrink: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .nv-mob-labtabs::-webkit-scrollbar { display: none; } .nv-mob-tab { flex: 1; min-width: 70px; background: transparent; border: none; color: #64748b; padding: 0 6px; font-size: 0.7rem; font-weight: 700; cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; transition: all .15s; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .nv-mob-tab.active { color: #38bdf8; border-bottom-color: #38bdf8; background: rgba(56,189,248,.06); } /* -- Drawer Overlay -- */ .nv-drawer-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .nv-drawer-overlay.nv-open { display: block !important; } /* -- Slide-Up Drawer -- */ .nv-drawer { display: flex !important; flex-direction: column; position: fixed; bottom: 0; left: 0; right: 0; z-index: 501; background: #1e293b; border-top: 1px solid #334155; border-radius: 16px 16px 0 0; max-height: 80dvh; transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,0,1); padding-bottom: calc(12px + var(--mob-safe)); } .nv-drawer.nv-open { transform: translateY(0) !important; } .nv-drawer-handle { width: 36px; height: 4px; background: #475569; border-radius: 2px; margin: 10px auto 0; flex-shrink: 0; } .nv-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 8px; border-bottom: 1px solid #334155; flex-shrink: 0; } .nv-drawer-title { font-weight: 700; font-size: 0.88rem; color: #38bdf8; letter-spacing: .5px; text-transform: uppercase; } .nv-drawer-done { background: #0f172a; border: 1px solid #475569; color: #94a3b8; border-radius: 6px; padding: 4px 12px; font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: inherit; } .nv-drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px 4px; -webkit-overflow-scrolling: touch; } .nv-drawer-body::-webkit-scrollbar { display: none; } /* -- Drawer-cloned controls styling -- */ .nv-drawer-body label, .nv-drawer-body .input-label, .nv-drawer-body .input-group > div:first-child { font-size: 0.85rem !important; margin-bottom: 6px !important; } .nv-drawer-body input[type=range] { width: 100% !important; height: 5px !important; margin-bottom: 14px !important; cursor: pointer; } .nv-drawer-body input[type=range]::-webkit-slider-thumb { width: 24px !important; height: 24px !important; } .nv-drawer-body button { min-height: 44px !important; touch-action: manipulation; } .nv-drawer-body select { width: 100% !important; padding: 10px !important; font-size: 0.88rem !important; margin-bottom: 10px !important; } .nv-drawer-body .description, .nv-drawer-body p { font-size: 0.82rem !important; line-height: 1.5 !important; color: #94a3b8 !important; margin-bottom: 12px !important; } /* hide info/ad boxes inside drawer-cloned content */ .nv-drawer-body .info-panel, .nv-drawer-body .info-box, .nv-drawer-body .ad-sidebar, .nv-drawer-body .sidebar-ad { display: none !important; } /* Value readouts synced in drawer */ .nv-sync-val { font-family: monospace; color: #38bdf8; font-weight: 700; } }

Experiment Mode

Incident Angle (i) 45.0°

Drag on canvas to adjust freely

Angle of Reflection (r) 45.0°

Deviation (d) 90.0°

PLANE MIRROR

Drag anywhere to move light source

Ray Optics

Reflection of Light

Understanding the fundamental laws governing mirrors and optical instruments.

Laws of Reflection

[Image of laws of reflection diagram]

The angle of incidence ($\angle i$) is always equal to the angle of reflection ($\angle r$).
The incident ray, the reflected ray, and the normal to the surface at the point of incidence all lie in the same plane.

$$ \angle i = \angle r $$

Angle of Deviation

The angle of deviation ($\delta$) is the angle between the path of the incident ray and the reflected ray.

Since the total angle on a straight line is $180^\circ$, and $\angle i = \angle r$:

$$ \delta = 180^\circ - (i + r) = 180^\circ - 2i $$

Principle of Periscope

A periscope uses two plane mirrors inclined at an angle of $45^\circ$.

Light from the object hits the first mirror and is deviated by $90^\circ$ downwards.
It hits the second mirror and is deviated again by $90^\circ$ horizontally towards the eye.
The final image is erect and virtual.

Viva Voce

Q: What is a virtual image?

An image formed by the apparent intersection of light rays (extrapolated backwards). It cannot be caught on a screen.

Q: Why is an ambulance written backwards?

Due to lateral inversion. In the rear-view mirror of the car ahead, it will appear correctly.

Lab Notebook

Trial #	Angle of Incidence (i)	Angle of Reflection (r)	Deviation (d)
No readings recorded.

Mean Deviation

Average of all recorded trials

--°

Controls