使用canvas实现有趣的弹簧效果

// dragCoefficient值越大说明阻力越大
F = -v * dragCoefficient

// 获取重力单位向量
function getGravityNorVector() {
  return {
    x: 0,
    y: 1,
  };
}

// 获取重力大小
function getGravitySize() {
  return m * g;
}

// 获取弹力单位向量
function getElasticityNorVector() {
  // 左球球心坐标减右球球心坐标，然后做向量归一化
  return normalized(createVector(originPosition, targetPosition));
}

// 获取弹力大小
function getElasticitySize() {
  // 计算Δx
  const offsetX =
    length(createVector(originPosition, targetPosition)) - originElasticitySize;

  // 胡克定律，只要大小，所以取绝对值
  return Math.abs(-offsetX * K);
}

// 空气阻力，dragCoefficient为阻力系数，输出是一个向量
const other = {
  x: -vx * dragCoefficient,
  y: -vy * dragCoefficient,
};

// 单位向量 * 向量长度可以得到矢量力，输出是一个向量
const elasticityAndGravity = add(
  mul(getElasticitySize(), getElasticityNorVector()),
  mul(getGravitySize(), getGravityNorVector())
);

// 所有力的合成，输出是一个向量
const total = add(elasticityAndGravity, other);

// 获取力在x轴和y轴分量向量
function getXYAxisVector(fNorVector, fSize) {
  const yAxisNorVector = createVector(
    {
      x: targetPosition.x,
      y: targetPosition.y - 1,
    },
    targetPosition
  );
  const xAxisNorVector = createVector(
    {
      x: targetPosition.x - 1,
      y: targetPosition.y,
    },
    targetPosition
  );

  // 分别点击求向量在水平单位向量和垂直单位向量的余弦值
  const cosYAxis = dot(yAxisNorVector, fNorVector);
  const cosXAxis = dot(xAxisNorVector, fNorVector);

  return {
    yVector: mul(fSize * cosYAxis, yAxisNorVector),
    xVector: mul(fSize * cosXAxis, xAxisNorVector),
  };
}

// 获取水平和垂直分力向量
const result = getXYAxisVector(normalized(total), length(total));

// 获取水平和垂直方向加速度
const xAcceleration = result.xVector.x / m;
const yAcceleration = result.yVector.y / m;

vx += xAcceleration;
vy += yAcceleration;
targetPosition.x += vx / 100;
targetPosition.y += vy / 100;