Circle with ticks: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 6: Line 6:
var circ = brd.create('circle', [p, q]);
var circ = brd.create('circle', [p, q]);


// Create an empty curve
var ticks = brd.create('curve', [[0], [0]],  
var ticks = brd.create('curve', [[0], [0]],  
             {strokeWidth: 1,  
             {strokeWidth: 1,  
               strokeColor: 'blue',
               strokeColor: 'blue',
               strokeOpacity: 0.5});
               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 15: Line 18:
         r = circ.Radius(),
         r = circ.Radius(),
         i,  
         i,  
         ticklen = 0.3,
         ticklen = 0.3,           // Length of ticks in user space coordinates
         steps = 20,
         steps = 20,             // Number of ticks
         d = ticklen * 0.5,
         d = ticklen * 0.5,
         alpha = 2 * Math.PI / steps;
         alpha = 2 * Math.PI / steps;
Line 23: Line 26:
     this.dataY = [];
     this.dataY = [];
     for (i = 0; i < steps; i++) {
     for (i = 0; i < steps; i++) {
        // Start of a tick
         this.dataX.push( cx + (r - d)* Math.cos(i * alpha) );
         this.dataX.push( cx + (r - d)* Math.cos(i * alpha) );
         this.dataY.push( cy + (r - d) * Math.sin(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.dataX.push( cx + (r + d) * Math.cos(i * alpha) );
         this.dataY.push( cy + (r + d) * Math.sin(i * alpha) );
         this.dataY.push( cy + (r + d) * Math.sin(i * alpha) );
        // Interrupt the curve
         this.dataX.push( NaN );
         this.dataX.push( NaN );
         this.dataY.push( NaN );
         this.dataY.push( NaN );

Revision as of 22:03, 24 March 2014

The underlying JavaScript code