Try simulation easily with sand

One day, I was trying to explain to my wife (a financier) how to use Gain Margin to gauge the stability of a system, ending up having to explain what is a linear system and a state space. It came off as very vague and mystical, but I rather believe a second order linear system is the simplest system

Try simulation easily with sand
Loading the Elevenlabs Text to Speech AudioNative Player...

Release
Software License
Netlify

Try simulations easily (GitHub). https://sand.bettercallshao.com/

Why does this exist?

In college, I enjoyed playing with dynamic solvers, including LT-SPICE, Ansys, SolidWorks, but most of all MATLAB / Simulink. One day, while explaining Gain Margin to my wife (a financier), I realized how abstract these concepts might seem to non-engineers.

I believe a second-order linear system is the simplest system to study properly and reason about. Understanding it can provide great confidence in comprehending the natural world. However, most people don't learn this in school and instead rely on conventional wisdom for everyday decision-making.

sand is created as an accessible tool for simple simulations, aiming to teach useful concepts arising from studying linear systems. For serious scientific research, I recommend Simulink or Xcos as alternatives.

How do I use this?

Use the app by creating a Diagram, setting Initializations, then observing Graphs, and finally Sharing it with your friends.

Diagram

The top-left quadrant is a System diagram composed of different Types of Boxes (aka transfer functions) with unique Ids. Each box has multiple Ports representing Variables, with inputs on the left and outputs on the right. Linked ports share the same Variable. A system can be simulated given initial values.

  • An initial 2nd order system with step input is generated by default.
  • Create boxes by selecting a type and a unique id.
  • Remove boxes by clicking the X in the box.
  • Link an input port to an output port by dragging.
  • Break links by double-clicking.
  • Box types are predefined in builtinBoxType.js.

Initialization

The top-right quadrant is Initialization, assigning each Variable an initial value. Variables are named after the output end, unless they represent only an input, in which case the name starts with a ":". stepCount and stepSize are special configs for the solver.

Graph

The bottom quadrants are scatter plot Graphs of variables against each other. length is a special variable representing time. The system simulation reruns and results update on graphs whenever the diagram or initialization changes.

Sharing

The app's state is always saved in the URL itself, which can be bookmarked or shared. For a better sharing experience, consider shortening the URL with TinyURL. E.g.:

What next?

  • Add more box types (e.g., Dirac, division, square, triangle)
  • Implement alternative sharing method for long states to avoid URL explosion
  • Improve the diagram library's aesthetics, especially link bending and visibility
  • Validate link creation to prevent connecting two inputs or two outputs
  • Detect state convergence instead of always running a fixed number of steps
  • Convey whether a box is "constant" or "persistent" type to users
  • Indicate whether a variable is "constant" or "persistent"
  • Consider renaming "length" to "time" (note: "length" is used because the base could be something else, e.g., the length of a beam)

Subscribe to Better Call Shao

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe