Circle with ticks: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(5 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.dataX.push( NaN ); | ||
this.dataY.push( NaN ); | this.dataY.push( NaN ); | ||
} | } | ||
}; | }; | ||
brd.update(); | |||
</jsxgraph> | </jsxgraph> | ||
Line 34: | 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();