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

rmaskey

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

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 /////
}

KevinWorkman

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

Chrisir

is this on a rpi or PC?

rmaskey

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?

KevinWorkman

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

rmaskey

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

rmaskey

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?