如何填充随机生成的山体线条下方区域？

你当前的代码每次循环只取两个相邻顶点调用beginShape()和endShape(CLOSE)，这只会填充两点之间的狭小区域，没法形成完整的山体下方填充。正确的做法是先收集山体所有的顶点，再把画布底部的两个端点加入，形成一个闭合的多边形，一次性完成填充。

修改后的代码如下：

PImage ball;

void setup(){
  size(600,500); 
  background(255);
  ball = loadImage("ball.png");
  noiseDetail(1); // 把noiseDetail放外面，无需每次循环重复调用
}

void draw(){
  background(255); // 每次draw刷新背景，避免重复绘制叠加
  ArrayList<PVector> mountainPoints = new ArrayList<PVector>();
  
  // 收集山体所有顶点坐标
  for(float x = 0; x <= width; x++) {
    float y = map(noise(x/250), 0, 1, 0.2*height, 0.8*height);
    mountainPoints.add(new PVector(x, y));
  }
  
  // 绘制并填充山体下方区域
  fill(0,255,0);
  stroke(0,255,0);
  beginShape();
  // 遍历绘制山体的所有顶点
  for(PVector p : mountainPoints){
    vertex(p.x, p.y);
  }
  // 添加画布底部的两个端点，让形状闭合为完整的山体区域
  vertex(width, height);
  vertex(0, height);
  endShape(CLOSE);
  
  // 绘制小球
  PVector firstPoint = mountainPoints.get(1);
  image(ball, firstPoint.x + 10, firstPoint.y - 10, 10, 10);
}

关键修改点说明：

• 用ArrayList<PVector>存储山体的所有顶点，避免循环中重复绘制微小形状
• 绘制形状时，先遍历所有山体顶点，再添加(width, height)和(0, height)两个点，让形状从山体右侧延伸到画布右下角，再到左下角，最终闭合为完整的填充区域
• 将noiseDetail()移到setup()中，无需每次循环重复设置
• 在draw()开头添加background(255)，避免每次帧刷新时叠加绘制

这样就能完整填充山体线条下方的整个区域了。

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