Difference between revisions of "Spirograph - geometric construction"

From JSXGraph Wiki
Jump to navigationJump to search
 
(31 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
=== Double speed ===
 +
The speed of <math>C</math> is twice the speed of <math>B</math>.
 
<jsxgraph width="600" height="600">
 
<jsxgraph width="600" height="600">
 +
(function() {
 
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], keepaspectratio:true});
 
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], keepaspectratio:true});
  
var O = brd.create('point',[0,0],{name:'O',fixed:true});
+
var O = brd.create('point',[0,0],{name:'O',fixed:true, fillColor:'blue', strokeColor:'blue'});
 
var A = brd.create('point',[2,0],{name:'A'});
 
var A = brd.create('point',[2,0],{name:'A'});
 
var k = brd.create('circle',[O,A],{name:'k'});
 
var k = brd.create('circle',[O,A],{name:'k'});
var B = brd.create('glider',[1,1,k],{name:'B'});
+
var B = brd.create('glider',[0.7,1,k],{name:'B drag me'});
 
var g1 = brd.create('line',[O,B], {strokeColor:'lightgray'});
 
var g1 = brd.create('line',[O,B], {strokeColor:'lightgray'});
var B = brd.create('reflextion',[g1,A],{name:'C'});
+
var C = brd.create('reflection',[A, g1],{name:'C', fillColor:'blue', strokeColor:'blue'});
  
 +
var M = brd.create('glider',[2,2,g1], {name:'M', fillColor:'red', strokeColor:'red'});
 +
var k2 = brd.create('circle',[M,B],{name:'k'}); 
 +
 +
var gpar = brd.create('parallel',[O,C,M], {name:"g", strokeColor:'lightgray'});
 +
var Cprime = brd.create('intersection',[gpar,k2,0], {name:"C'", fillColor:'blue', strokeColor:'blue'});
 +
 +
var g2 = brd.create('line',[M,Cprime], {strokeColor:'lightgray'});
 +
var Cstern = brd.create('glider',[1,1,g2], {name:"C*", trace:true, fillColor:'green', strokeColor:'green'});
 +
})();
 +
</jsxgraph>
 +
====The JavaScript code====
 +
<source lang="javascript">
 +
(function() {
 +
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], keepaspectratio:true});
 +
 +
var O = brd.create('point',[0,0],{name:'O',fixed:true, fillColor:'blue', strokeColor:'blue'});
 +
var A = brd.create('point',[2,0],{name:'A'});
 +
var k = brd.create('circle',[O,A],{name:'k'});
 +
var B = brd.create('glider',[0.7,1,k],{name:'B drag me'});
 +
var g1 = brd.create('line',[O,B], {strokeColor:'lightgray'});
 +
var C = brd.create('reflection',[A, g1],{name:'C', fillColor:'blue', strokeColor:'blue'});
 +
 +
var M = brd.create('glider',[2,2,g1], {name:'M', fillColor:'red', strokeColor:'red'});
 +
var k2 = brd.create('circle',[M,B],{name:'k'}); 
 +
 +
var gpar = brd.create('parallel',[O,C,M], {name:"g", strokeColor:'lightgray'});
 +
var Cprime = brd.create('intersection',[gpar,k2,0], {name:"C'", fillColor:'blue', strokeColor:'blue'});
 +
 +
var g2 = brd.create('line',[M,Cprime], {strokeColor:'lightgray'});
 +
var Cstern = brd.create('glider',[1,1,g2], {name:"C*", trace:true, fillColor:'green', strokeColor:'green'});
 +
})();
 +
</source>
 +
 +
=== Threefold speed ===
 +
The speed of <math>C_2</math> is three times the speed of <math>B</math>.
 +
<jsxgraph width="600" height="600" box="jxgbox2">
 +
