feather / blur edges of rect, ellipse etc...

Is this possible? the BLUR filter is waaay too slow and processor intensive. I've created a PGraphics to load an image and blur it in setup but this won't work for everything i want to do as it needs to be dynamic

I've creating visuals for a lighting installation and need to have a blurred/feathered edge so the LEDs fade on and off, not just switch from full to nothing. In this example I need the ends of the arcs to feather out, likewise the edge of the fill

Surely there must be a way to overlay multiple images or use a faster blur filter to achieve this effect...?

Screen Shot 2015-08-23 at 14.35.48

float timer;
void setup () {
  size (800, 600);
  frameRate(30);
}
void draw() {
  background(0);
  timer += 0.01;
  float a = map(sin(timer), -1, 1, 40, 360);

  float arc1 = map(sin(timer), -1, 1, 0, 360);
  float arc2 = map(cos(timer), -1, 1, 0, 360);
  strokeWeight(10);
  noFill();

  stroke(200, 0, 0, a);
  arc(width/2, height/2, 180, 180, radians(181), radians(arc1+180), OPEN);         ///// INNER RING /////
  stroke(0, 200, 0, a);
  arc(width/2, height/2, 300, 300, 0, radians(arc1), OPEN);                        ///// SECOND RING /////
  stroke(0, 0, 200, a);
  arc(width/2, height/2, 240, 240, radians(-arc1), 0, OPEN);                      //// MAIN RING //////
  stroke(200, 200, 0, a/2);
  arc(width/2, height/2, 360, 360, radians(-arc2+181), radians(180), OPEN);       //// OTHER RING /////
  stroke(0, 200, 200, a);
  fill(200, 0, 200, 60);
  arc(width/2, height/2, 360, 360, radians(-arc1+181), radians(180), PIE);      ///// OTHER RING //////
  fill(0);
  stroke(0);
  ellipse(width/2, height/2, 60, 60);        ////// INNERMOST CIRCLE /////
}

Answers

  • You might want to look into using a shader: https://www.processing.org/reference/PShader.html

  • is this on a rpi or PC?

  • I've tried the blur.glsl shader but it doesn't quite give the results I want. Anything more blurry causes the sketch to run too slowly and there isnt enough feather at the ends of the arcs.

    Wondering if using a forLoop to draw arcs with transparency that are slightly bigger than each other would work, someone must have had this issue before?

    Screen Shot 2015-08-24 at 16.10.17

  • Only one way to find out. It can't hurt you to put together a little example program testing your theory!

  • it works!!! any higher resolution in the loop and it slows right down.

    float timer, rot0;
    color pink, grin, bloo, yell;
    
    void setup () {
      size (800, 600, P3D);
      hint(DISABLE_OPTIMIZED_STROKE);
      rectMode(CENTER);
      colorMode(HSB, 360, 100, 100);
      pink = color(323, 100, 100);
      bloo = color(239, 100, 100);
      yell = color(54, 100, 100);
      grin = color(119, 100, 100);
    }
    void draw() {
      background(0);
      timer += 0.01;
      float a = map(sin(timer), -1, 1, 40, 360);
      float arc1 = map(sin(timer), -1, 1, 0, 360);
      float arc2 = map(cos(timer), -1, 1, 0, 360);
      strokeWeight(10);
      noFill();
    
      for (float i = 1; i < 10.1; i++) {
        stroke(grin, a/(i*5));
        arc(width/2, height/2, 300, 300, 0, radians(arc1)/i, OPEN);  ///// SECOND RING /////
    
        stroke(bloo, a/(i*5));
        arc(width/2, height/2, 240, 240, radians(-arc1)/i, 0, OPEN);  //// MAIN RING //////
      }
      stroke(yell, a/2);
      arc(width/2, height/2, 360, 360, radians(-arc2+181), radians(180), OPEN);       //// OTHER RING /////
      stroke(pink, a);
      //fill(200, 0, 200, 60);
      arc(width/2, height/2, 360, 360, radians(-arc1+181), radians(180), PIE);      ///// OTHER RING //////
      fill(0);
      stroke(0);
      ellipse(width/2, height/2, 60, 60);        ////// INNERMOST CIRCLE /////
    
      fill(255);
      text(frameRate, 2, 20);
    }
    
  • to make this better I want to make the steps more even - im assuming using log() in someway is the way to go.... does this sound right?

    Screen Shot 2015-08-26 at 14.45.37

Sign In or Register to comment.