處理P3D草圖不能在JavaScript模式下工作

Question

我正在嘗試將我在Processing [Java模式]中構建的項目轉換爲可以在Web上查看。該項目利用P3D渲染來顯示3D世界並且可以更改3個數據集（.tsv文件），這些數據集可以映射三年期間發生的地震的位置和大小。下面的代碼在Java中運行時工作正常，但是當我以Javascript模式運行時，我只能看到空白的灰色屏幕。將草圖嵌入到畫布中的HTML是正確的，並且沒有錯誤，所以我確定它是代碼內的與JavaScript不兼容的內容。有沒有辦法只是運行PDE作爲java而不必使用Processing.js否則有什麼是在與processing.js的兼容性代碼明顯錯誤？

這是一個link to the sketch that is not working如果有幫助。

任何建議，我應該做的是非常感謝。由於

float dial = 0.0; 
FloatTable data; 
FloatTable data2; 
float dataMin, dataMax; 
int rowCount; 
int currentColumn = 0; 
int columnCount; 

int yearMin, yearMax; 
int[] years; 

int yearInterval = 10; 
int volumeInterval = 10; 
int volumeIntervalMinor=5; 

PImage bg; 
PImage texmap; 
PFont font; 
PImage img, img2; 
PImage imgTitle; 

int sDetail = 35; // Sphere detail setting 
float rotationX = 0; 
float rotationY = 0; 
float velocityX = 0; 
float velocityY = 0; 
float globeRadius = 750; 
float pushBack = 0; 

float[] cx, cz, sphereX, sphereY, sphereZ; 
float sinLUT[]; 
float cosLUT[]; 
float SINCOS_PRECISION = 0.5; 
int SINCOS_LENGTH = int(360.0/SINCOS_PRECISION); 

void setup() { 
size(1300,1000, P3D); 
textSize(100); 
texmap = loadImage("img/world32k.jpg"); 
initializeSphere(sDetail); 
setupstuff("2011.tsv"); 
} 

void draw() {  

background(0);  
// drawTitle(); 
drawMain(); 
renderGlobe(); 
drawDial(); 

} 
void setupstuff(String filename){ 
data = new FloatTable(filename); 
rowCount=data.getRowCount(); 
columnCount = data.getColumnCount(); 
years = int(data.getRowNames()); 
yearMin = years[0]; 
yearMax = years[years.length - 1]; 
font = loadFont("Univers-Bold-12.vlw"); 
dataMin = 0; 
dataMax = ceil(data.getTableMax()/volumeInterval)*volumeInterval; 
img = loadImage("img/dialface.jpg"); 
img2 = loadImage("img/dial.png"); 
imgTitle = loadImage("Title.png"); 
imageMode(CENTER); 
} 
void renderGlobe() { 
pushMatrix(); 
translate(width * 0.33, height * 0.4, pushBack); 
// pushMatrix(); 
noFill(); 
stroke(255,200); 
strokeWeight(2); 
smooth(); 
//popMatrix(); 
pointLight(201, 252, 276, width * 0.3, height * 0.2, 660); 
pushMatrix(); 
rotateX(radians(-rotationX)); 
rotateY(radians(180 - rotationY)); 
fill(200); 
noStroke(); 
textureMode(IMAGE); 
texturedSphere(globeRadius, texmap); 
popMatrix(); 
drawDots(0); 
popMatrix(); 
rotationX += velocityX; 
rotationY += velocityY; 
velocityX *= 0.95; 
velocityY *= 0.95; 

// Implements mouse control (interaction will be inverse when sphere is upside down) 
if(mousePressed){ 
velocityX += (mouseY-pmouseY) * 0.01; 
velocityY -= (mouseX-pmouseX) * 0.01; 
} 
} 

