i'm trying to build a wave that moves in and out of itself

kinda like this:
http://www.thebarricades.de/kenfrederick/transfer/wave.swf

but 3d and smoother, i know there has to be a simpler way to do this. below is my clunky code.

thanks in advance!
Ken


----

import processing.opengl.*;

//-----------------------------------------------------------------------------
//variables
//-----------------------------------------------------------------------------
float r,g,b, r_y,r_x,r_z, abstand;
int zahl, index;

void setup(){
 size(600,600,OPENGL);
 noFill();

 zahl = 17;
 abstand = 5;
}

void draw(){
 background(0);

 stroke(50);
 line(width*0.5,0, width*0.5,height);
 line(0,height*0.5, width,height*0.5);

 translate(width*0.5,height*0.5);

 /*
 camera(0.0, 0.0, mouseX*4, // eyeX, eyeY, eyeZ
        0.0, 0.0, 0.0, // centerX, centerY, centerZ
        0.0, 1.0, 0.0); // upX, upY, upZ
 */
 rotateY(radians(map(mouseX, 0,width, 0,360)));

 //-----------------------------------------------------------------------------
 //part I
 //first one -> 0.5 (reverse)
 //-----------------------------------------------------------------------------
 for(int i=int(zahl*0.5); i>0; i--) {
 //for(int i=0; i<int(zahl*0.5); i++) {
   //rotateY(radians(map(mouseX, 0,width, 0,360)));
   r = map(i, 0,zahl, 0,255);
   g = map(i, 0,zahl, 255,0);
   b = 255;

   stroke(r,g,b);

   pushMatrix();
   translate(0,0,i*sin(r_z)*abstand);
   ellipse(0,0,10*i,10*i);
   popMatrix();
   
 }

 //-----------------------------------------------------------------------------
 //part II
 //0.5 -> last one
 //-----------------------------------------------------------------------------
 translate(0,0,-zahl*0.5);
 for(int i=int(zahl*0.5); i<zahl; i++) {
   //rotateY(radians(map(mouseX, 0,width, 0,360)));
   r = map(i, 0,zahl, 0,255);
   g = map(i, 0,zahl, 255,0);
   b = 255;

   stroke(r,g,b);

   pushMatrix();
   translate(0,0,i*-sin(r_z)*abstand);
   ellipse(0,0,10*i,10*i);
   popMatrix();
 }

 r_z += 0.02;

}

Here, I've set the peak of the wave to be the same for each wave segment.

I did this by creating a class called Wave.  Each wave has a position along the axis, a diameter, a color, and a direction (positive or negative).

The draw function loops through each Wave, and, depending on the direction, increments or decrements the axis value.  If the axis > or < the 'peak', then change the direction.  Each Wave starts off at a different position ((i - zmax) * abstand), so you get a similar effect as seen in the flash video.

Code:

import processing.opengl.*;
 
//---------------------------------------------------------------------- -------
//variables
//---------------------------------------------------------------------- -------
float r_y, r_x, r_z, abstand;
int zahl, index;
int zmax, zmin;

ArrayList waves;
 
void setup(){
  size(600, 600, OPENGL);
  noFill();
 
  zahl = 32;
  abstand = 5;
  
  zmax = int(32 / 2);
  zmin = -zmax;
  
  waves = new ArrayList();
  for (int i = 0; i < zahl; i++) {
    
    float r = map(i, 0, zahl, 0, 255);
    float g = map(i, 0, zahl, 255, 0);
    float b = 255;
    
    waves.add(new Wave(i, (i - zmax) * abstand, i * 10,  r, g, b));
  }
  
}


void draw(){
  background(0);
 
  stroke(50);
  line(width * 0.5, 0, width * 0.5, height);
  line(0, height * 0.5, width, height * 0.5);
 
  translate(width * 0.5, height * 0.5);
 
  rotateY(radians(map(mouseX, 0, width, 0, 360)));

  for (Iterator itWaves = waves.iterator(); itWaves.hasNext();)
  {
    Wave w = (Wave)itWaves.next();
    
    pushMatrix();
	rotate(radians(90));
	translate(0, 0, w.axis);
	stroke(w.style);
	ellipse(0, 0, w.diameter, w.diameter);
    popMatrix();

    if (w.direction) {
	w.axis++;
	
	if (w.axis > abstand * (zmax - 1)) w.direction = !w.direction;
	 
    } else {
	w.axis --; 
	
	if (w.axis < -abstand * (zmax - 1)) w.direction = !w.direction;
    }
  }

} 




public class Wave
{
  public int index = 0;
  public float axis = 0.0;
  
  public boolean direction = true;
  
  public float diameter = 10.0;
  public color style = #ffffff;
  
  public Wave(int index, float axis, float diameter, float r, float g, float b)
  {
    this.index = index;
    this.axis = axis;
    this.diameter = diameter;
    this.style = color(r, g, b);
  }
}
 

You could add a smoothing function, for example, instead of w.axis++ or w.axis--, you could add a value based on the distance (abs(w.axis)) from the mid point.

If you want to make it really special, use a physics library and have each wave segment affect all the waves near it.