Export to web from Processing 3 through Processing 2 incompatibility issues

abulgako

Hey guys. I'm trying to export a code that I wrote in Processing 3. It works just fine there. I found out that Processing 3 doesn't support web export (I'm trying to embed it into an HTML page). So I took it to Processing 2 and the camera there won't get displayed correctly no matter what I do. The HSB look stopped working as well. If someone could help me fix that it would be great.

int x, z, y, numX, numZ, numY;
float xPos, yPos, zPos;
color [][][] c = new color [10][10][10];
float R_x = 0;
float R_y = 0;
float R_z = 0;
float h;
float hstart; 

void setup() {
 colorMode(HSB, 360, 100, 100);
 size(800, 800, P3D);
 background(0);
 camera(-200, -200, 200, 0, 0, 0, 0, 1, 0);

numX = 10;
numZ = 10;
numY = 10;
}

void draw() {
 lights();
 h = hstart; 

for (x = 0; x < numX; x++) {
 for (z = 0; z < numZ; z++) {
  for (y = 0; y < numY; y++) {
    xPos = x * 20;
    yPos = y * 20;
    zPos = z * -20;
    h = (h + 0.36) % 360;
    c[x][z][y] = color(h, 100, 100);

    pushMatrix();
    translate(xPos, yPos, zPos);
    fill(c[x][z][y]);
    rotateY(R_y);
    rotateX(R_x);
    rotateZ(R_z);
    R_y+=0.00002;
    R_x+=0.00002;
    R_z+=0.00000;
    box(10);
    popMatrix();
  }
}
}

hstart +=0.8;
}

GoToLoop

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

abulgako

It's fixed now. Looks clean. You can help me now

quark

In Processing 2 you need to use the JavaScript mode to export it as a webpage. To do that you need to modify your code to

int x, z, y, numX, numZ, numY;
float xPos, yPos, zPos;
color [][][] c = new color [10][10][10];
float R_x = 0;
float R_y = 0;
float R_z = 0;
float h;
float hstart; 

void setup() {
  size(800, 800, P3D);
  colorMode(HSB, 360, 100, 100);
  noStroke();
  numX = 10;
  numZ = 10;
  numY = 10;
}

void draw() {
  background(0);
  camera(-200, -200, 200, 0, 0, 0, 0, 1, 0);
  lights();
  h = hstart; 
  for (x = 0; x < numX; x++) {
    for (z = 0; z < numZ; z++) {
      for (y = 0; y < numY; y++) {
        xPos = x * 20;
        yPos = y * 20;
        zPos = z * -20;
        h = (h + 0.36) % 360;
        c[x][z][y] = color(h, 100, 100);

        pushMatrix();
        translate(xPos, yPos, zPos);
        fill(c[x][z][y]);
        rotateY(R_y);
        rotateX(R_x);
        rotateZ(R_z);
        R_y+=0.00002;
        R_x+=0.00002;
        R_z+=0.00000;
        box(10);
        popMatrix();
      }
    }
  }
  hstart +=0.8;
}

Notice the first 2 lines in draw. The background statement is needed otherwise you get ghost images of old cubes. The camera statement is needed in draw to set the projection matrix for every frame. Anyway this code works in Java mode and JavaScript mode, the only problem being that the implementation of lights() appears to be different between the 2 modes ruining the effect in JavaScript mode.

GoToLoop

static final int NUM_X = 15, NUM_Y = 15, NUM_Z = 15;

int x, z, y;
float xPos, yPos, zPos;
float r_x, r_y;
float hh;

void setup() {
  size(400, 400, P3D);
  colorMode(HSB, 360, 100, 100);
  background(0);
}

void draw() {
  // camera() needs to be reapplied every draw() under Pjs (JS Mode):
  camera(-200, -200, 200, 0, 0, 0, 0, 1, 0);

  float h = hh += .8;
  for (x = 0; x < NUM_X; x++)
    for (z = 0; z < NUM_Z; z++)
      for (y = 0; y < NUM_Y; y++) {
        xPos = x * 20;
        yPos = y * 20;
        zPos = z * -20;
        fill(h = (h + .36) % 360, 100, 100);
        pushMatrix();
        translate(xPos, yPos, zPos);
        rotateY(r_y += 2e-5);
        rotateX(r_x += 2e-5);
        box(10);
        popMatrix();
      }
}

GoToLoop

I found out that Processing 3 doesn't support web export...

https://forum.Processing.org/two/discussion/18136/javascript-mode-says-0-3-3-not-compatible