Macro Photography Diffuser Spread Angle Calculator

Overview

This single-file web utility is designed to help macro photographers visualize and calculate the light spread angle from their diffusers. By inputting physical dimensions, users can instantly determine if their current setup provides adequate coverage for their subject at a specific working distance.

Core Features

• Dynamic Inputs: Precise numerical inputs for:
  • Diffuser/Dome Diameter (mm)
  • Distance from Diffuser to Subject (mm)
  • Focal Length (mm) for reference
• Real-Time Calculation: Instant output of:
  • Total Spread Angle (degrees)
  • Effective Light Coverage Radius (mm)
  • Relative Softness Estimate
• SVG Visualization: A responsive SVG diagram that renders the light cone in real-time based on the input variables.
• Responsive Design: A mobile-first, clean UI that adapts to both desktop and portrait-oriented mobile devices.

UI/UX Specification

• Layout:
  • Header: Simple title and one-sentence description.
  • Main Area: Two-column grid on desktop (Inputs on left, Visualizer + Results on right).
  • Input Group: Clean, stacked form fields with floating labels.
  • Visualizer: An SVG area showing a side-profile representation of the light cone geometry.
• Aesthetics:
  • Palette: Crisp whites, soft slate grays for text, and a primary accent color of vibrant electric blue (#2563eb) for buttons and active states.
  • Typography: Sans-serif, modern, highly legible font (e.g., Inter or system UI stacks).
  • Transitions: All UI updates (such as diagram resizing) must use smooth CSS transitions (300ms ease-in-out).
• No-Cookie Policy: Clearly stated that the tool is 100% client-side with no persistent storage.

Technical Implementation

• Structure: Single index.html file containing embedded CSS and Vanilla JS.
• State Management:
  • Use a simple object state = { distance: 50, diameter: 100 } updated via event listeners.
  • updateUI() function called on input events to re-render the SVG path and text fields.
• Accessibility:
  • ARIA labels for all inputs.
  • High contrast ratios (WCAG AAA compliant).
• Performance:
  • Zero external dependency bloat; only standard browser APIs.
  • requestAnimationFrame for smooth SVG updates if animating transitions.

Deployment Guidelines

• The application MUST run entirely in the browser.
• DO NOT use localStorage, sessionStorage, or cookies.
• DO NOT use popups or alerts; use custom in-DOM modal elements if notifications are needed.
• All CSS must be contained within a <style> block in the head.
• All JS must be contained within a <script> block before the closing </body> tag.