(function() {
 +
var brd = JXG.JSXGraph.initBoard('jxgbox2',{boundingbox:[-5,5,5,-5], keepaspectratio:true});
 +
 +
var O = brd.create('point',[0,0],{name:'O',fixed:true, fillColor:'blue', strokeColor:'blue'});
 +
var A = brd.create('point',[2,0],{name:'A'});
 +
var k = brd.create('circle',[O,A],{name:'k'});
 +
var B = brd.create('glider',[0.7,1,k],{name:'B drag me'});
 +
var g1 = brd.create('line',[O,B], {strokeColor:'lightgray'});
 +
var C = brd.create('reflection',[A, g1],{name:'C', fillColor:'blue', strokeColor:'blue'});
 +
 +
var g1a = brd.create('line',[O,C], {strokeColor:'lightgray'});
 +
var C2 = brd.create('reflection',[B, g1a],{name:'C_2', fillColor:'blue', strokeColor:'blue'});
 +
 +
var M = brd.create('glider',[2,2,g1], {name:'M', fillColor:'red', strokeColor:'red'});
 +
var k2 = brd.create('circle',[M,B],{name:'k'}); 
 +
 +
var gpar = brd.create('parallel',[O,C2,M], {name:"g", strokeColor:'lightgray'});
 +
var Cprime = brd.create('intersection',[gpar,k2,0], {name:"C'", fillColor:'blue', strokeColor:'blue'});
 +
 +
var g2 = brd.create('line',[M,Cprime], {strokeColor:'lightgray'});
 +
var Cstern = brd.create('glider',[1,1,g2], {name:"C*", trace:true, fillColor:'green', strokeColor:'green'});
 +
})();
 
</jsxgraph>
 
</jsxgraph>
 +
====The JavaScript code====
 +
<source lang="javascript">
 +
(function() {
 +
var brd = JXG.JSXGraph.initBoard('jxgbox2',{boundingbox:[-5,5,5,-5], keepaspectratio:true});
 +
 +
var O = brd.create('point',[0,0],{name:'O',fixed:true, fillColor:'blue', strokeColor:'blue'});
 +
var A = brd.create('point',[2,0],{name:'A'});
 +
var k = brd.create('circle',[O,A],{name:'k'});
 +
var B = brd.create('glider',[0.7,1,k],{name:'B drag me'});
 +
var g1 = brd.create('line',[O,B], {strokeColor:'lightgray'});
 +
var C = brd.create('reflection',[A, g1],{name:'C', fillColor:'blue', strokeColor:'blue'});
 +
 +
var g1a = brd.create('line',[O,C], {strokeColor:'lightgray'});
 +
var C2 = brd.create('reflection',[B, g1a],{name:'C_2', fillColor:'blue', strokeColor:'blue'});
 +
 +
var M = brd.create('glider',[2,2,g1], {name:'M', fillColor:'red', strokeColor:'red'});
 +
var k2 = brd.create('circle',[M,B],{name:'k'}); 
 +
 +
var gpar = brd.create('parallel',[O,C2,M], {name:"g", strokeColor:'lightgray'});
 +
var Cprime = brd.create('intersection',[gpar,k2,0], {name:"C'", fillColor:'blue', strokeColor:'blue'});
 +
 +
var g2 = brd.create('line',[M,Cprime], {strokeColor:'lightgray'});
 +
var Cstern = brd.create('glider',[1,1,g2], {name:"C*", trace:true, fillColor:'green', strokeColor:'green'});
 +
})();
 +
</source>
 +
 +
=== Fourfold speed ===
 +
The speed of <math>C_2</math> is four times the speed of <math>B</math>.
 +
<jsxgraph width="600" height="600" box="jxgbox3">
 +
