GuruBlog

I made a short processing script that draws sine curves and uses a glsl blur filter to add a neon effect

To create this effect you need a processing sketch drawing the curves and a glsl filter that adds the blur effect.

Open processing and enter the following code to create the sine curves.

PShader blur;

void setup() {
  size(600,300,P3D);
  blur = loadShader("blur.glsl"); 
}

void draw() {
  background(0);  
  strokeWeight(1);
  noFill();
  for( int j=0; j<10; j++) {
  stroke( 255*noise(j/1.0),255-255*noise(j/1.0),255);
  beginShape();
  float f1 = noise(j/10.0)+0.5;
  float f2 = noise(j/7.0);  
  float f3 = noise(j/1.3)+.5;
  float f4 = noise(j/1.2,frameCount/500.0);
  for( int i=0; i<610; i+=10) {
    vertex( i, height/2+(100*f4)*sin(f1*TWO_PI*i/600 + 100*f2 - frameCount/(100.0*f3)));
  }
  endShape();
  }  
  filter(blur);

//  if ( frameCount <= 500 ) {
//    saveFrame( "f-####.png" );
//  }
}

Now create a new Textfile, enter the following glsl code and save it as "blur.glsl". Drop the filter onto the processing sketch window to add it to your sketches data folder.

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

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;
uniform vec2 texOffset;
varying vec4 vertTexCoord;

void main(void) {
  int i = 0;
  int j= 0;
  vec4 sum = vec4(0.0);

  for( i=-5;i<5;i++) {
    for( j=-5;j<5;j++) {
        sum += texture2D( texture, vertTexCoord.st + vec2(j,i)*texOffset.st)*0.05;
    }
  }

  gl_FragColor = sum*sum+ vec4(texture2D( texture, vertTexCoord.st).rgb, 1.0);
}