Difference between revisions of "Circle with ticks"

From JSXGraph Wiki
Jump to: navigation, search
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
<jsxgraph width="600" height="500">
+
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 + 0.95 * r * Math.cos(i * alpha) );
+
        // Start of a tick
         this.dataY.push( cx + 0.95 * r * Math.sin(i * alpha) );
+
         this.dataX.push( cx + (r - d)* Math.cos(i * alpha) );
         this.dataX.push( cx + 1.05 * r * Math.cos(i * alpha) );
+
         this.dataY.push( cy + (r - d) * Math.sin(i * alpha) );
         this.dataY.push( cx + 1.05 * r * 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();
 +
  
 
</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 23: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();