Masking works in Java, but not JavaScript

newmiracle

I have an experimental sktech that I've made. It "draws" a mask like a painting program. The effect is like uncovering an image underneath the one you are looking at.

This effect works fine in Java mode. However, it doesn't work in JavaScript mode and I'm not sure why.

Here's my code so far (you'll need to supply images to use, but otherwise this should work):

    /* @pjs preload="leaves.jpg, moonwalk.jpg"; 
     */



    /*
    *
     *
     */


    PGraphics maskPattern;
    PGraphics savedimg;
    PImage img1;
    PImage img2;

    int displayImageX;
    int displayImageY;

    float scaleFactor;
    float centerScaledAdjustedXpos;
    float centerScaledAdjustedYpos;

    void setup() {
      img1 = loadImage("moonwalk.jpg");
      size(800, 800, JAVA2D);
      //640,260
      maskPattern = createGraphics(img1.width, img1.height);
      savedimg = createGraphics(img1.width, img1.height);
      img2 = loadImage("leaves.jpg");

      scaleFactor=1;

      displayImageX = width/2;
      displayImageY = height/2;

      centerScaledAdjustedXpos=0;
      centerScaledAdjustedYpos=0;
    }

    void draw() {

      pushMatrix();
      scale(scaleFactor);


      background(0);

      imageMode(CENTER);
      image(img2, displayImageX/scaleFactor, displayImageY/scaleFactor);



      if (mousePressed == true) {
        maskPaint();
      }


      img1.mask(maskPattern);

      image(img1, displayImageX/scaleFactor, displayImageY/scaleFactor);




      popMatrix();
    }


    void maskPaint() {


      centerScaledAdjustedXpos = ((mouseX-displayImageX)/scaleFactor+(maskPattern.width/2));
      centerScaledAdjustedYpos = ((mouseY-displayImageY)/scaleFactor+(maskPattern.height/2));

      maskPattern.beginDraw();
      maskPattern.stroke(255);
      maskPattern.fill(255);
      maskPattern.ellipse(centerScaledAdjustedXpos, centerScaledAdjustedYpos, 50, 50);




      maskPattern.endDraw(); 

      println(centerScaledAdjustedXpos + ", " + centerScaledAdjustedYpos);
    }


    void imageOpen(File selection) {
      PGraphics tempMaskPattern;
      PImage tempImg;

      if (selection == null) {
        println("Window was closed or the user hit cancel.");
      } 
      else {
        tempMaskPattern = createGraphics(maskPattern.width, maskPattern.height);
        tempMaskPattern = maskPattern;

        println("User selected " + selection.getAbsolutePath());


        img1 = loadImage(selection.getAbsolutePath());  


        maskPattern = createGraphics(img1.width, img1.height);


        println(tempMaskPattern.width + ", " + tempMaskPattern.height);
        println(maskPattern.width + ", " + maskPattern.height);

        savedimg = createGraphics(img1.width, img1.height);
      }
    }




    void keyPressed() {
      if (key == '1')
      {
        selectInput("Select a file to process:", "imageOpen");
      }



      if (key == 's')
      {
        savedimg.beginDraw();
        savedimg.image(img2, 0, 0);
        img1.mask(maskPattern);
        savedimg.image(img1, 0, 0);
        savedimg.endDraw();

        savedimg.save("final_image.jpg");
        println("Saved ");
      }

      if (key == ' ') {
        maskPattern.clear();
      }  

      if (key == '-') {
        println("minus ");
        scaleFactor=scaleFactor-.01;
      }
      if (key == '=') {
        println(img1.width/2);

        scaleFactor=scaleFactor+.01;
      }
    }

So that's it. Any way I can get this drawing functionality to work in the browser like it does in the Java app?

EDIT: not having an easy time with this code commenting.

REAS

See this post for code commenting: http://forum.processing.org/two/discussion/32/how-to-format-text-and-code-on-the-new-forum#Item_7

darbicus

im not sure what it is you are trying to do because i can't decypher the code but i have an example that might help you, because I remember having issues figuring out how to draw a pgraphics to the main but all you need to do to convert from pgraphics to a pimage is .get() i believe. In any case check it out see if it helps: http://www.openprocessing.org/sketch/98115

here is a fiddle of your code + images http://jsfiddle.net/Darbicus/6M8q3/ idk what its supposed to do yet i can't get it to work in java lol

I'm pretty sure its just the image locations being against the cross origin sharing policy

newmiracle

Just wanted to say thanks a bunch. I needed PGraphics in order to build my masks, but they weren't showing up in JS. Converting it to a PImage, then using that to mask was exactly what I needed to do. .get() was exactly what I needed.