Difference between revisions of "Limacon"

From JSXGraph Wiki
Jump to navigationJump to search
 
(3 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
<html>
 
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
 
<input type="button" value="Clear trace" onClick="clearTrace()" />
 
<input type="button" value="Clear trace" onClick="clearTrace()" />
<div id="jxgbox" class="jxgbox" style="width:500px; height:430px;"></div>
+
</html>
<script language="JavaScript">
+
<jsxgraph box="jxgbox" width="500" height="430">
        var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 400, unitX: 25, unitY: 25});
+
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-2, 16, 18, -2]});
        var xax = board.createElement('axis', [[0,0],[1,0]]);
 
        var yax = board.createElement('axis', [[0,0],[0,1]]);
 
  
        var p3 = board.createElement('point', [8, 4], {style:1,name:"P_{3}",fixed:true});
+
var p3 = board.create('point', [8, 4], {face:'x',size:3,name:"P_{3}",fixed:true});
        var p4 = board.createElement('point', [8, 8], {style:2,name:"P_{4}",fixed:true});
+
var p4 = board.create('point', [8, 8], {size:4,face:'x',name:"P_{4}",fixed:true});
        var c1 = board.createElement('circle', [p4, p3]);
+
var c1 = board.create('circle', [p4, p3]);
  
        var p6 = board.createElement('glider', [0, 0, c1], {style:3,name:"P_{6}"});
+
var p6 = board.create('glider', [0, 0, c1], {face:'o',size:1,name:"P_{6}"});
        var g = board.createElement('line', [p3, p6]);
+
var g = board.create('line', [p3, p6]);
  
        var c2 = board.createElement('circle', [p6, 3]);
+
var c2 = board.create('circle', [p6, 3]);
  
        var p14_1 = board.createElement('point', [board.intersectionFunc(c2,g,0)], {style:8,name:"M",trace:true});
+
var p14_1 = board.create('intersection', [c2,g,0], {size:3,face:'[]',name:"M",trace:true});
        var p14_2 = board.createElement('point', [board.intersectionFunc(c2,g,1)], {style:8,name:"N",trace:true});
+
var p14_2 = board.create('intersection', [c2,g,1], {size:3,face:'[]',name:"N",trace:true});
  
        function clearTrace() {
+
function clearTrace() {
                p14_1.clearTrace();
+
    p14_1.clearTrace();
                p14_2.clearTrace();
+
    p14_2.clearTrace();
        }
+
}
</script>
+
clearTrace();
</html>
+
</jsxgraph>
  
 
==References==
 
==References==
Line 38: Line 33:
  
 
<source lang="javascript">
 
<source lang="javascript">
        var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 400, unitX: 25, unitY: 25});
+
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-2, 16, 18, -2]});
        var xax = board.createElement('axis', [[0,0],[1,0]]);
 
        var yax = board.createElement('axis', [[0,0],[0,1]]);
 
  
        var p3 = board.createElement('point', [8, 4], {style:1,name:"P_{3}",fixed:true});
+
var p3 = board.create('point', [8, 4], {face:'x',size:3,name:"P_{3}",fixed:true});
        var p4 = board.createElement('point', [8, 8], {style:2,name:"P_{4}",fixed:true});
+
var p4 = board.create('point', [8, 8], {size:4,face:'x',name:"P_{4}",fixed:true});
        var c1 = board.createElement('circle', [p4, p3]);
+
var c1 = board.create('circle', [p4, p3]);
  
        var p6 = board.createElement('glider', [0, 0, c1], {style:3,name:"P_{6}"});
+
var p6 = board.create('glider', [0, 0, c1], {face:'o',size:1,name:"P_{6}"});
        var g = board.createElement('line', [p3, p6]);
+
var g = board.create('line', [p3, p6]);
  
        var c2 = board.createElement('circle', [p6, 3]);
+
var c2 = board.create('circle', [p6, 3]);
  
        var p14_1 = board.createElement('point', [board.intersectionFunc(c2,g,0)], {style:8,name:"M",trace:true});
+
var p14_1 = board.create('intersection', [c2,g,0], {size:3,face:'[]',name:"M",trace:true});
        var p14_2 = board.createElement('point', [board.intersectionFunc(c2,g,1)], {style:8,name:"N",trace:true});
+
var p14_2 = board.create('intersection', [c2,g,1], {size:3,face:'[]',name:"N",trace:true});
  
        function clearTrace() {
+
function clearTrace() {
                p14_1.clearTrace();
+
    p14_1.clearTrace();
                p14_2.clearTrace();
+
    p14_2.clearTrace();
        }
+
}
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Curves]]
 
[[Category:Curves]]

Latest revision as of 15:04, 3 March 2021

With JSXGraph elements can be traced to visualize construced loci.

References

The underlying JavaScript code

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-2, 16, 18, -2]});

var p3 = board.create('point', [8, 4], {face:'x',size:3,name:"P_{3}",fixed:true});
var p4 = board.create('point', [8, 8], {size:4,face:'x',name:"P_{4}",fixed:true});
var c1 = board.create('circle', [p4, p3]);

var p6 = board.create('glider', [0, 0, c1], {face:'o',size:1,name:"P_{6}"});
var g = board.create('line', [p3, p6]);

var c2 = board.create('circle', [p6, 3]);

var p14_1 = board.create('intersection', [c2,g,0], {size:3,face:'[]',name:"M",trace:true});
var p14_2 = board.create('intersection', [c2,g,1], {size:3,face:'[]',name:"N",trace:true});

function clearTrace() {
    p14_1.clearTrace();
    p14_2.clearTrace();
}