Mouse controlled mask
in
Share your Work
•
1 year ago
Hi,
I'm not an expert, but I've seen a lot of people asking questions about masks. I've not found so many simple informations about the subject. I made this small sketch to show beginners how they can use PGraphics as masks.
Mask applet
I'm not an expert, but I've seen a lot of people asking questions about masks. I've not found so many simple informations about the subject. I made this small sketch to show beginners how they can use PGraphics as masks.
Mask applet
- /**
* Alpha Mask with PGraphics
*
* "img.jpg" is the background image that I load in backgroundimage."mask.jpg" is the grayscale image
* used as a mask. It's loaded in maskimage. Then maskimage is drawn to a PGraphics object and this
* PGraphics is used as the mask. (I couldn't use a PImage as a mask if it was not the applet's size.)
* They must be in this sketch's data folder. Left click to change the mask and right click to
* invert it...
*/
PImage maskimage;
PImage backgroundimage;
PGraphics pg;
String maskname="mask";
int i=0;
boolean inver=false;
void setup() {
size(800, 600);
backgroundimage = loadImage("img.jpg");
maskimage = loadImage(maskname+"0.jpg");
backgroundimage.loadPixels();
pg = createGraphics(800, 600, P2D);
imageMode(CENTER);
}
void draw() {
background(0);
pg.beginDraw();
pg.background(0);
pg.fill(255);
pg.image(maskimage, mouseX-maskimage.width/2, mouseY-maskimage.height/2);
if (inver) {
pg.filter(INVERT);
}
pg.endDraw();
backgroundimage.mask(pg);
image(backgroundimage, width/2, height/2);
}
void mousePressed() {
if (mouseButton == RIGHT) {
inver=!inver;
}
}
void mouseReleased() {
if (mouseButton == RIGHT) {
inver=!inver;
}else{
i++;
if (i>8) {
i=0;
}
maskimage = loadImage(maskname+i+".jpg");
}
}