Why does my Java program greyscreen when I export it as javascript?

TheBoat

So I've written this program that works fabulously as a Java app in Processing, but now I want to upload it to the internet for everyone to see. However whenever I open the program in Processing's javascript mode, I keep getting a grey screen. I tried running a simple "Hello World" program and it worked, so I know there must be a problem with my code.

I posted the first bit of my code here, let me know if i should post more.

// Universal
    Table table;
    PFont font;
    String title = "";
    color two;
    color three;
    color four;
    color five;
    color check;
    String mode;
    String submode;
    int[][][] matrix;
    boolean[][] tag1;
    boolean[][] tag2;
    String[][] m;
      boolean[][] c1;
      boolean[][] c2;
      boolean[][] c3;
    int gridSize;
    String result;

//2 player games
String description;
String player1;
String player2;
String p1action1;
String p1action2;
String p2action1;
String p2action2;
String a1;
String a2;
String b1;
String b2;
TableRow pd;
TableRow bach;
TableRow stag;
TableRow battle;
TableRow arms;
TableRow security;
TableRow ratings;
TableRow clothing;
TableRow pricewar;
TableRow nuclear;
TableRow football;
TableRow pennies;
TableRow offer;


//3 player games
String description3 = "";
String player1three = "";
String player2three = "";
String p1action1three = "";
String p1action2three = "";
String p1action3three = "";
String p2action1three = "";
String p2action2three = "";
String p2action3three = "";
String a1three = "";
String a2three = "";
String a3three = "";
String b1three = "";
String b2three = ""; 
String b3three = "";
String c1three = "";
String c2three = "";
String c3three = "";
TableRow threenashtwo;
TableRow threenashone;
TableRow suppliers;
TableRow rps;

void setup() {
  size(680, 650);

  smooth();
  font = loadFont("Calibri-16.vlw");
  textFont(font);

  //PAYOFF MATRIX ARRAY
  matrix = new int[5][5][2];
  tag1 = new boolean[5][5];
  tag2 = new boolean[5][5];
  m = new String[5][5];
  c1 = new boolean[5][5];
  c2 = new boolean[5][5];
  c3 = new boolean[5][5];


  for (int i = 0; i< 5; i++) {
    for (int j = 0; j< 5; j++) {
      m[i][j] = i + "-" + j;
      tag1[i][j] = false;
      tag2[i][j] = false;
      c1[i][j] = false;
      c2[i][j] = false;
      c3[i][j] = false;
    }
  }  
  gridSize = 0;


  //Table Rows
  table = loadTable("GTP.csv", "header");
  pd = table.getRow(0);
  bach = table.getRow(1);
  stag = table.getRow(2);
  battle = table.getRow(3);
  arms = table.getRow(4);
  security = table.getRow(5);
  ratings = table.getRow(6);
  clothing = table.getRow(7);
  pricewar = table.getRow(8);
  nuclear = table.getRow(9);
  football = table.getRow(10);
  pennies = table.getRow(11);
  offer = table.getRow(12);
  threenashone = table.getRow(18);
  threenashtwo = table.getRow(19);
  suppliers = table.getRow(20);
  rps = table.getRow(21);

  //2x2 strings
  description = "";
  player1 = "";
  player2 = "";
  p1action1 = "";
  p1action2 = "";
  p2action1 = "";
  p2action2 = "";
  a1 = "";
  a2 = "";
  b1 = "";
  b2 = "";

  mode = "Not set";
  submode = "Not set";

  result = "";

}

