Draw a Sine Wave Between Two Arbitrary Points in Actionscript 3

Question

Drawing "flat" waves is easy, but I want to draw the wave between two points x1,y1 x2,y2

Here is the "flat" code:

package display
{
    import flash.display.Sprite;
    import flash.events.Event;

    public class SineWave extends Sprite
    {
     private var angle:Number = 0;
     private var centerY:Number = 200;
     private var range:Number = 50;
     private var xspeed:Number = 2;
     private var yspeed:Number = .1;
     private var xpos:Number
     private var ypos:Number

     public function SineWave()
     {
      init()
     }

     protected function init():void
     {
      var sinWavePosition = 100;
      var cosWavePosition = 200;
      var sinWaveColor:uint = 0xFF0000;
      var cosWaveColor:uint = 0x00FF00;
      var waveMultiplier:Number = 10;
      var waveStretcher:Number = 5;

      var i:uint;
      for(i = 1; i < 500; i++)
      {
          var sinPosY:Number = Math.sin(i / waveStretcher) * waveMultiplier;
          var cosPosY:Number = Math.cos(i / waveStretcher) * waveMultiplier;

          graphics.beginFill(sinWaveColor);
          graphics.drawRect(i, sinWavePosition + sinPosY, 2, 2);   
          graphics.beginFill(cosWaveColor);
          graphics.drawRect(i, cosWavePosition + cosPosY, 2, 2);
      }

     }
    }
}

Answer 1

What about a bezier curve? This isn't a sine wave per se. But the effect is similar. With proper control points you should be able to make it look just like a sine wave.

Answer 2

Well quick cheat would be to get the distance between the points, draw the graphic onto a separate sprite, then just work out the angle between the two points and rotate the graphic to that angle. Not the most 'perfect' solution, but should do the trick, otherwise I can imagine, working out the angle between the two points and then adding this as an increment to the existing values.

Hope this hack helps.

Answer 3

I believe this will work, it's basically a rotationmatrix that is applied to every point on the line. There might be some errors with the order and signs of the multiplications and the parameters to atan2 but otherwhise i think this will work.

float v = Atan2(y2-y1, x2-x1);
for(blabla)
{
   calculate sinPosY from i
   newSinPosY =    i*Cos(v)  + sinPosY*Sin(v);
   sinPosX =    i*-Sin(v) + sinPosY*Cos(v));
   add offset
   render
}