Studio Lighting Exposure Zone Visualizer

Overview

This single-file application is an interactive educational tool designed to help photographers understand the relationship between studio lighting styles (High Key vs. Low Key) and exposure metrics. Users can manipulate lighting intensity and exposure compensation in real-time, observing the impact on a dynamic histogram and a luminance-mapped false-color view of a 3D-rendered subject.

Technical Implementation Constraints

• Single File: The entire application (HTML, CSS, JS) must be contained within one HTML file.
• Storage: Absolutely NO use of localStorage, sessionStorage, or cookies. The state is purely in-memory and resets on refresh.
• Environment: Must run perfectly inside a sandboxed iframe. Use window.requestAnimationFrame for smooth updates.
• Aesthetic: Strictly light-mode design. Use high-contrast, clean typography (e.g., Inter or system sans-serif) and a professional color palette (whites, light grays, soft blues).

UI Layout

1. Header

• Simple, clean navigation title describing the tool.
• A brief "How-to" toggle to explain the zone mapping overlays.

2. Main Workspace

• Left Pane (Viewer): A canvas element rendering a high-quality 3D-shaded subject. Support for two display modes: 'Standard Render' and 'Zone Map Overlay' (false-color visualization of brightness levels 0-10).
• Right Pane (Controls):
  • Lighting Preset Selector: Buttons for "High Key" (resets sliders to bright settings) and "Low Key" (resets to dark settings).
  • Sliders:
    • Key Light Intensity (0-100%)
    • Exposure Compensation (-2 to +2 EV)
    • Contrast Ratio (1:1 to 1:16)
  • Live Histogram: A real-time SVG or Canvas path that updates as sliders move, showing the luminosity distribution of the current frame.

Color Palette

• Primary Surface: #FFFFFF (White)
• Secondary Surface: #F8F9FA (Soft Gray)
• Text: #212529 (Dark Slate)
• Accent/Histogram: #4A90E2 (Soft Professional Blue)
• Shadows: Soft diffuse drops shadows (e.g., 0 4px 6px rgba(0,0,0,0.1)) to maintain a SaaS look.

Interactions & Animations

• Smooth Transitions: All slider adjustments must trigger a redraw of the canvas and histogram with a transition duration of ~150ms to prevent visual flickering.
• Responsive Design:
  • Desktop: Side-by-side Layout.
  • Mobile: Stacked layout (Viewer on top, Controls on bottom).
• Micro-interactions: Subtle hover states on buttons and active state indicators on the current mode.

Feature Set

• Real-time Histogram: Visual representation of pixel luminosity distribution.
• Zone False-Color Map: A toggleable view that highlights regions of the subject based on their Zone System value (e.g., Zone 0 = Black, Zone 10 = White).
• Exposure Indicator: Displays the current EV value in real-time.
• Educational Tooltips: Interactive "i" icons next to control labels that, when clicked, explain the concept (e.g., 'What is a 1:16 contrast ratio?').