Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- test01 [2022/07/11 09:55] – torsten.roehl
+++ test01 [2022/07/11 09:57] (aktuell) – torsten.roehl
@@ Zeile 14: / Zeile 14: @@
 <div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
 <script type="text/javascript">
- var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true});
+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});
-board1 = JXG.JSXGraph.initBoard('jxgbox1', {axis: true, boundingbox: [-6, 5, 6, -5]});
+// Make ticks out of the curve
-board1.suspendUpdate();
+ticks.updateDataArray = function() {
-var s = board1.create('slider', [[0.75,-2],[4.5,-2],[0,0,10]], {name:'S',snapWidth:1});
+    var cx = circ.center.X(),
-board1.create('functiongraph', [
+        cy = circ.center.Y(),
-    function(t) {
+        r = circ.Radius(),
-        var val = 0, sv = s.Value()+1,
+        i,
-        k = 1;
+        ticklen = 0.3,           // Length of ticks in user space coordinates
-        for(var i = 0; i < sv; i++) {
+        steps = 20,              // Number of ticks
-            val = val + Math.sin(2*Math.PI*k*t)/k;
+        d = ticklen * 0.5,
-            k += 1;
+        alpha = 2 * Math.PI / steps;
-        }
-        return val+2;
-    }, -10, 10], {strokeColor: "#bb0000"});
-board1.create('functiongraph', [
-    function(t) {
-        var val = 0, sv = s.Value()+1,
-            k = 1;
-        for(var i = 0; i < sv; i++) {
-            val = val + Math.sin(2*Math.PI*(2*k-1)*t)/(2*k-1);
-            k += 1;
-        }
-        return val-2;
-    }, -10, 10], {strokeColor: "#cc5520"});
-board1.unsuspendUpdate();
+    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();
 </script>