Question

我一直在努力让这段代码工作两天。我是 javaScript 和 P5.js 的新手，我试图在处理java时做同样的事情并且它完美运行。这是我的目标的图像。但是，球不能连接 p5.js 版本。我不知道会出现什么问题。任何帮助将不胜感激

以下是我的 P5.js 代码，其中包含必要的语录

＆＃13;

//creating an empty array named balls for it to be filled with ball objects
var balls=[];

// a variable that holds the number of balls which are desired
var NOB = 10;

function setup() 
{
  //creating canvas
  createCanvas(600,600);

  //filling the array with Ball objects. The constructor is defined below the draw function
  for(var i=0; i<NOB; i++)
  {
    balls[i] = new Ball();
    print(balls[i]);
  }
}

function draw() {
  background(0);

  //calling every ball object with all of their functions. Move which moves the ball, disp which draws an ellipse, and connect which
  //checks if the balls are within a certain distance and connects them with a red line

  for(var i=0; i<NOB; i++)
  {
    balls[i].move();
    balls[i].disp();

    for(var j=0; j<NOB; j++){
      //I do not want a ball to connect to itself and that is why I added the  (i!=j) contidion so that it wont connect to itself
      if(i!=j){
        //with the connect function I try to send each other object within the array to be check if it is close to  a certian ball
      balls[i].connect(balls[j]);
      }
    }
  }
}

//defing the Ball constructor
function Ball()
{
  //diameter for each ball
  var d=20;

  //the x and y positions are taking random values that consider the diameter so that the balls wont go out of the canvas
  var xPos= random(d,width-d/2);
  var yPos= random(d,height-d/2);

  //the factors that move the balls 
  var xPosf=random(0.1,3);
  var yPosf=random(0.1,3);

  //displays a white ball
  this.disp=function()
  {
    fill(255);
    noStroke();
    ellipse(xPos,yPos,d,d);
  }

  //moves the ball
  this.move=function()
  {
    xPos+=xPosf;
    yPos+=yPosf;

    //if the ball touches the end or beginning of the canvas it will have its factor variable reversed so it will go in the other direction. giving it a bounce
    if(xPos>width-d/2 || xPos<d/2){xPosf=xPosf*-1;}
    if(yPos>height-d/2 || yPos<d/2){yPosf=yPosf*-1;}
  }

  //checks if the balls are close and connects them with a red line
  this.connect= function(other)
  {
    if(dist(xPos,yPos,other.xPos,other.yPos)<100)
    {
      stroke(255,0,0);
      line(xPos,yPos,other.xPos,other.yPos);
    }
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"/>
<html>
  <head></head>
  <body></body>
</html>

＆＃13;

Answer 1

我得到了答案。我在对象中声明变量是错误的......我也找到了一种更好的方法来将对象添加到ball数组中。

这是新代码：

var balls=[];
var NOB = 10;

function setup() {
  createCanvas(600,600);
  for(var i=0; i<NOB; i++)
  {
    balls.push(new Ball());
  }
}

function draw() {
  background(0);
  for(var i=0; i<NOB; i++)
  {
    balls[i].move();
    balls[i].disp();
    
    for(var j=0; j<NOB; j++){
      if(i!=j){
      balls[i].connect(balls[j]);
      }
    }
  }
}

function Ball()
{
  this.d=20;
  this.xPos= random(this.d,width-this.d/2);
  this.yPos= random(this.d,height-this.d/2);
  this.xPosf=random(0.1,3);
  this.yPosf=random(0.1,3);
  
  this.disp=function()
  {
    fill(255);
    noStroke();
    ellipse(this.xPos,this.yPos,this.d,this.d);
  }
  this.move=function()
  {
    this.xPos+=this.xPosf;
    this.yPos+=this.yPosf;
    if(this.xPos>width-this.d/2 || this.xPos<this.d/2){this.xPosf=this.xPosf*-1;}
    if(this.yPos>height-this.d/2 || this.yPos<this.d/2){this.yPosf=this.yPosf*-1;}
  }
  
  this.connect = function(other)
  {
    if(dist(this.xPos,this.yPos,other.xPos,other.yPos)<100)
    {
    stroke(255,0,0);
    line(this.xPos,this.yPos,other.xPos,other.yPos);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<html>
  <head></head>
  <body></body>
</html>

Answer 2

我对您的代码做了一些改进。

var balls = [];
var NOB = 10;

function setup() {
  createCanvas(600, 600);
  for (var i = 0; i < NOB; i++) {
    balls.push(new Ball());
  }
}

function draw() {
  background(30);
  for (var i = 0; i < NOB; i++) {
    for (var j = 0; j < NOB; j++) {
      if (i != j) {
        balls[i].connect(balls[j]);
      }
    }
  }

  for (var a = 0; a < balls.length; a++) {
    balls[a].move();
    balls[a].disp();
  }

}

function Ball() {
  this.d = 20;
  this.xPos = random(this.d, width - this.d / 2);
  this.yPos = random(this.d, height - this.d / 2);
  this.xPosf = random(0.1, 3);
  this.yPosf = random(0.1, 3);

  this.disp = function() {
    fill(255);
    noStroke();
    ellipse(this.xPos, this.yPos, this.d, this.d);
  }

  this.move = function() {
    this.xPos += this.xPosf;
    this.yPos += this.yPosf;

    if (this.xPos > width - this.d / 2 || this.xPos < this.d / 2) {
      this.xPosf = this.xPosf * -1;
    }
    if (this.yPos > height - this.d / 2 || this.yPos < this.d / 2) {
      this.yPosf = this.yPosf * -1;
    }

  }

  this.connect = function(other) {

    if (dist(this.xPos, this.yPos, other.xPos, other.yPos) < 100) {
      stroke(255, 0, 0);
      strokeWeight(2);
      beginShape();
      vertex(this.xPos, this.yPos);
      vertex(other.xPos, other.yPos);
      endShape();
      //line(this.xPos,this.yPos,other.xPos,other.yPos);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<html>
  <head></head>
  <body></body>
</html>

我使用了beginShape（）和endShape（）方法来绘制线条，我认为这些线条更清晰，更多信息来自：directions on tensorflow 我还改变了绘制形状的顺序，将球留在线的顶部，并在循环上使用balls.length而不是NOB，可能避免错误。最后我用strokeWeight（）方法加粗了这些行。

希望这能以某种方式帮助你，度过美好的一天。

连接球不工作P5.js

2 个答案: