Numerical Analysis Visualization

The result of this project is uploaded on my Github Pages. Special thanks to woogenius for his aid when I got stuck, especially with introducing Pyodide to me.

• Enhanced Visual Design: Implemented a modern, 3Blue1Brown-inspired UI with glassmorphic design elements
• Improved Accessibility: Fixed text contrast issues by updating all control text colors from light to dark themes for better readability on the light control panel background
• Responsive Layout: Added proper viewport sizing and responsive canvas dimensions that adapt to screen size

• Auto-Expanding Panel: Control panel now automatically expands when dropdowns are opened, ensuring all options are visible without scrolling
• Full Option Visibility: All 9 interpolation methods (Wavy, Linear, Lagrange, Quadratic Spline, Cubic Spline, 4th Spline, 5th Spline, Akima, PCHIP) are now easily accessible
• Improved Dropdown Styling: Updated dropdown backgrounds to match the light theme with proper contrast and enhanced visual feedback

• React 18 Migration: Upgraded from React 17 to React 18 with modern concurrent features
• TypeScript Integration: Added comprehensive TypeScript support for better development experience and type safety
• Performance Optimization: Replaced setInterval with requestAnimationFrame for smooth 60fps animations
• Pyodide Upgrade: Updated from Pyodide 0.1.1 to 0.25.1 for significant performance improvements

• Code Quality Tools: Added ESLint, Prettier, and TypeScript strict mode for better code quality
• Modern Architecture: Implemented proper React hooks patterns, error boundaries, and performance optimizations
• Build System: Updated dependencies and build configuration for modern deployment standards

Currently, there are three interpolation methods supported, which are linear, wavy, lagrange. Adding new certain interpolation method should follow the steps below:

1. Implement a function that represents the interpolation method in init.py, which receives pivotal_position(np.array of 2d position) and returns path_position(np.array of 2d position) that describes interpolation curve. Note that name of the function must be formatted {name}_interpolation
2. Add {value:name, label:name} in INTERPOLATION_OPTIONS of constant.js.

More interpolation methods will be added soon.

Thanks to remarkable Pyodide, this project uses Python on the web.

One can double click to add FloatingPoints on the canvas, which are draggable. Enjoy the sight of a dynamic curve as points change their position!

Animations on FloatingPoints can be toggled by a switch on the left-top side of the resulting page. More information below.

One can choose what animation she will put on FloatingPoints. In addition, parameters for animating functions are also configurable. More information below.

One can select an interpolation method to connect points with. This option can be found on right-top side of the page.

Just for FUN!!

• Animations that its displacement does not depend on time(This terminology is terrible).
• Possible absolute animations can be Brownian motion, linear movement, etc.
• New animations can be easily implemented through adding animation functions in absoluteAnimations and adding corresponding contents in ABSOLUTE_ANIMATION_OPTIONS of constant.js.

• Animations that depend on "animated time" of a FloatingPoint.
• Possible relative animations can be a simple circular motion, simple harmonic movement, etc.
• New animations can be easily implemented through adding animation functions in relativeAnimations and adding corresponding contents in RELATIVE_ANIMATION_OPTIONS of constant.js.

• scipy.interpolate
• Pyodide