Matlab-like phase view
Thick physical links with a thin endpoint trajectory.
Chaos dynamics live demo
Double Pendulum Chaos Simulator
This browser-based simulator demonstrates how a deterministic mechanical system can become practically unpredictable when its motion is highly sensitive to initial conditions.
CAD-like mechanism view
Main pendulum and perturbed pendulum for butterfly-effect comparison.
simulation clock
00:00.00
Core model
\[ \begin{alignedat}{2} \dot{\theta}_1 &= \omega_1,\qquad& \dot{\omega}_1 &= f_1(\theta_1,\theta_2,\omega_1,\omega_2),\\ \dot{\theta}_2 &= \omega_2,\qquad& \dot{\omega}_2 &= f_2(\theta_1,\theta_2,\omega_1,\omega_2) \end{alignedat} \]
Ready. Insert initial conditions and press Play simulation.
What is chaos?
Chaos is not randomness. A chaotic system is deterministic, meaning that its future state is generated by definite equations, but tiny differences in initial conditions grow rapidly over time. Because every real measurement has finite precision, long-term prediction becomes practically impossible even when the governing equations are known exactly.
The double pendulum is a classical example because it has only two rigid links and two angles, yet its nonlinear coupling is strong enough to produce irregular, non-periodic, and highly sensitive motion.
Butterfly effect in this simulator
The butterfly effect means that a very small perturbation in the initial state of a nonlinear dynamical system can eventually produce a large macroscopic difference. In this simulator, the main trajectory and the perturbed trajectory start from almost identical initial conditions. The CAD-like pane shows both double-pendulum states, while the Matlab-like pane emphasizes the endpoint path of the second link.
At the beginning, the two motions may look nearly identical. However, because the double pendulum is a strongly nonlinear coupled mechanical system, the small initial difference is amplified over time. After enough simulation time, the endpoint paths separate clearly, and the motion no longer resembles a simple periodic or harmonic curve. Instead, the endpoint begins to sweep an irregular region of the plane, which visually demonstrates chaotic behavior.
This sensitivity is not limited only to a tiny artificial perturbation added by the simulator. Even small changes in real physical or user-defined initial conditions can produce very different future motion. For example, slightly changing the first-link angle, the second-link angle, the initial angular velocity of either link, the link lengths, or the link masses can alter the acceleration terms in the governing equations. As the simulation continues, these small changes may accumulate and lead to a completely different sequence of rotations, swings, flips, and endpoint trajectories.
Therefore, the double pendulum is an effective visual example of deterministic chaos. The motion is not random: it is generated by deterministic differential equations. However, because the future state depends so sensitively on the starting condition and system parameters, long-term prediction becomes extremely difficult. Two simulations that begin almost the same can evolve into motions that look physically unrelated after a sufficient amount of time.
In practical terms, this means that changing parameters such as link length, link mass, initial angle, or initial angular velocity does not merely make the same motion faster or slower. It can change the qualitative behavior of the system. One set of parameters may produce a relatively smooth swinging pattern for some time, while another very close set may quickly produce tumbling, looping, and highly irregular endpoint paths.
Double pendulum coordinates
Let \(\theta_1\) and \(\theta_2\) be the absolute angular positions of the first and second links measured from the vertical direction. The endpoint coordinates are
\[ x_1 = L_1 \sin(\theta_1),\qquad y_1 = L_1 \cos(\theta_1) \] \[ x_2 = x_1 + L_2 \sin(\theta_2),\qquad y_2 = y_1 + L_2 \cos(\theta_2). \]
The visualization maps these physical coordinates to canvas coordinates, with the pivot near the upper center of each pane. The left pane uses a thin line for the endpoint trace and thick segments for the actual two-link pendulum so the motion keeps physical meaning.
Dynamic equations used by the JavaScript solver
For masses \(m_1,m_2\), lengths \(L_1,L_2\), gravity \(g\), angles \(\theta_1,\theta_2\), angular velocities \(\omega_1,\omega_2\), and \(\Delta = \theta_1 - \theta_2\), the numerical solver evaluates the standard coupled double-pendulum model:
\[ \dot{\omega}_1 = \frac{-g(2m_1+m_2)\sin\theta_1 - m_2g\sin(\theta_1-2\theta_2) - 2m_2\sin\Delta\left(\omega_2^2L_2 + \omega_1^2L_1\cos\Delta\right)} {L_1\left(2m_1+m_2-m_2\cos(2\Delta)\right)} \]
\[ \dot{\omega}_2 = \frac{2\sin\Delta\left(\omega_1^2L_1(m_1+m_2)+g(m_1+m_2)\cos\theta_1+\omega_2^2L_2m_2\cos\Delta\right)} {L_2\left(2m_1+m_2-m_2\cos(2\Delta)\right)}. \]
The simulation integrates these equations with a fourth-order Runge-Kutta method. This gives smoother motion than a simple Euler method and makes the chaotic divergence easier to observe without immediately destroying the mechanical character of the animation.
About this HTML/CSS/JavaScript project
This project is a standalone live demo suitable for GitHub Pages. The HTML file contains the simulator structure and theory sections, the CSS file controls the responsive full-width layout, and the JavaScript file performs the physical simulation, animation, clock update, trajectory drawing, and user-input handling.
No backend server is required for this version. The JavaScript code performs all numerical integration directly in the browser. The layout uses a responsive two-pane animation area and a bottom control pane, while the explanatory content appears below the simulator for visitors who want to understand the mathematics and chaos theory behind the animation.