Five Types of Mathematical Models and Their Roles
This tool is a generative art engine that visualizes five mathematical models based on regularities and nonlinear equations on a browser.
Each model plays a unique visual role. The Mandelbrot set provides a standard for self-similarity. In the Julia set, c is a fixed recurrence parameter while the initial value z uses pixel coordinates to extract boundary patterns.
Fibonacci simulates plant arrangements via the golden angle (approximately 137.5 degrees). The Lissajous curve synthesizes mutually orthogonal simple harmonic oscillations to express periodicity.
The Lorenz attractor visualizes a chaos attractor trajectory from thermal convection equations. These models intuitively demonstrate mathematical behaviors but do not guarantee strict scientific simulation or AI image generation.
Approximations Using Finite Iterations and Numerical Representations
To draw mathematical models with infinite continuity in a digital environment, it is necessary to set a cutoff point somewhere in the calculation process.
Instead of perfectly reproducing ideal mathematical accuracy, this system adopts an approach that draws approximate figures within the limits of finite iterative calculations and the numerical representation provided by the JavaScript engine.
For example, in calculating the Mandelbrot and Julia sets, a "maximum number of iterations" upper limit (between 20 and 300) is set to determine whether the recurrence relation of complex numbers diverges to infinity.
If the absolute value of the complex number does not exceed a certain threshold by the time it reaches this iteration count, that coordinate is considered to be inside the set and the drawing is terminated.
In simulating differential equations like the Lorenz trajectory, the passage of time is divided into minute steps (Euler method dt 0.01 for 2000 steps), and numerical integration is used to track the trajectory by accumulating the displacement at each step.
All these calculations are executed within the precision limits of floating-point numbers standardly provided by JavaScript. Therefore, in calculations of extremely minute areas or long-term tracking of chaotic trajectories, a loss of mathematical strictness due to the accumulation of rounding errors inevitably occurs.
This tool accepts the state containing such computer-specific approximations and limitations as a kind of digital generative art and expresses it on the screen.
Model-Specific Parameters and Color Control
To bring out the visual diversity, this tool provides an interface to manipulate unique parameters. In the Julia set, the real and imaginary parts of the complex constant added to the recurrence relation can be adjusted with sliders (±2 in steps of 0.01).
In Lissajous curves, the frequency ratios (a, b from 1 to 20) and phase difference (delta from 0 to 3.14) for the X and Y axes can be set individually.
In the Fibonacci spiral, the total number of dots (100 to 2000) and rotation angle (130 to 145 degrees) can be controlled. In the Lorenz attractor, you can separately adjust sigma (5 to 30), rho (10 to 40), display scale (2 to 20), and overall zoom (0.1 to 10).
Colors are calculated based on iteration ratios or dot sequences. Because the Lorenz attractor draws a single path with one stroke, the final strokeStyle is applied globally, and a gradient across each trajectory segment is not guaranteed.
Three Dynamically Changing Models and Two Static Drawing Models
This tool's automatic playback does not operate all 5 models in the same way. When animation is enabled (isAnimated=true), all 5 models are recalculated on every requestAnimationFrame, but time variables are only added to the drawing equations of three types: the Julia set, the Fibonacci arrangement, and the Lissajous curves.
In the Julia set, a small periodic change is added to the real and imaginary parts of the complex constant, continuously displaying the deformation of the boundary.
In the Fibonacci arrangement, a common phase is added to the angle of each point, rotating the entire point cloud. In Lissajous curves, the phase difference on the X-axis advances with time, displaying changes in the curve.
On the other hand, the Mandelbrot set and Lorenz trajectory have static shapes; however, they are still continuously redrawn during animation without altering their mathematical forms.
For the Mandelbrot and Julia sets, you can drag the canvas with a mouse or touch to move the base coordinates across the complex plane.
Dragging while animation is paused updates the mouse or touch offset and increments an internal redraw version counter, triggering the rendering effect so the canvas redraws the view even while animation is stopped.
Throughout this interaction, the underlying canvas pixel resolution and coordinate scale remain completely unchanged, repositioning the viewpoint without altering the rendering grid.
Pixel Drawing PNG Output and Limited SVG Vector Saving
The export functionality for saving generated artwork to a local environment adopts two different approaches depending on the calculation characteristics of each mathematical model.
First, saving as a PNG image is available for all models. The drawing results displayed on the screen can be captured as raster data directly from the internal 300x300 pixel resolution, maintaining the color information according to the specified color theme.
On the other hand, the save function in SVG (Scalable Vector Graphics) format is limited exclusively to the Lissajous curves and Fibonacci (golden angle arrangement).
These SVG exports are generated at an 800x800 resolution directly from the static parameter values; they do not include time variables or animation trails, so the SVG file will not be an exact replica of the animated screen image.
Art saved in SVG format can be scaled without degrading image quality and is suitable for reprocessing in external vector editing software.
However, the Mandelbrot and Julia sets are drawn pixel by pixel, and while the Lorenz trajectory draws lines on the Canvas, SVG generation processing is currently not implemented for these three models.
Therefore, the SVG export function is disabled for these three models, and there is a clear specification difference where only the PNG format can be used when saving as an image.
Execution Performance Constraints and Drawing Reproduction Conditions
This tool uses the current browser's JavaScript execution environment and Canvas 2D API for formula calculations and drawing. While the calculation state is handled within the page, the hardware performance of the device affects the drawing speed.
The internal drawing area has a fixed resolution of 300x300 pixels, which is scaled up by CSS to fit the screen size. Therefore, when the zoom magnification is increased, pixel roughness becomes noticeable.
Also, because it is not an infinite-precision calculation engine, the effects of floating-point number rounding and iteration upper limits appear in high-magnification fractal displays.
If you increase the number of iterations for the Julia set, the number of points for the Fibonacci arrangement, or the number of line segments for Lissajous curves and play them automatically, the frame rate may drop because it uses the browser's main thread.
Considering the calculation limits and internal resolution, if the operation is heavy, please reduce the number of iterations or elements.