Difference between revisions of "Applets:Periodendauer periodischer Signale"

Revision as of 16:38, 18 September 2017

Funktion: $$x(t) = A_1\cdot cos\Big(2\pi f_1\cdot t- \frac{2\pi}{360}\cdot \phi_1\Big)+A_2\cdot cos\Big(2\pi f_2\cdot t- \frac{2\pi}{360}\cdot \phi_2\Big)$$

Gitterlinien Zeigen

$x(t)$= $\quad$

$x(t+ T_0)$= $\quad$

$x(t+2T_0)$= $\quad$

$x_{\text{max}}$= $\quad$

$T_0$= $\quad$

@@ Line 1: / Line 1: @@
+<p>
+{{BlaueBox|TEXT=
+<B style="font-size:18px">Funktion:</B>
+$$x(t) = A_1\cdot cos\Big(2\pi f_1\cdot t- \frac{2\pi}{360}\cdot \phi_1\Big)+A_2\cdot cos\Big(2\pi f_2\cdot t- \frac{2\pi}{360}\cdot \phi_2\Big)$$
+}}
+</p>
 <html>
 <head>
@@ Line 5: / Line 12: @@
      <!-- <script type="text/javascript" src="https://en.lntwww.de/MathJax/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full,local/mwMathJaxConfig"></script> -->
      <!-- <script type="text/javascript" src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"></script> -->
-    <style>
+<style>
          .button {
              background-color: black;
@@ Line 21: / Line 28: @@
              background-color: #939393;
          }
-        table {
+   </style>
-            border-collapse: separate;
-            border-spacing: 20px 0;
-        }
-    </style>
 </head>
 <body onload="drawNow()">
-<!-- Resetbutton, Checkbox, Regler und Plots -->
+<!-- Resetbutton, Checkbox und Formel -->
 <p>
      <input type="checkbox" id="gridbox" onclick="showgrid();" checked> <label for="gridbox">Gitterlinien Zeigen</label>
      <button class="button" onclick="drawNow();">Reset</button>
 </p>
-<div id="cnfBoxHtml" class="jxgbox" style="width:600px; height:100px; float:top; margin:-10px 20px 100px 0px;"></div>
+<div id="cnfBoxHtml" class="jxgbox" style="width:600px; height:150px;  float:top; margin:-10px 20px 100px 0px;"></div>
-<div id="pltBoxHtml" class="jxgbox" style="width:600px; height:600px; border:1px solid black; margin:-10px 20px 100px 0px;"></div>
+<div id="pltBoxHtml" class="jxgbox" style="width:600px; height:600px; border:1px solid black; margin:-100px 20px 10px 0px;"></div>
 <!-- Ausgabefelder -->
 <table>
      <tr>
-         <td>$x(t)$=     <span id="x(t)"></span>     </td>
+         <td>$x(t)$= <span id="x(t)"></span>  $\quad$ </td>
-         <td>$x(t+ T_0)$=<span id="x(t+T_0)"></span> </td>
+         <td>$x(t+ T_0)$= <span id="x(t+T_0)"></span>  $\quad$ </td>
-         <td>$x(t+2T_0)$=<span id="x(t+2T_0)"></span></td>
+         <td>$x(t+2T_0)$= <span id="x(t+2T_0)"></span>  $\quad$ </td>
-    </tr>
+         <td>$x_{\text{max}}$= <span id="x_max"></span>  $\quad$ </td>
-    <tr>
+         <td style="color:blue;">$T_0$= <span id="T_0"></span>  $\quad$ </td>
-         <td>$x_{\text{max}}$=<span id="x_max"></span></td>
-         <td>$T_0$=           <span id="T_0"></span>  </td>
      </tr>
 </table>
@@ Line 54: / Line 54: @@
 <script type="text/javascript">
-    function drawNow() {
+ function drawNow() {
          // Grundeinstellungen der beiden Applets
          JXG.Options.text.useMathJax = true;
@@ Line 78: / Line 78: @@
          });
          // Erstellen der Schieberegler
