how to draw led lightbeam?

tulai

Hello all,

I am thinking using processing to draw a figure or an animation to have the effect of light beams, like taking photos of people waving led finger lights in the dark. I guess this should use some techniques related with shader. But I have no idea how to. Any suggestions or comments will be appreciated.

Thanks in advance

sus

maybe some additive blending stuff ?

natureofcode.com/book/chapter-4-particle-systems/

roberthodgin.com/magnetosphere-part-2/

tulai

Hi, sus

Thanks for the comments. the first url could help to simulate particle dynamics. but how to give the glow and blur effect?

for the second it gave excellent results. some maybe what I want. But it doesn't give any courses or tutorials on how to do it. If there were something like tutorials for the techniques in robert hodgin's art work, that will be great.

plasmalasgun

While not quite the entire answer there is a cool blur shader in the examples... With a little tweak here and there and some math elbow grease youll get something 'ravey' however is a 2d shader...(trying to make a glow in 3d and been stuck for weeks)

// Adapted from:
// http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;

// The inverse of the texture dimensions along X and Y
uniform vec2 texOffset;

varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform int blurSize;       
uniform int horizontalPass; // 0 or 1 to indicate vertical or horizontal pass
uniform float sigma;        // The sigma value for the gaussian function: higher value means more blur
                            // A good value for 9x9 is around 3 to 5
                            // A good value for 7x7 is around 2.5 to 4
                            // A good value for 5x5 is around 2 to 3.5
                            // ... play around with this based on what you need :)

const float pi = 3.14159265;

void main() {  
  float numBlurPixelsPerSide = float(blurSize / 2); 

  vec2 blurMultiplyVec = 0 < horizontalPass ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

  // Incremental Gaussian Coefficent Calculation (See GPU Gems 3 pp. 877 - 889)
  vec3 incrementalGaussian;
  incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * sigma);
  incrementalGaussian.y = exp(-0.5 / (sigma * sigma));
  incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;

  vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
  float coefficientSum = 0.0;

  // Take the central sample first...
  avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
  coefficientSum += incrementalGaussian.x;
  incrementalGaussian.xy *= incrementalGaussian.yz;

  // Go through the remaining 8 vertical samples (4 on each side of the center)
  for (float i = 1.0; i <= numBlurPixelsPerSide; i++) { 
    avgValue += texture2D(texture, vertTexCoord.st - i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    avgValue += texture2D(texture, vertTexCoord.st + i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    coefficientSum += 2.0 * incrementalGaussian.x;
    incrementalGaussian.xy *= incrementalGaussian.yz;
  }

  gl_FragColor = avgValue / coefficientSum;
}

kosowski

There is a nice glow effect in GLGraphics examples, the sketch is called Neon. It is based on blurring and scaling down to get the glow, and then mixing with the original buffer.

You just need to adapt it to Processing 2.