Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- test01 [2022/07/11 08:47] – torsten.roehl
+++ test01 [2022/07/11 09:57] (aktuell) – torsten.roehl
@@ Zeile 1: / Zeile 1: @@
-====== Überschrift ======
+==AA==
+<PRELOAD>
+#
+# jsxgraph
+#
 https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js
 https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css
-var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true});
+</PRELOAD>
-board.suspendUpdate();
+<HTML>
-var b1c1 = board.create('circle', [[0,0], [1,0]]);
-var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
-var perp = board.create('perpendicular', [board.defaultAxes.x,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
-var perp2 = board.create('perpendicular',[board.defaultAxes.y,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
-board.unsuspendUpdate();
-// Animation
+<body>
-var animated = false;
+<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
-function animate(point, direction, count) {
+<script type="text/javascript">
-    if(animated) {
+var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:false,boundingbox:[-5,5,5,-5],keepaspectratio:true});
-        point.stopAnimation();
-        animated = false;
+var p = brd.create('point', [0,0]);
-    } else {
+var q = brd.create('point', [3,3]);
-        point.startAnimation(direction, count);
+var circ = brd.create('circle', [p, q]);
-        animated = true;
+// 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();
+</script>
-var board2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-1, 1.33, 7, -1.33]});
+</body>
-board2.suspendUpdate();
+</HTML>
-var xax2 = board2.create('axis', [[0,0], [1,0]]);
-board2.create('axis', [[0,0], [0,1]]);
-board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: 2});
-// sine:
+hhjkjkj
-var b2p1 = board2.create('point', [
-             function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); },
-             function() { return b1p1.Y() }],
-             {fixed: true, trace: true, color: '#ff0000', name: 'S'});
-// cosine:
-var b2p2 = board2.create('point', [
-             function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); },
-             function() { return b1p1.X() }],
-             {fixed: true, trace: true, color: '#0000ff', name: 'C'});
-// Dependencies (only necessary if b2p1 or b2p2 is deleted)
-b1p1.addChild(b2p1);
-b1p1.addChild(b2p2);
-board2.unsuspendUpdate();
-board.addChild(board2);