Task 4 of 5

One Tick of the Clock

Accelerations are just numbers until an integrator turns them into motion. The simplest scheme that doesn't wreck orbits is semi-implicit Euler: update the velocity first, then move the body with the new velocity — v′ = v + a·dt, then x′ = x + v′·dt. Do it in the other order (plain Euler) and orbits visibly spiral outward, gaining energy from nowhere.

Both updates are embarrassingly parallel — body i never looks at body j — so they're two tiny kernels. Between them, the [vx, vy] pairs come back to JavaScript and get unpacked into plain arrays for the next kernel. Clunky? Yes. Instructive? Also yes — and Pipelines & Textures shows how to skip the round trip.

Goal: finish both kernels — stepVel returns [v + a·dt] per component, stepPos returns [x + v·dt] — and feed the position step the new velocities.

Requirements

stepVel returns [vx + ax·dt, vy + ay·dt] for its body
stepPos returns [x + vx·dt, y + vy·dt] for its body
The position step must receive the updated velocities (semi-implicit, already wired up)

Hint 1 — the same index four times

Everything in both kernels is indexed by this.thread.x: this body's velocity, this body's acceleration, this body's position.

Hint 2 — the velocity kernel

return [velX[this.thread.x] + accX[this.thread.x] * dt,
        velY[this.thread.x] + accY[this.thread.x] * dt];

— the position kernel is the same shape with pos and vel.

Same idea elsewhere

Splitting an integrator into per-buffer passes is exactly how GPU engines ship it: WebGPU dispatches one compute pass per update with position/velocity buffers ping-ponging between bind groups, and Metal encodes the same thing as back-to-back compute command encoders. The math stays this small; the choreography is the product.

All tasks in N-Body Gravity

This page is an interactive exercise — the editor, the GPU runner and your saved progress need JavaScript. The text above is the full brief.