Skip to content

Commit 8640cae

Browse files
committed
Add dbLabels to GraphScale; add animations to FRCurve; refine Curve types
1 parent 9be793a commit 8640cae

File tree

12 files changed

+509
-367
lines changed

12 files changed

+509
-367
lines changed

POST.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
### I made a library to visualize and edit audio filters
2+
3+
Hey everyone!
4+
5+
# The Story Behind
6+
7+
Several years ago, I was deep-dived into reverse engineering the parameter system used in VAG (Volkswagen, Audi, Porsche, etc) infotainment units. I managed to decode their binary format for storing settings for each car model and body style. To explain it simply - the firmware contains equalizer configurations for each channel of the on-board 5.1 speaker system, calibrated based on cabin volume and other parameters, much like how home theater systems are configured (with specific gains, delays, limiters, etc).
8+
9+
I published this research for the car enthusiast community. While the interest was huge, the reach remained small since most community members weren't familiar with HEX editors. Only a few could really replicate what I documented. After some time, I built a web application that visualized these settings and allowed to unpack, edit and repack that data back into the binary format.
10+
11+
When I first tried to visualize audio filters with that project, I hit a wall. There are tons of charting libraries out there - you know, those "enterprise-ready business visualization solutions." But **NONE** of them is designed for audio-specific needs. D3.js is the only real option here - it’s powerful but requires days of digging through docs just to get basic styling right. And if you want interactive features like drag-and-drop? Good luck with that. (Fun fact: due to D3's multiple abstraction layers, just **the same** filter calculations in DSSSP are 1.4-2x faster than D3's implementation).
12+
13+
# Nowadays
14+
15+
Looking back, the original project was pretty messy (spaghetti code, honestly) and had a very specific focus. However, this experience led me to realize that the visualization library itself could have broader applications in audio processing software.
16+
17+
This insight pushed me to develop a custom, vector-based graph from scratch using a modern React stack. The library focuses on one thing: **audio filters**. No unnecessary abstractions, no stock tickers — just a set of fast and convenient (I hope!?) tools for professional audio software.
18+
19+
# Core Features
20+
21+
- Logarithmic frequency response visualization
22+
- Interactive biquad filter manipulation
23+
- Custom audio calculation engine
24+
- Drag-and-drop + Mouse wheel controls
25+
- Flexible theming API
26+
27+
# Technical Details
28+
29+
- Built with React + SVG (no Canvas)
30+
- Zero external dependencies besides React
31+
- Full TypeScript support
32+
33+
# Live [Demo](https://dsssp.io/demo) & [Docs](https://dsssp.io/docs/?path=/docs/introduction--docs)
34+
35+
This is the first public release, landing page is missing, and the backlog is huge, and doc is incomplete.
36+
_(You know, there's never a perfect timing - I just had to stop implementing my ideas and make it community driven)._
37+
38+
I'd love to see what you could build with these components. What's missing? What could be improved?
39+
40+
I'm still lacking the understanding of how it could gain some cash flow, while staying open-source. Any ideas?

0 commit comments

Comments
 (0)