p5.js中beginShape()的顶点无法连接成连续路径的问题

嘿，我一眼就看出问题的根源了——你踩了p5.js向量方法的一个常见坑！

你想用vector.add()来累积计算路径点，但p5.js里的add()方法是会直接修改原向量的，不是返回一个全新的向量。这就导致你的genes数组里所有元素其实都指向同一个向量引用，每一次previous.add(...)都会把之前存的所有点都改成新位置，最后画出来的自然不是连续路径，甚至可能所有点都叠在一起。

另外你用beginShape(LINES)也不对，LINES模式是每两个顶点画一条独立的线段，要画连续的折线，得用LINE_STRIP或者直接用默认的beginShape()（默认就是连续折线模式）。

修正后的完整代码 #

sketch.js #

let lifespan = 200;
let genes = [];

function setup(){
 createCanvas(window.innerWidth, window.innerHeight);
 background(255);
 // 初始化第一个路径点
 genes[0] = createVector(50,50);
 stroke(0);
 strokeWeight(1);
 // 用默认模式（或LINE_STRIP）画连续折线
 beginShape();
 vertex(genes[0].x, genes[0].y);
 for (let i = 1; i < lifespan; i++) {
  // 先复制前一个向量，再添加随机偏移——关键在这里！
  genes[i] = genes[i-1].copy().add(createVector(random(-10,10),random(-10,10)));
  vertex(genes[i].x, genes[i].y);
 }
 endShape();
}

function draw(){
 // 这里不需要内容，因为我们在setup里已经画完了
}

HTML部分（保持原样即可，我帮你加了个标题） #

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>连续随机路径Demo</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>
</body>
</html>

核心修改说明 #

• 用copy()方法创建独立向量：genes[i-1].copy()会生成一个和原向量值完全相同但独立的新向量，再对这个新向量调用add()，就不会污染之前存入数组的点了，这样每个genes[i]都是路径上的独立节点。
• 更换beginShape的模式：把LINES换成默认模式（或LINE_STRIP），这样程序会按顺序把所有顶点连成一条连续的折线，而不是两两分段。
• 删掉了没用的previous和prevpos变量，直接用genes[i-1]访问前一个点，代码更清爽。

这样改完之后，你就能得到一条从(50,50)出发的连续随机路径啦！

内容的提问来源于stack exchange，提问作者Bigboss01