极坐标圆图两点间指定步数路径绘制的JS几何求助

直接线性混合HUE（角度）和CHROMA（极径）会生成圆弧路径的点，因为极坐标的角度插值本质是绕圆心转动，而非两点间的直线。要得到直线路径，必须先转换到笛卡尔坐标系做线性插值，再转回极坐标。

核心步骤 #

• 极坐标转笛卡尔坐标：将两个点的HUE（转弧度）和CHROMA转换为平面直角坐标(x,y)
  公式：

  弧度 = HUE * Math.PI / 180
  x = CHROMA * cos(弧度)
  y = CHROMA * sin(弧度)
  

• 笛卡尔坐标系线性插值：对x、y分别按步长做线性混合，生成中间点。插值系数t从0到1均匀分布（t=0对应起点，t=1对应终点）：

  x_t = x起点 + t*(x终点 - x起点)
  y_t = y起点 + t*(y终点 - y起点)
  

• 笛卡尔坐标转回极坐标：将插值后的(x,y)转换回HUE和CHROMA：

  CHROMA_t = sqrt(x_t² + y_t²)
  弧度_t = atan2(y_t, x_t)
  HUE_t = 弧度_t * 180 / Math.PI
  // 若HUE_t为负，加360转为0-360范围
  

修改后的JS代码示例 #

// 极坐标转笛卡尔坐标
function polarToCartesian(hue, chroma) {
  const radians = hue * Math.PI / 180;
  return {
    x: chroma * Math.cos(radians),
    y: chroma * Math.sin(radians)
  };
}

// 笛卡尔坐标转极坐标
function cartesianToPolar(x, y) {
  const chroma = Math.sqrt(x * x + y * y);
  let radians = Math.atan2(y, x);
  let hue = radians * 180 / Math.PI;
  // 转换为0-360的色相范围
  if (hue < 0) hue += 360;
  return { hue, chroma };
}

// 生成两点间的直线步点
function generateLinearSteps(startHue, startChroma, endHue, endChroma, stepCount) {
  const start = polarToCartesian(startHue, startChroma);
  const end = polarToCartesian(endHue, endChroma);
  const steps = [];
  
  for (let i = 0; i < stepCount; i++) {
    const t = i / (stepCount - 1); // 插值系数，覆盖0到1
    const x = start.x + t * (end.x - start.x);
    const y = start.y + t * (end.y - start.y);
    steps.push(cartesianToPolar(x, y));
  }
  
  return steps;
}

// 使用示例：从(色相30, 彩度50)到(色相150, 彩度80)生成5个步点
const linearSteps = generateLinearSteps(30, 50, 150, 80, 5);
console.log(linearSteps);

这段代码生成的步点会严格沿两点间的直线路径分布，而非绕圆弧绕行。

内容的提问来源于stack exchange，提问作者cupofjoe