File: bezier.html

package info (click to toggle)
jsxgraph 1.11.1%2Bdfsg1-1
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid
  • size: 24,984 kB
  • sloc: javascript: 81,688; xml: 5,869; java: 1,072; php: 281; makefile: 189; python: 174; cpp: 76; sh: 12
file content (70 lines) | stat: -rw-r--r-- 2,829 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
<html>
<head>
   <title>JSXGraph example</title>
   <link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
   <script type="text/javascript" src="../distrib/jsxgraphcore.js"></script>
</head>
<body>
  <h2>Bezier curves</h2>

  <span onClick="document.getElementById('jxgbox_navigationbar').style.display='none'">Hide navigation bar</span><br>
  <span onClick="document.getElementById('jxgbox_navigationbar').style.display='block'">Show navigation bar</span>
  <div id="jxgbox" class="jxgbox" style="width:600px; height:600px;"></div>
  <div id="debug" style="display:block;"></div>
   <script type="text/javascript">
    /* <![CDATA[ */

        var board, i, p, col, nseq;
        board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-4,4,4,-4], keepaspectratio:true, axis:true});

        nseq = 2;
        p = [];
        for (i=0;i<nseq*3+1;i++) {
            if (i%3==0) {
                col = 'red';
            } else {
                col = 'blue';
            }
            p.push(board.createElement('point',[Math.random()*8-4,Math.random()*8-4],{strokeColor:col,fillColor:col}));
            p[i].isDraggable = true;
        }
/*
        bezier = [function(t) {
                        var len =  Math.floor(p.length/3),
                            z = Math.floor(t)*3,
                            t0 = t % 1,
                            t1 = 1-t0;

                        if (t<0) { return p[0].X(); }
                        if (t>=len) { return p[p.length-1].X(); }
                        if (isNaN(t)) { return NaN; }
                        return t1*t1*(t1*p[z].X()+3*t0*p[z+1].X())+(3*t1*p[z+2].X()+t0*p[z+3].X())*t0*t0;
                    },
                  function(t) {
                        var len =  Math.floor(p.length/3),
                            z = Math.floor(t)*3,
                            t0 = t % 1,
                            t1 = 1-t0;

                        if (t<0) { return p[0].Z(); }
                        if (t>=len) { return p[p.length-1].Y(); }
                        if (isNaN(t)) { return NaN; }
                        return t1*t1*(t1*p[z].Y()+3*t0*p[z+1].Y())+(3*t1*p[z+2].Y()+t0*p[z+3].Y())*t0*t0;
                    }, 0, function() {return Math.floor(p.length/3);}];
*/
        var c = board.createElement('curve', JXG.Math.Numerics.bezier(p),{strokeColor:'blue', name:"curve", strokeWidth:5, lastArrow:true});
/*
        for (i=0;i<2*3;i++) {
            if (i%3==2) {
                col = 'yellow';
            } else {
                col = 'black';
            }
            p.push(board.createElement('point',[Math.random()*8-4,Math.random()*8-4],{strokeColor:col,fillColor:col}));
            board.update();
        }
*/
  /* ]]> */
  </script>
</body>
</html>