連接球不工作P5.js

我一直在試圖讓這段代碼工作兩天。我對javaScript和P5.js很陌生，但我試圖在使用java處理時做出同樣的處理，並且它完美地工作。這是我的目標的形象。但是，球不會在p5.js版本中連接。我不知道可能是什麼問題。任何幫助，將不勝感激連接球不工作P5.js

這裏是我的P5.js代碼必要commentation

//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>

來源

2017-01-18 wewelo welo

我得到了答案。我在對象中的變量聲明被誤認爲......我還發現了一種將對象添加到球陣列中的更好方法。

這是新代碼：

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>

來源

2017-01-18 15:29:54

我做了一些細微的改進你的代碼。

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（）方法來繪製線條，我認爲這是更清潔，更盡在這裏：https://p5js.org/reference/#/p5/beginShape 我也改變了順序您繪製形狀，將球留在線的頂部，並在循環中使用balls.length而不是NOB，這可能會避免錯誤。最後我用strokeWeight（）方法加粗了線條。

希望這可以幫助你在某種程度上，有一個愉快的一天。

來源

2017-01-18 21:34:47 Pepe

謝謝！這絕對有幫助。 –

連接球不工作P5.js

回答

相關問題