javascript - 为什么当我运行这个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)));
  }
}