Best way to "whiten out" area

edited August 2015 in p5.js

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?

Tagged:

Answers

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

  • edited August 2015

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

  • just paint white circle with radius 1000

    for loop

    radius getting smaller down to 500

  • 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_vk
    edited August 2015 Answer ✓

    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);
    
    }
    
  • 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.

  • edited August 2015 Answer ✓

    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. *-:)
  • 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!

  • edited August 2015
    • 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
  • edited August 2015

    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_vk
    edited August 2015

    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));
    }
    
Sign In or Register to comment.