Giter Club home page Giter Club logo

rollercoaster's Introduction

Currently busted!

I updated some components but haven't worked through the breaking changes yet. master is broken, currently. I probably should tag a working release. But I haven't bothered. Sorry.

Rollercoaster

This is a 2D "rollercoaster" simulator for use in high school math classes. It's written in ES6 Flow, a typed version of ES6 Javascript from Facebook, because I like having compilers find bugs in my code for me, and I work at Facebook currently.

The idea is that you enter a list of functions with a range, and, if it's continuous, this will simulate a car being dropped, starting at X=0, down the track. If the car leaves the track, bad things happen.

Try it out yourself here.

Getting Started

To run the system, install the Yarn package manager, then go to the root directory and type yarn then, once all the dependencies are downloaded, type yarn start and the app will launch in a web browser. I assume it will also work with npm instead of yarn, but again, I work at Facebook, and yarn seems both faster & more reliable.

I'm using React for rendering. I'm not a trained web dev by any measure (I do C++ compilers), so you'll have to forgive pretty much everything about the system. It's mostly been a bunch of kind of fun little math problems, attached to a visualization problem.

Packaging the code

yarn build will minify, babelify (translate from ES6 Flow to ES5 Javascript), and package everything into the build subdirectory. You can then copy that to your 'puter, and just open it. Since it's all just HTML & Javascript, the idea is that even in the most locked down computer, it can be run without needing admin privileges.

The code itself

It all lives under src. From there, App.js is the main entry point. FuncList.js contains the UI for the functions. FuncGraph.js contains the UI for the graph. UserFunction.js contains the data for the functions. PhysicSim.js contains the majority of the interesting math. coasterRedux.js are where the UI state management stuff lives.

TODO:

  • Math work:
    • Handle non-derivable tangents. Smooth them, probably. mathjs seems to be able to produce the derivative. Given that capability, I could stop estimating the derivative, and just use mathjs to do it...
    • MathJS and AsciiMath aren't quite compatible. The fix is to probably parse the AsciiMath and compile it myself. This seems like a lot of work. An alternative would be to translate the common mathjs expressions into their corresponding asciimath representation. This is probably less work. Both are going to take a fair bit of time...
    • Fix the physics sim to not provide more acceleration when hitting the track. As it stands, there are scenarios where the estimate results in more distance, which causes weird fake acceleration. It looks like heading backward causes this. TODO: I cropped this using some simple kinetic vs. potential energy calculation. There's clearly a problem here, but that seems to do a decent job. Another upside is that it basically adds friction (friction winds up just being the error in the estimation code)
  • UI Work:
    • Add a "follow the cart" zoom mode
    • Make a better, semi-modal function editor:
      • with help
      • continuity assistance
      • derivability guidance, perhaps
    • Prevent the graph from attempting to draw if the functions aren't at least calculable.
    • The MathJax rendered stops responding occasionally. Debug this...
    • The UI needs serious work...
  • Other work:
    • Improve the tests. A lot.
    • Do I want to try to make it work on IE? Edge, Chrome, FireFox, and Safari all seem to work just fine...

rollercoaster's People

Contributors

dependabot[bot] avatar kevinfrei 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.