Javascript 需要帮助才能使用P5线条绘制功能吗

我试图复制我在这里使用的粗线连接函数，但使用数组中的对象。看起来这段代码应该可以工作，但是没有按照绘制连接线的需要填充这些值。任何帮助都将不胜感激

以下是代码（或此处）：

var dotCount=2；
var点；
变量xTempPos，yTempPos；
变量xEndPos，xEndPos；
函数设置（）{
createCanvas（窗口宽度、窗口高度）；
仰泳（）；
填充（200）；
for（设i=0；i0；i--）{
点阵列[i].connect（）；
xEndPos=dotArray[i].xPos；
xEndPos=dotArray[i].yPos；
xTempPos=dotArray[i-1].xPos；
yTempPos=dotArray[i-1].yPos；
控制台日志（xTempPos）；
}
}
类点{
构造函数（）{
this.xStartPos=随机（宽度）；
this.yStartPos=随机（高度）；
这1.rad=5；
}
草图（）{
椭圆（this.xStartPos，this.yStartPos，this.rad）；
}
连接（）{
中风（200）；
冲程重量（1）；
行（this.xStartPos、this.yStartPos、xTempPos、yTempPos）；
if（xTempPos缺少
dotArray
的声明

var dotArray=[]；

此外，它必须是
xStartPos
，
yStartPos
，而不是
xPos
，
yPos

请参见示例：


var dotCount=2；
var点；
变量xTempPos，yTempPos；
变量xEndPos，xEndPos；
var dotArray=[]；
函数设置（）{
//createCanvas（窗口宽度、窗口高度）；
createCanvas（400200）；
for（设i=0；i0；i--）{
点阵列[i].connect（）；
xEndPos=dotArray[i].xStartPos；
xEndPos=dotArray[i].yStartPos；
xTempPos=dotArray[i-1].xStartPos；
yTempPos=dotArray[i-1].yStartPos；
控制台日志（xTempPos）；
}
}
类点{
构造函数（）{
this.xStartPos=随机（宽度）；
this.yStartPos=随机（高度）；
这1.rad=5；
}
草图（）{
椭圆（this.xStartPos，this.yStartPos，this.rad）；
}
连接（）{
行（this.xStartPos、this.yStartPos、xTempPos、yTempPos）；
如果在
draw（）
函数内的主循环上（xTempPos），您试图访问
Dot
对象属性
xPos
和
yPos
，但您从未定义它们。您的意思是
xStartPos
和
yStartPos
？问题解决了吗？答案可以接受吗？是的，都在这里设置
var dotCount = 2;
var dot;
var xTempPos, yTempPos;
var xEndPos, xEndPos; 

function setup() {
  createCanvas(windowWidth, windowHeight);

  noStroke();
  fill(200);
  for (let i = 0; i < dotCount; i++) {
    dotArray.push(new Dot());
  }
}

function draw() {
  // background(0);

  for (let i = 0; i < dotArray.length; i++) {
    dotArray[i].sketch();    
  }

  for (let i = dotArray.length - 1; i > 0; i--) {
    dotArray[i].connect();

    xEndPos = dotArray[i].xPos;
    xEndPos = dotArray[i].yPos;

    xTempPos = dotArray[i - 1].xPos;
    yTempPos = dotArray[i - 1].yPos;

    console.log(xTempPos);

  }
}

class Dot {

  constructor() {
    this.xStartPos = random(width);
    this.yStartPos = random(height);
    this.rad = 5;
  }

  sketch() {
    ellipse(this.xStartPos, this.yStartPos, this.rad);
  }

  connect() {
    stroke(200);
    strokeWeight(1);

    line(this.xStartPos, this.yStartPos, xTempPos, yTempPos);

    if (xTempPos <= xEndPos) {
      xTempPos = xTempPos + 1;
    }

    if (yTempPos <= xEndPos) {
      yTempPos = yTempPos + 1;
    }

  }

}```