CODEWITHSUNDEEP
actionscript-3drawing
Joel Hooks
Joel Hooks

Reputation: 6565

Draw a Sine Wave Between Two Arbitrary Points in Actionscript 3

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);
            }

        }
    }
}

Upvotes: 0

Views: 7715

Answers (3)

dsggfdf
dsggfdf

Reputation:

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
}

Upvotes: 0

enzuguri
enzuguri

Reputation: 828

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.

Upvotes: 1

Steve Wortham
Steve Wortham

Reputation: 22240

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.

Upvotes: 4

Related Questions