Masking works in Java, but not JavaScript

edited October 2013 in JavaScript Mode

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.

Comments

Sign In or Register to comment.