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

edited February 2016 in Questions about Code

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

I have an image...

greaseball

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...

Screenshot from 2016-02-21 16:31:42

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

Answers

    • 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.

  • edited February 2016

    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...

    Screenshot from 2016-02-21 18:00:44

    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.

  • 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.

  • 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

Sign In or Register to comment.