Description
Introduction
This project showcases an iterative curve fitting algorithm through an interactive graph interface. Users can zoom, pan, and scale the graph to explore how the algorithm evolves over time.
The data points are generated programmatically, often using mathematical functions such as sine waves or random distributions to simulate realistic scenarios.
Users can also add or modify data points directly on the graph. The algorithm responds by adjusting polynomial coefficients to minimize the error between the curve and the data.
Implementation
The visualization and interaction are handled using p5.js. The core of the project is a polynomial curve fitting algorithm that uses gradient descent to minimize the fitting error.
Gradient descent works by computing the gradient of the loss function with respect to each coefficient and updating them to reduce the total error.
As the algorithm runs, the polynomial curve is updated in real time, allowing users to observe the fitting process as it converges. The error is also visualized to highlight the effectiveness of each iteration.
What I Learned
This project gave me hands-on experience with implementing gradient descent for curve fitting and reinforced my understanding of how optimization algorithms operate.
I also improved my skills in developing real-time, interactive visualizations using p5.js and managing dynamic user input within a simulation context.
Additionally, I learned how to generate and manipulate synthetic data to create realistic test conditions for algorithm development and demonstration.
Instructions:
- • Mouse Drag: Pan around the graph
- • Mouse Wheel: Zoom in / Zoom out
- • Shift + Mouse Drag: Scale graph vertically
- • Control + Mouse Drag: Scale graph horizontally
- • Space: Create new curve
- • S: Create new sinusoidal curve