为什么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草图在运行时不显示？

回答

相关问题