Spirograph Roulette Curve Bounding Box Calculator

Overview

A single-file, browser-based utility designed to calculate the spatial limits (bounding box) of hypotrochoid and epitrochoid curves. This tool is essential for designers, plotter artists, and engineers who need to fit mathematical art patterns into specific physical constraints.

Core Features

• Live Parametric Inputs: Real-time sliders and number inputs for Fixed Radius (R), Moving Radius (r), and Pen Offset (d).
• Curve Type Toggle: Switchable mode between Hypotrochoid and Epitrochoid geometry.
• Visual Preview Canvas: A clean HTML5 canvas that renders the curve and overlays the bounding box rectangle.
• Precision Metrics: Automatically calculates Width, Height, and Center Point (X,Y) coordinates.
• Copy to Clipboard: One-click functionality to copy dimensions for use in other software.

UI/UX Specification

• Layout:
  • Header: Title and brief instructional text.
  • Main Tool Area: A two-column layout. The left column contains the controls (inputs). The right column contains the visual canvas and calculation results.
  • Responsive Behavior: On smaller screens, the layout automatically stacks into a single column with the canvas positioned above the results.
• Visual Aesthetic:
  • Color Palette: High-contrast light mode. Primary background #FFFFFF, secondary neutral gray #F3F4F6, text #111827, and a professional blue accent #2563EB for active UI elements.
  • Animations: Subtle transition: all 0.2s ease-in-out on all inputs and hover states. Smooth fade-ins when results update.
  • Typography: Modern system sans-serif (Inter, system-ui).

Developer Constraints

• Architecture: Must be contained within a single .html file. CSS and JavaScript must be embedded internally.
• State Management: Zero storage usage. No localStorage, sessionStorage, or cookies allowed. All data must be handled via ephemeral JavaScript variables.
• Modals: Any confirmation or alert must use a custom, in-DOM overlay element, not window.alert() or window.prompt().
• Performance: Canvas drawing must be optimized to 60fps to ensure smooth feedback while sliders are moved.
• Dependencies: Use CDN links for any external assets (e.g., FontAwesome for icons) with integrity hashes. No build tools (Webpack/Vite) required.