void initializeSphere(int res) 
{ 
sinLUT = new float[SINCOS_LENGTH]; 
cosLUT = new float[SINCOS_LENGTH]; 

for (int i = 0; i < SINCOS_LENGTH; i++) { 
sinLUT[i] = (float) Math.sin(i * DEG_TO_RAD * SINCOS_PRECISION); 
cosLUT[i] = (float) Math.cos(i * DEG_TO_RAD * SINCOS_PRECISION); 
} 

float delta = (float)SINCOS_LENGTH/res; 
float[] cx = new float[res]; 
float[] cz = new float[res]; 

// Calc unit circle in XZ plane 
for (int i = 0; i < res; i++) { 
cx[i] = -cosLUT[(int) (i*delta) % SINCOS_LENGTH]; 
cz[i] = sinLUT[(int) (i*delta) % SINCOS_LENGTH]; 
} 

// Computing vertexlist vertexlist starts at south pole 
int vertCount = res * (res-1) + 2; 
int currVert = 0; 

// Re-init arrays to store vertices 
sphereX = new float[vertCount]; 
sphereY = new float[vertCount]; 
sphereZ = new float[vertCount]; 
float angle_step = (SINCOS_LENGTH*0.5f)/res; 
float angle = angle_step; 

// Step along Y axis 
for (int i = 1; i < res; i++) { 
float curradius = sinLUT[(int) angle % SINCOS_LENGTH]; 
float currY = -cosLUT[(int) angle % SINCOS_LENGTH]; 
for (int j = 0; j < res; j++) { 
sphereX[currVert] = cx[j] * curradius; 
sphereY[currVert] = currY; 
sphereZ[currVert++] = cz[j] * curradius; 
} 
angle += angle_step; 
} 
sDetail = res; 
} 

// Draw texture sphere 
void texturedSphere(float r, PImage t) { 
int v1,v11,v2; 
r = (r + 240) * 0.33; 
beginShape(TRIANGLE_STRIP); 
texture(t); 
float iu=(float)(t.width-1)/(sDetail); 
float iv=(float)(t.height-1)/(sDetail); 
float u=0,v=iv; 
for (int i = 0; i < sDetail; i++) { 
vertex(0, -r, 0,u,0); 
vertex(sphereX[i]*r, sphereY[i]*r, sphereZ[i]*r, u, v); 
u+=iu; 
} 
vertex(0, -r, 0,u,0); 
vertex(sphereX[0]*r, sphereY[0]*r, sphereZ[0]*r, u, v); 
endShape(); 

// Middle rings 
int voff = 0; 
for(int i = 2; i < sDetail; i++) { 
v1=v11=voff; 
voff += sDetail; 
v2=voff; 
u=0; 
beginShape(TRIANGLE_STRIP); 
texture(t); 
for (int j = 0; j < sDetail; j++) { 
vertex(sphereX[v1]*r, sphereY[v1]*r, sphereZ[v1++]*r, u, v); 
vertex(sphereX[v2]*r, sphereY[v2]*r, sphereZ[v2++]*r, u, v+iv); 
u+=iu; 
} 

// Close each ring 
v1=v11; 
v2=voff; 
vertex(sphereX[v1]*r, sphereY[v1]*r, sphereZ[v1]*r, u, v); 
vertex(sphereX[v2]*r, sphereY[v2]*r, sphereZ[v2]*r, u, v+iv); 
endShape(); 
v+=iv; 
} 
u=0; 

// Add the northern cap 
beginShape(TRIANGLE_STRIP); 
texture(t); 
for (int i = 0; i < sDetail; i++) { 
v2 = voff + i; 
vertex(sphereX[v2]*r, sphereY[v2]*r, sphereZ[v2]*r, u, v); 
vertex(0, r, 0,u,v+iv);  
u+=iu; 
} 
vertex(sphereX[voff]*r, sphereY[voff]*r, sphereZ[voff]*r, u, v); 
endShape(); 

} 
//draw dot 
void drawDots(float r){ 
r = (r + 240) * 0.33; 
blendMode(ADD); 
stroke(255, 100, 0, 100); 
rotateX(radians(-rotationX)); 
rotateY(radians(270 - rotationY)); 


for(int row = 0; row<rowCount; row++){ 
int col2 = 0; 
int col3 = 1; 
int col4 = 2; 
float latY = data.getFloat(row, col2); 
float longX = data.getFloat(row, col3); 
float ricter = data.getFloat(row, col4); 
pushMatrix(); 
rotateX(radians(-latY)); 
rotateY(radians(longX)); 
translate(0,0,r+250); 
ellipse(0,0,ricter*ricter*ricter/20,ricter*ricter*ricter/20); 
popMatrix(); 
println(latY); 
} 
rotationX += velocityX; 
rotationY += velocityY; 
velocityX *= 0.95; 
velocityY *= 0.95; 
} 
void drawDial(){ 
translate(width-250, height-250); 
image(img, -9/2, 53/2, 830/2,626/2); 
if(keyPressed){ 
if (key == '1') { 
dial = radians(0); 
setupstuff("2011.tsv"); 
} 
if (key == '2') { 
dial = radians(120); 
setupstuff("2012.tsv"); 
} 
if (key == '3') { 
dial = radians(240); 
setupstuff("2010.tsv"); 
} 
} 

rotate(dial); 
image(img2, 103/2, -65/2, 314/2, 400/2); 
} 
void drawMain(){ 
image(imgTitle, width-320, 170); 
} 
void drawTitle(){ 
pushMatrix(); 
fill(255,255, 255); 
translate(width-300, 120); 
textFont(font, 32); 
text("Earthquakes", 10, 50); 
popMatrix(); 
} 

