Need assistance getting a P5 line draw function to work

Question

I'm trying to replicate the crude line connection function that I have working here, https://editor.p5js.org/knectar/sketches/0Thp1IJn but using objects in an array. It seems like this code should work, but the values aren't populating as needed to draw the connecting line. Any assistance would be appreciated!

Here's the code (or here https://editor.p5js.org/knectar/sketches/HYPwtjge ):

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;
    }

  }

}```

Answer 1

The declaration of dotArray is missing.

var dotArray = [];

Furthermore it has to be xStartPos , yStartPos rather than xPos , yPos .

See the example:

 var dotCount = 2; var dot; var xTempPos, yTempPos; var xEndPos, xEndPos; var dotArray = []; function setup() { //createCanvas(windowWidth, windowHeight); createCanvas(400, 200); for (let i = 0; i < dotCount; i++) { dotArray.push(new Dot()); } } function draw() { background(255, 255, 255); fill(255, 0, 0); stroke(255, 0, 0); strokeWeight(1); 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].xStartPos; xEndPos = dotArray[i].yStartPos; xTempPos = dotArray[i - 1].xStartPos; yTempPos = dotArray[i - 1].yStartPos; 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() { line(this.xStartPos, this.yStartPos, xTempPos, yTempPos); if (xTempPos <= xEndPos) { xTempPos = xTempPos + 1; } if (yTempPos <= xEndPos) { yTempPos = yTempPos + 1; } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>