JavaScript Physics Simulation: Check a Spring Model at Known Phases

A spring can cross the center while an outdated label reports zero velocity. Compute displacement and signed velocity from the same elapsed time so the drawing explains the model.

Apply mass, stiffness, and amplitude, then inspect a paused checkpoint or run time-based motion. The default quarter-period result is x = 0 m and v = −0.50 m/s.

JavaScript Physics Simulation: Check a Spring Model at Known Phases
JavaScript Physics Simulation: Check a Spring Model at Known Phases
Open the full example ↗

Declare the assumptions and units

This original learning fixture has one mass attached to an ideal spring on a frictionless horizontal surface. It has no damping, driving force, collision, or multi-point mesh. Release it from rest at positive amplitude, with phase zero.

Use these authored default parameters:

Parameter Meaning Default
m Mass 2 kg
k Spring constant 8 N/m
A Amplitude from equilibrium 0.25 m
t Model elapsed time 0 s, paused

Positive displacement means right of equilibrium. Negative velocity means motion toward the left. The drawing is a schematic, not a calibrated apparatus or measured experiment.

OpenStax describes the frictionless horizontal spring model and its position, velocity, angular frequency, and period equations. We use those mathematical relationships with our own parameter values and inspection plan, without reproducing its figures or laboratory examples. OpenStax simple harmonic motion

Derive a state from time, not from the previous picture

For phase zero:

omega = sqrt(k / m)
T = 2 * pi / omega
x(t) = A * cos(omega * t)
v(t) = -A * omega * sin(omega * t)

The trigonometric argument is in radians. With m = 2 and k = 8, omega is 2 rad/s and T is pi seconds, approximately 3.14159 seconds.

This is a closed-form model. A frame evaluates the expressions at the current t. It does not approximate motion by adding a fixed number of pixels or integrating force over a guessed frame duration.

Calculate text readings and the schematic from one model snapshot containing parameters, t, x, and v. A label from one time and a mass position from another time would be a display-state error even if each formula were correct.

Keep physical meters separate from pixel mapping. Choose a display transform that fits the full permitted amplitude, then record that it is a visual scale. Resizing changes that transform rather than changing m, k, A, or the computed state.

Inspect four checkpoints while paused

The original default fixture has these mathematical expectations:

Model time Phase Position x Signed velocity v
0 0 +0.25 m 0 m/s
T/4 = pi/4 s pi/2 0 m −0.50 m/s
T/2 = pi/2 s pi −0.25 m 0 m/s
T = pi s 2 pi +0.25 m 0 m/s

At a quarter period, the mass is at equilibrium and moving left. Its speed is largest there in this default trajectory; position zero does not mean velocity zero.

At half a period, it reaches the negative extreme and is momentarily at rest. A zero velocity at that instant does not mean the model should stop running.

Floating-point evaluations can produce a tiny value near a mathematical zero. For this educational check, compare positions with an absolute tolerance of 1e-9 m and velocities with 1e-9 m/s. Normalize near-zero display text, including negative zero, without changing stored model values. These tolerances are authored numerical checks, not measurement accuracy.

An optional paused checkpoint selector can set t to 0, T/4, T/2, or T and recompute one snapshot. Use the current parameters' T; do not keep pi seconds after changing mass or spring constant.

Validate parameters without rejecting a stationary model

For this workbench, allow finite numeric values within m = 1–4 kg, k = 1–16 N/m, and A = 0–0.5 m. Fractions are allowed.

A zero amplitude is valid. Position and velocity remain zero at all model times. The formula-derived T still describes the selected mass/spring parameters, but the zero-amplitude trajectory has no visible oscillation. Do not report an observed cycle from a stationary drawing.

A zero mass or spring constant is outside the input contract and must not reach the division or square root. Blank, non-finite, and out-of-range values require a field issue. Model time must remain finite and nonnegative.

Any parameter edit pauses and invalidates the current run's state/readings. Once the complete new set is valid, restart at t = 0, paused, with the new model. Never show old position/velocity as if they belonged to changed parameters.

Try the worked example

Select Quarter period to see a center crossing with negative velocity. Apply amplitude zero and repeat for a stationary trajectory. Empty mass holds the calculation rather than substituting zero. Zero position does not imply zero velocity.

Recreate this example

Build one complete self-contained HTML page for this task: inspect an ideal spring at known phases using shared analytic snapshots.

Use these exact original practice data and worked expectations: m = 2 kg, k = 8 N/m, A = 0.25 m; omega=sqrt(k/m); T=2pi/omega; x=A*cos(omega*t),v=-A*omega*sin(omega*t). Quarter period: x = 0 m, v = −0.5 m/s. Half period: x = −0.25 m, v = 0 m/s.

Implement the following useful local interactions: Bounds m = 1–4 kg, k = 1–16 N/m, A = 0–0.5 m. Apply restarts t = 0; edits pause and invalidate. Provide quarter/half/full/release and Start/Pause/Reset; use one timestamp-based animation loop and pause on hidden. Keep frame-updated numeric readings outside live announcements; announce only intentional controls and errors in a separate status region. Preserve the supplied source text and distinguish an uncomputed state, a successful local result, and an invalid or incomplete input. Update output only from the current input snapshot. An input edit must retire stale feedback until the reader runs the relevant action again. Do not silently invent missing values or replace a failing case with a success.

Design the page as a compact source-and-result developer workbench with readable code, labeled inputs, and a separate explanation area. Put a compact task heading, actual sample data, the main result, and usable controls early enough to be useful on a narrow screen. Use readable text of at least 16px, generous paragraph spacing, strong contrast, native labels, accessible buttons, and visible keyboard focus. Stack long records at 360px and wrap code without page-level horizontal overflow.

Use type=button and explicit querySelector-based click handlers rather than relying on form submission. If Enter is useful, handle it only on the relevant input and ignore isComposing. Keep effects within this open page; no remote dependencies, network calls, persistence, fake downloads, or automated sending. This ideal frictionless model has no damping or collision and is not an engineering validation. Place worked explanations beside their data and identify teacher or synthetic examples clearly. Output only the complete HTML document, with inline styles and script and LF line endings.

Review the analytic spring workbench in NOS

Compare phase readings before adding visual effects. Use the model explanation in NOS to review the quarter-period reading beside the assumptions, then revise eligible static checkpoint instructions in visual editing mode if the direction of motion is unclear.

Keep reading