CODEWITHSUNDEEP
javascriptprocessingp5.js
Chris Amato
Chris Amato

Reputation: 145

Need assistance getting a P5 line draw function to work

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

  }

}```

Upvotes: 1

Views: 284

Answers (1)

Rabbid76
Rabbid76

Reputation: 210946

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>

Upvotes: 1

Related Questions