DEV Community

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

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

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

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

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.

Thanks for reading - go break one of the demos. πŸ”§

Comments

No comments yet. Start the discussion.