(function() {
 +
var brd = JXG.JSXGraph.initBoard('jxgbox3',{boundingbox:[-5,5,5,-5], keepaspectratio:true});
 +
 +
var O = brd.create('point',[0,0],{name:'O',fixed:true, fillColor:'blue', strokeColor:'blue'});
 +
var A = brd.create('point',[2,0],{name:'A'});
 +
var k = brd.create('circle',[O,A],{name:'k'});
 +
var B = brd.create('glider',[0.7,1,k],{name:'B drag me'});
 +
var g1 = brd.create('line',[O,B], {strokeColor:'lightgray'});
 +
var C = brd.create('reflection',[A,g1],{name:'C', fillColor:'blue', strokeColor:'blue'});
 +
 +
var g1a = brd.create('line',[O,C], {strokeColor:'lightgray'});
 +
var C2 = brd.create('reflection',[A, g1a],{name:'C_2', fillColor:'blue', strokeColor:'blue'});
 +
 +
var M = brd.create('glider',[2,2,g1], {name:'M', fillColor:'red', strokeColor:'red'});
 +
var k2 = brd.create('circle',[M,B],{name:'k'}); 
 +
 +
var gpar = brd.create('parallel',[O,C2,M], {name:"g", strokeColor:'lightgray'});
 +
var Cprime = brd.create('intersection',[gpar,k2,0], {name:"C'", fillColor:'blue', strokeColor:'blue'});
 +
 +
var g2 = brd.create('line',[M,Cprime], {strokeColor:'lightgray'});
 +
var Cstern = brd.create('glider',[3,3,g2], {name:"C*", trace:true, fillColor:'green', strokeColor:'green'});
 +
})();
 +
</jsxgraph>
 +
====The JavaScript code====
 +
<source lang="javascript">
 +
(function() {
 +
var brd = JXG.JSXGraph.initBoard('jxgbox3',{boundingbox:[-5,5,5,-5], keepaspectratio:true});
 +
 +
var O = brd.create('point',[0,0],{name:'O',fixed:true, fillColor:'blue', strokeColor:'blue'});
 +
var A = brd.create('point',[2,0],{name:'A'});
 +
var k = brd.create('circle',[O,A],{name:'k'});
 +
var B = brd.create('glider',[0.7,1,k],{name:'B drag me'});
 +
var g1 = brd.create('line',[O,B], {strokeColor:'lightgray'});
 +
var C = brd.create('reflection',[A, g1],{name:'C', fillColor:'blue', strokeColor:'blue'});
 +
 +
var g1a = brd.create('line',[O,C], {strokeColor:'lightgray'});
 +
var C2 = brd.create('reflection',[A, g1a],{name:'C_2', fillColor:'blue', strokeColor:'blue'});
 +
 +
var M = brd.create('glider',[2,2,g1], {name:'M', fillColor:'red', strokeColor:'red'});
 +
var k2 = brd.create('circle',[M,B],{name:'k'}); 
 +
 +
var gpar = brd.create('parallel',[O,C2,M], {name:"g", strokeColor:'lightgray'});
 +
var Cprime = brd.create('intersection',[gpar,k2,0], {name:"C'", fillColor:'blue', strokeColor:'blue'});
 +
 +
var g2 = brd.create('line',[M,Cprime], {strokeColor:'lightgray'});
 +
var Cstern = brd.create('glider',[3,3,g2], {name:"C*", trace:true, fillColor:'green', strokeColor:'green'});
 +
})();
 +
</source>
 +
 +
===Literatur===
 +
* W. Neidhardt, Ch. Wurm: ''Arbeitsbuch THALES, Geometrie mit dem Computer'', Dümmler-Verlag 1997. ISBN 3-427-45511-4
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Curves]]
 
[[Category:Curves]]
 
[[Category:Geometry]]
 
[[Category:Geometry]]

Latest revision as of 16:08, 14 December 2020

Double speed

The speed of [math]C[/math] is twice the speed of [math]B[/math].

The JavaScript code

(function() {
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], keepaspectratio:true});

var O = brd.create('point',[0,0],{name:'O',fixed:true, fillColor:'blue', strokeColor:'blue'});
var A = brd.create('point',[2,0],{name:'A'});
var k = brd.create('circle',[O,A],{name:'k'});
var B = brd.create('glider',[0.7,1,k],{name:'B drag me'});
var g1 = brd.create('line',[O,B], {strokeColor:'lightgray'});
var C = brd.create('reflection',[A, g1],{name:'C', fillColor:'blue', strokeColor:'blue'});

