p5.beginShape() 中的顶点未连接

Question

基本上我希望所有这些不同的线路都连接在一条路径上。我正在使用 vector.add() 因为我想要一个累积结果。也许这就是问题所在？或许这就是我访问数组前一个元素的方式？

请看一下这个片段：

let lifespan = 200;
let genes = [];
let previous;
let prevpos;

function setup(){
  createCanvas(window.innerWidth, window.innerHeight);
  background(255);

  genes[0] = createVector(50,50);

  stroke(0);
  strokeWeight(1);

  beginShape(LINES)
  vertex(genes[0].x, genes[0].y);
  for (let i = 1; i < lifespan; i++) {
    previous = genes[i-1];
    genes[i] = previous.add(createVector(random(-10,10),random(-10,10)));
    // vertex(previous.x, previous.y);
    vertex(genes[i].x, genes[i].y);
  }
  endShape()
}

function draw(){
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id='sketch'> </div>
    <script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
    <script src="sketch.js"></script>
    <script>
    </script>
  </body>
</html>

Answer 1

我以为我已经尝试过了，但我只需要取消注释一行。

beginShape(LINES)
  vertex(genes[0].x, genes[0].y);
  for (let i = 1; i < lifespan; i++) {
    previous = genes[i-1];
    genes[i] = previous.add(createVector(random(-10,10),random(-10,10)));
    vertex(previous.x, previous.y); //<-- uncomment this
    vertex(genes[i].x, genes[i].y);
  }
endShape()

p5.beginShape() 中的顶点未连接

Vertices in p5.beginShape() not connecting

javascript

p5.js