Gradient + Filter(Blur)

osdetbareos

Hi, new to Processing, I have 2 questions I hope you can help me out with:

1) How do you apply filter blur only on the hand + strings, not the text and logo?

2) When applying opacity to the gradient background, it becomes laggy instead of a fluent gradient. How do I fix this?

Here's my code:

//////////////////////// CONSTANTS/VARIABLES ////////////////////////
PImage img;
PImage imgBG;
PImage imgLogo;
PImage imgOurLogo;
PFont font;

//Gradient variables
int Y_AXIS = 1;
int X_AXIS = 2;
color b1, b2;

//////////////////////// SETUP ////////////////////////
void setup () {
  size(300, 600);
  background(0);
  imgBG = loadImage("bg.png");
  img = loadImage("hand.png");
  imgLogo = loadImage("groblogo.png");
  imgOurLogo = loadImage("logo.png");
  //noLoop();

  // Define colors
  b1 = color(#564162, 10);
  b2 = color(#18141F, 10);

}

//////////////////////// DRAW ////////////////////////
void draw () {

  ///// TEXT /////
  pushMatrix();
  noStroke();
  font = createFont("SquadaOne-Regular.ttf", 80);
  textFont(font);
  fill(255);
  textSize(24);
  text("19. juni - 12. juli 2017", 111, 588);

  ///// OUR LOGO /////
  image(imgOurLogo, 22, 419);
  popMatrix();

  ///// LOGO /////
  image(imgLogo, 13, 13);

  ///// HAND /////
  pushMatrix();
  translate(width/2, height/2, 10);
  image(img, 88, 53);
  popMatrix();

  ///// GRADIENT /////
  setGradient(0, 0, width, height, b1, b2, Y_AXIS);

  ///// STRINGS /////
  pushMatrix();
  stroke(255);
  for (int i = 247; i <= width; i += 170) {
    line(125, 120, mouseX, mouseY);
    line(96, 88, mouseX, mouseY);
    line(134, 77, mouseX, mouseY);
    line(166, 95, mouseX, mouseY);
    line(181, 83, mouseX, mouseY);
  }
  filter(BLUR, 0.6);
  popMatrix();
}

void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) {
  noFill();

  if (axis == Y_AXIS) {  // Top to bottom gradient
    for (int i = y; i <= y+h; i++) {
      float inter = map(i, y, y+h, 0, 1);
      color c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x+w, i);
    }
  } else if (axis == X_AXIS) {  // Left to right gradient
    for (int i = x; i <= x+w; i++) {
      float inter = map(i, x, x+w, 0, 1);
      color c = lerpColor(c1, c2, inter);
      stroke(c);
      line(i, y, i, y+h);
    }
  }
}

kfrajer

1) How do you apply filter blur only on the hand + strings, not the text and logo?

One idea is that you apply the blur first and then you draw your text and logo (untested). Or you could use an extra buffer where you draw all your elements and then you apply the blurring in that buffer. For this, you need to check the PGraphics in the reference.

2) When applying opacity to the gradient background, it becomes laggy instead of a fluent gradient.

Where are you setting your opacity? Notice your gradient is not changing. You could define it in setup.

Kf

osdetbareos

Thank you for your answer @kfrajer :)

1) I've tried changing order of code, drawing blur first, but it still adds blur to everything. It seems you are right about using PGraphics, but somehow can't manage to make it work with this code (haven't use PGraphics before).

2) I set opacity on the gradient colors at the top after the hex colors like this:
// Define colors
b1 = color(#564162, 10);
b2 = color(#18141F, 10);

Did this to get the trail after the lines instead of just 5 lines, but maybe this is the wrong way of going about it?

osdetbareos

Now I tried to add a background image instead of gradient and using tint to get the opacity on the BG image (in order to make the line trail show up). However, tint is applied to everything in the code, and it doesn't seem like noTint(); is working. Any help appreciated!!!

//////////////////////// CONSTANTS/VARIABLES ////////////////////////
PImage img;
PImage imgBG;
PImage imgLogo;
PImage imgOurLogo;
PFont font;

//////////////////////// SETUP ////////////////////////
void setup () {
  size(300, 600);
  imgBG = loadImage("bg.png");
  img = loadImage("hand.png");
  imgLogo = loadImage("groblogo.png");
  imgOurLogo = loadImage("logo.png");

  //noLoop();
}

//////////////////////// DRAW ////////////////////////
void draw () {
  /////// BAGGRUNDSBILLEDE /////
  tint(255, 10);  // Display at half opacity
  image(imgBG, 0, 0);
  noTint();

  ///// LINES /////
  stroke(255);
  for (int i = 247; i <= width; i += 170) {
    line(125, 120, mouseX, mouseY);
    line(96, 88, mouseX, mouseY);
    line(134, 77, mouseX, mouseY);
    line(166, 95, mouseX, mouseY);
    line(181, 83, mouseX, mouseY);
  }

  filter(BLUR, 2.0); //

  ///// TEXT /////
  noStroke();
  font = createFont("SquadaOne-Regular.ttf", 80);
  textFont(font);
  fill(255);
  textSize(24);
  text("19. juni - 12. juli 2017", 111, 588);

  ///// OUR LOGO /////
  noTint();
  image(imgOurLogo, 22, 419);

  ///// LOGO /////
  image(imgLogo, 13, 13);

  ///// HAND /////
  image(img, 88, 53);

  filter(BLUR, 0.0); //
}

//////////////////////// LINK FUNCTION ////////////////////////
void mousePressed() { 

  //link("http://www.grob.dk/en/");
}