Simulatore Circuito RLC AC by @fammattera - Codewith.it

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

Referenze

<h4>Titolo di intestazione di quarto livello
getDefinisce un metodo di invio di dati al server
<table>Tag primario per la creazione di tabelle
<h2>Titolo di intestazione di secondo livello
<meta>Definisce i meta dati di una pagina web.
<blockquote>Inserisce citazioni in un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

pagina_completa.html

Pagine di prova

Group 1 - Irregular Verbs

Heads Or Tails Random Tally

JS Elementi del linguaggio es3

Esercizio gatto

My Anime Blog - Ninjas and Dragons

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 Circuito RLC AC</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            background-color: #0f172a;
            color: #f1f5f9;
        }
        .canvas-container {
            position: relative;
            width: 100%;
            height: 400px;
            background: #1e293b;
            border-radius: 0.75rem;
            overflow: hidden;
            border: 1px solid #334155;
        }
        input[type=range] {
            accent-color: #3b82f6;
        }
        .value-display {
            font-family: monospace;
            color: #3b82f6;
        }
        .resonance-glow {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
            border: 2px solid #60a5fa;
        }
        .circuit-bg {
            background: #1e293b;
            border: 1px solid #334155;
        }
        .circuit-label {
            font-size: 12px;
            fill: #94a3b8;
            font-family: sans-serif;
        }
        .circuit-value {
            font-size: 14px;
            fill: #60a5fa;
            font-weight: bold;
            font-family: monospace;
        }
    </style>
