Nothing shows up after exporting w/ JavaScript Mode.

Ines2091

Hello there, I've created all the code I needed but when exporting to JavaScript Mode nothing shows up on the browser. I've tried everything but nothing works. Could you please help me?

/* @pjs preload="intro.png"; */  
/* @pjs preload="biografia.png"; */  
/* @pjs preload="film1.png"; */  
/* @pjs preload="film2.png"; */  
/* @pjs preload="film3.png"; */  
/* @pjs preload="premios.png"; */  
 
PImage img; 
PImage img2; 
PImage img3;
PImage img32;
PImage img33;
PImage img4;


int menu_bioX = 45; 
int menu_bioY = 490; 
int menu_bioW = 118; 
int menu_bioH = 50;
 
int menu_filmX = 200; 
int menu_filmY = 500; 
int menu_filmW = 150; 
int menu_filmH = 30;

int menu_film1X = 206; 
int menu_film1Y = 530; 
int menu_film1W = 55; 
int menu_film1H = 60;

int menu_film2X = 247; 
int menu_film2Y = 530; 
int menu_film2W = 55; 
int menu_film2H = 60;

int menu_film3X = 300; 
int menu_film3Y = 530; 
int menu_film3W = 50; 
int menu_film3H = 60;
 
int menu_premiosX = 390; 
int menu_premiosY = 500; 
int menu_premiosW = 105; 
int menu_premiosH = 30;
 
boolean bioOver = false; 
boolean filmOver = false; 
boolean filmOver1 = false; 
boolean filmOver2 = false; 
boolean filmOver3 = false; 
boolean premiosOver = false;
 
import ddf.minim.*;

Minim minim;
AudioPlayer player;
 
// --------------------------------------
 
void setup() { 
  size(800, 600); 
    img = loadImage("intro.png"); 
    img2 = loadImage("biografia.png");
    img3 = loadImage("film1.png");
    img32 = loadImage("film2.png");
    img33 = loadImage("film3.png");
    img4 = loadImage("premios.png");
    minim = new Minim(this);
    player = minim.loadFile("musica.mp3");
    player.play();


}
 
void draw() {
 
  background(img);
 
  fill(250, 0, 0, 0); 
  rect(menu_bioX, menu_bioY, menu_bioW, menu_bioH);
 
  fill(250, 0, 0, 0); 
  rect(menu_filmX, menu_filmY, menu_filmW, menu_filmH);
  
  fill(23, 30, 123, 0); 
  rect(menu_film1X, menu_film1Y, menu_film1W, menu_film1H);
  
  fill(250, 122, 131, 0); 
  rect(menu_film2X, menu_film2Y, menu_film2W, menu_film2H);
 
  fill(25, 211, 250, 0); 
  rect(menu_film3X, menu_film3Y, menu_film3W, menu_film3H);
 
  fill(250, 211, 213, 0); 
  rect(menu_premiosX, menu_premiosY, menu_premiosW, menu_premiosH);
 
  if (filmOver(menu_filmX, menu_filmY, 
  menu_filmW, menu_filmH)) { 
       background(img3);
   // colBG=color(222, 2, 255);
  }
  
  if (filmOver1(menu_film1X, menu_film1Y, 
  menu_film1W, menu_film1H)) { 
       background(img3);
   // colBG=color(222, 2, 255);
  }
  
  if (filmOver2(menu_film2X, menu_film2Y, 
  menu_film2W, menu_film2H)) { 
       background(img32);
   // colBG=color(222, 2, 255);
  }
  
  if (filmOver3(menu_film3X, menu_film3Y, 
  menu_film3W, menu_film3H)) { 
       background(img33);
   // colBG=color(222, 2, 255);
  }
 
  if (bioOver(menu_bioX, menu_bioY, 
  menu_bioW, menu_bioH)) { 
      background(img2);
   // colBG=color(2, 2, 255);
  }
  
  if (premiosOver(menu_premiosX, menu_premiosY, 
  menu_premiosW, menu_premiosH)) { 
      background(img4);
   // colBG=color(2, 2, 255);
  }
}
 