-         a = cnfBox.create('slider', [ [-0.7, 1.5], [3, 1.5], [0, 0.5, 1] ], {
+         sldA1 = cnfBox.create('slider', [ [-0.7, 1.5], [3, 1.5], [0, 0.5, 1] ], {
              suffixlabel: '$A_1=$',
              unitLabel: 'V', snapWidth: 0.01
              }),
-         b = cnfBox.create('slider', [ [-0.7, 0.5], [3, 0.5], [0, 1, 10] ], {
+         sldF1 = cnfBox.create('slider', [ [-0.7, 0.5], [3, 0.5], [0, 1, 10] ], {
              suffixlabel: '$f_1=$',
              unitLabel: 'kHz', snapWidth: 0.1
          }),
-         c = cnfBox.create('slider', [ [-0.7, -0.5], [3, -0.5], [-180, 0, 180] ], {
+         sldPHI1 = cnfBox.create('slider', [ [-0.7, -0.5], [3, -0.5], [-180, 0, 180] ], {
              suffixlabel: '$\\phi_1=$',
              unitLabel: 'Grad', snapWidth: 5
          }),
-         d = cnfBox.create('slider', [ [6, 1.5], [9.7, 1.5], [0, 0.5, 1] ], {
+         sldA2 = cnfBox.create('slider', [ [6, 1.5], [9.7, 1.5], [0, 0.5, 1] ], {
              suffixlabel: '$A_2=$',
              unitLabel: 'V', snapWidth: 0.01
          }),
-         e = cnfBox.create('slider', [ [6, 0.5], [9.7, 0.5], [0, 2, 10] ], {
+         sldF2 = cnfBox.create('slider', [ [6, 0.5], [9.7, 0.5], [0, 2, 10] ], {
              suffixlabel: '$f_2=$',
              unitLabel: 'kHz', snapWidth: 0.1
          }),
-         g = cnfBox.create('slider', [ [6, -0.5], [9.7, -0.5], [-180, 90, 180] ], {
+         sldPHI2 = cnfBox.create('slider', [ [6, -0.5], [9.7, -0.5], [-180, 90, 180] ], {
              suffixlabel: '$\\phi_2=$',
              unitLabel: 'Grad', snapWidth: 5
          }),
-         t = cnfBox.create('slider', [ [-0.7, -1.5], [3, -1.5], [0, 0, 10] ], {
+         sldT = cnfBox.create('slider', [ [-0.7, -1.5], [3, -1.5], [0, 0, 10] ], {
              suffixlabel: '$t=$',
              unitLabel: 's', snapWidth: 0.2
@@ Line 108: / Line 108: @@
          // Definition der Funktion
          signaldarstellung = pltBox.create('functiongraph', [function(x) {
-             return (a.Value() * Math.cos(2 * Math.PI * b.Value() * x - 2 * Math.PI * c.Value() / 360) + d.Value() * Math.cos(2 * Math.PI * e.Value() * x - 2 * Math.PI * g.Value() / 360))
+             return (sldA1.Value() * Math.cos(2 * Math.PI * sldF1.Value() * x - 2 * Math.PI * sldPHI1.Value() / 360) + sldA2.Value() * Math.cos(2 * Math.PI * sldF2.Value() * x - 2 * Math.PI * sldPHI2.Value() / 360))
          }], {
              strokeColor: "red"
@@ Line 118: / Line 118: @@
              },
              function() {
-                 return a.Value() * Math.cos(2 * Math.PI * b.Value() * (Math.round(getT0() * 100) / 100) - 2 * Math.PI * c.Value() / 360) +
+                 return sldA1.Value() * Math.cos(2 * Math.PI * sldF1.Value() * (Math.round(getT0() * 100) / 100) - 2 * Math.PI * sldPHI1.Value() / 360) +
-                     d.Value() * Math.cos(2 * Math.PI * e.Value() * (Math.round(getT0() * 100) / 100) - 2 * Math.PI * g.Value() / 360);
+                     sldA2.Value() * Math.cos(2 * Math.PI * sldF2.Value() * (Math.round(getT0() * 100) / 100) - 2 * Math.PI * sldPHI2.Value() / 360);
              }],
              { color: "blue", fixed: true, label: false, size: 1, name: '' }
@@ Line 137: / Line 137: @@
          function getT0() {
              var A, B, C, Q;
-             if (b.Value() < e.Value()) {
+             if (sldF1.Value() < sldF2.Value()) {
-                 A = b.Value();
+                 A = sldF1.Value();
-                 B = e.Value();
+                 B = sldF2.Value();
              } else {
-                 B = b.Value();
+                 B = sldF1.Value();
-                 A = e.Value();
+                 A = sldF2.Value();
              }
              // console.log('Berechne T0 mit A=' + A, 'B=' + B);
@@ Line 162: / Line 162: @@
          // Ausgabe des Wertes x(t)
          setInterval(function() {
-             document.getElementById("x(t)").innerHTML = Math.round((a.Value() * Math.cos(2 * Math.PI * b.Value() * t.Value() - 2 * Math.PI * c.Value() / 360) + d.Value() * Math.cos(2 * Math.PI * e.Value() * t.Value() - 2 * Math.PI * g.Value() /
+             document.getElementById("x(t)").innerHTML = Math.round((sldA1.Value() * Math.cos(2 * Math.PI * sldF1.Value() * sldT.Value() - 2 * Math.PI * sldPHI1.Value() / 360) + sldA2.Value() * Math.cos(2 * Math.PI * sldF2.Value() * sldT.Value() - 2 * Math.PI * sldPHI2.Value() /
 )) * 1000) / 1000;
          }, 50);
          // Ausgabe des Wertes x(t+T_0)
          setInterval(function() {
-             document.getElementById("x(t+T_0)").innerHTML = Math.round((a.Value() * Math.cos(2 * Math.PI * b.Value() * (t.Value() + Math.round(getT0() * 1000) / 1000) - c.Value()) + d.Value() * Math.cos(2 * Math.PI * e.Value() * (t.Value() +
+             document.getElementById("x(t+T_0)").innerHTML = Math.round((sldA1.Value() * Math.cos(2 * Math.PI * sldF1.Value() * (sldT.Value() + Math.round(getT0() * 1000) / 1000) - sldPHI1.Value()) + sldA2.Value() * Math.cos(2 * Math.PI * sldF2.Value() * (sldT.Value() +
-                 Math.round(getT0() * 1000) / 1000) - g.Value())) * 1000) / 1000;
+                 Math.round(getT0() * 1000) / 1000) - sldPHI2.Value())) * 1000) / 1000;
          }, 50);
          // Ausgabe des Wertes x(t+2T_0)
          setInterval(function() {
-             document.getElementById("x(t+2T_0)").innerHTML = Math.round((a.Value() * Math.cos(2 * Math.PI * b.Value() * (t.Value() + 2 * Math.round(getT0() * 1000) / 1000) - c.Value()) + d.Value() * Math.cos(2 * Math.PI * e.Value() * (t.Value() +
+             document.getElementById("x(t+2T_0)").innerHTML = Math.round((sldA1.Value() * Math.cos(2 * Math.PI * sldF1.Value() * (sldT.Value() + 2 * Math.round(getT0() * 1000) / 1000) - sldPHI1.Value()) + sldA2.Value() * Math.cos(2 * Math.PI * sldF2.Value() * (sldT.Value() +
-* Math.round(getT0() * 1000) / 1000) - g.Value())) * 1000) / 1000;
+* Math.round(getT0() * 1000) / 1000) - sldPHI2.Value())) * 1000) / 1000;
          }, 50);
          // Ausgabe des Wertes x_max
@@ Line 179: / Line 179: @@
              var x = new Array(50000);
              for (var i = 0; i < 50001; i++) {
-                 x[i] = Math.round((a.Value() * Math.cos(2 * Math.PI * b.Value() * (i / 1000) - 2 * Math.PI * c.Value() / 360) + d.Value() * Math.cos(2 * Math.PI * e.Value() * (i / 1000) - 2 * Math.PI * g.Value() / 360)) * 1000) / 1000;
+                 x[i] = Math.round((sldA1.Value() * Math.cos(2 * Math.PI * sldF1.Value() * (i / 1000) - 2 * Math.PI * sldPHI1.Value() / 360) + sldA2.Value() * Math.cos(2 * Math.PI * sldF2.Value() * (i / 1000) - 2 * Math.PI * sldPHI2.Value() / 360)) * 1000) / 1000;
              }
              document.getElementById("x_max").innerHTML = Math.max.apply(Math, x);