<script src="/lernen/jquery/3.7.1/jquery.min.js"></script>
<script src="/lernen/chartjs/4.4.1/chart.min.js"></script>
<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: "Überlagerung",
fill: false,
pointRadius: 0,
borderColor: "#40C08C",
data: []
},
]
},
options: {
responsive: true,
scales: {
x: {
title: {
display: true,
text: 'Zeit'
},
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: "Summiertes 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: 'Zeit'
},
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) {
// Reset all values:
interferenz.data.datasets[0].data = []; // Nutzsignal
interferenz.data.datasets[1].data = []; // Gefadetes Signal
sum.data.datasets[0].data = [];
sum.data.labels = [];
interferenz.data.labels = [];
// Generate new Data:
for (let x = i1; x <= i2; x += step) {
// Nutzsignal:
interferenz.data.datasets[0].data.push(100 * Math.sin(x));
interferenz.data.labels.push(x);
// Gefadetes Signal:
interferenz.data.datasets[1].data.push(amplitude * Math.sin(x + (phase / 360) * 2 * Math.PI));
// Set Sum:
sum.data.datasets[0].data.push(100 * Math.sin(x) + amplitude * Math.sin(x + (phase / 360) * 2 * Math.PI))
sum.data.labels.push(x);
}
// Update Graphs
interferenz.update();
sum.update();
// Set Text:
$('#phaseV').html(phase + "°");
}
</script>