</head>
<body class="p-4 md:p-8">
    <div class="max-w-6xl mx-auto">
        <header class="mb-8 text-center">
            <h1 class="text-3xl font-bold mb-2">Simulatore Laboratorio RLC (AC)</h1>
            <p class="text-slate-400">Analisi della risposta in frequenza e risonanza in un circuito serie</p>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Pannello Controlli e Schema -->
            <div class="space-y-6">
                <!-- Schema del Circuito -->
                <div class="circuit-bg p-4 rounded-xl">
                    <h3 class="text-sm font-semibold text-slate-400 mb-2 uppercase text-center">Schema del Circuito</h3>
                    <svg viewBox="0 0 400 220" class="w-full h-auto">
                        <!-- Linee di collegamento -->
                        <path d="M 50 110 L 50 50 L 120 50 M 180 50 L 220 50 M 280 50 L 350 50 L 350 100 M 350 110 L 350 170 L 50 170 L 50 110" 
                              fill="none" stroke="#64748b" stroke-width="3" />
                        
                        <!-- Generatore AC -->
                        <circle cx="50" cy="110" r="20" fill="#1e293b" stroke="#facc15" stroke-width="3" />
                        <path d="M 42 110 Q 46 100 50 110 T 58 110" fill="none" stroke="#facc15" stroke-width="2" />
                        <text x="0" y="115" class="circuit-label">fem(t)</text>
                        <text x="15" y="140" id="diag-V" class="circuit-value">10V</text>

                        <!-- Resistore (R) -->
                        <path d="M 120 50 L 125 40 L 135 60 L 145 40 L 155 60 L 165 40 L 175 60 L 180 50" 
                              fill="none" stroke="#ef4444" stroke-width="3" />
                        <text x="140" y="20" class="circuit-label text-center">R</text>
                        <text x="130" y="85" id="diag-R" class="circuit-value">100Ω</text>

                        <!-- Induttore (L) -->
                        <path d="M 220 50 C 220 20, 235 20, 235 50 C 235 20, 250 20, 250 50 C 250 20, 265 20, 265 50 C 265 20, 280 20, 280 50" 
                              fill="none" stroke="#10b981" stroke-width="3" />
                        <text x="245" y="20" class="circuit-label">L</text>
                        <text x="235" y="85" id="diag-L" class="circuit-value">100mH</text>

                        <!-- Condensatore (C) -->
                        <path d="M 350 110 L 330 110 M 370 110 L 350 110 M 350 100 L 330 100 M 370 100 L 350 100" 
                              fill="none" stroke="#3b82f6" stroke-width="3" />
                        <text x="375" y="115" class="circuit-label">C</text>
                        <text x="310" y="155" id="diag-C" class="circuit-value">50µF</text>
                    </svg>
                </div>

                <div class="bg-slate-800 p-6 rounded-xl border border-slate-700 space-y-6">
                    <h2 class="text-xl font-semibold border-b border-slate-700 pb-2">Parametri</h2>
                    
                    <div>
                        <div class="flex justify-between mb-1">
                            <label>Tensione Picco (V)</label>
                            <span id="vVal" class="value-display">10.0 V</span>
                        </div>
                        <input type="range" id="vInput" min="1" max="50" step="0.5" value="10" class="w-full">
                    </div>

                    <div>
                        <div class="flex justify-between mb-1">
                            <label>Frequenza (Hz)</label>
                            <span id="fVal" class="value-display">50.0 Hz</span>
                        </div>
                        <input type="range" id="fInput" min="1" max="200" step="1" value="50" class="w-full">
                    </div>

                    <div>
                        <div class="flex justify-between mb-1">
                            <label>Resistenza (Ω)</label>
                            <span id="rVal" class="value-display">100 Ω</span>
                        </div>
                        <input type="range" id="rInput" min="10" max="1000" step="10" value="100" class="w-full">
                    </div>

                    <div>
                        <div class="flex justify-between mb-1">
                            <label>Induttanza (mH)</label>
                            <span id="lVal" class="value-display">100 mH</span>
                        </div>
                        <input type="range" id="lInput" min="10" max="1000" step="10" value="200" class="w-full">
                    </div>

                    <div>
                        <div class="flex justify-between mb-1">
                            <label>Capacità (μF)</label>
                            <span id="cVal" class="value-display">50 μF</span>
                        </div>
                        <input type="range" id="cInput" min="1" max="200" step="1" value="50" class="w-full">
                    </div>
                </div>
            </div>

            <!-- Visualizzazione Grafica -->
            <div class="lg:col-span-2 space-y-6">
                <div class="canvas-container" id="plotContainer">
                    <canvas id="rlcCanvas"></canvas>
                    <div class="absolute top-4 left-4 bg-slate-900/80 p-3 rounded text-sm border border-slate-700">
                        <div class="flex items-center gap-2">
                            <div class="w-3 h-3 bg-yellow-400 rounded-full"></div>
                            <span>Tensione (V)</span>
                        </div>
                        <div class="flex items-center gap-2 mt-1">
                            <div class="w-3 h-3 bg-blue-400 rounded-full"></div>
                            <span>Corrente (A x10)</span>
                        </div>
                    </div>
                    <div id="resonanceBadge" class="hidden absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-xs font-bold animate-pulse">
                        RISONANZA RAGGIUNTA
                    </div>
                </div>

                <!-- Pannello Dati Tecnici -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="bg-slate-800 p-4 rounded-lg border border-slate-700">
                        <div class="text-slate-400 text-xs uppercase text-[10px]">Impedenza (Z)</div>
                        <div id="zOut" class="text-xl font-mono text-blue-400">0.00 Ω</div>
                    </div>
                    <div class="bg-slate-800 p-4 rounded-lg border border-slate-700">
                        <div class="text-slate-400 text-xs uppercase text-[10px]">Reattanza Induttiva</div>
                        <div id="xlOut" class="text-xl font-mono text-blue-400">0.00 Ω</div>
                    </div>
                    <div class="bg-slate-800 p-4 rounded-lg border border-slate-700">
                        <div class="text-slate-400 text-xs uppercase text-[10px]">Reattanza Capacitiva</div>
                        <div id="xcOut" class="text-xl font-mono text-blue-400">0.00 Ω</div>
                    </div>
                    <div class="bg-slate-800 p-4 rounded-lg border border-slate-700">
                        <div class="text-slate-400 text-xs uppercase text-[10px]">Freq. Risonanza</div>
                        <div id="f0Out" class="text-xl font-mono text-yellow-400">0.00 Hz</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('rlcCanvas');
        const ctx = canvas.getContext('2d');
        const container = document.getElementById('plotContainer');

        const inputs = {
            v: document.getElementById('vInput'),
            f: document.getElementById('fInput'),
            r: document.getElementById('rInput'),
            l: document.getElementById('lInput'),
            c: document.getElementById('cInput')
        };

        const displays = {
            v: document.getElementById('vVal'),
            f: document.getElementById('fVal'),
            r: document.getElementById('rVal'),
            l: document.getElementById('lVal'),
            c: document.getElementById('cVal'),
            z: document.getElementById('zOut'),
            xl: document.getElementById('xlOut'),
            xc: document.getElementById('xcOut'),
            f0: document.getElementById('f0Out'),
            resonance: document.getElementById('resonanceBadge'),
            // Diagramma SVG
            diagV: document.getElementById('diag-V'),
            diagR: document.getElementById('diag-R'),
            diagL: document.getElementById('diag-L'),
            diagC: document.getElementById('diag-C')
        };

        let time = 0;

        function resize() {
            canvas.width = container.clientWidth;
            canvas.height = container.clientHeight;
        }

        window.addEventListener('resize', resize);
        resize();

        function calculatePhysics() {
            const Vp = parseFloat(inputs.v.value);
            const f = parseFloat(inputs.f.value);
            const R = parseFloat(inputs.r.value);
            const L_mH = parseFloat(inputs.l.value);
            const C_uF = parseFloat(inputs.c.value);
            
            const L = L_mH / 1000;
            const C = C_uF / 1000000;

            const omega = 2 * Math.PI * f;
            const X_L = omega * L;
            const X_C = 1 / (omega * C);
            const X_total = X_L - X_C;
            const Z = Math.sqrt(R*R + X_total*X_total);
            const Ip = Vp / Z;
            const phase = Math.atan2(X_total, R);
            const f0 = 1 / (2 * Math.PI * Math.sqrt(L * C));

            // Aggiorna Testi UI
            displays.v.textContent = `${Vp.toFixed(1)} V`;
            displays.f.textContent = `${f.toFixed(1)} Hz`;
            displays.r.textContent = `${R} Ω`;
            displays.l.textContent = `${L_mH.toFixed(0)} mH`;
            displays.c.textContent = `${C_uF.toFixed(0)} μF`;
            
            displays.z.textContent = `${Z.toFixed(2)} Ω`;
            displays.xl.textContent = `${X_L.toFixed(2)} Ω`;
            displays.xc.textContent = `${X_C.toFixed(2)} Ω`;
            displays.f0.textContent = `${f0.toFixed(2)} Hz`;

            // Aggiorna Diagramma SVG
            displays.diagV.textContent = `${Vp.toFixed(0)}V`;
            displays.diagR.textContent = `${R}Ω`;
            displays.diagL.textContent = `${L_mH.toFixed(0)}mH`;
            displays.diagC.textContent = `${C_uF.toFixed(0)}µF`;

            const isResonant = Math.abs(f - f0) < (f0 * 0.05);
            if (isResonant) {
                displays.resonance.classList.remove('hidden');
                container.classList.add('resonance-glow');
            } else {
                displays.resonance.classList.add('hidden');
                container.classList.remove('resonance-glow');
            }

            return { Vp, f, Ip, phase, omega };
        }

        function draw() {
            const { Vp, f, Ip, phase, omega } = calculatePhysics();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            ctx.strokeStyle = '#334155';
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(0, canvas.height / 2);
            ctx.lineTo(canvas.width, canvas.height / 2);
            ctx.stroke();

            const centerY = canvas.height / 2;
            const scaleX = canvas.width / 0.05; 
            const vScale = (canvas.height * 0.4) / 50; 

            // Onda Tensione
            ctx.beginPath();
            ctx.strokeStyle = '#facc15';
            ctx.lineWidth = 3;
            for (let x = 0; x < canvas.width; x++) {
                const t = x / scaleX + time;
                const y = centerY - Math.sin(omega * t) * Vp * vScale;
                if (x === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
            }
            ctx.stroke();

            // Onda Corrente
            ctx.beginPath();
            ctx.strokeStyle = '#60a5fa';
            ctx.setLineDash([5, 5]);
            ctx.lineWidth = 2;
            for (let x = 0; x < canvas.width; x++) {
                const t = x / scaleX + time;
                const y = centerY - Math.sin(omega * t - phase) * Ip * 10 * vScale; 
                if (x === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
            }
            ctx.stroke();
            ctx.setLineDash([]);

            time += 0.0001; 
            requestAnimationFrame(draw);
        }

        draw();
    </script>
</body>
</html>