animating sine waves in processing

Question

how do I animate the sin lines in the following code to move along the y-axis, to somehow look more like moving water waves?

-if you take out the velocity and acceleration codes you will see what I was trying to work with

float scaleVal = 6.0;
float angleInc = 0.19;

float velocity=0.0;
float acceleration=0.01;

void setup(){
  size(750,750);
  stroke(255);
}

void draw(){
  background (0);
  float angle=0.0;
  for (int offset = -10; offset < width+10; offset += 10) {
    for (int y = 1; y <= height; y += 3) {
      float x = offset + (sin(angle) * scaleVal);
      line(x, y, x, y+2);
      angle += angleInc;

      velocity += acceleration;
      y += velocity;
    }
    angle += PI;
  }
}

Answer 1

Try using sin() to change the y position instead of x. The x position can simply increment.

The math may be daunting, but it gets fun once you get the hang of it. Imagine going around a circle with the radius of 1.0 in a cartesian coordinate system (0 is centre , x and y increase to the right and down and decrease towards left and top):

• Let's say you start at the top, the highest value, the length radius of your circle (1.0).
• As you decrease the angle, the x move to the left, but the y will go towards the centre( 0.0 )
• then x will increase as it gets close to the centre and y will drop to bottom of the circle (-1.0)
• then x will keep increasing until it reaches the right edge of the circle and the y value will increase and reach the vertical centre (0.0)
• finally the x will decrease until it reaches the horizontal centre and y will increase and reach back to the top of the circle (1.0)

This image explains it pretty well:

Essentially it's like a converter: you plug in an angle from 0 to 360 degrees or TWO_PI radians (as sin works with angles in radians) and you get back a value between -1.0 and 1.0.

If you want to draw a sine wave, you have to draw multiple points:

• the x position will increase value directly
• the y position will increase the angle, but use the result of the sin() function to obtain a value that goes up and down.

The last thing to do is multiple the result of the sin() function by a larger number to essentially scale the sine wave (from -1.0 to 1.0) to a size more appropate for the screen.

Here's a quick commented demo you can use the mouse position to play with:

function setup(){
  createCanvas(640,100);
}
function draw(){
  background(255);
  
  var numberOfPoints = 1+(mouseX/2);
  //how often apart will the points be
  var widthPerPoint = width / numberOfPoints;
  //how much will the angle change from one point to another
  var anglePerPoint = TWO_PI/numberOfPoints;
  
  var waveHeight = 25;
  
  for(var i = 0; i < numberOfPoints; i++){
    var x = i *  widthPerPoint;
    var y = sin(anglePerPoint * i) * waveHeight;
    ellipse(x,50 + y,5,5);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>