Sierpinski triangle: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 4: | Line 4: | ||
<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> | ||
<form><input type='button' value="Next iteration" onClick="run();"></form> | <form><input type='button' value="Next iteration" onClick="run();"></form> | ||
<div id="box" class="jxgbox" style="width: | <div id="box" class="jxgbox" style="width:500px; height:400px;"></div> | ||
<script language="JavaScript"> | <script language="JavaScript"> | ||
board = JXG.JSXGraph.initBoard('box', {originX: 10, originY: 390, unitX: 380, unitY: 380}); | board = JXG.JSXGraph.initBoard('box', {originX: 10, originY: 390, unitX: 380, unitY: 380}); | ||
Line 67: | Line 67: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
board = JXG.JSXGraph.initBoard('box', {originX: 10, originY: 390, unitX: 380, unitY: 380}); | |||
var level = 0; | |||
function run() { | |||
JXG.JSXGraph.freeBoard(board); | |||
board = JXG.JSXGraph.initBoard('box', {originX: 10, originY: 390, unitX: 380, unitY: 380}); | |||
level++; | |||
board.suspendUpdate(); | |||
paint(); | |||
board.unsuspendUpdate(); | |||
} | |||
function paint() { | |||
// Initial triangle | |||
var xCoords = [0, 1, 0.5]; | |||
var yCoords = [0, 0, 1]; | |||
drawPolygon(xCoords, yCoords, level); | |||
drawTriangle({x:0,y:0}, {x:1,y:0}, {x:0.5,y:1}, level); | |||
} | |||
function drawPolygon(xCoords, yCoords,level) { | |||
p1 = board.createElement('point', [xCoords[0], yCoords[0]], {visible:false,name:''}); | |||
p2 = board.createElement('point', [xCoords[1], yCoords[1]], {visible:false,name:''}); | |||
p3 = board.createElement('point', [xCoords[2], yCoords[2]], {visible:false,name:''}); | |||
var colors=['#000000','#665566','#994499','#BB33BB','#EE99FF','#FFCCFF']; | |||
l1 = board.createElement('line',[p1,p2],{straightFirst:false,straightLast:false,strokeColor:colors[level%6],name:''}); | |||
l2 = board.createElement('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:colors[level%6],name:''}); | |||
l3 = board.createElement('line',[p3,p1],{straightFirst:false,straightLast:false,strokeColor:colors[level%6],name:''}); | |||
} | |||
function drawTriangle(a, b, c, level) { | |||
if (level==0) return; | |||
level -= 1; | |||
// In das übergebene Dreieck, wird ein auf dem Kopf stehendes Dreieck eingefügt | |||
var xCoords = [c.x, (c.x+b.x)/2, (a.x+c.x)/2]; | |||
var yCoords = [b.y, (c.y+a.y)/2, (c.y+a.y)/2]; | |||
drawPolygon(xCoords, yCoords,level); | |||
// 3 neue Dreiecke bestimmen | |||
a1 = a; | |||
b1 = {x:c.x, y:b.y}; | |||
c1 = {x:(a.x+c.x)/2, y:(c.y+a.y)/2}; | |||
drawTriangle(a1, b1, c1, level); | |||
a2 = {x:c.x, y:b.y}; | |||
b2 = b; | |||
c2 = {x:(c.x+b.x)/2, y:(c.y+a.y)/2}; | |||
drawTriangle(a2, b2, c2, level); | |||
a3 = {x:(a.x+c.x)/2, y:(c.y+a.y)/2}; | |||
b3 = {x:(c.x+b.x)/2, y:(c.y+a.y)/2}; | |||
c3 = c; | |||
drawTriangle(a3, b3, c3, level); | |||
} | |||
paint(); | |||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] |
Revision as of 16:52, 3 December 2008
board = JXG.JSXGraph.initBoard('box', {originX: 10, originY: 390, unitX: 380, unitY: 380});
var level = 0;
function run() {
JXG.JSXGraph.freeBoard(board);
board = JXG.JSXGraph.initBoard('box', {originX: 10, originY: 390, unitX: 380, unitY: 380});
level++;
board.suspendUpdate();
paint();
board.unsuspendUpdate();
}
function paint() {
// Initial triangle
var xCoords = [0, 1, 0.5];
var yCoords = [0, 0, 1];
drawPolygon(xCoords, yCoords, level);
drawTriangle({x:0,y:0}, {x:1,y:0}, {x:0.5,y:1}, level);
}
function drawPolygon(xCoords, yCoords,level) {
p1 = board.createElement('point', [xCoords[0], yCoords[0]], {visible:false,name:''});
p2 = board.createElement('point', [xCoords[1], yCoords[1]], {visible:false,name:''});
p3 = board.createElement('point', [xCoords[2], yCoords[2]], {visible:false,name:''});
var colors=['#000000','#665566','#994499','#BB33BB','#EE99FF','#FFCCFF'];
l1 = board.createElement('line',[p1,p2],{straightFirst:false,straightLast:false,strokeColor:colors[level%6],name:''});
l2 = board.createElement('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:colors[level%6],name:''});
l3 = board.createElement('line',[p3,p1],{straightFirst:false,straightLast:false,strokeColor:colors[level%6],name:''});
}
function drawTriangle(a, b, c, level) {
if (level==0) return;
level -= 1;
// In das übergebene Dreieck, wird ein auf dem Kopf stehendes Dreieck eingefügt
var xCoords = [c.x, (c.x+b.x)/2, (a.x+c.x)/2];
var yCoords = [b.y, (c.y+a.y)/2, (c.y+a.y)/2];
drawPolygon(xCoords, yCoords,level);
// 3 neue Dreiecke bestimmen
a1 = a;
b1 = {x:c.x, y:b.y};
c1 = {x:(a.x+c.x)/2, y:(c.y+a.y)/2};
drawTriangle(a1, b1, c1, level);
a2 = {x:c.x, y:b.y};
b2 = b;
c2 = {x:(c.x+b.x)/2, y:(c.y+a.y)/2};
drawTriangle(a2, b2, c2, level);
a3 = {x:(a.x+c.x)/2, y:(c.y+a.y)/2};
b3 = {x:(c.x+b.x)/2, y:(c.y+a.y)/2};
c3 = c;
drawTriangle(a3, b3, c3, level);
}
paint();