Javascript 排除P5.js动画错误

我正试图建立一个连续的动画，根据一个简单的算法连接点。 最终结果会是这样的,， 动画将如下所示

代码如下

看起来很接近，但在第一个元素按预期设置动画后，路径的其余部分仅在一帧中填充

有什么建议吗

var zag;

var spacing = 125;
var ready = false;

var nodeCounter; 

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

  zag = new Zag();

  nodeCounter = zag.comboArr.length - 1;

}

function draw() {

  background(0);

  translate(200, 0);


  zag.animateLine(nodeCounter);


  if (ready) {

    ready = false;
    nodeCounter--;
    console.log(nodeCounter);

  }

  // zag.display();
}

class Zag {

  constructor() {
    this.nodeCount = 4;
    this.comboArr = [];
    this.setArrs();
    this.combineArr();
  }

  animateLine(index) {

    let tempX, tempY;

    let first = this.comboArr[index];
    let next = this.comboArr[index - 1];

    tempX = map(frameCount, 0, 100, first.x, next.x, 1);
    tempY = map(frameCount, 0, 100, first.y, next.y, 1);

    stroke(25, 22, 220);
    noFill();
    strokeWeight(10);

    line(first.x, first.y, tempX, tempY);

    if (tempX == next.x && tempY == next.y) {
      ready = true;
      console.log(nodeCounter);

    }

  }




  setArrs() {
    this.baseArrA = [];
    this.baseArrB = [];

    for (let i = 1; i <= this.nodeCount; i++) {
      this.baseArrA.push(i);
      this.baseArrB.push(i);
    }
    this.shuffleArr(this.baseArrA);
    this.shuffleArr(this.baseArrB);

  }

  combineArr() {

    for (let i = 0; i <= this.nodeCount - 1; i++) {
      this.comboArr.push(createVector(0, this.baseArrA[i] * spacing));
      this.comboArr.push(createVector(spacing, this.baseArrB[i] * spacing));
    }

  }

  shuffleArr(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
  }

  display() {

    let i = 1;
    fill(200);
    noStroke();
    textSize(15);
    for (let item of this.comboArr) {
      text(i + ": " + item.x + ":" + item.y, item.x + 10, item.y - 5);
      i++;
    }

  }

}

var-zag；
var间距=125；
var ready=false；
var节点计数器；
函数设置（）{
createCanvas（窗口宽度、窗口高度）；
zag=新的zag（）；
nodeCounter=zag.combarr.length-1；
}
函数绘图（）{
背景（0）；
翻译（200,0）；
zag.animateLine（nodeCounter）；
如果（准备就绪）{
就绪=错误；
nodeCounter--；
console.log（nodeCounter）；
}
//zag.display（）；
}
Z类{
构造函数（）{
this.nodeCount=4；
this.comboArr=[]；
这个.setArrs（）；
这个。combineArr（）；
}
动画线（索引）{
让坦佩，坦佩；
让first=this.combarr[index]；
让next=this.combarr[index-1]；
tempX=map（帧数，0，100，first.x，next.x，1）；
tempY=map（帧数，0，100，first.y，next.y，1）；
中风（25,22,220）；
noFill（）；
冲程重量（10）；
行（first.x，first.y，tempX，tempY）；
if（tempX==next.x&&tempY==next.y）{
就绪=正确；
console.log（nodeCounter）；
}
}
setArrs（）{
this.baseArrA=[]；
this.baseArrB=[]；
对于（设i=1；i你得到这个的原因是当你这样做时：

tempX = map(frameCount, 0, 100, first.x, next.x, 1);
tempY = map(frameCount, 0, 100, first.y, next.y, 1);

您希望
frameCount
介于
0
和
100
之间。事实上，
frameCount
不断增加，绘图速度也不断提高

尝试将这两行更改为：

var tempFrameCount = frameCount % 100;
    
tempX = map(tempFrameCount, 0, 99, first.x, next.x, 1);
tempY = map(tempFrameCount, 0, 99, first.y, next.y, 1);

这应该行得通。
之所以会这样，是因为当您这样做时：

tempX = map(frameCount, 0, 100, first.x, next.x, 1);
tempY = map(frameCount, 0, 100, first.y, next.y, 1);

您希望
frameCount
介于
0
和
100
之间。事实上，
frameCount
不断增加，绘图速度也不断提高

尝试将这两行更改为：

var tempFrameCount = frameCount % 100;
    
tempX = map(tempFrameCount, 0, 99, first.x, next.x, 1);
tempY = map(tempFrameCount, 0, 99, first.y, next.y, 1);

这应该行得通。
代码有几个问题


frameCount
不适用于
map
函数，因为我们需要为每行将其重置为零。我们可以通过保留一个专用的计数变量来解决此问题，该变量在每次达到100时重置为零
检查
x
和
y
位置是否已到达下一个点不起作用，因为它们可能永远不会完全匹配。如果使用新的
count
变量，则不必检查线端点位置

下面的代码类似于使用独立
count
变量的草图


var-zag；
var间距=125；
var ready=false；
var节点计数器；
函数设置（）{
createCanvas（600600）；
zag=新的zag（）；
nodeCounter=zag.combarr.length-1；
背景（0）；
帧率（20）；
}
函数绘图（）{
翻译（200,0）；
zag.animateLine（nodeCounter）；
如果（就绪和节点计数器>1）{
就绪=错误；
nodeCounter--；
}
}
var计数=0；
Z类{
构造函数（）{
this.nodeCount=4；
this.comboArr=[]；
这个.setArrs（）；
这个。combineArr（）；
}
动画线（索引）{
让坦佩，坦佩；
让first=this.combarr[index]；
让next=this.combarr[index-1]；
计数++；
tempX=map（计数，0，100，first.x，next.x，1）；
tempY=map（count，0100，first.y，next.y，1）；
中风（25,22,220）；
noFill（）；
冲程重量（10）；
行（first.x，first.y，tempX，tempY）；
如果（计数>99）{
就绪=正确；
计数=0；
}
}
setArrs（）{
this.baseArrA=[]；
this.baseArrB=[]；
对于（设i=1；i，代码有几个问题


frameCount
不适用于
map
函数，因为我们需要为每行将其重置为零。我们可以通过保留一个专用的计数变量来解决此问题，该变量在每次达到100时重置为零
检查
x
和
y
位置是否已到达下一个点不起作用，因为它们可能永远不会完全匹配。如果使用新的
count
变量，则不必检查线端点位置

下面的代码类似于使用独立
count
变量的草图


var-zag；
var间距=125；
var ready=false；
var节点计数器；
函数设置（）{
createCanvas（600600）；
zag=新的zag（）；
nodeCounter=zag.combarr.length-1；
背景（0）；
帧率（20）；
}
函数绘图（）{
翻译（200,0）；
zag.animateLine（nodeCounter）；
如果（就绪和节点计数器>1）{
就绪=错误；
nodeCounter--；
}
}
var计数=0；
Z类{
构造函数（）{
this.nodeCount=4；
this.comboArr=[]；
这个.setArrs（）；
这个。combineArr（）；
}
动画线（索引）{
让坦佩，坦佩；
让first=this.combarr[index]；
让next=this.combarr[index-1]；
计数++；
tempX=map（计数，0，100，first.x，next.x，1）；
tempY=map（count，0100，first.y，next.y，1）；
中风（25,22,220）；
noFill（）；
冲程重量（10）；
行（first.x，first.y，tempX，tempY）；
如果（计数>99）{
就绪=正确；
计数=0；
}
}
setArrs（）{
this.baseArrA=[]；
this.baseArrB=[]；
for（设i=1；i