如何实现圆上非均匀点绘制：左右密集上下稀疏

要达成点在圆左右两侧聚集、顶部底部均匀分散的效果，核心是打破角度均匀递增的逻辑，改用非线性的坐标分布策略，以下是两种可行实现方案：

方案一：基于y坐标均匀分布（推荐） #

原理 #

圆的标准方程为 (x - centerX)² + (y - centerY)² = radius²。如果让y坐标在 [centerY - radius, centerY + radius] 范围内均匀取值，再反向计算对应的x坐标（左右两侧各一个），就能自然实现需求：

• 当y接近水平中线（centerY）时，x的绝对值接近半径，对应圆的左右两侧，相同的y间隔会生成大量聚集的点；
• 当y接近顶部/底部（centerY ± radius）时，x接近圆心，点会稀疏且均匀分布。

伪代码 #

var points = [];
var halfPoints = Math.floor(numPoints / 2);
var isOdd = numPoints % 2 !== 0;

// 遍历生成点：从圆的底部到顶部
for (var i = 0; i < halfPoints + (isOdd ? 1 : 0); i++) {
  // 生成均匀分布的y值
  var normalizedY = i / (numPoints - 1);
  var y = centerY - radius + normalizedY * 2 * radius;
  
  // 计算左侧点的x坐标
  var deltaY = y - centerY;
  var xLeft = centerX - Math.sqrt(radius * radius - deltaY * deltaY);
  points.push(xLeft, y);
  
  // 生成右侧对称点（奇数点时最后一个只生成左侧）
  if (!(isOdd && i === halfPoints)) {
    var xRight = centerX + Math.sqrt(radius * radius - deltaY * deltaY);
    points.push(xRight, y);
  }
}

方案二：基于非线性角度映射 #

如果你偏好使用三角函数实现，可以通过非线性角度转换，把均匀的参数映射为角度，让角度在左右两侧（θ接近0或π）变化更密集：

伪代码 #

var points = [];
for (var i = 0; i < numPoints; i++) {
  // 生成0~1之间的均匀参数t
  var t = i / (numPoints - 1);
  // 非线性映射角度：通过sin函数让角度在左右两侧聚集
  var angle = Math.PI * (1 + Math.sin(Math.PI * (t - 0.5)));
  
  var x = centerX + radius * Math.cos(angle);
  var y = centerY + radius * Math.sin(angle);
  points.push(x, y);
}

该映射会让t从0到1时，角度θ从0平滑过渡到2π：在θ=0（左）、θ=π（右）附近，t的微小变化对应更小的角度增量，点会聚集；在θ=π/2（上）、θ=3π/2（下）附近，角度增量更大，点分布均匀稀疏。

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