<?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:geom="components.*"
    layout="absolute"
    width="600" height="500" 
    pageTitle="Quadratic Hermite Curve Tangent" 
    applicationComplete="test()" viewSourceURL="srcview/index.html">
    
  <mx:Style source="assets/style/style.css"/>
  <mx:Canvas id="background" x="50" y="90" width="500" height="320" backgroundColor="#FFFFFF" />
  <mx:Label text="Quad. Hermite Tangent" x="250" y="30" width="300" styleName="title"/>
  
  <mx:Canvas id="myCanvas" />
  <mx:Canvas id="myTangent" />
  <geom:InteractivePoint id="p0" x="90" y="250" pointLabel="P0" radius="5" color="0x00ff00" width="100" height="20" />
  <geom:InteractivePoint id="p1" x="250" y="230" pointLabel="P1" radius="5" color="0x00ff00" width="100" height="20" />
  <geom:Tangent id="tangent" />
  
  <mx:HSlider x="400" y="375" width="120" id="__mySlider__" allowTrackClick="false" minimum="0" maximum="1" enabled="true" change="updateTangent(event)" liveDragging="true"/>
  
  <mx:Script>
    <![CDATA[
      import mx.events.PropertyChangeEvent;
      import mx.events.SliderEvent;
       
      private var __quad:QuadraticHermiteCurve = new QuadraticHermiteCurve();
      private var __t:Number                   = 0;  // derivative drawn at this t-parameter
      
      private function test():void
      { 
        // restrict dragging for each point
        var bounds:Rectangle = new Rectangle(background.x, background.y, background.width, background.height);
        p0.restrict          = bounds;
        p1.restrict          = bounds;
        
        // call this function whenever either of the interactive points is moved
        p0.registerCallBack(onPointMoved);
        p1.registerCallBack(onPointMoved);
        
        // handle 'move' event on the tangent
        tangent.addEventListener("moved", onTangentMoved);
        
        tangent.initialPoint(p0.x, p0.y);
        tangent.endPoint(p0.x+30, p0.y+75);
        
        // initialize the quad. Hermite curve - some hardcoding here, so be careful when making changes
        __quad.x0 = p0.x;
        __quad.y0 = p0.y;
        __quad.x1 = p1.x;
        __quad.y1 = p1.y;
        __quad.tx = p0.x+30;
        __quad.ty = p0.y+75;
        
        drawCurve();
      }
      
      private function onTangentMoved(_e:Event):void
      {
        __quad.tx = tangent.tangentX;
        __quad.ty = tangent.tangentY;
        
        drawCurve();
      }
      
      // draw the curve and the tangent
      private function drawCurve():void
      {
        var g:Graphics = myCanvas.graphics;
        g.clear();
        g.lineStyle(2,0x0000ff);
        g.moveTo(p0.x, p0.y);
        
        var delta:Number = 0.02;
        for( var t:Number=delta; t<1.0; t+=delta )
        {
          g.lineTo(__quad.getX(t), __quad.getY(t));
        }
        
        g.lineTo(__quad.getX(1.0), __quad.getY(1.0));
     
        drawTangent();
      }
      
      // draw tangent only
      private function drawTangent():void
      {
        var g:Graphics = myTangent.graphics;
        g.clear();
        g.lineStyle(2,0xff0000);
        
        // draw the tangent segment at 40px length
        var myX:Number = __quad.getX(__t);
        var myY:Number = __quad.getY(__t);
        var dX:Number  = __quad.getXPrime(__t);
        var dY:Number  = __quad.getYPrime(__t);
        var d:Number   = Math.sqrt(dX*dX + dY*dY);
        var ux:Number  = dX/d;
        var uy:Number  = dY/d;
        
        g.moveTo(myX, myY);
        g.lineTo(myX + 40*ux, myY + 40*uy);
      }
      
      private function onPointMoved(_p:InteractivePoint):void
      {
        switch( _p.pointLabel )
        {
          case "P0":
            tangent.initialPoint(p0.x, p0.y);
        
            __quad.x0 = p0.x;
            __quad.y0 = p0.y;
        
            drawCurve();
          break;
          
          case "P1":
            __quad.x1 = p1.x;
            __quad.y1 = p1.y;
        
            drawCurve();
          break;
        }
      }
      
      private function updateTangent(_e:SliderEvent):void
         {
           __t = __mySlider__.value;
           drawTangent();
         }
    ]]>
  </mx:Script>
</mx:Application>