Koch Snowflake Perimeter & Geometry Calculator

Technical Specification

Overview

A clean, performant, and educational web tool designed to calculate the geometric properties of a Koch Snowflake at specific iterations. The tool focuses on the relationship between iteration count, perimeter length, and side length.

UI Layout & Components

• Header: Minimalist title section with a short tagline.
• Input Area:
  • Initial Side Length (s): Numeric input field (supports decimal).
  • Iteration Count (n): Slider control and manual number input (range: 0 to 50 for performance safety).
• Results Display Panel:
  • Clean cards showing: Current Perimeter, Number of Segments, Length of Individual Segment.
  • A "Mathematical Formula" section that displays the formula used for the specific inputs, updated in real-time.
• Visualizer (Optional but Recommended):
  • A lightweight <canvas> element to draw a simplified representation of the fractal up to iteration 5 or 6 (to prevent browser lag).

Color Palette & Aesthetic

• Primary Background: #FFFFFF (White)
• Surface/Card Background: #F8FAFC (Slate 50)
• Text Colors: #1E293B (Slate 800) for headers, #475569 (Slate 600) for body.
• Accents: #3B82F6 (Blue 500) for call-to-action elements and active sliders.
• Borders: #E2E8F0 (Slate 200).
• Design Style: High-quality shadows (shadow-sm, shadow-md), rounded corners (rounded-xl), and ample whitespace for a clean, scientific aesthetic.

Animations & Micro-interactions

• Slide/Fade: Results should fade in or transition smoothly when values change. Avoid jarring layout shifts.
• Input Focus: Inputs should have a soft box-shadow glow when active.
• Responsive Behavior: The results cards should stack vertically on small screens and switch to a grid layout on desktops.

Implementation Constraints

• Single File: All CSS, HTML, and JS must reside in one file. Use CDN links for any icons (e.g., Lucide or FontAwesome).
• Sandboxed Environment:
  • NO LocalStorage/SessionStorage: The application must be stateless. All calculations occur in-memory.
  • NO Popups: Use CSS-based modals or alert-boxes for warnings if the user enters extremely large iteration numbers.
• Vanilla JS Only: Direct DOM manipulation or lightweight event listeners. No frameworks.
• Performance: Use Math.pow() for exponentiation. For iterations > 50, cap the value to prevent calculation errors or UI freezing, providing a message if the number exceeds floating-point precision limits.