p5js - 在 draw() 中不能创建超过 1 个对象

Question

我正在尝试创建一系列对象，这些对象是椭圆组以形成一条线。我可以创建 1 行；但是，当我尝试介绍第二个时，它没有显示。

如果我接着从 draw() 方法中删除 string1 的实例，第二个字符串 (string2) 现在将显示在正确的区域。

出于某种原因，我不能同时拥有两者。我已经尝试添加其他使用 p5 示例中的省略号的对象实例并且它工作正常，所以我真的不确定我在这里遗漏了什么。

下面是我的 JavaScript，我在 setup() 方法中创建了对象 'Harp'，在 draw() 方法中创建了对象 displayed/animated。

let strings = [];
let visualIncrement = 80;
let initYcoord = -10;

function setup() {
  createCanvas(windowWidth, windowHeight);

  string1 = new Harp(visualIncrement, initYcoord);
  string2 = new Harp(visualIncrement + 360, initYcoord);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function draw() {
  background(51);
  string1.move();
  string1.display();
  string2.move();
  string2.display();
}

function Harp(xpos, ypos) {
  this.xpos = xpos; // x position on screen
  this.ypos = ypos; // y position on screen

  this.yspacing = 0.5; // spacing between lines
  this.theta = 0.0; // start angle
  this.period = 100; // pixels before the wave repeats
  this.yvalues; // array for height values
  this.inputAmp = 5.5; // modulated value required for amplitude

  this.w = height;
  this.dx = (TWO_PI * this.period) * this.yspacing;
  this.yvalues = new Array(floor(this.w/this.yspacing));

  this.move = function() {
    this.theta = this.theta += map(400, 0, windowWidth, 0.0, 1.6);
    this.amplitude = map(this.inputAmp, 0, 400, 0.0, 500);
    this.dx = map(80, 0, 400, 0.0, 1.0);

    this.x = this.theta;
    for (var i = 0; i < this.yvalues.length; i++) {
      this.yvalues[i] = sin(this.x)*this.amplitude;
      this.x+=this.dx;
    }
  }
  this.display = function() {
    fill(255);
    translate(this.xpos, this.ypos);
    for(let x = 0; x < this.yvalues.length; x++) {
      strokeWeight(20);
      stroke(255);
      translate(0, 9);
      ellipse(height/80+this.yvalues[x], x*this.yspacing, 0.2, 0.02);
      // ellipse(this.xpos, this.ypos, 0.2, 0.02);
    }
  }
}

这里还有一个CodePen：https://codepen.io/joeqj2/pen/gBLPvg

我从来没有遇到过这个问题，完全被它难住了，在网上找不到任何东西。

Answer 1

您在 display() 函数中调用了 translate()。请记住，翻译堆栈。 例如：

translate(100, 0);
translate(0, 100);
ellipse(0, 0, 20, 20);

此代码将在 100, 100 处绘制一个椭圆，因为对 translate() 的调用堆栈。

回到您的代码，当您绘制第一条线时，您调用 translate() 以移动您绘制线的位置。然后绘制第二条线，再次调用 translate()。但请注意，对 translate() 的第二次调用是在第一次调用之上完成的，因此您的第二行最终位于屏幕边缘的某个位置。这也是为什么如果您删除第一行，您的第二行就会出现的原因。

有几个解决方案：

您可以消除对 translate() 的调用并直接在绘图中使用坐标。
或者您可以调用 push() 和 pop() 函数来隔离每行的翻译。

可以在 the reference 中找到更多信息。

p5js - 在 draw() 中不能创建超过 1 个对象

p5js - can't create more than 1 object in draw()

javascript

p5.js