Using Mask in processing.js

Question

I'm pretty new with Processing.js and I was wondering why this simple mask is not working? I mean, I can display the image and the mask without any problem, but as soon as it reach the line img1.mask(mask1); everything stop working.

/* @pjs preload="resources/images/1.jpg, resources/images/masks/1.jpg"; */
void draw(){  
    PImage img1 = loadImage("resources/images/1.jpg");
    PImage mask1 = loadImage("resources/images/masks/1.jpg");
    img1.mask(mask1);
    image(img1, 0, 0);
}

I have read http://processingjs.org/reference/PImage_mask_/, but I don't see what i'm doing wrong :S Anyone have an idea ? Thanks

Did you try it outside of the `draw()` method? That's the only suspicious looking thing to me. — gary, Mar 02 '12 at 01:27
No, I use it inside the draw(). If you want, you can see my code here: http://jsfiddle.net/GhSTE/ it won't work since it doesn't have access to the images from there, but it will give you an idea. Thank you for your help :) — Simon Arnold, Mar 02 '12 at 14:29

score 1 · Accepted Answer · answered Apr 20 '12 at 17:16

I've tried your code from jsfiddle and it's working with Processing.js 1.3.6.
Note that you have to run it from a web server, opening the html file from the filesystem will give you the blank canvas in Chrome or just the text in Firefox.

_{If you don't have an access to a web server you can install one on your own computer (XAMPP is good and multiplatform, I personally use WAMP on Windows)}

score 0 · Answer 2 · answered Mar 02 '12 at 22:17

0

The code is actually working great, but only in Processing, not in Processing.js even though this fonctionnality appear in both reference pages http://processingjs.org/reference/PImage/

answered Mar 02 '12 at 22:17

Simon Arnold

15,849
7
67
85

Using Mask in processing.js

2 Answers2