50ohm-contents-dl/contents/html/applet_interferenz.html

<html>
<script src="https://www.50ohm.de/assets/jquery/3.7.1/jquery.min.js"></script>
<script src="https://www.50ohm.de/assets/chartjs/4.4.1/chart.min.js"></script>
<table>
    <tr>
        <td>
            <p>Fas:</p>
        </td>
        <td>
            <input type="range" class="slider" value="90" min="0" max="360" id="phase">
        </td>
        <td>
            <div id="phaseV"> 90 &deg; </div>
        </td>
    </tr>
</table>
<canvas id="INTERFERENZ" style="width:100%; height:200px;"></canvas>

<canvas id="SUM" style="width:100%; height:200px;"></canvas>
<br>

<script>
    var amplitude = 100;
    var phase = 90;

    interferenz = new Chart("INTERFERENZ", {
        type: "line",
        data: {
            labels: [],
            datasets: [
                {
                    label: "Signal",
                    fill: false,
                    pointRadius: 0,
                    borderColor: "#00AEDF",
                    data: [],
                },
                {
                    label: "Överlagrad signal",
                    fill: false,
                    pointRadius: 0,
                    borderColor: "#40C08C",
                    data: []
                },
            ]
        },
        options: {
            responsive: true,
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Tid'
                    },
                    ticks: {
                        callback: function (val, index) {
                            return "";
                        },
                    }
                },
                y: {
                    min: -100,
                    max: 100,
                    ticks: {
                        callback: function (value, index, ticks) {
                            return value + "%";
                        }
                    }
                },
            },
        }
    });

    sum = new Chart("SUM", {
        type: "line",
        data: {
            labels: [],
            datasets: [
                {
                    label: "Summerad signal",
                    fill: false,
                    pointRadius: 0,
                    borderColor: "#ED7D71",
                    data: []
                },
            ]
        },
        options: {
            scales: {
                y: {
                    min: -200,
                    max: 200,
                    ticks: {
                        callback: function (value, index, ticks) {
                            return value + "%";
                        }
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Tid'
                    },
                    ticks: {
                        callback: function (val, index) {
                            return "";
                        },
                    }
                },
            },
        }
    });


    generateValues(-1 * Math.PI, 4 * Math.PI, Math.PI / 16);

    $("#amplitude").on("change", function () {
        amplitude = $(this).val();
        generateValues(-1 * Math.PI, 4 * Math.PI, Math.PI / 16);
    });

    $("#phase").on("change", function () {
        phase = $(this).val();
        generateValues(-1 * Math.PI, 4 * Math.PI, Math.PI / 16);
    });

    function generateValues(i1, i2, step = 1) {
        // Återställ alla värden:
        interferenz.data.datasets[0].data = []; // nyttosignal
        interferenz.data.datasets[1].data = []; // fadad signal
        sum.data.datasets[0].data = [];
        sum.data.labels = [];
        interferenz.data.labels = [];

        // Generera nya data:
        for (let x = i1; x <= i2; x += step) {
            // nyttosignal:
            interferenz.data.datasets[0].data.push(100 * Math.sin(x));
            interferenz.data.labels.push(x);
            // fadad signal:
            interferenz.data.datasets[1].data.push(amplitude * Math.sin(x + (phase / 360) * 2 * Math.PI));
            // Sätt summa:
            sum.data.datasets[0].data.push(100 * Math.sin(x) + amplitude * Math.sin(x + (phase / 360) * 2 * Math.PI))
            sum.data.labels.push(x);
        }

        // Uppdatera diagram
        interferenz.update();
        sum.update();

        // Sätt text:
        $('#phaseV').html(phase + "&deg;");

    }
</script>

</html>