This is a web-based Computer Science project that calculates and visually represents the Fibonacci sequence. Users can input their desired sequence length, and the application dynamically generates the sequence using a recursive algorithm. The resulting numbers are then mapped and drawn onto an HTML5 <canvas> element for a clear and geometric visualization.
- Interactive Input: Users can define the length of the Fibonacci sequence they want to visualize.
- Recursive Calculation: The sequence generation is implemented strictly through a recursive JavaScript function.
- Dynamic Canvas Rendering: Utilizes the HTML5 Canvas API to draw the sequence (e.g., as a series of scaled squares, arcs, or a continuous spiral) based on the calculated values.
- HTML5: Page structure and the
<canvas>element. - CSS3: Styling and layout of the user interface.
- JavaScript (ES6): DOM manipulation, event handling, Canvas rendering, and recursive logic.
The core of the logic relies on recursion to find the nth number in the Fibonacci sequence. The base mathematical definition used is: F(n) = F(n-1) + F(n-2) (with base cases F(0) = 0 and F(1) = 1.
Note: While pure recursion elegantly demonstrates the mathematical definition of the sequence, it has exponential time complexity O(2^n). Hence, for larger inputs, this project serves as a great study on call stack limits and algorithmic efficiency.
Once the sequence array is built, the script iterates through the values to draw shapes on the canvas. Because Fibonacci numbers grow exponentially, the rendering logic includes dynamic scaling with respect to the ratio between the current number and the maximum number in the generated sequence. It's done to ensure the visualization fits within the canvas boundaries regardless of the user's input size.
