Circle with ticks: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary  | 
				A WASSERMANN (talk | contribs) No edit summary  | 
				||
| Line 1: | Line 1: | ||
Show ticks on the circumference of a circle.  | |||
<jsxgraph width="600" height="500">  | <jsxgraph width="600" height="500">  | ||
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 45: | 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]]  | ||
Revision as of 22:04, 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();