处理（P5JS）curveVertex 不连接第 1 和第 2 点，虽然 vertex() 会答案

【问题标题】：Processing (P5JS) curveVertex Not connecting 1st & 2nd Points, though vertex() Will处理（P5JS）curveVertex 不连接第 1 和第 2 点，虽然 vertex() 会
【发布时间】：2021-09-30 16:36:24
【问题描述】：

我正在使用 beginShape() 和 endShape() 函数在 P5JS 中绘制曲线。在向我的形状（一条线）添加点时，我通过curveVertex() 函数这样做。但是，由于某种原因，最终曲线不会在points[0] 和points[1] 之间创建一个段。如果我改为通过vertex() 函数将点添加到曲线中，则第一段被绘制。相关代码：

function draw() {
  

  
  // Loop through creating line segments
  beginShape()
  noFill()
  
  // Add the first point
  stroke('black')
  strokeWeight(5)
  curveVertex(x, y)
  
  // Save points, draw last
  let points = []
  points.push({x: x, y: y})
  
  // Draw line
  for (let i = 0; i < segments; i++){
    
    // Get random y
    yRand = random(-(height * 0.125), height * 0.125);
    
    // Add point to curve
    curveVertex(x += length / segments, y += yRand);
    
    // Save point
    points.push({x: x, y: y})
    
  }
  // Draw Last Point
  curveVertex(x, y)
  endShape()
  
  // Draw the last point & segment
  stroke('#ff9900')
  strokeWeight(10)
  points.push({x: x, y: y})
  points.forEach(function(p){
    point(p.x, p.y)
  })
  
  
  // Draw the line once and stop
  noLoop();
}

这会产生以下图像：

您可以看到 points[0] 和 points1 之间的缺失段。现在，如果我在代码中的三个位置将curveVertex() 替换为vertex()，我会得到以下图像：

如您所见，第一段是在这里绘制的。如果我使用endShape(CLOSE)，我会使用curveVertex 模式获得第一段——但也会在points[0] 和points[-1] 之间画一条线（这是不需要的行为）

我的问题：vertex() 和 curveVertex() 之间有什么区别会省略第一段？

【问题讨论】：

标签： javascript processing p5.js

【解决方案1】：

来自documentation：

一系列curveVertex() 线中的第一个和最后一个点将用于引导曲线的开始和结束。在第二点和第三点之间绘制一条微小的曲线至少需要四个点。使用 curveVertex() 添加第五个点将在第二个、第三个和第四个点之间绘制曲线。

基本上，解决方法似乎是为曲线的起点和终点添加一个重复点，除非应该选择将 CLOSE 参数添加到 endShape() 函数。

这会产生以下图像：

只需要复制curveVertex(x, y) 调用开始和端点。所以点集合 {1, 2, 3, 4, 5} 本质上会变成 {1, 1, 2, 3, 4, 5, 5} 。奇怪，但可以预测。

【讨论】：