All geek questions in one place

United balls do not work P5.js

I am trying to make this code work for two days. I am new to javaScript and P5.js, but I tried to do the same when processing using java, and it worked fine. here is the image of my goal. However, balls do not connect in version p5.js. I do not know what the problem is. Any help would be greatly appreciated

enter image description here

Here is my P5.js code with the necessary comment

//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);
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<html>
  <head></head>
  <body></body>
</html>
Run codeHide result
+4
source share
2 answers

I got an answer. My declaration of variables inside an object was erroneous ... also I found a better way to add objects to an array of balls.

Here is the new code:

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>
Run codeHide result
+2
source

I improved your code a bit.

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>
Run codeHide result

beginShape() endShape(), , , , , : https://p5js.org/reference/#/p5/beginShape , , , ball.length NOB, , . , , strokeWeight().

, - , .

0

Source: https://habr.com/ru/post/1667134/

More articles:


All Articles