Code

#INCLUDE JsGraph.inc
#INCLUDE ControlPanel.inc

<jscript>

function SplineModel() {
  this.Mat = [[1,0,0],[0,1,0]];
  this.Trans = 'window';
  this.InRect = true;
  this.InPath = true;
  this.Append = false;
  this.Close = true;
  this.Stroke = true;
  this.Fill = true;
  this.Invert = false;
  this.ShowPoints = true;
  this.ShowControl = false;
  this.Width = 2;
  this.Size = 0.75;
  this.Cap = 'but';
  this.Tension = 0.5;
  this.LastNPoints = 7;
  this.NPoints = 7;
  this.PolyTemplate = new JsgPolygon();
  this.Poly = new JsgPolygon();
  this.MakePoly();
  this.Update();
}

SplineModel.prototype.MakePoly = function() {
  this.PolyTemplate.Reset();
  for (var i = 0; i < this.NPoints; i++ ) {
    this.PolyTemplate.AddPoint( Math.random(), Math.random() ); 
  }
}

SplineModel.prototype.Update = function() {
  this.Poly.Reset();
  var w = this.Size * 600;
  var h = this.Size * 400;
  for (var i = 0; i < this.NPoints; i++) {
    var x = this.PolyTemplate.X[i] * w - this.Size * 300;
    var y = this.PolyTemplate.Y[i] * h - this.Size * 200;
    this.Poly.AddPoint( x, y ); 
  }
}

var model = new SplineModel();

var jsg = NewGraph2D( { Width: 602, Height: 403, DrawFunc: Draw, AutoReset: false } );

function Draw( g ) {
  g.Reset();
  g.SetLineCap( model.Cap );
  g.SetWindowWH( -g.VpInnerWidth/2, -g.VpInnerHeight/2, g.VpInnerWidth, g.VpInnerHeight );
  g.SelectTrans( model.Trans );

  g.AddTrans( model.Mat );

  g.SetAreaAttr( 'orange', 'blue', model.Width );
  var mode = 0;
  if (model.Stroke) mode += 1;
  if (model.Fill) mode += 2;
  if (model.Close) mode += 4;
  if (model.Append) mode += 8;
  if (model.InPath) {
    g.OpenPath();
  }
  if (model.InRect) g.Rect( -200, -100, 200, 100 );

  if (model.Invert) {
    model.Poly.Invert();
    g.SplineCurve( model.Poly, model.Tension, mode );
    model.Poly.Invert();
  } else {
    g.SplineCurve( model.Poly, model.Tension, mode );
  }

  if (model.InPath) g.Path( mode );

  //g.Polygon( [ 0, 0, 10 ], [ 10, 0, 0 ] );

  if (model.ShowControl) {
    g.SetLineAttr( 'gray', 1 );
    var wpoly = g.WorkPoly;
    var last = wpoly.Size - 1;
    for (var i = 0; i <= last; i += 3) {
      if (i > 0)    g.Line( wpoly.X[i-1], wpoly.Y[i-1], wpoly.X[i], wpoly.Y[i] );
      if (i < last) g.Line( wpoly.X[i], wpoly.Y[i], wpoly.X[i+1], wpoly.Y[i+1] );
    }
  }

  if (model.ShowPoints) {
    g.SetLineAttr( 'gray', 0 );
    g.Marker( model.Poly );
  }

}

function Update() {
  if (model.LastNPoints != model.NPoints) {
    model.MakePoly();
    model.LastNPoints = model.NPoints;
  }
  model.Update();
  panel1.Update();
  panel2.Update();
  Draw( jsg );
}

function NewSpline() {
  model.MakePoly();
  Update();
}

</jscript>

{{col|50}}

<jscript>

var panel1 = ControlPanels.NewSliderPanel( { ModelRef: 'model', OnModelChange: Update } );

panel1.AddValueSliderField( { Name: 'NPoints', Min: 3, Max: 10, Steps: 7, Digits: 0 } );
panel1.AddValueSliderField( { Name: 'Size', Min: 0.1, Max: 1, Digits: 2 } );
panel1.AddValueSliderField( { Name: 'Tension', Min: -2, Max: 2, Digits: 2 } );
panel1.AddValueSliderField( { Name: 'Width', Min: 0, Max: 20, Digits: 1 } );

panel1.AddValueSliderField( { Name: 'a00', ValueRef: 'Mat[0][0]', Min: -5, Max: 5 } );
panel1.AddValueSliderField( { Name: 'a01', ValueRef: 'Mat[0][1]', Min: -5, Max: 5 } );
panel1.AddValueSliderField( { Name: 'a10', ValueRef: 'Mat[1][0]', Min: -5, Max: 5 } );
panel1.AddValueSliderField( { Name: 'a11', ValueRef: 'Mat[1][1]', Min: -5, Max: 5 } );
panel1.AddValueSliderField( { Name: 'a02', ValueRef: 'Mat[0][2]', Min: -100, Max: 100 } );
panel1.AddValueSliderField( { Name: 'a12', ValueRef: 'Mat[1][2]', Min: -100, Max: 100 } );

panel1.Render();

</jscript>

{{col}}

<jscript>

var panel2 = ControlPanels.NewPanel( { ModelRef: 'model', OnModelChange: Update } );

panel2.AddRadiobuttonField( {
  Name: 'Trans', 
  Items: [ 
    { Name: 'window' }, 
    { Name: 'viewport' },
    { Name: 'canvas' }
  ]
});

panel2.AddRadiobuttonField( {
  Name: 'Cap',
  Items: [
    { Name: 'but' },
    { Name: 'round' },
    { Name: 'square' }
  ]
} );

panel2.AddCheckboxField( {
  Name: 'Mode',
  Items: [
    { Name: 'Stroke' },
    { Name: 'Fill' },
    { Name: 'Close' },
    { Name: 'Append' }
  ]
} );

panel2.AddCheckboxField( {
  Name: 'Path',
  Items: [
    { Name: 'InRect' },
    { Name: 'InPath' },
    { Name: 'Invert' }
  ]
} );

panel2.AddCheckboxField( {
  Name: 'Show',
  Items: [
    { Name: 'ShowPoints' },
    { Name: 'ShowControl' }
  ]
} );

panel2.AddHtmlField( { Label: '-', Html: ControlPanels.SmallButton( 'New Spline', 'NewSpline()' ) } );

panel2.Render();

</jscript>

{{col|end}}