Infinity: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
Here [http://jquery.com jQuery] is used instead of [http://prototypejs.org Prototype].
== Just enjoy this construction... ==
== Just enjoy this construction... ==
<html>
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<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/jquery.min.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:800px; height:700px;"></div>
<div id="jxgbox" class="jxgbox" style="width:800px; height:700px;"></div>
Line 48: Line 46:
<source lang="xml">
<source lang="xml">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<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/jquery.min.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:800px; height:700px;"></div>
<div id="jxgbox" class="jxgbox" style="width:800px; height:700px;"></div>

Revision as of 14:22, 29 October 2009

Just enjoy this construction...

<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/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:800px; height:700px;"></div>
<script language="JavaScript"> 			
 var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 300, originY: 300, unitX: 50, unitY: 50});
 board.suspendUpdate();
 var S = board.createElement('slider', [[-5,-6],[5,-6],[0,0.95,1]], {name:'S'});
 var hue = board.createElement('slider', [[-5,-7],[5,-7],[0,8,36]], {name:'color'});
 var points = new Array();
 points[0] = board.createElement('point',[5, 5], {name:' '});	
 points[1] = board.createElement('point',[-5, 5], {name:' '});	
 points[2] = board.createElement('point',[-5, -5], {name:' '});	
 points[3] = board.createElement('point',[5, -5], {name:' '});	
	 		 	
 function quadrangle(pt, n) {
  var col;
  var arr = new Array();
  for(var i = 0; i < 4; i++) {
   arr[i] = board.createElement('point', 
         [function(t) {
            return function () {var x = pt[t].X(); 
                                var x1 = pt[(t+1)%4].X(); 
                                var s = S.Value();
                                return x+(x1-x)*s;
                         }}(i), 
          function(t) {
            return function () {var y = pt[t].Y(); 
                                var y1 = pt[(t+1)%4].Y(); 
                                var s = S.Value();
                                return y+(y1-y)*s;
                         }}(i)
          ], 
          {style:3, name:"",withLabel:false,visible:false});
  }
  col =  function(){return JXG.hsv2rgb(hue.Value()*n,0.7,0.9);};
  board.createElement('polygon',pt, {fillColor:col});
  if(n>0)
    quadrangle(arr, --n);
 }
 quadrangle(points,30);
 board.unsuspendUpdate();
</script>