Processing.js mousePressed（）函数中无法访问数组

我正在使用Processing 3.0b5开发一个用于web的动画。作为该动画的一部分，我创建了一个自定义类，然后创建该类对象的数组。这些对象恰好是矩形

其中一个矩形被指定为重新启动动画的按钮。在处理环境中，它工作得很好。但是，当我使用.pde文件或通过在网页本身中包含代码在网页上运行动画时，除了按钮之外，动画的所有功能都正常工作，我不知道为什么

按钮功能是通过使用mousePressed（）函数实现的。我得到的错误是保存矩形的数组不存在。但是，数组是一个全局变量，甚至用于程序中的其他函数。似乎出于某种原因，它无法在mousePressed（）函数中访问。如果有人能给我一些指导，我将非常感激

整个处理源代码如下。要查看按钮功能无法在线工作，请访问www.koeziris.com

//Global Vars
float canvasWidth = 700; //don't use this line in website version
float canvasHeight = 500; //don't use on website version
int numElem = 250;
int numBins = 18;
int j = 0;  //draw loop counter
int yTravTime = 200;  // the number of iterations until elements reach their final y position
float[] binElem = new float[numBins+1];
Element[] elem = new Element[numElem];

//for buttons and color
int reButton = 100;

//for histogram collapse and expand
boolean clicked = false;
boolean fin = false; //has the histogram reached its final position once?
int clickcounter = 0;

void setup() {
size(700, 500);
for (int i = 0; i < numElem; i++) {
int bin = 10 + round(constrain(randomGaussian() * 3, -9, 9)); //determines bin of each element
binElem[bin-1]++;
elem[i] = new Element(color(255, 10), round(bin * canvasWidth / numBins) - canvasWidth / (2 * numBins), -1000*i/numElem, bin, 0, binElem[bin-1]); //creates each element
}
}

void draw() {
background(0);
for (int i = 0; i < numElem; i++) {
  elem[i].move();
  elem[i].display(i);
  j += 1;
}
}

void mousePressed() {
clicked = !clicked;
//println("clicked= " + str(clicked));
clickcounter += 1;
//println(str(clickcounter));

float reButtonXl = elem[reButton].xpos - elem[reButton].elemW/2;
float reButtonXr = elem[reButton].xpos + elem[reButton].elemW/2;
float reButtonYt = elem[reButton].yposFinal; //this works, but I don't really know why.  Since drawing rectangles in "center" mode, I would think I need to subtract off 1/2 of the height
float reButtonYb = elem[reButton].yposFinal + (elem[reButton].elemH)*2; //this works, but shouldn't.  Should need to add 1/2 the height
if (clicked) {
println("\n");
println(str(clicked));
println("mouseX =" + str(mouseX));
println("mouseY =" + str(mouseY));
println("reButtonYb =" + str(elem[reButton].yposFinal + elem[reButton].elemH/2));
println("reButtonYt =" + str(elem[reButton].yposFinal - elem[reButton].elemH/2));
println("elemH = " + str(elem[reButton].elemH));
println("yposFinal = " + str(elem[reButton].yposFinal));

}
if (mouseX >= reButtonXl && mouseX <= reButtonXr && mouseY <= reButtonYb && mouseY >= reButtonYt) {
  println("target clicked");
  background(0);
  j = 0;  //draw loop counter
  binElem = new float[numBins+1];
  Element[] elem = new Element[numElem];

  //for histogram collapse and expand
  clicked = false;
  fin = false; //has the histogram reached its final position once?
  clickcounter = 0;
  setup();
}
}

