SOLVED: Radial Mask... what am I doing wrong?

AaronR

I know Python pretty well... however, the syntax of processing is sometimes more confusing than python.

I have an image...

Two which I run the following code:

PGraphics pg;
PImage img;

void setup() {
  size(500,500);
  smooth();
  ellipseMode(CENTER);
  pg = createGraphics(width,height);
  img = loadImage("assets/greaseball.jpg");
}

void draw() {
  pg.beginDraw();
  pg.background(0);
  pg.noStroke();
  pg.fill(255);
  pg.ellipse(mouseX,mouseY,100,100);
  pg.endDraw();
  background(0);
  img.mask(pg);
  image(img,0,0);
}

It produces this...

However, when I attempt to add in a very simple radial gradient mask

PGraphics pg;
PImage img;

void setup() {
  size(500,500);
  smooth();
  ellipseMode(CENTER);
  pg = createGraphics(width,height);
  img = loadImage("assets/greaseball.jpg");
}

void draw() {
  pg.beginDraw();
  pg.background(0);
  pg.noStroke();
  pg.fill(255);
  pg.ellipse(mouseX,mouseY,100,100);
  for (int i = 1; i < 150; i++)   {
    pg.fill(float(i)*2);
    pg.ellipse(mouseX, mouseY, 300-(2*1), 300-(2*i));
  pg.endDraw();
  background(0);
  img.mask(pg);
  image(img,0,0);
}
}

I end up with no subtraction, just a black box. However, I know that I am looping for my mouseX and MouseY if I add in a print statement.

What am I doing wrong? I assume I am not actually subtracting anything.

In python, numpy, and GDAL, I am used to working with images in an array. I'm not sure how this translates here.

many thanks,

aaron

BarbaraAlmeida

• Processing has a Python mode, you will maybe find it easier: http://py.processing.org/

• Move lines 21 to 24 to outside the for loop, you're unnecessarily doing it 150 times.

• I think there is a mistype in line 20: pg.ellipse(mouseX, mouseY, 300-(2*i), 300-(2*i));

• But I don't see why you're getting a black screen, even before these changes your code was working here.

AaronR

Thanks Barbara. Ive seen the python mode, but I wanted to get a grip on how processing works first. By "outside the for loop", do you mean in void draw, or add in a void display and call it from there?

Let me see if I can add some info to what I am doing. I can do a simple gradient like this...

With the following code:

void setup() {
  size(600, 600);
  smooth();
  ellipseMode(CENTER);
}

void draw() {
  background(255);
  noStroke();
  for (int i = 1; i < 150; i++) {
    fill(float(i)*2);
    ellipse(mouseX, mouseY, 300-(2*i), 300-(2*i));
    //ellipse(mouseX - 100, mouseY - 100, 300-(2*i), 300-(2*i));
  }
}

I am assuming that an ellipse, added in like the previous mask would produce a radial gradient mask. That's the confusing part. It just creates an all black screen.

BarbaraAlmeida

By "outside the for loop", do you mean in void draw, or add in a void display and call it from there?

I mean in void draw, just after the for loop:

void draw() {
  pg.beginDraw();
  pg.background(0);
  pg.noStroke();  
  for (int i = 1; i < 150; i++)   {
    pg.fill(i*2);
    pg.ellipse(mouseX, mouseY, 300-(2*i), 300-(2*i));         
  }
  pg.endDraw(); 

  background(0);
  img.mask(pg);
  image(pg,0,0);
}

I am assuming that an ellipse, added in like the previous mask would produce a radial gradient mask. That's the confusing part. It just creates an all black screen.

That's what I find weird, when I run the code it produces a radial gradient mask.

AaronR

Ok. That makes sense. I am so used to python without having to use curly brackets. growing up without C, I suppose.

Whoa. I made the changes you suggested and it produced the radial gradient mask. :D

I tried the old code and it produced the all black box. Very Strange indeed! Anyway, thanks for the help!

Aaron