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

Question

我正在使用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"); 
    } 
} 
} 

Answer 1

我的猜测是，你命名的两个变量同样的事情。这在Java中运行正常（在桌面上运行Processing），但会导致JavaScript中的奇怪行为。

我注意到你正在创建另一个名为elem的数组，你不会使用它。我会删除它，然后查找可能被命名为相同事物的其他变量。