Sketches runs locally on PC but not online with processing.js

ofey

Hi,

I have written a few little 3D sketches using openGL and Processing 2.1.1. However they do not run on online using processing.js.

Here is an example:

//Written by Shane Gibney March 2014
import processing.opengl.*;
float dx = 0.0, dy = 0.0; // distance dragged in x and y directions when mouse is pressed
float camX = 0.0, camY = 0.0, camZ = 0.0;
float R = 400; // radius of sphere camera moves on
float theta = 0.0, phi = 0.0;
boolean overRegion = false;
boolean pressed = false;
float x1 = 0.0, y1 = 0.0; // values of x and y when mouse is first pressed

int diameter = 100;
float wx, wy, px, py; 
int xoffset = 0;
int yoffset = 0;
int gap = 20;
float angle = 0;
float frequency = 1;
float WaveLength = 2;
float floatIncrement = 10; // angle increment in for loop
int increment = int(floatIncrement);
float floatWaveStruts = 360/increment * WaveLength;
int WaveStruts = int(floatWaveStruts);

void setup() {
  size(400, 400, OPENGL);
  fill(255, 190);
  strokeWeight(1);
  frameRate(120);
  background (127);
}
void draw() {
  background (80, 200, 210);
  noStroke();
  smooth();

  if (mouseX > 10.0 && mouseY > 10.0) { //later this will be the region inside the border controls
    overRegion = true;
  }
  else {
    overRegion = false;
  }
  println("dx = ", dx);
  println("dy = ", dy);
  println("theta = ", theta);
  println("phi = ", phi);
  theta = map(dx, 0, 200, -PI + 3.2, PI + 3.2);//angle in yz plane
  phi = map(dy, 0, 200, -PI + 2.0, PI + 2.0);//angle in zx plane
  camX = R*sin(theta);
  camY = R*sin(phi);
  camZ = sqrt(pow(R, 2)-pow(camX, 2)-pow(camY, 2));
  camera(camX +200, camY+200, camZ, //camera location
  0, 0, 0, // camera target
  0, 1, 0); // camera orientation

  stroke(200, 0, 0);//red
  line(-200, 0, 0, 200, 0, 0);//x-axis
  stroke(0, 200, 0);//green
  line(0, -200, 0, 0, 200, 0);//y-axis
  stroke(0, 0, 200);//blue
  line(0, 0, -200, 0, 0, 200);//z-axis
  stroke(0, 0, 0);
  //sphere(30);//main sphere at origin

  /*
  beginShape(); //plane
   vertex(-150, -150, -150);
   vertex(-150, -150, 150);
   vertex(-150, 150, 150);
   vertex(-150, 150, -150);
   endShape(CLOSE);
   */

  pushMatrix();
  translate(150, 0, 0);
  sphere(5);//positive x-axis
  translate(-150, 150, 0);
  sphere(5);//positive y-axis
  translate(0, -150, 150);
  sphere(5);//positive z-axis
  popMatrix();
  // Wave
  for (int i = 0; i < WaveStruts; i += 1) {
    wy = diameter/2 + yoffset + sin(radians(angle + (i*increment)))*(diameter/2);
    wx = diameter + xoffset + gap + (i*5);
    stroke(100);
    //fill(255);
    //point(wx, wy, 0);  
    stroke(#0A8604);
    line (-300 + wx, yoffset + diameter/2 - 50, 0, -300 + wx, wy - 50, 0);
    stroke(#071771);
    line (-300 + wx, 0, -1*(yoffset + diameter/2 - 50), -300 + wx, 0, -1*(wy - 50));
  }
  angle -= frequency;
}

void mousePressed() {
  if (overRegion) {
    pressed = true;
  } 
  else {
    pressed = false;
  }
  x1 = mouseX;
  y1 = mouseY;
}

void mouseDragged() {
  if (pressed) {
    dx = mouseX - x1;
    dy = mouseY - y1;
  }
}

void mouseReleased() {
  pressed = false;
}

I understood that processing.js converts Processing into Javascript so that it can be run on a website. I have run simple 3D sketches a site using processing.js. But I can't figure out why the one above doesn't work.

Any help would be greatly appreciated.

Thanks,

Shane

GoToLoop

When converting a Java Mode code to JS Mode, be aware that Processing.JS is still @ v1.4.1!
If a program doesn't run under the old Processing v1.5.1, most probably won't work in JS Mode either!

Actually, your code doesn't even compile in my own Processing v2.0.2!
The reason is that you're using an overloaded println() w/ more than 1 argument, which is new from Processing 2.1+!
Fixing that makes your code run in JS Mode as well! Although a little buggy yet!

Good luck! %%-

PhiLho

And when asking a question about PJS, please, choose the JavaScript category. Here, I moved it for you.

ofey

Thank you both for looking at this. I have completely simplified the code down to only what is necessary. But still not working online, I still can't figure out what is wrong. println() has been taken out anyway.

//Written by Shane Gibney
import processing.opengl.*;
int diameter = 100;
float wx, wy; 
int xoffset = 0;
int yoffset = 0;
int gap = 20;
float angle = 0;
float frequency = 1;
float WaveLength = 2;
float floatIncrement = 10; // angle increment in for loop
int increment = int(floatIncrement);
float floatWaveStruts = 360/increment * WaveLength;
int WaveStruts = int(floatWaveStruts);
void setup() {
  background(255, 255, 255);
  size(400, 400, OPENGL);
  fill(255, 190);
  strokeWeight(1);
  noStroke();
  smooth();
}
void draw() {
  background (80, 200, 210);
  camera(200, -200, 200, //camera location
  0, 0, 0, // camera target
  0, 1, 0); // camera orientation
  stroke(200, 0, 0);//red
  line(-200, 0, 0, 200, 0, 0);//x-axis
  stroke(0, 200, 0);//green
  line(0, -200, 0, 0, 200, 0);//y-axis
  stroke(0, 0, 200);//blue
  line(0, 0, -200, 0, 0, 200);//z-axis
  stroke(0, 0, 0);
  for (int i = 0; i < WaveStruts; i += 1) {
    wy = diameter/2 + yoffset + sin(radians(angle + (i*increment)))*(diameter/2);
    wx = diameter + xoffset + gap + (i*5); 
    stroke(#0A8604);
    line (-300 + wx, yoffset + diameter/2 - 50, 0, -300 + wx, wy - 50, 0);
    stroke(#071771);
    line (-300 + wx, 0, -1*(yoffset + diameter/2 - 50), -300 + wx, 0, -1*(wy - 50));
  }
  angle -= frequency;
}

GoToLoop

I believe camera() is buggy in JS Mode! :(
I've got an example which uses that as well, but I had to comment that out when converting it to PJS!

http://studio.processingtogether.com/sp/pad/export/ro.9oKy5N3D6zFZT/latest

P.S.: We can define camera() inside setup() too! It's not reset in draw()! ;;)

ofey

So camera() can not be updated using PJS? Is that correct? This means camera controls can not be used.

But thanks for letting me know and this explains why none of my 3D sketches were working despite my paring back the code to it's minimum.

Thanks,

ofey

I can't understand why I can get this to work online but not this one? The latter uses camera() inside draw().

ofey

I wonder could the problem be on line 12

int increment = int(floatIncrement);

This is mentioned on the processing.js site here where they talk about casting,which I know nothing about.

ofey

No it's not int() ?????????????????????

ofey

Hi, This is working now. I think there was some problems with stroke() and nostroke, as simple as that!

//Written by Shane Gibney
import processing.opengl.*;
int diameter = 100;
float wx, wy; 
int xoffset = 0;
int yoffset = 0;
int gap = 20;
float angle = 0;
float frequency = 1;
float WaveLength = 2;
float floatIncrement = 10; // angle increment in for loop
int increment = int(floatIncrement);
float floatWaveStruts = 360/increment * WaveLength;
int WaveStruts = int(floatWaveStruts);
void setup() {
  size(300, 300, OPENGL);
  //smooth();
  fill(0);
}
void draw() {
  background (255, 255, 255);
  camera(200, -200, 200, //camera location
  0, 0, 0, // camera target
  0, 1, 0); // camera orientation
  strokeWeight(1.0);
  stroke(200, 0, 0);//red
  line(-200, 0, 0, 200, 0, 0);//x-axis
  stroke(0, 200, 0);//green
  line(0, -200, 0, 0, 200, 0);//y-axis
  stroke(0, 0, 200);//blue
  line(0, 0, -200, 0, 0, 200);//z-axis
  stroke(0, 0, 0);
  for (int i = 0; i < WaveStruts; i += 1) {
    wy = diameter/2 + yoffset + sin(radians(angle + (i*increment)))*(diameter/2);
    wx = diameter + xoffset + gap + (i*5); 
    stroke(#0A8604);
    line (-300 + wx, yoffset + diameter/2 - 50, 0, -300 + wx, wy - 50, 0);
    stroke(#071771);
    line (-300 + wx, 0, -1*(yoffset + diameter/2 - 50), -300 + wx, 0, -1*(wy - 50));
  }
  angle -= frequency;
}
// Anykey to pause and unpause animation
boolean bStop;
void keyPressed()
{
  bStop = !bStop;
  if (bStop)
    noLoop();
  else
    loop();
} 

Thanks, Shane