如何通过for循环结合数组实现p5.js中6个圆点的线性移动

• 完成6个线性移动圆点动画效果：3个沿水平方向往复移动，3个沿垂直方向往复移动
• 使用数组存储所有圆点的运动参数
• 通过for循环实现圆点的批量绘制、移动逻辑，替代原有单变量控制所有圆点同步运动的写法

• 仅用单个位置变量c、单个速度变量cspeed控制全部6个圆点，所有圆点运动状态完全绑定，无法独立运动
• 逐行硬编码6个圆点的绘制语句，未使用循环做批量处理，不符合实现要求
• 边界判断未考虑圆点半径，圆点会有一半移出画布边缘才会反向

p5.js 逻辑代码 #

// 水平移动圆点参数数组：每个元素存储固定y坐标、动态x坐标、移动速度
let horizontalDots = [];
// 垂直移动圆点参数数组：每个元素存储固定x坐标、动态y坐标、移动速度
let verticalDots = [];
const dotDiameter = 50; // 圆点直径
const dotRadius = dotDiameter / 2;

function setup() {
  createCanvas(800, 800);
  // 初始化3个水平移动圆点，设置不同速度避免完全同步
  horizontalDots.push(
    { posY: height / 4, posX: 0, speed: 4 },
    { posY: height / 2, posX: 0, speed: 3 },
    { posY: height / 9, posX: 0, speed: 5 }
  );
  // 初始化3个垂直移动圆点，设置不同速度避免完全同步
  verticalDots.push(
    { posX: height / 4, posY: 0, speed: 4 },
    { posX: height / 2, posY: 0, speed: 3.5 },
    { posX: height / 9, posY: 0, speed: 4.5 }
  );
}

function draw() {
  background(220);

  // 循环批量处理所有水平移动圆点
  for (let i = 0; i < horizontalDots.length; i++) {
    const currentDot = horizontalDots[i];
    // 更新位置
    currentDot.posX += currentDot.speed;
    // 碰到左右边界时速度反向
    if (currentDot.posX > width - dotRadius || currentDot.posX < dotRadius) {
      currentDot.speed *= -1;
    }
    // 绘制圆点
    ellipse(currentDot.posX, currentDot.posY, dotDiameter, dotDiameter);
  }

  // 循环批量处理所有垂直移动圆点
  for (let i = 0; i < verticalDots.length; i++) {
    const currentDot = verticalDots[i];
    // 更新位置
    currentDot.posY += currentDot.speed;
    // 碰到上下边界时速度反向
    if (currentDot.posY > height - dotRadius || currentDot.posY < dotRadius) {
      currentDot.speed *= -1;
    }
    // 绘制圆点
    ellipse(currentDot.posX, currentDot.posY, dotDiameter, dotDiameter);
  }
}

页面引入代码 #

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

• 按移动方向拆分两个数组存储圆点参数，每个圆点的位置、速度独立存储，运动状态互不影响
• 所有圆点的位置更新、边界检测、绘制操作都通过for循环批量完成，无单个圆点的硬编码逻辑
• 边界判断时加入圆点半径偏移，圆点碰到画布边缘时刚好贴合边缘就反向，不会出现半块圆点移出画布的问题
• 给每个圆点设置了差异化的移动速度，避免所有圆点运动完全同步的生硬效果

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