Почему этот эскиз Processing/Processing.js не отображается, когда я запускаю его?

Question

Я сделал снимок обработки ниже, чтобы использовать его в качестве заголовка для своего блога (через 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); 
    } 
} 

Answer 1

Если посмотреть в консоли 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))); 
    } 
} 

Answer 2

Когда я запустил свой код в обработке IDE (3.0a4) она работала отлично. Затем я переключил режим на JavaScript, и он не работает. Ошибка в createShape. Он недоступен в processing.js.

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

Это ошибка, я попал в консоли Chrome.