File: sincos_and_thales.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 (149 lines) | stat: -rw-r--r-- 6,671 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<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>Sinus und Cosinus am Einheitskreis</h1>
      <!-- Die beiden Zeichenflaechen, schoen nebeneinander angeordnet in einer Tabelle -->
      <table border="0">
        <tr><td>
            <div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
        </td><td>
            <div id="box2" class="jxgbox" style="width:500px; height:500px;"></div>
        </td></tr>
      </table>
      Die Kurven im rechten Board kann man sich auch &uuml;ber eine <a href="javascript:void(0);" onclick="animate(b1p1, -10, 41);">Animation</a>
      des Gliders A im linken Bild erstellen lassen. Ganz neu: <strong>Hooks</strong>.
      
      <!-- Die Tabelle mit den Werten -->
      
      <table style="border: 0px solid black; text-align: center" width="500px">
 	    <tr><th style="border: 1px solid black" width="100px">Winkel (in rad)</th><th style="border: 1px solid black" width="100px">Winkel (k*pi)</th><th style="border: 1px solid black" width="100px">Winkel (in Grad)</th><th style="border: 1px solid black" width="100px">S.Y()</th><th style="border: 1px solid black" width="100px">C.Y()</th></tr>
 	    <tr><td id="print_rad">1</td><td id="print_kpi">2,5</td><td id="print_grad">2</td><td id="print_sin">3</td><td id="print_cos">4</td></tr>
      </table>

      <script type="text/javascript">
        /* <![CDATA[ */

        // board links oben initialisieren
        board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 150, unitY: 150});
        
		// Einheitskreis
        b1c1 = board.create('circle', [[0,0],[1,0]]);
        // Gleiter auf dem Einheitskreis, startet in [1, 0]
        b1p1 = board.create('point', [2, 0], {slideObject: b1c1});

		// Achsen erzeugen
        b1axisx = board.create('axis', [[0,0], [0,1]], {});
        b1axisy = board.create('axis', [[0,0], [1,0]], {});
		
		// Sekrechten vom Gleiter auf die Achsen zeichnen
		perp = board.create('perpendicularsegment', [b1axisx,b1p1]); //,{strokeColor:['#ff0000',null],visible:[true,false]});
//		perp = board.create('perpendicular', ['X-Achse',b1p1], [{strokeColor: '#ff0000', visible: true}, {visible: false}]);
		perp2 = board.create('perpendicularsegment',[b1axisy,b1p1]); //,{strokeColor:['#0000ff',null],visible:[true,false]});
        
        // das zweite board oben rechts initialisieren, Y-Achse ist skaliert
        board2 = JXG.JSXGraph.initBoard('box2', {originX: 100, originY: 250, unitX: 50, unitY: 150, axis:true});
        
        // Punkt der sinus zeichnet
        b2p1 = board2.create('point', [
                       function(){ return JXG.Math.Geometry.rad([1,0], [0,0], b1p1); }, 
                       function() { return b1p1.Y() }], 
                       {fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});
        
        // Punkt, der cosinus zeichnet
        b2p2 = board2.create('point', [
                        function(){ return JXG.Math.Geometry.rad([1,0], [0,0], b1p1); }, 
                        function() { return b1p1.X() }], 
                        {fixed: true, trace: true, strokeColor: '#0000ff', name: 'C'});
        
		// Die Abhaengigkeiten speichern. Mittlerweile nur noch wichtig, falls b1p1 geloescht werden sollte.
        board.addChild(board2);

        // Deklarationen fuer die Animation 
        var animated = false;
        function animate(point, direction, count) {
            if(animated) {
                point.stopAnimation();
                animated = false;
            } else {
                point.startAnimation(direction, count);
                animated = true;
            }
        }
        
        // Hook-Funktion definieren
        function print_table() {
			var rad = JXG.Math.Geometry.rad([1,0], [0,0], b1p1);
        	$('print_rad').innerHTML = Math.round(rad,2);
        	$('print_kpi').innerHTML = Math.round(rad*Math.PI,2) + ' * pi';
        	$('print_grad').innerHTML = Math.round(rad/Math.PI*180,2);
        }
        
        // und beim board registrieren.
        print_table_id = board.addHook(print_table,'update');
        /* ]]> */
      </script>

<h1>Thaleskreis</h1>
      <table border="0" width="800px" cols="300px,500px">
        <tr><td>
          Der Winkel zwischen B, C und A betr&auml;gt <span id="print_angle">...</span> Rad. Dies entspricht <span id="print_angle_grad">...</span> Grad.
          <br>
        Der Winkel zwischen A, B und C betr&auml;gt <span id="print_angle_2">...</span> Grad.
        </td><td>
          <div id="box3" class="jxgbox" style="width:500px; height:500px;"></div>
        </td></tr>
      </table>
    <script type="text/javascript">
        /* <![CDATA[ */

        // Das Objekt geonext ist global und wird in Geonext.js initialisiert
        // board links oben initialisieren
        board3 = JXG.JSXGraph.initBoard('box3', {originX: 250, originY: 250, unitX: 50, unitY: 50});
        
        // Durchmesserpunkte
		// Kreis
		b3p1 = board3.create('point', [4, 0], {fixed: true});
		b3p2 = board3.create('point', [-4, 0], {fixed: true});
        b3c1 = board3.create('circle', [[0,0], b3p1]);
        
        // Gleiter auf dem Kreis, startet in [1, 0]
        b3s1 = board3.create('point', [1, 1], {slideObject: b3c1});
        
        // Die beiden Schenkel des Dreiecks
        b3l1 = board3.create('line', [b3p1, b3s1], {straightFirst: false, straightLast: false});
        b3l2 = board3.create('line', [b3p2, b3s1], {straightFirst: false, straightLast: false});

		// Achsen erzeugen
        b3axisx = board3.create('axis', [[0,0], [0,1]], {});
        b3axisy = board3.create('axis', [[0,0], [1,0]], {});
                
   		// Hook anlegen fuer die Ausgabe des Winkels
   		function test() {
   			var rad;
   			
   			// Je nachdem ob der Glider ober- oder unterhalb der X-Achse liegt, muss die Winkelreihenfolge getauscht werden.
   			if(b3s1.Y() < 0)
   				rad = JXG.Math.Geometry.rad(b3p1, b3s1, b3p2);
   			else
   				rad = JXG.Math.Geometry.rad(b3p2, b3s1, b3p1);
   				
        	$('print_angle').innerHTML = Math.round(rad,2);
        	$('print_angle_grad').innerHTML = Math.round(rad/(2*Math.PI)*360,2);
		}

        hook_id = board3.addHook(test);

        board3.addHook(function() {
                $('print_angle_2').innerHTML =  Math.round(JXG.Math.Geometry.rad(b3p1, b3p2, b3s1)/Math.PI*180,2);
            });

        /* ]]> */   
    </script>
</body>
</html>