p5.js中随机竖线无法显示的问题求助

你的代码存在两个核心问题，导致线条无法正常显示：

1. 错误使用translate()函数 #

在beginShape()与endShape()之间调用translate(r, y)会叠加修改坐标系统，让后续vertex()的坐标不再基于画布全局位置，而是在上一次平移后的位置上叠加偏移。比如第一次循环后画布原点被移到(r, y)，第二次的vertex(r, y)实际对应画布的(r+r, y+y)，最终所有顶点的y值会快速累加至远超画布高度，整个形状直接跑到画布外，自然无法看到。

2. 默认形状模式的视觉问题（可选优化） #

默认的beginShape()会创建填充多边形，即便顶点位置正确，由于x坐标范围仅0-5，填充区域会非常狭窄，视觉上也很难辨认。如果目标是绘制线条而非填充形状，需要指定beginShape(LINE_STRIP)模式。

修复后的代码 #

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);
  var y = 10;
  var r = 0;
  beginShape(LINE_STRIP); // 指定绘制连续线条
  vertex(random(0,5), 0); // 起始点y设为0，和后续逻辑统一
  for (var i = 0; i < height; i += 10) {
    r = random(0, 5);
    console.log(r + " " + y);
    vertex(r, y);
    // 移除translate，保持坐标系统稳定
    y += 10;
  }
  endShape();
}

关键修改点 #

• 删除循环内的translate(r, y)，让所有vertex()坐标基于画布全局坐标系
• 使用beginShape(LINE_STRIP)明确绘制连续线条，替代默认的填充多边形模式
• 调整起始顶点的y值为0，让线条从画布顶部开始，与后续y递增逻辑保持一致

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