boolean bioOver (int menu_bioX, int menu_bioY, 
int menu_bioW, int menu_bioH) { 
 
  stroke(0);
  rect (menu_bioX, menu_bioY, 
  menu_bioW, menu_bioH);
 
  if (mouseX >= menu_bioX && mouseX <= menu_bioX+menu_bioW &&
    mouseY >= menu_bioY && mouseY <= menu_bioY+menu_bioH) { 
    return true;
  } 
  else { 
    return false;
  }
} 

boolean filmOver1 (int menu_film1X, int menu_film1Y, 
int menu_film1W, int menu_film1H) { 
 
  stroke(0);
  rect (menu_film1X, menu_film1Y, 
  menu_film1W, menu_film1H);
 
  if (mouseX >= menu_film1X && mouseX <= menu_film1X+menu_film1W &&
    mouseY >= menu_film1Y && mouseY <= menu_film1Y+menu_film1H) { 
    return true;
  } 
  else { 
    return false;
  }
}  
 
boolean filmOver2 (int menu_film2X, int menu_film2Y, 
int menu_film2W, int menu_film2H) { 
 
  stroke(0);
  rect (menu_film2X, menu_film2Y, 
  menu_film2W, menu_film2H);
 
  if (mouseX >= menu_film2X && mouseX <= menu_film2X+menu_film2W &&
    mouseY >= menu_film2Y && mouseY <= menu_film2Y+menu_film2H) { 
    return true;
  } 
  else { 
    return false;
  }
}   
 
boolean filmOver3 (int menu_film3X, int menu_film3Y, 
int menu_film3W, int menu_film3H) { 
 
  stroke(0);
  rect (menu_film3X, menu_film3Y, 
  menu_film3W, menu_film3H);
 
  if (mouseX >= menu_film3X && mouseX <= menu_film3X+menu_film3W &&
    mouseY >= menu_film3Y && mouseY <= menu_film3Y+menu_film3H) { 
    return true;
  } 
  else { 
    return false;
  }
}   

boolean premiosOver (int menu_premiosX, int menu_premiosY, 
int menu_premiosW, int menu_premiosH) { 
 
  stroke(0);
  rect (menu_premiosX, menu_premiosY, 
  menu_premiosW, menu_premiosH);
 
  if (mouseX >= menu_premiosX && mouseX <= menu_premiosX+menu_premiosW &&
    mouseY >= menu_premiosY && mouseY <= menu_premiosY+menu_premiosH) { 
    return true;
  } 
  else { 
    return false;
  }
}   

boolean filmOver (int x, int y, 
int width2, int height2) { 
 
  if (mouseX >= x && mouseX <= x+width2 &&
    mouseY >= y && mouseY 

GoToLoop

http://forum.processing.org/two/discussion/8045/how-to-format-code-and-text

Ines2091

Thanks for that GoToLoop, I've changed it. Do you know what could be the problem?

GoToLoop

For starters, Java libraries, like Minim, doesn't work in JS.
In order to debug a JS Mode sketch, hit F12 in the running browser, go to the console tab, and check for any error messages.

http://processingjs.org/reference/
http://processingjs.org/tools/processing-helper.html

Ines2091

Hello again, I've done what you mentioned but no errors show up, and even without the Minim nothing shows up so I suspect it's something to do with @pjs directives but I can't seem to figure it out.

GoToLoop

• AFAIK, JS Mode recognizes the 1st @pjs directive only. The others are simply ignored! #-o
• Read its reference: http://ProcessingJS.org/reference/pjs directive/
• Here's an online sketch using @pjs w/ multiple arguments:
  http://studio.ProcessingTogether.com/sp/pad/export/ro.9bTfM49wCIJza/latest