# Glowing Geometry

**URL:** <https://discourse.processing.org/t/glowing-geometry/21116>\
**Category:** Gallery\
**Created:** [May 20, 2020, 9:52pm UTC](https://discourse.processing.org/t/glowing-geometry/21116 "2020-05-20T21:52:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aleksi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/aleksi/32/11065_2.png) [@Aleksi](https://discourse.processing.org/u/Aleksi)\
**Post date:** [May 20, 2020, 9:52pm UTC](https://discourse.processing.org/t/glowing-geometry/21116/1 "2020-05-20T21:52:01Z")

</div>

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:

 ![glow.2.3653](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4da5c5ace5aed150725fd89c7836286d27139301.jpeg)

(A full animation test can be found [here](https://vimeo.com/420832411).)

A glow is essentially a luminous effect. Faber Birren, in his book [Creative Color](https://www.goodreads.com/book/show/1379122.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 `lerp`ing 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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Aleksi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/aleksi/32/11065_2.png) [@Aleksi](https://discourse.processing.org/u/Aleksi)\
**Post date:** [May 22, 2020, 10:42pm UTC](https://discourse.processing.org/t/glowing-geometry/21116/2 "2020-05-22T22:42:13Z")

</div>

Just a quick update.

Adding a central line of pure white makes the glow hotter.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5e89fc898f4711c81c034f3b0a3d7a92b6ad80b8.png)  
no white added

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e597aefc522d741e7c03eaa027902a03f60493e9.png)  
a thin line of semi-opaque white added

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b31d824af5eb79b46d21a0d6d55fb5e085fdb574.png)  
a thicker line of opaque white added

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [May 23, 2020, 3:44am UTC](https://discourse.processing.org/t/glowing-geometry/21116/3 "2020-05-23T03:44:31Z")

</div>

This is interesting stuff. I have been lately thinking how colors, or effects form in digital environment. And you have shown what I suspected that it’s not necessarily a single color, but a carefully selected set of colors that create an effect.  
**Thank you.** I’ll try this with my own set of tools.

---

<div class="post-metadata">

**Author:** ![Aleksi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/aleksi/32/11065_2.png) [@Aleksi](https://discourse.processing.org/u/Aleksi)\
**Post date:** [May 23, 2020, 3:02pm UTC](https://discourse.processing.org/t/glowing-geometry/21116/4 "2020-05-23T15:02:52Z")

</div>

I’m starting to refine the look for my next piece.

Here’s my latest test, a gif from the actual renders (300x300):  
 ![cell1.glow](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3fa64f747ec224395079c652f58922370ab8745b.gif)

Seems one can achieve some nice expressive color effects just by drawing geometry, without having to resort to pixel filters, image processing, comping, or shaders.

([Here’s](https://vimeo.com/421922700) a three minute animated render test. Should be viewed at full HD res to see details.)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 23, 2020, 11:01pm UTC](https://discourse.processing.org/t/glowing-geometry/21116/5 "2020-05-23T23:01:59Z")

</div>

@Aleksi – are you also constraining yourself to only use the default blendmode, or are you exploring blendmode options?

Beautiful work.

---

<div class="post-metadata">

**Author:** ![Aleksi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/aleksi/32/11065_2.png) [@Aleksi](https://discourse.processing.org/u/Aleksi)\
**Post date:** [May 23, 2020, 11:20pm UTC](https://discourse.processing.org/t/glowing-geometry/21116/6 "2020-05-23T23:20:10Z")

</div>

Thank you Jeremy! 😀

I’ve never explored blendModes… interesting. I should look into that someday…