I Built 4 Interactive Engineering Tools You Can Run in Your Browser
Most engineering concepts live in textbooks and MATLAB scripts - you read about a Fourier transform, a PID loop, or a constellation diagram, but you rarely get to touch one. I'm a game developer by day and an Electronics & Communication Engineer by training, and I kept thinking: why can't these be things you just open in a browser and play with?
So I built four of them. No installs, no accounts - click a link and start turning knobs. Each one is written from scratch in React + TypeScript with the actual math implemented by hand (no DSP or simulation libraries). Here's what I made and the interesting problem behind each.
π DSP Signal Lab - real-time FFT in the browser
- Live demo: https://dsp-signal-lab.vercel.app/
- Code: https://github.com/Dhananjay-ku-seth/dsp-signal-lab
A signal generator (sine / square / sawtooth / triangle) feeding a live 2048-point FFT spectrum analyzer, with injectable white noise and switchable digital filters (lowpass / highpass / bandpass / notch).
The fun part: the FFT is real, not a fake animation. It uses the Web Audio API's AnalyserNode, so when you pick a square wave you can watch the odd harmonics appear in the spectrum, then sweep a lowpass cutoff down and see them get attenuated in real time. Switch to microphone mode and whistle - the peak tracker finds your pitch.
π€ PID Control Playground - tune a line-follower robot live
- Live demo: https://pid-control-playground.vercel.app/
- Code: https://github.com/Dhananjay-ku-seth/pid-control-playground
A top-down robot follows a winding track using a real PID loop on its cross-track error. You drag the Kp / Ki / Kd sliders and watch the effect immediately.
Under the hood it's a double-integrator plant with sub-stepped Euler integration and integral anti-windup - so it behaves like a real control system. Set the derivative gain to zero and the robot oscillates around the line forever; add it back and the wobble damps out. There's a β‘ disturbance button to kick it off course and watch the loop recover, plus a live error-vs-time strip chart.
π Logic Circuit Simulator - drag, wire, and watch signals flow
- Live demo: https://logic-circuit-sim.vercel.app/
- Code: https://github.com/Dhananjay-ku-seth/logic-circuit-sim
Place gates (AND / OR / NOT / NAND / NOR / XOR / XNOR), wire them port-to-port, toggle the inputs, and see the signals propagate live - with an auto-generated truth table.
The tricky bit was supporting sequential circuits, not just combinational ones. A naive left-to-right evaluator deadlocks on a feedback loop like an SR latch. I used an iterative relaxation solver (40 passes) that evaluates combinational logic instantly and converges feedback loops, so latches and flip-flops actually settle. Load the SR-latch example and toggle Set / Reset to see it work.
π‘ Comms Simulator - modulation, constellations, and BER
- Live demo: https://comms-simulator-pi.vercel.app/
- Code: https://github.com/Dhananjay-ku-seth/comms-simulator
Three tabs covering a communication systems course:
- Analog: AM/FM modulation in the time domain, with the AM envelope and over-modulation shown live.
- Constellation: BPSK / QPSK / 16-QAM ideal points plus the received cloud over an AWGN channel, with a live symbol-error rate.
- BER curve: a Monte-Carlo bit-error-rate simulation (60,000 bits per SNR point) plotted against the theoretical Q-function on a semilog axis.
Everything uses unit-energy symbols, Gray-coded PAM-4 mapping, BoxβMuller AWGN, and Q(x) = Β½Β·erfc(x/β2). The satisfying moment is watching the simulated BER curve hug the theoretical one - and seeing it floor out at ~10β»β΅ because 60k bits can't resolve errors any rarer than that.
How they're built
- Stack: React + TypeScript + Vite, deployed on Vercel.
- No black boxes: every FFT, filter, control loop, logic solver, and modulation/demodulation routine is hand-written. The goal was to understand the math, not import it.
- Rendering: plain and SVG - no charting libraries.
- Design: a shared dark "lab" aesthetic so they feel like one toolkit.
Why bother?
Because interactive beats static every time. You can read that a PID controller overshoots without derivative gain - or you can drag a slider and watch it happen. I wanted tools a student (or a curious recruiter) could open and immediately get an intuition from.
If you find these useful or spot something to improve, I'd love to hear it - the repos are open.
- More of my work: https://dhananjay-kumar-seth.vercel.app/
- GitHub: https://github.com/Dhananjay-ku-seth
- LinkedIn: https://www.linkedin.com/in/dhananjay-kumar-seth-4a5b31283/
Thanks for reading - go break one of the demos. π§
Comments
No comments yet. Start the discussion.