<![CDATA[
<canvas id="canvas" width="400" height="400"></canvas>
<p id="temperature"></p>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Dati fisici
const g = 9.81; // accelerazione gravità m/s²
const massa = 10.2; // massa pallina kg
const altezzaIniziale = 2; // metri
const capacitaTermicaAcqua = 4186; // J/(kg·°C)
const massaAcqua = 1; // kg
let temperaturaIniziale = 20; // °C
// Stato della pallina
let y = 0;
let velocita = 0;
const livelloAcqua = 300; // pixel dove inizia l'acqua
function disegna() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Disegna acqua
ctx.fillStyle = '#29b6f6';
ctx.fillRect(0, livelloAcqua, canvas.width, canvas.height - livelloAcqua);
// Disegna pallina
ctx.beginPath();
ctx.arc(canvas.width / 2, y, 10, 0, Math.PI * 2);
ctx.fillStyle = '#ff5722';
ctx.fill();
}
function aggiorna() {
let dt = 0.016; // ~60fps
if (y + 10 < livelloAcqua) {
velocita += g * dt * 100; // scala (100 pixel ~ 1m)
y += velocita * dt;
} else {
// Calcola energia potenziale convertita in calore
let energia = massa * g * altezzaIniziale; // J
let deltaT = energia / (massaAcqua * capacitaTermicaAcqua);
temperaturaIniziale += deltaT;
document.getElementById('temperature').innerText =
`Temperatura finale dell'acqua: ${temperaturaIniziale.toFixed(4)} °C`;
// Ferma l'animazione
return;
}
disegna();
requestAnimationFrame(aggiorna);
}
// Posizione iniziale pallina
function init() {
y = 10;
disegna();
aggiorna();
}
init();
</script>
]]>