Image not rendering on web browser

Question

I got a kaleidoscope code from Gary George at openprocessing. I tried to modify it to meet my needs and export it to web. But I'm having trouble rendering the image on the browser. It runs well on the desktop but not on browser. I've been trying to fix the error but...no luck (yet, I hope).

Here is the code:

/**
 * Kaleidoscope   by Gary George.
 * 
 *Load an image.
 *Move around the mouse to explore other parts of the image.
 *Press the up and down arrows to add slices.
 *Press s to save.
 *
 *I had wanted to do a Kaleidoscope and was inspired with the by Devon Eckstein's Hexagon Stitchery
 *and his use of Mask.  His sketch can be found at http://www.openprocessing.org/visuals/?visualID=1288

 */

PImage a;
int totalSlices=8;  // the number of slices the image will start with... should be divisable by 4
int previousMouseX, previousMouseY;  //store previous mouse coordinates

void setup() 
{
    size(500,500, JAVA2D);
    background(0,0,0); 
    smooth();  //helps with gaps inbetween slices
    fill(255);
    frameRate(30);
    a=loadImage("pattern.jpg");
}

void draw() {
  if(totalSlices==0){ 
    background(0,0,0);  
    image(a,0,0);
  }
  else{
   if(mouseButton == LEFT){
      background(0,0,0);  
      //the width and height parameters for the mask
      int w =int(width/3.2); 
      int h = int(height/3.2); 
        //create a mask of a slice of the original image.
      PGraphics selection_mask; 
      selection_mask = createGraphics(w, h, JAVA2D); 
      selection_mask.beginDraw(); 
      selection_mask.smooth();
      selection_mask.arc(0,0, 2*w, 2*h, 0, radians(360/totalSlices+.1));   //using 369 to reduce lines on arc edges
      selection_mask.endDraw(); 
      float wRatio = float(a.width-w)/float(width);
      float hRatio = float(a.height-h)/float(height);
      //println("ratio: "+hRatio+"x"+wRatio);
      PImage slice = createImage(w, h, RGB); 
      slice = a.get(int((mouseX)*wRatio), int((mouseY)*hRatio), w, h);  
      slice.mask(selection_mask); 
      translate(width/2,height/2); 
      float scaleAmt =1.5;
      scale(scaleAmt);
      for(int k = 0; k<=totalSlices ;k++){ 
        rotate(k*radians(360/(totalSlices/2))); 
        image(slice, 0, 0); 
        scale(-1.0, 1.0);
        image(slice,0,0);
      }
   }
   resetMatrix();
  }
}

Answer 1

You need to change two things for loading a local image in JS mode:

1. Your images must be in a folder called data inside your sketch folder. You can just make the folder yourself and put the image in it. You still load the image as before, no need to specify the data folder.

2. In JS mode, you need to preload the image using this command: /* @pjs preload="pattern.jpg"; */

So your full image loading code would be:

/* @pjs preload="pattern.jpg"; */
a = loadImage("pattern.jpg");