为什么这个 Processing/Processing.js 草图在我运行时不显示？

Question

我制作了下面的 Processing 草图，以便我可以将其用作我博客的 header（通过 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

当我运行您在 Processing IDE (3.0a4) 中的代码时，它运行良好。然后我把模式切换到JavaScript，它不工作。错误在 createShape 中。它在 processing.js 中不可用。

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

这是我在 Chrome 的控制台中遇到的错误。

为什么这个 Processing/Processing.js 草图在我运行时不显示？

Why doesn't this Processing/Processing.js sketch show when I run it?

javascript

processing

processing.js

为什么这个 Processing/Processing.js 草图在我 运行 时不显示？

Why doesn't this Processing/Processing.js sketch show when I run it?

javascript

processing

processing.js

为什么这个 Processing/Processing.js 草图在我运行时不显示？