neon lines in processing using a glsl filter

Nikolaus Gradwohl2013-08-19T07:47:18+00:00

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() {
  blur = loadShader("blur.glsl"); 

void draw() {
  for( int j=0; j<10; j++) {
  stroke( 255*noise(j/1.0),255-255*noise(j/1.0),255);
  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)));

//  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;


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, + vec2(j,i)**0.05;

  gl_FragColor = sum*sum+ vec4(texture2D( texture,, 1.0);
Tweet This! submit to reddit Digg! Tags: | no comments | no trackbacks

See also:

processing sound visualizer explained
processing sound visualizer
sketch experiment 7 - osc events
nested cubes in processing
processing phaseflower



Leave a response

Leave a comment