File: sierpinski.html

package info (click to toggle)
jsxgraph 1.3.5+dfsg1-2
  • links: PTS, VCS
  • area: main
  • in suites: buster
  • size: 26,044 kB
  • sloc: xml: 5,869; java: 1,072; python: 747; php: 192; makefile: 146; sh: 47
file content (79 lines) | stat: -rw-r--r-- 3,186 bytes parent folder | download | duplicates (3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<html>
<head>
   <title>JSXGraph example</title>
   <link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
   <script type="text/javascript" src="/javascript/prototype/prototype.js"></script>
   <script type="text/javascript" src="../src/loadjsxgraph.js"></script>
</head>
<body>
<h1>Sierpinski triangle</h1>
<div style="width:550px">
    <div id="box" class="jxgbox" style="width:400px; height:400px; float:left;"></div>
    <p style="float:right">
        <input type='button' value="Next iteration" onClick="run();"><div id="debug" style="display:block;"></div>
    </p>
</div>
      <script type="text/javascript">
        /* <![CDATA[ */

        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();
        /* ]]> */
      </script>
</body>
</html>