如何使用p5.js实现模拟人手手绘连续随机涂鸦曲线的效果

你当前代码生成离散线段的核心原因是每次绘制都生成了完全独立的随机坐标点，没有和上一次绘制的位置做关联。要实现连贯的涂鸦效果，只需要保留上一次画笔的位置，基于该位置做小范围的平滑随机偏移即可，你可以借助Perlin噪声实现更自然的人手晃动效果，避免纯随机带来的生硬抖动。

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>

// 保存上一个绘制点的坐标
let prevX, prevY;
// 噪声偏移参数，控制平滑随机效果
let xOff = 0, yOff = 1000;
// 画笔最大移动步长，数值越大线条越粗犷
const step = 6;

function setup() {
  createCanvas(500, 500);
  frameRate(30);
  // 初始画笔位置设为画布中心
  prevX = width / 2;
  prevY = height / 2;
  // 设置线条样式更接近手绘
  stroke(0, 150);
  strokeWeight(2);
  background(255);
}

function draw() {
  // 用噪声生成平滑的偏移值，映射到步长范围内
  const xOffset = map(noise(xOff), 0, 1, -step, step);
  const yOffset = map(noise(yOff), 0, 1, -step, step);
  // 新的绘制点基于上一个点偏移得到
  const newX = prevX + xOffset;
  const newY = prevY + yOffset;

  // 边界判断，画笔碰到边缘就往反方向拉
  if(newX < 20 || newX > width -20) xOff += 0.1;
  if(newY < 20 || newY > height -20) yOff += 0.1;

  // 绘制线段，也可以替换为curve/bezier函数实现更柔和的曲线
  line(prevX, prevY, newX, newY);

  // 更新参数供下一次绘制使用
  prevX = newX;
  prevY = newY;
  xOff += 0.01;
  yOff += 0.01;
}

• 调整step数值可以改变单段线条的长度，数值越大线条跳转幅度越大
• 调整xOff/yOff的增量可以改变线条的弯曲频率，增量越大线条抖动越频繁
• 把line替换为bezier函数，额外增加两个噪声生成的控制点，可以得到更柔和的曲线效果
• 可以给strokeWeight也叠加小的随机值，模拟手绘时力度变化的粗细效果

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