class FloatTable { 
int rowCount; 
int columnCount; 
float[][] data; 
String[] rowNames; 
String[] columnNames; 


FloatTable(String filename) { 
String[] rows = loadStrings(filename); 

String[] columns = split(rows[0], TAB); 
columnNames = subset(columns, 1); // upper-left corner ignored 
scrubQuotes(columnNames); 
columnCount = columnNames.length; 

rowNames = new String[rows.length-1]; 
data = new float[rows.length-1][]; 

// start reading at row 1, because the first row was only the column headers 
for (int i = 1; i < rows.length; i++) { 
    if (trim(rows[i]).length() == 0) { 
    continue; // skip empty rows 
    } 
    if (rows[i].startsWith("#")) { 
    continue; // skip comment lines 
    } 

    // split the row on the tabs 
    String[] pieces = split(rows[i], TAB); 
    scrubQuotes(pieces); 

    // copy row title 
    rowNames[rowCount] = pieces[0]; 
    // copy data into the table starting at pieces[1] 
    data[rowCount] = parseFloat(subset(pieces, 1)); 

    // increment the number of valid rows found so far 
    rowCount++;  
} 
// resize the 'data' array as necessary 
data = (float[][]) subset(data, 0, rowCount); 
} 

void scrubQuotes(String[] array) { 
for (int i = 0; i < array.length; i++) { 
    if (array[i].length() > 2) { 
    // remove quotes at start and end, if present 
    if (array[i].startsWith("\"") && array[i].endsWith("\"")) { 
     array[i] = array[i].substring(1, array[i].length() - 1); 
    } 
    } 
    // make double quotes into single quotes 
    array[i] = array[i].replaceAll("\"\"", "\""); 
} 
} 


int getRowCount() { 
return rowCount; 
} 


String getRowName(int rowIndex) { 
return rowNames[rowIndex]; 
} 
String[] getRowNames() { 
return rowNames; 
} 
int getRowIndex(String name) { 
for (int i = 0; i < rowCount; i++) { 
    if (rowNames[i].equals(name)) { 
    return i; 
    } 
} 
//println("No row named '" + name + "' was found"); 
return -1; 
} 



int getColumnCount() { 
return columnCount; 
} 

String getColumnName(int colIndex) { 
return columnNames[colIndex]; 
} 

String[] getColumnNames() { 
return columnNames; 
} 

float getFloat(int rowIndex, int col) { 

if ((rowIndex < 0) || (rowIndex >= data.length)) { 
    throw new RuntimeException("There is no row " + rowIndex); 
} 
if ((col < 0) || (col >= data[rowIndex].length)) { 
    throw new RuntimeException("Row " + rowIndex + " does not have a column " + col); 
} 
return data[rowIndex][col]; 
} 

boolean isValid(int row, int col) { 
if (row < 0) return false; 
if (row >= rowCount) return false; 
//if (col >= columnCount) return false; 
if (col >= data[row].length) return false; 
if (col < 0) return false; 
return !Float.isNaN(data[row][col]); 
} 


float getColumnMin(int col) { 
float m = Float.MAX_VALUE; 
for (int row = 0; row < rowCount; row++) { 
    if (isValid(row, col)) { 
    if (data[row][col] < m) { 
     m = data[row][col]; 
    } 
    } 
} 
return m; 
} 


float getColumnMax(int col) { 
float m = -Float.MAX_VALUE; 
for (int row = 0; row < rowCount; row++) { 
    if (isValid(row, col)) { 
    if (data[row][col] > m) { 
     m = data[row][col]; 
    } 
    } 
} 
return m; 
} 


float getRowMin(int row) { 
float m = Float.MAX_VALUE; 
for (int col = 0; col < columnCount; col++) { 
    if (isValid(row, col)) { 
    if (data[row][col] < m) { 
     m = data[row][col]; 
    } 
    } 
} 
return m; 
} 


float getRowMax(int row) { 
float m = -Float.MAX_VALUE; 
for (int col = 0; col < columnCount; col++) { 
    if (isValid(row, col)) { 
    if (data[row][col] > m) { 
     m = data[row][col]; 
    } 
    } 
} 
return m; 
} 


float getTableMin() { 
float m = Float.MAX_VALUE; 
for (int row = 0; row < rowCount; row++) { 
    for (int col = 0; col < columnCount; col++) { 
    if (isValid(row, col)) { 
     if (data[row][col] < m) { 
     m = data[row][col]; 
     } 
    } 
    } 
} 
return m; 
} 


float getTableMax() { 
float m = -Float.MAX_VALUE; 
for (int row = 0; row < rowCount; row++) { 
    for (int col = 0; col < columnCount; col++) { 
    if (isValid(row, col)) { 
     if (data[row][col] > m) { 
     m = data[row][col]; 
     } 
    } 
    } 
} 
return m; 
} 
} 