void draw() {  

  // Resets the window
  background(255);

  for (int x = 0; x<gridSize; x+=1) {
    for (int y = 0; y<gridSize; y+=1) {
      if (c3[x][y]) {
        stroke(#FC1E12);
      }
      else {
        fill(255);
        stroke(#000000);
        if (gridSize==2) {
          rect(250+(x*85), 145+(y*85), 80, 80);
        }
        else if (gridSize==3) {
          rect(210+(x*85), 140+(y*85), 80, 80);
        }
        else if (gridSize==4) {
          rect(167+(x*85), 110+(y*85), 80, 80);
        }
        else if (gridSize==5) {
          rect(115+(x*85), 60+(y*85), 80, 80);

        }
          else {
            rect(130+(x*85), 75+(y*85), 80, 80);
          }

      }
    }
   }
         fill(255);



  // Draws the buttons for Mode: 2x2, 3x3, 4x4, 5x5
  stroke(0);
  strokeWeight(1);
  fill(two);
  rect(70, 500, 125, 40);
  fill(three);
  rect(205, 500, 125, 40);
  fill(four);
  rect(340, 500, 125, 40);
  fill(five);
  rect(475, 500, 125, 40);

  // Mouseover style functionality
  if (mouseX>70 && mouseX<195 && mouseY>500 && mouseY<540){
    two = #BD9AFA;
  } else {
    two = #9B6CED;
  }
  if (mouseX>205 && mouseX<330 && mouseY>500 && mouseY<540){
    three = #BD9AFA;
  } else {
    three = #9B6CED;
  }
  if (mouseX> 340 && mouseX<465 && mouseY>500 && mouseY<540){
    four = #BD9AFA;
  } else {
    four = #9B6CED;
  }
  if (mouseX>475 && mouseX<600 && mouseY>500 && mouseY<540){
    five = #BD9AFA;
  } else {
    five = #9B6CED;
  }
 if (mouseX>550 && mouseX<650 && mouseY>250 && mouseY<290){
   check = #BC7889;
 } else {
   check = #B74864;
 }


 // Mode-Specific Drawing
 if (mode == "2x2"){
   title = "";
   description = "";
   description3 = "";
   rectMode(CORNER);
   fill(#B2B0B9);
   stroke(0);
   rect(15, 560, 120, 30);
   rect(145, 560, 120, 30);
   rect(275, 560, 120, 30);
   rect(405, 560, 120, 30);
   rect(535, 560, 120, 30);
   rect(15, 600, 120, 30);
   rect(145, 600, 120, 30);
   rect(275, 600, 120, 30);
   rect(405, 600, 120, 30);
   rect(535, 600, 120, 30);

   textAlign(CENTER, CENTER);
   textSize(12);
   stroke(0);
   fill(0);
   text("Prisoner's Dillemma", 15, 560, 120, 30);
   text("Bach or Stravinsky", 145, 560, 120, 30);
   text("Stag Hunt", 275, 560, 120, 30);
   text("Battle of the Sexes", 405, 560, 120, 30);
   text("Arms Control", 535, 560, 120, 30);
   text("Price War", 15, 600, 120, 30);
   text("Football Game", 145, 600, 120, 30);
   text("Nuclear War", 275, 600, 120, 30);
   text("Matching Pennies", 405, 600, 120, 30);
   text("Randomize", 535, 600, 120, 30);


  //2X2 SUBMODE GAMES
  if (submode == "prisoner2") {
    title = pd.getString("Title");
    description = pd.getString("Description");
    player1 = pd.getString("P1name");
    player2 = pd.getString("P2name");
    p1action1 = pd.getString("P1action1");
    p1action2 = pd.getString("P1action2");
    p2action1 = pd.getString("P2action1");
    p2action2 = pd.getString("P2action2");

    // m[0][0] = pd.getString("a1");
    matrix[0][0][0] = Integer.parseInt(pd.getString("a1").split(",")[0]);
    matrix[0][0][1] = Integer.parseInt(pd.getString("a1").split(",")[1]);

    // m[1][0] = pd.getString("a2");
    matrix[1][0][0] = Integer.parseInt(pd.getString("a2").split(",")[0]);
    matrix[1][0][1] = Integer.parseInt(pd.getString("a2").split(",")[1]);

    //m[0][1] = pd.getString("b1");
    matrix[0][1][0] = Integer.parseInt(pd.getString("b1").split(",")[0]);
    matrix[0][1][1] = Integer.parseInt(pd.getString("b1").split(",")[1]);

    //m[1][1] = pd.getString("b2");  
    matrix[1][1][0] = Integer.parseInt(pd.getString("b2").split(",")[0]);
    matrix[1][1][1] = Integer.parseInt(pd.getString("b2").split(",")[1]);
  }
  }
 }

GoToLoop

I don't believe that Table, which is a new Processing 2+ class, is available to Processing.JS v1.4.1! :o3

TheBoat

So his there a way to get my program running on a website without rewriting it in Processing.JS v1.4.1? And what would that entail roughly?

Edit: Sorry my post message thingy is glitchy

GoToLoop

Grab the old Processing v1.5.1. It's very similar to Processing.JS 1.4.1.
If you manage your code running upon v1.5.1, it's more than half way for JavaScript mode! :P

TheBoat

Well, just for example, Table doesn't work in 1.5.1...so how would I go about replacing that?

GoToLoop

Traditional Processing's way: loadStrings()

http://processing.org/reference/loadStrings_.html

TheBoat

Hm, this will be difficult as I have a fairly large csv file that I need to get rows and columns from. Is there a way to host my program as a java applet somewhere on the internet?

PhiLho

You also will have problems with Integer.parseInt() (which can be replaced by Processing's int() function anyway).

"Is there a way to host my program as a java applet somewhere on the internet?"
Actually anywhere where you can put a good old HTML page... OpenProcessing is also a possibility.