# Difference between revisions of "Circle with ticks"

From JSXGraph Wiki

Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||

Line 1: | Line 1: | ||

Show ticks on the circumference of a circle. | Show ticks on the circumference of a circle. | ||

− | <jsxgraph width=" | + | <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}); | ||

## Latest revision as of 00:05, 25 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();
```