我有这个代码来绘制一个数组的圆,并确保他们不会overalapped.我不知道我的问题是什么,因为它没有给出错误,但同时,我也没有看到任何事情发生.

class particle{
  constructor(x,y,r){
    this.x=x;
    this.y=y;
    this.r=r;

  }
  
  show(){
    noFill();
    stroke(0);
    strokeWeight(1);
    ellipse(this.x,this.y,this.r);
  }
}

let circles=[];

function setup() {
  createCanvas(600, 400);
  
  for (let i=0; i<25; i++){
    let x=random(width);
    let y=random(height);
    let r=50;
    circles[i]= new particle(x,y,r);  
    
  let overlap=false;
    for (let j=0; j<circles.length; j++){
      let other=circles[j];
      let circle=circles[i];
      let d=dist( circle.x,circle.y,other.x,other.y);
      if ( d < circle.r/2 + other.r/2){
        overlap=true;
      }
      
      if (!overlap){
        circles.push(circle);
      }
    }
    circles[i].show();
  }
}

function draw() {
  background(220);
}

推荐答案

setup()之后,draw()每秒运行~60次,而setup()运行一次.background(220);将整个画布擦得干干净净,立即覆盖您在setup()中绘制的圆圈.

根据您是否需要动画,有两种可能的解决方案:

  1. background()调用之后,将粒子绘制代码移到draw().将在每一帧上重新绘制粒子,以用于动画.
  2. 完全删除draw(),只绘制一次粒子.

以下是选项2:

class Particle {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
  }

  show() {
    noFill();
    stroke(0);
    strokeWeight(1);
    ellipse(this.x, this.y, this.r);
  }
}

const circles = [];

function setup() {
  createCanvas(600, 400);

  for (let i = 0; i < 25; i++) {
    const x = random(width);
    const y = random(height);
    const r = 50;
    const circle = new Particle(x, y, r);
    let overlap = false;

    for (let j = 0; j < circles.length; j++) {
      const other = circles[j];
      const d = dist(circle.x, circle.y, other.x, other.y);

      if (d < circle.r / 2 + other.r / 2) {
        overlap = true;
        break;
      }
    }

    if (!overlap) {
      circles.push(circle);
      circle.show();
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>

请注意,我使用prettier来自动格式化代码并将类名大写,并且在不重新分配变量时使用const而不是let.

除此之外,重叠的逻辑还有几个问题.一个问题是,circles[i]被添加到circles数组中,并且无论它是否重叠都会显示出来.此外,重叠判断发生得太快--只有在对照所有其他圆而不是在循环内部判断其重叠之后,才应添加圆.

关于重叠逻辑的另一个注意是,你可能不会得到很多圆圈.如果你想保证你得到一个特定的数字,使用while循环,并try 放置另一个圆(或重新定位当前的圆),如果你检测到重叠,注意避免无限循环,如果没有空间来添加新的圆.

Javascript相关问答推荐

Plotly热图:在矩形上zoom 后将zoom 区域居中

Rehype将hashtag呈现为URL

Spring boot JSON解析错误:意外字符错误

在react JS中映射数组对象的嵌套数据

Prisma具有至少一个值的多对多关系

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

在使用HighChats时如何避免Datatables重新初始化错误?

S文本内容和值不必要的不同

类构造函数不能在没有用With Router包装的情况下调用

如何发送从REST Api收到的PNG数据响应

在数组中查找重叠对象并仅返回那些重叠对象

将数组扩展到对象中

如何在我的Next.js项目中.blob()我的图像文件?

将基元传递给THEN处理程序

Clip-Path在网页浏览器(Mozilla、Edge、Chrome)上不能正常工作,但在预览版Visual Code Studio HTML、CSS、JS上却能很好地工作

react 路由如何使用从加载器返回的数据

为什么NULL不能在构造函数的.Prototype中工作

为什么在运行于<;img>;事件处理程序中的JavaScript中x和y是不可变的?

P5play SecurityError:无法从';窗口';读取命名属性';Add';:阻止具有源的帧访问跨源帧

设置复选框根据选中状态输入选中值