Simulatore Circuito RLC AC by @fammattera - Codewith.it

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

References

<h6>Titolo di intestazione di sesto livello
<strong>Definisce una parte del testo importante con formattazione in grassetto.
idIdentifica univocamente un elemento HTML
valueValore alfanumerico o booleano contenuto in un elemento
<label>Mostrare un testo di etichetta per un elemento di input.
heightDetermina l'altezza di un elemento HTML in pixel

Users

Log in to search for users

Explore

Find inspiration

Tracker delle attività 2

5/10/24 es. 4 - Password

Heads Or Tails Random Tally

Titolo della pagina

5/10/24 es. 7 -parole ripetute

La Mia Pagina Personale beginner a

pag. 6 progetto inf

dati dell-utente

Taketori Monogatari

Ragdoll Archers

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>