Difference between revisions of "Euler's spiral (Clothoid)"

From JSXGraph Wiki
Jump to: navigation, search
 
(6 intermediate revisions by 2 users not shown)
Line 8: Line 8:
 
:<math> y = k\cdot\int_0^t \cos(\frac{u^2}{2}) du\; </math>
 
:<math> y = k\cdot\int_0^t \cos(\frac{u^2}{2}) du\; </math>
  
<jsxgraph width="500" height="500" box="box2">
+
<jsxgraph width="500" height="500" box="box">
  b2 = JXG.JSXGraph.initBoard('box2', {originX: 250, originY: 250, unitX: 25, unitY: 25});
+
  var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10],axis:true});
  var k1 = b2.createElement('slider', [[1,8],[5,8],[0,2,8]],{name:'k'});
+
  var k1 = b.create('slider', [[1,8],[5,8],[0,2,8]],{name:'k'});
  var len = b2.createElement('slider', [[1,7],[5,7],[1,2,3.2]],{name:'len'});
+
  var len = b.create('slider', [[1,7],[5,7],[1,2,3.2]],{name:'len'});
  var c = b2.createElement('curve',  
+
  var c = b.create('curve',  
             [function(t){ return k1.Value()*b2.I([0,t],function(u){return Math.sin(u*u*0.5);}); },  
+
             [function(t){ return k1.Value()*JXG.Math.Numerics.I([0,t],function(u){return Math.sin(u*u*0.5);}); },  
               function(t){ return k1.Value()*b2.I([0,t],function(u){return Math.cos(u*u*0.5);}); },
+
               function(t){ return k1.Value()*JXG.Math.Numerics.I([0,t],function(u){return Math.cos(u*u*0.5);}); },
 
               function(){return -len.Value()*Math.PI;}, function(){return len.Value()*Math.PI;}],
 
               function(){return -len.Value()*Math.PI;}, function(){return len.Value()*Math.PI;}],
 
             {strokewidth:1});     
 
             {strokewidth:1});     
  var p = b2.createElement('glider',[c],{name:''});
+
  var p = b.create('glider',[1,3,c],{name:''});
  var t = b2.createElement('tangent',[p],{dash:3,strokeWidth:1,strokeColor:'red'});
+
  var t = b.create('tangent',[p],{dash:3,strokeWidth:1,strokeColor:'red'});
 
</jsxgraph>
 
</jsxgraph>
  
 
===The JavaScript code to produce this picture===
 
===The JavaScript code to produce this picture===
  
<source lang="xml">
+
<source lang="javascript">
<jsxgraph width="500" height="500" box="box2">
+
  var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10],axis:true});
  b2 = JXG.JSXGraph.initBoard('box2', {originX: 250, originY: 250, unitX: 25, unitY: 25});
+
  var k1 = b.create('slider', [[1,8],[5,8],[0,2,8]],{name:'k'});
  var k1 = b2.createElement('slider', [[1,8],[5,8],[0,2,8]],{name:'k'});
+
  var len = b.create('slider', [[1,7],[5,7],[1,2,3.2]],{name:'len'});
  var len = b2.createElement('slider', [[1,7],[5,7],[1,2,3.2]],{name:'len'});
+
  var c = b.create('curve',  
  var c = b2.createElement('curve',  
+
             [function(t){ return k1.Value()*JXG.Math.Numerics.I([0,t],function(u){return Math.sin(u*u*0.5);}); },  
             [function(t){ return k1.Value()*b2.I([0,t],function(u){return Math.sin(u*u*0.5);}); },  
+
               function(t){ return k1.Value()*JXG.Math.Numerics.I([0,t],function(u){return Math.cos(u*u*0.5);}); },
               function(t){ return k1.Value()*b2.I([0,t],function(u){return Math.cos(u*u*0.5);}); },
 
 
               function(){return -len.Value()*Math.PI;}, function(){return len.Value()*Math.PI;}],
 
               function(){return -len.Value()*Math.PI;}, function(){return len.Value()*Math.PI;}],
             {strokewidth:1});    
+
             {strokewidth:1});  
  var p = b2.createElement('glider',[c],{name:''});
+
  var p = b.create('glider',[1,3,c],{name:''});
  var t = b2.createElement('tangent',[p],{dash:3,strokeWidth:1,strokeColor:'red'});
+
  var t = b.create('tangent',[p],{dash:3,strokeWidth:1,strokeColor:'red'});
</jsxgraph>
 
 
</source>
 
</source>
  

Latest revision as of 17:04, 20 February 2013

Euler's spiral is defined as a curve whose curvature changes linearly with its curve length. Other names for the spiral are clothoid and spiral of Cornu or Cornu spiral.

Euler spirals are widely used as transition curve in rail track / highway engineering for connecting and transiting the geometry between a tangent and a circular curve.

The curve can be described in parametric form by

[math] x = k\cdot\int_0^t \sin(\frac{u^2}{2}) du\; [/math]
[math] y = k\cdot\int_0^t \cos(\frac{u^2}{2}) du\; [/math]

The JavaScript code to produce this picture

 var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10],axis:true});
 var k1 = b.create('slider', [[1,8],[5,8],[0,2,8]],{name:'k'});
 var len = b.create('slider', [[1,7],[5,7],[1,2,3.2]],{name:'len'});
 var c = b.create('curve', 
             [function(t){ return k1.Value()*JXG.Math.Numerics.I([0,t],function(u){return Math.sin(u*u*0.5);}); }, 
              function(t){ return k1.Value()*JXG.Math.Numerics.I([0,t],function(u){return Math.cos(u*u*0.5);}); },
              function(){return -len.Value()*Math.PI;}, function(){return len.Value()*Math.PI;}],
             {strokewidth:1});    
 var p = b.create('glider',[1,3,c],{name:''});
 var t = b.create('tangent',[p],{dash:3,strokeWidth:1,strokeColor:'red'});

External links