Modernizing a JavaScript project for simulating physical experiments and the role of AI in this / Habr / CheapToken News

Making such changes alone takes a tremendous amount of time. In this situation, AI tools proved useful by helping me refactor the code and modernize the project in a much shorter time.

This article describes how the project changed, how ChatGPT and Cursor were used, and what problems had to be addressed.

Description of the demonstrations and physics theory

The current version of the project

The updated project can be viewed here. A website with the demonstrations is available via this link.

The project is a classic web application that uses HTML pages, JavaScript, and CSS files without including any third-party libraries.

You can select a demonstration of interest from the panel on the left. In the middle is an area for scenes, where the physical experiment is displayed.Here, the user can observe the behavior of objects or devices. It is also possible to influence the response of the models, for example, by dragging and suspending physical bodies. The scenes themselves are displayed in the program on the Canvas using JavaScript. In the panel on the right, the user can change the physical quantities and parameters used in calculations in the formulas.

Each scene demonstrating physical phenomena belongs to a specific section of physics. The program includes experiments from the following sections: mechanics, mechanical oscillations, and hydrostatics.

Law of Addition of Forces at an Angle to Each Other

Иллюстрация закона сложения сил под углом к другу

Illustration of the Law of Addition of Forces at an Angle to Each Other

The force acting on a body is a vector quantity and is measured in newtons. When two forces act on a body at an angle, their resultant force is calculated using the following formula:

$F_R = \sqrt{F_1^2 + F_2^2 + 2 \cdot F_1 \cdot F_2 \cdot \cos\alpha}$

The user of the demonstration in the project can change the masses of the loads and the angle between the dynamometers used to measure force. After the body is dragged and suspended from the dynamometers, the resultant force is calculated and an animation of the dynamometer arrows is displayed.

Скриншот физической сцены “Сложение сил, направленных под углом друг к другу”

Screenshot of the physical scene “Addition of Forces Directed at an Angle to Each Other”

Law of Hydrostatics and Aerostatics

Illustration of Archimedes’ Principle

Archimedes’ principle: a body immersed in a liquid or gas is acted upon by a buoyant force equal to the weight of the volume of liquid or gas displaced by that body.The buoyant force is calculated using the formula:

$F_{\text{А}} = \rho \cdot g \cdot V$

In the project, the user can change: $\rho$ (ρ) — the density of the liquid or gas ( $\text{кг/м}^3$ ), — the volume of the submerged body ( $\text{м}^3$ ) and the weight of the body. After the body is dragged and suspended from a spring dynamometer, the body's volume, buoyant force, and weight are calculated, and an animation of the dynamometer is also displayed.

Скриншот физической сцены “Закон Архимеда”

Screenshot of the physical scene “Archimedes’ Law”

Mathematical pendulum

Illustration of the mathematical pendulum

A mathematical pendulum is a point mass suspended on a weightless, inextensible string (an idealized system). The oscillation period is the time it takes for the pendulum to complete one full oscillation. It is calculated using the formula:

$T = 2\pi \sqrt{\frac{l}{g}}$

In the project, the user can change — the length of the string and the initial oscillation angle, and can also see the results of calculating the period and frequency of oscillations.

Скриншот физической сцены “Математический маятник”

Screenshot of the physical scene “Mathematical Pendulum”

Damped spring oscillations

Illustration of spring oscillations

Damped spring oscillations are free oscillations whose energy decreases over time under the influence of resistive forces. The following formula is used to calculate the frequency of damped oscillations:

$f_d = \frac{1}{2\pi} \sqrt{\frac{k}{m} - \frac{c^2}{4m^2}}$

TAG177@@The frequency is measured in hertz ( $\mathrm{Гц}$ ) and is used only to display information to the user.To implement damped oscillatory motion realistically, a differential equation of motion is used in the code.

The website user can change: — the stiffness of the spring ( $\mathrm{Н/м}$ ), — the mass of the load ( $\mathrm{кг}$ ), — the damping coefficient ( $\mathrm{Н \cdot с/м}$ ). After the body is dragged and suspended from the spring, the oscillation frequency is calculated, and an animation of the spring’s damped oscillations is displayed.