# How can I get Half Blur effect?

**URL:** <https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230>\
**Category:** Project Guidance\
**Created:** [December 14, 2020, 2:15pm UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230 "2020-12-14T14:15:30Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [December 14, 2020, 2:15pm UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/1 "2020-12-14T14:15:30Z")

</div>

Hello, everyone.

I want to ask how can I get an effect called “Depth of Filed” with Processing.

What I mean saying “Depth of Field” shown below:

 ![Screenshot (268)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6ffe0e47d1d4a1bf2a4ad5ea81ccc53570c2523b.jpeg)

I appreciate every help, thanks !

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [December 14, 2020, 9:25pm UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/2 "2020-12-14T21:25:19Z")

</div>

You could try the [`blur()`](https://processing.org/reference/filter_.html) function for this. For example:

```auto
text("hello", 10, 10); // most blur
filter(BLUR);
text("hello", 10, 30); // medium blur
filter(BLUR);
text("hello", 10, 50); // no blur

```

I’m not sure how important the noise is? Is there some rolling/barrel effect? If so, you can add animation that responds to the `mouseY` value.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 14, 2020, 10:09pm UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/3 "2020-12-14T22:09:41Z")

</div>

```auto
void setup() {
  size(400, 50);
  textSize(40);
}

void draw() {
  background(0);
  fill(255); 
  text("HELLO", 10, 40); 
  filter(BLUR, mouseX/60);
}

```

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [December 15, 2020, 8:55am UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/4 "2020-12-15T08:55:36Z")

</div>

@noel @tabreturn Hi, Thank you for your reply.

I write this code:

```auto
void setup() {
  fullScreen(P3D);
  textAlign(CENTER, CENTER);
  textSize(200);
}

void draw() {
  background(0);
 
  for(int i = 0; i < 360; i += 24) {

    text("NOISE", width/2, height/2 - sin(radians(frameCount - i)) * 700, -cos(radians(frameCount - i)) * 700);
    //filter(BLUR);
  }
}

```

But I have two issues.

1. I can’t get that BLUR effect.
2. When they are scrolling, some of the text’s back filled with black rectangle.

How can I solve these ?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 15, 2020, 11:16am UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/5 "2020-12-15T11:16:27Z")

</div>

Love the sketch!  
But Blur is really slow, so I would use a PGraphics.  
Just a simple example to which you maybe could apply your math magic.

```auto
PGraphics pg;
float y, z, t;

void setup() {
  size(1200, 800, P3D);
  background(0); 
  pg = createGraphics(650, 170);
  pg.beginDraw();
  pg.textSize(200);
  pg.text("NOISE", 10, 150);
  pg.filter(BLUR);
  pg.filter(BLUR);
  pg.endDraw();
}

void draw() {
  background(0); 
  t += .009;
  z += 2*sin(t);
  y += 2*sin(t);
  translate(300, y, z);
  image(pg, 0, 0);
}

```

Edit: Oh, just now I saw the image above. You want a heavy blur in the background.  
I would try it with multiple PGraphics then, each with a stronger blur.  
Because I don’t see a way for an easy dynamic blur.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 15, 2020, 12:54pm UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/6 "2020-12-15T12:54:01Z")

</div>

I have an idea that may work.  
In your loop you use, let’s say, five times the text, but each with slightly bigger text sizes.  
For each of these texts you also give an increasing white transparency. This will give a blur effect.  
Then you place these transparent layers in an if block to just show them at a further z value.

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [December 16, 2020, 6:08am UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/7 "2020-12-16T06:08:31Z")

</div>

@noel Sorry, I didn’t really understand. How to give them white transparency ?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 16, 2020, 6:47am UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/8 "2020-12-16T06:47:47Z")

</div>

It didn’t increase the size as I expected. In the center the blur effect is less.

```auto
void setup() {
  size(800, 300);
  //size(750, 300, P3D);
  background(0);
  textSize(200);
  text("NOISE", 100, 230);
  int transparency = 200;
  int x = 100;
  int y = 230;
  for(int i = 200; i < 250; i += 5) {
    textSize(i);
    fill(255, transparency);
    transparency -= 15;
    text("NOISE", x, y);
    x -= 7;
    y += 2;
  }
}

```

 ![noise](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/98c439166143c922952ac69fe54eb4f3d0dbadd2.png)

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [December 16, 2020, 7:00am UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/9 "2020-12-16T07:00:05Z")

</div>

@noel Thank you for your trying, but it is not what I wanted. But I learned how to good effects, Thanks !

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 16, 2020, 11:31pm UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/10 "2020-12-16T23:31:18Z")

</div>

