如何让random函数在draw函数中仅执行一次以实现雨滴效果？

要实现每条雨滴（竖线）x位置固定、初始终点y随机且每次递增1的下落效果，核心是给每条雨滴单独存储状态，用数组就能高效搞定，代码和思路如下：

完整实现代码 #

let y = 0;
let speed = 1;
let raindropEndY = []; // 存储每条雨滴的终点y坐标

function setup() {
  createCanvas(windowWidth, 600);
  // 初始化所有雨滴的随机终点y值，每条对应一个独立值
  for (let i = 0; i < width; i += 20) {
    raindropEndY.push(random(0, height));
  }
  frameRate(30); // 调高帧率让动画更流畅，原1帧太慢
}

function draw() {
  background(0);
  strokeWeight(3);
  stroke(255);
  
  // 遍历每条雨滴，更新位置并绘制
  for (let i = 0; i < raindropEndY.length; i++) {
    let x = i * 20; // 计算当前雨滴的固定x位置
    // 让当前雨滴的终点y递增
    raindropEndY[i] += speed;
    // 超出画布底部就重置为随机初始值
    if (raindropEndY[i] > height) {
      raindropEndY[i] = random(0, height);
    }
    // 绘制这条雨滴
    line(x, y, x, raindropEndY[i]);
  }
}

关键思路说明 #

1. 用数组存储独立状态：
   在setup里通过循环生成所有雨滴的初始随机终点y值，存入raindropEndY数组，这样每条雨滴都有自己的初始位置，解决了你之前“随机变量放setup但每条值相同”的问题。

2. 在draw里遍历更新：
   draw函数会持续执行，每次遍历数组时，单独更新每条雨滴的终点y值并绘制，既保证了持续动画，又不会让所有雨滴同步变化。

3. 固定x位置的计算：
   通过i * 20计算每条雨滴的x坐标，和你原代码的间隔一致，保证x位置固定不变。

4. 动画流畅度优化：
   把帧率调到30，原1帧的速度会让动画显得卡顿，调高后下落效果更自然。

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