1 Veri Yapıları ve Algoritma

Bu teknik neden seçildi?

DNA çift sarmalını temsil etmek için iki ayrı nokta dizisi (strand1, strand2) kullandım. Her dizi, { x, y, t, angle } nesneleri içeriyor. Bu yaklaşım, sarmalın her iki ipliğini bağımsız olarak hesaplamayı ve baz çiftlerini (A-T, G-C) renklendirmeyi kolaylaştırıyor. Ayrıca time değişkeni ile sinüs/kosinüs dalgalarını faz kaydırarak sürekli bir animasyon elde ettim.

Hangi alternatifler mümkündü?

• 3D vektör matematiği: THREE.js olmadan manuel 3D projeksiyon ile daha derinlikli görünüm sağlanabilirdi — ancak performans maliyeti artardı.
• Parçacık sistemi: Her nükleotidi ayrı bir parçacık olarak yönetmek, daha organik bir görünüm verir; fakat baz çifti bağlarını takip etmek zorlaşır.
• Bezier eğrileri: Sarmal yerine yumuşak spline'lar kullanılabilirdi; ama DNA'nın karakteristik burgu şekli kaybolurdu.

Gelecekte nasıl geliştirilebilir?

Nokta dizileri yerine typed array (Float32Array) kullanılarak bellek ve CPU tasarrufu sağlanabilir. Ayrıca her nükleotit için bir Uint8Array renk indeksi tutulabilir. WebGL'e geçiş yapılırsa, vertex shader içinde sarmal denklemi hesaplanarak CPU yükü sıfıra indirilebilir.

// Mevcut nokta üretimi
for (let i = 0; i <= points; i++) {
  const t = i / points;
  const angle = t * Math.PI * 2 * turns + offset;
  strand1.push({
    x: centerX + Math.cos(angle) * amp + pointerOffsetX,
    y: centerY + (t - 0.5) * h * 0.6 + Math.sin(angle) * amp * 0.45
  });
}

// Alternatif: Float32Array ile
const positions = new Float32Array(points * 2);
for (let i = 0; i < points; i++) {
  positions[i*2] = ...; // x
  positions[i*2+1] = ...; // y
}

2 Performans Kararları

Bu teknik neden seçildi?

Her karede tüm sarmal noktalarını yeniden hesaplamak yerine, delta-time tabanlı bir animasyon döngüsü kullandım. requestAnimationFrame ile 60 FPS hedeflenir; visibilitychange olayı ile sekme arka plana atıldığında döngü durdurulur. Canvas boyutlandırması ResizeObserver ile yapılır ve devicePixelRatio hesaba katılarak retina ekranlarda keskin görüntü sağlanır.

Hangi alternatifler mümkündü?

• OffscreenCanvas: Arka planda çizim yapıp ana thread'i serbest bırakmak mümkündü; ancak tarayıcı desteği hâlâ sınırlı.
• Web Workers: Nokta hesaplamaları worker'a taşınabilirdi; fakat canvas çizimi ana thread'de kalmak zorunda.
• Statik önbellek: Değişmeyen arka plan yıldızları bir kez çizilip drawImage ile kopyalanabilirdi; bu, her karede 70 yıldız çiziminden tasarruf sağlardı.

Gelecekte nasıl geliştirilebilir?

Çizim katmanları ayrılabilir: arka plan, sarmal gövdesi ve nükleotidler ayrı OffscreenCanvas nesnelerinde tutulabilir. Ayrıca willReadFrequently bayrağı ile canvas context'i optimize edilebilir. WebGL'e geçiş, özellikle mobil cihazlarda büyük kazanç sağlar.

// Delta-time animasyon
let lastTimestamp = 0;
function draw(timestamp) {
  const delta = Math.min(0.05, (timestamp - lastTimestamp) / 1000);
  lastTimestamp = timestamp;
  time += delta * speed * 2.2;
  animationFrame = requestAnimationFrame(draw);
}

// OffscreenCanvas alternatifi
const offscreen = new OffscreenCanvas(w, h);
const octx = offscreen.getContext('2d');
// arka planı bir kez çiz, sonra kopyala
ctx.drawImage(offscreen, 0, 0);

3 Tasarım ve Renk Mimarisi

Bu teknik neden seçildi?

