我想您误解了translate()在形状上下文中的工作方式。
你可能会有这样的印象：每次平移都会移动画布一点，然后你画一个顶点，然后下一次平移会移动画布一点，然后你画另一个顶点，依此类推。
实际上，所有发生在beginShape()/endShape()堆栈内部的translate()调用都是一个接一个地进行的，它们将整个完整的形状（由传递给每个vertex()调用的偏移量定义）转换到画布之外的地方。
解决方案基本上是删除translate()，也可以只在前面做一个平移来重新定位形状。

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

function draw() {
  background(220);
  var y = 10;
  var r = 0;
  beginShape();
  vertex(0, 0);
  for (var i = 0; i < height; i += 10) {
    r = random(0, 5);
    vertex(r, y);
    //translate(r, y); // <-- only change
    y += 10;
  }
  endShape(CLOSE);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

也就是说，我不认为形状在这里是合适的，因为我相信它们会要求你从下到上画一条难看的直线来结束形状。使用一系列的线看起来更好：
一个二个一个一个
循环上述内容得到：

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

function draw() {
  background(220);
  
  for (let i = 0; i < width; i += 5) {
    push();
    translate(i, 0);
    let lastX = 0;
    let lastY = 0;

    for (let y = 0; y <= height; y += 10) {
      const x = random(0, 5)
      line(lastX, lastY, x, y);
      lastX = x;
      lastY = y;
    }

    pop();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

我想你忘了beginShape（LINES），你也应该把translate放在beginShape和endShape之外，否则它会把所有的东西都翻译一次。（所以它们会在同一个地方，而不是到处都是）。
我做了这个代码后，许多试验和错误，我不知道这是否是你所期望的结果：

function draw() {
  background(220);
  var y = 10;
  var r = 0;
  var random_old = 0;
  for (var i = 0; i < height; i += 10) {
    beginShape(LINES);
    r = random(0, 5);
    console.log(r + " " + y);
    vertex(r, y);
    y += 10;
    r = random(0, 5);
    vertex(r, y);
    endShape();
    translate((r - random_old) * 10, 0);
    random_old = r;
    y += 10;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.js"></script>