Loading...
Logo
Processing Forum
when I export my sketch as a javascript file it opens the index.html with the whole layout but the canvas in blank and will not run.  it runs in normal java processing but not in javascript

Replies(9)

Can you post your code?  I've seen this with various sketches, and sometimes it depends on the browser - it will work in Chrome or Safari but not Firefox (or vice versa).
Currently, only Firefox and other Mozilla-based browsers 
accept running JavaScript and any other plugins offline.
That is, when directly opening an .html file from disk.

For other browsers, it is impossible or needs some running argument 
or other special config to allow that.

The most assured way is accessing an .html file from a server!
Copy code
  1. PImage one;
  2. PImage two;
  3. PImage three;
  4. PImage four;
  5. PImage five;
  6. PImage six;
  7. PImage seven;
  8. PImage eight;
  9. PImage nine;
  10. PImage ten;
  11. PImage eleven;
  12. PImage twelve;
  13. PImage thirteen;
  14. PImage fourteen;
  15. PImage fifteen;
  16. PImage sixteen;
  17. PImage seventeen;

  18. int counter=1;

  19. void setup(){
  20.   one=loadImage("1.jpg");
  21.   two=loadImage("2.jpg");
  22.   three=loadImage("3.jpg");
  23.   four =loadImage("4.jpg");
  24.   five=loadImage("5.jpg");
  25.   six =loadImage("6.jpg");
  26.   seven=loadImage("7.jpg");
  27.   eight=loadImage("8.jpg");
  28.   nine=loadImage("9.jpg");
  29.   ten= loadImage("10.jpg");
  30.   eleven=loadImage("11.jpg");
  31.   twelve=loadImage("12.jpg");
  32.   thirteen=loadImage("13.jpg");
  33.   fourteen=loadImage("14.jpg");
  34.   fifteen=loadImage("15.jpg");
  35.   sixteen=loadImage("16.jpg");
  36.   seventeen=loadImage("17.jpg");
  37.   
  38.  size(1200,800); 
  39. }

  40. void draw(){
  41.   if(counter==1){
  42.     fill(0);
  43.     rect(0,0,1200,800);
  44.   image(one,width/3,height/3);
  45.   }

  46. if(counter==2){
  47.  image(two,0,0); 
  48.   
  49. }
  50. if(counter==3){
  51.   fill(0);
  52.   rect(0,0,1200,800);
  53.  image(three,width/4,height/4); 
  54.   
  55. }
  56. if(counter==4){
  57.     fill(0);
  58.   rect(0,0,1200,800);
  59.  image(four,width/3,height/3); 
  60.   
  61. }
  62. if(counter==5){
  63.     fill(0);
  64.   rect(0,0,1200,800);
  65.  image(five,width/3,height/3); 
  66.   
  67. }
  68. if(counter==6){
  69.     fill(0);
  70.   rect(0,0,1200,800);
  71.  image(six,0,0); 
  72.   
  73. }
  74. if(counter==7){
  75.     fill(0);
  76.   rect(0,0,1200,800);
  77.  image(seven,width/3,height/3); 
  78.   
  79. }
  80. if(counter==8){
  81.     fill(0);
  82.   rect(0,0,1200,800);
  83.  image(eight,0,0); 
  84.   
  85. }
  86. if(counter==9){
  87.     fill(0);
  88.   rect(0,0,1200,800);
  89.  image(nine,width/3,height/3); 
  90.   
  91. }
  92. if(counter==10){
  93.     fill(0);
  94.   rect(0,0,1200,800);
  95.  image(ten,width/3,height/3); 
  96.   
  97. }

  98. if(counter==11){
  99.     fill(0);
  100.   rect(0,0,1200,800);
  101.  image(eleven,0,0); 
  102.   
  103. }

  104. if(counter==12){
  105.     fill(0);
  106.   rect(0,0,1200,800);
  107.  image(twelve,0,0);
  108.   
  109. }

  110. if(counter==13){
  111.     fill(0);
  112.   rect(0,0,1200,800);
  113.  image(thirteen,width/3,height/3);
  114.   
  115. }

  116. if(counter==14){
  117.     fill(0);
  118.   rect(0,0,1200,800);
  119.  image(fourteen,width/3,height/3);
  120.   
  121. }

  122. if(counter==15){
  123.     fill(0);
  124.   rect(0,0,1200,800);
  125.  image(fifteen,width/3,height/3);
  126.   
  127. }

  128. if(counter==16){
  129.     fill(0);
  130.   rect(0,0,1200,800);
  131.  image(sixteen,0,0);
  132.   
  133. }

  134. if(counter==17){
  135.     fill(0);
  136.   rect(0,0,1200,800);
  137.  image(seventeen,width/3,height/3);
  138.   
  139. }

  140. if(counter==18){
  141.   fill(0);
  142.   rect(0,0,1200,800);
  143.   counter=1;
  144.   
  145. }
  146. }
  147.  void mouseReleased(){
  148.     
  149.     counter=counter +1;
  }

it works in java but when i uploaded it(it works in firefox but not in chrome) all it is is a black screen that doesnt show images or anything
While all the comments here about preloading images are valid, I think that the sketch itself is an example of bad programming practice. You should first learn about Array and ArrayList and apply these. This helps you to compress your code length by a factor of at least 15.
Repeating: Most browsers decided to suppress code running from local files for some time ago!
They only behave normally when the .html code comes from a server!

Yeah! They do it on purpose! They consider it a safe precaution!!!
Third topic you created around the same problem...
This one belongs here (moved), not to Programming Questions, since it is specific to JS.

About your program, I will repeat an advice I give at least once a day... Put the size() call at the top of setup().
Have you read about PJS? All images must be pre-loaded for the sketch to load them. There is a special instruction for that.
That's odd that it works in Firefox given that as PhiLho pointed out, you do not have what is known in PJS as a "directive" to load the images:

         /* @pjs preload="image1,image2,..."; */

You should have it anyway even if GoToLoop's suggestion is the real culprit.



Perhaps, the @pjs preload directive only helps to have an image ready to load.
Even w/o it, an image may take time, but will load eventually!
good point.  right.  maybe it doesn't break the sketch all together.