Editor_HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Funzione v(t) a tratti - Grafici di v, a, s</title>
  
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body {
      max-width: 800px;
      margin: 20px auto;
      font-family: sans-serif;
    }
    canvas {
      max-width: 800px;
      width: 100%;
      margin-bottom: 30px;
    }
  </style>
</head>
<body>
<h1>Grafici di s(t),v(t) e a(t) </h1>
<p>

La costante di integrazione per la posizione \(s(t)\) è assunta pari a 2, ossia \(s(0) = 2\).
</p>

<canvas id="positionChart"></canvas>
<canvas id="velocityChart"></canvas>
<canvas id="accelerationChart"></canvas>

// Definizione della funzione a(t) come derivata "a tratti" di v(t)
  // in base alle espressioni corrispondenti:
  // - 0   per 0 <= t < 3
  // - 1   per 3 <= t < 5
  // - -2  per 5 <= t < 7
  // - 0   per t >= 7
  function acceleration(t) {
    if (t < 0) {
      return 0;
    } else if (t < 3) {
      return 0;
    } else if (t < 5) {
      return 1;
    } else if (t < 7) {
      return -2;
    } else {
      return 0;
    }
  }

// Parametri di simulazione
  const dt = 0.1;
  const tMax = 10;  // tempo massimo di visualizzazione

// Array per salvare i dati
  const timeData = [];
  const vData = [];
  const aData = [];
  const sData = [];

// Calcolo numerico di s(t) con s(0) = 2, integrando v(t)
  let s = 2;  // costante di integrazione
  for (let t = 0; t <= tMax; t += dt) {
    // Salviamo i dati
    timeData.push(t);
    vData.push( velocity(t) );
    aData.push( acceleration(t) );
    sData.push( s );

// Passo di Eulero per aggiornare la posizione
    // s_{n+1} = s_n + v(t_n)*dt
    s = s + velocity(t) * dt;
  }

// Creiamo i tre grafici con Chart.js
  // 3) s(t)
  const ctxS = document.getElementById('positionChart').getContext('2d');
  new Chart(ctxS, {
    type: 'line',
    data: {
      labels: timeData,
      datasets: [{
        label: 's(t)',
        data: sData,
        borderColor: 'green',
        fill: false
      }]
    },
    options: {
      responsive: true,
      plugins: {
        title: {
          display: true,
          text: 'Posizione s(t)'
        }
      },
      scales: {
        x: {
          title: {
            display: true,
            text: 'Tempo (s)'
          }
        },
        y: {
          title: {
            display: true,
            text: 'Posizione (m)'
          }
        }
      }
    }
  });
  // 1) v(t)
  const ctxV = document.getElementById('velocityChart').getContext('2d');
  new Chart(ctxV, {
    type: 'line',
    data: {
      labels: timeData,
      datasets: [{
        label: 'v(t)',
        data: vData,
        borderColor: 'blue',
        fill: false
      }]
    },
    options: {
      responsive: true,
      plugins: {
        title: {
          display: true,
          text: 'Velocità v(t)'
        }
      },
      scales: {
        x: {
          title: {
            display: true,
            text: 'Tempo (s)'
          }
        },
        y: {
          title: {
            display: true,
            text: 'Velocità (m/s)'
          }
        }
      }
    }
  });

// 2) a(t)
  const ctxA = document.getElementById('accelerationChart').getContext('2d');
  new Chart(ctxA, {
    type: 'line',
    data: {
      labels: timeData,
      datasets: [{
        label: 'a(t)',
        data: aData,
        borderColor: 'red',
        fill: false
      }]
    },
    options: {
      responsive: true,
      plugins: {
        title: {
          display: true,
          text: 'Accelerazione a(t)'
        }
      },
      scales: {
        x: {
          title: {
            display: true,
            text: 'Tempo (s)'
          }
        },
        y: {
          title: {
            display: true,
            text: 'Accelerazione (m/s^2)'
          }
        }
      }
    }
  });

</script>
</body>
</html>