Difference between revisions of "Infinity"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
Line 5: | Line 5: | ||
<div id="jxgbox" class="jxgbox" style="width:800px; height:700px;"></div> | <div id="jxgbox" class="jxgbox" style="width:800px; height:700px;"></div> | ||
<script language="JavaScript"> | <script language="JavaScript"> | ||
− | var | + | var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 300, originY: 300, unitX: 50, unitY: 50}); |
− | + | brd.suspendUpdate(); | |
− | var S = | + | var S = brd.create('slider', [[-5,-6],[5,-6],[0,0.95,1]], {name:'S'}); |
− | var hue = | + | var hue = brd.create('slider', [[-5,-7],[5,-7],[0,8,36]], {name:'color'}); |
var points = new Array(); | var points = new Array(); | ||
− | points[0] = | + | points[0] = brd.create('point',[5, 5], {name:' '}); |
− | points[1] = | + | points[1] = brd.create('point',[-5, 5], {name:' '}); |
− | points[2] = | + | points[2] = brd.create('point',[-5, -5], {name:' '}); |
− | points[3] = | + | points[3] = brd.create('point',[5, -5], {name:' '}); |
− | + | ||
function quadrangle(pt, n) { | function quadrangle(pt, n) { | ||
var col; | var col; | ||
var arr = new Array(); | var arr = new Array(); | ||
for(var i = 0; i < 4; i++) { | for(var i = 0; i < 4; i++) { | ||
− | arr[i] = | + | arr[i] = brd.create('point', |
[function(t) { | [function(t) { | ||
return function () {var x = pt[t].X(); | return function () {var x = pt[t].X(); | ||
Line 36: | Line 36: | ||
} | } | ||
col = function(){return JXG.hsv2rgb(hue.Value()*n,0.7,0.9);}; | col = function(){return JXG.hsv2rgb(hue.Value()*n,0.7,0.9);}; | ||
− | + | brd.create('polygon',pt, {fillColor:col}); | |
if(n>0) | if(n>0) | ||
quadrangle(arr, --n); | quadrangle(arr, --n); | ||
} | } | ||
quadrangle(points,30); | quadrangle(points,30); | ||
− | + | brd.unsuspendUpdate(); | |
</script> | </script> | ||
</html> | </html> | ||
Line 49: | Line 49: | ||
<div id="jxgbox" class="jxgbox" style="width:800px; height:700px;"></div> | <div id="jxgbox" class="jxgbox" style="width:800px; height:700px;"></div> | ||
<script language="JavaScript"> | <script language="JavaScript"> | ||
− | var | + | var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 300, originY: 300, unitX: 50, unitY: 50}); |
− | + | brd.suspendUpdate(); | |
− | var S = | + | var S = brd.create('slider', [[-5,-6],[5,-6],[0,0.95,1]], {name:'S'}); |
− | var hue = | + | var hue = brd.create('slider', [[-5,-7],[5,-7],[0,8,36]], {name:'color'}); |
var points = new Array(); | var points = new Array(); | ||
− | points[0] = | + | points[0] = brd.create('point',[5, 5], {name:' '}); |
− | points[1] = | + | points[1] = brd.create('point',[-5, 5], {name:' '}); |
− | points[2] = | + | points[2] = brd.create('point',[-5, -5], {name:' '}); |
− | points[3] = | + | points[3] = brd.create('point',[5, -5], {name:' '}); |
− | + | ||
function quadrangle(pt, n) { | function quadrangle(pt, n) { | ||
var col; | var col; | ||
var arr = new Array(); | var arr = new Array(); | ||
for(var i = 0; i < 4; i++) { | for(var i = 0; i < 4; i++) { | ||
− | arr[i] = | + | arr[i] = brd.create('point', |
[function(t) { | [function(t) { | ||
return function () {var x = pt[t].X(); | return function () {var x = pt[t].X(); | ||
Line 80: | Line 80: | ||
} | } | ||
col = function(){return JXG.hsv2rgb(hue.Value()*n,0.7,0.9);}; | col = function(){return JXG.hsv2rgb(hue.Value()*n,0.7,0.9);}; | ||
− | + | brd.create('polygon',pt, {fillColor:col}); | |
if(n>0) | if(n>0) | ||
quadrangle(arr, --n); | quadrangle(arr, --n); | ||
} | } | ||
quadrangle(points,30); | quadrangle(points,30); | ||
− | + | brd.unsuspendUpdate(); | |
</script> | </script> | ||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] |
Revision as of 17:43, 12 March 2010
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 brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 300, originY: 300, unitX: 50, unitY: 50});
brd.suspendUpdate();
var S = brd.create('slider', [[-5,-6],[5,-6],[0,0.95,1]], {name:'S'});
var hue = brd.create('slider', [[-5,-7],[5,-7],[0,8,36]], {name:'color'});
var points = new Array();
points[0] = brd.create('point',[5, 5], {name:' '});
points[1] = brd.create('point',[-5, 5], {name:' '});
points[2] = brd.create('point',[-5, -5], {name:' '});
points[3] = brd.create('point',[5, -5], {name:' '});
function quadrangle(pt, n) {
var col;
var arr = new Array();
for(var i = 0; i < 4; i++) {
arr[i] = brd.create('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);};
brd.create('polygon',pt, {fillColor:col});
if(n>0)
quadrangle(arr, --n);
}
quadrangle(points,30);
brd.unsuspendUpdate();
</script>