Using rects as masks.

Programming Questions

nick.prof

in Programming Questions • 8 months ago

Hello i've been trying to get my 2 rect to act as masks for 3 underlying images.
At first i've tried to fill them with the image but I dont want any scaling so I was thinking masks might be better.
I hope someone can help me!

Here's my code so far. Thanks!

PFont z;

final static byte numVars = 4;

final static float[] vars = new float[numVars];

final static byte marginX = 25, marginY = 50;

final static color bg = 120;

PImage img;

void setup() {

size(600, 400);

frameRate(10);

z = loadFont( "Andalus-48.vlw" );

stroke(-1);

String[] data = loadStrings("data.txt");

for ( int i=0; i!=numVars; vars[i] = float(data[i++]) );

}

void draw() {

textFont(z,16);

fill(0);

img = loadImage("Civil_Ensign_of_Luxembourg.bmp");

float e, f, g, h, i, j;

e = vars[0] + vars[1];

f = vars[0]/e * (width-marginY);

g = vars[1]/e * (width-marginY);

h = vars[2] + vars[3];

i = vars[2]/h * (height-marginY);

j = vars[3]/h * (height-marginY);

String[] data = loadStrings("data.txt");

for ( int k=0; k!=numVars; vars[k] = float(data[k++]) );

background(bg);

fill(80,255,80);

rect(marginX, marginX, f, height-marginY);

fill(255,80,80);

rect(f+marginX, marginX, g, i);

fill(255,110,110);

rect(f+marginX, i+marginX, g, j);

fill (0);

text ( ""+vars[0]+"" ,marginX+10,marginY+10);

text ( ""+vars[1]+"" ,f+40,marginY+10);

text ( ""+vars[2]+"" ,f+60,i+10);

text ( ""+vars[3]+"" ,f+60,i+50);

}

Replies(7)

v.k.

Re: Using rects as masks.

8 months ago

Hi, something like this?

CODE EDITED:

// An alpha channel is a gray scale image used to determine
// the transparency of other image, wher black is opaque
// and white is transparent. We are going to draw our alpha
// image on the fly...
PImage img; // an image to be masked
PGraphics p; // a Pgraphics, is like a new canvas to draw in.
void setup () {
size (400, 300);
// here i initalize it, same size as sketch and a render
p = createGraphics(400, 300, P2D); // this will not be displayed... more on that later
// an image on the web so you can run the example
// a try catch to in case the image don't load..
try {
img = loadImage ("http://shedexpedition.com/wp-content/uploads/2012/09/rio-de-janeiro-brazil.jpg");
}
catch(NullPointerException e)
{
println("are u offline?");
}
// make it same size as the sketch
img.resize(400, 300);
background(255);
}
void draw() {
// clean the screen every frame
background(255);
// from here to p.endDraw()
// I'm drawing in the PGraphics
// if I'd like to see this draw
// I would have to use it as an image
// calling image(p,0,0) later
// but we don't want that...
p.beginDraw();
// a dark gray background means almost opaque
p.background(40);
p.noStroke();
// a white fill means transparent
p.fill(255);
// the mask rect
p.rect(mouseX, mouseY, 100, 80);
p.endDraw();
// calling the web image to be masked by the PGraphics image
img.mask(p);
// and just display the masked image
image(img, 0, 0);
//press mouse to see only the pgraphics draw displayed
if(mousePressed)image(p,0,0);
}

nick.prof

Re: Using rects as masks.

7 months ago

Thanks for your replay, and I've ben trying to work it into my excisting code but I cant seem to get it to work. Could you please help me understand how it works? This is my new code btw:

PFont z;

final static byte numVars = 4;

final static float[] vars = new float[numVars];

final static byte marginX = 25, marginY = 50;

final static color bg = 120;

final static String fileName = "data/data.txt";

void setup() {

size(600, 400);

frameRate(1);

z = loadFont( "Andalus-48.vlw" );

stroke(-1);

reloadData();

}

void draw() {

if (frameCount % 10 == 0) reloadData();

textFont(z,16);

fill(0);

float a, b, c, d, e, f;

a = vars[0] + vars[1];

b = vars[0]/a * (width-marginY);

c = vars[1]/a * (width-marginY);

d = vars[2] + vars[3];

e = vars[2]/d * (height-marginY);

f = vars[3]/d * (height-marginY);

background(bg);

fill(80,255,80);

rect(marginX, marginX, b, height-marginY);

fill(255,80,80);

rect(b + marginX, marginX, c, e);

fill(255,110,110);

rect(b + marginX, e + marginX, c, f);

fill (0);

text ( ""+vars[0]+"" ,marginX+10,marginY+10);

text ( ""+vars[1]+"" ,b+40,marginY+10);

text ( ""+vars[3]+"" ,b+40,e+60);

}

void reloadData() {

String[] data = loadStrings(fileName);

for ( int i=0; i!=numVars; vars[i] = float(data[i++]) );

}

Thx in advance!

v.k.

Re: Using rects as masks.

7 months ago

Hi, i could not understand how you need/intent to integrate the mask stuff in your code... So I edited the code above with a lot of comments, altered it a bit also, to explain how it goes... Hope that helps.

;)

PhiLho

Re: Using rects as masks.

7 months ago

" I cant seem to get it to work"
Syntax errors? Runtime error? Just not the result you expected?
I don't see a mask() call in your code, so we don't know what you tried actually.

Side note: loadStrings() loads files from the data folder already, so the data/ part in the fileName seems redundant, if not incorrect.

nick.prof

Re: Using rects as masks.

7 months ago

Well this time I've tried to use your up there code and see what it does so I can determen if It doens what I want, but for it gives me an error when I try to use it. It says: createGraphics() with P2D requires size() to use P2D or P3D

I've tried to put the line size(400,300); under it but it doesnt want to work.

PhiLho

Re: Using rects as masks.

7 months ago

Use:

p = createGraphics(400, 300, JAVA2D); // this will not be displayed... more on that later

instead.
(untested!)

amnon.owed

Re: Using rects as masks.

7 months ago

The cause of the problem is that you are using a Processing 2.0 beta, in which P2D/P3D are opengl render modes. When you use an opengl PGraphics, the main sketch needs to be opengl as well. As the hint you posted quite literally states, you need to use P2D or P3D with size => size(400,300,P2D);

The alternative solution is already posted by PhiLho above, which is to change to a non-P2D/P3D PGraphics.