两天来我一直在努力使这段代码工作。我是 javaScript 和 P5.js 的新手，我尝试在处理中做同样的事情java，它运行良好。这是我的目标的图像。
但是，球不会在 p5.js 版本中连接。
我不知道可能是什么问题。任何帮助将不胜感激
这是我的 P5.js 代码，带有必要的注释
//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>最佳答案
我得到了答案。我在对象中声明的变量是错误的……我还找到了一种更好的方法来将对象添加到 balls 数组中。
这是新的代码:
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>关于javascript - 连接的球不工作 P5.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41719843/