Simulatore di Circuiti AC by @fammattera - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<strong>Definisce una parte del testo importante con formattazione in grassetto.
multipleConverte in lista a selezione multipla

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

educazione civica 2

Le Meraviglie d\\\\\\\\

JS Istruzioni condizionali es1

JS Istruzioni condizionali es3

Form Raccolta Segnalazioni Immobil

Heads Or Tails Random Tally

Review of Functions I

La Mia Pagina Personale beginner a

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulatore di Circuiti AC</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { background-color: #f8fafc; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .card { background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); padding: 1.5rem; margin-bottom: 1rem; }
        .math-box { font-family: 'Courier New', Courier, monospace; color: #1e293b; background: #f1f5f9; padding: 1rem; border-left: 4px solid #3b82f6; }
        /* Altezza maggiorata per il grafico */
        .chart-container { position: relative; height: 500px; width: 100%; }
        canvas { width: 100% !important; height: 100% !important; }
    </style>
</head>
<body class="p-4 md:p-8">

    <div class="max-w-7xl mx-auto">
        <header class="mb-8 text-center">
            <h1 class="text-4xl font-bold text-slate-800">Simulatore Interattivo di Circuiti AC</h1>
            <p class="text-slate-600 mt-2 text-lg">Analisi avanzata e visualizzazione delle grandezze elettriche</p>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            
            <!-- Colonna Sinistra: Input e Formule (4/12) -->
            <div class="lg:col-span-4 space-y-6">
                <!-- Parametri -->
                <div class="card">
                    <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
                        <span>⚙️</span> Parametri
                    </h2>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Tipo di Circuito</label>
                            <select id="circuitType" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-slate-50 border">
                                <option value="R">Puramente Resistivo (R)</option>
                                <option value="L">Puramente Induttivo (L)</option>
                                <option value="C">Puramente Capacitivo (C)</option>
                                <option value="RL">Serie RL</option>
                                <option value="RC">Serie RC</option>
                                <option value="RLC" selected>Serie RLC</option>
                            </select>
                        </div>
                        <div class="grid grid-cols-1 gap-4">
                            <div>
                                <label class="flex justify-between text-sm font-medium text-slate-700">
                                    V_picco (V) <span id="vPeakVal" class="text-blue-600">100 V</span>
                                </label>
                                <input type="range" id="vPeak" min="10" max="400" value="100" class="w-full">
                            </div>
                            <div>
                                <label class="flex justify-between text-sm font-medium text-slate-700">
                                    Frequenza (Hz) <span id="freqVal" class="text-blue-600">50 Hz</span>
                                </label>
                                <input type="range" id="freq" min="1" max="200" value="50" class="w-full">
                            </div>
                            <div id="rowR">
                                <label class="flex justify-between text-sm font-medium text-slate-700">
                                    Resistenza (Ω) <span id="resVal" class="text-blue-600">100 Ω</span>
                                </label>
                                <input type="range" id="res" min="1" max="1000" value="100" class="w-full">
                            </div>
                            <div id="rowL">
                                <label class="flex justify-between text-sm font-medium text-slate-700">
                                    Induttanza (mH) <span id="indVal" class="text-blue-600">200 mH</span>
                                </label>
                                <input type="range" id="ind" min="1" max="1000" value="200" class="w-full">
                            </div>
                            <div id="rowC">
                                <label class="flex justify-between text-sm font-medium text-slate-700">
                                    Capacità (µF) <span id="capVal" class="text-blue-600">50 µF</span>
                                </label>
                                <input type="range" id="cap" min="1" max="1000" value="50" class="w-full">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Formule -->
                <div class="card">
                    <h2 class="text-xl font-semibold mb-4 text-slate-800">? Formule e Valori</h2>
                    <div id="formulaBox" class="math-box text-sm space-y-2 overflow-x-auto">
                        <!-- JS content -->
                    </div>
                </div>
            </div>

            <!-- Colonna Destra: Schema e Grafico (8/12) -->
            <div class="lg:col-span-8 space-y-6">
                <!-- Schema del Circuito -->
                <div class="card">
                    <h2 class="text-xl font-semibold mb-2">?️ Schema Circuitale</h2>
                    <div id="circuitDiagram" class="flex justify-center items-center bg-slate-50 border rounded-lg h-40">
                        <!-- SVG dinamico -->
                    </div>
                </div>

                <!-- Grafico Ampio -->
                <div class="card">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-semibold">? Andamento Temporale delle Grandezze</h2>
                        <span class="text-xs bg-slate-100 px-2 py-1 rounded text-slate-500 italic">Asse Y doppio per risoluzione elevata</span>
                    </div>
                    <div class="chart-container">
                        <canvas id="acChart"></canvas>
                    </div>
                    <div class="mt-4 grid grid-cols-3 gap-2 text-center text-[11px] font-medium uppercase tracking-wider">
                        <div class="text-red-600 border-t-2 border-red-600 pt-1">Tensione [V]</div>
                        <div class="text-blue-600 border-t-2 border-blue-600 pt-1">Corrente [A]</div>
                        <div class="text-emerald-600 border-t-2 border-emerald-600 pt-1">Carica [mC]</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let chart;
        const ctx = document.getElementById('acChart').getContext('2d');
        const inputs = ['vPeak', 'freq', 'res', 'ind', 'cap', 'circuitType'];
        const elements = {};
        inputs.forEach(id => elements[id] = document.getElementById(id));

        function initChart() {
            chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [
                        {
                            label: 'Tensione v(t) [V]',
                            borderColor: '#ef4444',
                            backgroundColor: 'rgba(239, 68, 68, 0.05)',
                            borderWidth: 3,
                            data: [],
                            pointRadius: 0,
                            fill: true,
                            yAxisID: 'y'
                        },
                        {
                            label: 'Corrente i(t) [A]',
                            borderColor: '#3b82f6',
                            borderWidth: 3,
                            data: [],
                            pointRadius: 0,
                            fill: false,
                            yAxisID: 'y1'
                        },
                        {
                            label: 'Carica q(t) [mC]',
                            borderColor: '#10b981',
                            borderWidth: 2,
                            borderDash: [5, 5],
                            data: [],
                            pointRadius: 0,
                            fill: false,
                            yAxisID: 'y1'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: false,
                    interaction: { mode: 'index', intersect: false },
                    scales: {
                        x: { 
                            display: true, 
                            title: { display: true, text: 'Tempo [s]', font: { weight: 'bold' } },
                            grid: { color: '#e2e8f0' }
                        },
                        y: { 
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: { display: true, text: 'Tensione [Volt]', color: '#ef4444', font: { weight: 'bold' } },
                            grid: { color: '#e2e8f0' }
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: { display: true, text: 'Corrente [A] / Carica [mC]', color: '#3b82f6', font: { weight: 'bold' } },
                            grid: { drawOnChartArea: false }
                        }
                    },
                    plugins: {
                        legend: { display: false } // Usiamo la legenda custom sotto il grafico
                    }
                }
            });
        }

        function updateUI() {
            const type = elements.circuitType.value;
            document.getElementById('rowR').style.display = type.includes('R') ? 'block' : 'none';
            document.getElementById('rowL').style.display = type.includes('L') ? 'block' : 'none';
            document.getElementById('rowC').style.display = type.includes('C') ? 'block' : 'none';

            document.getElementById('vPeakVal').innerText = elements.vPeak.value + " V";
            document.getElementById('freqVal').innerText = elements.freq.value + " Hz";
            document.getElementById('resVal').innerText = elements.res.value + " Ω";
            document.getElementById('indVal').innerText = elements.ind.value + " mH";
            document.getElementById('capVal').innerText = elements.cap.value + " µF";

            calculatePhysics();
            drawCircuit();
        }

        function calculatePhysics() {
            const Vp = parseFloat(elements.vPeak.value);
            const f = parseFloat(elements.freq.value);
            const R = elements.circuitType.value.includes('R') ? parseFloat(elements.res.value) : 0;
            const L = elements.circuitType.value.includes('L') ? parseFloat(elements.ind.value) / 1000 : 0;
            const C = elements.circuitType.value.includes('C') ? parseFloat(elements.cap.value) / 1000000 : Infinity;
            const type = elements.circuitType.value;

            const omega = 2 * Math.PI * f;
            const XL = omega * L;
            const XC = (C === Infinity) ? 0 : 1 / (omega * C);
            
            let X = 0;
            if (type === 'L') X = XL;
            else if (type === 'C') X = -XC;
            else if (type.includes('L') || type.includes('C')) X = XL - XC;

            const Z = Math.sqrt(R**2 + X**2);
            const phi = Math.atan2(X, R);
            const Ip = Vp / Z;

            let formulaHTML = `<div class="font-bold text-blue-800">Parametri Reattivi:</div>`;
            formulaHTML += `<div>ω = ${omega.toFixed(1)} rad/s | Z = ${Z.toFixed(2)} Ω</div>`;
            if (type.includes('L')) formulaHTML += `<div>X_L = ${XL.toFixed(2)} Ω</div>`;
            if (type.includes('C')) formulaHTML += `<div>X_C = ${XC.toFixed(2)} Ω</div>`;
            
            formulaHTML += `<div class="mt-3 font-bold text-blue-800">Equazioni Temporali:</div>`;
            formulaHTML += `<div>v(t) = ${Vp} · sin(${omega.toFixed(1)}t)</div>`;
            formulaHTML += `<div>i(t) = ${Ip.toFixed(3)} · sin(${omega.toFixed(1)}t - ${(phi).toFixed(2)})</div>`;
            
            if (type === 'RC' || type === 'C' || type === 'RLC') {
                const Qp = Ip / omega; 
                formulaHTML += `<div class="text-emerald-600 font-bold mt-2">q(t) = ${(Qp*1000).toFixed(3)} · cos(${omega.toFixed(1)}t - ${phi.toFixed(2)}) [mC]</div>`;
            }
            document.getElementById('formulaBox').innerHTML = formulaHTML;

            const labels = [];
            const dataV = [];
            const dataI = [];
            const dataQ = [];
            const T = 1 / f;
            const periods = 2.5;
            const steps = 300;

            const showQ = (type === 'RC' || type === 'C' || type === 'RLC');
            chart.setDatasetVisibility(2, showQ);

            for (let i = 0; i <= steps; i++) {
                const t = (i / steps) * T * periods;
                const v_t = Vp * Math.sin(omega * t);
                const i_t = Ip * Math.sin(omega * t - phi);
                const q_t = - (Ip / omega) * Math.cos(omega * t - phi);
                
                labels.push(t.toFixed(4));
                dataV.push(v_t);
                dataI.push(i_t);
                dataQ.push(q_t * 1000); // In milliCoulomb per scala Y1
            }

            chart.data.labels = labels;
            chart.data.datasets[0].data = dataV;
            chart.data.datasets[1].data = dataI;
            chart.data.datasets[2].data = dataQ;
            chart.update();
        }

        function drawCircuit() {
            const type = elements.circuitType.value;
            let svg = `<svg viewBox="0 0 400 150" width="100%" height="100%">
                <circle cx="50" cy="75" r="20" fill="none" stroke="#475569" stroke-width="2"/>
                <path d="M 40 75 Q 45 65 50 75 T 60 75" fill="none" stroke="#475569" stroke-width="2"/>
                <line x1="50" y1="55" x2="50" y2="20" stroke="black" stroke-width="2"/>
                <line x1="50" y1="95" x2="50" y2="130" stroke="black" stroke-width="2"/>
                <line x1="50" y1="20" x2="100" y2="20" stroke="black" stroke-width="2"/>
                <line x1="50" y1="130" x2="350" y2="130" stroke="black" stroke-width="2"/>
                <line x1="350" y1="130" x2="350" y2="20" stroke="black" stroke-width="2"/>
            `;
            const parts = [];
            if(type.includes('R')) parts.push('R');
            if(type.includes('L')) parts.push('L');
            if(type.includes('C')) parts.push('C');
            const startX = 100, endX = 350;
            const segmentWidth = (endX - startX) / parts.length;
            parts.forEach((p, i) => {
                const x = startX + (i * segmentWidth);
                const midX = x + segmentWidth / 2;
                svg += `<line x1="${x}" y1="20" x2="${midX - 20}" y2="20" stroke="black" stroke-width="2"/>`;
                if (p === 'R') {
                    svg += `<path d="M ${midX-20} 20 L ${midX-15} 10 L ${midX-5} 30 L ${midX+5} 10 L ${midX+15} 30 L ${midX+20} 20" fill="none" stroke="#ef4444" stroke-width="2"/>`;
                } else if (p === 'L') {
                    svg += `<path d="M ${midX-20} 20 Q ${midX-15} 5 ${midX-10} 20 Q ${midX-5} 5 ${midX} 20 Q ${midX+5} 5 ${midX+10} 20 Q ${midX+15} 5 ${midX+20} 20" fill="none" stroke="#3b82f6" stroke-width="2"/>`;
                } else if (p === 'C') {
                    svg += `<line x1="${midX-5}" y1="5" x2="${midX-5}" y2="35" stroke="#10b981" stroke-width="3"/>`;
                    svg += `<line x1="${midX+5}" y1="5" x2="${midX+5}" y2="35" stroke="#10b981" stroke-width="3"/>`;
                }
                svg += `<line x1="${midX + 20}" y1="20" x2="${x + segmentWidth}" y2="20" stroke="black" stroke-width="2"/>`;
            });
            svg += `</svg>`;
            document.getElementById('circuitDiagram').innerHTML = svg;
        }

        inputs.forEach(id => elements[id].addEventListener('input', updateUI));
        window.onload = () => { initChart(); updateUI(); };
    </script>
</body>
</html>