爲什麼Processing/Processing.js草圖在運行時不顯示？

我在下面做了Processing草圖，以便我可以將它用作我博客的標題（通過Processing.js）。爲什麼Processing/Processing.js草圖在運行時不顯示？

它沒有在我的博客（tumblr）工作，所以我嘗試了在JavaScript模式下運行它，它也不能工作。

，當我在任Chrome或Safari上運行它，它不會顯示。我的其他* .pde草圖工作正常，也使用P3D的那些工作正常，也以同樣的方式使用鼠標輸入的其他工作也很好......我不明白。

昨天我劃傷了我的腦袋整天試圖弄明白。誰能幫忙？

PShape s; 
int nbPts = 500; 
float AngleSpeed = 0.001; 
int col = 0; 

void setup() { 
    size(800, 600, P3D); 
    s = createShape(); 
    s.beginShape(); 
    for(int i = 0; i <= nbPts; i++) { 
    int x = int(random(width/10-width, width-width/10)); 
    int y = int(random(height/10-height, height-height/10)); 
    int z = int(random(width/10-width, width - width/10)); 
    s.vertex(x, y, z); 
    } 
    s.endShape(); 
    colorMode(HSB, 360, 100, 100); 
    ellipseMode(CENTER); 
    strokeWeight(10); 
} 

void draw() { 
    noFill(); 
    background(col, 50, 100); 
    stroke(col, 50, 100); 
    translate(width/2, height/2, -width/2); 
    camera(); 
    for (int i = 0; i < s.getVertexCount(); i++) { 
    float x = s.getVertexX(i); 
    float y = s.getVertexY(i); 
    float z = s.getVertexZ(i); 
    x += random(-1, 1); 
    y += random(-1, 1); 
    z += random(-1, 1); 
    s.setVertex(i, x, y, z); 
    } 
    s.disableStyle(); 
    shape(s, 0, 0); 
    s.rotateY(AngleSpeed); 
    s.rotateX(random(0, AngleSpeed)); 
    s.rotateZ(random(0, AngleSpeed)); 

    pushMatrix(); 
    translate(0, 0, -width/2); 
    fill(225, 0, 100); 
    ellipse(width/2, height/2, width, width); 
    popMatrix(); 
} 

void mousePressed() { 
    col = int(random(0, 255)); 
    for(int i = 0; i <= nbPts; i++) { 
    int x = int(random(width/10-width, width-width/10)); 
    int y = int(random(height/10-height, height-height/10)); 
    int z = int(random(width/10-width, width - width/10)); 
    s.setVertex(i, x, y, z); 
    } 
}

來源

2015-08-18 Paul Queurk

如果您在JavaScript控制檯看在你的瀏覽器中，你會發現這個錯誤：

Uncaught ReferenceError: createShape is not defined

它看起來像ProcessingJS沒有實現createShape（）功能。

您仍然可以在陣列中存儲的頂點和使用beginShape()/endShape()得出同樣的內容，而不PShape：

int nbPts = 500; 
float AngleSpeed = 0.001; 
int col = 0; 

PVector[] pts = new PVector[nbPts]; 

void setup() { 
    size(800, 600, P3D); 
    for(int i = 0; i <= nbPts; i++) { 
    pts[i] = new PVector(int(random(width/10-width, width-width/10)), 
         int(random(height/10-height, height-height/10)), 
         int(random(width/10-width, width - width/10))); 
    } 
    colorMode(HSB, 360, 100, 100); 
    ellipseMode(CENTER); 
    strokeWeight(10); 
} 

void draw() { 
    noFill(); 
    background(col, 50, 100); 
    stroke(col, 50, 100); 
    translate(width/2, height/2, -width/2); 
    camera(); 

    pushMatrix(); 
    rotateY(AngleSpeed); 
    rotateX(random(0, AngleSpeed)); 
    rotateZ(random(0, AngleSpeed)); 
    beginShape(); 
    for(int i = 0; i <= nbPts; i++) { 
     PVector v = pts[i]; 
     vertex(v.x, v.y, v.z); 
    } 
    endShape(); 
    popMatrix(); 

    pushMatrix(); 
    translate(0, 0, -width/2); 
    fill(225, 0, 100); 
    ellipse(width/2, height/2, width, width); 
    popMatrix(); 
} 

void mousePressed() { 
    col = int(random(0, 255)); 
    for(int i = 0; i <= nbPts; i++) { 
    pts[i].set(int(random(width/10-width, width-width/10)), 
       int(random(height/10-height, height-height/10)), 
       int(random(width/10-width, width - width/10))); 
    } 
}

的3D部分似乎工作正常。這裏是一個稍微調整的版本，因此在Y軸上的旋轉被加強：

int nbPts = 500; 
float AngleSpeed = 0.001; 
int col = 0; 

PVector[] pts = new PVector[nbPts]; 

void setup() { 
    size(800, 600, P3D); 
    for(int i = 0; i <= nbPts; i++) { 
    pts[i] = new PVector(int(random(width/10-width, width-width/10)), 
         int(random(height/10-height, height-height/10)), 
         int(random(width/10-width, width - width/10))); 
    } 
    colorMode(HSB, 360, 100, 100); 
    ellipseMode(CENTER); 
    strokeWeight(10); 
} 

void draw() { 
    noFill(); 
    background(col, 50, 100); 
    stroke(col, 50, 100); 
    translate(width/2, height/2, -width/2); 
    camera(); 

    pushMatrix(); 
    rotateY(AngleSpeed + frameCount * .01); 
    rotateX(random(0, AngleSpeed)); 
    rotateZ(random(0, AngleSpeed)); 
    beginShape(); 
    for(int i = 0; i <= nbPts; i++) { 
     PVector v = pts[i]; 
     vertex(v.x, v.y, v.z); 
    } 
    endShape(); 
    popMatrix(); 

    pushMatrix(); 
    translate(0, 0, -width/2); 
    fill(225, 0, 100); 
    ellipse(width/2, height/2, width, width); 
    popMatrix(); 
} 

void mousePressed() { 
    col = int(random(0, 255)); 
    for(int i = 0; i <= nbPts; i++) { 
    pts[i].set(int(random(width/10-width, width-width/10)), 
       int(random(height/10-height, height-height/10)), 
       int(random(width/10-width, width - width/10))); 
    } 
}

來源

2015-08-18 09:32:48

非常感謝，我不得不調整它一點使它工作我想要的方式。儘管看起來我不能在沒有createShape（）的情況下以這種方式獲得透視效果。反正，，再次感謝！ –

這很奇怪。我用[printCamera（）]（https://processing.org/reference/printCamera_.html）和[printProjection（）]（https://processing.org/reference/printProjection_.html），看到參數相同在JS中，因爲他們在Java中。也許他們呈現不同（出於某種原因）？就像你說的，做一些調整將會有所幫助。 ProcessingJS支持[perspective（）]（http://processingjs.org/reference/perspective_/）和[camera（）]（http://processingjs.org/reference/camera_/）。很高興答案幫助:) –

當我在Processing IDE（3.0a4）中運行代碼時，它完美地工作。然後我將模式切換到JavaScript，但它不起作用。該錯誤在createShape中。它在processing.js中不可用。

Uncaught Processing.js: Unable to execute pjs sketch: ReferenceError: createShape is not defined

這是我在Chrome的控制檯得到了錯誤。

來源

2015-08-18 09:34:26

爲什麼Processing/Processing.js草圖在運行時不顯示？

回答

相關問題