p5.js随机生成连续垂直区块失败问题求助

你的代码错误地将单个区块的宽度值当作了区块的起始位置。sectionsWidths数组存储的是每个区块的宽度，而非累计偏移量，导致从第2个区块开始，begin = sectionsWidths[i]取到的是新的随机宽度，而非前一个区块的结束位置。

需要维护一个累计偏移量跟踪每个区块的起始位置：

1. 移除sectionsWidths初始的0，直接生成10个随机宽度值
2. 用变量记录当前起始位置，每个区块的起始位置等于上一个区块的结束位置，结束位置等于起始位置加上当前区块的宽度

function vertBG() {
  let sectionsWidths = []
  // 生成10个区块的随机宽度
  for (let i = 0; i < 10; i++) {
    let sectionWidth = random(w(.13), w(.3))
    sectionsWidths.push(sectionWidth)
  }
  
  let sections = []
  let currentStart = 0 // 跟踪当前区块的起始位置
  for (let i = 0; i < sectionsWidths.length; i++) {
    let sectionWidth = sectionsWidths[i]
    let begin = currentStart
    let end = currentStart + sectionWidth
    sections.push([begin, end])
    // 更新起始位置为当前区块的结束位置
    currentStart = end
  }
  
  console.log(sectionsWidths)
  console.log(sections)
  
  // 绘制纹理线条的逻辑保持不变
  for (let i = 0; i < sections.length; i++) {
    for (let x = sections[i][0]; x < sections[i][1]; x += w(.01)) {
      let r = random(155,255)
      let g = random(155,255)
      let b = random(155,255)
      texStr(x, 0, x, height, w(.2), r, g, b, 50)
    }
  }
}

修改后sections数组会呈现你预期的连续格式：

0: [0, 130]
1: [130, 290]
2: [290, 445]
3: [445, 600]
...

每个区块的起始位置严格等于前一个区块的结束位置，实现垂直区块的无缝拼接。

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