# Directional halo on 2D graphic
**URL:** https://discourse.processing.org/t/directional-halo-on-2d-graphic/29832
**Category:** Processing
**Created:** [May 3, 2021, 9:40pm UTC](https://discourse.processing.org/t/directional-halo-on-2d-graphic/29832 "2021-05-03T21:40:57Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@afkqs](https://discourse.processing.org/u/afkqs)
#### Post date: [May 3, 2021, 9:40pm UTC](https://discourse.processing.org/t/directional-halo-on-2d-graphic/29832/1 "2021-05-03T21:40:57Z")
Hi there,
This is a pretty open question but I wanted to ask the community for some insights.
How would you proceed to create directional halo on a 2D graphic, whether a shape or an image?
An example of the effect I’m trying to reproduce would be the [Regency logo](https://www.youtube.com/watch?v=_J_jWwNevyw).
All insights are much appreciated 😀
---
### Author:  [@th75](https://discourse.processing.org/u/th75)
#### Post date: [May 3, 2021, 11:57pm UTC](https://discourse.processing.org/t/directional-halo-on-2d-graphic/29832/2 "2021-05-03T23:57:02Z")
i will start from something like:
```auto
PImage screen;
void setup() {
size(400, 400);
frameRate(25);
screen=createImage(width, height, RGB);
stroke(255);
fill(255);
rectMode(CENTER);
background(0);
}
void draw() {
//fade
tint(color(255-random(34), 255-random(34), 255-random(34)), 245);
image(screen, 4*sin(((float)frameCount)/10.0), -1);
//main image
rect(width/2, height/2, 55+44*sin(((float)frameCount)/30.0), 55+14*sin(((float)frameCount)/14.0));
loadPixels();
screen=this.copy();
}
```
and doing some pixels manipulation more complex than tint()
---
### Author:  [@th75](https://discourse.processing.org/u/th75)
#### Post date: [May 4, 2021, 12:09am UTC](https://discourse.processing.org/t/directional-halo-on-2d-graphic/29832/3 "2021-05-04T00:09:28Z")
i didn’t see it was tagged homework… too much code there (;
so the general idea is, for each frame to render previous one with a shift ,some fade and some pixel manipulation
…show us your results
---
### Author:  [@afkqs](https://discourse.processing.org/u/afkqs)
#### Post date: [May 4, 2021, 11:49am UTC](https://discourse.processing.org/t/directional-halo-on-2d-graphic/29832/4 "2021-05-04T11:49:22Z")
My bad, that was mislabelled. Wasn’t meant to be a homework.
Thanks for your input, I will test it out 😀
---
### Author:  [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [May 4, 2021, 12:54pm UTC](https://discourse.processing.org/t/directional-halo-on-2d-graphic/29832/5 "2021-05-04T12:54:54Z")
Is there any reasons why doing this through code and not using VFX software like After Effect or 3D software like Blender?
---
### Author:  [@afkqs](https://discourse.processing.org/u/afkqs)
#### Post date: [May 4, 2021, 5:56pm UTC](https://discourse.processing.org/t/directional-halo-on-2d-graphic/29832/6 "2021-05-04T17:56:10Z")
My lack of familiarity with these softwares mostly but also that I’d like to keep the programmatic approach and explore Processing further (although I’m sure the softwares you mentioned must have some scripting available).
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [May 4, 2021, 7:39pm UTC](https://discourse.processing.org/t/directional-halo-on-2d-graphic/29832/7 "2021-05-04T19:39:15Z")
I would say simulating this in a volumetric approach could be quite interesting. Use simplex noise or something to define the density of “fog” at (x, y, z), and only the voxels within the font’s (x, y) will be illuminated - and map (x, y, z) with orthographic or perspective projection to the pixel coordinates.
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [May 4, 2021, 9:08pm UTC](https://discourse.processing.org/t/directional-halo-on-2d-graphic/29832/8 "2021-05-04T21:08:33Z")
It’s quite interesting with some kind of “simulation”. It’s still rough but something like this…
```auto
void setup() {
size(800, 800, P2D);
int yOffset = 120;
background(0);
noStroke();
fill(255);
textSize(140);
textAlign(CENTER, CENTER);
push();
translate(width / 2, height / 2 + yOffset);
rotate(0.2);
text("Needed", 0, 0);
text("Me", 0, 150);
pop();
loadPixels();
//background(0);
//image(pg, 0, 0);
translate(width/2, height/2 - 100);
float step = 2;
noStroke();
OpenSimplexNoise noise = new OpenSimplexNoise();
float ambient = 2.0;
double nX = 40;
for (float y = -400; y < 400; y+=step) {
for (float x = -400; x < 400; x+=step) {
if (within((int)x+400, (int)y+400+yOffset) == false) continue;
float decay = 1;
for (float z = 0; z < 600; z+=step) {
float n = (float)noise.eval((double)x / nX, (double)y / nX, (double)z / nX);
float density = pow((n + 1) * 0.5, 2.0);
decay = max(0, decay - density * 0.04);
fill(255, (density * 20) * decay);
// orthographic projection
circle(x + random(step / 2), y / 2 - z / 2 + random(step / 2), step * 1.5);
}
}
}
noLoop();
}
boolean within(int x, int y) {
if(x < 0 || x >= width || y < 0 || y >= height) return false;
return (pixels[x + y * width] >> 16 & 0xFF) > 0;
}
```
I took `OpenSimplexNoise.java` from [Visually isotropic coherent noise algorithm based on the simplectic honeycomb. · GitHub](https://gist.github.com/KdotJPG/b1270127455a94ac5d19)
The parameter choice is quite tricky.
with nX = 20
with nX = 40
after some iterations:
---
### Author:  [@afkqs](https://discourse.processing.org/u/afkqs)
#### Post date: [May 11, 2021, 9:02pm UTC](https://discourse.processing.org/t/directional-halo-on-2d-graphic/29832/9 "2021-05-11T21:02:32Z")
That’s an interesting approach, I like the effect.
Can you add one or multiple more fade in this setting or you need to create a separate PGraphics to avoid copying the first fade in the next frames?