Applets:Periodendauer periodischer Signale: Difference between revisions

From LNTwww
No edit summary
No edit summary
Line 1: Line 1:
<!DOCTYPE html>
<html>
<html>
<head>
<head>
<style>
    <meta charset="utf-8" />
         .wrapper{
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.6/jsxgraphcore.js"></script>
          display:grid;
    <!-- <script type="text/javascript" src="https://en.lntwww.de/MathJax/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full,local/mwMathJaxConfig"></script> -->
          grid-template-columns: 70% 30%;
    <!-- <script type="text/javascript" src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"></script> -->
          grid-column-gap:1em;
    <style>
         .button {
            background-color: black;
            border: none;
            color: white;
            font-family: arial;
            padding: 8px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            border-radius: 15px;
         }
         }
        .button:active {
            background-color: #939393;
        }
        table {
            border-collapse: separate;
            border-spacing: 20px 0;
        }
    </style>
</head>


         .wrapper >div{
 
           background:#eee;
<body onload="drawNow()">
           padding:1em
<!-- Resetbutton, Checkbox, Regler und Plots -->
<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="pltBoxHtml" class="jxgbox" style="width:600px; height:600px; border:1px solid black; margin:-10px 20px 100px 0px;"></div>
 
<!-- Ausgabefelder -->
<table>
    <tr>
         <td>$x(t)$=    <span id="x(t)"></span>    </td>
        <td>$x(t+ T_0)$=<span id="x(t+T_0)"></span> </td>
        <td>$x(t+2T_0)$=<span id="x(t+2T_0)"></span></td>
    </tr>
    <tr>
        <td>$x_{\text{max}}$=<span id="x_max"></span></td>
        <td>$T_0$=           <span id="T_0"></span>  </td>
    </tr>
</table>
 
 
<script type="text/javascript">
    function drawNow() {
        // Grundeinstellungen der beiden Applets
        JXG.Options.text.useMathJax = true;
        cnfBox = JXG.JSXGraph.initBoard('cnfBoxHtml', {
            showCopyright: false, showNavigation: false, axis: false,
            grid: false, zoom: { enabled: false }, pan: { enabled: false },
            boundingbox: [-1, 2.2, 12.4, -2.2]
        });
        pltBox = JXG.JSXGraph.initBoard('pltBoxHtml', {
            showCopyright: false, axis: false,
            zoom: { factorX: 1.1, factorY: 1.1, wheel: true, needshift: true, eps: 0.1 },
            grid: false, boundingbox: [-0.5, 2.2, 12.4, -2.2]
        });
        cnfBox.addChild(pltBox);
        // Einstellungen der Achsen
        xaxis = pltBox.create('axis', [[0, 0], [1, 0]], {
            name: '$\\dfrac{t}{T}$',
            withLabel: true, label: { position: 'rt', offset: [-25, -10] }
        });
        yaxis = pltBox.create('axis', [[0, 0], [0, 1]], {
            name: '$x(t)$',
            withLabel: true, label: { position: 'rt', offset: [10, -5] }
        });
        // Erstellen der Schieberegler
        a = 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] ], {
            suffixlabel: '$f_1=$',
            unitLabel: 'kHz', snapWidth: 0.1
        }),
        c = 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] ], {
            suffixlabel: '$A_2=$',
            unitLabel: 'V', snapWidth: 0.01
        }),
        e = 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] ], {
            suffixlabel: '$\\phi_2=$',
            unitLabel: 'Grad', snapWidth: 5
        }),
        t = cnfBox.create('slider', [ [-0.7, -1.5], [3, -1.5], [0, 0, 10] ], {
            suffixlabel: '$t=$',
            unitLabel: 's', snapWidth: 0.2
        }),
        // 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))
        }], {
            strokeColor: "red"
        });
        // Definition des Punktes p_T0, des Hilfspunktes p_T0h und der Geraden l_T0 für Periodendauer T_0
        p_T0 = pltBox.create('point', [
            function() {
                return (Math.round(getT0() * 100) / 100);
            },
            function() {
                return a.Value() * Math.cos(2 * Math.PI * b.Value() * (Math.round(getT0() * 100) / 100) - 2 * Math.PI * c.Value() / 360) +
                    d.Value() * Math.cos(2 * Math.PI * e.Value() * (Math.round(getT0() * 100) / 100) - 2 * Math.PI * g.Value() / 360);
            }],
            { color: "blue", fixed: true, label: false, size: 1, name: '' }
        );
        p_T0h = pltBox.create('point',
            [function() { return (Math.round(getT0() * 100) / 100); }, 2],
            { visible: false, color: "blue", fixed: true, label: false, size: 1, name: '' }
        );
        l_T0 = pltBox.create('line', [p_T0, p_T0h])
        // Bestimmung des Wertes T_0 mit der Funktion von Siebenwirth
        setInterval(function() {
            document.getElementById("T_0").innerHTML = Math.round(getT0() * 100) / 100;
           }, 50);
        function isInt(n) {
            return n % 1 === 0;
         }
         }
         .wrapper >div:nth-child(odd){
         function getT0() {
          background:#add;
            var A, B, C, Q;
            if (b.Value() < e.Value()) {
                A = b.Value();
                B = e.Value();
            } else {
                B = b.Value();
                A = e.Value();
            }
            // console.log('Berechne T0 mit A=' + A, 'B=' + B);
            for (var x = 1; x <= 100; x++) {
                C = A / x;
                Q = B / C;
                // console.log(x + '. Durchgang: C = ' + C, 'Q = ' + Q);
                if (isInt(Q)) {
                    // console.log('Q ist eine Ganzzahl!!! T0 ist damit ', 1 / C);
                    return 1 / C;
                }
                if (x === 10) {
                    return 10;
                }
                if ((1 / C) > 10)
                    return 10
            }
         }
         }
 
        // Ausgabe des Wertes x(t)
</style>
        setInterval(function() {
</head>
            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() /
<body>
                360)) * 1000) / 1000;
<div class="wrapper">
        }, 50);
<div>
        // Ausgabe des Wertes x(t+T_0)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
        setInterval(function() {
</div>
            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() +
<div>
                Math.round(getT0() * 1000) / 1000) - g.Value())) * 1000) / 1000;
afjldfakdf
        }, 50);
</div>
        // Ausgabe des Wertes x(t+2T_0)
</div>
        setInterval(function() {
<body>
            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() +
                2 * Math.round(getT0() * 1000) / 1000) - g.Value())) * 1000) / 1000;
        }, 50);
        // Ausgabe des Wertes x_max
        setInterval(function() {
            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;
            }
            document.getElementById("x_max").innerHTML = Math.max.apply(Math, x);
        }, 50);
    };
    // Definition der Funktion zum An- und Ausschalten des Koordinatengitters
    function showgrid() {
        if (gridbox.checked) {
            xaxis = pltBox.create('axis', [ [0, 0], [1, 0] ], {});
            yaxis = pltBox.create('axis', [ [0, 0], [0, 1] ], {});
        } else {
            xaxis.removeTicks(xaxis.defaultTicks);
            yaxis.removeTicks(yaxis.defaultTicks);
        }
        pltBox.fullUpdate();
    };
</script>
</body>
</html>
</html>


{{Display}}
{{Display}}

Revision as of 17:35, 18 September 2017

$x(t)$= $x(t+ T_0)$= $x(t+2T_0)$=
$x_{\text{max}}$= $T_0$=