Uzay teması için koyu mor-lacivert arka plan (#0b0715) seçildi. DNA iplikleri için #b78aff (mor) ve #5fd9ff (cyan) kullanıldı — bunlar hem birbirinden ayrışır hem de koyu zeminde parlak görünür. Nükleotid renkleri (A, T, G, C) biyolojik çağrışımlardan bağımsız olarak yüksek kontrastlı tonlardan seçildi: pembe, yeşil, turuncu, mavi.

Hangi alternatifler mümkündü?

• Monokrom şema: Tüm sarmal tek renk olabilirdi; ama nükleotid çeşitliliği kaybolurdu.
• Neon palet: Daha canlı renkler (saf #FF00FF gibi) kullanılabilirdi; ancak göz yorgunluğu yaratır.
• HSL döngüsü: Renkler zamanla değişebilirdi; fakat biyolojik kimlik hissi zayıflar.

Gelecekte nasıl geliştirilebilir?

CSS color-mix() fonksiyonu ile dinamik renk geçişleri yapılabilir. Kullanıcı tercihine göre yüksek kontrast modu eklenebilir. Ayrıca prefers-reduced-motion sorgusu ile animasyon hızı sıfıra indirilebilir.

/* CSS renk değişkenleri */
:root {
  --nucleotide-a: #ff5e8a;
  --nucleotide-t: #3cd6a0;
  --nucleotide-g: #ffb347;
  --nucleotide-c: #5fa8ff;
}

/* Yüksek kontrast modu */
@media (prefers-contrast: more) {
  :root {
    --bg-deep: #000000;
    --helix-a: #ffffff;
    --helix-b: #ffff00;
  }
}

4 Anti-Pattern Uyarıları

Bu teknik neden seçildi?

Uygulamada bilinçli olarak kaçınılan bazı anti-pattern'ler var. Örneğin: global değişken kirliliği yok (IIFE içinde), setInterval kullanılmadı (requestAnimationFrame tercih edildi), DOM sürekli güncellenmiyor (sadece slider değerleri). Ayrıca eval, innerHTML ile kullanıcı verisi yazma gibi tehlikeli pratiklerden kaçınıldı.

Hangi alternatifler mümkündü?

• React/Vue kullanımı: Sanal DOM ile state yönetimi kolaylaşırdı; ancak tek dosya kısıtı ve harici bağımlılık yasağı nedeniyle tercih edilmedi.
• Global değişkenler: Daha kısa kod yazılabilirdi; fakat çakışma riski ve test edilebilirlik azalırdı.
• CSS animasyonları: Sarmal tamamen CSS ile çizilemezdi; Canvas zorunluydu.

Gelecekte nasıl geliştirilebilir?

ES modülleri kullanılarak kod parçalara ayrılabilir. TypeScript ile tip güvenliği sağlanabilir. Ayrıca birim testler için Jest + jsdom eklenebilir; fakat bu, tek dosya felsefesini bozar.

// Anti-pattern: setInterval ile animasyon
setInterval(() => { draw(); }, 16); // KÖTÜ

// Doğru: requestAnimationFrame
function loop(ts) {
  draw(ts);
  requestAnimationFrame(loop); // İYİ
}

// Anti-pattern: ctx.scale'i her karede çağırmak
// Doğru: bir kez resize'da çağır
function resize() {
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.scale(dpr, dpr);
}

5 Alternatif Yaklaşımlar ve Geliştirme Önerileri

Bu teknik neden seçildi?

Canvas 2D, Web Audio API ile doğrudan entegre edilebilir ve tek dosya içinde tüm işlevselliği sunar. Ses sentezleme için OscillatorNode + BiquadFilterNode kombinasyonu kullanıldı; bu, düşük gecikmeli ve esnek bir yapı sağlar. Kullanıcı etkileşimi (pointer konumu) hem görsel hem işitsel parametreleri modüle eder.

Hangi alternatifler mümkündü?

• WebGL + Three.js: 3D DNA modeli ve post-processing efektleri; ancak harici kütüphane yasağı.
• WebGPU: Gelecekte canvas 2D'nin yerini alabilir; şu an deneysel.
• SVG animasyonu: Vektörel çizim avantajı; fakat performans sınırlı.
• Web Audio API yerine <audio> elementi: Hazır ses dosyaları gerekir; sentezleme yapılamaz.

Gelecekte nasıl geliştirilebilir?

Uygulama PWA'ya dönüştürülerek çevrimdışı çalışabilir. Ses kaydı özelliği (MediaRecorder) eklenebilir. Kullanıcıların kendi DNA dizilimlerini girmesi için bir arayüz tasarlanabilir. Ayrıca Web MIDI API ve Gamepad API ile alternatif kontrol yöntemleri sunulabilir.

// Web Audio API zinciri
oscillator = audioCtx.createOscillator();
filter = audioCtx.createBiquadFilter();
gainNode = audioCtx.createGain();

oscillator.type = 'sawtooth';
filter.type = 'lowpass';
filter.Q.value = resonance;

oscillator.connect(filter);
filter.connect(gainNode);
gainNode.connect(audioCtx.destination);
oscillator.start();

// AudioWorklet alternatifi
await audioCtx.audioWorklet.addModule('processor.js');
const workletNode = new AudioWorkletNode(audioCtx, 'dna-processor');

1 Başlangıç Seviyesi

Tek dosyalık bir HTML uygulaması yap: "DNA Origami Tasarım Stüdyosu". Uzay temalı, Canvas 2D ile çizilmiş çift sarmal DNA animasyonu ve Web Audio API ile etkileşimli synthesizer içersin. Slider'larla frekans ve rezonans ayarlanabilsin. Mobil uyumlu olsun, harici bağımlılık kullanma.

2 Orta Seviye

Tek dosyalık HTML+CSS+JS ile "DNA Origami Tasarım Stüdyosu" yap. Gereksinimler: Canvas 2D ile çift sarmal DNA animasyonu (requestAnimationFrame, delta-time). Web Audio API ile oscillator + biquad filter (frekans 80-1200 Hz, rezonans 0-20). 4 slider: frekans, rezonans, sarmal hızı, dalga boyu. 3 preset butonu (alpha, beta, gamma). Renk paleti: koyu uzay arka planı (#0b0715), mor (#b78aff) ve cyan (#5fd9ff) sarmallar, nükleotidler için pembe/yeşil/turuncu/mavi. ResizeObserver ile responsive canvas. Yıldız arka planı. Mobil öncelikli (480px, 768px kırılımları). Harici CDN, font, görsel kullanma. Console hatası olmasın.

3 İleri Seviye

Mimari referanslı "DNA Origami Tasarım Stüdyosu" uygulaması. Modüler IIFE yapısı, strict mode. Canvas 2D çizim katmanları: arka plan yıldızları, sarmal gövdesi, nükleotid noktaları. Web Audio API zinciri: OscillatorNode (sawtooth) → BiquadFilterNode (lowpass, Q=rezonans) → GainNode. Pointer etkileşimi: canvas üzerinde fare/dokunma konumu hem görsel sarmal eğimini hem de filtre frekansını modüle etsin. Performans: requestAnimationFrame + delta-time, visibilitychange ile arka planda durdur, ResizeObserver ile DPR farkındalıklı boyutlandırma. Erişilebilirlik: 44px minimum dokunma hedefi, focus-visible outline, prefers-reduced-motion desteği. Renk körlüğü için nükleotidler farklı parlaklık ve boyut. Slider'lar min 44px yükseklik. Preset sistemi: alpha (220Hz, Q=4), beta (440Hz, Q=9), gamma (880Hz, Q=14). Ses aç/kapa butonu. Nota göstergesi (A4 formatı). Harici bağımlılık yasak.

4 Uzman Seviyesi

Edge case'li "DNA Origami Tasarım Stüdyosu" uygulaması. Şu senaryoları ele al: (1) Web Audio API desteklenmiyorsa graceful degradation — uygulama görsel olarak çalışmaya devam etsin, ses butonu devre dışı kalsın. (2) AudioContext suspended durumdaysa ilk kullanıcı etkileşiminde resume() çağrılsın. (3) Sayfa görünmez olduğunda (visibilitychange) animasyon dursun, görünür olduğunda kaldığı yerden devam etsin. (4) devicePixelRatio değiştiğinde (örn. harici monitör) ResizeObserver tetiklensin ve canvas yeniden boyutlandırılsın. (5) Çok yüksek frekanslarda (1200 Hz üzeri) Nyquist sınırına dikkat edilsin, otomatik gain düşürülsün. (6) Bellek sızıntısını önlemek için beforeunload'da oscillator.stop() ve audioCtx.close() çağrılsın. (7) Pointer olayları passive:false ile touchmove'da preventDefault yapılsın ki sayfa kaymasın. (8) CSS custom properties ile tema değişkenleri tanımlansın, prefers-contrast: more desteklensin. (9) Tüm DOM elemanlarına aria-label ve role atansın. (10) Kod tamamen IIFE içinde, global değişken sızıntısı olmasın. Harici bağımlılık kesinlikle yasak. Console'da hiçbir hata veya uyarı olmasın.

5 Remix Seviyesi

Mevcut "DNA Origami Tasarım Stüdyosu" uygulamasını remixle. Yeni özellikler: (1) Kullanıcı kendi DNA dizilimini (ATGC harfleriyle) girebilsin ve sarmal bu dizilime göre renklensin. (2) Ses kaydı özelliği: MediaRecorder ile üretilen sesi WAV olarak indir. (3) MIDI klavye desteği: Web MIDI API ile harici klavyeden notalar tetiklensin. (4) Arpeggiator: preset butonlarına basılı tutunca otomatik arpej çalsın. (5) Görsel katmanlar: OffscreenCanvas ile arka plan yıldızları ayrı katmanda çizilsin, ana canvas'a kopyalansın. (6) Performans: Float32Array ile nokta pozisyonları saklansın, her karede yeniden hesaplanmasın. (7) Tema desteği: açık/koyu mod arasında geçiş butonu, CSS custom properties ile. (8) PWA dönüşümü: manifest.json ve service worker ekle (inline base64), çevrimdışı çalışsın. (9) Klavye kısayolları: Space=suspend/resume, 1/2/3=presetler, +/- = frekans. (10) FPS göstergesi sağ üst köşede. Mevcut kodun IIFE yapısını koru, harici bağımlılık ekleme. Tüm yeni özellikler 44px dokunma hedefine uygun olsun.

1 Medikal & Biyoinformatik

Hangi algoritma kullanılır?

DNA sarmal koordinat üretimi (Math.sin / Math.cos faz kaydırmalı nokta dizisi) ve nükleotid renklendirme algoritması. Bu, gerçek DNA dizilimlerinin görselleştirilmesinde kullanılan helical projection tekniğinin basitleştirilmiş halidir.

Faydası nedir?

• Hızlı görsel teşhis: Mutasyon noktaları (SNP) renk kodlamasıyla anında fark edilir.
• Karşılaştırmalı genomik: İki farklı organizmanın dizilimleri yan yana çizilerek farklar görselleştirilir.
• Eğitim: Tıp öğrencileri DNA yapısını interaktif olarak öğrenir.

Kod örneği (helical projection)

// Gerçek DNA baz pozisyonu → 2D ekran koordinatı
function baseToScreen(baseIndex, totalBases) {
  const t = baseIndex / totalBases;
  const angle = t * Math.PI * 2 * 10.5; // 10.5 baz çifti / tur
  return {
    x: centerX + Math.cos(angle) * radius,
    y: centerY + (t - 0.5) * height
  };
}

2 GIS & Haritalandırma

Hangi algoritma kullanılır?

ResizeObserver + devicePixelRatio farkındalıklı canvas boyutlandırma ve pointer konumundan normalize koordinat üretme ((clientX - rect.left) / rect.width) algoritması.

Faydası nedir?

• Retina uyumluluğu: Harita katmanları her ekranda keskin görünür.
• Responsive tasarım: Mobil, tablet ve masaüstünde aynı koordinat sistemi çalışır.
• Etkileşimli sorgulama: Tıklanan piksel → coğrafi konum dönüşümü.

Kod örneği (piksel → coğrafi koordinat)

// Canvas pointer → normalize koordinat
function pointerToNormalized(e, canvas) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: (e.clientX - rect.left) / rect.width,
    y: (e.clientY - rect.top) / rect.height
  };
}

// Normalize → lat/lng (harita projeksiyonu)
function normalizedToLatLng(nx, ny, bounds) {
  const lng = bounds.west + nx * (bounds.east - bounds.west);
  const lat = bounds.north - ny * (bounds.north - bounds.south);
  return { lat, lng };
}

3 Lojistik & Tedarik Zinciri

Hangi algoritma kullanılır?

Delta-time animasyon döngüsü (requestAnimationFrame + zaman farkı) ve faz kaydırmalı sinüs dalgası ile zaman-serisi tahmini.

Faydası nedir?

• Gerçek zamanlı takip: Araçlar saniyede 60 kez güncellenerek akıcı gösterilir.
• Talep tahmini: Sinüs dalgasına uydurma ile mevsimsel stok planlaması.
• Rota optimizasyonu: Zaman-serisi verilerinden anomali tespiti.

Kod örneği (delta-time interpolasyon)

// Araç konumu interpolasyonu
let lastTimestamp = 0;
function animate(timestamp) {
  const delta = (timestamp - lastTimestamp) / 1000;
  lastTimestamp = timestamp;

  // GPS noktaları arasında lerp
  vehicle.lat += (target.lat - vehicle.lat) * delta * 2;
  vehicle.lng += (target.lng - vehicle.lng) * delta * 2;

  drawVehicle(vehicle);
  requestAnimationFrame(animate);
}

4 Eğitim Teknolojileri

Hangi algoritma kullanılır?

Web Audio API sinyal zinciri (OscillatorNode → BiquadFilterNode → GainNode) ve pointer tabanlı parametre modülasyonu.

Faydası nedir?

• İşitsel geri bildirim: Doğru/yanlış telaffuz anında duyulur.
• Görsel-işitsel senkron: Ses dalgası ekranda canlı çizilir.
• Oyunlaştırma: Frekans hedefleme oyunu ile kulak eğitimi.

Kod örneği (Web Audio zinciri)

// Eğitim uygulaması ses zinciri
const osc = ctx.createOscillator();
const filter = ctx.createBiquadFilter();
const gain = ctx.createGain();

osc.type = 'sine';
osc.frequency.value = targetFrequency;

filter.type = 'bandpass';
filter.frequency.value = userFrequency; // öğrencinin sesi
filter.Q.value = 8;

osc.connect(filter);
filter.connect(gain);
gain.connect(ctx.destination);

// Doğruluk kontrolü
const accuracy = 1 - Math.abs(userFreq - targetFreq) / targetFreq;
showScore(accuracy);

5 Oyun Geliştirme

Hangi algoritma kullanılır?

Parçacık sistemi (nokta dizisi + her karede güncelleme) ve gölge/gradient efektleri (ctx.shadowBlur) ile görsel zenginleştirme.

Faydası nedir?

• Performans: Binlerce parçacık aynı anda güncellenebilir.
• Esneklik: Her parçacığın hızı, ömrü, rengi bağımsız kontrol edilir.
• Görsel zenginlik: Gölge ve gradient ile derinlik hissi.

Kod örneği (parçacık sistemi)

// Parçacık dizisi
const particles = [];
for (let i = 0; i < 200; i++) {
  particles.push({
    x: Math.random() * w,
    y: Math.random() * h,
    vx: (Math.random() - 0.5) * 2,
    vy: (Math.random() - 0.5) * 2,
    life: 1.0,
    color: `hsl(${Math.random() * 360}, 80%, 70%)`
  });
}

// Her karede güncelle
function updateParticles(delta) {
  particles.forEach(p => {
    p.x += p.vx * delta * 60;
    p.y += p.vy * delta * 60;
    p.life -= delta * 0.5;
    ctx.beginPath();
    ctx.arc(p.x, p.y, 3 * p.life, 0, Math.PI * 2);
    ctx.fillStyle = p.color;
    ctx.fill();
  });
}

6 Fintech & Algoritmik Ticaret

Hangi algoritma kullanılır?

Faz kaydırmalı sinüs dalgası (Math.sin(angle + offset)) ile periyodik sinyal üretimi ve requestAnimationFrame tabanlı gerçek zamanlı grafik güncelleme.

Faydası nedir?

• Düşük gecikme: Fiyat değişimleri milisaniye hassasiyetinde gösterilir.
• Teknik analiz: Sinüs dalgası ile destek/direnç seviyeleri tespiti.
• Anomali tespiti: Normal döngüden sapmalar otomatik işaretlenir.

Kod örneği (gerçek zamanlı fiyat grafiği)

// Fiyat serisi üretimi (sinüs + gürültü)
function generatePrice(t) {
  const trend = Math.sin(t * 0.001) * 100;
  const cycle = Math.sin(t * 0.01) * 20;
  const noise = (Math.random() - 0.5) * 5;
  return 1000 + trend + cycle + noise;
}

// Her karede grafik güncelle
let lastTime = 0;
function renderChart(timestamp) {
  const delta = timestamp - lastTime;
  lastTime = timestamp;

  const price = generatePrice(timestamp);
  priceHistory.push(price);
  if (priceHistory.length > 200) priceHistory.shift();

  drawLineChart(priceHistory);
  requestAnimationFrame(renderChart);
}