I started to test my first suggestion because it is far simpler to give a nice blur on a prepared pgraphics.  
But soon I encountered the same transparency problem as you had. One of the pgraphic’s isn’t transparent.  
Could that be a bug?

```auto
PGraphics pg1, pg2;
float ang1, ang2, x, z1, y1, z2, y2, d = 150;

void setup() {
  size(380, 450, P3D);
  background(0); 
 
  pg1 = createGraphics(300, 60);
  pg1.beginDraw();
  pg1.textSize(55);
  pg1.text("N.O.I.S.E", 50, 45);
  pg1.endDraw();

  pg2 = createGraphics(300, 60);
  pg2.beginDraw();
  pg2.textSize(55);
  pg2.text("N.O.I.S.E", 50, 45);
  pg2.endDraw();
  ang2 = PI/2;
}

void draw() {
  background(0);  
  z1 = d*sin(ang1);
  y1 = d*cos(ang1)+200;
  ang1 += .03;
  z2 = d*sin(ang2);
  y2 = d*cos(ang2)+200;
  ang2 += .03;
  if (ang1 > TWO_PI)ang1 = 0;
  if (ang2 > TWO_PI)ang2 = 0;
  push();
  translate(30, y1, z1);
  image(pg1, 0, 0);
  pop();
  translate(30, y2, z2);
  image(pg2, 0, 0);
}

```

![crop1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/51122b4c8f411c7ae3c54c605cc8a159570e5341.png) ![crop2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/27c46b5d036f87268e0d9ea8f78bc6b5ccf1ced5.png)

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 16, 2020, 11:38pm UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/11 "2020-12-16T23:38:01Z")

</div>

I posted to fast. I forgot about it. You need to use hint(DISABLE\_DEPTH\_MASK); in setup();

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [December 17, 2020, 9:24am UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/12 "2020-12-17T09:24:15Z")

</div>

@noel Thank you man ! You solved my second problem ! I appreciate it !

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 17, 2020, 2:23pm UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/13 "2020-12-17T14:23:05Z")

</div>

