Repository: motion-canvas/motion-canvas
File: packages/core/src/tweening/spring.ts (TypeScript)

Code before:
  const startTime = thread.time();

  // figure out the step length for each frame
  const timeStep = 1 / project.framerate;

  settleTolerance = settleTolerance ?? 0.001;
  let position = from;
  let velocity = spring.initalVelocity ?? 0;
  let settled = false;

  onProgress(from, 0);
  while (!settled) {
    const positionDelta = position - to;

    // using hooks law: F=-kx; with k being the spring constant and x the offset to the settling position
    const force = -spring.stiffness * positionDelta - spring.damping * velocity;

    //updating the velocity
    velocity += (force / spring.mass) * timeStep;

    // apply velocity to the position
    position += velocity * timeStep;

    // the simulation would run forever but is often barely noticable after some seconds
    // we fix this by checking if the delta delta between $to and $position is smaller than the given $settleTolerance
    // but we also need to check if the velocity is below the tolerance too
    if (
      Math.abs(to) - Math.abs(position) < settleTolerance &&
      Math.abs(velocity) < settleTolerance
    ) {
      settled = true;
    }

    const time = project.time - startTime;
    const value = position;

    if (time > 0) {
      onProgress(value, time);
    }
    yield;
  }
  const endTime = thread.time();

  thread.time(endTime);

  onProgress(to, endTime);
  onEnd?.(to, endTime);
}

export interface Spring {
  mass: number;

Review comment (suggestion):
Unfortunately, prettier won't do this for you, but comments should also be limited to 80 characters.
Also, a few minor mistakes in spelling/grammar:
```suggestion
    // The simulation would run forever but is often barely noticeable after
    // some seconds. We fix this by checking if the delta between `to` and
    // `position` is smaller than the given `settleTolerance`. But we also need
    // to check if the velocity is below the tolerance too.
```

Code after:

  const onProgress: ProgressFunction = (value: number, time: number) => {
    if (typeof settleToleranceOrOnProgress === 'function') {
      settleToleranceOrOnProgress(value, time);
    } else if (typeof onProgressOrOnEnd === 'function') {
      onProgressOrOnEnd(value, time);
    }
  };

  spring = spring ?? {
    mass: 0.05,
    stiffness: 10,
    damping: 0.5,
  };

  if (spring.mass <= 0) {
    useLogger().error(new Error('Spring mass must be greater than 0.'));
    return;
  }
  if (spring.stiffness < 0) {
    useLogger().error(
      new Error('Spring stiffness must be greater or equal to 0.'),
    );
    return;
  }
  if (spring.damping < 0) {
    useLogger().error(
      new Error('Spring damping must be greater or equal to 0.'),
    );
    return;
  }

  const project = useProject();
  const thread = useThread();

  let position = from;
  let velocity = spring.initialVelocity ?? 0;

  const update = (dt: number) => {
    if (spring === null) {
      return;
    }
    const positionDelta = position - to;

    // Using hooks law: F=-kx; with k being the spring constant and x the offset
    // to the settling position
    const force = -spring.stiffness * positionDelta - spring.damping * velocity;

    // Update the velocity based on the given timestep
    velocity += (force / spring.mass) * dt;