Difference between revisions of "Animation II"

From JSXGraph Wiki
Jump to: navigation, search
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<jsxgraph width="500" height="500">
 
<jsxgraph width="500" height="500">
brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true});
+
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true});
p = brd.createElement('point',[0,1],{face:'o', size:5, strokeColor:'red', fillOpacity:0.3, strokeOpacity: 0.3});
+
var p = brd.create('point',[0,1],{face:'o', size:5, strokeColor:'red', fillOpacity:0.3, strokeOpacity: 0.3});
brd.createElement('arrow',[[0,0],p],{strokeWidth:5, strokeOpacity:0.7, strokeColor:'blue'});
+
brd.create('arrow',[[0,0],p],{strokeWidth:5, strokeOpacity:0.7, strokeColor:'blue'});
  
i = 0;
+
var i = -1;
setTimeout(function(){-p.moveTo([Math.cos(-i*Math.PI*2/12),Math.sin(-i*Math.PI*2/12)],500); i++; },1000);
+
setInterval(function(){p.moveTo([Math.sin(i*Math.PI*2/12),Math.cos(i*Math.PI*2/12)],800); i++; },1000);
 
</jsxgraph>
 
</jsxgraph>
  
 
===The JavaScript code===
 
===The JavaScript code===
 
<source lang="javascript">
 
<source lang="javascript">
brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-2,2,2,-2], keepaspectratio:true, axis:true});
+
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true});
p = brd.createElement('point',[1.5,1.5],{face:'o', size:8, strokeColor:'red', fillOpacity:0.6, strokeOpacity: 0.6});
+
var p = brd.create('point',[0,1],{face:'o', size:5, strokeColor:'red', fillOpacity:0.3, strokeOpacity: 0.3});
 +
brd.create('arrow',[[0,0],p],{strokeWidth:5, strokeOpacity:0.7, strokeColor:'blue'});
 +
 
 +
var i = -1;
 +
setInterval(function(){p.moveTo([Math.sin(i*Math.PI*2/12),Math.cos(i*Math.PI*2/12)],800); i++; },1000);
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Latest revision as of 15:24, 1 February 2010

The JavaScript code

var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true});
var p = brd.create('point',[0,1],{face:'o', size:5, strokeColor:'red', fillOpacity:0.3, strokeOpacity: 0.3});
brd.create('arrow',[[0,0],p],{strokeWidth:5, strokeOpacity:0.7, strokeColor:'blue'});

var i = -1;
setInterval(function(){p.moveTo([Math.sin(i*Math.PI*2/12),Math.cos(i*Math.PI*2/12)],800); i++; },1000);