CODEWITHSUNDEEP
javascriptprocessingprocessing.js
Pamicel
Pamicel

Reputation: 118

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

I made the Processing sketch below so that I could use it as a header for my blog (through Processing.js).

It didn't work on my blog (tumblr) so I tried just to run it in JavaScript mode, it did not work either.

It does not show when I run it on either Chrome or Safari. My other *.pde sketches work fine, those that also use P3D work fine, others that also use mouse input in the same fashion work fine too... I don't understand.

I scratched my head all day yesterday trying to figure it out. Can anyone help ?

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);
  }
}

Upvotes: 0

Views: 1156

Answers (2)

Mamun Zaman
Mamun Zaman

Reputation: 41

When I ran your code in Processing IDE (3.0a4) it worked perfectly. Then I switched the mode to JavaScript, and it is not working. The error is in createShape. It is not available in processing.js.

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

This is the error I got in Chrome's console.

Upvotes: 0

George Profenza
George Profenza

Reputation: 51837

If you look in the JavaScript Console in your browser you will spot this error:

Uncaught ReferenceError: createShape is not defined

It looks like ProcessingJS doesn't implement the createShape() functionality.

You can still draw the same content by storing the vertices in an Array and using beginShape()/endShape() without 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)));
  }
}

The 3D part seems to work ok. Here is a slightly tweaked version so rotation on Y axis is accentuated:

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)));
  }
}

Upvotes: 2

Related Questions