Giter Site home page Giter Site logo

sand's Introduction

sand

Release Software License Netlify

Try simulations easily. https://sand.bettercallshao.com/

screenshot

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, 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 to study properly and rationalize about, and one can gain a great deal of confidence in the natural world by understanding a linear system. But most people don't learn it in school, and instead rely on conventional wisdoms of various kinds to dictate their everyday decision making. Therefore, I am trying preach the useful concepts arising from studying linear systems, and sand is created as an accessible tool capable of simple simulations that helps with the preaching. For serious scientific research, I believe Simulink is great, and Xcos is a great alternative.

How do I use this?

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

Diagram

Top left quadrant is a System diagram composed from different Types of Boxes (aka transfer functions) of unique Ids. Each box has many 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 with step input is generated by default.
  • Boxes can be crated by selecting a type and an unique id.
  • Boxes can be removed by clicking the X in the box.
  • An input port can be linked to an output port by dragging.
  • Links can be broken by double clicking.
  • Box types are predefined in builtinBoxType.js.

Initialization

Top right quadrant is Initialization assigning each Variable an initial value. A variable is named after the output end, unless it represents only an input, in which case the name starts with a ":". stepCount and stepSize are special configs for the solver.

Graph

Bottom quadrants are scatter plot Graphs of variables against each other. length is a special variable representing time. Whenever the diagram or initialization is changed, the system simulation is rerun, and results are updated on graphs.

Sharing

The app is always saved in the URL itself. The URL alone captures all of the states, and can be bookmarked or shared. Since the URL is long, for a better sharing experience, consider shortening it with tinyurl. E.g.

What next?

  • More box types, e.g. Dirac, division, square, triangle, etc.
  • When states are long, URL may explode. Probably need another way to share.
  • The diagram library is kinda ugly, especially the links don't bend gracefully and get hidden behind the boxes.
  • Link creation is not validated, connecting two inputs or two outputs doesn't make sense and will make the system invalid.
  • Convergence of state is not detected and the solver always runs certain number of steps.
  • Whether a box is "constant" type or "persistent" type is not conveyed to the user. This is a key point in understanding the system and how the solver works.
  • Whether a variable is "constant" or "persistent" is similarly also not conveyed. Initialization an output of a constant box is pointless because it is overwritten every step. Maybe hide these from the initialization form.
  • Maybe rename "length" to "time". "Length" is used because the base could be something else, e.g. the length of a beam.

sand's People

Contributors

bettercallshao avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.