Editor_HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>due_macchine_super</title>
  <style>
    /* Contenitore della scena (dove si muovono le macchine) */
    #scene {
      position: relative;
      width: 1200px;    /* Larghezza in pixel */
      height: 150px;    /* Altezza per farci stare le macchine e le tacche */
      border: 1px solid #aaa;
      margin-bottom: 20px;
      overflow: hidden; 
    }

/* Stili base per i due veicoli */
    #carA, #carB {
      width: 10px;
      height: 10px;
      position: absolute;
    }
    #carA {
      background-color: red;
      top: 50px;
    }
    #carB {
      background-color: blue;
      top: 100px;
    }

/* Stile di base per la tacca (linea verticale) */
    .tick {
      position: absolute;
      width: 1px;
      background-color: #000;
      top: 0;
      bottom: 0; 
    }

/* Etichetta numerica sotto la tacca */
    .tick-label {
      position: absolute;
      transform: translateX(-50%);
      top: 130px;
      font-size: 12px;
      color: #333;
    }

/* Impostiamo i grafici uno sotto l'altro */
    .chart-container {
      width: 800px;   /* Larghezza del grafico */
      height: 200px;  /* Altezza del grafico */
      margin: 20px 0;
    }
  </style>
</head>
<body>

<div id="scene">
    <div id="carA"></div>
    <div id="carB"></div>
  </div>

<div>
    <label>t0_A: <input type="number" id="t0_A" value="0" step="any"></label>
    <label>x0_A: <input type="number" id="x0_A" value="0" step="any"></label>
    <label>v0_A: <input type="number" id="v0_A" value="0" step="any"></label>
    <label>a_A:  <input type="number" id="a_A" value="2" step="any"></label>
    <br>
    <label>t0_B: <input type="number" id="t0_B" value="0" step="any"></label>
    <label>x0_B: <input type="number" id="x0_B" value="100" step="any"></label>
    <label>v0_B: <input type="number" id="v0_B" value="-4" step="any"></label>
    <label>a_B:  <input type="number" id="a_B" value="1" step="any"></label>
    <br><br>
    <button onclick="startSimulation()">Start</button>
  </div>

<div class="chart-container">
    <canvas id="posChart"></canvas>
  </div>
  <div class="chart-container">
    <canvas id="velChart"></canvas>
  </div>
  <div class="chart-container">
    <canvas id="accChart"></canvas>
  </div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

// Variabili per salvare la posizione precedente (per rilevare incrocio)
    let previousPosA;
    let previousPosB;

// Parametri cinematici (letti da input)
    let t0A, x0A, v0A, aA;
    let t0B, x0B, v0B, aB;

// Limite per disegnare tacche
    const maxDistanceMeters = 300;

/* ---------- RIFERIMENTI AI VARI ELEMENTI ---------- */
    const sceneDiv = document.getElementById("scene");
    const carADiv  = document.getElementById("carA");
    const carBDiv  = document.getElementById("carB");

// Canvas per i 3 grafici
    const posCanvas = document.getElementById("posChart");
    const velCanvas = document.getElementById("velChart");
    const accCanvas = document.getElementById("accChart");

/* ---------- CHART.JS: DEFINIZIONE DEI GRAFICI ---------- */
    // Array di dati (tempo, posA, posB, velA, velB, accA, accB)
    let timeData = [];
    let posAData = [];
    let posBData = [];
    let velAData = [];
    let velBData = [];
    let accAData = [];
    let accBData = [];

// Creiamo 3 grafici separati, ognuno con 2 dataset (A e B)
    const posChart = new Chart(posCanvas, {
      type: 'line',
      data: {
        labels: timeData,
        datasets: [
          {
            label: 'Pos A (m)',
            data: posAData,
            borderColor: 'red',
            fill: false
          },
          {
            label: 'Pos B (m)',
            data: posBData,
            borderColor: 'blue',
            fill: false
          }
        ]
      },
      options: {
        responsive: true,
        scales: {
          x: {
            title: { display: true, text: 'Tempo (s)' }
          },
          y: {
            title: { display: true, text: 'Posizione (m)' }
          }
        }
      }
    });

const velChart = new Chart(velCanvas, {
      type: 'line',
      data: {
        labels: timeData,
        datasets: [
          {
            label: 'Vel A (m/s)',
            data: velAData,
            borderColor: 'red',
            fill: false
          },
          {
            label: 'Vel B (m/s)',
            data: velBData,
            borderColor: 'blue',
            fill: false
          }
        ]
      },
      options: {
        responsive: true,
        scales: {
          x: {
            title: { display: true, text: 'Tempo (s)' }
          },
          y: {
            title: { display: true, text: 'Velocità (m/s)' }
          }
        }
      }
    });

const accChart = new Chart(accCanvas, {
      type: 'line',
      data: {
        labels: timeData,
        datasets: [
          {
            label: 'Acc A (m/s^2)',
            data: accAData,
            borderColor: 'red',
            fill: false
          },
          {
            label: 'Acc B (m/s^2)',
            data: accBData,
            borderColor: 'blue',
            fill: false
          }
        ]
      },
      options: {
        responsive: true,
        scales: {
          x: {
            title: { display: true, text: 'Tempo (s)' }
          },
          y: {
            title: { display: true, text: 'Accelerazione (m/s^2)' }
          }
        }
      }
    });

