Free Synthesizer Sub-Oscillator Phase Alignment Waveform Tool

Application Overview

This is a browser-based, high-performance waveform synthesis and phase alignment tool. It allows sound designers to draw custom cycles on a grid, visualize them against a reference wave (Sine, Square, Triangle), and calculate phase alignment to prevent cancellation.

Core Features

• Interactive Drawing Canvas: High-precision HTML5 Canvas allowing users to draw single-cycle waveforms with mouse/touch input.
• Reference Wave Overlay: Toggleable reference waves (Sine, Triangle, Square) to visualize phase relationships.
• Phase Alignment Feedback: Real-time visual delta calculation to show where your custom wave deviates from the zero-crossing points of the reference.
• Normalization Engine: One-click utility to normalize the drawn wave to -1.0 to 1.0 range.
• Coordinate Export: Instant generation of waveform coordinate data in JSON or CSV format, ready for copy-pasting into external synth engines.
• Responsive Design: The canvas intelligently scales to maintain a 1:1 aspect ratio on desktop, tablet, and mobile browsers.

UI & Aesthetic Specification

• Color Palette: Strictly light mode.
  • Background: #FFFFFF (White) for main content area, #F1F5F9 (Cool Gray 100) for control panel backgrounds.
  • Primary Accent: #3B82F6 (Blue 500) for active tools and buttons.
  • Waveform Color: #1E293B (Slate 800) for the custom drawn wave, #94A3B8 (Slate 400) for the reference wave.
  • Text: #0F172A (Slate 900).
• Typography: Inter or a similar clean, professional sans-serif system font.
• Interactions: Smooth CSS transitions on hover states for buttons. Drawing on the canvas should be buttery-smooth with no lag, utilizing requestAnimationFrame for rendering.

Layout

1. Header: Minimalist header with title and a short "How to use" tooltip.
2. Main Utility Area:
   • Left Panel: Drawing tools (Pen, Eraser, Clear, Undo). Reference wave selection (Sine, Triangle, Square, None).
   • Center: The Canvas (the primary focus).
   • Right Panel: Numerical output of the waveform coordinates. A "Copy Data" button that provides a custom notification overlay (no alert()).
3. Visuals: Subtle, soft shadows (CSS box-shadow) to lift the canvas and panels off the background, creating a premium SaaS appearance.

Technical Directives for Developers

• Architecture: Single HTML file only. Put JS in <script> tags and CSS in <style> tags.
• No Persistence: Do not use localStorage, sessionStorage, or cookies. Use simple variable state management within the window or a controller object.
• Safety:
  • No alert(), prompt(), or confirm(). Use custom HTML/CSS modals or toast notifications if user feedback is needed.
  • No external tracking scripts (Google Analytics, Hotjar, etc.).
• Performance: Use requestAnimationFrame for canvas drawing to ensure 60fps performance on low-power devices.
• Responsive: Canvas must use getBoundingClientRect() to handle dynamic resizing during window events.