理解Javascript纱线图案程序的问题

我从斯坦福大学的CS106AX上看到了Javascript YarnPattern程序。然而，当我阅读代码时，我很难理解一些行

在主函数YarnPattern（）中，我不太理解星号“**”之间的粗体块。我不太清楚当变量用thisPeg=0和nextPeg=-1初始化时，它意味着什么

另外，我不太确定“nextPeg=（thisPeg+DELTA）%pegs.length”这一行。我想知道这行代码如何帮助达到合适的peg指数位置

如果有人能就这些代码行提供清晰的解释，那就太好了。非常感谢你的帮助

// Constants 
const GWINDOW_WIDTH = 1000;
const GWINDOW_HEIGHT = 625;
const N_ACROSS = 80;
const N_DOWN = 50;
const DELTA = 113;

// main function 
function YarnPattern() {
  let gw = GWindow(GWINDOW_WIDTH, GWINDOW_HEIGHT);
  let pegs = createPegArray(GWINDOW_WIDTH, GWINDOW_HEIGHT, N_ACROSS, N_DOWN);
  **let thisPeg = 0;
  let nextPeg = -1;
  while (thisPeg !== 0 || nextPeg === -1) {
    nextPeg = (thisPeg + DELTA) % pegs.length;
    let p0 = pegs[thisPeg];
    let p1 = pegs[nextPeg];
    let line = GLine(p0.x, p0.y, p1.x, p1.y);** 
    line.setColor("Magenta");
    gw.add(line);
    thisPeg = nextPeg;
  }
}

function createPegArray(width, height, nAcross, nDown) {
    let dx = width / nAcross;
    let dy = height / nDown;
    let pegs = [ ];
    for (let i = 0; i < nAcross; i++) {
      pegs.push(Point(i * dx, 0));
    }
    for (let i = 0; i < nDown; i++) {
      pegs.push(Point(nAcross * dx, i * dy));
    }
    for (let i = nAcross; i > 0; i--) {
      pegs.push(Point(i * dx, nDown * dy));
    }
    for (let i = nDown; i > 0; i--) {
      pegs.push(Point(0, i * dy));
    }
    return pegs; 
}

function Point(x, y) {
  if (x === undefined) {
    x = 0;
    y = 0;
  }
  return { x: x, y: y };
}

//常数
常数GWINDOW_宽度=1000；
常数GWINDOW_高度=625；
横截面常数N_=80；
常数N_DOWN=50；
常数δ=113；
//主要功能
函数YarnPattern（）{
设gw=GWindow（GWindow_宽度，GWindow_高度）；
设pegs=createPegArray（GWINDOW_宽度、GWINDOW_高度、N_横向、N_向下）；
**设thisPeg=0；
设nextPeg=-1；
while（thisPeg！==0 | | nextPeg====1）{
nextPeg=（此PEG+δ）%pegs.长度；
设p0=pegs[thisPeg]；
设p1=pegs[nextPeg]；
let line=GLine（p0.x，p0.y，p1.x，p1.y）；**
线条。设置颜色（“洋红”）；
gw.增加（行）；
thisPeg=nextPeg；
}
}
函数createPegArray（宽度、高度、垂直、垂直）{
设dx=宽度/n交叉；
设dy=高度/N降；
设pegs=[]；
for（设i=0；i0；i--）{
销钉推力（点（i*dx，nDown*dy））；
}
for（设i=nDown；i>0；i--）{
推（点（0，i*dy））；
}
返回销钉；
}
功能点（x，y）{
如果（x==未定义）{
x=0；
y=0；
}
返回{x:x，y:y}；
}

你能简单解释一下程序在上下文中做了什么吗？似乎

DELTA

是速度，

%pegs。length

可以防止溢出，例如，如果

p0

是索引

2

处的项，则

p1

被设置为索引

115

处的项（

2+DELTA

）它试图创建一种模式，模拟在图形窗口边缘的一组销钉周围缠绕一条纱线。它模拟了以下过程：-在左上角的销钉周围系一条纱线。-把纱线绕在销钉上一段距离的前面继续向前移动三角桩，直到闭合环@VLAZI有点明白你想解释什么。非常感谢你@提图斯，你介意解释一下初始化变量分别设置为0和-1的部分吗？为什么会这样？由于循环的条件

thisPeg！==0 | | nextPeg===-1

nextPeg

只能在第一次迭代时

-1

（或任何负值），并且

thisPeg

将在

113

（

DELTA

）迭代后变为零（如果

DELTA

小于

pegs.length

和

pegs.length

不能被

DELTA

整除）.