class Element {
float elemW = canvasWidth / numBins - numBins * 0.1;
float elemH = 5.0;
color c;
float xpos;
float ypos;
float yposFinal;
int eBin;
float xspeed;
float yspeed;
float binElem;
float spacing = 0.4*elemH;
//The Constructor
Element(color c_, float xposInit_, float yposInit_, int eBin_, float xspeed_, float binElem_) {
  c = c_;
  xpos = xposInit_;
  ypos = yposInit_;
  eBin = eBin_;
  binElem = binElem_;
  yposFinal = canvasHeight - binElem * (elemH+spacing) + elemH/2;
  xspeed = xspeed_;
  yspeed = (canvasHeight-yposInit_+canvasHeight-yposFinal)/yTravTime;
}

void display(int i) {
  stroke(100);
  // Logic for blinking element.  Only blinks when histogram has not been collapsed by clicking
  // and if all elements are in their final position and the time or iteration constraint is met.
  // would be best if iteration rather than time constraint since that is how movement is controlled.
  if (ypos==yposFinal && millis() > 6000 && i == reButton){
    fill(#6086ED, 200 + (55*sin(millis()/600.0)));
  } else {
    fill(c);
  }
  rectMode(CENTER);
  rect(xpos, ypos, elemW, elemH);
  //println(j);
}

void move() {

  xpos += xspeed;
  // Execute once clicked to collapse histogram. Fin is boolean indicator that the histogram was completed at least once
  if (clicked && fin){ 
    yspeed = 0.1*(canvasHeight-elemH-ypos);
    if (canvasHeight - elemH - ypos > 1) {
      ypos += yspeed;
      //println("1st IF, 1st sub condition");
    } else {
      ypos = canvasHeight - elemH;
      //println("1st IF, 2nd sub condition");
    }
    //Logic for re-expanding the collapsed histogram
  } else if(clickcounter > 0 && abs(ypos - yposFinal) > 1.0) {
    yspeed = -0.1 * (ypos - yposFinal);
    ypos += yspeed;
    //Logic for stationary re-expanded histogram
  } else if(clickcounter > 0 && abs(ypos - yposFinal) < 1.0) {
    yspeed = 0;
    ypos = yposFinal;
    // create the bounce effect
  } else if(ypos > canvasHeight - elemH / 2) { 
    yspeed = -yspeed;
    ypos += yspeed;
    //println("3rd IF");
    // keep elements moving upwards after the bounce
  } else if (ypos > yposFinal && yspeed < 0) {
    ypos += yspeed;
    //println("4th IF");
    // move elements into final hisotgram position
  } else if (ypos < yposFinal && yspeed < 0) {
    ypos = yposFinal;
    yspeed = 0;
    fin = true;
    //println("5th IF");
  } else {
    ypos += yspeed;
    //println("6th IF");
  }
}
}

//全局变量
浮动画布宽度=700//不要在网站版本中使用此行
浮动画布高度=500//不要在网站版本上使用
int numElem=250；
int numBins=18；
int j=0//牵引回路计数器
int yTravTime=200；//元素到达其最终y位置之前的迭代次数
float[]binElem=新的float[numBins+1]；
元素[]元素=新元素[numElem]；
//用于按钮和颜色
int reButton=100；
//用于直方图折叠和展开
布尔值=假；
布尔fin=false//直方图是否曾经到达其最终位置？
int clickcounter=0；
无效设置（）{
大小（700500）；
for（int i=0；i=reButtonXl&&mouseX 6000&&i==reButton）{
填充（#6086ED，200+（55*sin（millis（）/600.0））；
}否则{
填充（c）；
}
矩形模式（中心）；
rect（XPO、YPO、elemW、elemH）；
//println（j）；
}
无效移动（）{
xpos+=xspeed；
//单击一次执行以折叠直方图。Fin是表示直方图至少已完成一次的布尔指示器
如果（单击并确定）{
yspeed=0.1*（画布高度elemH ypos）；
if（画布高度-elemH-ypos>1）{
ypos+=Y速度；
//println（“第一个IF，第一个子条件”）；
}否则{
ypos=画布高度-标高；
//println（“第一个IF，第二个子条件”）；
}
//重新展开折叠直方图的逻辑
}否则（单击计数器>0&&abs（ypos-yposFinal）>1.0）{
yspeed=-0.1*（ypos-yposFinal）；
ypos+=Y速度；
//平稳重展开直方图的逻辑
}否则（单击计数器>0&&abs（ypos-yposFinal）<1.0）{
y速度=0；
ypos=yposFinal；
//创建反弹效果
}如果（ypos>canvasHeight-elemH/2）{
yspeed=-yspeed；
ypos+=Y速度；
//println（“第三个IF”）；
//保持元素在反弹后向上移动
}否则如果（ypos>yposFinal&&yspeed<0）{
ypos+=Y速度；
//println（“第四个IF”）；
//将元素移动到最终hisotgram位置
}否则如果（ypos

我猜您将两个变量命名为同一事物。这在Java（在桌面上运行处理）中很好，但在JavaScript中可能会导致奇怪的行为

---

我注意到您正在第61行创建另一个名为

elem

的数组，您从未使用过它。我会删除它，然后查找可能命名为同一事物的任何其他变量。

我的猜测是，您将两个变量命名为同一事物。这在Java（在桌面上运行处理）中很好，但在JavaScript中可能会导致奇怪的行为

---

我注意到您正在第61行创建另一个名为

elem

的数组，您从未使用过它。我会删除它，然后查找可能命名为相同名称的任何其他变量。

谢谢！第61行确实是个问题。我把它删除了，效果很好。谢谢！第61行确实是个问题。我删除了它，它工作得很好。