Image mask from Java to Javascript

mandrale

Hi!!,

I've written a code that works fine in processing Java mode but doesn't in Javascript.

The idea Having a gray plain image shown at the beginning, then swiping with the finger (using a touchscreen) or clicking and moving with the mouse unveils portions of images (randomly from a set). The effect is like painting with different random images.

What happens The images are correctly and randomly shown when clicking the mouse in javascript version but the "painting effect doesn't works".

I've looked at the guide and found these common possible causes but couldn't figure out how to solve.

no data directory, should provide a file page (but images are shown correctly??) some functions are just not supported rendering mode, (JAVA2D should become something else??)

Can you help me please?

// Example 0-4: unvealing random images

int maxImages = 4; // Total # of images
int imageIndex = 0; // Initial image to be displayed is the first

// Declaring an array of images.
PImage[] images = new PImage[4]; 

void setup() {
  size(500,500);

  // Loading the images into the array

  for (int i = 0; i < images.length; i ++ ) {
    images[i] = loadImage( i + ".jpg" ); 
  }
}

void draw() {



   if (mousePressed == true) {

  PGraphics maskImage;
  maskImage = createGraphics(images[imageIndex].width,images[imageIndex].height, JAVA2D);
  maskImage.beginDraw();
  maskImage.fill(100);
  maskImage.noStroke();
  maskImage.ellipse(mouseX, mouseY, 100, 100);
  maskImage.endDraw();

  PImage imgCopy = images[imageIndex]; // if the mask changes every frame, we need to use a copy of it, keeping the original intact
  imgCopy.mask(maskImage);// apply the mask to  image
  image(imgCopy, 0, 0);
  }


}

void mousePressed() {
  // A new image is picked randomly when the mouse is clicked

  imageIndex = int(random(images.length));
}

GoToLoop

There are 2 obvious issues there: :-S

1. I don't see any preload @pjs directives: http://processingjs.org/reference/preload/
2. createGraphics() @ 60 FPS is a big no-no! Why not within mousePressed()?