Synthboard

A retrofuturistic car dashboard for car (engine) simulation, MIDI control, and audio visualization. Built with Python and JavaScript/HTML/CSS, it features a real-time map, car engine physics, MIDI input, and audio engine with a real-time synthesizer with customizable car noises.

Video

Synthboard_.mov

Key Features

• Interactive Dashboard View:
  • Digital and analog-style gauges (RPM, Speed) using SVG.
  • Segmented bar graphs for Fuel and Temperature.
  • Odometer display (Main and Mini).
  • Indicator lights for warnings (oil, battery, overheat) and vehicle status (headlights).
  • Key ignition visual.
• Console View:
  • LCD-style displays for Trip Computer (Clock/Date) and Audio System info.
  • Interactive buttons for climate control and audio system functions. (not functional)
  • Visual EQ bars (FFT-based).
  • Cassette deck visual.
• Synth Panel View:
  • Allows detailed editing of parameters for the master engine sound and various sound events (horn, engine rev, engine start/stop, gear shifts).
  • Controls include sliders, toggles, and dropdowns for oscillators, envelopes, filters, etc.
  • Oscilloscope for visualizing generated waveforms.
• Map View (Vector-Based):
  • Car-centered 2.5D perspective view.
  • Roads, junctions, and environmental features (buildings, trees) rendered with a retro "oscilloscope line" style.
• Dynamic Audio Synthesis:
  • Engine sound realistically responds to RPM, throttle, and load.
  • Sound events triggered by simulation (e.g., gear shifts, horn).
• Configuration System:
  • Car-specific parameters loaded from YAML files.
  • User overrides for synth settings.
  • Global application settings.
  • You can change the parameters (also the selected MIDI controller) by changing .yaml files in config folder.
• Debug & Help Panels:
  • In-app debug panel to monitor simulation state and trigger events.
  • Help panel displaying keyboard and MIDI control mappings.
• Visual Effects:
  • CRT scanline/vignette overlay for an authentic retro screen feel.
  • VFD (Vacuum Fluorescent Display) and 7-Segment LED/LCD style readouts.

Core Technologies:

• Backend: Python
  • UI Hosting: pywebview (hosts a standard web frontend)
  • Simulation: Custom physics for car model (engine, transmission, basic position).
  • Audio Synthesis: Custom real-time audio engine (oscillators, filters, envelopes, event sounds).
  • Configuration: YAML-based, managed by a ConfigManager.
  • Event System: Decoupled communication between components.
• Frontend: Standard Web Technologies
  • Structure: HTML
  • Styling: CSS (modular, using SASS-like structure and CSS Custom Properties)
  • Interactivity: JavaScript (ES6 Modules)
• Input: MIDI controller inputs drive the car simulation. Keyboard inputs are also supported.

Vibecoding

This project serves as a "vibecoding" experiment to explore and assess the capabilities of Large Language Models in a complex, iterative software development process.

The majority of the HTML, CSS, and JavaScript for the frontend, as well as significant portions of the Python backend logic (especially for new features like the map, FFT, and complex UI interactions), have been co-developed with Google's Gemini 2.5 Pro).

License

This project is licensed under the MIT License - see the LICENSE.md file for details.