Рисование анимированных линий в последовательности (P5. js)

Question

Я пытаюсь получить серию точек для последовательного соединения. У меня первые две точки анимируются просто отлично. Но после установки условия, которое устанавливает логический флаг (ready) в значение true, последующие объекты Dot просто создают экземпляры точек, но анимация не запускается. Есть мысли о том, где я иду не так?

Код в редакторе p5 https://editor.p5js.org/knectar/sketches/o-6N2rAn и здесь

var dotPair;
var dotArray = [];
var tempX;
var tempY;
var angle = 0;
var ready = false; 

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

  noFill(0);
  stroke(50, 50, 200);
  strokeWeight(1);

  dotArray.push(new Dot());

}

function draw() {
  background(0);  

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

  if(ready){
    ready = false; 
    dotArray.push(new Dot());
  }

}

class Dot {

  constructor() {
    this.start = createVector(random(width), random(height));
    this.end = createVector(random(width), random(height));
    this.vertexArray = [];

  }

  showDotPair() {
    push();
    fill(200, 0, 0);
    noStroke();
    ellipse(this.start.x, this.start.y, 5);
    ellipse(this.end.x, this.end.y, 5);
    pop();
  }

  showLine() {
    beginShape();
    for (let i = 0; i < this.vertexArray.length; i++) {
      vertex(this.vertexArray[i].x, this.vertexArray[i].y);
    }
    endShape();    
  }

  animateLine() {

    tempX = map(angle, 0, 100, this.start.x, this.end.x, 1);
    tempY = map(angle, 0, 100, this.start.y, this.end.y, 1);

    this.vertexArray.push(createVector(tempX, tempY));

    if(tempX == this.end.x && tempY == this.end.y){
      ready = true; 
    }
    angle += 0.5;

  }

}

Answer 1

Анимация должна быть сделана только для последнего Доу:

for(let i = 0; i < dotArray.length; i++){
    dotArray[i].showDotPair();
}
dotArray[dotArray.length-1].animateLine();
for(let i = 0; i < dotArray.length; i++){
    dotArray[i].showLine();
}

angle должен быть атрибут Dot. Добавьте параметры входной координаты в Dot, потому что начало каждого Dot является концом его родителя:

class Dot {

    constructor(x, y) {
        this.start = createVector(x, y);
        this.end = createVector(random(width), random(height));
        this.current = this.end;
        this.angle = 0.0;
    }

    // [...]

Достаточно нарисовать линию от start до end, а чем рисование фигуры (с тоннами вершин). Для анимации текущая точка сохраняется в current.
См. Пример:

var dotPair;
var dotArray = [];
var tempX;
var tempY;
var ready = false; 

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

  noFill(0);
  stroke(50, 50, 200);
  strokeWeight(1);

  dotArray.push(new Dot(random(width), random(height)));

}

function draw() {
    background(0);  

    for(let i = 0; i < dotArray.length; i++){
        dotArray[i].showDotPair();
    }
    dotArray[dotArray.length-1].animateLine();
    for(let i = 0; i < dotArray.length; i++){
        dotArray[i].showLine();
    }

    if(ready){
        ready = false; 
        let prev = dotArray[dotArray.length-1];
        dotArray.push(new Dot(prev.end.x, prev.end.y));
    }
}

class Dot {

    constructor(x, y) {
        this.start = createVector(x, y);
        this.end = createVector(random(width), random(height));
        this.current = this.end;
        this.angle = 0.0;
    }

    showDotPair() {
        push();
        fill(200, 0, 0);
        noStroke();
        ellipse(this.start.x, this.start.y, 5);
        ellipse(this.end.x, this.end.y, 5);
        pop();
    }

    showLine() {
        line(this.start.x, this.start.y, this.current.x, this.current.y)
    }

    animateLine() {
        tempX = map(this.angle, 0, 100, this.start.x, this.end.x, 1);
        tempY = map(this.angle, 0, 100, this.start.y, this.end.y, 1);

        this.current = createVector(tempX, tempY);

        if(tempX == this.end.x && tempY == this.end.y){
          ready = true; 
        }
        this.angle += 0.5;
    }
}

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