We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpPrograms › interactive wave
Page Index Toggle Pages: 1
interactive wave (Read 518 times)
interactive wave
Oct 8th, 2008, 12:07pm
 
hi
i am a beginner and i'm trying to write an interactive program to create a simple scrolling wave (as a line). i have been looking at the 'NoiseWave' program by Daniel Shiffman in the examples (see code below), but i can't figure out how to replace the ellipses with a single smooth line.
it seems to be more complex than i thought it would be.

any suggestions?

d


int xspacing = 8;   // How far apart should each horizontal location be spaced
int w;              // Width of entire wave

float yoff = 0.0f;        // 2nd dimension of perlin noise
float[] yvalues;          // Using an array to store height values for the wave (not entirely necessary)

void setup() {
 size(200,200);
 frameRate(30);
 colorMode(RGB,255,255,255,100);
 smooth();
 w = width+16;
 yvalues = new float[w/xspacing];
}

void draw() {
 background(0);
 calcWave();
 renderWave();

}

void calcWave() {
 float dx = 0.05f;
 float dy = 0.01f;
 float amplitude = 100.0f;

 // Increment y ('time')
 yoff += dy;

 //float xoff = 0.0;  // Option #1
 float xoff = yoff; // Option #2

 for (int i = 0; i < yvalues.length; i++) {
   // Using 2D noise function
   //yvalues[i] = (2*noise(xoff,yoff)-1)*amplitude; // Option #1
   // Using 1D noise function
   yvalues[i] = (2*noise(xoff)-1)*amplitude;    // Option #2
   xoff+=dx;
 }

}

void renderWave() {
 // A simple way to draw the wave with an ellipse at each location
 for (int x = 0; x < yvalues.length; x++) {
   noStroke();
   fill(255,50);
   ellipseMode(CENTER);
   ellipse(x*xspacing,width/2+yvalues[x],16,16);
 }
}

Re: interactive wave
Reply #1 - Oct 8th, 2008, 10:19pm
 
A quick way is to just connect each spot in the array to the next spot (using index 'x' and 'x+1'):

Code:

for (int x = 0; x < yvalues.length-1; x++) {
   line(x*xspacing,width/2+yvalues[x],(x+1)*xspacing,width/2+yvalues[x+1]);
 }


You could also use beginShape() and vertex() as well.
Re: interactive wave
Reply #2 - Oct 9th, 2008, 6:08pm
 
thanks mr Shiffman, but i must be a real plebeian because i can't get it to work.
when i dropped in the code you suggested it didn't recognise the [i]. so i changed i to x and it created thin vertical strokes from the wave points instead of connecting them into a smooth line running on the horizontal axis.

here's the way i put it in:

void renderWave() {  
 for (int x = 0; x < yvalues.length-1; x++) {
   stroke(255);
   line(x*xspacing,width/2+yvalues[x],x*xspacing,width/2+yvalues[x+1]);
 }
}

i've tried as many variations on this as i can think of, but no joy so far.
any further hints?

d


Re: interactive wave
Reply #3 - Oct 9th, 2008, 6:12pm
 
whoops, i wasn't paying close enough attention.  you've got to use "x+1" wherever "x" would be for the line's end point.  I modified the code in the above post.
Re: interactive wave
Reply #4 - Oct 9th, 2008, 6:38pm
 
thanks... it's working!
Page Index Toggle Pages: 1