p5.js类中使用getter/setter出现‘Script error. (: line 0)’求助

Let’s walk through the key issues in your code that are causing this error and fix them step by step:

1. Invalid Setter Method Syntax #

JavaScript setters only accept one parameter, but your set leafColor(minHue, maxHue) tries to take two. This is a syntax error that can manifest as a vague "Script error" in some environments, since the JS engine can’t parse the setter correctly.

Fix this by modifying the setter to accept an array (or object) with your hue range:

set leafColor([minHue, maxHue]) { // Destructure an array parameter
  this.minHue = minHue;
  this.maxHue = maxHue;
  this.randomColor = false;
}
// Usage: yourLeafInstance.leafColor = [30, 120];

2. Missing p5.js Context (The Likely Cause of Your Script Error) #

You’re using p5.js functions like random(), map(), fill(), and ellipse() directly as global functions—but if you’re running p5 in instance mode (the recommended approach for larger projects), these functions don’t exist in the global scope. They’re tied to the p5 instance you create, so calling them without context throws an undefined function error, which gets masked as "Script error. (: line 0)".

Here’s how to fix this:

• Pass the p5 instance to your drawLeaves constructor, then use it to call all p5 methods.
• Update every p5 function call to use this.p5.methodName() instead of the global version.

3. Accidental Local Variables in the Else Branch #

In your genLeaves method’s else block, you wrote minHue = colors[0]; maxHue = colors[1]; without the this keyword. This creates local variables instead of updating your class’s instance properties, so your custom color range will never take effect. Just add this. to both lines to fix it.

Full Fixed Code #

class drawLeaves {
  constructor(leafArray, p5Instance) {
    this.leafs = leafArray;
    this.p5 = p5Instance; // Store the p5 instance for context
    this.randomColor = true;
    this.minHue = 0;
    this.maxHue = 0;
  }

  genLeaves(minDiam, maxDiam, minAlpha, maxAlpha) {
    if (this.randomColor) {
      const rdn0 = this.p5.random(255);
      const rdn1 = this.p5.random(255);
      this.minHue = this.p5.min(rdn0, rdn1);
      this.maxHue = this.p5.max(rdn0, rdn1);
    } else {
      const colors = this.leafColor;
      this.minHue = colors[0]; // Fixed: added this.
      this.maxHue = colors[1]; // Fixed: added this.
    }

    for (let i = 0; i < this.leafs.length; i++) {
      const h = this.p5.map(i, 0, this.leafs.length, this.minHue, this.maxHue);
      const s = 255;
      const b = 255;
      const a = this.p5.random(minAlpha, maxAlpha);
      this.p5.fill(h, s, b, a);
      
      const diam = this.p5.random(minDiam, maxDiam);
      const jitterX = this.p5.random(-30, 30);
      const jitterY = this.p5.random(-30, 30);
      this.p5.ellipse(this.leafs[i].x + jitterX, this.leafs[i].y + jitterY, diam, diam);
    }
  }

  draw() {
    this.genLeaves(0, 90, 0, 0.03); // Big leaves
    this.genLeaves(0, 15, 0, 0.25); // Small leaves
  }

  set leafColor([minHue, maxHue]) {
    this.minHue = minHue;
    this.maxHue = maxHue;
    this.randomColor = false;
  }

  get leafColor() {
    return [this.minHue, this.maxHue];
  }
}

How to Use It in p5.js #

In your p5 setup function, pass the p5 instance when creating your drawLeaves object:

function setup() {
  createCanvas(800, 600);
  const leafPositions = [{x: 100, y: 100}, {x: 200, y: 200}, {x: 300, y: 300}];
  const leafDrawer = new drawLeaves(leafPositions, this); // Pass the p5 instance with 'this'
  
  // Optional: Set custom leaf color range
  leafDrawer.leafColor = [50, 180];
  
  leafDrawer.draw();
}

内容的提问来源于stack exchange，提问作者user10843212