var M = brd.create('glider',[2,2,g1], {name:'M', fillColor:'red', strokeColor:'red'});
var k2 = brd.create('circle',[M,B],{name:'k'});  

var gpar = brd.create('parallel',[O,C,M], {name:"g", strokeColor:'lightgray'});
var Cprime = brd.create('intersection',[gpar,k2,0], {name:"C'", fillColor:'blue', strokeColor:'blue'});

var g2 = brd.create('line',[M,Cprime], {strokeColor:'lightgray'});
var Cstern = brd.create('glider',[1,1,g2], {name:"C*", trace:true, fillColor:'green', strokeColor:'green'});
})();

Threefold speed

The speed of [math]C_2[/math] is three times the speed of [math]B[/math].

The JavaScript code

(function() {
var brd = JXG.JSXGraph.initBoard('jxgbox2',{boundingbox:[-5,5,5,-5], keepaspectratio:true});

var O = brd.create('point',[0,0],{name:'O',fixed:true, fillColor:'blue', strokeColor:'blue'});
var A = brd.create('point',[2,0],{name:'A'});
var k = brd.create('circle',[O,A],{name:'k'});
var B = brd.create('glider',[0.7,1,k],{name:'B drag me'});
var g1 = brd.create('line',[O,B], {strokeColor:'lightgray'});
var C = brd.create('reflection',[A, g1],{name:'C', fillColor:'blue', strokeColor:'blue'});

var g1a = brd.create('line',[O,C], {strokeColor:'lightgray'});
var C2 = brd.create('reflection',[B, g1a],{name:'C_2', fillColor:'blue', strokeColor:'blue'});

var M = brd.create('glider',[2,2,g1], {name:'M', fillColor:'red', strokeColor:'red'});
var k2 = brd.create('circle',[M,B],{name:'k'});  

var gpar = brd.create('parallel',[O,C2,M], {name:"g", strokeColor:'lightgray'});
var Cprime = brd.create('intersection',[gpar,k2,0], {name:"C'", fillColor:'blue', strokeColor:'blue'});

var g2 = brd.create('line',[M,Cprime], {strokeColor:'lightgray'});
var Cstern = brd.create('glider',[1,1,g2], {name:"C*", trace:true, fillColor:'green', strokeColor:'green'});
})();

Fourfold speed

The speed of [math]C_2[/math] is four times the speed of [math]B[/math].

The JavaScript code

(function() {
var brd = JXG.JSXGraph.initBoard('jxgbox3',{boundingbox:[-5,5,5,-5], keepaspectratio:true});

var O = brd.create('point',[0,0],{name:'O',fixed:true, fillColor:'blue', strokeColor:'blue'});
var A = brd.create('point',[2,0],{name:'A'});
var k = brd.create('circle',[O,A],{name:'k'});
var B = brd.create('glider',[0.7,1,k],{name:'B drag me'});
var g1 = brd.create('line',[O,B], {strokeColor:'lightgray'});
var C = brd.create('reflection',[A, g1],{name:'C', fillColor:'blue', strokeColor:'blue'});

var g1a = brd.create('line',[O,C], {strokeColor:'lightgray'});
var C2 = brd.create('reflection',[A, g1a],{name:'C_2', fillColor:'blue', strokeColor:'blue'});

var M = brd.create('glider',[2,2,g1], {name:'M', fillColor:'red', strokeColor:'red'});
var k2 = brd.create('circle',[M,B],{name:'k'});  

var gpar = brd.create('parallel',[O,C2,M], {name:"g", strokeColor:'lightgray'});
var Cprime = brd.create('intersection',[gpar,k2,0], {name:"C'", fillColor:'blue', strokeColor:'blue'});

var g2 = brd.create('line',[M,Cprime], {strokeColor:'lightgray'});
var Cstern = brd.create('glider',[3,3,g2], {name:"C*", trace:true, fillColor:'green', strokeColor:'green'});
})();

Literatur

  • W. Neidhardt, Ch. Wurm: Arbeitsbuch THALES, Geometrie mit dem Computer, Dümmler-Verlag 1997. ISBN 3-427-45511-4