Masking with Projessing.JS
in
Processing with Other Languages
•
4 months ago
Hi!
I'm working on dynamic image masking with processing.js .
In particular I'm using a triangle as a mask, and sometimes it is upward sometimes it is downward.
Anyway, I'm storing a Triangle class with the coordinates in PVector so i can easily draw the mask in a PGraphics object.
See the note at the end: this program in processing 1.5 IDE works without problem,with the correct masking, but in processing.js not working.
I'm using processing.js v1.4.1
Here is the code:
- PGraphics triangleMask;
- PImage _background;
- //------------------------------------------ Triangle
- class Triangle {
- PVector a,b,c;
- PVector aabb1, aabb2;
- int x,y, id;
- Triangle(int id, PVector a, PVector b, PVector c) {
- this.id = id;
- this.a = a; this.b = b; this.c = c;
- computCentroid();
- computeBoundingBox();
- }
- void computeBoundingBox() {
- // ...
- }
- PVector computCentroid() {
- // ....
- }
- void draw() {
- //--------------------------------------------------------------------------- CREATE MASK HERE
- triangleMask = createGraphics(90, 90, JAVA2D); // I have tried also with P3D
- triangleMask.beginDraw();
- triangleMask.background(0);
- triangleMask.fill(255);
- triangleMask.stroke(255);
- triangleMask.beginShape();
- triangleMask.vertex(a.x-aabb1.x, a.y-aabb1.y); //aabb1.x, aabb1.y,
- triangleMask.vertex(b.x-aabb1.x, b.y-aabb1.y);
- triangleMask.vertex(c.x-aabb1.x, c.y-aabb1.y);
- triangleMask.endShape(CLOSE);
- triangleMask.endDraw();
- PImage texture = createImage(90, 90, RGB);
- texture.copy(
- _background,
- (int)aabb1.x, (int)aabb1.y, 90, 90, //aabb2.x, aabb2.y,
- 0,0, 90, 90);
- //--------------------------------------------------------------------------- USE MASK HERE
- texture.mask(triangleMask);
- image(texture, aabb1.x, aabb1.y);
- noFill();
- stroke(255,0,0);
- beginShape();
- vertex(a.x, a.y);
- vertex(b.x, b.y);
- vertex(c.x, c.y);
- endShape(CLOSE);
- }
- }
NOTE: This code in Processing.org works as a charm. When i put it in an html page via processing the mask part is ignored: the part of _background copied is not a Triangle but a rectangle (the rect i copy without the mask).
1
