P5JS使用curveVertex不连接第1与第2个点但vertex正常的原因求解

• 顶点绘制逻辑差异
  vertex()用于绘制直线段，每两个连续传入的顶点会直接连接为直线，没有额外控制点要求，按顺序传入顶点即可生成连续的线段。
  curveVertex()底层采用Catmull-Rom样条曲线算法，该算法需要额外的控制点来确定曲线的曲率：传入的第1、2个顶点为起始控制点，不会生成二者之间的曲线段，实际绘制的曲线从第2个顶点开始；最后2个顶点为结束控制点，不会生成二者之间的曲线段，实际绘制的曲线到倒数第2个顶点结束。
  你当前的代码中，传入curveVertex的顶点序列为[p0, p1, p2, ..., pn, pn]，按照算法规则，起始控制点是p0和p1，因此p0到p1的段不会被绘制，就出现了第一段缺失的问题。
• endShape(CLOSE)的生效原因
  调用endShape(CLOSE)时，P5JS会将首尾顶点连接，同时将顶点序列视为环形处理，此时原来的结束控制点会被复用为起始段的控制点，p0到p1的段会被纳入绘制范围，但也会额外生成最后一个顶点到p0的连线，不符合你的需求。

只需要在原有顶点序列的首尾各多添加一个和首尾顶点相同的控制点即可，修改后的代码片段如下：

function draw() {
  beginShape()
  noFill()
  stroke('black')
  strokeWeight(5)
  
  // 新增：起始控制点，和第一个正式顶点坐标一致
  curveVertex(x, y)
  // 原第一个顶点
  curveVertex(x, y)
  
  let points = []
  points.push({x: x, y: y})
  
  for (let i = 0; i < segments; i++){
    yRand = random(-(height * 0.125), height * 0.125);
    x += length / segments
    y += yRand
    curveVertex(x, y);
    points.push({x: x, y: y})
  }
  // 原最后一个顶点
  curveVertex(x, y)
  // 新增：结束控制点，和最后一个正式顶点坐标一致
  curveVertex(x, y)
  
  endShape()
  
  stroke('#ff9900')
  strokeWeight(10)
  points.forEach(function(p){
    point(p.x, p.y)
  })
  
  noLoop();
}

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