connected balls not working P5.js

Question

I have been trying to make this code work for two days. I'm quite new to javaScript and P5.js, I have tried to make the same in processing with java and it has worked perfectly. Here is an image of my target. The balls however, do not connect in the p5.js version. I do not know what could be the problem. Any help would be much appreciated

Here is my P5.js code with necessary anotations

//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"/>
<html>
  <head></head>
  <body></body>
</html>

score 3 · Answer 1 · edited Nov 11 '17 at 08:20

I got the answer. My declaration of variables within the object was mistaken...also I found a better way to add objects into the balls array.

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>

score 0 · Answer 2 · edited Nov 11 '17 at 08:24

I made some slight improvements to your 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(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>

I used the beginShape() and endShape() methods to draw the lines, which i think is cleaner, more info on that here: https://p5js.org/reference/#/p5/beginShape I also changed the order in which you draw the shapes, leaving the balls on top of the lines, and used balls.length on the loop instead of NOB, possibly avoiding errors. And finally i thickened the lines with the strokeWeight() method.

Hope this helps you in some way, have a nice day.

Thanks! This definitely helps. – wewelo welo Jan 19 '17 at 11:43 — wewelo welo, Jan 19 '17 at 11:43

connected balls not working P5.js

2 Answers2