Visualizing transfer functions in p5.js
In 2020 I was following lectures on automatic control and learned about the transfer function of a system and ways to visualize it, at which point I was curious so I went ahead and wrote a simple visualizer for generic transfer functions.
You can jump ahead to the visualizer.
Setup
The basic idea is that we can build a system with a feedback loop that takes an input signal $x(t)$ and outputs another signal $y(t)$ :
We then focus on linear time-invariant (LTI) transformations, which in a few words are those which take as input $e(t)$ and output $y(t) = (e \ast h)(t)$ , where $h(t)$ is called the impulse response since it is exactly the value of the output $y(t)$ if our input where an impulse $e(t)=\delta(t)$ .
In the Laplace function space, the convolution of our transformation becomes a multiplication $Y(s) = H(s)E(s)$ .
Let’s plug in our $H(s)$ in the feedback loop!
We recursively apply it so we end up with:
$$ \begin{align*} Y(s) &= \left( H(s) + H(s)^2 + H(s)^3 + \dots \right) \cdot X(s) \\ &= \frac{H(s)}{1 - H(s)} \cdot X(s) \end{align*} $$Visualizer
Note that if our $H(s)$ touches the value 1 we’ll end up with an $\infty$ , oops.
So, when designing $H(s)$ we want to make sure that it is some distance away from 1.
But $H: \mathbb{C} \rightarrow \mathbb{C}$ , how can we visualize it?
Well, there are multiple approaches and this is where I got curious and decided to write a visualizer in p5.js. I included a cartesian plot and a Nichols plot. Other common plots include Bode and Nyquist.
I also included a simple abstract syntax tree (AST) parser and traversal so you can write any $H(s)$ you want and see what happens!
You can try it out right here:
Controls:
Drag to move around.
Mouse wheel to zoom in/out.
Space to reset offset.
