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 and outputs another signal :

We then focus on linear time-invariant (LTI) transformations, which in a few words are those which take as input and output , where is called the impulse response since it is exactly the value of the output if our input where an impulse .

In the Laplace function space, the convolution of our transformation becomes a multiplication .

Let’s plug in our in the feedback loop!

We recursively apply it so we end up with:

Visualizer

Note that if our touches the value 1 we’ll end up with an , oops.

So, when designing we want to make sure that it is some distance away from 1.

But , 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 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.