Editor_HTML

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>mini-algodoo_cariche_fisse</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
        body {
            text-align: center;
        }
        .controls {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div class="controls">
    
    <label>
        <input type="checkbox" id="toggleGravity" checked>
        Gravità attiva
    </label>

<label>
        <input type="checkbox" id="toggleCharge">
        Cariche attive
    </label>

<button id="toggleAnimationButton">Ferma animazione</button>

<br>

<label for="momentumScaleSlider">Scala vettori (momento):</label>
    <input type="range" id="momentumScaleSlider" min="1" max="50" value="10">
    <span id="momentumScaleValue">10</span>

<label for="electricScaleSlider">Intensità carica:</label>
    <input type="range" id="electricScaleSlider" min="0" max="200000" value="1000">
    <span id="electricScaleValue">1000</span>

<label for="electricForceScaleSlider">Scala frecce forze:</label>
    <input type="range" id="electricForceScaleSlider" min="1" max="10000" value="20">
    <span id="electricForceScaleValue">20</span>

</div>

<canvas id="canvas"></canvas>

const toggleGravityCheckbox = document.getElementById('toggleGravity');
    const toggleChargeCheckbox = document.getElementById('toggleCharge');
    const toggleAnimationButton = document.getElementById('toggleAnimationButton');

const momentumScaleSlider = document.getElementById('momentumScaleSlider');
    const momentumScaleValue = document.getElementById('momentumScaleValue');

const electricScaleSlider = document.getElementById('electricScaleSlider');
    const electricScaleValue = document.getElementById('electricScaleValue');

const electricForceScaleSlider = document.getElementById('electricForceScaleSlider');
    const electricForceScaleValue = document.getElementById('electricForceScaleValue');

// Variabili globali
    let balls = [];
    let animationRunning = true;   // Per fermare/riprendere animazione
    let gravityEnabled = true;     // Toggle gravità
    let chargeEnabled = false;     // Toggle forze elettriche

let momentumScale = 10;        // Scala per vettore quantità di moto
    let electricScale = 1000;      // Scala dell'intensità elettrica (fittizia)
    let electricForceScale = 0.2;  // Scala per disegnare le frecce delle forze elettriche

/*************************************************************
     * CLASSE BALL
     *************************************************************/
    class Ball {
        constructor(x, y, vx, vy, color) {
            this.x = x;
            this.y = y;
            this.vx = vx;
            this.vy = vy;
            this.color = color;

// Carica e raggio in base al colore
            switch (color) {
                case 'gray':  // Grigio => carica negativa
                    this.charge = -1;
                    this.radius = 15 + Math.random() * 10;
                    break;
                case 'red':   // Rosso => carica positiva
                    this.charge = +1;
                    this.radius = 15 + Math.random() * 10;
                    break;
                case 'blue':  // Blu => neutro
                    this.charge = 0;
                    this.radius = 15 + Math.random() * 10;
                    break;
                default:
                    this.charge = 0;
                    this.radius = 10;
                    break;
            }

this.mass = this.radius;  // massa semplificata
            this.gravity = 0.25;      // gravità costante
            this.forcesFromOthers = [];
        }

/**
         * Calcola la forza elettrica esercitata da "other" su "this".
         * Se cariche sono disabilitate o una pallina è neutra, forza = 0.
         * 
         * Importante: qui definiamo dx,dy come (this.x - other.x), (this.y - other.y)
         * in modo da avere correttamente la repulsione se le cariche hanno lo stesso segno.
         */
        computeElectricForceFrom(other) {
            // Se le cariche sono disabilitate o una pallina è neutra => forza nulla
            if (!chargeEnabled || this.charge === 0 || other.charge === 0) {
                return { fx: 0, fy: 0 };
            }

// dx, dy = da "other" verso "this".
            // La forza su "this" punta via da "other" se le cariche hanno lo stesso segno
            // e verso "other" se hanno segno opposto (quindi attrazione).
            const dx = this.x - other.x;
            const dy = this.y - other.y;
            const rSquared = dx * dx + dy * dy;

// Evita forze infinite a distanza zero
            if (rSquared < 1) {
                return { fx: 0, fy: 0 };
            }

const r = Math.sqrt(rSquared);
            // F = (electricScale * q1*q2) / r^2
            // Il segno di (q1*q2) stabilisce attrazione (+/-)
            const F = (electricScale * this.charge * other.charge) / rSquared;

// Scomponiamo in x e y, normalizzando con r
            const fx = F * (dx / r);
            const fy = F * (dy / r);

return { fx, fy };
        }

/**
         * Scorre tutte le altre palline per calcolare la somma
         * delle forze elettriche e aggiornare la velocità di "this".
         */
        accumulateElectricForces(allBalls) {
            this.forcesFromOthers = [];
            let fxTot = 0;
            let fyTot = 0;

for (let other of allBalls) {
                if (other === this) continue;
                const { fx, fy } = this.computeElectricForceFrom(other);
                fxTot += fx;
                fyTot += fy;

// Memorizza anche la singola forza, per il disegno delle frecce
                this.forcesFromOthers.push({ fx, fy });
            }

// a = F / m => Vx += (F_x / m), ...
            this.vx += fxTot / this.mass;
            this.vy += fyTot / this.mass;
        }

/**
         * Disegna la pallina, il vettore quantità di moto, il peso,
         * e le frecce delle forze elettriche (se attive).
         */
        draw() {
            // Disegno la sfera
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
            ctx.fill();

// Vettore quantità di moto = p = m*v (in rosso)
            const px = this.vx * this.mass;
            const py = this.vy * this.mass;
            this.drawVector(
                this.x,
                this.y,
                this.x + px * momentumScale,
                this.y + py * momentumScale,
                'red'
            );

// Vettore peso (se gravità attiva) in nero
            if (gravityEnabled) {
                this.drawVector(
                    this.x,
                    this.y,
                    this.x,
                    this.y + this.mass,
                    'black'
                );
            }

// Se le cariche sono attive, disegno in verde tutte le forze subite
            if (chargeEnabled) {
                for (let f of this.forcesFromOthers) {
                    // Moltiplico per electricForceScale
                    const fx = f.fx * electricForceScale;
                    const fy = f.fy * electricForceScale;
                    this.drawVector(
                        this.x,
                        this.y,
                        this.x + fx,
                        this.y + fy,
                        'green'
                    );
                }
            }
        }

/**
         * Disegna un vettore con freccia da (xStart, yStart) a (xEnd, yEnd).
         */
        drawVector(xStart, yStart, xEnd, yEnd, color) {
            ctx.beginPath();
            ctx.moveTo(xStart, yStart);
            ctx.lineTo(xEnd, yEnd);
            ctx.strokeStyle = color;
            ctx.stroke();

// Disegno la punta della freccia
            const headlen = 10;
            const dx = xEnd - xStart;
            const dy = yEnd - yStart;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(xEnd, yEnd);
            ctx.lineTo(
                xEnd - headlen * Math.cos(angle - Math.PI / 6),
                yEnd - headlen * Math.sin(angle - Math.PI / 6)
            );
            ctx.moveTo(xEnd, yEnd);
            ctx.lineTo(
                xEnd - headlen * Math.cos(angle + Math.PI / 6),
                yEnd - headlen * Math.sin(angle + Math.PI / 6)
            );
            ctx.stroke();
        }

/**
         * Aggiorna la posizione e gestisce i rimbalzi ai bordi.
         */
        update() {
            this.x += this.vx;
            this.y += this.vy;

if (gravityEnabled) {
                this.vy += this.gravity;
            }

// Rimbalzi sui bordi
            if (this.x - this.radius <= 0 || this.x + this.radius >= canvas.width) {
                this.vx = -this.vx;
            }
            if (this.y - this.radius <= 0) {
                this.vy = -this.vy;
                this.y = this.radius;
            } else if (this.y + this.radius >= canvas.height) {
                this.vy = -this.vy * 0.9;
                this.y = canvas.height - this.radius;
            }
        }
    }

/*************************************************************
     * FUNZIONI PER GRIGLIA E COLLISIONI
     *************************************************************/
    function drawGrid(spacing = 20) {
        ctx.beginPath();
        ctx.strokeStyle = '#ccc';
        for (let x = 0; x < canvas.width; x += spacing) {
            ctx.moveTo(x, 0);
            ctx.lineTo(x, canvas.height);
        }
        for (let y = 0; y < canvas.height; y += spacing) {
            ctx.moveTo(0, y);
            ctx.lineTo(canvas.width, y);
        }
        ctx.stroke();
    }

/**
     * Collisioni elastiche tra sfere.
     */
function checkCollisions() {
    for (let i = 0; i < balls.length; i++) {
        for (let j = i + 1; j < balls.length; j++) {
            // Vettore distanza fra i centri
            const dx = balls[j].x - balls[i].x;
            const dy = balls[j].y - balls[i].y;
            const distance = Math.sqrt(dx * dx + dy * dy);

// Se c'è intersezione
            const minDist = balls[i].radius + balls[j].radius;
            if (distance < minDist) {

// ------------------------------------------
                // 1) Calcolo angolo di collisione
                // ------------------------------------------
                const angle = Math.atan2(dy, dx);

// ------------------------------------------
                // 2) Sposto leggermente le palline per
                //    correggere la sovrapposizione (overlap)
                // ------------------------------------------
                const overlap = 0.5 * (minDist - distance);
                // Sposta i e j in direzioni opposte
                const sin = Math.sin(angle);
                const cos = Math.cos(angle);

// Sposta la pallina i
                balls[i].x -= overlap * cos;
                balls[i].y -= overlap * sin;
                // Sposta la pallina j
                balls[j].x += overlap * cos;
                balls[j].y += overlap * sin;

// ------------------------------------------
                // 3) Rotazione delle velocità nel sistema
                //    di riferimento "collision space"
                // ------------------------------------------
                // Massa
                const m1 = balls[i].mass;
                const m2 = balls[j].mass;

// Velocità di i
                const vx_i = balls[i].vx;
                const vy_i = balls[i].vy;
                // Velocità di j
                const vx_j = balls[j].vx;
                const vy_j = balls[j].vy;

// Componenti ruotate:
                //  nell'asse x' = asse di collisione
                //  nell'asse y' = asse tangenziale
                // Formula:
                //   v_x' = v_x*cos(angle) + v_y*sin(angle)
                //   v_y' = -v_x*sin(angle) + v_y*cos(angle)
                const vx_i_rot = vx_i * cos + vy_i * sin;
                const vy_i_rot = -vx_i * sin + vy_i * cos;
                const vx_j_rot = vx_j * cos + vy_j * sin;
                const vy_j_rot = -vx_j * sin + vy_j * cos;

// ------------------------------------------
                // 4) Collisione elastica 1D lungo l'asse x'
                //    (Formula standard dell'urto elastico)
                // ------------------------------------------
                // v1'x_final e v2'x_final
                // (scambio di quantità di moto sull'asse di collisione)
                const vx_i_rot_after =
                    ((m1 - m2) * vx_i_rot + 2 * m2 * vx_j_rot) / (m1 + m2);
                const vx_j_rot_after =
                    ((m2 - m1) * vx_j_rot + 2 * m1 * vx_i_rot) / (m1 + m2);

// vy' non cambia (urto sferico perfettamente elastico)
                const vy_i_rot_after = vy_i_rot;
                const vy_j_rot_after = vy_j_rot;

// ------------------------------------------
                // 5) Ruota di nuovo le velocità nel sistema
                //    di riferimento originale
                // ------------------------------------------
                // Inverso della rotazione di prima
                //   v_x = v_x'*cos(angle) - v_y'*sin(angle)
                //   v_y = v_x'*sin(angle) + v_y'*cos(angle)
                balls[i].vx = vx_i_rot_after * cos - vy_i_rot_after * sin;
                balls[i].vy = vx_i_rot_after * sin + vy_i_rot_after * cos;
                balls[j].vx = vx_j_rot_after * cos - vy_j_rot_after * sin;
                balls[j].vy = vx_j_rot_after * sin + vy_j_rot_after * cos;
            }
        }
    }
}

/*************************************************************
     * EVENTI
     *************************************************************/
    // Click sul canvas => crea una pallina casuale fra [gray, red, blue]
    canvas.addEventListener('click', function(e) {
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        const colors = ['gray', 'red', 'blue'];
        const color = colors[Math.floor(Math.random() * colors.length)];

const vx = Math.random() * 4 - 2;
        const vy = Math.random() * 4 - 2;

balls.push(new Ball(x, y, vx, vy, color));
    });

// Checkbox gravità
    toggleGravityCheckbox.addEventListener('change', function(e) {
        gravityEnabled = e.target.checked;
    });

// Checkbox cariche
    toggleChargeCheckbox.addEventListener('change', function(e) {
        chargeEnabled = e.target.checked;
    });

// Pulsante stop/riprendi
    toggleAnimationButton.addEventListener('click', function() {
        animationRunning = !animationRunning;
        if (animationRunning) {
            toggleAnimationButton.textContent = 'Ferma animazione';
        } else {
            toggleAnimationButton.textContent = 'Riprendi animazione';
        }
    });

// Slider per quantità di moto
    momentumScaleSlider.addEventListener('input', function(e) {
        momentumScale = parseInt(e.target.value);
        momentumScaleValue.textContent = momentumScale;
    });

// Slider per intensità elettrica
    electricScaleSlider.addEventListener('input', function(e) {
        electricScale = parseInt(e.target.value);
        electricScaleValue.textContent = electricScale;
    });

// Slider per scala frecce forze
    electricForceScaleSlider.addEventListener('input', function(e) {
        const rawValue = parseInt(e.target.value);
        electricForceScale = rawValue / 100;  // es. se slider = 20 => 0.20
        electricForceScaleValue.textContent = rawValue;
    });

/*************************************************************
     * LOOP ANIMAZIONE
     *************************************************************/
    function loop() {
        // Pulisce canvas e disegna griglia
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawGrid(20);

if (animationRunning) {
            // 1) Forze elettriche
            for (let ball of balls) {
                ball.accumulateElectricForces(balls);
            }

// 2) Collisioni
            checkCollisions();

// 3) Update e draw
            for (let ball of balls) {
                ball.update();
                ball.draw();
            }
        } else {
            // Se fermo, disegno le palline senza aggiornarle
            for (let ball of balls) {
                ball.draw();
            }
        }

requestAnimationFrame(loop);
    }

// Avvio
    loop();
</script>
</body>
</html>