/* ---------- FUNZIONI DI SUPPORTO ---------- */
    // Crea tacche verticali ogni 10m
    function drawTicks() {
      // Pulisce eventuali tacche precedenti
      Array.from(sceneDiv.querySelectorAll(".tick, .tick-label")).forEach(el => el.remove());

for (let d = 0; d <= 2*maxDistanceMeters; d += 10) {
        let leftPos = d * pxPerMeter;

// Crea la linea verticale
        let tick = document.createElement("div");
        tick.className = "tick";
        tick.style.left = leftPos + "px";
        sceneDiv.appendChild(tick);

// Crea l'etichetta
        let label = document.createElement("div");
        label.className = "tick-label";
        label.style.left = leftPos + "px";
        label.textContent = d + "";
        sceneDiv.appendChild(label);
      }
    }

// Formule cinematiche
    function xA(time) {
      if (time < t0A) {
        return x0A;
      } else {
        let tau = time - t0A;
        return x0A + v0A * tau + 0.5 * aA * tau * tau;
      }
    }
    function xB(time) {
      if (time < t0B) {
        return x0B;
      } else {
        let tau = time - t0B;
        return x0B + v0B * tau + 0.5 * aB * tau * tau;
      }
    }
    // Velocità
    function vA(time) {
      if (time < t0A) {
        return 0; // oppure v0A se preferisci considerarla costante anche prima
      } else {
        return v0A + aA * (time - t0A);
      }
    }
    function vB(time) {
      if (time < t0B) {
        return 0; // oppure v0B
      } else {
        return v0B + aB * (time - t0B);
      }
    }
    // Accelerazione (costante dopo t0, 0 prima)
    function aA_fun(time) {
      if (time < t0A) {
        return 0;
      } else {
        return aA;
      }
    }
    function aB_fun(time) {
      if (time < t0B) {
        return 0;
      } else {
        return aB;
      }
    }

/* ---------- FUNZIONE DI AGGIORNAMENTO ---------- */
    function update() {
      t += dt;

// Calcolo posizioni, velocità, accelerazioni
      let posA_val = xA(t);
      let posB_val = xB(t);
      let velA_val = vA(t);
      let velB_val = vB(t);
      let accA_val = aA_fun(t);
      let accB_val = aB_fun(t);

// --- Controllo incrocio ---
      if (previousPosA !== undefined && previousPosB !== undefined) {
        if ((posA_val - posB_val) * (previousPosA - previousPosB) < 0) {
          alert(`Incrocio al tempo t = ${t.toFixed(2)} s
Posizione (circa) = ${((posA_val + posB_val) / 2).toFixed(2)} m`);
          clearInterval(timer);
        }
      }

// Aggiorna animazione dei veicoli (in px)
      carADiv.style.left = (posA_val * pxPerMeter) + "px";
      carBDiv.style.left = (posB_val * pxPerMeter) + "px";

// Salva posizioni come "previous"
      previousPosA = posA_val;
      previousPosB = posB_val;

// --- Aggiorna i dati dei grafici ---
      timeData.push(t.toFixed(2));        // Salviamo stringhe per l’asse x
      posAData.push(posA_val);
      posBData.push(posB_val);
      velAData.push(velA_val);
      velBData.push(velB_val);
      accAData.push(accA_val);
      accBData.push(accB_val);

// Forziamo il refresh di Chart.js
      // (Le chart cambieranno dimensione in base al nuovo dataset)
      posChart.update('none');
      velChart.update('none');
      accChart.update('none');
    }

/* ---------- AVVIO DELLA SIMULAZIONE ---------- */
    function startSimulation() {
      // Se c'era un timer attivo, fermiamolo
      if (timer) {
        clearInterval(timer);
      }

// Leggiamo gli input
      t0A = parseFloat(document.getElementById("t0_A").value);
      x0A = parseFloat(document.getElementById("x0_A").value);
      v0A = parseFloat(document.getElementById("v0_A").value);
      aA  = parseFloat(document.getElementById("a_A").value);

t0B = parseFloat(document.getElementById("t0_B").value);
      x0B = parseFloat(document.getElementById("x0_B").value);
      v0B = parseFloat(document.getElementById("v0_B").value);
      aB  = parseFloat(document.getElementById("a_B").value);

// Azzeriamo il tempo
      t = 0;

// Reset posizioni precedenti
      previousPosA = undefined;
      previousPosB = undefined;

// Puliamo i dati dei grafici
      timeData.length = 0;
      posAData.length = 0;
      posBData.length = 0;
      velAData.length = 0;
      velBData.length = 0;
      accAData.length = 0;
      accBData.length = 0;

// Ridisegniamo le tacche (se servisse cambiare scala o resettarle)
      drawTicks();

// Posizioniamo subito i due veicoli
      carADiv.style.left = (x0A * pxPerMeter) + "px";
      carBDiv.style.left = (x0B * pxPerMeter) + "px";

// Avviamo il timer
      timer = setInterval(update, dt * 1000);
    }
  </script>

</body>
</html>