Circle with ticks: Difference between revisions
From JSXGraph Wiki
| A WASSERMANN (talk | contribs) No edit summary | A WASSERMANN (talk | contribs) No edit summary | ||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| <jsxgraph width=" | Show ticks on the circumference of a circle. | ||
| <jsxgraph width="400" height="400"> | |||
| var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:false,boundingbox:[-5,5,5,-5],keepaspectratio:true}); | var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:false,boundingbox:[-5,5,5,-5],keepaspectratio:true}); | ||
| Line 6: | Line 7: | ||
| var circ = brd.create('circle', [p, q]); | var circ = brd.create('circle', [p, q]); | ||
| var ticks = brd.create('curve', [[0], [0]], {strokeWidth: 1, strokeColor: 'blue'}); | // Create an empty curve | ||
| var ticks = brd.create('curve', [[0], [0]],   | |||
|              {strokeWidth: 1,   | |||
|               strokeColor: 'blue', | |||
|               strokeOpacity: 0.5}); | |||
| // Make ticks out of the curve  | |||
| ticks.updateDataArray = function() { | ticks.updateDataArray = function() { | ||
|      var cx = circ.center.X(), |      var cx = circ.center.X(), | ||
| Line 12: | Line 19: | ||
|          r = circ.Radius(), |          r = circ.Radius(), | ||
|          i,   |          i,   | ||
|          steps = 20, |         ticklen = 0.3,           // Length of ticks in user space coordinates | ||
|          steps = 20,              // Number of ticks | |||
|         d = ticklen * 0.5, | |||
|          alpha = 2 * Math.PI / steps; |          alpha = 2 * Math.PI / steps; | ||
| Line 18: | Line 27: | ||
|      this.dataY = []; |      this.dataY = []; | ||
|      for (i = 0; i < steps; i++) { |      for (i = 0; i < steps; i++) { | ||
|          this.dataX.push( cx +  |         // Start of a tick | ||
|          this.dataY.push(  |          this.dataX.push( cx + (r - d)* Math.cos(i * alpha) ); | ||
|          this.dataX.push( cx +  |          this.dataY.push( cy + (r - d) * Math.sin(i * alpha) ); | ||
|          this.dataY.push(  |         // End of tick | ||
|          this.dataX.push( cx + (r + d) * Math.cos(i * alpha) ); | |||
|          this.dataY.push( cy + (r + d) * Math.sin(i * alpha) ); | |||
|         // Interrupt the curve | |||
|         this.dataX.push( NaN ); | |||
|         this.dataY.push( NaN ); | |||
|      } |      } | ||
| }; | }; | ||
| brd.update(); | |||
| </jsxgraph> | </jsxgraph> | ||
| Line 31: | Line 46: | ||
| <source lang="javascript"> | <source lang="javascript"> | ||
| var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:false,boundingbox:[-5,5,5,-5],keepaspectratio:true}); | |||
| var p = brd.create('point', [0,0]); | |||
| var q = brd.create('point', [3,3]); | |||
| var circ = brd.create('circle', [p, q]); | |||
| // Create an empty curve | |||
| var ticks = brd.create('curve', [[0], [0]],  | |||
|              {strokeWidth: 1,  | |||
|               strokeColor: 'blue', | |||
|               strokeOpacity: 0.5}); | |||
| // Make ticks out of the curve  | |||
| ticks.updateDataArray = function() { | |||
|     var cx = circ.center.X(), | |||
|         cy = circ.center.Y(), | |||
|         r = circ.Radius(), | |||
|         i,  | |||
|         ticklen = 0.3,           // Length of ticks in user space coordinates | |||
|         steps = 20,              // Number of ticks | |||
|         d = ticklen * 0.5, | |||
|         alpha = 2 * Math.PI / steps; | |||
|     this.dataX = []; | |||
|     this.dataY = []; | |||
|     for (i = 0; i < steps; i++) { | |||
|         // Start of a tick | |||
|         this.dataX.push( cx + (r - d)* Math.cos(i * alpha) ); | |||
|         this.dataY.push( cy + (r - d) * Math.sin(i * alpha) ); | |||
|         // End of tick | |||
|         this.dataX.push( cx + (r + d) * Math.cos(i * alpha) ); | |||
|         this.dataY.push( cy + (r + d) * Math.sin(i * alpha) ); | |||
|         // Interrupt the curve | |||
|         this.dataX.push( NaN ); | |||
|         this.dataY.push( NaN ); | |||
|     } | |||
| }; | |||
| brd.update(); | |||
| </source> | </source> | ||
| [[Category:Examples]] | [[Category:Examples]] | ||
| [[Category:Curves]] | [[Category:Curves]] | ||
Latest revision as of 22:05, 24 March 2014
Show ticks on the circumference of a circle.
The underlying JavaScript code
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:false,boundingbox:[-5,5,5,-5],keepaspectratio:true});
var p = brd.create('point', [0,0]);
var q = brd.create('point', [3,3]);
var circ = brd.create('circle', [p, q]);
// Create an empty curve
var ticks = brd.create('curve', [[0], [0]], 
             {strokeWidth: 1, 
              strokeColor: 'blue',
              strokeOpacity: 0.5});
// Make ticks out of the curve 
ticks.updateDataArray = function() {
    var cx = circ.center.X(),
        cy = circ.center.Y(),
        r = circ.Radius(),
        i, 
        ticklen = 0.3,           // Length of ticks in user space coordinates
        steps = 20,              // Number of ticks
        d = ticklen * 0.5,
        alpha = 2 * Math.PI / steps;
    this.dataX = [];
    this.dataY = [];
    for (i = 0; i < steps; i++) {
        // Start of a tick
        this.dataX.push( cx + (r - d)* Math.cos(i * alpha) );
        this.dataY.push( cy + (r - d) * Math.sin(i * alpha) );
        // End of tick
        this.dataX.push( cx + (r + d) * Math.cos(i * alpha) );
        this.dataY.push( cy + (r + d) * Math.sin(i * alpha) );
        // Interrupt the curve
        this.dataX.push( NaN );
        this.dataY.push( NaN );
    }
};
brd.update();
