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

当我在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草图在我运行时没有显示？

2 个答案: