P5.js如何使用Perlin noise在两个指定坐标点之间绘制带噪声的线条

核心逻辑很简单：把Perlin噪声的偏移量和两点连线的基础坐标叠加，同时给偏移量乘以随进度从0升到1再降到0的权重，保证首尾点偏移量强制为0，就能刚好落在你指定的两个端点上。

实现步骤 #

• 第一步：先计算两点连线的基础参数
  先确定你要把整条线条拆成多少个点（pointCount，一般取100~500即可，数值越高线条越平滑），再计算每个点在直线上的基础坐标：基础X = 起点X + 进度两点X差，基础Y = 起点Y + 进度两点Y差，进度t是当前点索引除以总点数，范围是[0,1]。
• 第二步：给噪声偏移加首尾归零权重
  用t * (1 - t)作为偏移权重，当t=0（起点）和t=1（终点）时，权重为0，无论噪声值是多少，最终偏移量都是0，自然就能固定两个端点。
• 第三步：叠加噪声生成最终坐标
  你可以选择简单的X/Y方向直接加偏移，也可以选择垂直于连线方向加偏移，后者生成的线条不会出现拉伸感，效果更自然。

完整可运行示例代码 #

let pointCount = 200; // 线条拆分的点数量
let noiseScale = 80; // 噪声偏移幅度，值越大线条扭曲越明显

function setup() {
  createCanvas(800, 800);
  noLoop();
  stroke(0);
  strokeWeight(2);
  noFill();
}

function draw() {
  background(255);
  // 定义两个端点A(100,200)、B(400,600)
  let x1 = 100, y1 = 200;
  let x2 = 400, y2 = 600;
  
  beginShape();
  for (let i = 0; i <= pointCount; i++) {
    let t = i / pointCount;
    // 计算当前点在直线上的基础坐标
    let baseX = x1 + t * (x2 - x1);
    let baseY = y1 + t * (y2 - y1);
    
    // 生成范围为[-1,1]的连贯噪声值，入参乘的系数控制扭曲频率
    let noiseVal = noise(t * 5) * 2 - 1;
    // 计算偏移权重，保证首尾偏移为0
    let offsetWeight = t * (1 - t) * noiseScale;
    
    // --- 简单X/Y偏移版本，直接两个方向加噪声 ---
    // let offsetX = noiseVal * offsetWeight;
    // let offsetY = noiseVal * offsetWeight;
    
    // --- 垂直于连线偏移版本，效果更自然，推荐使用 ---
    let lineAngle = atan2(y2 - y1, x2 - x1) + HALF_PI;
    let offsetX = cos(lineAngle) * noiseVal * offsetWeight;
    let offsetY = sin(lineAngle) * noiseVal * offsetWeight;
    
    // 添加最终坐标到路径
    vertex(baseX + offsetX, baseY + offsetY);
  }
  endShape();
}

参数调整说明 #

• 调大noiseScale可以增大线条的扭曲幅度，调小则线条更接近直线
• 修改noise(t * 5)里的系数5，数值越大扭曲的频率越高，线条会有更多细密的褶皱，越小则扭曲越平缓
• 如果需要每次刷新生成不同的噪声线条，删掉noLoop()，或者在draw()开头加noiseSeed(random(10000))即可

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