<?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"
    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 Curve" x="250" y="30" width="300" styleName="title"/>
  
  <mx:Canvas id="myCanvas" />
  <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:Script>
    <![CDATA[
      import mx.events.PropertyChangeEvent;
      
      private var __quad:QuadraticHermiteCurve = new QuadraticHermiteCurve();
      
      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();
      }
      
      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));
      }
      
      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;
        }
      }
    ]]>
  </mx:Script>
</mx:Application>