Answer 1

UPDATE

您對Float錯誤可能與這條線：

return !Float.isNaN(data[row][col]); 

JavaScript是不會承認Float，這是一個Java結構和未完全實現處理中。你需要找到別的東西來作出這樣的比較，如：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN

同樣所有的語句像下面

float m = Float.MAX_VALUE; 

不會與ProcessingJS工作。你可能想看看：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity

ProcessingJS是非常難以調試，所以你需要確保你避免一切，這是唯一的Java和處理未完全實現。您還需要避免變量名稱衝突。閱讀以下內容，獲得有關還有什麼可以去錯了一個想法：http://processingjs.org/articles/p5QuickStart.html#thingstoknowusingpjs

而且下面的方法沒有一個右括號：

float getTableMin() { 
    float m = Float.MAX_VALUE; 
    for (int row = 0; row < rowCount; row++) { 
     for (int col = 0; col < columnCount; col++) { 
     if (isValid(row, col)) { 
      if (data[row][col] < m) { 
      m = data[row][col]; 
      } 
     } 
     } 
    } 
    return m; 

修復，通過添加一個右括號像這樣：

float getTableMin() { 
    float m = Float.MAX_VALUE; 
    for (int row = 0; row < rowCount; row++) { 
     for (int col = 0; col < columnCount; col++) { 
     if (isValid(row, col)) { 
      if (data[row][col] < m) { 
      m = data[row][col]; 
      } 
     } 
     } 
    } 
    return m; 
} 

這就是爲什麼它有助於正確格式化的代碼。在您的Processing IDE中，選擇您的代碼，然後按下Ctrl-t，它應該自動將您的代碼格式化爲更易於閱讀的內容。

順便說一句，如果沒有此修復程序，您的代碼甚至無法在Java模式下運行。它會爲有問題的方法拋出unexpected token: float異常。

更新2

爲了能夠擺脫你的Float相關的代碼，你可以在下面一行

return !Float.isNaN(data[row][col]); 

改變

return isNaN(data[row][col]); 

，你可以改變一切Float.MAX_VALUE;到Number.MAX_VALUE;的實例。

將所有實例更改爲Javascript友好代碼後，我也會收到您遇到的錯誤。我會試着看看我能否弄清楚並更新答案。