> [@yhlaskerimov](#):
>
> but it is not what I wanted

In this code java and JS, a part of the ‘cylinder’ gets a slightly transparent text, and I can’t figure out why. Any idea?

```auto
PGraphics pg, pgb1, pgb2;
float ang, a, dy = 170, dz = 100, y, z;
PFont fnt;

void setup() {
  size(380, 450, P3D);
  background(0); 
  fnt = createFont("Bulette-Bold.ttf", 100);

  pg = createGraphics(300, 60);
  pg.beginDraw();
  pg.textFont(fnt, 100);
  pg.textSize(35);
  pg.text("N.O.I.S.E", 90, 40);
  pg.endDraw();

  pgb1 = createGraphics(300, 60);
  pgb1.beginDraw();
  pgb1.textFont(fnt, 100);
  pgb1.textSize(35);
  pgb1.text("N.O.I.S.E", 90, 40);
  pgb1.filter(BLUR, 4);
  pgb1.endDraw();

  pgb2 = createGraphics(300, 60);
  pgb2.beginDraw();
  pgb2.textFont(fnt, 100);
  pgb2.textSize(35);
  pgb2.text("N.O.I.S.E", 90, 40);
  pgb2.filter(BLUR, 7);
  pgb2.endDraw();

  hint(DISABLE_DEPTH_MASK);
  frameRate(25);
}

void draw() {
  background(0);  
  ang += .03; 
  if (ang > TWO_PI) ang = 0;
  for (a = 0; a < TWO_PI; a += TWO_PI/16) {
    y = dy*cos(ang+a)+200;
    z = dz*sin(ang+a);
    push();
    translate(25, y, z);
    if (z < -1 && z < -25) image(pgb1, 0, 0);
    else if (z < -25 && z < -40) image(pgb2, 0, 0);
    else image(pg, 0, 0);
    pop();
  }
}

```

https://editor.p5js.org/noelpil/present/s2Dh5KXNC

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [December 17, 2020, 2:43pm UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/14 "2020-12-17T14:43:58Z")

</div>

If we create graphics everytime in draw with controlling their blur effect, will it be so slow ?

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [December 17, 2020, 3:23pm UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/15 "2020-12-17T15:23:36Z")

</div>

You’d probably be better creating the graphics once with the unblurred text, then using a shader to blur it as you draw - something along the lines of the BlurFilter and SepBlur examples in Topics / Shaders (or at [https://github.com/processing/processing-docs/tree/master/content/examples/Topics/Shaders](https://github.com/processing/processing-docs/tree/master/content/examples/Topics/Shaders) ). Separate blur will require a second scratch graphics (make sure to create it the same size and also as P2D, with both big enough to contain the blur, and it should do for this).

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 17, 2020, 3:46pm UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/16 "2020-12-17T15:46:04Z")

</div>

I’ve done some tests now. One with the filter(BLUR,i) and one manipulating the pixels in the pixel array. It’s just too time-consuming to be used in draw(), and the processor gets over charged with this.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 17, 2020, 7:22pm UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/17 "2020-12-17T19:22:24Z")

</div>

Yes, absolutely, when you want to blur fast in draw() dynamically, shaders are the way to go, but you still need pgraphics otherwise you will blur the whole canvas. You can use the blur shaders from the ide examples, or find others on the forum which are all adaptions [from code on this blog](http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html). (there are other nice examples there). Anyway, if you want to try here is a basic example of blurring in draw().

- blur.glsl

```auto
 #ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
 
#define PROCESSING_TEXTURE_SHADER
 
 
uniform sampler2D texture;
 
uniform vec4 o=vec4(0, 0, 0, 0); 
uniform lowp mat4 colorMatrix = mat4(1, 0.0, 0.0, 0.0, 
                                     0.0, 1, 0.0, 0.0, 
                                     0.0, 0.0, 1, 0.0, 
                                     0, 0.0, 0.0, 60.0); //Alpha contrast set to 60
 
 
varying vec2 center;
 
// The inverse of the texture dimensions along X and Y
uniform vec2 texOffset;
 
varying vec4 vertColor;
varying vec4 vertTexCoord;
 
uniform int blurSize;       
uniform int horizontalPass; // 0 or 1 to indicate vertical or horizontal pass
uniform float sigma; // The sigma value for the gaussian function: higher value means more blur
                            // A good value for 9x9 is around 3 to 5
                            // A good value for 7x7 is around 2.5 to 4
                            // A good value for 5x5 is around 2 to 3.5
                            // ... play around with this based on what you need <span class="Emoticon Emoticon1"><span>:)</span></span>
 
const float pi = 3.14159265;
 
void main() {  
  float numBlurPixelsPerSide = float(blurSize / 2); 
 
  vec2 blurMultiplyVec = 0 < horizontalPass ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
 
  // Incremental Gaussian Coefficent Calculation (See GPU Gems 3 pp. 877 - 889)
  vec3 incrementalGaussian;
  incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * sigma);
  incrementalGaussian.y = exp(-0.5 / (sigma * sigma));
  incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;
 
  vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
  float coefficientSum = 0.0;
 
  // Take the central sample first...
  avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
  coefficientSum += incrementalGaussian.x;
  incrementalGaussian.xy *= incrementalGaussian.yz;
 
  // Go through the remaining 8 vertical samples (4 on each side of the center)
  for (float i = 1.0; i <= numBlurPixelsPerSide; i++) { 
    avgValue += texture2D(texture, vertTexCoord.st - i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    avgValue += texture2D(texture, vertTexCoord.st + i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    coefficientSum += 2.0 * incrementalGaussian.x;
    incrementalGaussian.xy *= incrementalGaussian.yz;
  }
  gl_FragColor = (avgValue / coefficientSum ) * colorMatrix;
}

```

- blur.pde

```auto
PShader blur;
PGraphics pg;
PFont fnt;

void setup() {
  size(380, 450, P3D);
  background(0); 
  imageMode(CENTER);
  pg = createGraphics(width, height, P2D);
  blur = loadShader("blur.glsl");
  blur.set("sigma", 5.0);
  blur.set("blurSize", 39);
  textSize(90);
}

void draw() {
  background(0);
  pg.beginDraw();
  pg.background(0, 0); 
  pg.noStroke();
  pg.fill(255);
  pg.textSize(90);
  pg.text("N.O.I.S.E", mouseX-width/2, mouseY);
  blur.set("horizontalPass", 1);
  pg.filter(blur);
  pg.endDraw();
  image(pg, width/2, height/2);
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 18, 2020, 5:11am UTC](https://discourse.processing.org/t/how-can-i-get-half-blur-effect/26230/18 "2020-12-18T05:11:40Z")

</div>

> [@yhlaskerimov](#):
>
> You solved my second problem !

I am not sure about this, because even when you rotate with plain text, and just fill the 'background (negative z) with gray text color, you will find the same I had mentioned above. See here that when the cylinder rotates from 0 to PI, the background text is drawn in front of the white text.

![noise1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/746b662cd347242c7bbc422309ef1968f8665125.png)

![Image 3](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fcbfc538357e880038b91412b53a7b2c20fa0d76.png)

The solution I found is to draw just a part (PI/6) of the rotation, in a loop that gives the illusion that the cylinder fully rotates. Below the sketch with just two pgraphics. The next step is to give a more glow-like blur in multiple stages, like in the first image you posted.

https://editor.p5js.org/noelpil/present/TDcvK9bJS