Best way to "whiten out" area

joySeeing

I have this image:

I want to whiten out everything around the thicker stroked large circle.

I would just use a background image with a cutout but the size of this structure changes so that won't work.

I would just make a few thick stroked white circles with no fill incrementing larger w/h than the thick circle there, but as the circle size changes, the stroke weights and spacings have to be carefully adjusted to match.

Is there a more solid (pun intended) for this?

_vk

You can draw in a PGraphics, dynamically draw a mask in another one and display the first masked by the second...

joySeeing

Ok, but that seems to be for two images, correct? This is generated with code. Is it still possible? I tried making my own pImage, drawing a white background with a black (for testing) ellipse in the center like above but with 0 opacity. I display it after everything else hoping that the lack of opacity let's the other stuff go through, but it doesn't. I get the white background and even a white ellipse (because 0 opacity) but nothing gets through...

Either it isn't possible or I misunderstand something.

I globally define var aMask; (using p5js for this but it's the same / similar).

In setup I do:

aMask = createGraphics(width, height);
aMask.background(255);
aMask.fill(0, 0); // color black but with 0 opacity...
aMask.ellipse(height / 2, height / 2, height, height);

then after drawing the graphics in draw(), I do image(aMask, 0, 0);

but as I said, this doesn't work...

Chrisir

just paint white circle with radius 1000

for loop

radius getting smaller down to 500

joySeeing

painting that many circles at 60 fps kind of kills the frame rate, it seems. I don't think it's the best solution.

_vk

What I had in mind is the following. But There are other ways to do that. Also I'm not using p5.js. Don't know id it will work there.

on line here

http://sketchpad.cc/Kf2CzdZoDZ

the code

PGraphics front, mask;


void setup(){
    size(400, 400);
    front = createGraphics(width, height);
    front.beginDraw();
    front.background(200,80,250);
    front.noStroke();
    front.endDraw();


    mask = createGraphics(width, height);

    }

void draw(){
    background(255);
    front.beginDraw();
    front.fill(10,180,120);
    front.ellipse(random(width), random(height), 10, 10);
    front.endDraw();





    mask.beginDraw();
    mask.background(0);
    mask.fill(255);   
    mask. ellipse(width/2, height/2, 400-(frameCount%400), 400-(frameCount%400));
    mask.endDraw();

    PImage temp = front.get();
    PImage tempMask = mask.get();

    temp.mask(tempMask);

    image(temp,0,0);

}

joySeeing

That works well. Only problem is I believe mask in P5JS is only a method for an image object not a graphics (renderer) object. At least, this is my suspicion. I'll take the convo there. Thanks for your answer.

GoToLoop

Only problem is I believe mask in P5JS is only a method for an image object not a graphics (renderer) object.

• The implementation of both p5.Image & p5.Renderer is conceptually buggy!
• In Processing, class PGraphics inherits from PImage.
• Thus it allows PGraphics to be accepted as & use everything available from PImage.
• In p5.js, p5.Renderer inherits from p5.Element. Which is a gr8 idea btW.
• However, p5.Image doesn't do the same. Even though it holds an HTMLCanvasElement just like p5.Renderer: https://developer.Mozilla.org/en-US/docs/Web/API/HTMLCanvasElement
• To make matters worse, when we issue createGraphics() there, it wraps up the p5.Renderer object inside a useless p5.Graphics.
• And even weirder: each p5.Graphics object has a copy of all properties of p5 class too!
• Besides redundant, it's a big waste of RAM! Dunno why p5.Graphics even exists there! X(
• IMO, they should completely get rid of that hackish crap p5.Graphics wrapper class.
• And make p5.Image inherit from p5.Element. And in turn p5.Renderer inherit from p5.Image. *-:)

joySeeing

Interesting. Is this something they know about and have thought about? I'm am having similar problems here: forum.processing.org/two/discussion/12015/cam-get#latest for likely similar reasons. These problems don't exist in the Java version.

P5js is still pretty new. Hopefully it's something they make better soon!

GoToLoop

• AFAIK, they're still not aware of it. At least never seen this bad design ever being discussed there!
• I believe they still keep p5.Graphics class wrapper as a lazy hack to make p5.Renderer be able to call all drawing methods from main p5 class.
• The catch is, besides wasting RAM, it makes p5.Renderer have methods that shouldn't be there.
• For instance, we can call random(), sqrt(), createVector(), createCanvas(), etc. from an object returned from createGraphics()!!!
• You may try out your luck there though: https://GitHub.com/processing/p5.js/issues

GoToLoop

Just by going there, I've already spotted another issue related to the fact that a p5.Renderer isn't a p5.Image and it's wrapped up by a p5.Graphics: :P
https://GitHub.com/processing/p5.js/issues/854

Apparently function save() doesn't accept a p5.Renderer parameter, even though it says so!
Or at least, not when a p5.Renderer is wrapped up inside a p5.Graphics object. Who knows? (:|

P.S.: I've spotted your request there too: https://GitHub.com/processing/p5.js/issues/855 B-)

_vk

Another approach without PGraphics... Still in Java mode.

http://sketchpad.cc/65cAwJgUKr

PVector center;

void setup() {
  size(400, 400);
  center = new PVector (width/2, height/2);
}

void draw() {

  fill(10, 180, 120);
  ellipse(random(width), random(height), 10, 10);


  loadPixels();
  for (int i = 0; i < pixels.length; i++){
    if(erase(toBiDimensional(i, width), 400 -(frameCount%width) )){
      pixels[i] = color(255);
    }
  }
  updatePixels();
}



boolean erase(PVector p, float diameter) {
  float disX = p.x - center.x;
  float disY = p.y - center.y;

  return !(sqrt(sq(disX) + sq(disY)) < diameter/2);
}

//utilitie to get x and y coordinates from pixels index
PVector toBiDimensional(int index, int wid)
{
  return new PVector(index%wid, int(index/wid));
}