p5.js 说：出现错误，因为 "show" 无法作为函数调用

Question

我正在使用 p5.js 进行一个项目，但我一直遇到此错误： p5.js 说：出现错误，因为“show”不能作为函数调用，我不知道为什么

let arr = [];
let amount = 2000;
let balls = [];
let ent = 0;

function setup() {
  createCanvas(400, 400);
  for(let i = 0; i < amount; i++){
  const a = Math.floor(Math.random() * 6) + 1;
  arr.push(a);
 }

for(k = 0; k < arr.length; k++){
 balls[k] = new Ball(width / 2, 30, 0.01);
 balls[k] = arr[k];
 ent += balls[k];
 console.log(ent);
 //console.log(balls[k]);
 }
}


function draw() {
 background(0);

 balls[1].show();
 /*for (let ball of balls){
  ball.show();
  ball.update();
 }  */

  rect(width / 6, height / 3 * 2, 7, height / 3);
  rect(width / 6 * 2, height / 3 * 2, 7, height / 3);
  rect(width / 6 * 3, height / 3 * 2, 7, height / 3);
  rect(width / 6 * 4, height / 3 * 2, 7, height / 3);
  rect(width / 6 * 5, height / 3 * 2, 7, height / 3);

 }

我正在为我的球使用另一个文件 class:

 class Ball{

  constructor(x, y, m){
  this.pos = createVector(x, y);
  this.mass = m;
  this.r = sqrt(this.mass) * 10;
  this.vel = createVector(0, 0);
  this.acc = createVector(0,0);
  } 

  applyForce(force){
   let f = p5.Vector.div(force, this.mass);
   this.acc.add(f);
  }

  update(){
   this.vel.add(this.acc);
   this.pos.add(this.vel);
   this.acc.set(0, 0);
   let x = this.pos.x;
   let y = this.pos.y;
    } 

   show(){
   stroke(255,);
   strokeWeight(10);
   fill(255, 100);
   ellipse(this.pos.x, this.pos.y, this.r * 2);
    }
   }

如果有人能看到我做错了什么，那将非常有帮助。

Answer 1

您正在用 arr 数组中的数字替换 balls 数组中的所有条目：balls[k] = arr[k];.

固定版本，虽然还没有做太多：

let arr = [];
let amount = 200;
let balls = [];
let ent = 0;

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < amount; i++) {
    const a = Math.floor(Math.random() * 6) + 1;
    arr.push(a);
  }

  for (k = 0; k < arr.length; k++) {
    balls[k] = new Ball(width / 2, 30, 0.01);

    // These line makes no sense
    // balls[k] = arr[k];
    // ent += balls[k];

    // You probable meant:
    ent += arr[k];
    // since replacing entries in the balls array with number will definitely break things

    console.log(ent);
  }
}


function draw() {
  background(0);

  for (let ball of balls) {
    ball.show();
    ball.update();
  }

  rect(width / 6, height / 3 * 2, 7, height / 3);
  rect(width / 6 * 2, height / 3 * 2, 7, height / 3);
  rect(width / 6 * 3, height / 3 * 2, 7, height / 3);
  rect(width / 6 * 4, height / 3 * 2, 7, height / 3);
  rect(width / 6 * 5, height / 3 * 2, 7, height / 3);

}

class Ball {
  constructor(x, y, m) {
    this.pos = createVector(x, y);
    this.mass = m;
    this.r = sqrt(this.mass) * 10;
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
  }

  applyForce(force) {
    let f = p5.Vector.div(force, this.mass);
    this.acc.add(f);
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.set(0, 0);
    let x = this.pos.x;
    let y = this.pos.y;
  }

  show() {
    stroke(255, );
    strokeWeight(10);
    fill(255, 100);
    ellipse(this.pos.x, this.pos.y, this.r * 2);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Answer 2

我得到了真正的错误！！它在显示函数

的 ball.js 文件中

class Ball{

  constructor(x, y, m){
  this.pos = createVector(x, y);
  this.mass = m;
  this.r = sqrt(this.mass) * 10;
  this.vel = createVector(0, 0);
  this.acc = createVector(0,0);
  } 

  applyForce(force){
   let f = p5.Vector.div(force, this.mass);
   this.acc.add(f);
  }

  update(){
   this.vel.add(this.acc);
   this.pos.add(this.vel);
   this.acc.set(0, 0);
   let x = this.pos.x;
   let y = this.pos.y;
    } 

   show(){
   stroke(255,); // The error is in this line, the comma after 255, it is only accepted in ES-8 and p5.js runs in ES-6 so there is the error! You must correct it to stroke(255);
   strokeWeight(10);
   fill(255, 100);
   ellipse(this.pos.x, this.pos.y, this.r * 2);
    }
   }

也许这对您的代码有帮助。

还有一个快速编辑：

let arr = [];
let amount = 2000;
let balls = [];
let ent = 0;

function setup() {
  createCanvas(400, 400);
  for(let i = 0; i < amount; i++){
  const a = Math.floor(Math.random() * 6) + 1;
  arr.push(a);
 }

for(k = 0; k < arr.length; k++){
 balls[k] = new Ball(width / 2, 30, 0.01);
 balls[k] = arr[k];
 ent += balls[k];
 console.log(ent);
 //console.log(balls[k]);
 }
}


function draw() {
 background(0);

 balls[1].show(); // change the value in [] to 0 instead of 1 because array indexes start from 0 and not 1
 /*for (let ball of balls){
  ball.show();
  ball.update();
 }  */


  // You could also use a for loop here as you are doing repeated tasks
  /* rect(width / 6, height / 3 * 2, 7, height / 3);
  rect(width / 6 * 2, height / 3 * 2, 7, height / 3);
  rect(width / 6 * 3, height / 3 * 2, 7, height / 3);
  rect(width / 6 * 4, height / 3 * 2, 7, height / 3);
  rect(width / 6 * 5, height / 3 * 2, 7, height / 3); */
  
  for(let i = 1; i <= 5; i++) {
    rect(width / 6 * i, height / 3 * 2, 7, height / 3);
  }

 }

p5.js 说：出现错误，因为 "show" 无法作为函数调用

p5.js says: There's an error as "show" could not be called as a function

javascript

p5.js