Kullanıcı fizikte bir kondansatörün (kapasitör) elemanları arasındaki uzaklık (d) ve yüzey alanını (A) değiştirilebildiği, elektrik yüklerini (Q) gösteren etkileşimli bir simülatör istiyor. Dil Türkçe, o yüzden tüm açıklamalar ve UI Türkçe olacak. Fizik temeli: - Kondansatör kapasitansı: C = ε₀ · A / d (paralel plakalı kondansatör, hava/vakum dielektrik) - Yük: Q = C · V - Elektrik alan: E = V / d - Enerji: U = ½CV² Simülatörde ne olmalı: 1. Paralel plakalı kondansatörün görsel temsili (canvas veya SVG) 2. Plakalar arasındaki mesafeyi (d) sürükleyerek veya slider ile değiştirme 3. Plakaların genişliğini/yüksekliğini (yüzey alanı A) değiştirme 4. Voltaj ayarı (pil/batarya) 5. Yüklerin (+ ve -) plakalarda gösterilmesi — yük yoğunluğu C·V/A ile orantılı 6. Elektrik alan çizgileri gösterimi 7. Canlı değerler: C, Q, E, U 8. Belki bir kapasitansölçer (galvanometre) veya elektrometre göstergesi Tasarım kararları: - Gerçekçi fizik laboratuvarı hissi ama klişe olmayan bir tasarım. "Sıradan" dashboard görünümünden kaçınacağım. Tek bir büyük sahne + yan kontroller yerine, belki tam ekran bir "laboratuvar tezgahı" görünümü. - Renk paleti: koyu ama mavi-mor değil. Belki sıcak bir "eski fizik kitabı / teknik çizim" estetiği — krem/kağıt arka plan üzerine mürekkep çizgileri, veya koyu antrasit üzerinde amber/turkuaz vurgular. Fizik simülatörü için "teknik şema / blueprintsiz, krem kağıt üzerinde mürekkep" estetiği çok karakterli olur. Ama koyu zemin üzerinde fosforlu gösterge ekranı da güzel olur. Karar: "Fizik ders kitabı kağıdı" estetiği — sıcak krem arka plan (örn. #f4efe4 gibi), koyu mürekkep (#1a1a18), kırmızı (pozitif yük) ve koyu mavi/teal (negatif yük) vurgular. Serif başlıklar (örn. "Fraunces" veya "Playfair"), teknik his için mono font (örn. "Space Mono" veya "IBM Plex Mono"). Bu hem özgün hem okunaklı. Fontlar: Google Fonts'tan "Fraunces" (başlık, karakterli serif) + "IBM Plex Mono" (değerler, teknik etiketler). Inter/Roboto kullanmayacağım. Layout: - Sol tarafta büyük bir sahne (canvas): kondansatör, plakalar, yükler, alan çizgileri, pil devresi belki. - Sağda dar bir kontrol paneli: slider'lar (d, A, V), anahtar (devreyi aç/kapa), canlı ölçüm değerleri. - Üstte başlık ve kısa açıklama. Ama "generic dashboard" hissinden kaçınmak için: kontrol panelini bir "teknik föy / datasheet" gibi çizebilirim — çizgiler, küçük grafikler, C = ε₀A/d formülü büyük gösterilsin, değerler canlı değişsin. Sağ panel bir "ölçüm cihazı föyü" gibi görünsün. Etkileşim: - Canvas üzerinde plakalar doğrudan sürüklenebilir: sağ plakayı yatay sürükleyince d değişir; plakaların köşesinden sürükleyince yükseklik (A) değişir. Bu "canlı" hissi güçlendirir. - Slider'lar da senkron çalışır. - Devre anahtarı: kapalıyken voltaj uygulanır, yükler belirir (animasyonla — yükler plakalara "akar", pil → tel → plaka). Anahtar açıkken yükler nötrdür. - Elektrik alan çizgileri: + plakadan − plakaya oklar. Alan çizgisi yoğunluğu E ile orantılı (V/d). - Yük sembolleri: plakalar üzerinde + ve − işaretleri, sayı/yoğunluk Q ile orantılı. Ayrıca eğlenceli bir "signature moment": yükler devre üzerinden animasyonlu akış noktalarıyla hareket etsin (elektron akışı gibi ama konvansiyonel akış). Anahtar kapandığında yükler pil ile plakalar arasında aksın, sonra plakalarda biriksin. Bu gerçekten canlı hissettirir. Ayrıca küçük bir grafik: C vs d ilişkisi (1/d eğrisi) ve üzerindeki güncel nokta? Ya da Q-V? Bir mini grafik eklemek "ölçüm föyü" hissini güçlendirir. C–d eğrisi iyi olur: d değiştikçe nokta eğri üzerinde kayar. Bu hem eğitim değeri hem görsel imza. Teknik plan: - Tek HTML dosyası, vanilla JS + Canvas 2D (kütüphaneye gerek yok; canvas ile her şeyi kontrol ederim). Icon gerekiyorsa birkaç inline SVG çizerim (icon kütüphanesi olarak lucide CDN kullanılabilir ama inline SVG daha güvenli — küçük ikonları kendim SVG path olarak çizerim). - Google Fonts CDN link'i (Fraunces + IBM Plex Mono) — bu dış font, izinli. - Responsive: geniş ekranda yanyana, dar ekranda üstte sahne altta kontroller. Canvas resize'a uyum sağlar (devicePixelRatio dahil). Fizik değerleri: - ε₀ = 8.854 × 10⁻¹² F/m - A: 0.01 m² – 0.5 m² arası (100 cm² – 5000 cm²). Görselde plaka yüksekliği ile orantılı. - d: 1 mm – 100 mm arası (0.001 – 0.1 m). Görselde plaka aralığı orantılı ama görsel ölçekleme ayrı (yoksa mm seviyesinde görünmez). Görsel mesafe = logaritmik veya f(d) olarak eşleyeceğim; görselde açıklama ile gerçek d gösterilir. Örn. görsel gap = 30 + d_norm * 260 px gibi. - V: 0 – 500 V. - C = ε₀·A/d → örn A=0.1 m², d=0.01 m → C = 8.854e-10 F ≈ 0.885 nF. Nano- ve piko-farad aralığında olacak. Q = C·V → ör. 0.885nF × 100V ≈ 88.5 nC. Nanocoulomb göstermek uygun. E = V/d → 100/0.01 = 10 kV/m. - Değer biçimlendirme: bilimsel gösterim veya uygun prefiks (pF, nF; nC; kV/m; mJ). Görsel sahne detayları (canvas): 1. İki dikey metal plaka (bakır/balon gibi: sol plaka + ile yüklü kırmızımsı, sağ plaka − ile mavi/teal). Plakalar "folyo" görünümü: hafif dikey gradyan yerine düz renk + kenar çizgisi + üzerinde yük sembolleri. 3D efekt için basit düz renk + iç gölge yerine, teknik-çizim estetiğine uygun: plaka gövdesi hafif ton, kalın kontur, doku olarak ince yatay tarama çizgileri (metal hissi). Gradient'i dekor değil, metal gövdeyi hissettirmek için çok hafif kullanabilirim — ama tutumlu olurum; düz renk + tarama çizgileri daha "ink on paper" olur. 2. Yük sembolleri: + plakada "＋" karakterleri grid halinde, − plakada "−". Yoğunluk Q'ya orantılı: yük azsa seyrek, çoksa sık (ama taşmasın; satır sayısını ayarla, ayrıca yazı boyutu hafif büyüsün). Eğer devre açık (V=0 veya anahtar açık) → plakalar nötr, sembol yok (veya belki nötr durumu "0" göstermek karışıklık yaratır — hiç sembol koymamak daha temiz). 3. Elektrik alan çizgileri: plakalar arasında yatay oklar, soldan (+) sağa (−). Yoğunluk E ile orantılı: satır sayısı = round(E / maxE * maxRows). Çok küçükse çizgiler az görünür. Ok uçları − plakaya doğru. 4. Pil + tel devresi: alt kısımda pil sembolü, sol ve sağ plakalardan aşağı inen teller, arada bir anahtar (SPST). Anahtar tıklanabilir! Kapalıyken kollar kapalı, yük akışı animasyonlu noktalar teller üzerinde hareket eder (konvansiyonel akış yönü: pil + ucu → sol plaka? Aslında + ucu + plakayı besler). Devre: pil + terminal → anahtar → sağ üst? Simetrik ve anlaşılır yapayım: pil alt ortada, + terminal sağda, − terminal solda; soldaki tel − plakaya... Hmm. Şöyle: sol plaka + (pozitif), sağ plaka − (negatif). Pil sol tarafta: pilin + terminali yukarı, soldan sol plakaya giden tel + terminalden çıkar; pilin − terminali sağdan sağ plakaya. Ama plakalar arasında boşluk var, teller plakaların altından U şeklinde dolaşır: sol plaka altından aşağı, yatay sola, pili geçer... Klasik şema: plakalar üstte yatay durur genelde, ama benim plakalar dikey. Dikey plakalarda devre: her plakanın altından inen tel, altta ortalanmış pil bloğuna bağlanır, pilin bir tarafında anahtar. Teller: sol plaka → aşağı → sola → pil sol terminaline (+). Pil sağ terminali (−) → sağa → yukarı → sağ plaka. Anahtar pili − terminal ile sağ tel arasında olsun; tıklanınca kapanıp açılır. Akış animasyonu: anahtar kapalıyken pil + → sol plaka (dış devrede konvansiyonel akış + dan − ye gider: pil + ucu → sol plaka; sağ plaka → anahtar → pil − ucu). Noktalar bu yönde hareket eder. Şarj olurken plakalara yük birikir (transient: birkaç saniyede RC gibi doldurur — RC = çok küçük, ama görsel olarak ~1 sn'de dolsun, Q_norm animasyonla hedefe gider). Bu "canlı" hissi verir. 5. Sürükleme etkileşimi: sağ plakayı sürükle (yatay) → d değişir. Sol plaka sabit. Plakaların üst/alt kenarından tutunca yükseklik değişsin mi? Bu karmaşık olabilir; bunun yerine plakaların ortasındaki küçük bir "tutamaç" veya plakanın kendisini dikey de sürüklenebilir yapabilirim ama plaka pozisyonu değişmemeli... Daha temiz: plaka yüksekliğini sürüklemek için plakaların alt kenarında küçük bir "kulak" (handle) koyarım ya da: plaka gövdesini dikey sürüklerken yükseklik değişir (üst kenar sabit, alt kenar uzar/kısalır). Sol ve sağ plakalar her zaman aynı boyutta (A aynı). Sağ plakayı yatay sürükle → d; dikey sürükle → yükseklik. Sol plakayı sürüklemez (veyo onu da hem yatay hem dikey aynı anda? Karışıklık). Sol plaka sabit referans, sağ plaka hareketli — sürükleme ekranındaki yatay delta d'yi değiştirir, dikey delta yüksekliği (her iki plaka) değiştirir. Cursor: yatayda ew-resize, kenarlarda ns-resize? Basitçe: move cursor ve ipuçları yazısı "sürükle: mesafe ↔ / yükseklik ↕". Sağ plakanın üzerine gelince cursor 'ew-resize'; üst/alt %25 kenarlarda 'ns-resize' → yükseklik. İyi. Ayrıca slider'lar panelde: d (mm), A (cm²), V (volt). Slider'lar canvas ile senkron. 6. Havadaki belki birkaç parçacık? Alan çizgileri yeter. Arka plan: ince milimetre kağıt grid'i (çok hafif) — teknik föy hissi. Grid çok soluk. 7. Ölçüm: plakalar arasına bağlı bir elektrometre göstergesi? Sol üstte küçük ibreli gösterge: "Elektrometre" ibresi Q ile sapar. Bu güzel bir görsel imza olur! Küçük yuvarlak kadran, ibre açısı Q_norm ile -80°..+80°. Onu canvas içinde çizerim. 8. Sağ panel: - Başlık: "Paralel Plakalı Kondansatör" + formül C = ε₀·A/d - Slider'lar: d (1–100 mm), A (50–2000 cm²), V (0–500 V) - Anahtar butonu (Devre) — canvas'taki anahtarla senkron; ama canvas'taki anahtar tıklanabilir olduğundan buton da olur. İkisi de aynı state'i değiştirir. - Okunanlar: C (F), Q (C), E (V/m), U (J) — büyük mono rakamlar. - Mini grafik: C–d eğrisi (1/d), üzerinde güncel nokta. A ve V değişince eğri ölçeklenir (C_max = ε₀A/d_min; eğri sabit A için). Aslında grafik C vs d olur, A değişince eğri yükselir. Nokta güncel (d, C). Grafik panelde küçük bir canvas (veya aynı ana canvas'ın köşesinde? Panelde SVG/canvas daha temiz). Ayrı küçük canvas ile çizerim. 9. Değer formatlayıcı: - C: pF/nF/µF'e göre (ε₀·A/d; A=2000cm²=0.2m², d=1mm → C=1.77µF; A=50cm², d=100mm → C=0.44pF). Aralık ~0.44pF–1.77µF. Prefix seç: value<1e-9 → pF, <1e-6 → nF, else µF. - Q = C·V: max ~1.77µF×500V=885µC; min ~0.44pF×0=0. pC/nC/µC. - E = V/d: 0–500/0.001=500kV/m. V/m veya kV/m formatı. - U = ½CV²: max ~0.22 J; min ~0. pJ/nJ/µJ/mJ/J. Prefix'li format fonksiyonu yazarım. Layout iskeleti: - body: kağıt rengi, grid doku (CSS ile repeating-linear-gradient çok soluk grid). - header: sol üstte küçük etiket "ELEKTRİK & MANYETİZMA — FÖY 04" gibi teknik detay + büyük serif başlık "Paralel Plakalı Kondansatör" + kısa alt yazı. - main: grid: sol sahne (flex: 1), sağ panel (320-360px). - Sahne: canvas içinde her şey. Kenarlarında çenti/ölçek çizgileri (canvas çizer). - Panel: krem üstüne çizgili föy görünümü; bölüm başlıkları mono küçük caps; slider'lar özel stil (ince çizgi + kare tutamaç — ink estetiği). - Footer: mini not. Slider stili: native input range'i özelleştiririm (webkit/moz thumb): dikdörtgen mürekkep rengi thumb, ince track. Değer etiketi sağda mono. Yük akış animasyonu (şarj): - state.charge (0..1) → hedef: anahtar kapalı && V>0 ? 1 : 0. Lerp: charge += (target - charge) * 0.06 (veya zaman bazlı). Eğer d/A/V değişirse Q hedefi değişir ama charge norm'unu Q_norm = Q/Q_max şeklinde tutmak yerine doğrudan Q'yu lerp'leyebilirim: displayQ += (Qtarget - displayQ)*k. Ama daha anlamlı: gerçek RC transienti: Q(t) = Q∞(1−e^(−t/τ)), τ'yi görsel için ~0.25s seçerim; anahtar açılınca deşarj τ~0.35s ile Q→0. Her frame'de solveQ güncellenir. Anahtar kapalıyken Q∞ = C·V (sürekli güncel). Bu hem fizik hissi verir hem animasyon. - Akış noktaları: teller üzerinde path noktaları; noktalar parametrik konumla hareket eder, hız sabit; anahtar kapalıyken görünürler, açılınca kaybolurlar (ya da hızları yavaşlar). Yön: şarj sırasında + → − doğru. Deşarj yok (anahtar açılınca yük kalır mı? Gerçekte anahtar açılırsa plakada yük kalır! Pil devresinden koparırsa yük korunur. Hmm, fiziksel doğruluk: Anahtar açılırsa kondansatör şarjını korur (izole). Ama benim devremde anahtar pil ile plakalar arasında — açınca plakalar izole kalır, yük korunur! O halde Q anahtar kapanma anındaki değerde mi kalır? Hayır — dikkat: kapasitans değişirse (d küçülür) izole kondansatörde Q sabit kalır, V artar! Bu güzel bir fizik öğretisi ama simülatörü karmaşıklaştırır. Karar: İki mod yerine basit ve öğretici davranış: Anahtar kapalıyken kondansatör pile bağlı → V sabit (pil voltajı), Q=CV. Anahtar açıkken kondansatör izole → Q korunur (kapanma anındaki değer), V = Q/C. Bu gerçekten doğru fizik ve d değiştirince izole kondansatörde voltajın değiştiğini göstermek mükemmel bir eğitim anı! Ama pil devresi izole kondansatörle nasıl gösterilir? Pil hâlâ devrede ama anahtar açık; plakalar telin ucunda asılı, yükler plakalarda kalır, V okunur (Q/C). Alan çizgileri V/d'ye göre. Bu durumda plakaların yükleri Q korunur: d küçülünce Q sabit, V=Q/C artar, E = V/d = Q/(ε₀A) sabit olur! (Gerçek: izole kondansatörde E sabit çünkü Q sabit.) Güzel. V slider'ı ise pil voltajını belirler; anahtar kapalıyken uygulanır. Anahtar açıkken V slider'ı pilin emf'ini değiştirir ama kondansatörü etkilemez (kondansatör izole). Panelde bu netleştirilmeli: "Anahtar açık → kondansatör izole; yük korunur." Ve okunan V (plakalar arası) = Q/C hesaplanır. Pil emf'i ayrı gösterilebilir (küçük, "Pil: x V"). Bu karmaşıklık ama güzel bir derinlik. UI'da durum etiketi: "DEVRE KAPALI — pile bağlı (V sabit)" / "DEVRE AÇIK — izole (Q sabit)". Deşarj yoksa yük nasıl boşalır? "Boşalt" butonu ekleyebilirim (plakaları kısa devre eder → Q→0 animasyonla). Ya da: V slider'ını 0'a çekmek anahtar kapalıyken deşarj eder. Boşalt butonu pratik — küçük bir "Kondansatörü boşalt" text button. Ekleyeyim: panelde "Boşalt" butonu → Q hızlıca 0'a animasyon (deşarj akış noktaları da ters yönde bir an aksın — güzel detay! Deşarj sırasında akış yöni ters). Hmm ama deşarj butonu devreyi fiziksel olarak nasıl modeller? Kısa devre anahtarı (safety discharge). Basitçe Q → 0, ve anlık ters akış animasyonu. Fiziksel makul. Ayrıca: anahtar açıkken d değişirse Q korunur → V değişir. Anahtar açıkken V slider değişmez önemli. Kullanıcı kafası karışmasın diye V slider'ının etiketi "Pil gerilimi (emf)" olsun; plakalar arası gerilim ayrıca okunur. Okunanlar: "Plakalar arası gerilim V", "Yük Q", "Kapasitans C", "Alan şiddeti E", "Enerji U". Pil emf'i anahtar bölümünde küçük gösterilir. Hmm, V okunması: kapalıyken V = emf; açıkken V = Q/C. Basitleştirme riski: iki durum mantığı kullanıcıyı şaşırtabilir. Ama devredeki anahtar görsel olarak varsa ve durum etiketleri açıksa, anlaşılır. Ayrıca başlangıçta anahtar kapalı yapayım (hemen yükler görünsün, ilk izlenim canlı). Başlangıç: anahtar kapalı, d=20mm, A=400cm², V=150V → C=ε₀·0.04/0.02=17.7nF, Q=2.65nC... hmm Q küçük görünür (nC). Görsel yoğunluk normalize edeceğim için sorun değil ama okunan değerler gerçek. Daha etkileyici başlangıç: V=300V, A=1000cm² (0.1m²), d=10mm → C=88.5nF, Q=26.6nC. Yine nC. Fizik gerçekleri böyle; sorun değil, formatlayıcı nC gösterir. Belki µF aralığına girmek için A=0.5m² (5000cm²), d=1mm → C=4.4µF. Başlangıç orta değerlerde olsun. Hmm — ama kullanıcı talebi: "elektrik miktarını yükleri gösterilen" — yüklerin gösterimi önemli. Yük sembolleri Q ile orantılı yoğunlukta. Q=0 → sembolsüz. Sürükleme etkileşimlerini netleştir: - Sağ plaka gövdesi üzerinde mousedown: drag mode belirle: x değişimi → d; y değişimi → plaka yüksekliği (A). İkisi aynı anda? Delta'yı ikisine de uygula: dx→d, dy→height. Evet, ikisini birden destekle — doğal his. Cursor: ew-resize veya move. 'move' kullanayım plaka üzerinde; kenar tutamaçlarında ns-resize? Sadelik: tüm plaka 'ew-resize', ipucu metni "↔ mesafe · ↕ yükseklik". İyi. - d slider ile görsel gap eşlemesi: d_mm ∈ [1, 100] → görsel gap = mapExp? Lineer değil: küçük d'lerde fark görünsün. görsel = 26 + (d_mm/100)^0.6 * 300 gibi güç eğrisi. Ya da doğrudan px = 20 + d_mm * 3 → 1mm=23px, 100mm=320px — lineer basit ve yeterince ayırt edici. Canvas genişliğine göre clamp. Lineer + min offset iyi. - Plaka yüksekliği px h ∈ [90, 380] → A = (h/maxH)*A_max? A ∈ [50, 2000] cm². A ↔ h doğrudan orantılı: h = hmin + (A-Amin)/(Amax-Amin)*(hmax-hmin). Plaka genişliği sabit px (örn. 46px) ama A gerçekten 2D alan olduğundan görselde plaka derinliğini de değiştirebilirim (perspektif yok — teknik çizimde plaka "yüzey alanı" plakanın görünür boyutu). 2D yan görünümde plaka bir çizgi/dikdörtgen; yükseklik ↑ ve genişlik (görüntü düzlemine dik değil...). Basit ve dürüst gösterim: plakayı dikdörtgen olarak göster (yükseklik × "genişlik" = A'yı temsil eden iki boyut): plaka genişliği w ve yüksekliği h öyle ki w·h ∝ A. Örn. kare oranı koru: w=h·(r sabit) ya da w ve h her ikisi ∝ √A. Plaka dikdörtgeni w × h, w·h ∝ A → kare-ish plakalar: side = √(A_px_scale·A). A_px_scale: A=2000cm² → side ~ 340px; A=50cm² → side ~ 54px. side = 54·(A/50)^0.5·... 340/54=6.3, √(2000/50)=6.32 ✓ mükemmel: side = 54·√(A/50). A değişince plakalar büyür/küçülür — görsel olarak çok net! Ve plakaları sürüklerken dikey delta A'yı değiştirir, plaka her iki yönde büyür/küçülür (kare). Ama dikey sürükleme hissi: plakayı yukarı sürükle → büyüsün? "Alt kenarı aşağı çek" mantığı daha sezgisiz ama kare plakada üst+alt aynı anda değişsin (merkez sabit): dikey sürükleme mesafesi |Δy| ile side artar/azalır? Yön: aşağı sürükle → büyüsün (genişleme hissi). Yukarı → küçülsün. Ya da üst kenarı yukarı, alt kenarı aşağı aynı anda... Basit: Δy < 0 (yukarı) → side azalır; Δy>0 → artar. Tamam. Ve "boyut tutamacı": sağ plakanın köşesinde küçük kare tutamaç; oradan sürükleyince köşegene göre ölçeklenir. Ah, köşe tutamacı klasik ve sezgisel: sağ-alt köşede tutamaç, sürükleyince side = f(diagonal). Ama plaka merkezli büyüme merkez sabitli iyi. Karar: plaka merkez sabit; sürükleme yönüne göre: yatay → d, dikey → side (aşağı büyüt). Ayrıca slider. Köşe tutamacına da destek: sağ-alt köşe 12px kutu; sürüklerken side = 2·max(|mx−cx|, |my−cy|). cursor nwse-resize. İyi detay. - Sol plaka: sabit dizi (pozisyon ve boyut sağ plakayla aynı). Sol plaka sürüklenemez (veyo sürüklenirse de aynı hedefi değiştirir? Sadelik: sadece sağ plaka hareketli; sol plaka sabit "referans elektrot"). Hmm ama A değişince sol plaka da büyümeli (A ortak). Evet boyutlar ortak, sadece sağ plakanın x konumu değişir (d). Sol plaka sürüklemesi: yatay sürüklerse d'yi ters yönde değiştirsin (sol plakayı sağa çekmek d'yi azaltır)? Bu da doğal. İkisi de desteklensin: sol plakayı yatay sürükle → d değişir (ters işaretli). Ama karmaşa; sadece sağ plaka sürüklenebilir + ipucu. Sağ plakada küçük "sürükle" etiketi hover'da. Basit tutayım: sağ plaka movable. İpucu metni canvas altında: "Sağ plakayı sürükle: ↔ mesafeyi, ↕ alanı değiştirir". - Alan çizgileri: plakalar arası bölgede yatay çizgiler, satır sayısı = clamp(round(E_norm·18), 0, 18) gibi; E_norm = E/Emax (Emax=500/0.001=500kV/m... aslında E=V/d; kapalıyken V=emf; Emax=500kV/m). Çizgiler plaka yüksekliği içinde ortalı. Ok başları sağa (− plakaya doğru). Yük sembolleri: plaka iç yüzeyinde kolonlar: + plakasının sağ yüzünde (sağ bakan) ve − plakasının sol yüzünde. Yük sembolleri: satır sayısı = round(Q_norm·N_max). Q_norm: Q/Qref; Qref = C_max·V_max = 4.43µF·500 ≈ 2.2mC? Emax durumunda sembol sayısı 14 satır. Normalle: Q_norm = (Q/Qmax)^0.5 (kare kök ile düşük değerlerde de görünür olsun). Sembol boyutu da hafif ölçeklenir. - Elektrometre kadranı: canvas sol üst köşe, r=54: "ELEKTROMETRE" etiketi, ibre açısı = -100°..+100° harita Q_norm^0.5·200−100. Tık işaretleri. Şarj değiştikçe ibre yumuşak hareket eder (lerp). Güzel imza. - Voltmetre? Plakalar arası V'yi gösteren ikinci küçük kadran sağ üstte? Bir kadran yeter; V panelde okunur. Belki iki kadran simetrik güzel olur: sol üst elektrometre (Q), sağ üst voltmetre (V_plates). Canvasın üst köşelerinde iki yuvarlak gösterge — kompozisyon olarak dengeli ve ölçüm aleti hissi güçlü. Yapayım: sol = Elektrometre (Q, µC skalası normalize), sağ = Voltmetre (V, 0–500V skala). İbre açıları lerp ile yumuşak. Mono etiketler. - Pil: alt ortada klasik pil sembolü (uzun çizgi +, kısa kalın çizgi −), emf etiketi yanında mono "ε = 300 V". Anahtar: sağ teller üzerinde, kollar: kapalı çizgi + açık açı. Tıklanabilir hitbox. Hover'da cursor pointer + hafif vurgu. - Tellere akış noktaları: path polyline listesi: pil(+) → sol tel → sol plaka alt. ve sağ plaka alt → anahtar → pil(−). Şarj yönelimi: şarj olurken: pil + ucundan çıkan akım sol plakaya + yük taşır (konvansiyonel akış yönü + → …). Akış noktaları iki ayrı path'te ilerler: path A: pil+ → sol plaka (yön: pil→plaka), path B: sağ plaka → pil− (yön: plaka→pil). Deşarj (boşalt butonu) sırasında yönler tersine döner ve noktalar hızlanır; Q azalır. Nokta sayısı path uzunluğuna göre, hız ~90px/s. Noktalar küçük dolu daire (mürekkep). Anahtar açık → noktalar yok. - Grid arka plan: canvas çiziminde önce soluk grid (24px aralık, rgba mürekkep %5) + kenar cetveli işaretleri (üst kenarda mm çentikleri? Küçük detay, ölçek çentiği üst ve sol kenarda — teknik föy hissi). Orta ölçülü detay. - Yerleşim canvas içinde: - Sahte koordinat: W×H canvas (responsive). Plaka merkezi y = H*0.42 civarı. Sol plaka x = W*0.34 - side/2? Kondansatör ortada: plakalar arası gap görsel g; sol plaka iç yüzü xL, sağ iç yüzü xR = xL + g. Kondansatör grubunu yatay ortalayayım: toplam genişlik = side*2 + g; merkez W*0.5, ama pil devresi altta. g max ~320 + side max ~340 → toplam ~1000; canvas ~ min genişlik. Canvas genişliği panel hariç kalan alan; desktop ~ 900-1100. side max 340 çok büyük olabilir küçük ekranda. side skalasını canvas boyutuna göre uyarla: scale = clamp(canvasW/1000, 0.6, 1.15). Tüm px ölçülerini s ile çarp. Basit yaklaşım: sanal sahne koordinat sistemi (800×560 sabit "paper" birimi) içinde çiz, canvas'a fit ölçekle (letterbox yerine kırpmadan scale+translate). Bu çok daha sağlam: tüm düzen sabit sanal koordinatta, gerçek boyuta ölçekle. hit-test'i de sanal koordinata çevir (pointer koordinatını ters dönüştür). Evet: sanal 900×600 dünya; canvas ar = container boyutu; scale = min(cw/900, ch/600) ... ama canvas tam alanı kaplasın, kenarlarda boşluk olursa hoş değil. Canvas'ı container'a tam oturt, sahne içerik merkezli ölçekle: scale = min(cw/940, ch/620); offset merkeze. Kenar grid'ini tüm canvas'a çiz (dönüşümden bağımsız). İyi. - Hit test: dönüşümlü koordinatla dünya koordinatına çevir, dünya rect'leri ile karşılaştır. Slider ayrı DOM'da (panel) olduğundan sorun yok. - Mini grafik (panel): 220×120 SVG veya canvas. C–d eğrisi: d 1..100mm x ekseni (log mu lineer mi? 1/d eğrisi lineer-x'te hiperbola, log-x'te düzleşir... 1/d log-x'te üstel değil, exp(-ln d)... eğri log-x'te concave azalır. Lineer x en öğretici (1/d hiperbolu net görünür). x lineer 1–100mm, y = C(d) A sabit güncel A ile normalize (C_max = ε₀A/d_min). Nokta güncel d. Deşarj/bağlantı durumundan bağımsız (C sadece geometri). Grafikte y ekseni etiketi "C", x "d (mm)". Çizgi mürekkep, nokta kırmızı dolu. Küçük, temiz. Canvas ile çizerim (ya da SVG path güncelle; canvas daha kolay redraw). Panel içeriği sırası: 1. Başlık bloğu: "PARALEL PLAKALI KONDANSATÖR" zaten header'da. Panel başlığı: "KONTROL & ÖLÇÜM" mono etiket. 2. Formül gösterimi: C = ε₀ · A / d büyük, altında canlı ikame: C = 8.854e-12 × 0.10 / 0.010 = 88.5 nF (mono küçük). Değişince güncellenir — çok öğretici! Bunu mutlaka koyarım: formül ikamesi canlı. 3. Slider grubu: - d — Plakalar arası mesafe: 1–100 mm - A — Plaka yüzey alanı: 50–2000 cm² - ε — Pil gerilimi: 0–500 V (etiketi "Pil gerilimi ε") 4. Devre: anahtar durumu + tıklanabilir switch görseli (DOM'da küçük toggle? Canvas'ta zaten var; panelde de buton: "Anahtarı Kapat/Aç" + durum metni: pile bağlı / izole). Ve "Boşalt" butonu (anahtar kapalıyken bile çalışır: anlık kısa devre deşarjı). 5. Okunanlar listesi (dl benzeri satırlar, ince çizgilerle ayrılmış): - Kapasitans C - Plakalar arası gerilim V - Yük Q - Elektrik alan E - Depolanan enerji U Her satır: sol etiket + sağ büyük mono değer + birim. Değer değişince hafif renk vurgusu? Abartmadan değer güncel zaten. 6. Mini grafik C(d). 7. Alt not: "İpucu: anahtar açıldığında kondansatör izole kalır; d'yi değiştirirsen yük korunur, gerilim değişir." Bir de sahne canvas'ında plakaların yanında ölçü çizgileri (dimension lines, teknik çizim okları): plakalar arası "d = 20 mm" ölçü çizgisi (üstte, iki ok arasında) ve plaka yanında "A = 400 cm²" — boyut çizgileri teknik föy estetiğine çok uygun ve bilgileri sahneye taşır. Mutlaka ekleyeyim: üstte yatay ölçü oku + mono etiket "d = 20.0 mm"; sağ plakanın solunda dikey ölçü "h" yerine A etiketi. A'ya görsel ölçü çizgisi: plaka yüksekliği boyunca sol tarafta dikey çizgi + "A = 400 cm²" (döndürülmüş metin). Renkler: - Kağıt: #f3eee2 (sıcak krem), hafif vinyet? Düz + grid. - Mürekkep: #232019 (sıcak siyah). - Pozitif/kırmızı: #b4362a (vermilyon benzeri, klasik fizik kitabı kırmızısı). - Negatif/teal-mavi: #1f5d63 ya da daha mürekkep-mavi #23547d? Kırmızıyla uyumlu koyu petrol mavi: #1c4f66. Kullanayım: pos #b23a2a, neg #1d5a7a. Tel/pil: mürekkep. Alan çizgileri: mürekkep %45. Yük sembolleri: pos kırmızı, neg petrol. - Vurgu (aktif slider thumb, butonlar): mürekkep koyu; hover kırmızı. - Panel: kağıtla aynı ama ince mürekkep çerçeveli, iç zebra yok. Tipografi: - Fraunces (başlık, italik optik şıklık) — Google fonts. - IBM Plex Mono (değerler, etiketler, formül). - Gövde küçük metinler de Plex Mono olabilir (teknik his) veya "Source Serif"? Sadelik: Fraunces başlık + Plex Mono her şey teknik; uzun açıklama cümleleri için Fraunces'in text ağırlığı güzel olur. body font: Plex Mono 13px teknik panel; açıklama paragrafı Fraunces. Header kompozisyon: - Sol: küçük mono üst etiket "ELEKTRİK · ETKİLEŞİMLİ FÖY" + büyük Fraunces başlık "Paralel Plakalı Kondansatör" + italik alt satır: "Mesafeyi ve alanı değiştir; yükleri izle." - Sağ üstte: formül rozeti? Formül panelde zaten. Header sağında boş kalmasın: küçük "C = ε₀A/d" büyük serif/mono kombinasyonu — güzel. Ya da genel durumu gösteren "Q = C·V" çipi. Header sağ: "C = ε₀ · A / d" mono, büyükçe, altında ince çizgi. Hoş. Erişilebilirlik/etkileşim notları: - Slider'lar label+input. - Canvas pointer events: pointerdown/move/up, setPointerCapture. - Anahtar çift tıklama vs; tek tık yeterli. - Klavye: slider'lar zaten klavye erişimli. - Touch desteği: pointer events kapsar; touch-action: none canvas'ta. Şimdi fizik state'i netleştir: ``` const state = { d: 20, // mm A: 400, // cm² emf: 300, // V (pil) switchClosed: true, Q: 0, // C (güncel, animasyonlu) Qtarget: ..., discharging: false (boşalt animasyonu için kalan süre/yön) } ``` Dinamik: - C = eps0 * (A/10000) / (d/1000) [A cm²→m², d mm→m] - Kapalı: Q∞ = C·emf; açık: Q∞ = Q_frozen (son kapalı değeri; açılınca Q sabitlenir — ama animasyonlu Q zaten o değerde olacaktır çünkü değişmez; AÇIK durumda d/A değişirse Q sabit kalır, V=Q/C değişir). Uygulama: state.Q animasyonlu değişken. Her frame: - kapalıysa: Qtarget = C·emf; açık ve discharging değilse: Qtarget = state.Q (değişmez) → aslında açılınca "frozen" gerekmez çünkü target = mevcut Q → değişmez. Ama d/A değişince kapalıysa Qtarget güncellenir → Q yeni değere doğru akar (pil yeniden dengeler) — doğru fizik: bağlı kondansatörde V sabit, Q=CV değişir. - Boşalt butonu: discharging=true kısa süre; Q hedefi 0'a hızlı lerp (k=0.18/frame) → bitince discharging=false. Deşarj sırasında akış noktaları ters yönde hızlı. - Lerp katsayısı: Q += (target−Q)·(1−exp(−dt/τ)), τ=0.18s. - V_plates = Q/C (C>0 her zaman). Kapalıyken C değişirse Q=CV hedefi → V≈emf (transient boyunca hafif sapma — gerçekçi!). - E = V_plates / (d/1000). - U = 0.5·C·V_plates². - Yük norm görsel: qn = Q / Qvisual_max; Qvisual_max = Cmax_visual·500 = eps0·(2000/10000)·500/(0.001) = 8.854e-12·0.2·5e5 = 8.854e-7 → 0.885µC. Hmm hesap: C = ε₀·A/d = 8.854e-12·0.2/0.001 = 1.77e-6 F (1.77µF). Qmax=1.77µF·500V=885µC=8.85e-4 C. qn = Q/8.85e-4. Başlangıç: A=400cm²=0.04, d=20mm=0.02 → C=8.854e-12·0.04/0.02=1.77e-11 = 17.7nF; Q=17.7nF·300V=5.31µC... wait 1.77e-11·300=5.31e-9 C = 5.31nC. qn=5.31e-9/8.85e-4≈6e-6 → karekök ~0.00245 → sembol sayısı ~0. Sembol görünmez! Hmm. Görsel ölçek problemi: gerçek değer aralığı çok geniş (0 → 885µC), lineer norm çoğu durumda ~0 gösterir. Çözüm: görsel yoğunluk için perceptual ölçek: qn_vis = sqrt(Q/Qmax) yerine log tabanlı ya da Q/Qtypical: tipik çalışma noktası? Eğitimde öğrenciler d, A, V değiştirir; Q aralığı pC–µC. Görsel sembol sayısını böyle haritalandır: satır sayısı n = round(Nmax · f(Q)) f: 0→0, 1nC→~0.15, 100nC→0.5, 1000nC→0.85? log ölçek: f = clamp( log10(Q/1e-12) / log10(1e-3/1e-12) ,0,1 ) = log10(Q/1pC)/9. Q=1nC → 3/9=0.33; Q=885µC → 8.95/9≈1.0. Q=0→0. Bu makul: her an görünür bir yoğunluk farkı olur. Nmax=13 satır. sqrt yerine log kullanayım: n = round(13·clamp(log10(max(Q,1e-13)/1e-12)/9,0,1)). Q<1pC → 0 (pratikte sıfır). Elektrometre ibresi aynı f ile sapar. Voltmetre ibresi: V/500 lineer — sorun yok. Alan çizgileri: E aralığı: V/d: min etkili ~ küçük; Emax=500/0.001=5e5. satır = round(16·clamp(logscale? E>0 ise (log10(E/1)/16)?) E=V/d; V=300,d=0.02→15000 V/m. log10(15000)=4.18; max log10(5e5)=5.7. satır=round(16·4.18/5.7)=12. E=10 → 0. Küçük E'de 1-2 çizgi görünsün: satır = round(16·clamp((log10(E+1))/5.7,0,1))... E=10→1.03·16/5.7≈2.9→3. Hmm E=10 çok küçük gerçekte; 2-3 çizgi ok. Ya da lineer ama V küçükken hep az. Log ölçek görsel olarak daha canlı; kullanayım: rows = round(16 * clamp(log10(max(E,1)+1) / 5.75, 0, 1)). Dikkatli formül testi: E=1e5 → log10(100001)=5.0 → 5/5.75=0.87→14 çizgi. E=15000→4.18/5.75=0.727→11.6→12. E=100→2/5.75=0.35→5.5→6. Makul. Alan çizgileri ayrıca plakalar dışına hafif saçılan fringing çizgileri? Kenarlarda 2-3 kavisli saçılma çizgisi güzel ve fiziksel (fringing field) — küçük detay ama çok "gerçek fizik" hissi verir. Ekleyeyim: her plakanın üst/alt kenarlarından dışa kavisli 2 çizgi (yoğunluğa bağlı görünürlük). Abartmadan. - Sembol yerleşimi: plaka iç yüzeyi boyunca: n satır, satır aralığı = h/(n+1); her satırda 1 sembol mü yoksa 2 mi? Dikey plakalar; iç yüzey = dikdörtgenin kenar şeridi. + plaka iç yüzü sağ tarafında küçük dolu daire içinde "+"? Sadece "+"/"−" mono metinleri şeritte dikey dağılım, x pozisyonu plaka yüzeyine çok yakın (4px içeride), boyut ~10px·(0.8+0.4f). Şerit yerine plaka yüzeyine bitişik sütun. Plaka içinde ortalanmış tek kolon semboller daha okunur: plaka merkez x'inde dikey dizi. Metal plakayı sembollerle "doldurmak" (yük tüm yüzeye dağılır) — plakanın iç yüzey şeridinde 2 kolon? Basit: plaka gövdesi içinde tek merkez kolon dikey dağılım. Tamam. Sembol görünümü: küçük daire (dolu mürekkep-pos / neg) içinde beyaz işaret? Kağıt estetiği: dolu daire kırmızı içinde kağıt rengi "+"; petrol dolu daire içinde "−". Daire r=6-7px. Satır sayısı 1..13. Ayrıca plaka gövdesi rengi: pos plakaya hafif kırmızımsı tint, neg plakaya petrol tint (yük arttıkça tint koyulaşır? alpha f ile). Hoş detay: yük arttıkça plaka hafif renklenir. Neutral'da gri metal. Plaka gövde çizimi: dikdörtgen (w=side·0.42? — kare demiştik w=h=side) — kare plaka görsel olarak çok hantal olabilir; kondansatör görünümü: dikey plakalar genelde daha uzun/ince. Ama A temsili: w·h∝A. w = side·0.5, h = side·2? O halde w·h = side² — orantı korunur: w=0.5·s, h=2·s (aspect 1:4). s ∈ [27,170] → w [13.5, 85], h [54, 340]. Dikey uzun plakalar — kondansatör görünümü ✓. Aspect sabit 1:4, alan ∝ s². s(A) = smin·√(A/Amin)·... Amin=50 → s=27px; Amax=2000 → s=27·√40=170.8 ✓. s = 27·sqrt(A/50). Görsel: A=400 → s=76 → w=38, h=153. d görsel gap: d mm [1,100] → gap px: gap = 18 + d*3.4 → 1mm=21.4, 100mm=358. Ekrana sığar mı? toplam = 2w + gap: Amax,dmax: 85·2+358=528 < dünya genişliği (plan 900) ✓ ama merkezleme: kondansatör grubu + ölçü çizgileri. gap max 358 büyük; ölçek s=canvas/940. Dünya 900 genişse 528 rahat sığar. Yine de gap formülü: gap = 16 + d*3.2 → 1→19.2, 100→336. Tamam. Plakalar dikey merkez y: devre telleri altta ~120px; plaka merkezi y=250 (dünya 900×620?). Dünya boyutlarını netleştir: DÜNYA_W=920, DÜNYA_H=620. - Üst köşelerde kadranlar: r=52, merkezler (70,70) ve (850,70). Plaka üst kenarı: merkez y 250, h max 340 → üst 80, alt 420. Kadran alt 122 — plaka üstü 80'e kadar çıkar çakışır (x olarak plakalar ortada, kadranlar köşelerde → çakışmaz, yeter). - Ölçü çizgisi (d) plakaların üstünde: y = plaka üstü − 26. - Teller: plaka alt kenarından (y=alt) aşağı y=500'e; yatay y=500; pil merkez (460,500); anahtar (620,500). - Alt ipucu metni y=580. - Kadranlar üstte; başlık canvas içinde yok (DOM header var). Pil çizimi (y=500 hattı): pil sembolü x=430-490: uzun çizgi (h=34, +) x=455; kısa kalın (h=18) x=473. Etiket üstte "ε" ve değer altı? Mono küçük "300 V" pilin altında y=522. Devre hat: sol tel: sol plaka merkez altından (x=xC_L) aşağı 500'e, sonra x'e pilin sol terminaline (435) — düz. pil + terminal: hangi taraf +? Konvansiyon: uzun çizgi +. Sol plaka pozitif olacaksa pil + sol tarafta: uzun çizgi sol (x=448), kısa sağ (x=472)? Terminal bağlantıları: tel sol plakadan gelip + terminale. Pili "yönlü" göstermek şart değil; uç işaretleri: pil sol ucunda küçük "+" işareti, sağ ucunda "−". Anahtar: sağ tel üzerinde x=640,y=500: sabit nokta (625,500) ve hareketli kol; kapalı: düz çizgi 625→655; açık: kol yukarı dönük (açı 28°). Terminal noktaları dolu nokta. "S" etiketi? Etiket yok, hover ipucu. Panel butonu da var. Yük akış noktaları path'leri: - pathA (şarjta akım + → sol plaka): pil + terminalden sol plakaya: [ (435,500) → (xCL,500) → (xCL, plateBottom) ]. Konvansiyonel akış pil + dan dış devre üzerinden − ye akar: pil+ → sol plaka (+ plakaya + yük birikir ✓). - pathB: sağ plaka altından (xCR, plateBottom) → (xCR,500) → anahtar (625,500) → (kapanmışsa) → pil − terminal (485,500). Kapalıyken noktalar: pathA yönü pil→plaka; pathB yönü plaka→pil. Devam sürekliliği görsel olarak yeterli. - Deşarj: ters yön + hızlı. Boşalt butonu basılıyken deşarj path'i: kısa devre nasıl çizilir? Görsel olarak teller aynı; noktalar ters akar, Q azalır. Yeterli. Noktalar: her path üzerinde s(t): t += speed·dt/len; nokta sayısı = ceil(len/34). Nokta r=2.5 mürekkep. Kapalıyken görünür, açılınca alpha→0 (fade). Deşarj: alpha 1, speed ×3, yön ters. Alan çizgileri çizimi: plakalar arası bölge: x from xR_L (sol plaka iç yüzü) to xL_R (sağ plaka iç yüzü); satırlar y: plateTop..plateBottom arası eşit dağılım (i/(n+1)); çizgi sol iç yüzeyden başlar, sağa doğru, son %12'sinde ok başı. Fringing: üst satırın üstünde ve alt satırın altında kenarlardan dışa kavisli quadratic curve çiftleri (2 adet her kenardan), alpha düşük; görünürlük rows>3 iken. Yük dağılımı fringing ile: semboller sadece iç yüzeyde. Elektrometre kadranı çizimi: - Dış daire mürekkep 1.5px; iç skala tikleri (0..9 arası 11 tik, -135..+135°? Yarım daire üst: -90..+90 daha klasik. ibre merkez alt pivotta, açı −75..+75). Etiket "Q" ortada altta mono. Tikler. ibre kırmızı. f(Q) ile açı = -75 + 150·f. - Voltmetre: skala 0..500, tikler 0,100,...500 (6 ana tik), ibre açı −75..+75·(V/500). Etiket "V". Alt yazı "plakalar arası". - Kadranlar yarı saydam kağıt dolgusu (arkadaki grid'i hafif gizler) + gölge yok (ink estetiği) — sadece çizgi. Ölçü çizgileri (dimension): - d: y = min(plateTop_L, plateTop_R) − 24; xL iç yüz sol, xR iç yüz sağ; iki yönlü ok; uzatma çizgileri plaka üstünden yukarı; etiket üstünde mono "d = 20.0 mm". - A: sağ plakanın solunda? Sağ plakanın sağ tarafında dikey uzatma çizgileri + ok dikey, etiket döndürülmüş "A = 400 cm²" — ya da etiket düz, sağında. Dikey ölçü sağ plaka dışında x=plateRight+28, plaka üst-alt arası ok, etiket yatay küçük sağda: iki satır "A" ve "400 cm²". Mono 11px. - Ayrıca plakalar etiketleri: "+" plaka üstüne küçük etiket? Plakaların üstünde zaten yükler var. Sol plakanın üstünde küçük mono "ANOT/ Pozitif plaka"? Plakaların altında etiket: "pozitif plaka (+)" / "negatip plaka (−)" — alt y=plateBottom+16. Kapalı devrede pil bağlantıları var; etiketler telin üstünde kalır. Ekleyeyim, küçük mono. İpucu metni canvas altında (DOM'da): "Sağ plakayı sürükle → mesafeyi (↔) ve alanı (↕) değiştir · Anahtara tıkla". Panel mini grafik: 240×110 canvas, devicePixelRatio ölçekli. Eğri: d 1..100 → C(d) normalize C/Cmax → y. Grid: 3 yatay soluk çizgi + x etiketleri 1, 50, 100 mm. Nokta: güncel. Alt yazı "Kapasitans–mesafe ilişkisi (1/d)". DOM panel slider değerleri: slider yanında mono değer gösterimi: örn. "20.0 mm". Şimdi kontrol: slider d değişince canvas plaka konumu güncellenir (state tek kaynak; render fonksiyonu state'ten hesaplar). Drag d/A state'i günceller + slider value senkronize eder. Anahtar durum etkisi UI: - Kapalı: durum metni "Pile bağlı — V plakalar arası ≈ ε" ve V okunan = Q/C (transient dahil). - Açık: "İzole — yük korunur (Q sabit)". - Boşalt butonu her zaman aktif (Q>0 iken). - Ayrıca "Boşalt" when Q≈0 → disabled stil. Header sağ formül: "C = ε₀ · A / d" mono 20px; altında ince "Q = C · V". Ana formül panelde canlı ikame: "C = ε₀ · A / d = 8.85×10⁻¹² × 0.0400 / 0.0200 = 1.77 × 10⁻¹¹ F = 17.7 nF" Üç satır mono, değişince güncellenir. Sayı formatı: A m² 4 anlamlı? 0.0400; d m 0.0200 (d<1mm? min 1mm → 0.001; format: d<0.01 → 3 hane... sabit 4 anlamlı bilimsel yerine: A: A/10000 toFixed mantıklı formatta (0.0400, 0.1000, 0.2000); d: d/1000 → 0.0200, 0.0010, 0.1000. toFixed(4) yeterli. C değeri formatQ fonksiyonu. Format fonksiyonu: ``` function fmtSI(v, unit) { if (v === 0) return "0 " + unit; const abs = Math.abs(v); const steps = [ [1e-12,'p'], [1e-9,'n'], [1e-6,'µ'], [1e-3,'m'], [1,''], ]; for (const [f,p] of steps) { if (abs >= f) { val=v/f; digits = val>=100?1: val>=10?2:3; return val.toFixed(digits)+ " " + p + unit; } } return v.toExponential(2)+" "+unit; } ``` C: [1e-12 pF, 1e-9 nF, 1e-6 µF, 1 F]; abs<1e-12 → pF toExponential. Q: pC/nC/µC/mC. E: V/m veya kV/m: E>=1e3 → kV/m. U: pJ/nJ/µJ/mJ/J. Yük okunan vurgusu: Q satırı vurgulu (kırmızı sol çizgi) — kullanıcı yüklerin gösterimini istedi; okumalarda Q birincil. Slider ayarları: - d: min 1, max 100, step 0.5, value 20 - A: min 50, max 2000, step 10, value 400 - ε: min 0, max 500, step 5, value 300 Etkileşimle senkron: drag sonrası input.value set + değer etiketleri. Şimdi canvas render detay listesi (drawScene): 1. clear, kağıt zaten CSS'te; canvas transparan? Canvas'ta kağıtla aynı arka plan + kendi grid'i. Canvas'ı kapsayıcıda çerçeveli (ince mürekkep border) koyayım — "şekil 1" çerçevesi gibi; köşe etiketi "ŞEK. 1 — devre ve alan" mono küçük çerçeve üstünde. Hoş teknik föy dokunuşu: çerçeve üst solunda etiket şeridi. 2. grid (hafif) 3. kadranlar ×2 4. fringing + alan çizgileri 5. teller + pil + anahtar (+ akış noktaları altta tellerin üstüne çizilir — z sırası: teller, noktalar üstte) 6. plakalar + yük sembolleri 7. ölçü çizgileri 8. plaka etiketleri 9. anahtar hover halkası? 10. durum rozeti? Panelde var; canvas'ta gerek yok. Anahtar tıklama: dünya koordinatında circle/rect hit (640,500) r=26. Cursor pointer. Hover'da kol hafif vurgu + tooltip mini "devre anahtarı"? Küçük etiket hover'da: "anahtar" mono, mouse üstündeyken çiz. Ayrıca plaka hover cursor ew-resize; tutamaç nwse-resize. Sürükleme: - pointerdown: dünya koord p. Hit: sağ plaka rect (genişletilmiş ±8) → mode 'plate'; tutamaç rect (sağ-alt köşe 16×16) → mode 'resize'; anahtar → toggle switch (hemen, drag yok); aksi halde yok. - pointermove: mode plate: dx = p.x - last.x → d_mm += dx/3.2 (gap scale ters); dy → s değişimi: side = s0 + dy·0.5 (aşağı büyüt) → A. Clamp [1,100], [50,2000]. A güncel → slider senkron. Bekle: dikey sürükleme yönü: aşağı sürükle → plaka büyüsün (side artar) → A artar. Yukarı → küçülür. Doğal. Ayrıca yatay: sağ plakayı sağa sürükle → gap artar → d artar ✓. Hmm plaka x konumu: sağ plakayı sürüklerken gap değişir; plaka kendisi hareket eder (sol sabit). Side değişince her iki plaka da büyür (merkez sabit). Sol plaka merkez x sabit (xCLm); sağ plaka iç yüzü = xCL iç + gap; sağ plaka merkez = iç yüz + w/2. Sol plaka iç yüz x: sabit = cxGroup - (gap + w)/2? Grup merkezleme: toplam genişlik = 2w + gap; sol plaka sol kenarı = CX - (2w+gap)/2. CX = 470 (dünya ortası ~460; kadranlarla dengeli: plakalar merkez x 450 diyelim). Sürükleme hissi: sağ plakayı yatay taşımak gap'i değiştirir ✓; dikey taşımak boyutu. AMA plaka merkezi dikeyde sabit mi kalmalı? Side değişince plaka dikeyde büyür/küçülür merkez sabit — sürüklerken plaka parmağın altından kayar gibi hissedilebilir (yukarı sürükleyince plaka küçülür ve parmak "yukarı" plakadan ayrılır ters his). Merkez sabit + aşağı büyüme: parmak aşağı inerken plaka büyür, parmak plakada kalır (üst kenar yukarı, alt aşağı gider) — kabul edilebilir. Alternatif: alt kenar sabit, yukarı büyüme? Yan görünümde "yükseklik değişimi" merkezli makul. Devam. - mode resize (tutamaç): köşeden: side = 2·max(|p.x−cxR|, |p.y−cy|) clamp → side formülü ters: side→s tek boyut? Tanım: s = √(w·h·4)?? w=0.5s, h=2s → s = 2w = h/2. Köşe tutamacı sağ-alt köşe (cxR + w/2, cy + h/2) = plakanın köşesi. Sürüklerken: yeni köşe → w' = 2·(px−cxR), h' = 2·(py−cy) → A ∝ w'·h' ve aspect sabit tutmak istersek s = 2·min(w', h'/4·2)?? Karışık. Basitleştir: tutamaç yalnızca "s" ölçekler: dist = max(px−cxR, py−cy); s = clamp(dist·2, smin, smax). (dist = px - cxR çünkü köşe = (cx + w/2, cy + h/2); yeni s: köşe uzaklığı = (w/2, h/2) = (0.25s, s). max → s = min? dist_x = px − cx = 0.25·s → s = 4·dist_x; dist_y = s → s = dist_y. Yatayda 4× hassas, dikeyde 1×. Ortalama: s = clamp(max(4·dist_x, dist_y)·?) Heterojen. Daha basit: s_new = clamp( s_old · (dist/dist_old) , smin, smax ) — orantılı ölçek, dist = max(dist_x·4? ...) dist tek skaler: d = max(px−cx, (py−cy)); s_new = s_old·d/d_old. Başlangıç dist_old tutamaç pozisyonuna göre zaten (0.25s, s) max → s. OK: s_new = s_old · (max(px−cx, py−cy) / s_old) = max(px−cx, py−cy). Aslında tutamaç konumundan: py−cy = h/2 = s → köşedeyken dist = s. Sürükleme sırasında dist doğrudan yeni s (dikeyde); yatayda px−cx = 0.25·s → köşegen sürüklemede yatay bileşen küçük kalır, dikey belirleyici. s_new = max(px−cx, py−cy) yeterince sezgisel (dikey hareketle ölçek). Ve A = 50·(s/27)². Clamp. - Slider drag vs canvas drag çakışmaz. - pointerup: mode=null. Ayrıca anahtar kapalıyken V slider ε'yı değiştirir → Q target değişir → animasyon. Anahtar açıkken ε slider serbest (pil emf) ama plakalar etkilenmez; okunanlar Q/C. Kullanıcı kafa karışıklığı: açıkken ε slider'ı değiştirmek hiçbir okunanı değiştirmez (plaka V sabit kalır çünkü Q ve C sabit). Hmm "pil gerilimi" okunmuyor o zaman değişimi görünmez... Pil etiketi canvas'ta değişir ✓ ve anahtar kapatınca etkisi görülür. Panelde ε slider etiketinin yanına mini durum notu ekleyebilirim ama gerek yok; pil etiketi sahnede canlı. Bir detay daha: anahtar AÇIK iken d/A değişirse: Q sabit, V=Q/C değişir — panel okumaları ve kadranlar canlı değişir ✓ sahnede alan çizgileri V/d'ye göre... E = V/d = Q/(ε₀A) → d'den bağımsız; alan çizgileri E'ye göre: d küçülür çizgi sayısı aynı kalır (E sabit) ama gerilim artar ✓ fizik doğru. V değişince voltmetre ibresi oynar — güzel öğretici an. Ayrıca "durum rozetinde" panelde açıkken "Q sabit" vurgusu. Sağ panel notu bunu söylesin. Boşalt butonu: "Kondansatörü boşalt" — kısa devre. Basılınca discharging animasyonu (Q→0, ~0.6s), ters akış noktaları. Ayrıca boşaltırken kısa devre tel görseli? Gerek yok; ters akış yeter. Ama kısa devre görsel ipucu: buton basılıyken plakalar arasında "SPARK" küçük çizgi? Aşırı olur; ters akış yeterli. İlk yükleme animasyonu: sahne "çizilir" (stroke animasyonu 0.8s)? intro olarak tüm çizgilerin alpha fade + plakaların hafif yukarıdan yerleşmesi... Basit ve zarif: global intro t 0→1 ease; grid alpha, plakalar y offset (1-t)*20, alpha. Hoş ilk izlenim. Kadranlar da fade. 700ms. Yapayım (global introT, requestAnimationFrame başlangıcında). Animasyon döngüsü: her frame: fizik update (Q lerp), ibre lerp, akış noktaları t ilerlet, draw. RAF sürekli (akış + ibre + çizim değişken olduğu için sürekli çizim makul; canvas küçük-orta, performans ok). Resize: canvas boyutu container'a göre; scale = min(cw/920, ch/620)·? Canvas yüksekliği: CSS ile aspect-ratio 920/620? Kapsayıcı genişlik esnek, height = width·620/920 clamp? Mobilde sahne üstte tam genişlik, yükseklik ~ 60vh. CSS: .scene { aspect-ratio: 920/620; } → canvas fill. DPR çizim. Mobil yerleşim: grid tek kolon; panel altta. Slider'lar tam genişlik. Şimdi sayfa metinleri (Türkçe): - Üst etiket: "ELEKTRİK – ETKİLEŞİMLİ SİMÜLASYON" - H1: "Paralel Plakalı Kondansatör" - Alt: "Plakalar arasındaki mesafeyi ve yüzey alanını değiştir; kapasitansın yükleri nasıl belirlediğini izle." - Şek. etiketi: "ŞEK. 1 — DEVRE, ALAN ÇİZGİLERİ VE YÜK DAĞILIMI" - Panel başlıkları: "GEOMETRİ", "DEVRE", "ÖLÇÜM", "KAPASİTANS — MESAFE EĞRİSİ" - Slider etiketleri: "Plakalar arası mesafe d", "Yüzey alanı A", "Pil gerilimi ε" - Okuma satırları: "Kapasitans C", "Plakalar arası gerilim V", "Yük Q", "Elektrik alan şiddeti E", "Saklanan enerji U" - Buton: "DEVRE ANAHTARI: KAPALI/AÇIK" (toggle) + "Kondansatörü boşalt" - Durum metni: kapalı → "Kondansatör pile bağlı: V sabit, Q = C·V." açık → "Kondansatör izole: yük korunur, V = Q/C değişir." - Alt not: "Anahtar açıkken mesafeyi küçült — gerilim yükselir, elektrik alan değişmez. Bu, enerjinin nereden geldiğini gösterir." - Footer: formüller satırı "C = ε₀·A/d · Q = C·V · E = V/d · U = ½·C·V² · ε₀ = 8.854×10⁻¹² F/m" İkonlar: minimal; butonlar metin ağırlıklı (ink estetiğine uygun). Gerekirse küçük inline SVG (anahtar sembolü, boşalt oku). Lucide CDN yerine inline SVG path'ler — az ikon var. Anahtar butonuna küçük anahtar/kontak SVG, boşalta küçük ok dairesi SVG. Elle path yazarım (basit). CSS ayrıntıları: - :root renk değişkenleri. - body: kağıt bg + çok soluk grid (repeating-linear-gradient iki yön, 24px, rgba ink 4%). Vignette yok. - .sheet max-width 1280, margin auto, padding. - header: flex space-between, alt border 1.5px ink; formül bloğu sağda. - main: display grid, grid-template-columns: 1fr 340px; gap 28px. - .scene: border 1.5px ink; pozisyon relative; köşe etiketi (üst çerçeveye binen küçük kağıt şeridi). - .hint altında mono 11px. - .panel: sol border? "föy" görünümü: panel arka planı aynı kağıt; bölümler arası çizgiler (border-top dashed 1px ink 30%). Başlıklar: mono 10px letterspace 0.12em, üst çizgi. - Slider custom: ``` input[type=range]{ -webkit-appearance:none; background:transparent; } ::-webkit-slider-runnable-track{ height:2px; background:#...ink30; } ::-webkit-slider-thumb{ -webkit-appearance:none; width:14px;height:22px; margin-top:-10px; background:var(--ink); border-radius:2px; cursor:ew-resize; border:none; } ``` - Okuma tablosu: her satır: flex; sol etiket mono 11px; sağ değer mono 15px bold + birim; alt ince çizgi; Q satırı: sol kenar 3px kırmızı + değer kırmızı? Vurgu abartısız: Q değeri kırmızı, diğerleri mürekkep. - Butonlar: mono uppercase, border 1.5px ink, bg transparent, hover: bg ink + kağıt renk text; aktif durum anahtar: "KAPALI" dolu stil (bg ink, text kağıt). - Mini grafik canvas border üst çizgi. Şimdi tüm sayısal çizim parametrelerini toparlayayım: Dünya: W=920, H=620. s (görsel ölçek) = min(cw/920, ch/620). Kadranlar: (86,86) r=54; (834,86) r=54. Plakalar: CX=450. sol plaka: xL_left = CX − (w + gap + w)/2? Toplam = 2w+gap. solLeft = CX − (2w+gap)/2. sol iç yüz = solLeft + w. sağ iç yüz = sol iç + gap. sağ plaka: xR_left = sağ iç; xR_right = sağ iç + w. Plaka merkez y: cy = 268. h = 2s; üst = cy − s; alt = cy + s. gap = 16 + d·3.2 → d=20 → 80; d=1→19.2; d=100→336. w = 0.5s; s = 27√(A/50) → A=50→27; 2000→170.8; w=85.4, h=341.6 (üst=97, alt=439). Tellere kadar: alt 439 + etiket; teller y=505 civarına inmeli: plaka alt max 439; tel başlangıç = plaka alt + 0 → dikey çizgi plaka alt merkezinden (ama plaka alt merkez x: sol plaka merkez x = solLeft + w/2). Tel: (x, plakaAlt) → (x, 505) → pil/anahtar hattı y=505. Pil merkez (450, 505)? Pil CX ile hizalı ✓. pil: sol terminal 424, sağ terminal 476; çizgiler x=438 uzun(+), x=462 kısa(−). Telller: sol tel: sol plaka merkez x → aşağı → y=505 → sağa x=424'e. Pil arası tel 424→438? Terminal çizgisi: yatay tel pilin altından değil üstünden: klasik çizim: yatay hat y=505 üzerinde: sol tel x_s→438; pil sembolü 438..462 dikey plakalar; sağ tel 462→anahtar(620)→sağ tel x_sR. Anahtar: nokta A (585,505) sabit, kol 585→620 kapalı; açık: kol 585'ten yukarı-açı. Aslında anahtar "kırılma" noktası: sol terminal (585,505) ve sağ terminal (620,505) arasındaki kol. Kapalı: çizgi tam; açık: kol (585,505)'ten 620,505'e değil, yukarı 35° döner: uç = 585 + 35·cos(−55°), 505 − 35·sin(55°) → (605, 476) civarı. Terminal daireleri r=3.5 dolu. Pil etiketleri: "+" işareti uzun çizgi üstünde küçük (x=438−10? üstte y=480 solunda), ε etiketi: "ε = 300 V" pil altında y=530 mono 12. Terminal işaretleri: pil üstü yerine: uzun çizginin üst ucuna küçük "+", kısa çizginin altına "−"? Standart: + uzun çizginin yanında. Koy: + (x=432,y=490), − (x=468,y=490). Hmm pil sembolü y=505 dikey: uzun çizgi x=438, y 488..522; kısa x=462, y 496..514. + işaret uzun çizginin üstünde (438, 480), − kısa çizgi altında (462, 530)? Alt ε etiketiyle çakışır. + ve − ikisini de üstte küçük koyarım: "+" x=433 y=483; "−" x=467 y=483. ε etiketi altta (450, 536) "ε = 300 V". Sağ tel: 462→585 (anahtar), 620→x_sR merkez, yukarı plaka alt. x_sR = sağ plaka merkez x. Sol tel: 424→x_sL. sol terminal: pil + (uzun çizgi x=438) — tel 424'te mi 438'de mi biter? Tel pil plakasına dokunmalı: uzun çizginin üst/alt ucuna bağlanır ama bu yatay hat; klasik pil devresi: hat y=505 pil sembolünde kesilir, çizgi x=438 uzun çizginin üst ucundan (y=488) başlar?? Karmaşıklaşıyor. Basit ve yaygın: yatay hat y=505; pil dikey sembolü hattı keser: sol hat x_sL→436; pil: uzun dikey (438, 486..524), kısa dikey (462, 494..516); sağ hat 464→.... (hat pilin ortasından geçmez; iki parça tel). + işareti: (430, 478) küçük "+"? pilin üstünde sol tarafta. Bunu çizerim; okunur. Akış path'leri: - pathA: [(x_sL, plateAlt_L), (x_sL, 505), (436, 505)] — şarjta yön: pil+ (438) → sol plaka: yani (436,505)→(x_sL,505)→(x_sL, plateAlt). - pathB: [(x_sR, plateAlt_R), (x_sR, 505), (585, 505)] + [ (620,505), (464,505) ] — anahtar kapalıysa tek path: sağ plakadan pil − ye: (x_sR,alt)→(x_sR,505)→(585,505)→(kapalı köprü)→(620,505)→(464,505). Kol üzerindeki noktalar kapalı çizgide düz. Değerlendirmeler: akış yönü şarj: pathA ters (pilden plakaya), pathB ileri (plakadan pile). Parametrize: her path noktalar dizisi; t ∈ [0,1) tüm polyline üzerinde arc-length parametrik; yön işareti. Kolonlarda nokta: spacing 34px, faz ilerler: offset = (speed·time) % spacing. Path çizim: teller mürekkep 2px. Anahtar kapalı köprü çizgisi 2px. Nokta hız: şarj sırasında hız ve görünürlük: Q transient sırasında akış güçlü; dengede (Q hedefe ulaştıysa) akış durur! Gerçekte dolu kondansatörde akım yok. Bu çok öğretici: şarj sırasında noktalar akar, dolunca durur. Uygulama: akış hızı ∝ |dQ/dt| (transient) + hiç dursun mu? Dengede akım 0 → noktalar sabit/soluk. Şarj hızı: |Q_target − Q|; akışSpeed = k·|ΔQ|/Qmax·base. ΔQ büyük → hızlı akış; Δ→0 → durur. Alfa da Δ ile. Deşarj aynı. Bu gerçekçi ve imza detayı ✓. Ama tamamen durursa sahne ölü görünür; dengede noktalar çok soluk yavaş "termal" jitter? Hayır — akım yoksa nokta yok; sadece şarj/deşarj anında akış. d/A değişince (kapalıyken) Q hedefi değişir → yeniden akış ✓ her etkileşim canlı tepki verir. Süper. Elektron vs pozitif akış yönü: konvansiyonel. Nokta rengi mürekkep; ayrıca plakalara "yapışan" küçük ok animasyonu? Yeterli. Yük sembolleri çizimi: plaka iç yüzü sütunu: semboller dikey dizi, plaka merkez x'inde (plaka içinde): pos plaka: "+" karakterleri mono bold; rows n = round(2 + f·11) (f = Q/Qvis ölçek sqrt). f=0 → n=0 (nötr: hiç sembol çizme? nötr plakayı göstermek için "nötr" durumu — sembol yok, plaka tint yok). spacing = h/(n+1). Boyut fontSize = 13 + 4·f. alpha = 0.35 + 0.65f. Plaka tint: pos plaka fill'e çok hafif kırmızı overlay alpha 0.05+0.10f; neg petrol aynı. Sembol karakteri: "＋"? Kullan "+" text, mono font, neg: "−". Renkler: pos: kırmızı (#b0342a gibi), neg: petrol (#2a5f6e). Plaka gövde: fill kağıttan koyu gri-kağıt (#e7e0d0), stroke mürekkep 2px; iç doku: dikey tarama? Yatay tarama çizgileri (her 6px, alpha 0.06) — metal folyo hissi. İç yüz kenarına kalın iç çizgi (yüzey vurgusu). Fringing çizgileri: sol plaka iç yüz üst köşesinden dışa kavis: start (xL_i, top+2) → control (xL_i−18, top−6) → end (xL_i+30, top−16)?? Alan çizgileri dışa yayılmalı: + yüzeyden çıkan çizgiler kenarlardan dışa kavisle − yüzeye. Basit iki kuadratik her kenar: üst: M(xL_i, top+4) Q(xL_i+gap*0.3, top−14) (xR_i, top+4)? Ama xR_i sabit değil... Bölge üstünde birkaç kavisli çizgi (y kadran sol 780 çakışır!! Sağ üst kadran (834±54=780..888) x; sağ plaka sağ kenarı max 861, üst y=98 — kadran alt 140 → çakışma bölgesi x 780..861, y 98..140. Çakışabilir görsel olarak plaka kadranın üstüne biniyor (çizim sırası plakalar sonra? kadranlar önce çizilirse plaka üstte — kötü). Çözüm: plaka üst sınırı: plakaların dikey merkezi cy biraz aşağı: cy=280 → üst=280−170=110; hâlâ 110<140 çakışma. Ya da sahne genişliği artır / plaka max s küçült: s max = 150 (side max 300): A max 2000 → s=150: w=75, h=300, üst=130, alt=430; sağ kenar: solLeft = 450−(150+gap)/2 = 450−75−gap/2 = 375−gap/2; gap max 336 → solLeft=207; sağ iç = 207+75+336=618; sağ kenar = 618+75=693 < 780 ✓. Çakışma yok. s max 150 ile A→s eşlemesi: s = 27·√(A/50): A=2000 → 27·6.32=170 → clamp 150. Ters: A=50+(s/27)²·50: s=150 → A=3095 > 2000 → drag clamp A→s: s(A)=min(27√(A/50),150)?? O zaman A 2000 → s=150; s=150 → A=3095 çelişki; clamp'i A eşlemesine entegre: s = smin + (A−Amin)/(Amax−Amin)·(smax−smin)? Lineer eşleme daha basit ve çelişkisiz: A=50→s=30; A=2000→s=150. Alan algısı: A alan = w·h = 0.5s·2s = s² → lineer s → A'ya göre alan ∝ s² çift hızlı büyür; görsel plaka "alan" hissi A ile lineer olsun istersek s ∝ √A: s=30√(A/50): A=2000 → 30·6.32=189 >150. Orta yol: s = 30·(A/50)^0.55? Karmaşık. Sadelik: s lineer A: s = 30 + (A−50)/1950·120 → A=400 → s=57.2; A=2000→150. Görsel fark algılanır; mükemmel fiziksel doğruluk şart değil (görsel bir temsil), plaka etiketi gerçek A'yı yazar. Kabul: lineer eşleme, çelişkisiz, drag tutarlı (A değişince s lineer). Ama kare kök daha doğru "alan" hissi verirdi... Fark: A 400→2000 (×5): lineer s ×2.63; kare kök ×2.24; alan w·h: lineer (s²) ×6.9; √A (s² ∝ A) ×5 ✓ doğrusal alan hissi √A eşlemesi. √A + smax clamp yerine smax'i Amax ile uyumlu seç: smin=24, smax=190?? üst y: cy−s: s=190 → 268−190=78 → kadranla çakışır x=780 bölgesinde: sağ kenar: solLeft = 450−(190+336)/2 = 450−263=187; sağ iç=187+95+336=618; sağ kenar 618+95=713 <780 ✓ çakışmaz! (Çakışma hesabı s=150'de yanlışmış: yeniden: solLeft = CX − (2w+gap)/2; 2w+gap = s + gap (çünkü 2w = s). s=190, gap=336: solLeft = 450−263=187 ✓; sağ kenar = 187 + s + gap + ... sol iç = 187+95=282; sağ iç = 282+336=618; sağ kenar = 618+95=713 ✓ < 780. Üst = 268−190=78 < kadran alt 140 ama x 187..713 kadran x 32..140 ve 780..888 → x çakışmaz ✓. Alt = 458 → tel başlangıç 458, hat y 505 → kısa dikey tel 47px ok. s=190, h=380; alt 458; ölçü çizgisi üst y = 78−24=54 — kadran y 32..140 x 187'den sonra... ölçü çizgisi x 282..618 arası y=54: kadran x aralıkları dışında ✓. Karar: s = 24·√(A/50) → A=50→24 (çok küçük plaka 12×48 px), A=2000→24·6.32=151.7; istediğim 190 idi: s = 30√(A/50): A=50→30, 2000→189.6 ✓. smin=30. s=30: w=15,h=60 küçük ama okunur; semboller min plakada 2-3 satır ok. Gap: d lineer: gap = 18 + d·3.0 → d=1→21, d=100→318. Toplam max genişlik: s+gap = 190+318=508; solLeft=450−254=196 ✓ sahne içi (kadran 780'den uzak). cy: 268. Kadran merkez y=86, r=54 → alt=140. Plaka üst min = 268−190=78 < 140 ama x çakışmıyor ✓. Ölçü çizgisi y = üst−26: 78−26=52 → ok (kadran x dışında). Teller y=505; alt plaka max 458; ✓. Pil ε etiketi 536; ipucu DOM'da ayrı; dünya alt 620: alt bilgi çizgisi? y=575 küçük merkez metin: "sürükle: ↔ mesafe · ↕ alan" ipucu canvas içinde mi? DOM .hint daha temiz. Canvas altında ince cetvel çizgisi? Gerek yok. Anahtar pozisyonu: hat y=505; anahtar terminaller (600,505) ve (640,505); sağ tel 464→600; sağ plaka merkez x_sR: max 618+95/2? x_sR = sağ iç + w/2 = 618+95 = 713 → tel 640→713 dikey yukarı plaka altı 458. Kapalı kol 600→640 düz çizgi; açık: kol 600'den yukarı 40° döner: uç (600+40cos(−50°)=626, 505−40sin(50°)=474). Anahtar etiket "S" (620, 540) mono italic? Küçük "S" altında. Anahtar hover hitbox: (620,505) r=32. cursor pointer. Ayrıca panel toggle butonu aynı state. Sağ plaka drag hitbox: sağ plaka rect ± 6 genişletme. Sol plaka da sürüklenebilir mi? Sol plaka "sabit elektrot" — sürüklenemez ama neden olmasın: sol plakayı sürüklemek de gap değiştirir (karşılıklı yaklaşma)? Tek movable sağ plaka daha net (ölçü çizgisi sağa hareket eder). Sol plaka tıklanınca hiçbir şey olmaz — cursor default. İpucu metni "sağ plakayı sürükle". Mini grafik: panelde 300×150 canvas: x: d 1..100mm (lineer), y: C 0..Cmax (Cmax = ε₀·A/dmin güncel A ile) — A değiştikçe eğri yeniden ölçeklenir; etiket y ekseni "C (nF)" dinamik prefix? Basit: normalize y 0..Cmax, etiket Cmax değeri köşede. Nokta: (d, C). Eğri: 100 örnek nokta C(d)=ε₀A/d → 1/d şekli; x lineer. "C ∝ 1/d" notu. Çizgi mürekkep 1.5px, nokta kırmızı r=4 halka + iç dolu. Alt eksen tik 1, 25, 50, 75, 100 mm; sol üst etiket Cmax örn "≈ 443 pF (A sabit)". Panel ölçüm değerleri için ufak "delta" animasyonu: değer değişince flash? Mono değerler zaten sürekli değişiyor; abartmayayım. Ama Q değeri değişiminde yumuşak sayaç (displayQ zaten fizik state — panel displayQ kullanır ✓ animasyonlu doğal). Enerji U: ½CV² — izole durumda d küçültünce U artar (iş yapıldı) ✓ öğretici. Not metni bunu söyler. Şimdi kod yapısını yazayım. HTML iskelet: ``` meta charset, viewport Paralel Plakalı Kondansatör — Etkileşimli Simülatör Google fonts: Fraunces (600,700 + italic?), IBM Plex Mono (400,500,600,700)

ELEKTRİK · ETKİLEŞİMLİ SİMÜLASYON · FÖY 04

Paralel Plakalı Kondansatör

Plakalar arasındaki mesafeyi ve yüzey alanını değiştir; kapasitansın, plakalarda biriken yükü nasıl belirlediğini izle.

C = ε₀ · A / d

Q = C · V · U = ½ · C · V²

ŞEK. 1 — DEVRE, ALAN ÇİZGİLERİ VE YÜK DAĞILIMI

Sağ plakayı sürükle: ↔ mesafe, ↕ yüzey alanı · devredeki S anahtarına tıkla · kulak tutamacından ölçekle

``` Panel içerik: ```

GEOMETRİ

slider d: label "Plakalar arası mesafe · d" value "20.0 mm" range 1..100 step 0.5 slider A: "Yüzey alanı · A" "400 cm²" range 50..2000 step 10 (kulak tutamacı notu küçük)

DEVRE

slider ε: "Pil gerilimi · ε" "300 V" 0..500 step 5

Kondansatör pile bağlı: V sabit; yük Q = C·V.

ÖLÇÜMLER

satırlar: C, V, Q(vurgu), E, U — her satır:

C — kapasitans1.77 nF

ikame satırı:

C = 8.85×10⁻¹² × 0.100 m² / 0.020 m = 4.43×10⁻¹⁰ F

C — d EĞRİSİ (A SABİT)

C ∝ 1/d — mesafe yarıya inince kapasitans iki katına çıkar.

``` Şimdi JS: ``` const EPS0 = 8.854e-12; const state = { d: 20, A: 400, emf: 300, closed: true, Q: 0, Qprev:0 }; C = EPS0 * (A/1e4) / (d/1e3); // A cm²→m²: /10000; d mm→m: /1000 Qtarget = closed ? C*emf : state.Q (frozen); ``` Zaman bazlı güncelleme: ``` function step(dt){ const C = cap(); let Qt; if(state.closed) Qt = C*state.emf; else Qt = state.Q; // izole: sabit // transient: tau const tau = state.closed ? 0.22 : 0.0; // closed: charge towards Qt const k = 1 - Math.exp(-dt/0.20); state.Q += (Qt - state.Q)*k; // deşarj butonu: discharge flag → Q → 0 with its own approach } ``` İzole durumda closed=false → Qt = state.Q → değişmez ✓. Ama ilk karelerde Q=0, kapalı → dolum ✓. Deşarj: dischargeActive: hedef 0: state.Q *= exp(-dt/0.12) hızlı; bittiğinde (|Q|<ε) 0'a sabitle, flag off, switch pozisyonu? Deşarj fiziksel olarak: anahtar açıkken plakaları kısa devre etmek → anahtar hâlâ açık görünür ama deşarj oldu. Buton "BOŞALT": Q→0 animasyon, akış ters yönde bir an (deşarj akımı: plakadan çıkar → tellerde ters yönde; pozitif yükler + plakadan pil üzerinden − plakaya? Kısa devre telleri: + plaka → tel → − plaka ters akış). Deşarj animasyonu: akış noktaları pathB yönünde? Deşarj devresi pil üzerinden mi? Basit görsel: akış noktaları ters yönde teller boyunca bir an (yön işareti negatif). Yeterli. Boşalt butonu enabled durumu: Q>%1 Qmax? disabled style her zaman çalışır; state'e göre update. Boşalt butonunun "kapalı devre" olmasına gerek yok — her durumda boşaltabilir (izole kondansatörün uçlarına direnç dokunmak gibi). Akış animasyonu: ``` const flow = { phase: 0, strength: 0 }; step: dQ = state.Q - state.Qprev (per frame normalized): strength = clamp(|dQ|/dt / Qref, 0,1); Qref = Cmax·500 (885µC). ``` dQ/dt şarj başında ~ Q/τ... hesap: Q hedef Q_t; dQ/dt ≈ (Qt−Q)/τ. |Qt−Q| max ~ 885µC? emf 500, C max 1.77µF → Q 885µC ✓. strength normalize: (|Qt−Q|/885µC)·2 clamp 1. Alfa = strength. Noktalar strength>0.02 iken çizilir; hız = 120·(0.3+0.7strength) px/s · yön. Yön: şarjta (+): pathA yönü pilden plakaya; deşarjta: ters. dQ>0 → şarj. Deşarj flag'inde dQ<0 → ters. Ama kapalı devrede dQ>0 her zaman şarj; izolede deşarj (buton) → ters akış. Noktalar pathA ve pathB üzerinde. pathA: pil→sol plaka; pathB: sağ plaka→pil. Noktalar için iki ayrı polyline (dünya koord, dinamik). offset aynı phase ortak. flow.phase += dir·speed·dt·strength_norm... Basitçe: flowPhase += dt·(speed/distance); nokta konumu = ((i/N + phase) mod 1)·len. N = floor(len/34). Anahtar açık → akış yok (strength 0 zaten — kapalı değilse dQ 0; deşarj hariç ama deşarj devresi anahtar açıkken tel üzerinden mi? Anahtar açıkken tel kopuk; deşarj ayrı yol görsel olarak: anahtar açıkken boşalt → noktalar yine tellerde görsün mü? Görsel tutarlılık: deşarj için kol kapalı çizilsin? Karışıklık. Pragmatik: boşalt sırasında noktalar tellerde göster (anahtar kolu da kapanmış gibi çiz) — "kısa devre yapıldı" hissi. Kol geçici kapalı görünür deşarj boyunca. Bunu discharging flag ile: drawKey closed = state.closed || discharging. Noktalar deşarjta ters yönde ✓. Anahtar S'ye tıklanınca: state.closed toggle — Q korunur (izole) ya da dolum başlar. Toggle'da discharge iptal. Kadranlar ve değerler draw fonksiyonunda güncel state'ten. Drag etkileşimi: ``` pointerdown: hit test (dünya koord): - sağ plaka rect (expand 10) → dragMode 'plate': başlangıç d, A kaydet; move: d_mm = clamp(d0 + (dxWorld/gapPerMm)·? gap = 18+3·d → dd = dx/3 → d = d0 + dx/3. A: dyWorld>0 (aşağı) → A artar? Sezgi: plakayı aşağı çekmek = alan büyümesi? Hmm plaka merkez sabit, plaka aşağı sürüklenirse alt kenar aşağı iner — "uzatma" hissi; yukarı sürükleme = küçültme. dy>0 → A += dy·kA. kA = (Amax−Amin)/(smax−smin)/2·? s değişimi: ds = dy (s alla tensore: alt kenar aşağı iner ds, üst sabit? Merkez sabit demiştik → ds = dy·1? Sezgisel: plakayı tutup aşağı çekince plaka tümüyle aşağı kaymasın; merkez sabit, alt kenar dy kadar iner üst dy yukarı? O zaman ds = dy·1 (alt +dy, üst −dy) — plaka "esner". his: iyi. ds = dy → dA = ds/(smax−smin)·(Amax−Amin) = dy/120·1950. clamp. - resize handle: sağ-alt köşe kutusu (sağ plaka sağ-alt köşe 14px): mod 'resize': s = 2·max(|p.x−cx|, |p.y−cy|) clamp → A ters eşle. A = Amin + (s−smin)/(smax−smin)·(Amax−Amin). s clamp [smin,smax] → A clamp doğal. Aynı eşleme her yönde. - anahtar → toggle closed (click). pointerdown'da mı pointerup mı? Click hissi: pointerdown toggle + haptic yok; pointerdown'da toggle yeter (basit). ``` Cursor yönetimi: pointermove (drag yokken) hover hit → canvas.style.cursor. Drag sırasında pointermove pointer capture (canvas.setPointerCapture) — touch için de pointer events kullan ✓ mobil uyumlu. Ayrıca plaka üstüne hover'da ipucu mini etiket çizmek? Gerek yok; DOM hint var. drawScene detay sırası: 1. clear; kağıt zaten CSS'te — canvas şeffaf? Canvas kendi arka planını çizsin: hafif kağıt tonu + grid (canvas içinde çizersem resize ile uyumlu). Arka plan: fillStyle '#f6f1e5' (sayfa ile aynı) → görünmez kenar; grid: 26px, rgba(30,28,22,0.055); her 130px'te koyulaştırılmış çizgi 0.09. Canvasın dış kenarı DOM'da 1.5px mürekkep çerçeve (CSS border) + köşe işaretleri? CSS border. 2. grid 3. teller + pil + anahtar (alt) 4. alan çizgileri (plakalar arasında) — plakalardan ÖNCE mi sonra mı: çizgiler plaka iç yüzeylerinden başlamalı; plakalar üstüne çizilirse uçları gizlenir → önce çizgiler sonra plakalar (uçlar plaka kenarında biter, plaka kenarı üstünü örter — temiz ✓). Fringing kavisler de önce. 5. plakalar + tarama + tint + yük sembolleri 6. ölçü çizgileri + etiketler (üstte d, sağda A) 7. kadranlar 8. akış noktaları (tellerin üstünde) 9. durum rozeti? sol alt köşe küçük mono: "PILE BAĞLI — V SABİT" / "İZOLE — Q SABİT" rozet (çerçeveli küçük etiket, alt sol). Panelde de var; canvas'ta da durum rozeti iyi (sahne kendi anlatır). Alt-sol (24, 560) mono 11px kutu. Text ölçüleri: dünya biriminde; ctx transform: scale = canvasW/900 · dpr? Kolay yol: canvas gerçek piksel = cssW·dpr; ctx.setTransform(dpr·scaleX? Sanal 900×620 sabit → fit: sx = cw/900, sy = ch/620 — en-boy korunmalı: container aspect'i sabit CSS ile: .scene { aspect-ratio: 900/620 }. Canvas iç boyutu = clientWidth·dpr × clientHeight·dpr; ctx.scale(dpr·cw/900). Pointer koordinat dönüşümü: worldX = (e.offsetX)/cw·900... offsetX css px → dünya = offsetX·(900/cw). Tamam. Responsive: mobilde (<880px): panel altta, sahne üstte aspect korunur. Sheet max-width 1240. Font yükleme: canvas metinleri "IBM Plex Mono" — font yüklenmeden çizilirse fallback; document.fonts.ready.then(redraw loop zaten RAF sürekli ✓ sorun yok. RAF loop sürekli (animasyonlar) — performans ok (basit çizim). Şimdi panel slider'ların state ile senkronu: slider input event → state set → UI değer label güncelle. Drag canvas'ta değişince slider.value güncelle + label. Slider görünümü özelleştirme CSS: ``` input[type=range]{ -webkit-appearance:none; background:transparent; height:26px; } ::-webkit-slider-runnable-track { height:2px; background:#1e1c16; } ::-webkit-slider-thumb { -webkit-appearance:none; width:14px;height:20px; background:#1e1c16; border:0; margin-top:-9px; border-radius:1px; cursor:ew-resize; } + moz karşılıklar. ``` Thumb: dikdörtgen mürekkep blok ✓ ink estetik. Hover'da kırmızı? Hover: background #b0342a. Slider satırı: label üstte (mono küçük, letterspace), değer sağda mono bold; altta input tam genişlik. Değer etiketleri id'li span. Butonlar: mürekkep çerçeve, mono küçük; aktif anahtar butonunda dolu mürekkep arka plan beyaz yazı? Anahtar butonu: "S — KAPALI/ACIK": kapalı → dolu stil (devre aktif görsel paralel). Boşalt: çerçeveli, disabled → soluk. modeNote: kapalı → "Pile bağlı — plakalar arası gerilim V = ε sabit; d veya A değişirse Q yeniden dengelenir." açık → "Devre açık — kondansatör izole: yük Q korunur; d küçülürse gerilim V = Q/C yükselir." (renk vurgu). subst satırı: "C = 8.85×10⁻¹² · 0.0400 m² / 0.020 m = 1.77×10⁻¹⁰ F" mono 11px, alta sürekli güncel. Superscript unicode "⁻¹²" kullan. Ölçüm satır değerleri id: vC, vV, vQ, vE, vU. Q satırı vurgulu (kırmızı işaret ● veya sol kenar çizgisi kırmızı). Footer: ince üst çizgi; soldan: "C = ε₀·A/d — Q = C·V — E = V/d — U = ½CV²"; sağdan: "ε₀ = 8.854×10⁻¹² F/m · hava dielektriği". Küçük detay: header formül alanında "C = ε₀ · A / d" Fraunces italik büyükçe. Şimdi renk sabitleri: --paper: #f5efe2; --paper2: #efe7d6 (panel hafif farklı mı? panel aynı kağıt, sadece çizgilerle ayrılır — sağ panel sol sahneden ince dikey çizgiyle ayrılır; panel arka planı bir ton daha açık #f8f3e8?) Basit: aynı kağıt; sahne canvas'ı hafif farklı ton (#f7f2e6) + border. Panel: border-left 1.5px ink. --ink: #211e17; --ink-soft: rgba(33,30,23,.55); --red: #b3372c (pozitif); --petrol: #14555f? Neg plaka ve soğuk vurgular: petrol mavi-yeşil #1d5c66. --accent-hover vb. Vurgu kullanım: pos yükler kırmızı, neg yükler petrol; ibre kırmızı; slider thumb mürekkep; aktif durumlarda kırmızı nokta rozeti. Başlık: Fraunces 700, clamp(26px, 3.4vw, 40px), letter-spacing hafif negatif. Kicker: mono 10px letterspace 0.22em. Canvas ölçü metinleri: '11px "IBM Plex Mono"'. Şimdi tüm çizim fonksiyonlarını kafamda kodlayayım (uzun ama net): ```js const W=900, H=620; const cv = document.getElementById('cv'), ctx = cv.getContext('2d'); let dpr=1, sc=1; function resize(){ const r = cv.getBoundingClientRect(); dpr = window.devicePixelRatio||1; cv.width = Math.round(r.width*dpr); cv.height = Math.round(r.height*dpr); sc = cv.width/W; // uniform (aspect CSS ile korunuyor) } new ResizeObserver(resize).observe(cv) veya window resize + ayrıca aspect CSS sabit olduğundan width değişimi yet. world metinler: ctx.font boyutları dünya birimi; transform: ctx.setTransform(sc,0,0,sc,0,0). Pointer: offsetX * (W/r.width). ``` Geometry helpers: ```js function geo(){ const s = 30*Math.sqrt(state.A/50); // plaka "boyut" birimi const w = s*0.5, h = s*2; const gap = 18 + state.d*3; const cy = 268; const innerL = 450 - (w + gap)/2; // çünkü toplam 2w+gap; sol iç yüz = merkez − gap/2 − w? ``` Dikkat: merkez CX = 450; plakalar simetrik: sol plaka [innerL−w, innerL], sağ plaka [innerR, innerR+w], innerR = innerL+gap. Simetri: sol plaka dış = innerL−w; sağ dış = innerR+w; merkez = (innerL−w + innerR+w)/2 = (innerL+innerR)/2 = 450 → innerL = 450 − gap/2 − w; innerR = 450 + gap/2. ✓ ```js return { s,w,h,gap,cy, top: cy-h/2, bot: cy+h/2, xIL: 450-gap/2-w, xIR: 450+gap/2 }; } ``` Plaka çizimi: ```js function drawPlate(x, charge){ // charge: -1,0,+1 görünür yoğunluk 0..1 rect: fillStyle metal: '#e9e2d0'? plaka folyo: hafif farklı kağıt tonu + stroke ink 2px + iç tarama: diagonal? Metal folyo: yatay ince çizgiler alpha .12, spacing 5px, clip rect içinde. pos tint: charge>0 → fillStyle overlay 'rgba(179,55,44,α)' α=0.05+0.10f; neg → petrol. +/− semboller: font mono bold size = 9+7·f; satır sayısı n = ceil(f·16) min? nötr f=0 → hiç sembol; f küçük → 2-3 sembol orta satırda. n = round(2+f*14) clamp 16; satır aralığı = h/(n+1); merkezden dağıt. Sembol metni '+' veya '−' (U+2212 kullan negatifte daha güzel). x = yüzey iç tarafı: pos plaka için iç yüz sağ (x+w−offset), neg plaka iç yüz sol (x+offset)? Semblolar plaka gövdesi içinde ortada dursun (x+w/2) — tarama üstünde okunur. Kolon tek. ``` Hmm tek kolon uzun plakada seyrek; iki kolon (üst-yarım/alt-yarım)? Tek kolon ortada yeterli sadelik. Ya da 2 kolon x = x+w/2 ± min(w*0.22, 14)? f yüksekken çift kolon dolu görünüm. Basit: n satır tek kolon; n max 16; f≈1 → 16 sembol 380px plakada 24px aralık ✓; küçük plakada (h=60) 16 sembol sığmaz: satır aralığı h/(n+1) → n'i h'ye göre sınırla: nMaxByH = floor((h−14)/13)+1; n = min(n, nMaxByH). Alan çizgileri: ```js E = V/d m; fE = clamp(E/Emax,0,1); Emax = 500/0.001 = 500000 → fE = V_plates/1000 / (d/1)?? fE = (V/d)/(500000) = V/(500·1000/d·?) hesap: E = V_plates/(d_mm/1000); fE = E/500000 = V_plates/(0.001·500000)=V_plates/500 · (0.001/d_m)... düzelt: fE = (V_plates/d_m)/500000. V=300, d=0.02 → 15000/500000=0.03 → rows ~ 1? Çok az çizgi. Ölçek kötü: tipik E ~ 1-15 kV/m; Emax 500kV/m uç. Görsel ölçek için fE = sqrt(E/Emax)? sqrt(0.03)=0.17 → rows 3 — yine az. Ayrı bir "görsel" ölçek: rows = round( clamp( (E/10000), 0.4, 3.5 )·6 )? Tipik E=15kV/m (300V/20mm) → rows=9; E=3kV/m → 1.8→rows=2; E=50kV/m → 5→30 clamp 24. rows = clamp(round(E/1600), 0, 24): E=3000→2; 15000→9; 100000→24 clamp. Küçük V'de alan yok (V=0 → 0 çizgi) ✓. Satırlar: plaka yüksekliği içine dağıt: y_i = top + h·(i+0.5)/rows; çizgi xIL→xIR, uçta ok (sağa) son 7px. alpha = 0.30+0.35·(rows/24)? linewidth 1.1. Ok: küçük çizgi çifti. V=0 veya V_plates≈0 → çizgi yok. ``` fE görsel: rows lineer E/1600 — d değişince (kapalı, V sabit) E değişir: d küçülür → E artar → çizgiler çoğalır ✓ öğretici. Ayrıca izole durumda V artabilir → çizgiler çoğalır ✓. Ölçü çizgisi d: y = top−26; oklar iki uçta (iç yatay oklar xIL ve xIR arasında değil — uzatma çizgileri plaka kenarlarından yukarı 10px, ölçü çizgisi uzantı çizgileriyle bağlanır: klasik teknik çizim: extension lines xIL ve xIR'den y=top−4'ten y=top−32'ye ince çizgi; ölçü çizgisi y=top−26 çift ok ile xIL..xIR; etiket ortada üstünde "d = 20.0 mm" mono 12 bold, arka plan kağıt rengi kutu (çizgiyi keser). Alan ölçüsü: sağ plaka sağından: extension dikey plaka sağ kenarından x= xIR+w+18; çift ok dikey top..bot; etiket döndürülmüş "A = 400 cm²" sağda rotate 90°? Dikey metin okunmaz; yatay kutu orta sağda: etiket yatay "A = 400 cm²" x = xIR+w+26 (sığar mı? sahne 900 genişlik, sağ kenar max ~713+26 → 739+ ~70px metin → 809 < 900 ✓). Kadranlar: ```js function gauge(cx,cy,r,label,val01,sub){ daire stroke ink 1.6; tikler: 11 tik −135..135°? Açılış −135° (sol-alt) → +135° (sağ-alt) 270°? Standart: ibre aralığı −120..120 (240°). t = −120+240·val01. tikler her 30°: 9 tik; min/max tik kalın. label üst iç: mono 9px 'Q' veya 'V'; alt: sub 8px. ibre: merkezden r·0.82, kırmızı 2px, arka ucu 0.18 ters; merkez nokta. değer altına? değer panelde; kadran içinde alt küçük değer yazsın: mono 10px val — hoş: kadran kendi değerini gösterir ✓. } gaugeL: Q_norm = sqrt(Q/Qvis) — kadran skala "Q"; değer formatlı "2.65 nC". gaugeR: V_norm = V_plates/500; skala "V"; değer "300 V". val01 lerp animasyon: gösterge değerleri state'ten doğrudan (Q zaten transient animasyonlu; ekstra lerp gereksiz — Q animasyonlu olduğundan ibre doğal hareket ✓; V de Q'dan türetilmiş animasyonlu ✓. d/A slider değişince V izole durumda anlık değişir (Q sabit, C anlık) → ibre zıplar; küçük ekstra smoothing: gaugeV += (V−gaugeV)·(1−exp(−dt/0.12)). Ekleyeyim yumuşaklık için (Q için de hafif: zaten τ'lu; Q'yü de aynı smoothing'e sokarsam çift olur — Q smoothing'i transient zaten sağlıyor; V display ayrı smoothing.) ``` Pil çizimi: ``` Hat y=505. Pil x merkez 430: uzun çizgi (kutu?) klasik: pil sembolü: uzun düz (36px, + terminal) ve kısa kalın (18px, −). ×2 hücre görsel: [──── | ──] : x 404..470. Terminaller: + solda? Devremizde pil + terminali sol plakaya gidiyor (sol plaka pozitif). Sol tel: sol plaka alt merkez x=xIL−w/2 → aşağı 505 → sola x=404'e. Hmm sol plaka merkezi ~ 450−gap/2−w/2·? xIL−w/2: max gap 318: 450−159−95=196; dikey hat x=196 aşağı 458..505, sonra yatay 196→404. Sağ tel: sağ plaka merkez x = xIR+w/2 = 450+gap/2+w/2: max 450+159+95=704; yatay 704→? anahtar 600..640 arasında: yatay 704→640, anahtar 640→600 (kol), 600→464?? pil sağ terminal x=470 → yatay 600→470. Pil sembol yerleşimi: pil + (sol, uzun çizgi) x=404; − (sağ, kısa) x=470 civarı. Aslında klasik pil çizimi: uzun çizgi ve kısa çizgi paralel (dikey kısa çizgiler yatay hatta). Yatay hat üzerinde: pil: iki dikey çizgi: uzun (yüksek 34, ince 2.5) x=436; kısa (yüksek 16, kalın 5) x=456. Hat sol 404'ten kırılır: yatay hat x=196..436 (pil + sol), pil içi boşluk 436..456, sağ hat 456..600.. anahtar.. 640..704. + işareti pil sol üstünde (430, 480) kırmızı küçük; − sağ üstünde petrol. ε etiketi: (446, 540) "ε = 300 V" mono 12 bold center. Anahtar: terminaller (600,505) ve (640,505) nokta r=3.5 dolu; kol: kapalı → çizgi 600→640; açık → çizgi 600'den (640+8, 505−26)? Kol pivot sol terminal (600,505), uç sağ terminale: kapalı tam; açık: uç (634, 479) (yukarı sağa). Açıkken kol çizgisi + uç nokta. "S" etiketi (620, 532) italic mono 12. Hover: kol bölgesi highlight: kol rengi kırmızı? Hover'da stroke ink→kırmızı hafif? Mürekkep estetiğinde hover: kol kısa " titreşim" yerine: hover'da S etiketi bold + kol lineWidth 3. Basit: hover'da kol rengi kırmızı. ``` Akış noktaları path'leri (fonksiyonla üret): ``` paths(): solPath = [ [xLc,bot], [xLc,505], [436,505] ] (sol plaka merkez altı → pil + terminal) sağPath = [ [xRc,bot], [xRc,505], [640,505], [600,505], [456,505] ]? sağ plaka → pil − terminali: [xRc,bot]→[xRc,505]→[640,505]→[600,505]→[456,505]. (kol üzerinden; kapalıyken geçer) Not: akış yönü: şarjda pozitif yükler pil + dan sol plakaya (solPath yönü ileri: pil→plaka — konvansiyonel akım + dan − ye devre dışı: pil + ucu → dış devre → − ucu. Devre: pil + (436) → sol plaka → boşluk (kondansatör) → sağ plaka → pil − (456). Akım yönü: + terminalden çıkıp − terminaline: 436→sol plaka (solPath ileri yön: pil→plaka ✓), sağ plaka→456 (sağPath ileri: plaka→pil ✓). Noktalar solPath'te ileri, sağPath'te ileri (aynı faz) → görsel sürekli akım ✓. Deşarj (ters): noktalar ters yönde. Nokta çizimi: her path: len hesap, n = max(2, floor(len/36)); for i: t = frac(phase + i/n); pos = pointAt(t·len); dolu daire r=3 mürekkep; alpha = strength. ``` Şimdi panel değerleri formatlama: ```js function fmt(v, units){ // units: [['p',1e-12],['n',1e-9],['µ',1e-6],['m',1e-3],['',1]] if(v===0) return '0 '+units[units.length-1][0]... seç: en büyük prefix'e uyan: for i from büyükten küçüğe: if |v| ≥ u → val = v/u; return val.toFixed( significant 3 ) + ' ' + prefix + unit. toFixed: değer 1.0–999 aralığında 3 anlamlı: val≥100→0; ≥10→1; else 2. } C: units [['pF',1e-12],['nF',1e-9],['µF',1e-6],['F',1]] büyükten: F, mF?, µF... C max 1.77µF → sıralı kontrol [1e-6 µF, 1e-9 nF, 1e-12 pF]: if |v|≥1e-6 → µF. Q: [µC 1e-6, nC 1e-9, pC 1e-12, fC 1e-15]. E: E≥1e6? max 500kV/m: [kV/m 1e3, V/m 1]. U: [J 1, mJ 1e-3, µJ 1e-6, nJ 1e-9, pJ 1e-12]. V: V/m... V plates: '300 V' integer ya da 1 decimal (izole'de 328.4 V gibi) — 1 decimal <100? toFixed mantıklı: ≥100 → 0 dec; else 1. ``` subst satırı: `C = ε₀ · A / d = 8.854×10⁻¹² F/m · 0.0400 m² / 0.0200 m = 4.43×10⁻¹⁰ F (1.77 nF)`? Format: `C = 8.854×10⁻¹² · 0.0400 / 0.0200 = 1.77×10⁻¹⁰ F`. A m² 4 anlamlı (0.0400), d m (0.0200). Uzun satır — mono 10.5px sarabilir. Grafik çizimi (panel): ```js const gc = graphCanvas, boyut CSS 100% × 150px; dpr. çiz: axes: x: d 1..100mm; y: C 0..C(d=1mm,A)=eps0·A_m2/0.001. eğri: y = Cmax·(1/d_mm)·? C(d) = eps0·A/ (d/1000) → normalize y/Cmax = 1/d_mm (d mm cinsinden: C(d) = eps0·A·1000/d_mm; Cmax = eps0·A·1000/1 → y/Cmax = 1/d_mm ✓). plot: for x px: d_mm = 1 + (99)·(px/w); y = Cmax/d_mm → map: y pix = h·(1 − (C/Cmax)·0.92) padding. çizgi ink 2px; x tikleri 1,10,25,50,100 mm mono 8px; y ekseni etiketi: güncel Cmax prefix tek değer "1.77 µF" üst sol. güncel nokta: (d_güncel, C) kırmızı dolu daire r=4 + dikey soluk çizgi? nokta + yanında değeri küçük. A değişince eğri şekli aynı (normalize aynı) ama Cmax etiketi ve nokta değeri değişir ✓ (eğri d-normalize olduğundan şekil sabit — C ∝ 1/d her A için; sadece mutlak değer etiketleri değişir. Grafik başlığına "Cmax (d=1 mm) = x" yaz.) ``` Anahtar toggle'da: modeNote güncelle, rozet güncelle. Boşalt butonu: click → discharging=true; step: state.Q → 0 (k hızlı exp), Q<1e-18 → 0, discharging=false. Buton during: "BOŞALTILIYOR…" text? küçük: buton disabled + text aynı; durum rozetini etkilemesin. Şimdi ilk yüklemede: closed=true, Q=0 → dolum animasyonu otomatik → ilk izlenim: yükler teller boyunca akar, plakalar dolar, kadranlar sapar, alan çizgileri belirir — mükemmel ilk an ✓. Şimdi kod hacmi: ~700-900 satır. Yazayım dikkatle. Bazı ayrıntıları sadeleştirerek ama imza detayları koruyarak. Ek: hover tooltips sahnede: sağ plaka üzerinde küçük "d ↔ / A ↕" mini etiketi hover'da? cursor yeter + DOM hint. Ayrıca ilk kullanım ipucu: sahne altında kalıcı ince satır: "İpucu: sağ plakayı sürükle — yatay: mesafe d, dikey: alan A · anahtar S'ye tıkla". Canvas altında DOM'da. CSS iskelet: ```css :root renkler; * box-sizing; body { background paper + grid pattern via CSS? Canvas kendi gridini çiziyor; sayfa arkası düz kağıt + hafif doku (repeating gradient çok soluk çizgiler? kağıt hissi: radial çok hafif vignette yok; düz + noise? düz kalsın; canvas grid var). .wrap { max-width: 1280px; margin: 0 auto; padding: 28px 32px 20px; } header: flex space-between align-end; sol: kicker+h1+sub; sağ: formül kutusu (border 1.5px ink, içi kağıt, Fraunces italik formül + altta mono "C = ε₀ · A ⁄ d"? Formül kutusu: iki satır: büyük "C = ε₀ · A / d" ve altında "Q = C · V". Çerçeveli teknik kutu ✓. main.lab { display:grid; grid-template-columns: 1fr 340px; gap:0; border:1.5px solid ink; } — sahne ve panel tek çerçeve içinde, ortada dikey ayırıcı: panel border-left. Çerçeve köşelerinde küçük kayıt işaretleri (crop marks)? Detay: çerçevenin dış köşelerine kısa çizgi işaretleri ::before? Aşırı; atla ya da hafif. canvas alanı: padding? canvas tam doluş; sahne üst köşe etiketleri canvas içinde. panel: padding 20px 22px; bölümler arası ince çizgi (border-top dashed? düz ince 1px rgba ink .25). ``` Panel bölüm sırası: 1. Kontroller: sliderlar (d, A, ε) + anahtar/boşalt butonları. 2. ÖLÇÜM: 5 satır dl. 3. C(d) GRAFİĞİ. 4. Açıklama dipnotu (izole/kapalı davranışı). Anahtar ve boşalt: iki buton yan yana; "DEVRE ANAHTARI" butonu: gösterge text "KAPAT"/"AÇ" + durum ışığı (küçük dolu/boş daire). Etiketler: buton1: kapalıyken "ANAHTARI AÇ", açıkken "ANAHTARI KAPAT"; buton2: "KONDANSATÖRÜ BOŞALT". Slider satır yapısı: ```html

PLAKA MESAFESİ d20.0 mm

1 mm100 mm

? küçük uç etiketleri — hoş.

``` A: min 50 max 2000 step 10, output "400 cm²". ε: 0..500 step 5, "300 V". Ölçüm satırı: ```html

KAPASİTANSC1.77 nF

``` rd-k mono 9px soluk; rd-f Fraunces italik sembol; rd-v mono bold sağda. Q satırı class 'hot' → sol kırmızı çubuk. Grafik: `

`. Dipnot: mono 10.5px soluk, iki satır. Mobile: media ≤ 900px: grid tek kolon; header formül kutusu altta; panel üstte mi altta mı? Sahnede etkileşim var → sahne üstte, kontroller altta. header sadeleşir. Şimdi tüm fizik değer hesap fonksiyonu: ```js function calc(){ const A = state.A*1e-4; // cm²→m² const d = state.d*1e-3; // mm→m const C = 8.854e-12 * A / d; let Vp; if(state.closed || discharging) Vp = state.emf; else Vp = state.Q / C; // izole const Q = state.closed || discharging ? C*state.emf : state.Q; const E = Vp / d; const U = 0.5*C*Vp*Vp; return {C,Vp,Q,E,U,A,d}; } ``` Q state güncelleme (step): kapalı → state.Q hedef C·emf'e exp yaklaşım: state.Q += (C·emf − state.Q)·(1−exp(−dt/0.28)); açık → state.Q sabit. discharging: state.Q → 0 hızlı (τ 0.18). Açıkken d/A değişirse Q sabit ✓ (state.Q değişmez) → V = Q/C anlık değişir ✓. Emf slider değişince kapalı durumda Q hedefi değişir → akış animasyonu devam ✓. Akış görünürlüğü: kapalı && (|Q_hedef − Q| > εQ) → akış var; dengede (steady) → akış yok mu? Gerçekte dengede akım yok ✓ fiziksel doğru! Dengede noktalar kaybolur — ama kullanıcı "canlılık" ister; fizik doğruluğu önemli: dengede akış dursun (noktalar fade out). Yine de sahne hafif canlı kalsın: dengede hiçbir akış yok — sorun değil, etkileşim her değişimde akışı yeniden başlatır. Kabul: chargeRate = (Qtarget−Q) işaretli; flowAlpha = clamp(|ΔQ|/Qtyp·?,0,1) → ΔQ küçükken 0. Ayrıca V=0 ve kapalı → akış yok (yük taşınmıyor) ✓. ΔQ ölçüsü: |Qtarget−Q|; akış alpha = clamp(|Δ|/(0.05·max(Qtarget, Qvis)), 0, 1) → başta tam, sona doğru söner ✓ güzel doğal. Ek: akış nokta hızının yoğunluğu da Δ ile orantılı (hız sabit, alpha değişir yeter). Voltmetre kadranı izole durumda V değişimini gösterir ✓; pil emf'ten farklı olur — panelde net etiket: ölçüm satırı "PLAKA GERİLİMİ V" (pil emf değil!). Pil rozetinde ε. Şimdi metinler/çeviri son: Türkçe doğal: "Plakalar arası mesafe d", "Plaka yüzey alanı A", "Pil gerilimi ε", "Kapasitans", "Yük", "Plakalar arası gerilim", "Alan şiddeti", "Depolanan enerji". Kicker: "ELEKTROSTATİK · FÖY 04" gibi. Başlık: "Paralel Plakalı Kondansatör". Alt açıklama: "Mesafeyi ve yüzey alanını değiştir; yüklerin, alanın ve enerjinin nasıl davrandığını izle." Canvas durum rozeti alt sol: kapalı: "● PİLE BAĞLI — V SABİT" (nokta kırmızı? kapalı=aktif: mürekkep dolu nokta); açık: "○ İZOLE — Q SABİT" (boş daire). V=0 ve kapalı: "● PİLE BAĞLI — ε = 0" yine kapalı rozeti ok. Şimdi kod yazımına geçiyorum. Uzun ama tek dosya. Dikkat edilecekler: - Türkçe karakterler UTF-8 meta. - Superscript karakterler: ⁻¹² (U+207B U+00B9 U+00B2): "×10⁻¹²" — yazılabilir: 10⁻¹² ✓. - 'µ' karakteri ✓, '²' ✓, 'ε' ✓, '−' (U+2212) metinlerde. - Canvas '−' metni mono fontta U+2212 var mı IBM Plex Mono'da ✓ (var). Yedek: '-' düz tire de olur ama U+2212 Plex'te mevcut. Pointer eventleri: pointerdown/move/up + setPointerCapture; hover cursor: pointermove'da hit test (sürükleme yokken) → cursor 'ew-resize' plaka üzerinde (veya 'grab'?). Plate drag: mode: 'plate'. cursor: plaka üzerinde: xNear? Basit 'move'. Anahtar üzerinde 'pointer'. Drag mantığı: ```js onDown: p=world(e); if near key circle → toggle + capture 'key'; else if içinde sağ plaka rect (±10 pad) → mode 'plate', start = p, startD, startA, startSide. onMove(mode): dx = (p.x−start.x)/3 → d = clamp(startD + dx*? ölçek: dünya px → mm: gap px = 18+3d → dΔ = dpxGap/3 = dx/3. → d = clamp(startD + dx/3, 1, 100). dy: side ∝ √A → dA: A = A0·(1 + dy/…): side'ı doğrudan: sideNew = clamp(startSide + dy, smin, smax) → A = 50·(side/30)². side min 30 (A=50) max 30√40=189.7 (A=2000). dy: aşağı + → büyür. sideNew = clamp(startSide + dy, 30, 190). onUp: release. ``` resize handle ayrıca? Köşe tutamaç eklemiyorum — plaka gövdesi yeter (dikey drag = boyut). Basit ve keşfedilebilir (hint yazar). Slider ↔ canvas sync: state setter fonksiyonu setD/setA/setE → her biri: state değişkeni + slider.value + output text + requestRender (RAF loop zaten sürekli çiziyor; ayrıca chart redraw anında — chart'ı RAF'ta mı çizeyim? Chart statik eğri + nokta; RAF'ta çizmek kolay (küçük) ✓ hepsi RAF'ta, sorun değil). RAF loop: her frame: step(dt), drawScene(), drawChart(), panel değerleri (textContent update — her frame DOM yazmak? Değer değişince yaz; basit: her frame yaz ama sadece değiştiyse (string karşılaştırma) — mikro optimizasyon; textContent set ucuz, yine de karşılaştırayım). Ana fonksiyonlar bitince: init: resize, listeners, loop. Şimdi ayrıntılı çizim kodunu yazayım. Ayrıca "signature moment" güçlendirme: anahtar kapandığı anda teller üzerinde kısa bir "klik" titreşimi? Anahtar kol animasyonu: kol açısı lerp (kapalı/açık geçiş 0.15s) — küçük ama hoş. Ekleyeyim: keyT 0..1 lerp; kol açısı = interp. Plaka "yükleme anı": yükler transitle belirir (Q zaten animasyonlu) ✓. Enerji U büyükken (d küçük, V yüksek) plaka arası hafif "dielektrik kırılması" efekti? Aşırı; atla. Ama d çok küçük (≤2mm) ve V yüksekse (E>60kV/m) küçük kıvılcım uyarısı: alan çizgilerinin arasına küçük yıldız parıltısı + rozet "ARK LENSBİİR"? Fiziksel: hava delinmesi ~3MV/m → 3mm'de 9kV. Emax 500kV/m altında kalıyor simülasyon → ark gerçekçi değil, atla. Yerine: E değerine göre alan çizgilerinin kalınlığı/yoğunluğu yeter. Kod düzeni: ```html Paralel Plakalı Kondansatör — Etkileşimli Simülatör

ELEKTROSTATİK · ETKİLEŞİMLİ FÖY

Paralel Plakalı Kondansatör

Plakalar arasındaki mesafeyi (d) ve yüzey alanını (A) değiştir; pilin kondansatörü nasıl yüklediğini, Q · C · E · U değerlerinin nasıl davrandığını izle.

C = ε₀ · A / d

Q = C · V E = V / d U = ½ · C · V²

İpucu — sağ plakayı sürükle: yatay mesafe d'yi, dikey alanı A değiştirir · devre anahtarına (S) tıkla

``` Footer: mono küçük: "Model: havada boşluklu paralel plakalı kondansatör · C = ε₀A/d, ε₀ = 8.854×10⁻¹² F/m · Kenar etkileri ihmal edilmiştir." + sağda "ölçüler gerçek birimlerle hesaplanır". CSS detayları yazarken: - --ink: #23201a; --paper: #f5f1e6; --paper2: #ede7d7; --red: #b3402c (biraz daha kırmızımsı toprak: #b23c2b); --petrol: #1f5f6b? neg yük rengi: #245f6d (petrol mavisi-teal). tel/alan: ink alpha. - plaka pos tint rgba(178,60,43,x), neg rgba(31,80,100,x) — petrol koyu: #1d5563. - Seçim rengi, focus stilleri. - Slider: -webkit-appearance none; track: 2px ink; thumb: 14×20 ink dikdörtgen (border-radius 2) hover'da red? Thumb: ink dolu, :active red. Firefox: ::-moz-range-thumb benzer, ::-moz-range-track. - output mono bold. - .lab border 1.5px ink; stage position relative; canvas display block width 100% height: aspect-ratio 900/620? Canvas yüksekliği: container genişliğine göre otomatik: aspect-ratio: 900 / 620; width:100%. Mobilde yükseklik sorun değil. - panel genişlik 340 desktop. - body arka plan: --paper; wrap üstünde ince üst çizgi detayı? Kicker üstünde kısa kırmızı çizgi (sol çizgi) — küçük aksan ok (mürekkep kırmızı aksan) ✓ dekor değil, hiyerarşi aksanı. - h1 Fraunces 34-40px, em italik. - hint: mono 10.5px, üstte ince çizgi, alpha .75. Gauge çizim ayrıntı: ```js function gauge(x,y,r,label,fmtVal,val01){ ctx.save(); ctx.beginPath(); arc; stroke ink 1.8 lw; fill paper (arka plan üstünde çizgileri gizlesin: fill '#f5f1e6' önce). // skala yayı? sadece tikler: 0..1 → açı −125°..125°. const a0 = -125*RAD, a1 = 125*RAD; for k=0..8: a = a0 + (a1−a0)*k/8; tik dış: r..r−7 (k%4==0 → r−10, lw 2). (9 tik: 0,1/8..1 — 0.5 orta kalın? k%4: 0 ve 8 uçlar + 4 orta.) label üst: mono 700 9px letterspacing; sub değer altı r−? içinde alt: fmtVal mono 600 10.5px. ibre: val01 anim (needle smoothing dışarıda halledilir: geçirilen val01 zaten yumuşatılmış). ibre çizimi: açı a; from merkez −r·0.15 ters yönde; to r·0.72; kırmızı lw 2; merkez r=3 dolu ink. min/max etiketleri: "0" ve max ("500") mini 7.5px uçlarda? Yüksek değer etiketleri: sol alt "0", sağ alt "500"/(Q için güncel üst sınırlı?). Q kadranı normalizasyon: Qvis; değer metni kendi gerçek değerini gösterir; skala tikleri normalize. Uç etiketler: 0 ve max metni (V için "500 V", Q için "µC-skalası"? karmaşık; uç etiket: 0 / 500 (V) veya 0 / ∞ olmaz... Q için üst sınır Qvis=Qmax görsel. Etiket: "0" ve "2.65µC*"? Uç etiket yerine sadece alt değer metni yeter. Sade: uç etiket yok, değer altta. } ``` Qvis (görsel üst sınır): seçim: Qvis = ε0·A_max·1000·emf_max? A sabit değişken — normalizasyon sabit olmalı ki ibre anlamlı sapa. Sabit referans: Qref = 1 µC? Q aralığı 0..~1.77µF·500V=885µC — çoğu kullanım 100nC..10µC. Norm: sqrt(Q/Qref), Qref = 2.5 µC: V=300, C=17.7nF (A=200cm²? başlangıç A=400cm², d=20mm → C=17.7nF? hesap: 8.854e-12·0.04/0.02 = 1.77e-11 = 17.7 pF!! Dikkat: 0.04 m²/0.02 m → 8.854e-12·2 = 1.77e-11 F = 17.7 pF. Q=17.7pF·300V = 5.3 nC!! Çok küçük. Hmm gerçekte paralel plaka kondansatörler pF mertebesi (d mm, A yüzlerce cm²) ✓ gerçekçi ama rakamlar piko/nano — problem değil, formatlayıcı var. Qvis referans: tipik Q: C 0.5pF..1.77nF? A=2000cm²=0.2m², d=1mm → C=1.77e-9 F = 1.77 nF. Qmax = 1.77nF·500V = 885 nC ≈ 0.885 µC. Yani Q aralığı 0..0.885 µC. Qref = 0.3 µC makul: başlangıç Q = 17.7pF·300 = 5.3nC → sqrt(5.3n/0.3µ)=sqrt(0.0177)=0.133 → ibre hafif sapar; d küçülünce (d=2mm) C=177pF Q=53nC → sqrt(0.177)=0.42 ✓ hareketli. V=500 & A=2000 & d=1mm → 885nC → sqrt(2.95)=1.72 → clamp 1. İbre skala 0..1'yi aşar → clamp + uçta dolu? clamp ok. Hmm başlangıç dolum animasyonunda ibre 0.133'e gider — az hareket. Daha canlı ilk an için başlangıç: d=8mm, A=600cm², V=300 → C=8.854e-12·0.06/0.008 = 6.64e-11 = 66.4pF → Q=19.9nC → sqrt(0.0664)=0.26. Yine az. Qref = 0.12 µC? başlangıç 19.9nC/0.12µC = 0.166 → sqrt 0.41 ✓ daha iyi sapar; maksimum 0.885µ/0.12µ=7.4 → sqrt 2.7 clamp 1 (uçta). Hmm max'ta ibre sabit uçta — kabul, ya da pow 0.35: (0.166)^0.35=0.55 başlangıç; max (7.4)^0.35 = 1.99 → clamp. sqrt ile kalsın, Qref=0.15µC: başlangıç 0.36, max 2.43→1. İyi. Ayrıca kadran "Q" alt değeri gerçek "19.9 nC" ✓. Hmm emf max 500V ve d min 1mm, A max: E = 500/0.001 = 500 kV/m ✓ aralık; E norm = E/5e5. Alan çizgileri rows: E_norm·16 → başlangıç: V=300,d=8mm → E=37.5kV/m → 0.075·16=1.2 → 1 satır! Çok az görsel. Alan çizgileri için norm ayrı, daha görünür: rows = clamp(round(2 + E_norm·18)) → min 2 satır V>0 iken. V=0 → 0 satır. E tipik aralığında 2-20. Başlangıç 2+1.2=3 satır az ama lineer değil: rows = clamp(round( pow(E/Emax,0.5)·22 ),0,24): başlangıç sqrt(0.075)=0.274·22=6 satır ✓; max: 22; V=100,d=50mm: E=2kV/m: sqrt(0.004)=0.063·22=1.4→1 satır; min clamp V>0→1? rows = V>0 ? max(1, ...) : 0. ✓. Alan çizgisi uzunluğu: plakalar arası gap boyunca; ok başı sağda. Satırlar plaka yüksekliği içinde eşit dağılım. Yük sembolleri: plaka iç yüzeyi boyunca satır: n = clamp(round(pow(Q/Qref,0.5)·12), 0, 12)? başlangıç: Q/Qref = 19.9n/0.15µ=0.133 → 0.365·12=4.4→4 sembol/sütun? İç yüzeyde tek sütun mu çift? Tek sütun dikey dizilim 4 adet — seyrek ama okunur; Q artınca 12. Ek olarak sembol boyutu da f ile büyüsün (r 5→7). Ayrıca yük sütunlarını iç yüzeye yakın x konumla (pos plaka: iç yüzü sağ: sol plakanın sağ yüzü x = xIL (sol plaka iç yüz x) → semboller xIL − 12 (plaka içinde, sağa bakan)? Semboller plaka metalinin iç yüzeyinde: x = xIL − 14 (plaka içinde) dikey dizi. Neg plaka: xIR + 14. Ayrıca "indüklenmiş yük yoğunluğu" hissi: yüzeye paralel birden fazla sütun y + satır grid (2 kolon × n satır)? Tek kolon sade. Q yüksekken 12 sembol dikey sıralı plaka yüksekliğine dağılım ✓. Q düşükken 3-4 merkezde? Dağıt: yüksekliğe yay (üst-alt uçlara yakın bile) — eşit dağılım uçlar dahil: y_i = top + (i+0.5)·h/n? uçlarda boşluk olsun: inset 14px. Pos sembol: küçük daire dolu kırmızı içinde "+" (paper renk) r 5.5..7; neg: daire dolu petrol içinde "−". Ya da konturlu? Dolu + kağıt rengi glyph okunur ✓. Şimdi tüm ekran bileşenleri listesi tamam. Kod yazımı başlıyor. Uzunluk kontrollü ama eksiksiz. Bir de chart çizim ayrıntısı: ```js function drawChart(){ const w,h dpr... ; axes: sol 34px pad, alt 22, üst 16, sağ 10. eğri: for px in [0..pw]: dmm = 1 + 99·px/pw; Crel = 1/dmm; py = padT + (1−Crel·0.94)·ph... Crel max 1 (d=1). y = h−padB − Crel·(ph). (Crel 1 → üst; d=100 → 0.01 → taban.) eğri solid ink 1.8. Alt eksen: 3 tik: 1, 10, 100 mm (log hissi ama x lineer — tik pozisyonları lineer (1, 34, 100). Basit 3 tik + etiket. güncel nokta: dN = state.d; x = (dN−1)/99·pw; Crel = 1/dN; y; kırmızı dolu r=4 + beyaz halka? kağıt halka 1.5. etiket: sağ üstte: "C(d=1 mm) = " + fmt(Cmax) mono 9px; nokta yanında fmt(C) 9px kırmızı. başlık: sol üstte "KAPASİTANS — MESAFE (C ∝ 1/d)" mono 8.5px soluk. } ``` Panel ölçüm satırı semboller: C, V, Q, E, U — Fraunces italik. Şimdi final kod yazımı. Dikkat: script'te Türkçe string'ler sorunsuz (UTF-8). Ekran boyut değişimi: ResizeObserver canvas'a; dpr. Yazalım. ```js const EPS0 = 8.854e-12; const state = { d:8, A:600, emf:300, closed:true, Q:0 }; const smin = 30, smax = 30*Math.sqrt(40); // 189.7 ``` Başlangıç: d=8mm, A=600cm² → side=30√12=103.9; gap=18+24=42px; plakalar w=52 h=208. Görsel: 2·52+42=146 genişlik merkezde — sahnede dar; plakalar biraz küçük. side formülünü büyütelim: side = 34·√(A/50): A=600 → 34·3.46=117.8; A=2000 → 34·6.32=215; A=50 → 34. Plaka h max 430 — dünya 620'de plaka max 430 + devre 120 → sıkışık. Max h: 620−(üst kadran 100?) — plakalar üst y: merkez cy=330; h max 430 → üst 115, alt 545 — devre telleri 545'ten başlar, pil y=560, sahne altı 620 — sıkışık ama hesaplanabilir. Görsel alan çizgileri plakalar arasındaki boşlukta. Kadranlar (r=54, y=64 merkez, alt 118) plaka üstü 115 ile çakışabilir x'te: plakalar merkezde genişlik ~450 (side 215·2+gap 336=766 geniş grup!) — gap max 336 + plaka 215 → grup 766 geniş, dünya 900, kenar 67 — kadranlar x=64 köşede: plaka kenarı 67'den başlar → çakışır! Grup max genişliği küçült: gap max: 18+3·100=318; plaka max side 215. Toplam 748. Kadran r=50 x=56..156. Grup sol kenarı = 450−374=76 → plaka sol kenar 76 < 156 çakışma üst y'de: plaka üst 115 vs kadran alt 118 → dokunma. Ya kadran küçült r=46 ve y=58 (alt 104) — plaka üst 115 → 11px boşluk, x çakışması yine üst köşede az. Ya plaka max side küçült: side = 31√(A/50): A=2000→196; h=392; grup 392·2+318=1102 >900 çakışır zaten x'te! Grup genişliği max 748 (side 196: 392+318=710). Sol kenar 450−355=95; kadran x aralığı 10..102 (r=46, cx=56) → plaka kenarı 95 vs kadran sağ kenarı 102 — 7px örtüşme üst y'de 115 üstü... plaka üst y = cy − h/2 = 330−196=134 > 104 ✓ çakışma yok (kadran alt 104, plaka üst 134) ✓. side=31·√(A/50): A=600→107.7; A=50→31; A=2000→196. ✓ gap: 16+3·d: d=8→40; d=100→316; d=1→19. Grup yatay merkez 450 (dünya ortası) — sağda boşluk (900−95·2=710 grup) simetrik ✓. Plaka merkez y cy = 316? Devre: plaka alt = cy+h/2; max 316+196=512; tel dikey 512→545; yatay y=545; pil merkez y 545 (semboydan yukarı taşan ±18 → 527..563); rozet alt sol y=590; hint DOM'da. Kadran y=58 r=46 → 12..104. Ölçü çizgisi üst: plaka üstü −24 = 134−24=110 → kadran alt 104 ile 6px — x'te plakalar merkez, kadran köşe → çakışmaz ✓. cy=316, kadran cy=58. Alan çizgileri plaka aralığında y aralığı [cy−h/2+10, cy+h/2−10]. Pil: yatay hat y=545 üzerinde x merkez 430 civarı; sembol: uzun çizgi (x=418, y 531..559, lw3) + kısa çizgi (x=434, y 538..552, lw5). Soldan gelen tel x=418'e kadar; sağ tel x=434'ten devam. ε etiketi: mono 11 "ε = 300 V" pilin üstünde (y=522)? üstü: pilin yukarısında x=430 center y=518. Anahtar: x=640,y=545; terminal noktaları (622,545) ve (658,545) dolu r=3; kol pivot 622: kapalı → (658,545) çizgi; açık → çizgi 622'den 30° yukarı 36px uzunluk (658,522)... kol uzunluğu 36: açık uç = (622+36cos(−30°), 545+36sin(−30°)) = (653,527). keyT anim: açı = lerp(−30°,0). Kol lw 2.5. "S" etiketi kolun üstünde (628,540)? etiket x=640,y=505 mono italik "S". Teller: sol plaka alt merkez xLc = 450 − gap/2 − side (sol plaka merkez x = 450−gap/2−side? Grup: iç yüzler xIL=450−gap/2, xIR=450+gap/2; sol plaka dış = xIL−side; merkez xL=xIL−side/2. Tel sol plaka merkezinden altına iner: (xL, cy+h/2)→(xL,545)→(418,545). Sağ tel: (xR,alt)→(xR,545)→(658,545) — anahtar terminal sağ taraftan: yatay tel xR→658; pil sağ ucu 434→xR?? Bekle: tel güzergahı: pil sağı (434,545) → xR'e giderken anahtar arada: (434,545)→(622,545) [pil+tel], anahtar 622..658, (658,545)→(xR,545)→(xR,alt). Ama xR < 622 olabilir (xR max = 450+316/2+196/2 = 450+158+98=706 > 622 ✓; xR min = 450+19/2+31/2=475 < 622 ✓). Yani yatay hat: 434 → xR ama 622..658 anahtar bölgesi — tel parçası: 434→622; anahtar; 658→xR. xR>658 olduğunda tel devam eder ✓; xR<622? min xR=475 → 658>475: tel (658,545)→(475,545) geri sola! Anahtar konum pil ile plaka arasında hep? xR aralığı 475..706; anahtar 622..658 sabit — xR=475 iken anahtar plakanın sağında telin dışında kalır (658>475) — tel 658→475 sola geri döner çirkin. Çözüm: anahtar konumunu xR'e göre uyarla? Anahtar yatay orta noktası = (434+xR)/2 civarı sabit hizada; anahtar x merkezi = min(max((434+xR)/2, 480), xR−40). Ya da devre yerleşimi: plakalar altından teller aşağı, pil SOL kenara yakın (x=300), anahtar sağda xR ile pil arasında: hat: (434? pil x 280: uzun 268 kısa 284) → tel 284→xR; anahtar bu hatta (284+xR)/2. xR≥475 → anahtar merkez ≥ 380; anahtar genişliği 36 → 362..398+ ok. Pil sabit x=276/292. Sol tel: xL (min = 450−158−98=194; max=450−9.5−15.5=425) → sol tel x=418?? Sol tel xL'den sola pilin soluna mı? Devre sırası: sol plaka → tel aşağı → yatay sola → pil soldaki terminale. Pil terminali sol (276,545): sol tel: (xL,alt)→(xL,545)→(276,545). xL min 194 < 276! Tel geri sağa. Hmm xL min 194, pil solda 276 → tel xL'den (194) aşağı 545'e, sonra sağa 276'ya — geri dönüş çirkin. Pil merkezini plaka grubunun alt ortasına: pil x = 450−? İkisi de grubun altı: klasik görüntü: pil alt orta (x=450), anahtar pilin sağında (x=520). Sol tel: xL→(xL,545)→(436,545)[pil sol]. xL min 194 → tel 194'ten 436'ya sağa ✓ düz yön; xL max 425 → 436'ya ✓ hep sola doğru kısa. Sağ tel: pil sağ (464,545)→ anahtar (486..522) → xR'e. xR min 475 < 522?? xR min 475: anahtar 486..522 xR=475 tel geri sola. Anahtar konumu adaptif: anahtar orta x = (464+xR)/2: xR min 475 → anahtar merkez 469.5 < 464+... anahtar genişliği 36: 451..487 — pille (464) çakışır. xR min'i büyütmek: gap min? d min 1mm → gap 19 → xR min = 450+9.5+15.5=475. Adaptif anahtar: anahtar merkez = clamp((464+xR)/2, 500, xR−28)? xR=475 → xR−28=447 <500 çelişki. Yerleşimi değiştir: pil sağ üstte değil — devre düzeni: teller plakalardan aşağı, U şekli, pil alt ortada AMA anahtar SOL kolda (pil ile sol plaka arasında): sol kol: xL..(436): xL min 194 < 436 ✓ anahtar sol kolda x=330 (194..436 aralığında sabit 330: xL max 425 > 330?! xL max = 450−gap/2−side/2: gap min 19, side min 31 → xL = 450−9.5−15.5=425 > 330 → tel geri. Ugh. Genel çözüm: plaka grubu yatay merkezleme sabit değil — grubu HER ZAMAN x 180..780 aralığına yerleştir: grup toplam genişlik Wg = side·2+gap ∈ [81..703]. Merkez sabit 450 yerine: grup merkez cx = 450 ama plaka konum aralığı: xL ∈ [98..425] (side+gap değişken). Tellers adaptif gereksiz olmasın diye: devre yolu yatay hattı YATAY değil MERKEZ ALTı düzeni: tel: sol plaka alt → aşağı y=545 → SOLA/kısa → ... aslında en temiz klasik: her plakadan inen dikey tel, yatay hatta bağlanır; hat: sol uç = xL, sağ uç = xR (grup genişliği), hat üzerinde: pil soldan %30'da, anahtar %65'te — yani pil ve anahtar KONUMLARI xL ve xR'e göre adaptif! Pil x = lerp(xL, xR, 0.32), anahtar x = lerp(xL, xR, 0.66). Böylece her geometride düzenli ✓✓. Pil sembol boyutu sabit (12px çizgiler). Anahtar 34px. Hat: (xL,545)→(xR,545) düz; plakalara dikey bağlantı alt merkezlerinden: sol plaka alt merkez (xLc=xIL−side/2?) dikey tel xLc'den (alt) 545'e. Hmm hat uçları xL, xR — plaka merkezleri xLc, xRc: xLc = xIL − side/2 = xL + side/2. Dikey teller plaka merkez x'lerinden iner; yatay hat xLc..xRc arasında; pil/anahtar aralığa göre adaptif lerp(xLc,xRc,0.30)/0.68. ε etiketi pilin altında (545+20=565) mono 11 center. "S" anahtar üstünde y=522 italic. ✓ Bu düzen her durumda dengeli. Anahtar tıklama hitbox: (kx, 545) r=26 — adaptif konum saklanır. Akış noktaları path: - Sol path (pil − → sol plaka? Konvansiyonel akış: pil + terminali pozitif yük üretir → + plaka. Hangi plaka +? Sol plaka + (alan soldan sağa −'ya). Pil + = uzun çizgi (soldaki terminal) → sol plaka. Akış: pil + → sol plaka: noktalar pil sol terminalden (px,545) → xLc → yukarı plakaya. Sağ path: sağ plaka → pil −: (xRc,alt)→(xRc,545)→anahtar?—hat yönü: xRc'den sola pille − terminaline (px2,545) — ama anahtar arada: path: (xRc,545)→(xRc_left?)... Nokta rotası: sağ plakadan başlayıp sola akar: [xRc..kx2..kx1..pil sağ] yatay; sol path: [pil sol..xLc] + [xLc dikey yukarı]. Tüm devre tek kapalı rota: pil sol → sol yatay → xLc dikey → (plaka içinden? plakalar üzerinden geçme — plaka içinde akış gösterme; noktalar plakaya varınca kaybolsun ve sağ plakadan doğsun). İki path: P1: [(pxL,545) → (xLc,545) → (xLc, plateBottom)] yön: pil→plaka. P2: [(xRc, plateBottom) → (xRc,545) → (pxR,545)] plaka→pil. Deşarj butonu: yönler ters, alpha da ters. - Nokta sayısı: path uzunluk/34; offset t. Deşarj butonu: panelde "Kondansatörü boşalt" — kısa devre çizgisi görünümü? Buton basınca: discharge anim: state.Q hedef 0 hızlı (τ 0.35s), flow yönleri ters + hızlı 1.2s süre. state.dischargeT>0 iken. Fizik: buton = plakaları kısa devre → Q→0. Ayrıca E, V düşer ✓. Bir sorun: closed switch + discharge: gerçekte pile bağlıyken kısa devre edilirse pil yeniden doldurur. Buton: "Boşalt" → pil devresini anlık kesmeden kısa devre eder — fiziksel olarak pil + plaka kısa devresi → plakalar 0V'ta (pil emf'i plakalar üzerinden kısa devre olur ama pil emf'i hâlâ uygular → yeniden şarj eder). Görsel basitlik: Boşalt → Q→0, eğer anahtar kapalıysa hemen tekrar dolum başlar (pil yeniden yükler) — bu aslında doğru davranış! Buton "boşalt" anahtar açıkken tam boşaltır; kapalıyken pile bağlı kısa devre → plakalar anlık boşalır sonra pil yeniden doldurur (V=0 → pile bağlı tekrar emf'e). Hmm kondansatörü pil üzerinden kısa devre etmek: plakalar arası gerilim → pilin iç direnci üzerinden... Net: görsel olarak: discharge sırasında Q hızla düşer, anahtar kapalıysa sonra tekrar dolum animasyonu — eğlenceli ve öğretici ✓ sorun değil. Ek: anahtar açık + Q>0 durumunda slider V değişimi plakaları etkilemez (izole) ✓ panel notu. Anahtar kapalıysa V değişimi anında etki (Q transient) ✓. V (emf) sıfır + anahtar kapalı: Q hedef 0 (pil 0V → kısa devre deşarj) ✓ doğal. Şimdi needle smoothing: nQ += (target−nQ)·min(1,dt·6); aynı V için. Ayrıca değer okumalarında değişen sayıların "hafif sarı işaret"? Gerek yok. Kod hacmi büyük ama yönetilebilir. Yazıyorum. drawScene sırası: 1. clear + paper bg (CSS'te canvas bg? canvas içinde fill paper2? stage bg hafif farklı ton (--paper üstünde stage paneli hafif --paper2? Estetik: sahne hafif daha açık/beyaz kağıt #f9f6ed, panel #f1ebdc. Stage: #f8f4ea. 2. grid: 24px ince alpha .06 mürekkep; her 4. çizgi .09. Kenar cetvel çentikleri: üst ve sol kenarda 5px çentikler her 24px. 3. kadranlar ×2. 4. ölçü çizgileri (d üst, A sağ? A ölçüsü plaka yüksekliği sol tarafta: dikey çizgi sol plakanın solunda x = xL_outer − 16, plaka yüksekliği boyunca, uçlarda tik, etiket dikey döndürülmüş "A = 600 cm²" — dikey metin canvas rotate ✓. d ölçüsü: plakalar üstünde y = plateTop − 22: xIL..xIR arasında çift ok; etiket üstünde mono "d = 8.0 mm". İkisi de ink alpha .75. 5. alan çizgileri. 6. teller + pil + anahtar + akış noktaları. 7. plakalar + yük sembolleri. 8. durum rozeti (sol alt) + sahne başlığı (sol üst? kadranlar var; sahne başlığı gerekmez). 9. Sürükleme sırasında vurgu: plaka stroke kırmızı? hover'da plaka outline kalınlaşır hafif. Plaka çizimi: rect fill: pos plaka: fill '#c8b98f'?? metal: soluk pirinç? Ink estetikte: fill hafif ton: pos plaka fill = mix(paper, red, 0.10·f+0.05)? Yük ile tint: pos: rgba(178,60,43, 0.10+0.18·qn); base fill: '#e6d9b8' (soluk pirinç)? Yüklüyken tint üstüne. stroke ink 2. İç doku: 4 yatay tarama çizgisi alpha .08? Folyo çizgileri: plaka içinde yatay çizgiler 10px aralık alpha .07 ink — metal dokusu sade ✓. Kağıt üstünde plaka: pil + teller ink. Yük sembolleri plaka çiziminden sonra. Kadran needle değeri: gaugeQ val01 = pow(Q/Qref, 0.5) clamp; gaugeV val01 = V_plates/emfMax? V plakalar arası max izole durumda aşabilir: izole + d küçültünce V = Q/C → çok yüksek olabilir (Q=0.885µ, C=8.85pF → V=100kV!!) — V plakalar arası kademeli sınırsız. Kadran skala 0..500V clamp; izole yüksek V durumunda ibre uçta + değer "3.2 kV" gösterir ✓ makul (işaret: uçta küçük "▲"? gerek yok). İzole durumda gerçekçilik uyarısı? Panel notu yeterli. Hmm bir fizik kontrol: izole kondansatörde d değişince Q sabit; bizde d/A değişimi drag → C değişir → V=Q/C değişir ✓; E = V/d = Q/(ε0 A) sabit ✓ (A değişirse E değişir: E=Q/ε0A ✓). drawKey: kolları; hover cursor pointer (pointermove'da hit check → canvas.style.cursor). Drag state: pointerdown → mode 'plate' | 'key' | null; key tıklaması: toggle + küçük anim (kol snap). Plate hit: sağ plaka rect (genişletilmiş ±6). Sol plaka: sürüklenebilir mi? Sol plaka sürüklenirse ne olur? Sol plakayı sürüklemek de gap'i ters değiştirir (sol sağa → gap küçülür)? Simetri: sol plaka da sürüklenebilir olsun: yatay delta sol plakanın x'ini değiştirir → gap = xR_in − xL_in: sol sağa → küçülür. İki plaka da movable, grup merkezleme: hangi plaka hareket ettiyse grup merkez kayar? Grup merkezini sabit tutmak daha dengeli: sol plaka sürüklenince sol plaka hareket eder ama sağ sabit → grup merkez kayar, teller adaptif zaten (xLc..xRc). Grup merkezi sabit 450'yi koru: sol plaka drag → d değişimi: dxL → d = (xR_in−xL_in) inversely... basitçe: sol plaka drag dx → d −= dx·scale? Sol sağa (dx+) → gap küçülür → d azalır. Kod: drag sol: d = clamp(d − dx/k); sağ: d = clamp(d + dx/k). Grup merkez sabit kalsın: sol plaka x'i sadece grup yerleşiminden gelir (merkez 450, gap'e göre xIL) — sol plakayı bağımsız taşımak merkez bozar. Basit tutmak: SADECE sağ plaka sürüklenir (başlangıçtasöyledim) — tekrar: sağ plaka tek sürükleme hedefi. Sol plakaya hover → cursor default. Sağ plaka: hem yatay (d) hem dikey (side/A) hem resize handle. ✓ k+resize handle: sağ plakanın sağ-alt köşesinde küçük kare 10px mürekkep — resize görsel imleç nwse. Basit: tüm plaka: yatay d, dikey side; köşe handle ayrıca (nwse). İki davranış dikeyde aynı (side) — köşe: yatay+dikey birlikte side'a? Karışıklığı önle: köşe handle yalnız boyut (nwse-resize, dx&dy max ile side), plaka gövde: yatay=d, dikey=side. Tamam. gap scale: dx (px dünya) → d: d_px = 16+3·d → k=3 px/mm. dx=3px → 1mm ✓ hassasiyet iyi. side: dy → side doğrudan (side = side0 + dy, clamp smin..smax) → A = (side/31)²·50? A = 50·(side/31)². side=31→50cm²; 196→196²/31²·50 = 39.87·50=1993 ✓. side drag: dy + → büyür. Resize handle: side = 2·max(|px−cx|,|py−cy|) clamp. Slider ↔ state: input event → state.d/A/emf set + dirty. Sağ plaka drag → state.d set → slider value sync (element.value = d). Değer gösterim: panelde okunanlar her frame güncelle (requestAnimationFrame içinde textContent set — değişince; ufak perf ok). Ekran değerleri: - C = EPS0·A_m/d_m - Vp: closed? emf : Q/C (Q>0) - Q: closed ? hedefe lerp... Q dinamik: state.Q fizik süreci: her frame: hedef = closed ? C·emf : state.Qfrozen... İzole durum: Q sabit tut: bir "source" modeli: - closed: Q → C·emf (τ şarj 0.28s) - open: Q sabit (değişmez) — ama anahtar açıldığı anda Q o anki değerde kalır ✓; anahtar kapandığında tekrar hedefe gider. - discharge: hedef 0 hızlı. Basit: her frame: if(discharging) Qt=0 τ=0.18; else if(closed) Qt=C·emf τ=0.28; else Qt=state.Q (τ∞). state.Q += (Qt−Q)·(1−exp(−dt/τ)). C değişince (kapalı) hedef anında değişir, Q akıcı ✓ güzel. Ayrıca "şarj akışı" hızı görsel: |dQ/dt| norm → nokta hızı/alpha: flowRate = |ΔQ|/|C·emf| per frame → hızlı şarj sırasında noktalar hızlı+çogun; dengeye yaklaşınca azalır — doğal RC görselleştirmesi ✓✓: nokta alpha = clamp(rate·8, 0.15, 1), speed sabit? Nokta sayısı sabit, hız = base + rate·80. Denge durumunda (kapalı, sabit) akış olmalı mı? Gerçekte dolu kondansatörde akım 0! Doğru fizik: denge → akış yok. AMA kullanıcı "yüklü kondansatör" görselinde akış bekleyebilir — fizik doğruluğu öncelik: denge noktasında akış yok (noktalar kaybolur), sadece geçiş anlarında akış ✓ öğretici! d değişince kapalı devrede geçici akım akar (Q=C·V yeni hedefe) → noktalar yeniden akmaya başlar ✓✓ mükemmel öğretici davranış. Uygulama: flowAlpha = clamp( |Q_target−Q|/maxQnorm·6, 0, 1) gibi; maxQnorm = max(C·emf, |Δ|)... basitçe: err = closed ? |C·emf − Q| : (discharging ? |Q| : 0); rateN = err / (EPS0·(A_m/d_m)·500 + 1e-15)?? Qmax geneli = C·emf (mevcut) → err/Qmax·? τ süresince err/Qmax ~ exp decay → alpha = clamp(err/Qmax·3,0,1). Noktalar görünürken α, kaybolurken ✓. Deşarj: err=Q/QmaxRef. Flow noktaları alpha = flowAlpha (min 0.05 → görünmez). Yön: dQ/dt işareti: + (şarj) → P1 pil→sol plaka yukarı, P2 sağ plaka→pil sola. − (deşarj: d küçültme kapalı devrede? kapalı devrede d küçülür → C artar → Q artar hâlâ +; d büyür → Q azalır → akış ters!) İşaret s = sign(Qtarget−Q) ✓ genel. Deşarj: −. Nokta yönleri: şarj: P1 forward, P2 forward; deşarj: P1 backward, P2 backward. Not: akış yönü görsel olarak noktalar + plakaya doğru mu? Şarjda pil + → sol plaka (P1) ✓ ve sağ plaka → pil − (P2) ✓. d büyümesiyle kısmi deşarj: ters ✓. Ayrıca noktalar plaka kenarında fade (üç segment: dikey kısımda alpha azalt uçta) — path parametrik alpha basit: uzunluk normalize; uçlara doğru alpha·(1−edge fade)? Basitlik: düz alpha yeter. Panel notu metinleri (durum): - closed: "DEVRE KAPALI — kondansatör pile bağlı; plakalar arası gerilim ≈ pil gerilimi; yük Q = C·ε." - open && Q>0: "DEVRE AÇIK — kondansatör izole; Q korunur. Geometriyi değiştir: C değişir, V = Q/C buna göre değişir." - open && Q≈0: "DEVRE AÇIK — kondansatör yüksüz. Şarj için devreyi kapat." Durum rozeti canvas'ta da: "PILE BAĞLI" / "İZOLE · Q KORUNUR" / "YÜKSÜZ". Ek: ε gösterimi pilde: sabit state.emf → pil etiketi güncel. Hmm "elektrik miktarını yükleri gösterilen" talebi: yükler (Q) gösteriliyor ✓ hem değer hem semboller ✓. Bir kontrol daha: izole durumda Q hedefi değişmez ama drag side değişirse (A azalır) → E = Q/ε0A artar, alan çizgileri artar ✓ V artar ✓ ibre sabit (Q) ✓. Mükemmel öğretici: d küçülünce alan çizgileri YOĞUNLADIĞI GİBİ gösterme: E sabit (A sabitse) → alan çizgileri sayısı sabit ✓ çizgiler kısalır (gap küçük) — "alan çizgisi sayısı korunur" güzel fizik görüntüsü ✓. Slider'lar: - d: 1–100 step 0.5 mm - A: 50–2000 step 5 cm² - ε: 0–500 step 5 V Değer etiketleri: "8.0 mm", "600 cm²", "300 V". Panelde ayrıca türetilen formül satırı: "C = ε₀ · A / d" büyük serif; altında mono küçük: "= 8.854e-12 × 0.0600 m² / 0.0080 m = 66.4 nF" güncel. Bu çok öğretici ✓. Layout final: ```

ELEKTRİK & MANYETİK ALAN · FÖY 04

Paralel Plakalı Kondansatör

Plakalar arasındaki mesafeyi (d) ve yüzey alanını (A) değiştir; depolanan elektrik yükünü (Q) kadranlarda ve sahnede izle.

``` Header düzeni: kicker sol üst mono küçük + formül sağda? Header içinde sağda büyükçe "C = ε₀·A / d" kağıt etiket? Basit tut: header ortada blok; sağda küçük "Δ d — Δ A" rozetleri? Gerek yok. Grid: main: display grid: "1fr 340px"; gap 18. stage yükseklik: aspect? Sahne sabit oran 900:620 → canvas yükseklik = genişlik·0.69; clamp (360..640). CSS: canvas width 100%, height: min(68vh, ...) — JS resize: canvas boyutu container'a fit; dünya koordinat ölçekle: scale = min(cw/900, ch/620)?? Sahne her zaman tüm dünya göstermeli → letterbox: scale fit + ortala. Container oranı 900/620'e sabitlemek yerine: canvas container yüksekliği = width·620/900 (aspect-ratio CSS: aspect-ratio: 900/620 ✓) → scale = cw/900 tam ✓ letterbox yok. Mobil dar: aspect korur; panel altta. ✓ Kod yazımına geçiyorum. Uzun ama tek dosya. CSS önemli parçalar: - @import fonts: Fraunces (400,600,700 + ital) & IBM Plex Mono (400,500,600,700). - body: background: #f3eee2; ink: #23201a; kırmızı: #b3341f; petrol: #1e5f63. - Hafif kağıt dokusu: body::before? repeating-linear grid çok hafif global? Stage içinde canvas grid yeter; body düz + belki çok hafif noise yok. - Header: merkez hizalı; kicker mono letter-spacing .18em 11px; h1 Fraunces 600 44px; sub 14px serif? sub: Fraunces 400 italic 16px? - Panel: border 1.5px solid ink; bg #f8f4ea; iç bölümler aralarında border-top dashed 1px ink/30. - Slider custom: -webkit-slider-runnable-track: height 2px bg ink/70; thumb: 14×18 rect ink border? thumb: 16px×16px ink kare (border-radius 0) hover kırmızı? thumb active kırmızı. Firefox: -moz-range-track/thumb. - Sayı değerleri mono 600. - Panel bölüm başlıkları: mono 10.5px letterspacing .14em uppercase + öncesinde küçük numara "01"? - Butonlar: .btn: border 1.5px ink; bg transparent; mono 11 uppercase; hover bg ink color paper; active push. Switch button aynı buton. - Okunanlar satırları: grid: etiket serif italic küçük | değer mono büyük sağa | birim mono küçük. Q satırı vurgulu: değer kırmızı. - Mini grafik: canvas 100%×120. - Footer: mono 11, çizgi üstü dashed. Panel bölüm sırası: 1. "01 · DEVRE KONTROLÜ": anahtar butonu (KAPAT/AÇ + durum), Boşalt butonu. (iki buton yanyana) 2. "02 · GEOMETRİ VE KAYNAK": 3 slider (d, A, ε). 3. "03 · FORMÜL": C = ε₀ A / d + ikame satırı. 4. "04 · OKUMALAR": C, V, Q, E, U satırları. 5. "05 · KAPASİTANS EĞRİSİ": mini grafik C(d). 6. "NOT": izole durum notu (duruma göre değişen satır — durum metni burada? durum metni 01 içinde alt satır küçük italik ✓). Footer metni: "ε₀ = 8.854 × 10⁻¹² F/m · Model: ideal paralel plakalar, hava/vakum dielektrik · Şarj/deşarj geçişleri hızlandırılmıştır." Butonlar açıklaması: anahtar buton metni: closed ? "DEVREYİ AÇ" : "DEVREYİ KAPAT". İkon: küçük SVG anahtar? inline svg 12px: çizgi-kopuk. Basit metin + küçük nokta göstergesi (● kırmızı kapalı / petrol açık?). Sadelik: metin + durum rozeti zaten. Küçük SVG anahtar çizeyim butonun içinde (14×10): kapalı: düz çizgi; açık: açılı çizgi — dinamik? SVG path JS ile güncelle — mikro detay hoş ✓. Şimdi JS yapısı: ```js const E0 = 8.854e-12; const S = { d: 8, A: 600, emf: 300, closed: true, Q: 0, nQ:0, nV:0, discharging:0, drag:null }; const WORLD = { W:900, H:620, cy:316, railY:545 }; ``` Hesap: ``` function metrics(){ const gap = 16 + 3*S.d; const side = 31*Math.sqrt(S.A/50); const xIL = 450 - gap/2, xIR = 450 + gap/2; const xL = xIL - side, xR = xIR + side; const top = WORLD.cy - side/2? ``` Bekle side plaka "yükseklik" mi? Plaka: w×h: aspect 1:4 (ince dikey): w = side·0.25, h = side. Ah, önce "s=31·√(A/50)" tek boyut demiştim, plaka w=h·0.25: plaka yükseklik h = side, genişlik w = side·0.28? Görsel: dikey dikdörtgen genişliği ~ 36-55px: w = clamp(side·0.30, 12, 58)? side∈[31..196] → w = side·0.30 ∈ [9..59] — min 9px ince; min w 14: w = max(14, side·0.30). Alan temsili yükseklik (h=side) ✓ genişlik dekor. xIL = 450−gap/2 (sol plaka iç yüzü), sol plaka rect: x: xIL−w .. xIL; sağ: xIR..xIR+w. Teller xLc = xIL − w/2 (plaka merkez), xRc = xIR + w/2. ``` C = E0·(A/10000 m²)/(d/1000 m) [A cm² → m²: /10000 ✓ 1 m²=10000 cm² ✓] Vpl = closed ? emf : (S.Q>1e-14 ? S.Q/C : 0) — izole'de V=Q/C ✓ E = Vpl/(d/1000) U = 0.5·C·Vpl² ``` Sürükleme: pointerdown: dünya koord (ctx transform tersini JS hesapla: scale s = cw/900; wx = (e.offsetX)/s... offsetX canvas css px; dünya = cssX/scale). rect'i getBoundingClientRect ile hesapla (offsetX yerine clientX−rect.left). - hit key circle r=30 → toggle closed, anim start. - hit sağ plaka rect genişletilmiş → drag { part:'plate', mode: cx,cy, side0, d0 }. - move: dx,dy dünya: if corner handle: side = clamp(2·max(|wx−cx0|,|wy−cy0|), 31, 196) else: S.d = clamp(d0 + dx/3, 1, 100); side = clamp(side0 + dy, 31, 196) A = 50·(side/31)² → S.A. Slider sync. - key drag yok; tık toggle. Ayrıca hover cursor: pointermove: üzerinde plaka → 'ew-resize'; köşe → 'nwse-resize'; anahtar → 'pointer'; else default. Anahtar animasyonu: keyT (0 kapalı=1?): kol açısı closed? 0 : −32°; lerp anlık anim: keyA += (target−keyA)·dt·10. Şarj/drenaj hesabı her frame: ``` let Qt = S.Q, tau=0.30; if(S.discharging>0){ Qt=0; tau=0.16; S.discharging-=dt; } else if(S.closed){ Qt = C*S.emf; tau=0.26; } // else izole: Qt=S.Q const k = 1-Math.exp(-dt/tau); const Qprev = S.Q; S.Q += (Qt-S.Q)*k; S.dQ = S.Q - Qprev; (akış işareti+şiddet) ``` QmaxRef = C·S.emf (kapalı) veya son: errN = S.discharging? |Q|/refMax : closed ? |Qt−Q|/max(Qt,1e-15) : 0. alpha = clamp(errN·2.5, 0, 1). İzole: akış yok ✓. Ayrıca açık → kapalı geçişte akış ✓ otomatik. Kadran: ``` nQ += (sqrt(Q/Qref)−nQ)·min(1, dt*5) clamp nV += (clamp(Vpl/500,0,1.15)−nV)·... ``` Qref görsel: sabit 3e-7? Q max: Cmax·Vmax: Cmax = E0·0.2/0.001 = 1.77e-6; ·500 = 8.85e-4 J... Q max 8.85e-4 C = 885 µC. Qref = 2.5e-4? Tipik çalışma: A=600cm²=0.06, d=8mm: C=6.6e-11; ·300V = 19.9nC!! Q çok küçük tipikte (nC). Qref'i gösterime göre: sqrt ölçek: görüntü doygunluğu Q_ref = 3e-7 (300nC) — tipik değerler 20nC → sqrt(0.066)=0.26 → az sembol. Hmm plakalarda semboller: 0.26 → ~3-4 satır + — görünür ✓. Q = 885µC (max) → 1.87 clamp 1 → 14 satır ✓. 20nC ile 4 satır fark ok ✓. Qref=3e-4. Sembol satır sayısı: nRows = round(2 + 12·qn) qn=nQ → 2..14; Q=0 → 0. E görsel satır: E max 500V/1mm = 5e5 V/m. Enorm izole: E=Q/ε0A: Q 885µ, A 0.005 → E=2e7! clamp. rows = round(clamp(sqrt(E/5e5),0,1)·16)? Lineer: rows = round(clamp(E/5e5,0,1)·16). Tipik: E=300/0.008=37500 → 0.075·16=1.2 → 1 satır?? Çok az. Tipik E'ler küçük çünkü V küçük /d büyük. Hmm alan çizgileri plakalar arası: fizik gerçek: E ~ 37.5 kV/m — çizgi yoğunluğu görsel: ölçek farklı olmalı. Görsel hedef: tipik 8-10 satır, düşük V ya da geniş d → az. E_norm = sqrt(E/1e5)? E tipik 3.75e4 → sqrt(0.375)=0.61·16=9.8 ✓; E=5e5 → sqrt(5)=2.2→1 clamp 16; E min (V=0) → 0 ✓. sqrt iyi: rows = round(clamp(Math.sqrt(E/1.2e5),0,1)·15). V=0 → 0 satır ✓ (yüksüzde alan yok ✓). Ayrıca sahne boş (Q=0, V=0): plakalar nötr, teller çıplak, alan çizgi yok — sahne temiz; kullanıcının ilk görmesi: başlangıç closed + emf=300 → otomatik şarj animasyonu yüklemede! Sayfa açılır açılmaz kondansatör şarj olur, noktalar akar, semboller belirir, ibre sapar — canlı ilk izlenim ✓✓. (RAF start'ta Q=0'dan başlar, 0.3s'de dolar.) Elektrometre/Voltmetre etiketleri: sol: "ELEKTROMETRE · Q" + sub değer "19.9 nC"; sağ: "VOLT-METRE · V" + değer "300 V". Kadranlar: skala tikleri 0..10. Mini grafik: x: d 1..100 (log? lineer güzel); y: C(d) A sabit güncel. yMax = C(d=1). eğri: 40 örnek. nokta güncel d. Eksen etiketleri mono 9px. Ayrıca izole modda: eğri + "Q sabit → V = Q/C" eğrisi göstermek? Fazla; C eğrisi yeter. Grafik başlığı: "C–d EĞRİSİ (A sabit)". Grafik güncel nokta kırmızı dolu; eğri ink. Hmm grafikte log-x daha bilgilendirici (1/d eğrisi lineer-x'te d→0 patlar): x lineer 1..100: C(d=1) patlamış üst sınırda, çoğu solda sıkışık. Log-x: d 1..100 log; C = ε0A/d log-y? Log-log'da 1/d düz çizgi — grafik görsel olarak düz çizgi (fazla matematiksel, az öğretici). Yarı-log (x log, y lineer): hızlı düşüş güzel görünür. x = log10(d)/2 → 0..1; y = C/Cmax. Eğri dik düşer. ✓ yarı-log seçiyorum. Değer formatları: ``` function si(v, unit){ if(v===0) return "0"; const a=Math.abs(v); const p=[[1e-12,'p'],[1e-9,'n'],[1e-6,'µ'],[1e-3,'m'],[1,''],[1e3,'k'],[1e6,'M']]; // seç: en büyük p ≤ a → value/p; ama a a? Standart: value = a/p; prefix seç: p s.t. 1 ≤ a/p < 1000 → p = en yakın alt. Örn a=1.99e-8 → p=1e-9 → 19.9 n ✓. a=3.75e4 (E) → k → 37.5 k ✓. a=0.44e-12 → p... 0.44e-12 = 4.4e-13 → p=1e-12 → 0.44 p ✓ ok. a=0 → "0". Sayı: <10 → 2 ondalık; <100 → 1; else 0. ✓ U (enerji): v küçük pJ..mJ. Formül ikame satırı: "C = ε₀ · A/d = 8.854×10⁻¹² F/m · 0.0600 m² / 0.0080 m = 66.4 nF" — tek satır mono küçük satır kırılabilir. Şimdi kodu yazayım. Uzunluk ~700-900 satır. Dikkatle, tek seferde tutarlı. Bazı çizim yardımcıları: ``` const INK='#26221b', PAPER='#f8f4ea', RED='#b03a24', TEAL='#20606b', BRASS='#d8c79c'; ``` Pos plaka tint kırmızımsı, neg petrol. Plaka çizim: ``` function plate(x0,w,h,charge /* +1,-1,0 */, qn, col){ // fill brass hafif + tint ctx.fillStyle = '#e3d5ae'; ctx.fillRect(x0, top, w, h); // tarama ctx.strokeStyle='rgba(38,34,27,.10)'; for y step 9: line // tint if(charge){ ctx.fillStyle = charge>0 ? `rgba(176,58,36,${0.10+0.20*qn})` : `rgba(32,96,107,${0.10+0.20*qn})`; fillRect } ctx.lineWidth=2; ctx.strokeRect(...) // iç yüz kenarı kalın? stroke yeter. } ``` Yük sembolleri: kolon plaka merkez x: nRows satır y aralığı; sembol: küçük daire (r=5.2·(0.8+0.35qn)) fill paper, stroke ink 1.5, içinde +/− çizgi (yıç). Dış doldurma: pos: fill RED alpha .9? Semboller: beyaz zemin daire + kırmızı "+"? Kağıt estetiği: sembol: daire fill rgba(paper,0.9), stroke renk (kırmızı/petrol) 1.6, içinde işaret renk. Yoğun satırlarda (14) r küçülür: r = clamp(9−qn·3, 5.5, 9). Satır spacing = h/(nRows+0.6). Alan çizgileri: bölge x: xIL..xIR (iç yüzler), y: plaka dikey aralık [top..bot] merkezli: nRows satır: y_i eşit aralık. Çizgi: xIL+2 → xIR−2, lw 1.4, alpha .5·(0.3+0.7·ef), renk ink; ok ucu sağda (− plakaya bakan): küçük üçgen 6px. Ayrıca çizgiler plaka dikey aralığına sığmalı: satır aralığı = h/(n+1). Kenar fringing: her plaka üst ve alt ucundan dışa kıvrılan 2 adet kavisli çizgi (quadratic) alpha .25·ef: sol plaka soluna dışa: start (xIL, top) → cp(xIL−22, top−16) → end (xIL−40, top−6)? fringing oklar dışa. Sadelik: 2 kavis her plaka her uç (üst/alt) — 8 küçük kavis; alpha düşük. Ekleyeyim ama minimal. Ölçü çizgileri: d: y = plateTop − 20; xIL→xIR; ok uçları ikisi içeri; uzatma çizgileri plakalardan yukarı (plateTop−4 → plateTop−26) alpha .5; etiket merkez üstü: "d = 8.0 mm" mono 12 bold ink; kırmızı nokta? Etiket kağıt zeminli kutu? Grid üstünde okunabilirlik: text bg: ctx.fillRect hafif paper alpha .85 arkasına. Basit: fillRect white-ish. A: sağ plakanın sağından: x = xR + w + 14; dikey çizgi top..bot, tikler; etiket rotate −90°: "A = 600 cm²". Sol tarafta sol plakanın solunda da aynı ölçü? Tek sağ yeter (sol teller var — sol teller plaka merkezinden iner, sol ölçü çakışır). Sol tarafta d ölçüsü üstte ortada ✓. Teller: lw 2 ink; path: sol: (xLc, bot) → (xLc, railY) → (xPilL, railY); pil: x 402..438 bölgesi; sağ: (xRc,bot)→(xRc,railY)→(xKey2,railY)→? pil sağ terminal → anahtar → sağ tel: hat: pil sağ ucundan (x=438) railY boyunca xKey1=612 anahtar → xKey2=652 → sağa devam xRc'ye? Sağ tel: xRc'den railY'e in, railY üzerinde sola doğru xKey2'ye kadar. Pil sol terminal: x=402'den sola xLc'ye. Rail çizgisi: sol segment: xLc..402; pil gövdesi 402..438 (sembol); sağ segment: 438..612 (pil→anahtar), anahtar 612..652, 652..xRc. Pil: uzun çizgi (x=414, ±16 dik), kısa (x=428, ±8)?? Klasik: uzun ince çizgi = + terminal, kısa kalın = −. Yatay rail üzerinde pil dikey çizgilerle: dikey çizgiler rail'i keser. x pozisyonları: L=414 (uzun, +), R=430 (kısa, −). Etiket: üst: "ε" mono 12; alt railY+16: "300 V" mono 11. + terminal solda (sol plaka +) ✓: sol plaka pozitif yüklü, pil + ucu sol tarafa ✓. Anahtar: terminal noktaları (612,railY) ve (652,railY) dolu noktalar r=3; kol: pivot (612,railY); closed: line (612,railY)-(652,railY); open: (612,railY)→(612+34·cos(−34°), railY−34·sin34°). Etiket "S" üstünde mono 11. Hover ring. Akış noktaları path'ler: P1: [(xLc,bot) → (xLc,railY) → (402,railY)] — şarj yönü: pil+ (414) → ... noktalar pil'den çıkıp sol plakaya: yön: 414→402→xLc→bot yukarı. P1 param: t 0..1 toplam len; nokta pozisyonları segment interpolasyon. Yön işareti +1: başlangıç pil tarafı (402, railY) → yukarı plakaya (yani P1 ters param!). P1'i pil→plaka olarak tanımla: seg A: (414?,railY) aslında akış pil içinden görünmez; noktalar rail üzerinde 414..402 arası? pil + terminal x=414: noktalar 414'ten sola akarak 402'ye, sonra dikey tırmanır xLc, plaka altına ulaşır, içeri "girer" (fade). P1: [(414, railY),(402,railY),(xLc,railY),(xLc,bot+6)] — uçta plakaya girer (bot+6→bot içinde? plaka alt kenarına değene kadar: (xLc,bot)). P2: [(xRc,bot),(xRc,railY),(652,railY),(652,railY)...] sağ: plaka altından rail'e, sağa değil sola doğru pil− (430) yönüne: [(xRc,bot),(xRc,railY),(430,railY)] — anahtar üzerinden (652→612→438→430 dahil) ✓ rail segmenti 438..612 anahtar 612..652: noktalar bu düz hatta akar ✓. Yön: şarj: P1: param 0→1 (pilden plakaya) noktalar ilerler; P2: plakadan pile (xRc→430) ✓. Deşarj (sign −1): ters param (plakalar boşalırken yükler pil tarafına geri? Deşarj kısa devre yok bizde... gerçekte kapalı devrede Q azalması: d büyür → plakalardaki fazla yük pille dengelenmek için akar: + yükler sol plakadan pille → geri. Yön ters ✓ sign ile param yönü ters ✓. Nokta boyunca: her path len; dots: spacing 26px, offset = (time·speed) % spacing; speed = 55 + 140·flowAlpha; her nokta i: pos = (offset + i·spacing) % len → parametrizasyon polyline aralıklarla. Alpha = flowAlpha·(kenar fade: pos yakını uç 40px içinde alpha azalt — plaka ucu girerken kaybolsun ✓, pil ucunda da). Roket detay: nokta r=2.6 ink dolu. Rozet (alt sol canvas): kutu stroke ink, mono 10.5: "● PILE BAĞLI · V SABİT" veya "○ İZOLE · Q = Q₀ KORUNUR" veya "YÜKSÜZ". Nokta rengi durumla. Canvas metin fontu: '"IBM Plex Mono", monospace' 11px; başlık fontları sahnede: ölçü etiketleri mono 12 600. Ana canvas metin: pil "ε", "S", etiketler okunur. Voltmetre bağlantısı? Kadranlar dekoratif ölçüm gösterimi (bağlantı çizgisi olmadan köşe kadranları — "kayıt föyü" hissi). Sol üst kadran x=70,y=78 r=46; sağ üst x=830,y=78 r=46. Plaka üst ölçü çizgisi y=plateTop−20: plateTop = cy−side/2 = 316−98=218 min... side max 196 → top = 218; ölçü y=198; kadran alt = 78+46=124 ✓ çakışmaz. Kadranlar ve ölçü çizgisi x aralığı: d ölçüsü merkez x=450 genişlik gap max 336+etiket → x 280..620; kadranlar x<116 ve >784 ✓. Kadran çizimi: ``` function gauge(cx,cy,val01,label,unit,valueStr){ r=46; dış daire lw1.8; tikler: 11 tik (0..10): uzun her 5'te; ibre: açı = −135°+270°·val01 (deg→rad): line r0=8→r=34, lw 2.5 RED; merkez nokta; pivot gölge yok. label üst alt: cy+r+14 mono 10 caps; value: cy+? içinde alt kısmında? Değer kadran altı: cy+r+26 mono 13 bold + birim. } ``` İbre yumuşak: nQ/nV state lerp ✓. V kadran 0..500 skala (izole'de >500 olabilir clamp 1.15 overshoot — skala max 500, ibre clamp; değer metni gerçek). "range" işareti: kırmızı zarif tik 500 bölgesi? Gerek yok. Mini grafik çizimi (panel canvas 100%×110 css px; dpr ölçek): ``` pad 34/18; x: t=log10(d)/2 0..1 (d=1→0, d=100→1); y: C/Cmax; eğri 60 nokta; eksen çizgileri ink/25; nokta güncel RED r=3.5; etiketler: "d →" alt, "C" sol üst, min/max işaretler: "1 mm" ve "100 mm" alt; y: "C max" üst, "0" alt. İzole modda ekstra: ikinci eğri? Hayır. ``` Formül bölümü: HTML'de: ```

C = ε₀ · Ad

8.854×10⁻¹² F/m · 0.0600 m² / 8.0×10⁻³ m = 66.4 nF

``` frac: dikey iki span çizgi border-top. HTML entities: ε₀, ×, ⁻¹², ·, ² karakterleri UTF-8 ✓ (charset meta). Okuma satırları: ```

Kapasitans C66.4nF

``` değer+birim ayrı: si() döner {v,unit} → iki span. Q satırı .hi (kırmızı değer). 5 satır: C, V, Q, E, U + açıklama küçük? Her satır altına mini açıklama çok kalabalık; hover title attribute: title="Q = C · V" ✓ hafif. Buton satırı: ```

...

``` Boşalt: S.discharging=0.8 (saniye süresi) + akış − yönlü ✓ (Qt=0 → sign − ✓ otomatik: sign(Qtarget−Q) = sign(0−Q) = −1 ✓). Ayrıca kapalıyken "BOŞALT" çalışmaz (pil yeniden doldurur anında — fizik doğru! Boşalt butonu sadece açık devrede anlamlı → açık değilse buton disabled stil + title "Önce devreyi aç"). Doğru davranış ✓ öğretici. Hmm kapalıyken boşaltmak: fiziksel olarak pil'le paralel direnç — pil yeniden doldurur. Buton kapalıyken disabled ✓. Slider değişince anında görsel ✓; drag da. Slider etiketlerinde canlı değer: label satırı: "d — plaka mesafesi" sağda "8.0 mm". Klavye erişimi: slider native ✓; canvas etkileşimi pointer; anahtar canvas tık + buton ✓. Performans: rAF loop her frame; draw dünya; DPR: canvas.width = cw·dpr; ctx.setTransform(dpr·s, 0,0, dpr·s, ...) birleşik ölçek: tüm çizimler dünya koordinatı; ctx.setTransform(k,0,0,k,ox,oy) k = dpr·scale. Resize: ResizeObserver stage. Pointer events: pointerdown/setPointerCapture/move/up. Şimdi tam HTML yaz. Font import: ``` ``` Renk paleti kesinleşmiş: --paper:#f3eee1 (body bg), --card:#faf6ec, --ink:#241f16, --ink2:#5a5344, --red:#ab351f, --teal:#1d5c66, --line: rgba(36,31,22,.8). Canvas sahne bg: biraz farklı ton (#f7f2e5) + grid rgba ink .055 24px; kenar çerçevesi canvas içi stroke ink lw 1.5 inset 10px? Stage container border ink 1.5 → canvas çerçevesi CSS border ✓ (canvas %100). Canvas içi köşe işaretleri (crop marks) küçük ✚ köşelerde ink .35 — föy detayı ✓. Kadranlar arka: paper zemin (kağıt) daire fill rgba(250,246,236,.9) + stroke — grid üstünde okunur ✓. Yerleşim riski: sağ panel genişliği 350; mobil <900px: grid 1 kolon; stage aspect-ratio korur; panel altında. Header font küçült. Buton hover durumları; focus-visible outline kırmızı dashed? outline 2px offset2 RED ✓ erişilebilirlik. Küçük ikonlar butonda: anahtar SVG: ``` ``` open: path "M3.6 6 L12.8 2.2" gibi; JS güncelle d attr ✓. stroke ink lw1.6 fill none; circles fill ink. Boşalt ikonu: küçük ok aşağı-döngü? Basit çizgi ok: şart değil — metin yeter + küçük "×" ikonu? Boşalt: metin "KONDANSATÖRÜ BOŞALT" — uzun; "BOŞALT" yeter. Disabled stil: opacity .35 + cursor not-allowed. Durum notu metni stateNote: - closed & emf>0: "Devre kapalı — kondansatör pile bağlı: gerilim V sabit, yük Q = C·V. d veya A'yı değiştir: Q anında değişir." - closed & emf=0: "Devre kapalı, pil gerilimi 0 — plakalar nötr." - open & Q>0: "Devre açık — kondansatör izole: yük Q korunur. d'yi küçült: C artar, V = Q/C yükselir; alan şiddeti sabit kalır (E = Q/ε₀A)." - open & Q=0: "Devre açık — yüklenmedi." V kadran izole'de: değer Q/C; ibre clamp 1 (500V üstü taşarsa — E/V çok büyük: izole d küçük → V = Q/C büyük 500 üstü: metin gerçek gösterir, ibre clamp ✓ + mini "≥" işareti? gerek yok, değer metni "612 V" gösterir; kadran dolu. Sürükleme ipucu: canvas içinde alt orta mono 10.5 ink/60: "sağ plakayı sürükle ↔ mesafe · ↕ alan — anahtar (S) için tıkla" railY+? alt: y=600 merkez. Anahtar tıklanabilir rozetini ipucu metni belirtiyor ✓. Rozet (durum) alt sol x=24,y=578; ipucu merkez x=450 y=590? Çakışma kontrol: rozet dar; ipucu x 240..660; rozet 24..~230 ✓. Bir de sahne üst başlık? DOM header yeter. Grid çizimi: dikey/yatay her 30px alpha .05; her 150px'te alpha .09 (ince kağıt mm kağıdı hissi) + orta crosshair merkez plaka merkezine? Gerek yok. Kadran skala değerleri: Q kadranı normalize (0..1 val) — skala tikleri rakamsız; metin: değer. V kadranı: 0/250/500 işaretleri mini rakam 8px ✓. Kod düzeni: ``` ``` Ayrıntılı çizim fonksiyonlarını yazarken dünya koordinat sabitleri: - W=900,H=620 - railY=540 (alt ipucu 590, rozet 590) - cy=300 (plaka merkez y) — top = 300−h/2; h max 196 → top 202; d ölçü y=182; kadran cy=76 r=46 → alt 122 ✓ boşluk 60 ✓. - pil: railY=540; pil dikey çizgiler ±17; etiketler 516/562; rail segmentler. - ipucu y=598; rozet y merkez 590 (kutu 570..606 x 20..~250). - plaka bottom max = 300+98=398; teller 398..540 ✓ uzunluk 142 ✓. H=620: rozet/ ipucu 590..606; canvas alt çerçeve ✓. Kadran konum: sol (66,76), sağ (834,76). Grid: 30px; offset 0. Şimdi sembol satır hesap: h=side; rows = 2+12·qn (qn=0 → 0 satır: condition qn>0.03). spacing = h/(rows+1); y_i = top + spacing·(i+1). x merkez = plaka merkez x. Sembol çiz: daire r; plus: iki çizgi ±r·0.42; minus: tek yatay. Alan satır: nE = round(15·clamp(sqrt(E/1.2e5),0,1)); >0; spacing h/(nE+1); x aralığı xIL+3..xIR−3; ok ucu sağda. Fringing: skip — kodda deneyip ekleyebilirim ama sadelik adına: küçük 4 kavis (sol plaka dış üst/alt, sağ plaka dış üst/alt) alpha .28·ef. Ekleyeyim: sol plaka üst dış: start (xIL−1, top−0), quadratic cp (xIL−16, top−22), end (xIL−34, top−30)? Alan çizgileri plakaların dışına bükülür (fringing üst uçlarda dışa). Yön: dışa yukarı. Basit kavisler: ``` curve(x0,y0, cx,cy, x1,y1) ``` 4 kavis: sol üst: (xIL, top) → (xIL−26, top−20); sağ üst: (xIR, top) → (xIR+26, top−20); altta simetrik +20. alpha 0.3·ef. Hoş detay ✓. Akış noktaları pathLen hesap fonksiyonu: polyline pts → kümülatif; pos(t) → nokta + açı (nokta yönü ok başı yok — nokta yeter). P1 pts: [(414, railY), (xLc, railY), (xLc, bottom)] — 414→xLc sola rail, sonra yukarı. len. P2 pts: [(xRc, bottom), (xRc, railY), (428, railY)] — sağ plakadan pile. Yön işareti dir=+1 (şarj): P1 ileri (pilden plakaya: pts başı pil 414 ✓ ileri = pilden plakaya ✓); P2 ileri: pts başı plaka → pile ✓. dir=−1: ters. offset ilerler: tOff = (tOff + speed·dt·dir) mod len (negatif mod düzelt). dots alpha uçlarda: pos < 34 veya len−pos < 34 → alpha·pos/34 — plakaya girerken ve pil terminalinde fade ✓. Nokta sayısı: n = floor(len/26); pos_i = (tOff + i·26) mod len (dir +) veya (tOff − i·26 mod len)?? Tek offset yeterli: pos = mod(tOff + i·26, len) — hepsi aynı yönde ✓ (tOff yönü dir ile ilerler). Anahtar açıkken akış yok (flowAlpha=0 → alpha 0 skip) ✓. Şimdi HTML/CSS tam metni derli toplu yaz. CSS taslak: ``` :root{ renkler; --mono:'IBM Plex Mono',monospace; --serif:'Fraunces',serif; } *{box-sizing:border-box} body{ margin:0; background: kağıt + çok hafif doku (repeating gradient çizgi yok — sade); color ink; font mono base? body font: mono 13 — teknik föy. Başlıklar serif. wrap: max-width 1280; margin auto; padding 28 clamp. header: grid: sol başlık (serif 40px) + sağ formül rozetleri? Header düzeni: üst satır: küçük mono etiket "FİZİK · ELEKTROSTATİK — FÖY 04" + sağ: tarih? gereksiz. h1 serif 44 italik olmayan; altında alt başlık mono ink2 13. sağda: büyük formül şeridi? Formül panelde zaten. Header sağ: mini "Q = C·V" rozet? Fazla. Sade: başlık + alt satır. layout: display:grid; grid-template-columns: 1fr 360px; gap:22; align-items:start. stage: border:1.5px solid ink; background: card; aspect-ratio: 900/620; position:relative; canvas %100 display block. panel: border 1.5 ink; bg card; padding 20 22; kendi içinde bölümler border-top ayraç (dashed ink/40). section başlık: mono 10.5 letterspace 1.5 caps ink2; öncesinde küçük numaralar "01" mono? Bölüm numarası: "01 · KONTROLLER" — föy numaralandırma ✓ hoş. slider satırı: label üst satır flex (isim + değer), input altında; input custom: appearance none; height 26; track: 2px ink/50 line + üzerinde: input::-webkit-slider-runnable-track height 2 bg rgba; thumb: 12×18 dikdörtgen ink, border-radius 1; hover→red. Firefox ::-moz-range-thumb benzer. Değer etiketi: mono 12 bold; değişince? statik güncel. read satırları: flex baseline; rl mono 11 caps ink2 flex1; b mono 15 700 ink; ru mono 11 ink2; ayraç: border-top dashed rgba; padding 7 0. .hi b{color red} formula: f-main serif? Formül mono/serif karışık: "C =" serif italic 26; frac: inline-flex column; üst "ε₀·A" alt "d" — aslında C = ε₀A/d: frac üst A alt d, önde "C = ε₀ ·". f-main font: serif 24; frac çizgi: border-top 1.5 ink. f-sub mono 11 ink2 line-height 1.6; b ink. butonlar: mono 11.5 caps lettersp; padding 9 14; border 1.5 ink; bg transparent; hover: bg ink color paper; active translate; primary (switch) bg ink text paper; hover bg red? Switch buton dolgulu ink, state'e göre: kapalı → metin "DEVREYİ AÇ"? Etiket durum gösterir: buton metin "ANAHTARI AÇ / KAPAT" durum neyse eylem: kapalıysa "ANAHTARI AÇ". İkon d değişir. stateNote: mono 11 ink2 line-height 1.55; öncesinde "▸" ? düz. footer: mono 11 ink2; ortalı; üst çizgi dashed; padding. responsive @900: tek kolon; header h1 30. focus-visible. ``` Doku: body background: subtle: linear-gradient yok; hafif kağıt benek: radial? Kağıt hissi: body::before? Sade bırakayım + canvas içinde grid yeter. Panelde de minik grid? Panel sade kağıt + dashed ayraçlar ✓. Header üst etiket satırı: sol "FİZİK — ELEKTROSTATİK · FÖY 04" mono 11 ls2; sağ: "PARALEL PLAKA · Q = C·V" mono 11 ink2. Çizgi altında. h1: "Kondansatör Laboratuvarı" — serif; alt: "Plakalar arasındaki mesafeyi ve yüzey alanını değiştir; yük, kapasitans ve alan şiddetinin nasıl davrandığını canlı izle." mono 13 ink2. Sayfa başlığı Kondansatör Laboratuvarı — Paralel Plakalı Kondansatör Simülatörü. Şimdi tüm kodu yaz. Uzun olacak; dikkatle tutarlı. JS ayrıntıları — state: ``` const S = { d: 8, // mm A: 600, // cm² emf: 300, // V closed: true, Q: 0, // C (güncel) dispQ: 0, // ibre için dispV: 0, tOff: 0, }; const EPS0 = 8.854e-12; const Cof = () => EPS0 * (S.A/1e4) / (S.d/1000); ``` A cm²→m²: /10000. d mm→m: /1000. Başlangıç d=8mm, A=600cm² → C = 8.854e-12·0.06/0.008 = 6.64e-11 = 66.4 pF! Hmm 66.4 pF; Q=CV=300·6.64e-11=19.9 nC. nC aralığında — ok ama C pF küçük his; daha "orta" değerler: d=2mm, A=600cm² → C=2.66e-10 = 266 pF; Q=79.7nC. Ya da A=2000cm², d=5mm: C=3.54e-9 = 3.54 nF; Q=1.06 µC. Başlangıç: A=1000 cm², d=5 mm, emf=250 V → C=1.77 nF, Q=443 nC. Değerler nC/µC — hoş. Başlangıç: d=5, A=1000, emf=250. Ama slider aralıkları: d 1..100 mm, A 100..2500 cm²? s(A): s=30·sqrt(A/100)→ A=100→30px, A=2500→150px; A=1000 → 94.9px. Hmm s ölçek: A=2500 → s=150 → w=75, h=300 ✓; A=100 → s=30 → w15 h60 — küçük plaka min okunur? min A: 200 → s=42.4 (w21 h85). Aralık: A ∈ [200, 2500]? Formül pF..nF: A=200,d=100 → C=1.77e-12 pF ✓; A=2500,d=1 → C=2.21e-8=22.1 nF ✓ güzel aralık. Slider A: 200–2500 cm², step 10. d: 1–100 mm step 0.5. emf: 0–500 step 5. s(A) = 30·sqrt(A/200): A=200→30, 2500→106?? hesap: sqrt(2500/200)=sqrt(12.5)=3.53→106px. h=2·s=212, w=s/2=53. Hmm daha büyük plakalar iyi: s=40·sqrt(A/200): 200→40 (w20,h80); 2500→141 (w70,h283). A=1000 → s=89 (w45,h179). ✓ Bunları kullan: scale s = 40·sqrt(A/200). gap px: g = 26 + (S.d−1)/99 · 300 → d=1→26, 100→326. Toplam genişlik max: w·2 + g = 70·2+326=466; merkez CX=455: xIL = 455 − (w+g/2)?? İç yüzler: xIL = CX − g/2 − ? İki plaka iç yüzleri arası gap: sol plaka sağ yüzü = xIL, sağ plaka sol yüzü = xIR = xIL + g. Plaka merkezleri: xILc = xIL − w/2, xIRc = xIR + w/2. Grup genişlik = 2w + g → sol kenar = CX − (w+g/2): xIL = CX − (w+g/2) + w = CX − g/2?? sol plaka sol kenarı = xIL − w. Grup sol = xIL − w = CX − g/2 − w ✓. xIL = CX − g/2; xIR = CX + g/2. CX=455. Max: xIL=455−163=292, sol kenar 292−70=222; sağ kenar 688. Kadranlar <116, >784 ✓; ölçü etiket A sağda x=688+? xIRc=688+35=723; A ölçü x=723+? w=70: xRc merkez... A ölçü çizgisi x = xIRc + w/2 + 16 = 723+70/2+16? xRc (sağ plaka merkezi) = xIR + w/2 = 688+35 = 723; sağ kenar 758; ölçü x=774 — kadran sağ x=834−46=788 altı y>122; ölçü y plaka bölgesi 200..400 ✓ çakışmaz ✓. Etiket rotate x=774. Sağ plaka drag hitbox: rect xIR..xIR+w? Plaka gövdesi: xIR..xIR+w (sol yüz xIR). Hit: plaka rect + 6 pad. Drag: pointerdown on canvas: dünya koordinatına çevir: wx = (px − ox)/scale... transform: setTransform(k,0,0,k,ox,oy) ox=0? Canvas tam sahne: fit: scale = min(cw/900, ch/620)?? Canvas aspect 900/620 sabit CSS ile (aspect-ratio) → scale = cw/900 tam, ox=0. DPR: ctx.setTransform(dpr·sc, 0,0, dpr·sc, 0,0) sc = cw/900. Pointer→dünya: (e.offsetX)/sc. Hit: key (anahtar): dist((wx,wy),(632? key merkez railY)) < 26 → drag mode 'key' (tıkla toggle on pointerup? pointerdown'da toggle anında ✓ pointer). Sağ plaka hit: x in [xIR−4, xIR+w+8], y in [top−8, bottom+8] → 'plate'. pointermove: mode 'plate': dx = wx − last.x → d_mm_new = S.d + dx / (300/99)?? gap px ↔ d: g = 26 + (d−1)/99·300 → dg/dd = 300/99 = 3.0303 px/mm. d = clamp( d + dx/3.0303, 1, 100 ). dy: side = 40·sqrt(A/200) → ds/dA: ds = 40·(1/(2·sqrt(200A)))·dA → dA = 2A·ds/s. side += dy (alt kenar hareketi? Merkez sabit: side = s0 + dy·? kullanıcı plakayı aşağı sürüklerse alan artsın: dy pozitif → side artar: side = clamp(s0+dy, smin, smax) → A = 200·(side/40)². dy negatif → küçülür. Slider senkron (slider.value güncelle). Aynı zamanda 'resize' köşe modu? Sadeliğe: plate drag hem d hem A yeter — köşe ayrı modu atla (kod sadeliği, hâlâ zengin). Cursor: plate hover: 'grab'/'ew-resize'? 'move'? cursor: nsew? Kullan 'grab' hover, dragging 'grabbing'. İpucu metni yönleri anlatıyor. Slider'lar drag sırasında güncellenir: setSlider('d', S.d) vs. Pil/slider ε: emf slider 0..500: S.emf. Fizik step (per frame dt): ``` C = Cof(); let Qt; if (S.closed) Qt = C*S.emf; else Qt = S.Q; // izole: Q korunur // lerp: S.Q += (Qt−S.Q)·(1−exp(−dt/τ)); τ=0.12s closed; open: Qt=S.Q değişmez (ama d değişince kapalı modda

Fizikte bir kondansatörü temsil eden kondansatörün elemanlar...