For my next piece I really want a good glow, so I finally decided to tackle it seriously.
I’ve long tried to achieve a good glow, without resorting to image processing or shader strategies. That is to say, I want to be able to draw geometry that glows.
And I finally got something that looks good (to me at least). Here’s a test:
(A full animation test can be found here.)
A glow is essentially a luminous effect. Faber Birren, in his book Creative Color, says Important to the simulation of luminosity and luster is the appreciation that purity contrast, not value or hue contrast, is what is needed.
He itemizes the attributes of luminosity later in the chapter: For a paint or dye to appear luminous, the following conditions must exist in a drawing or design:
- The area to be made luminous must be relatively small in size.
- It must be purer in chroma than the surroundings.
- It must be higher in value than the surroundings.
- Its hue quality (red, yellow, blue, etc.) must seem to pervade all other colors in the composition, just as though such a light were shining upon the entire drawing.
- Deep values must be avoided. When light shines into the eye, it tends to blur vision and make all adjacent objects appear soft and filmy. Black, for example, will lose its harshness and appear deep gray and atmospheric.
The key take away for me is his summary: It is always more important, of course, to hold the luminous touches slightly lighter in value and purer in chroma than their surroundings…
My test might be too glowy, but it demonstrates the principle. Plus I’m learning how to control it.
Just as with with painting, my approach is to build up layers of transparent color. So in essence what I do is iteratively draw the same geometry, gradually transitioning from a bright center to a slightly darker, more saturated color by lerping the strokeWeight, alpha, value, and saturation with each iteration. It then comes down to juggling the values until something looks right. (Note: Since I just solved it, the code is not generalized.) Here’s an example:
void setup(){
size(600,600);
background(55);
PShape ps = createShape(LINE, 50, 0, width-50, 0);
color scol = color(220, 180, 20);
float swmin = .5 , swmax = 120.5 , swinc = 6.0;
int iters = (int) ((swmax - swmin) / swinc);
int cnt = iters;
for (float swcur=swmin; swcur<=swmax; swcur+=swinc){
color new_scol = colorHSV(scol, cnt--, iters, 2.5);
ps.setStrokeWeight(swcur);
ps.setStroke(new_scol);
shape(ps, 0, height/2);
}
}
color colorHSV(color col, int cur, int tot, float ramp){
colorMode(HSB, 360, 100, 100, 100);
float curHue = hue(col);
float curSat = saturation(col);
float curVal = brightness(col);
float curAlpha = alpha(col);
curSat = lerp(curSat, 10, pow(cur/float(tot), ramp));
curVal = lerp(curVal, 100, cur/float(tot));
curAlpha = lerp(1, 25, pow(cur/float(tot), ramp));
color c = color(curHue, curSat, curVal, curAlpha);
colorMode(RGB, 255, 255, 255, 255); // restore the colorMode
return c;
}
Perhaps there’s a way to procedurally determine a good glow, but I figure the values would still need to be massaged based on the color and size of the desired glow.
I don’t know if this approach will work for others, but personally I’m thrilled that I’ve found a solution that works for me, and I thought I’d share it.
