# Text outline neon
**URL:** https://discourse.processing.org/t/text-outline-neon/37639
**Category:** Coding Questions
**Created:** [June 19, 2022, 12:13pm UTC](https://discourse.processing.org/t/text-outline-neon/37639 "2022-06-19T12:13:05Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@PhySan](https://discourse.processing.org/u/PhySan)
#### Post date: [June 19, 2022, 12:13pm UTC](https://discourse.processing.org/t/text-outline-neon/37639/1 "2022-06-19T12:13:06Z")
Hi all,
I am trying to play a little with lettering, outline and lights and I am trying to simulate some neon letters that can light up and appear to glow.
I used the blur filter to achieve the glow effect. However, the frame rate decreases considerably when I use the filter. Is there anyway around this?
This is what I have done so far:
```auto
boolean on = true;
PGraphics pg;
void setup() {
size(400, 400, P3D);
}
void draw() {
background(240);
println(frameRate);
color outglow = on ? color(255, 0, 0) : color(150);
fill(outglow);
int p = 50;
textFont(createFont("Comic Sans MS", 30));
for (int x = -2; x < 2; x++) {
text("LIKE THIS A!", p+x, p);
text("LIKE THIS A!", p, p+x);
}
int blurAmount = on ? 4 : 2;
filter(BLUR, blurAmount);
color inLight = on ? color(255) : color(200);
fill(inLight);
text("LIKE THIS A!", p, p);
}
void keyPressed() {
on = !on;
println("ON = " + on);
}
```
Thanks in advance! 🙂
---
### Author:  [@Mikey83](https://discourse.processing.org/u/Mikey83)
#### Post date: [June 19, 2022, 12:59pm UTC](https://discourse.processing.org/t/text-outline-neon/37639/2 "2022-06-19T12:59:44Z")
@PhySan Hi, have a look at the examples in menu, its under topics, shaders, blur, its a far more efficient blurring shader than the default blur filter
---
### Author:  [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [June 19, 2022, 1:04pm UTC](https://discourse.processing.org/t/text-outline-neon/37639/3 "2022-06-19T13:04:57Z")
Hi @PhySan ,
First start by using P2D and move this to setup
```auto
textFont(createFont("Comic Sans MS", 30));
```
Maybe it would be better to use a shader for that which processing example could be found under File → examples on topic shader.
Cheers
— mnse
---
### Author:  [@Mikey83](https://discourse.processing.org/u/Mikey83)
#### Post date: [June 19, 2022, 1:13pm UTC](https://discourse.processing.org/t/text-outline-neon/37639/4 "2022-06-19T13:13:22Z")
In the example file, youll have to goto the sketch folder and grab the file blur.glsl and paste that into your sketch folder in order for the filter to work otherwise you’ll get an error when trying to load the shader
---
### Author:  [@Ov3rM1nD](https://discourse.processing.org/u/Ov3rM1nD)
#### Post date: [June 19, 2022, 1:52pm UTC](https://discourse.processing.org/t/text-outline-neon/37639/5 "2022-06-19T13:52:00Z")
Try this code with Thomas Diewald’s [PixelFlow](https://github.com/diwi/PixelFlow) library. This is the best Processing library for this kind of task:
```auto
import com.thomasdiewald.pixelflow.java.DwPixelFlow;
import com.thomasdiewald.pixelflow.java.imageprocessing.filter.DwFilter;
DwPixelFlow context;
DwFilter filter;
PGraphics2D pg_a, pg_b; // just another buffer for temporary results
void setup() {
size(900, 600, P2D);
context = new DwPixelFlow(this);
filter = DwFilter.get(context);
pg_a = (PGraphics2D) createGraphics(width, height, P2D);
pg_b = (PGraphics2D) createGraphics(width, height, P2D);
pg_a.beginDraw();
pg_a.textSize(150);
pg_a.textAlign(CENTER, TOP);
pg_a.endDraw();
}
void draw() {
pg_a.beginDraw();
{
pg_a.background(0);
pg_a.fill(0, 255, 255);
pg_a.text("hello", width/2, 150);
pg_a.fill(255, 255, 0);
pg_a.text("world", width/2, 300);
}
pg_a.endDraw();
pg_b.beginDraw();
pg_b.clear();
pg_b.endDraw();
float val = oscillate(5, 10, frameCount * 0.01);
filter.bloom.param.mult = val;//map(mouseX, 0, width, 0, 10);
filter.bloom.param.radius = 1; //map(mouseY, 0, height, 0, 1);
filter.luminance_threshold.param.threshold = 0.3f;
filter.luminance_threshold.param.exponent = 10;
filter.luminance_threshold.apply(pg_a, pg_b);
filter.bloom.apply(pg_b, pg_b, pg_a);
image(pg_a, 0, 0);
surface.setTitle("FPS: " + (int)frameRate);
}
float oscillate(float mean, float range, float step) {
return (float)(Math.cos(step) * range/2 + mean);
}
```
You can download this library in the Contributions Manager.
---
### Author:  [@PhySan](https://discourse.processing.org/u/PhySan)
#### Post date: [June 20, 2022, 7:06pm UTC](https://discourse.processing.org/t/text-outline-neon/37639/7 "2022-06-20T19:06:33Z")
Still some tweaking to do and clean up, I like the final effect 🙂
```auto
import com.thomasdiewald.pixelflow.java.DwPixelFlow;
import com.thomasdiewald.pixelflow.java.imageprocessing.filter.DwFilter;
DwPixelFlow context;
DwFilter filter;
PGraphics2D pg_a, pg_b; // just another buffer for temporary results
float val = 0;
float range = 10;
float mean = 5;
boolean on = false;
PFont font;
String txt = "HELLO";
void setup() {
size(200, 200, P2D);
font = createFont("Comic Sans MS", 40);
context = new DwPixelFlow(this);
filter = DwFilter.get(context);
pg_a = (PGraphics2D) createGraphics(width, height, P2D);
pg_b = (PGraphics2D) createGraphics(width, height, P2D);
pg_a.beginDraw();
pg_a.textFont(font);
pg_a.textAlign(CENTER, TOP);
pg_a.endDraw();
}
void draw() {
background(0);
pg_a.beginDraw();
{
pg_a.background(0);
pg_a.fill(0, 255, 255);
pg_a.text(txt, width/2, height/2);
//pg_a.fill(255, 255, 0);
//pg_a.text("world", width/2, 300);
}
pg_a.endDraw();
pg_b.beginDraw();
pg_b.clear();
pg_b.endDraw();
if (on) {
if (val < 2) {
val += 0.04;
//val = oscillate(mean, range, step);
}
filter.bloom.param.mult = val;//map(mouseX, 0, width, 0, 10);
filter.bloom.param.radius = 1; //map(mouseY, 0, height, 0, 1);
filter.luminance_threshold.param.threshold = 0.3f;
filter.luminance_threshold.param.exponent = 10;
filter.luminance_threshold.apply(pg_a, pg_b);
filter.bloom.apply(pg_b, pg_b, pg_a);
image(pg_a, 0, 0);
textFont(font);
textAlign(CENTER, TOP);
fill(255, val * 128);
text(txt, width/2, height/2);
}
surface.setTitle("FPS: " + (int)frameRate);
}
float oscillate(float mean, float range, float step) {
return (float)(Math.cos(step) * range/2 + mean);
}
void keyPressed() {
on = !on;
if (!on) val = 0;
}
```