在p5.js（JavaScript）中创建多批次不同边界的随机坐标数组

核心思路 #

要实现多区域的随机点效果，关键是先判断点是否在目标多边形内部，用「拒绝采样法」生成符合要求的点；再把不同区域的点存在独立数组中，最后分批次渲染上色。

步骤1：实现多边形点检测函数 #

先写一个通用函数，判断某个(x,y)点是否在目标多边形内部（采用射线法，支持任意多边形）：

function pointInPolygon(x, y, polygon) {
  let inside = false;
  // 遍历多边形的每条边
  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
    const xi = polygon[i].x, yi = polygon[i].y;
    const xj = polygon[j].x, yj = polygon[j].y;
    
    // 射线法核心判断逻辑
    const intersect = ((yi > y) !== (yj > y))
      && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

步骤2：定义多区域与生成点数组 #

在setup()里定义两个不同的多边形区域，分别生成500个符合区域要求的点：

let pointsArea1 = []; // 第一组点（比如左侧建筑立面）
let pointsArea2 = []; // 第二组点（比如右侧建筑立面）

// 区域1：矩形（x:50-200, y:100-350）
const area1 = [
  {x:50, y:100}, {x:200, y:100},
  {x:200, y:350}, {x:50, y:350}
];

// 区域2：不规则多边形（模拟异形建筑立面）
const area2 = [
  {x:300, y:80}, {x:450, y:120},
  {x:480, y:320}, {x:320, y:360}
];

function setup() {
  createCanvas(600, 400);
  
  // 生成第一组点：拒绝采样，直到点在区域内
  for (let i = 0; i < 500; i++) {
    let x, y;
    do {
      x = random(width);
      y = random(height);
    } while (!pointInPolygon(x, y, area1));
    pointsArea1.push({x, y});
  }
  
  // 生成第二组点
  for (let i = 0; i < 500; i++) {
    let x, y;
    do {
      x = random(width);
      y = random(height);
    } while (!pointInPolygon(x, y, area2));
    pointsArea2.push({x, y});
  }
}

步骤3：分区域渲染闪烁效果 #

在draw()里分别遍历两组点，用不同颜色绘制，配合随机透明度实现闪烁：

function draw() {
  background(20); // 深色背景凸显灯光
  
  // 渲染第一组点：暖黄色灯光
  fill(255, 200, 80, random(50, 255));
  noStroke();
  for (let p of pointsArea1) {
    ellipse(p.x, p.y, 3);
  }
  
  // 渲染第二组点：冷蓝色灯光
  fill(80, 180, 255, random(50, 255));
  noStroke();
  for (let p of pointsArea2) {
    ellipse(p.x, p.y, 3);
  }
}

额外优化提示 #

• 如果是矩形区域，可简化生成逻辑：直接x = random(50,200)、y = random(100,350)，跳过拒绝采样步骤。
• 想要更自然的闪烁效果，可以给每个点添加独立的闪烁状态（比如在点对象中存储fade值，逐帧更新），替代全局随机透明度。

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