Directional halo on 2D graphic

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.

All insights are much appreciated :grinning:

i will start from something like:

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()

1 Like

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

My bad, that was mislabelled. Wasn’t meant to be a homework.
Thanks for your input, I will test it out :grinning:

Is there any reasons why doing this through code and not using VFX software like After Effect or 3D software like Blender?

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

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.

It’s quite interesting with some kind of “simulation”. It’s still rough but something like this…

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

The parameter choice is quite tricky.

with nX = 20

with nX = 40

after some iterations:

3 Likes

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?