A lot of students struggle to see all of the moving parts of a differential equation. This visualizer takes one very common related rates problem (the filling of a cone) and animates the graphs and scenario to help students intuitively understand how rates and values are interconnected. When one value changes, all the other values change. And the rates at which they change are connected through the differential equation (which can be derived using implicit differentiation).
- Get comfortable with how formulas connect variables
- Connect the rates of those variables as time passes
- Modify the dimensions of the cone to see how the variables and rates are affected
- Light and Dark Theme
- AI gets it wrong a lot but is a wonderful tool for learning a new framework, fixing small bugs, looking up documentation, and building small components
- AI is not always great with architecture but is great for small details
- Adding floating point numbers increases the complexity of the project and bugs 10x
- Intrinsic design for CSS requires a lot less media queries keeping the code clean and simple
- Detect user's system theme for default behavior
- Add graph of rates as they change (derivative graph)
- Add additional shapes
- Allow user to change the liquid that fills the container
- The rates don't show when the animation is paused
- The graphs don't have a true "time" scale and instead are a simple scaling of the volume or radius/height from empty (0) to full (1)
- Leaving the height and radius fields blank causes the three.js canvas to fail