Difference between revisions of "Sierpinski triangle"

From JSXGraph Wiki
Jump to navigationJump to search
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:400px; height:400px;"></div>
+
<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 18: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();