{"id":30594114,"url":"https://github.com/erik-donath/fourier-transform-visualizer","last_synced_at":"2025-08-29T19:37:00.471Z","repository":{"id":306134596,"uuid":"1025126435","full_name":"Erik-Donath/fourier-transform-visualizer","owner":"Erik-Donath","description":"Eine interaktive Webanwendung zur Visualisierung und zum besseren Verständnis der Fourier-Transformation. Mit diesem Bildungswerkzeug können Sie erforschen, wie sich komplexe Signale in ihre einzelnen Frequenzkomponenten zerlegen lassen und wie diese wieder zusammengesetzt werden können.","archived":false,"fork":false,"pushed_at":"2025-08-14T22:26:13.000Z","size":122,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-15T00:16:13.585Z","etag":null,"topics":["analysis","fourier","fourier-analysis","fourier-transform","github-pages","interactive","math","mathematics","react","vite"],"latest_commit_sha":null,"homepage":"https://erik-donath.github.io/fourier-transform-visualizer/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Erik-Donath.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-23T19:06:01.000Z","updated_at":"2025-08-14T22:26:16.000Z","dependencies_parsed_at":"2025-07-23T21:54:57.418Z","dependency_job_id":"04175627-1d1a-4eb1-ab0f-2079d641b1a6","html_url":"https://github.com/Erik-Donath/fourier-transform-visualizer","commit_stats":null,"previous_names":["erik-donath/fourier-transformation-visualisation","erik-donath/fourier-transform-visualizer"],"tags_count":0,"template":false,"template_full_name":"Erik-Donath/react-github-pages","purl":"pkg:github/Erik-Donath/fourier-transform-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erik-Donath%2Ffourier-transform-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erik-Donath%2Ffourier-transform-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erik-Donath%2Ffourier-transform-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erik-Donath%2Ffourier-transform-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Erik-Donath","download_url":"https://codeload.github.com/Erik-Donath/fourier-transform-visualizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erik-Donath%2Ffourier-transform-visualizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272749987,"owners_count":24986871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analysis","fourier","fourier-analysis","fourier-transform","github-pages","interactive","math","mathematics","react","vite"],"created_at":"2025-08-29T19:36:59.750Z","updated_at":"2025-08-29T19:37:00.461Z","avatar_url":"https://github.com/Erik-Donath.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fourier-Transform-Visualisierer\n\n[![GitHub Pages](https://img.shields.io/badge/demo-online-green)](https://erik-donath.github.io/fourier-transform-visualizer/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![React](https://img.shields.io/badge/React-18.3.1-blue.svg)](https://reactjs.org/)\n[![Vite](https://img.shields.io/badge/Vite-6.0.5-646CFF.svg)](https://vitejs.dev/)\n\nEine interaktive Webanwendung zur Visualisierung und zum besseren Verständnis der Fourier-Transformation.\n\n## 🌟 Funktionen\n\n### Duale Analysemodi\n\n- **Komponenten-Modus**: Erstellen Sie Signale durch die Kombination einzelner Frequenzkomponenten mit individuell anpassbaren Parametern (Frequenz, Amplitude, Phase)\n- **Ausdrucks-Modus**: Geben Sie mathematische Formeln direkt ein und analysieren Sie deren Frequenzinhalt in Echtzeit\n\n### Interaktive Visualisierungen\n\n- **Zeitbereich**: Live-Signaldarstellung mit flexibel anpassbaren Zeitbereichen\n- **Frequenzbereich**: Anschauliche Visualisierung von Amplituden- und Phasenspektrum\n\n### Erweiterte Analyse\n\n- **Diskrete Fourier-Transformation (DFT)**: Umfassende Analyse im Frequenzbereich\n- **Intelligente Frequenzerkennung**: Automatische Identifikation der wichtigsten Frequenzkomponenten\n- **Ausdrucksrekonstruktion**: Automatische Generierung mathematischer Ausdrücke basierend auf der Frequenzanalyse\n- **Live-Updates**: Alle Visualisierungen werden in Echtzeit aktualisiert, sobald Sie Parameter ändern\n\n## 🚀 Live-Demo\n\nDas Tool kann unter dem folgenden Link genutzt werden: [https://erik-donath.github.io/fourier-transform-visualizer/](https://erik-donath.github.io/fourier-transform-visualizer/)\n\n## 🛠️ Technologie-Stack\n\n- **Frontend-Framework**: React 18.3.1 mit Hooks\n- **Build-Tool**: Vite 6.0.5\n- **Mathematik**: Math.js für Ausdrucksanalyse und -auswertung\n- **Diagramme**: Recharts für interaktive Datenvisualisierung\n- **LaTeX-Rendering**: KaTeX und react-katex für mathematische Formeln\n- **Styling**: CSS3 mit modernen Flexbox/Grid-Layouts\n\n## 📦 Installation\n\n### Voraussetzungen\n\n- Node.js (Version 16 oder höher)\n- npm oder yarn Paketmanager\n\n### Einrichtung\n\n1. Repository klonen:\n\n```bash\ngit clone https://github.com/Erik-Donath/fourier-transform-visualizer.git\ncd fourier-transform-visualizer\n```\n\n2. Abhängigkeiten installieren:\n\n```bash\nnpm install\n```\n\n3. Entwicklungsserver starten:\n\n```bash\nnpm run dev\n```\n\n4. Öffnen Sie Ihren Browser und navigieren Sie zu `http://localhost:5173`\n\n## 🧮 Mathematischer Hintergrund\n\nDie Anwendung implementiert die **Diskrete Fourier-Transformation (DFT)**:\n\n```\nX_k = (1/N) * Σ(n=0 bis N-1) x_n * e^(-2πikn/N)\n```\n\nWobei:\n\n- `X_k` die Frequenzkomponente bei Frequenz `k` darstellt\n- `x_n` die Zeitbereichsproben sind\n- `N` die Gesamtanzahl der Proben ist\n\n### Schlüsselkonzepte\n\n- **Signalzerlegung**: Wie sich komplexe Wellenformen aus einfachen Sinusoiden zusammensetzen\n- **Frequenzanalyse**: Identifikation dominanter Frequenzen in Signalen\n- **Phasenbeziehungen**: Verständnis von Phasenverschiebungen zwischen Komponenten\n- **Spektrale Rekonstruktion**: Umwandlung von Frequenzdaten zurück in mathematische Ausdrücke\n\n## 📁 Projektstruktur\n\n```\nsrc/\n├── components/           # React-Komponenten\n│   ├── Header.jsx       # Anwendungsheader\n│   ├── ModeSelector.jsx # Modus-Wechsel-Interface\n│   ├── FrequencyComponentsEditor.jsx # Komponenten-Modus-Steuerungen\n│   ├── ExpressionEditor.jsx # Ausdrucks-Modus-Steuerungen\n│   ├── SignalCharts.jsx # Zeit- und Frequenzbereichsdiagramme\n│   ├── SpectrumAnalysis.jsx # Frequenzanalyse-Anzeige\n│   └── Footer.jsx       # Anwendungsfußzeile\n├── utils/\n│   └── fourier.js       # Kern-Mathematikfunktionen und DFT-Implementierung\n├── App.jsx              # Hauptanwendungskomponente\n├── main.jsx            # Anwendungseinstiegspunkt\n└── index.css           # Globale Stile\n```\n\n## 🔧 Verfügbare Skripte\n\n- `npm run dev` - Entwicklungsserver starten\n- `npm run build` - Für Produktion erstellen\n- `npm run preview` - Produktions-Build vorschauen\n- `npm run lint` - ESLint-Code-Analyse ausführen\n\n## 🤝 Mitwirken\n\nBeiträge sind herzlich willkommen! Bei größeren Änderungen erstellen Sie bitte zunächst ein Issue, um Ihre Ideen zu diskutieren.\n\n### Entwicklungsrichtlinien\n\n1. Befolgen Sie den bestehenden Code-Stil und die Konventionen\n2. Fügen Sie Kommentare für komplexe mathematische Operationen hinzu\n3. Testen Sie Ihre Änderungen in verschiedenen Browsern\n4. Aktualisieren Sie die Dokumentation nach Bedarf\n\n## 📄 Lizenz\n\nDieses Projekt ist unter der MIT-Lizenz lizenziert - siehe die [LICENSE](LICENSE)-Datei für Details.\n\n## 👥 Autoren\n\n- **Erik Donath** - Erste Entwicklung und mathematische Implementierung\n- **Justus Weik** - Mitentwickler und Projektbeitragender\n\n## 🙏 Danksagungen\n\n- Erstellt mit modernem React und Vite für optimale Leistung\n- Mathematische Berechnungen unterstützt von Math.js\n- Interaktive Diagramme erstellt mit Recharts\n- LaTeX-Rendering bereitgestellt von KaTeX\n- Inspiriert von der Schönheit und Nützlichkeit der Fourier-Analyse in der Signalverarbeitung\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferik-donath%2Ffourier-transform-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferik-donath%2Ffourier-transform-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferik-donath%2Ffourier-transform-visualizer/lists"}