Sketch runs well in Java, but suffers terrible frame rate drop as JavaScript sketch

Khazon

Hello community.

I wrote sketch that works perfectly well in Java environment, as soon as i switch to JavaScript frame rate drops. I'm suspecting that it is caused by amount of 3D objects rendered, however in PDE the sketch runs smoothly and with regular fps with same amount variable value and cloud variable value, as is set in code that i'm posting. Could this be caused by pop/push matrix calls? is there any substitue for this function?

Another thing is that i can't get peasyCam to work, i included peasyCam.jar in sketch folder and in libs folder which is inside web-export folder to no avail. I've seen many sketches on openprocessing.org with peasyCam and they work well.

Lastly I'm not able to get any light to render, I've seen many sketches on op.org with light rendered and this issue is turning my hair grey.

In advance, thank you for your time.

I'm using Processing 2.2.1, Java 8 Update 25, Safari 8.0 and Firefox 34.0.5, OS X Yosemite 10.10

// Press RMB to zoom in and hold LMB to move camera

import java.util.*; 
import peasy.*;

PeasyCam cam;

Random generator;

int cloud = 1000; //set amount of cloud particles
int amount = 6; //set amount of spheres

float particles3D; //stores size of 3D particle within cloud
float initial3D ; //initial size of 3D particle

float sd = 25; // standard deviation, aka size of the cloud.
float initialsd = sd; // initial size of sd, used within restart.

int particle_quality = 2;
int sphere_quality = 18;

float [] sp_size = new float[amount]; // stores sizes of spheres
float [] rotationX = new float[amount]; 
float [] rotationY = new float[amount];
float [] sphere_position = new float[amount]; // stores positions of spheres on circular trajectory
float [] trajectory_diameter = new float[amount];
float [] initial = new float[amount]; // initial size of diameter array, used within restart.

boolean res = false;
boolean go = false;

float theta;

float time;

float [] x = new float[cloud];
float [] y = new float[cloud];
float [] z = new float[cloud];

float [] xtemp = new float[cloud];
float [] ytemp = new float[cloud];
float [] ztemp = new float[cloud];


void setup() {
  size(700, 700, P3D);
  noStroke();
  smooth(4);
  colorMode(RGB);
  generator = new Random();


   // Camera settings //
   cam = new PeasyCam(this, width/2, height/2, 0, 600);
   cam.setMinimumDistance(50);
   cam.setMaximumDistance(600);
   cam.setSuppressRollRotationMode();
   cam.setRightDragHandler(null);
   cam.setCenterDragHandler(null);
   cam.setWheelScale(0); // null doesn't work, gives null pointer exception. 

  for (int u=0; u< cloud; u++) { //generate position of each particle
    xtemp[u] = ((float) generator.nextGaussian());
    ytemp[u] = ((float) generator.nextGaussian());
    ztemp[u] = ((float) generator.nextGaussian());
  }

  for (int i = 0; i < amount; i++) {
    sp_size[i] = random(10, 20);
    rotationX[i] = random(TWO_PI);
    rotationY[i] = random(TWO_PI);
    sphere_position[i] = random(TWO_PI);
    trajectory_diameter[i] = random(150, 220);
    initial[i] = trajectory_diameter[i];
  }
}

void draw() {
  background(40);
  translate(width/2, height/2);

  time += 0.04;

  for (int i = 0; i < cloud; i++) { // calculate / recalculate coordinates of particles
    x[i] = sd * xtemp[i];
    y[i] = sd * ytemp[i];
    z[i] = sd * ztemp[i];
  }

  //scene lights//
  lights();
  ambientLight(255, 255, 255);
  directionalLight(230, 20, 230, 0, -1, 0);

  rotateY(time/4);

  particles();
  spheres();

  theta += TWO_PI/200;

  restart();
  zoom();
}

void particles() {   // drawing particle cloud, includes 2D particles and 3D particles after zoom(); happens.
  for (int u =0; u< cloud; u++) { 
    stroke(255, 100);
    point(x[u], y[u], z[u]);

    pushMatrix();
    translate(x[u], y[u], z[u]);
    sphereDetail(particle_quality);
    noStroke();
    sphere(particles3D); 
    popMatrix();
  }
}


void spheres() { // drawing "planets" 
  sphereDetail(sphere_quality); 
  for (int i=0; i < amount; i++) { 

    pushMatrix(); 
    rotateX(rotationX[i]);
    rotateY(rotationY[i]);

    for (int r = 0; r < 360; r++) { // draw trajectories
      stroke(255, 50);
      point(sin(r)*trajectory_diameter[i], cos(r)*trajectory_diameter[i]+cos(time)*10);
    }

    translate(sin(sphere_position[i])*trajectory_diameter[i], cos(sphere_position[i])*trajectory_diameter[i]+cos(time)*10);
    noStroke();
    fill(70);
    sphere(sp_size[i]+cos(time)*8);
    popMatrix();
  }
}


void zoom() { 
  if (go) {
    for (int i = 0; i < amount; i++) {
      trajectory_diameter[i] += 6;
    }
    sd += 1.0;
    particles3D += 0.05;
  }
}

void mousePressed() {
  if (mouseButton == RIGHT) {
    res = false;
    go = true;
  }
}

void restart() { // aka zoom out

  if (res) {
    go = false;

    if (trajectory_diameter[amount-1] > initial[amount-1]) {
      for (int i = 0; i < amount; i++) {
        trajectory_diameter[i] -= 12;
      }
    }

    if (trajectory_diameter[amount-1] < initial[amount-1]) {
      for (int i = 0; i < amount; i++) {
        trajectory_diameter[i] = initial[i];
      }
    }


    if (particles3D > initial3D) {
      particles3D -= 0.1;
      if ( particles3D < initial3D) {
        particles3D = initial3D;
      }

      if (sd > initialsd) {
        sd -= 2.0;
        if (sd < initialsd) {
          sd = initialsd;
        }
        if (sd == initialsd && particles3D == initial3D && trajectory_diameter[amount-1] == initial[amount-1]) {
          res = false;
        }
      }
    }
  }
}

void mouseReleased() { // when the mouse is released, zoom out
  if (sd > initialsd && particles3D > initial3D && trajectory_diameter[0] > initial[0]) {
    res = true;
  }
}

quark

Another thing is that i can't get peasyCam to work, i included peasyCam.jar in sketch folder and in libs folder which is inside web-export folder to no avail. I've seen many sketches on openprocessing.org with peasyCam and they work well

Many of the sketches on OpenProcessing were created in Java mode and exported as applets. Most of these will NOT run in JavaScript mode.

Most of the contributed libraries, including PeasyCam where written in Java and are not compatible JavaScript mode.

The Processing IDE gives the impression that you can write something in JavaMode and that it will work in JavaScript mode - this is wrong.

There is no similarity between the Java and JavaScript languages. JavaMode simply tries to interpret any code written in Java and run an equivalent JavaScript method.

Khazon

I see now, thank you.