Uygulamalar

Güneş Sistemi Animasyonu
×
Araba Oyunu
×
Collatz Konjektürü
Collatz Konjektürü
Flip Board
Flip Board

Güneş Sistemi Simülasyonu

Yazar: @dremregecer |
Tarih: 13.08.2020
güneş sistemi
javascript
kodlama
animasyon
css
interaktif
yazılım

 

Bu HTML dosyasını, Three.js ve TWEEN.js kütüphanelerini kullanarak yazdığım bir Güneş Sistemi simülasyonu içeriyor. Bu projeyi, kullanıcılara web tarayıcısı üzerinden görsel ve etkileşimli bir gezegen modelleme nasıl kodlanır, anlatmak amacıyla hazırladım.

HTML ve CSS Bölümleri: Belge yapısının düzenlenmesi sürecinde, HTML ve CSS ile ilgili detaylarla başladım. Sayfanın kullanıcıya mümkün olan en geniş görünümü sunmasını sağlamak adına, tüm kenar boşluklarını kaldırdım ve içeriğin tam ekran görüntülenmesi için gerekli ayarlamaları yaptım. Sayfanın genel görünümünü ve kullanıcı deneyimini optimize etmek amacıyla aşağıdaki yapılandırmaları ekledim:

HTML: Sayfada gezegenlerle ilgili bilgilerin ve kontrol butonlarının yer aldığı iki temel div öğesi kullandım: 'info-panel' ve 'controls'.

'info-panel': Bu bölüm, her bir gezegenin mevcut durumu hakkında bilgileri göstermek üzere tasarlandı. Kullanıcı bu panel sayesinde gezegenlerin konumları ve hareketleri ile ilgili anlık bilgilere ulaşabiliyor.

'controls': Bu kısım, kullanıcının sahnedeki kamerayı farklı açılardan görebilmesi ve otomatik dönüş işlevini etkinleştirebilmesi amacıyla çeşitli butonlar içeriyor. Kullanıcılar, bu kontroller aracılığıyla gezegen sistemini farklı perspektiflerden gözlemleyebiliyor.

CSS: Stil tanımlarını yaparken, sayfanın genel estetiğini ve işlevselliğini göz önünde bulundurdum.

Kenarlık ve Boyutlandırma: Sayfa kenarlarının olmaması için margin sıfırlaması yaptım ve içeriklerin tam ekran görüntülenmesi için width ve height değerlerini yüzde 100 olarak ayarladım. Böylece içerik her boyuttaki ekranda en iyi şekilde görüntüleniyor.

Arka Plan ve Görseller: Arka planı kullanıcıya görsel olarak hoş bir deneyim sunacak şekilde tasarladım. Bunun için uzay temalı bir arka plan görüntüsü kullandım ve bu görselin ekran boyutuna uygun olacak şekilde kaplanmasını (background-size: cover) sağladım.

Bilgi ve Kontrol Panelleri: 'info-panel' ve 'controls' bölümlerinin, sayfanın üstünde rahatça fark edilebilecek yerlerde konumlanması adına position: absolute özelliğini kullandım. Ayrıca, bu panellerin arka planını yarı saydam yaparak (background: rgba(0,0,0,0.8)), hem içeriklerin net bir şekilde görünmesini hem de sahnenin arka planıyla uyumlu olmasını sağladım.

Buton Stilleri: Kullanıcı etkileşimini artırmak için controls bölümündeki butonları dikkat çekici ve kullanımı kolay olacak şekilde tasarladım. Renk, kenarlık ve hover efektleri ile butonların belirgin ve işlevsel olmasına özen gösterdim.

Three.js ile Sahne Oluşturma: Three.js kullanarak sahne, kamera ve renderer bileşenlerini oluşturdum ve bu bileşenleri görsel açıdan tatmin edici ve işlevsel bir Güneş Sistemi simülasyonu oluşturmak için yapılandırdım. Süreçte izlediğim adımlar ve kullanılan teknik detaylar aşağıda belirtilmiştir:

Sahne (Scene) Oluşturma:

scene adını verdiğim nesne, tüm 3D nesnelerin yerleştirildiği ve render edildiği ana kapsayıcıyı oluşturur. Bu sahneye, gezegenler, Güneş, yörüngeler ve ışık kaynakları gibi tüm bileşenleri ekledim.

Arka planın, kullanıcıya uzaydaymış gibi bir his vermesi için TextureLoader kullanarak yüksek çözünürlüklü bir uzay arka planı yükledim. Bu arka plan sahneye atanarak, gezegenlerin ve Güneş'in uzay ortamında görselleştirilmesi sağlandı.

Kamera (Camera) Yapılandırma:

Kullanıcıya sahneyi farklı açılardan inceleme imkânı sunmak amacıyla PerspectiveCamera kullandım. Bu kamera, insana benzer bir perspektif sağlayarak sahnenin 3D derinliğini algılamayı kolaylaştırıyor.

Kamerayı başlangıç konumu olarak sahnenin dışına, yukarıdan bakacak şekilde yerleştirdim (position.set(0, 30, 30)). Böylece kullanıcı, sahneyi ilk açtığında Güneş Sistemi'nin genel bir görünümünü elde edebiliyor.

Kameranın lookAt() metodu ile sahnenin merkezine bakmasını sağlayarak, sahnedeki nesnelerin merkezde ve odak noktada kalmasını garanti altına aldım.

Renderer Oluşturma:

WebGLRenderer kullanarak 3D nesnelerin tarayıcı üzerinde çizilmesini sağladım. antialias seçeneğini aktif hale getirerek kenar yumuşatma ekledim, bu sayede gezegenlerin ve yörüngelerin daha pürüzsüz görünmesini sağladım.

Renderer boyutunu, tarayıcı penceresi boyutuna uygun olacak şekilde ayarladım (renderer.setSize(window.innerWidth, window.innerHeight)). Ayrıca kullanıcı pencere boyutunu değiştirdiğinde bu boyutların yeniden ayarlanması için resize olay dinleyicisini ekledim.

Işıklandırma ve Güneş Oluşturma:

Sahneyi aydınlatmak amacıyla iki farklı ışık kaynağı ekledim:

AmbientLight: Sahnenin genel aydınlatmasını sağlamak için, her yönden eşit miktarda ışık yayarak sahnenin karanlık bölgelerinin daha görünür olmasına yardımcı oldum.

PointLight: Güneş'i temsil eden bir ışık kaynağı ekleyerek gezegenlerin aydınlatılmasını ve daha gerçekçi gölge efektleri oluşturulmasını sağladım.

Güneş'i oluştururken, MeshPhongMaterial kullandım. Bu materyal türü, ışık kaynaklarıyla daha uyumlu ve yansıma özelliklerine sahip olduğundan, Güneş'in parlak ve canlı bir görünüm kazanmasını sağladı. Ayrıca emissive özelliği ekleyerek Güneş'in kendiliğinden ışık yaymasını ve etkileyici bir parlaklık oluşmasını mümkün kıldım.

Gezegenlerin ve Yörüngelerin Eklenmesi:

Gezegenlerin her birini oluşturmak için SphereGeometry kullandım. Bu geometriler, gezegenlerin ölçeklerine uygun olarak farklı çaplarda tanımlandı ve her biri için uygun bir doku veya renk verildi.

Gezegenlerin yörüngeleri için EllipseCurve kullanarak yörünge yollarını çizdim. Bu yolları Line nesneleri ile görselleştirdim, bu sayede kullanıcı gezegenlerin izlediği yörüngeleri net bir şekilde görebiliyor.

Her gezegenin etrafında, eksen eğikliğini göstermek amacıyla birer meridyen halkası oluşturdum ve bu halkaları gezegenlerin child nesneleri olarak sahneye ekledim.

Güneş ve Gezegenlerin Tanımlanması: Gezegen verilerini ('planetData') bir dizi olarak tanımladım ve her gezegen için çap, yörünge yarıçapı, dönüş periyodu gibi parametreleri belirttim. Her gezegen için özel bir geometri ve materyal ('MeshPhongMaterial') oluşturdum. Materyal tanımlarını gezegenlerin renklerini, dokularını ve ışık yansımalarını yansıtacak şekilde ayarladım. Gezegenlerin yörünge hareketleri ve eksen etrafında dönüşleri, verilen periyotlara uygun olarak ('updatePlanets()' fonksiyonu) gerçek zamanlı olarak güncelleniyor.

Kullanıcı Etkileşimi ve Kamera Kontrolleri: Kullanıcının fareyi kullanarak kameranın sahne etrafındaki konumunu değiştirebilmesi ve kamerayı yakınlaştırıp uzaklaştırabilmesi için 'mousedown', 'mousemove' ve 'wheel' olay dinleyicilerini ekledim. Ayrıca, 'toggleAutoRotate()' fonksiyonu ile kameranın otomatik olarak sahnenin etrafında dönebilmesini sağladım.

Animasyon ve TWEEN.js Kullanımı: 'animate()' fonksiyonu, her karede sahneyi yeniden oluşturuyor ve gezegenlerin yörünge hareketlerini, kameranın pozisyonunu ve kullanıcı etkileşimlerini güncelliyor. Kamera geçişlerinde daha yumuşak bir deneyim sağlamak için TWEEN.js kullandım ve belirli bir açıya (örneğin üstten veya yandan bakış) kamera geçişlerini bu kütüphane yardımıyla gerçekleştirdim.

Sonuç olarak, bu kodlama ile, kullanıcılara tarayıcı üzerinden etkileşimli bir Güneş Sistemi simülasyonu yapmış olduk. Three.js ile 3D grafiklerin kullanımı ve TWEEN.js ile animasyonların yumuşatılması, bu simülasyonu fikir vermesi açısından prototip kılıyor. Kodları incelerseniz nasıl olduğuna dair fikir verecektir..

Oyun Kodlama

Yazar: @dremregecer |
Tarih: 17.06.2020
araba
oyun
arcade
yarış
javascript
css
html

 

Bu HTML dosyasını, bir araba yarışı oyunu olarak yazdım. Bu kod bloğunda, amacımız aslında kodlama mantığını anlatabilmek. Kodlama dünyasını merak eden ve ilgilenenlerin, "Nasıl Yapılıyor?" sorularına bir fikir olsun diye oluşturturdum. Web tarayıcısı üzerinden dinamik ve etkileşimli bir oyunun kodlanarak yapılabildiğini ve  CSS ile görsel tasarımı, JavaScript ile ise oyun mekaniği oluşturulmasını anlattım. Aşağıda, bu sürecin detaylı açıklamalarını bulabilirsiniz.

HTML ve CSS Yapısı: HTML ve CSS ile sayfanın tüm bölümlerini oluştururken, kullanıcı deneyimini ve görselliği ön planda tuttum. Bu süreçte:

HTML: Oyun alanını ve kullanıcı arayüzünü oluşturmak için çeşitli div elementleri kullandım. Örneğin;

game-container: Tüm oyunu kapsayan ana konteynerdir. İçerisinde oyun alanı, başlangıç ve yeniden başlatma ekranları ile skor tablosu gibi bölümler yer alır.

game-area: Bu bölüm, oyunun gerçekleştiği ana sahnedir ve araç, engeller, bonuslar gibi oyun elemanlarını içerir.

scoreboard: Oyuncuların puan durumlarını görebileceği bir arayüz sunar. Bu bölümde oyuncunun anlık puanı ve genel puan sıralaması yer alır.

start-overlay ve restart-overlay: Oyunun başlangıcında ve bitişinde görünen ekranlardır. Kullanıcının ismini girmesi, oyunu başlatması ve yeniden başlatması için etkileşimli butonlar ve alanlar içerir.

CSS: Stil tanımlamalarında kullanıcı dostu ve estetik bir deneyim sağlamaya özen gösterdim. Ayrıntılar aşağıdaki gibidir:

Genel Düzen ve Konumlandırma: Sayfanın kenar boşluklarını ve içeriğin kutu modeli üzerinde düzgün bir şekilde hizalanmasını sağlamak için box-sizing: border-box ve margin sıfırlama yöntemlerini kullandım. Bu sayede, oyun ekranının her türlü cihaza uygun olmasını sağladım.

Oyun Alanı ve Grafik Tasarım: Oyun sahnesinde pistin ve diğer grafiklerin uygun şekilde yer alması için background ve background-size kullanarak görselleri ekran boyutuna göre ölçekledim. Örneğin, pist görseli tüm sahneyi kaplayacak şekilde (background-size: 100% 100%) ayarlanmıştır. Ayrıca, border-radius ve box-shadow gibi özelliklerle görsellerin kenarlarını yumuşatarak estetik bir görünüm kazandırdım.

Buton ve Etkileşimli Öğeler: Kullanıcıların oyun içi etkileşimleri daha kolay gerçekleştirebilmesi için butonlar ve giriş alanları oluşturuldu. Örneğin, start-button ve restart-button kullanıcının oyunu başlatması ve yeniden başlatması için kullanılırken, bu butonlara hover efektleri ekleyerek etkileşimli hale getirdim.

Z-Index Kullanımı: Farklı oyun öğelerinin ekran üzerindeki yerini ve diğer öğelerle olan ilişkisini kontrol etmek için z-index kullandım. Örneğin, aracın her zaman ön planda görünmesi için yüksek z-index değeri verilmiş, buna karşın arka plandaki öğeler daha düşük z-index değerlerine sahiptir.

Three.js ile Oyun Mekaniklerinin Oluşturulması: JavaScript kullanarak oyunun temel işlevselliğini ve etkileşim mekaniklerini oluşturdum. Bu süreçte çeşitli algoritmalar ve yöntemler kullanarak dinamik bir oyun deneyimi tasarladım:

Oyun Başlangıcı ve Geri Sayım: Oyuncu oyuna başlamak istediğinde, ilk olarak bir isim girmesi gerekmektedir. handleStart() işlevi bu süreci kontrol eder ve kullanıcı ismi girilmezse bir uyarı mesajı gösterir. Geri sayım süreci startCountdown() işleviyle başlatılır ve 3 saniyelik bir geri sayımın ardından oyun aktif hale getirilir.

Araç Hareketleri ve Kontroller: Kullanıcı araç kontrolünü klavye ile sağlar. ArrowLeft, ArrowRight, ArrowUp ve ArrowDown tuşları kullanılarak aracın hareketi sağlanır. Araç hareketleri, moveCar() işlevi ile sürekli olarak güncellenir. Bu işlev, araç konumunu ve hızını hesaplarken ayrıca hızlanma ve yavaşlama dinamiklerini de içerir. requestAnimationFrame() kullanılarak hareketin kesintisiz ve akıcı olması sağlanır.

Engel ve Bonus Nesnelerinin Oluşturulması: Oyun sırasında belirli aralıklarla engeller ve bonuslar ekrana gelir. createObstacle() ve createBonusOrPenalty() işlevleri bu öğeleri oluşturur ve bu öğelerin rastgele konumlarda ekrana yerleştirilmesini sağlar. Örneğin, obstacleSpeed değişkeni engellerin hızını kontrol ederken, setInterval() kullanılarak bu öğelerin düzenli aralıklarla oluşturulması sağlanır.

Çarpışma Kontrolü ve Oyun Dinamikleri: Aracın engellere veya bonus nesnelerine çarpıp çarpmadığını kontrol etmek için checkCollision() işlevi kullanılır. Eğer bir çarpışma tespit edilirse, bu durumun oyuna etkisi bonus veya ceza türüne göre değişir. Örneğin, bir ceza nesnesine çarptığında puan düşebilir veya oyun sona erebilir.

Bonus ve Ceza Etkileri: Oyuncu, oyun sırasında farklı bonus ve ceza nesneleriyle etkileşimde bulunabilir. bonusTypes ve penaltyTypes listeleri, bu nesnelerin oyuncu üzerindeki etkilerini tanımlar. Bonuslar oyuncunun puanını artırabilir veya aracın hızını yükseltebilirken, cezalar oyuncunun puanını azaltabilir ya da hızı düşürebilir. Örneğin, penalty1 nesnesi aracın hızını azaltırken, bonus1 aracın hızını artırır.

Kullanıcı Etkileşimi ve Kontroller: Oyuncular oyunu klavye ile kontrol eder. keydown ve keyup olay dinleyicileri kullanılarak oyuncunun ok tuşları ve boşluk (duraklatma) gibi tuşlarla aracı kontrol etmesi sağlanır. Space tuşu ile oyun duraklatılabilir veya devam ettirilebilir. Escape tuşu ile oyun sona erdirilebilir ve oyun bitiş ekranı gösterilir. Ayrıca mobil telefonlar içinde dokunmatik tetikleyiciler eklenebilir.

Oyun Bitişi ve Skor Tablosu: Oyuncunun araca bir engelle çarpması durumunda oyun sona erer. Oyun bitişinde 'restart-overlay' görünür hale gelir ve oyuncu tekrar oynamak isterse bu butonu kullanarak oyunu yeniden başlatabilir. Skor tablosu, oyuncunun elde ettiği skorları listeler ve bu skorları sıralayarak oyunun rekabetçi yönünü destekler. addScoreToList() işlevi, oyuncunun skorunu tabloya ekler ve bu skorları büyükten küçüğe sıralar.

Sonuç olarak, bu HTML ve JavaScript dosyası, dinamik ve etkileşimli bir araba yarışı oyunu deneyimi sunmaktadır. Bu mantıklar çerçevesinde görsel zenginleştirme ve oyun stratejileri geliştirilir. Bir prototip olarak kodları incelemek sizlere fikir verecektir.

Collatz Problemi

Yazar: @dremregecer |
Tarih: 26.05.2012
3n+1
tekse-çiftse
2'ye böl
konjektür
çözülemeyen
desen
pattern

 

Aşağıda sunulan kod, bir Collatz problemi analiz ve görselleştirme uygulaması örneğidir. Bu uygulama, hem belirli giriş değerleri için Collatz dizisini üretip analiz ediyor hem de 1’den N’e kadar olan tüm tamsayılar için Collatz istatistiklerini toplu olarak hesaplayarak görselleştirme sunuyor. Bu açıklamada, kodun nasıl hazırlandığına dair ayrıntılı teknik bilgilere, kullanılan yapıya, temel bileşenlere, kullanılan kütüphanelere, fonksiyonların iç mantıklarına ve Collatz problemi hakkında genel bilgilere yer verilecektir.

Collatz Problemi Nedir?
Collatz problemi, henüz kanıtlanmamış, basit bir tanıma rağmen son derece karmaşık bir yapıya sahip olan bir matematiksel problemdir. Collatz Sanısı olarak da bilinir. Temel kuralı şöyledir:

Pozitif bir tamsayıyla başlanır (n > 0).

Eğer n çift ise n = n/2 formülüyle devam edilir.

Eğer n tek ise n = 3*n + 1 formülüyle devam edilir.

Bu süreç n = 1 olana kadar devam eder.

Collatz sanısı, başlangıçta alınan herhangi bir pozitif tamsayının bu kural seti tekrarlandığında mutlaka 1’e ulaşacağını iddia eder. Ancak bu iddia günümüze kadar kanıtlanmış değildir. Her ne kadar test edilen çok büyük sayılarda hep 1’e geri dönülmüş olsa da, matematiksel bir ispat henüz yoktur.

Projenin Amacı
Bu kod, kullanıcıların bir veya birden çok başlangıç değerine sahip Collatz dizilerini anında hesaplayabilmeleri, sonuçları tablolar halinde görebilmeleri, adım sayısı, maksimum değer, ortalama değer artışı gibi istatistikleri filtreleyerek inceleyebilmeleri amacıyla hazırlanmıştır. Ayrıca, 1’den N’e kadar olan tüm tamsayılar için Collatz istatistikleri topluca hesaplanabilmekte, elde edilen veriler histogram grafikleriyle, lineer ve logaritmik ölçekli çizgi grafikleriyle, bar ve scatter grafikleriyle görselleştirilmektedir. Kullanıcılar, seçtikleri dizi üzerinde adım adım animasyon başlatıp durdurabilir, istediği adıma ilerleyerek dizinin dinamik oluşumunu da izleyebilirler.Genel Yapı
Kod büyük oranda HTML, CSS ve JavaScript ile oluşturulmuştur. Ek olarak, grafikler için Chart.js kütüphanesi kullanılmıştır. Aşağıda yapının katmanları ayrıntılı olarak anlatılmıştır:

HTML Yapısı ve Sayfa Düzeni:

<!DOCTYPE html> ve <html lang="tr"> ile bir Türkçe dil ayarı yapılmıştır.

<head> bölümünde meta etiketleri, sayfa başlığı ve stil tanımları bulunur.

<style> bloğu içerisinde gövde (body), container, tablo stilleri, butonlar, koyu tema (dark theme) desteği ve grafikleri tutacak alanların temel CSS kuralları tanımlanmıştır.

<body> içerisinde üst kısımda bir tema değiştirme butonu (.theme-toggle) konumlandırılmış, ana içerik .container sınıflı bir div içerisinde toplanmıştır.

Kullanıcının manuel değer girebileceği bir bölüm, 1’den N’e kadar analiz yapabileceği bir bölüm, filtrelemelerin gösterildiği bir bölüm, sonuçlar ve grafiklerin sergilendiği alanlar gibi kısımlar farklı <div> bloklarıyla yapılandırılmıştır.

Her bölümün kendine özgü başlığı (<h2>, <h3>, <h4>) ve açıklama metinleri vardır.

Tablo ve grafik alanları için <canvas> elementleri kullanılmıştır.

Temanın Yönetimi (Tema Değiştir Butonu):
Kullanıcıya açık ve koyu temalar arasında geçiş yapma imkanı sağlanmıştır. body etiketine dark sınıfı eklendiğinde CSS değişkenleri koyu temaya geçer.

Bir buton aracılığıyla (.theme-toggle) JavaScript event listener’ı ile document.body.classList.toggle('dark') çağrısı yapılarak tema değişimi sağlanır.

Collatz Dizisi Hesaplama Fonksiyonu (collatzSequence):

function collatzSequence(n) {
const seq = [n];
while (n !== 1) {
if (n % 2 === 0) {
n = n / 2;
} else {
n = 3 * n + 1;
}
seq.push(n);
}
return seq;
}

Bu fonksiyon temel Collatz kuralını uygular. Verilen n başlangıç değerini alır, 1’e ulaşana kadar kural setini tekrarlar. Elde edilen tüm ara değerleri bir dizi (seq) içerisinde tutar ve bu diziyi döndürür. Dizinin uzunluğu, adım sayısı (steps) hesabında ve maksimum değer hesaplamalarında kullanılır.

Belirli Değerler İçin Analiz (analyzeValues):

function analyzeValues(values) {
const results = [];
values.forEach(v => {
const start = parseInt(v.trim(), 10);
...
const sequence = collatzSequence(start);
...
results.push({start, sequence, maxVal, steps, avgIncrease});
});
return results;
}

Bu fonksiyon, kullanıcının girmiş olduğu virgülle ayrılmış birden çok değeri ele alır, her biri için collatzSequence çağrısı yaparak dizi hesaplar. Ardından:

  • steps: Dizinin uzunluğu - 1 (çünkü adım sayısı sonuca varana kadar kaç işlem yapıldığıdır)
  • maxVal: Dizi içindeki maksimum değer
  • avgIncrease: Her adımda ne kadar değer değişmiş, ortalamasını hesaplar (|seq[i+1] - seq[i]| ortalaması)

Sonuçlar bir dizi obje olarak ([{start, sequence, maxVal, steps, avgIncrease}, ...]) döndürülür.

Sonuçların Tablo Halinde Görüntülenmesi (renderTable):
Bu fonksiyon, elde edilen sonuçları HTML tablo formatında oluşturur.

Filtre alanlarından alınan minSteps, maxSteps gibi değerler varsa, sonuçlar filtrelenir.

Tablo başlıklarına tıklanarak sonuçlar sıralanabilir. Sıralama için currentSortColumn ve currentSortDirection değişkenleri kullanılır.

Tablo gövdesi dinamik olarak (innerHTML) oluşturulur.

Grafiklerin Oluşturulması (renderCharts):
Grafikler için Chart.js kullanılmıştır. Chart.js ile line, bar, scatter gibi farklı grafik tiplerinde veri görselleştirme sağlanır.
Bu fonksiyon, girilen değerler için Collatz dizilerini lineer ve logaritmik ölçeklerde çizgi grafiği olarak çizer. Ayrıca bar grafiği ile adım sayısı ve maksimum değerleri yanyana, scatter grafiği ile başlangıç değeri ve adım sayısı ilişkisini noktalar halinde göstermektedir. Her dizinin grafikte ayrı bir veri seti olarak gösterilmesi sağlanır.

  • Lineer grafik: Y ekseni normal ölçek.
  • Logaritmik grafik: Y ekseni logaritmik ölçek.
  • Bar grafik: Başlangıç değeri etiketleri ve adım sayısı ile max değer çubukları.
  • Scatter grafik: (x: başlangıç değeri, y: adım sayısı) noktaları.

Bu bölüme ayrıca veri setlerini toggle eden (gizle/göster) bir arayüz eklenmiştir. Bu sayede kullanıcı, hangi başlangıç değerinin grafikte görünüp görünmeyeceğini seçebilir.

Gelişmiş İstatistiklerin Hesaplanması (renderAdvancedStats):
Bu fonksiyon, birden çok giriş değerinin analiz sonuçlarından ortalama adım sayısı ve ortalama değer artışı gibi istatistikleri hesaplar. Ortalamalar sonucunda sayfada ilgili alanlara yansıtılır.

1’den N’e Kadar Analiz (analyzeRange & renderRangeAnalysis):
Bu kısımda kullanıcı 1’den N’e kadar olan tüm sayılar için Collatz dizileri hesaplanır.

analyzeRange(N): 1’den N’e kadar döngü kurarak her sayı için collatzSequence fonksiyonunu çağırır. Toplanan bilgiler summary ve seqs dizilerinde tutulur.

summary içinde her sayı için adım sayısı ve maksimum değer bilgileri yer alır.

renderRangeAnalysis(summary): Bu fonksiyon en uzun diziye sahip sayı, en büyük maksimum değere sahip sayı, ortalama adım sayısı, ortalama max değer gibi istatistikleri çıkarır ve sayfaya yansıtır. Aynı zamanda adım sayısı dağılımını bir histogram grafiği ile görselleştirir.

1’den N’e Kadar Seçilen Sayının Detaylı Görünümü (updateSelectedRangeNumber):
Bu bölümde kullanıcı, 1’den N’e kadar analiz ettiğinde elde ettiği sonuçlar arasından istediği sayının detaylarını görebilir. Seçilen sayı için Collatz dizisi çizgisel ve logaritmik grafiklerle görüntülenir. Ayrıca bu dizi üzerinde de adım adım animasyon oynatılabilir. Böylece kullanıcı, seçilen sayının Collatz dizisinin oluşumunu adım adım izleyebilir.

Animasyon Mekanizması (startAnimation, stopAnimation, nextAnimationStep, updateAnimationState): Kullanıcılar, hesaplanan Collatz dizileri üzerinde bir animasyon oynatabilirler. Animasyon mantığı şu şekilde çalışır:

  • Her "adım" için grafik verileri güncellenerek sadece o adımın sonuna kadarki sequence gösterilir.
  • setInterval kullanarak periyodik olarak nextAnimationStep() fonksiyonu çağrılır, bu da currentAnimationStep değerini arttırır.
  • updateAnimationState() grafikleri yeni adıma göre yeniler, progress bar’ı günceller.
  • stopAnimation() animasyonu durdurur, startAnimation() yeniden başlatır, nextStepAnim butonu bir sonraki adıma manuel geçiş sağlar.

Aynı mantık range analizindeki seçilen sayı için de geçerlidir (startRangeAnimation, stopRangeAnimation vb. fonksiyonlar).

Tema Değiştirme: Kodda basit bir tema değiştirme işlevi bulunmaktadır. document.body.classList.toggle('dark') çağrısıyla koyu ve açık tema arasında geçiş yapılır. CSS’te değişken tabanlı renk tanımlamaları sayesinde temalar arası geçiş kolaylaşır.

Event Listener’lar ve Butonlar: Kodun sonunda yer alan document.getElementById ve addEventListener çağrıları, buton ve alanların kullanıcı etkileşimlerini dinler.

Analiz butonu: Girilen değerleri analiz eder.

Filtreler: Tabloyu yeniden oluşturur.

N değeri analizi: 1’den N’e kadar analiz yapar.

Animasyon butonları: Başlat, durdur, ileri adım geçişi için event bağlamaları.

Tema butonu: Temayı değiştirir.

Performans ve Bellek Kullanımı: Kod örneğinde 1’den N’e kadar tüm diziler bellekte tutulmaktadır (rangeSequences), bu büyük N değerleri için potansiyel olarak çok bellek tüketebilir. Bu nedenle pratik kullanımda N çok büyükse buna dikkat etmek gerekir. Örneğin, ileri düzey optimizasyonlar yapılarak büyük N için sadece özet istatistikler tutulabilir. Bu kod örneğinde amaç, temel bir prototip ve işlevsellik sunmaktır.

Sonuç Olarak
Bu kod, Collatz problemini görselleştirerek kullanıcıya dinamik bir deneyim sunar. Hem tek tek belirli başlangıç değerlerinin analizini hem de 1’den N’e kadar toplu bir analizi gerçekleştirmek mümkündür. Grafikler, tablolama, filtreleme, sıralama, animasyon, tema değiştirme gibi özellikler sayesinde geliştiriciler bu örnekten ilham alarak kendi veri analizi projelerinde benzer yaklaşımları benimseyebilir. Collatz problemi gibi matematiksel bir yapının interaktif bir web aracıyla sunulması, son kullanıcılar ve araştırmacılar için ilgi çekici bir deneyim yaratır.

Flip Board Kodlama

Yazar: @dremregecer |
Tarih: 29.08.2016
flip board
flip clock
deperture board
airport
train satation
bus station
html

 

Selam Arkadaşlar! Belki çoğunuz görmemiştir ama ben o eski tren istasyonlarında, havaalanlarında bulunan, takır tukur dönen harf ve rakamların olduğu ekranlara bayılırım. Onlara "split-flap display" deniyor. Çocukluğumda bana çok çekici gelirdi, sanki o mekanik sesleri, o harflerin dansı beni başka bir dünyaya götürürdü. Şimdi ise o büyüyü dijitale taşımaya çalıştım ve işte karşınızda, çoklu sayfa veri girişi, Excel entegrasyonu ve dinamik görüntüleme özellikleri olan bir split-flap display simülasyonu!

Bu kodları yazarken amacım, sadece o nostaljik havayı canlandırmak değil, aynı zamanda kullanıcının kolayca veri girebilmesini, bu verileri Excel'e aktarabilmesini ve daha sonra bu verileri dinamik bir ekranda görüntüleyebilmesini sağlamaktı. Hem eğlenceli hem de işlevsel bir şey ortaya çıksın istedim.

HTML'e Yakından Bakış:

Veri Giriş Sayfası (index.html): Burada her şey basit tutulmaya çalışıldı. Sayfa butonları ile sayfalar arasında geçiş yapabiliyorsunuz. Tablo içerisinde verilerinizi giriyorsunuz ve "Excel'e Aktar" düğmesi ile bu verileri bir excel dosyasına kaydedebiliyorsunuz.

Görüntüleme Sayfası (display.html): Burası biraz daha karmaşık. Split-flap ekranının bulunduğu bir ana alan var. Her bir harf veya sembol için küçük birer "split-flap" birimi var. Yukarıdan aşağı açılan paneller ile o mekanik hissi yaratmaya çalıştım. Ekranı kontrol edebilmek için bir araç çubuğu ekledim.

CSS ile Görsellik:

CSS ile tasarım yaparken hem modern hem de o eski split-flap havasını yakalamaya çalıştım. Arka planlar, renkler, animasyonlar… Hepsi özenle seçildi.

Farklı temalar da ekledim, böylece her seferinde farklı bir görünüm deneyebilirsiniz. Her temanın kendine özgü renk paleti var.

JavaScript Kısmı:

Veri Giriş Sayfası (index.html):

createTable() fonksiyonu ile dinamik bir tablo oluşturuyorum.

changePage(pageNum) ile sayfaları değiştiriyorum ve aktif olanı belirliyorum.

saveCurrentPageData() ile girilen her veriyi kaydediyorum.

addInputListeners() ile inputlara bazı olay dinleyicileri ekledim. Böylece veri girerken çok daha akıcı bir deneyim sunuyorum (otomatik next input gibi).

exportToExcel() ile girdiğiniz bütün verileri excel'e kaydediyorum.

Görüntüleme Sayfası (display.html):

SplitFlapDisplay adında bir class oluşturdum. İçinde her bir split-flap birimi için gerekli olan constructor() ve setChar(char) fonksiyonları var. setChar() ile o flip efekti veriliyor.

Dosya yükleme, animasyonu başlatma, metni ekrana yansıtma, tema değiştirme ve sayfa süresini ayarlama gibi bütün işler JavaScript ile yapılıyor.

startAnimation() fonksiyonu ile excel'den okuduğum verileri split-flap'lere sırayla gösteriyorum. Her karakterin geçişi ayrı ayrı hesaplanıyor.

Tema değiştirme ve diğer kullanıcı etkileşimlerini yine JavaScript ile yapıyorum. Her şeyin düzenli ve çalışır olmasını istedim.

Excel Entegrasyonu:

Excel entegrasyonu için xlsx.full.min.js kütüphanesini kullandım. Bu kütüphane, excel dosyalarını okuma ve yazma işlerinde çok yardımcı oldu.

FileReader ile dosyayı okuyup XLSX.read() ile excel verilerini elde ettim. Sonra bunları işleyip ekrana yansıtıyorum.

Veri yazma işinde de benzer şekilde bu kütüphaneyi kullandım.

Animasyonlar:

Animasyonlar tamamen CSS ile yapıldı. flipping classı ve @keyframes kurallarıyla o flip efektini oluşturmaya çalıştım.

JavaScript ile sadece animasyonları tetikliyorum. Bu, animasyonları daha akıcı ve hızlı hale getiriyor.

Kullanıcı Etkileşimi:

Proje tamamen kullanıcı etkileşimli. Sayfa butonlarıyla, girdiğiniz değerlerle, excel verileriyle… Her şey canlı ve etkileşimli.

Tema değiştirme, metni ekrana yansıtma, dosya yükleme gibi bütün işler basit ve kullanıcı dostu olacak şekilde tasarlandı.

Sonuç:

Bu proje, hem nostaljik bir split-flap display'in büyüsünü yaşatıyor hem de dijital dünyanın imkanlarını bir araya getiriyor. Bu projeyi yaparken hem eğlendim hem de çok şey öğrendim. Projenin gelecekte daha farklı şekillerde kullanılmasını da hayal ediyorum. Kim bilir, belki bir gün dijital tabelalarda veya interaktif sanat projelerinde bu split-flap ekranlarını görürüz!

Bu proje daha da geliştirilebilir. Daha fazla tema, farklı animasyon seçenekleri, belki daha interaktif özellikler eklenebilir. Ama şimdilik, benim için bu proje tam istediğim gibi oldu.

Umarım sizler de bu projeyle eğlenir ve öğrenirsiniz!

 

Teknik Detaylar

  1. HTML Yapısı:

    • Veri Giriş Sayfası (index.html):

      • split-flap-buttons div'i: Sayfalar arası geçiş için kullanılan butonların bulunduğu container.

      • split-flap-title ve split-flap-paragraph: Sayfa başlığı ve açıklama metinlerinin yer aldığı öğeler.

      • split-flap-table: Veri girişinin yapıldığı tablo.

      • split-flap-input: Tablo hücrelerine veri girmek için kullanılan input elemanları.

      • split-flap-export-button: Girilen verileri Excel'e aktarmak için kullanılan buton.

    • Görüntüleme Sayfası (display.html):

      • split-flap-toolbar: Dosya seçimi, animasyon başlatma, metni yansıtma ve tema değiştirme butonları ile sayfa süresi inputunun bulunduğu araç çubuğu.

      • split-flap-grid: Split-flap ekranının bulunduğu ana container.

      • split-flap-card: Her bir split-flap biriminin bulunduğu div.

      • split-flap-top, split-flap-bottom, split-flap-next: Split-flap animasyonunun parçaları.

  2. CSS Stilleri:

    • Ortak Stiller:

      • body: Genel stil tanımları, arka plan rengi, font ayarları.

      • split-flap-buttons, split-flap-button: Veri giriş sayfasındaki sayfa butonları ve stilleri.

      • split-flap-table: Tablo stilleri.

      • split-flap-input: Input elemanlarının stilleri.

    • Veri Giriş Sayfası Stilleri:

      • split-flap-export-button: Veri aktarımı butonu stilleri.

    • Görüntüleme Sayfası Stilleri:

      • split-flap-grid: Split-flap ekranı için grid düzeni ve temel stiller.

      • split-flap-toolbar, .split-flap-toolbar button, .split-flap-toolbar input: Araç çubuğu ve elementlerinin stilleri.

      • split-flap-card: Split-flap birimi stilleri, perspective ve shadow tanımları.

      • split-flap-top, split-flap-bottom, split-flap-next: Split-flap animasyonu için kullanılan elementlerin stilleri, animasyon için transform origin ve backface-visibility özellikleri.

    • Temalar:

      • .split-flap-theme1 - .split-flap-theme20: Farklı renk paletlerine sahip temaların stilleri, background, border ve text renkleri tanımları.

  3. JavaScript İşlevleri:

    • Veri Giriş Sayfası (index.html):

      • createTable(): Veri giriş tablosunu dinamik olarak oluşturan fonksiyon.

      • changePage(pageNum): Sayfalar arası geçişi sağlayan ve aktif sayfayı belirleyen fonksiyon.

      • saveCurrentPageData(): Mevcut sayfadaki verileri pagesData objesine kaydeden fonksiyon.

      • addInputListeners(): Input elemanlarına event listener'lar ekleyen fonksiyon (input ve keydown olayları).

      • exportToExcel(): Girilen verileri excel dosyasına aktaran fonksiyon.

    • Görüntüleme Sayfası (display.html):

      • SplitFlapDisplay Class:

        • constructor(): Split-flap elementlerini oluşturur ve yapılandırır.

        • setChar(char): Belirtilen karakteri animasyonlu olarak split-flap üzerinde gösteren fonksiyon.

      • Event Listener'lar:

        • fileInput: Excel dosyasının seçilmesiyle dosya içeriğini işleyen event listener.

        • startAnimationButton: Animasyonu başlatma butonuna basıldığında startAnimation() fonksiyonunu çalıştıran event listener.

        • reflectTextButton: Veri giriş sayfasındaki tabloyu kullanarak ekranı güncellemek için reflectTextButton() fonksiyonunu çalıştıran event listener.

        • changeThemeButton: Temayı değiştirmek için tema listesi üzerinde dönen ve mevcut temayı yenisiyle değiştiren event listener.

        • pageAnimationDuration: Sayfa süresi inputunda kullanıcının girdiği süreyi algılar.

      • startAnimation(): Excel verilerini kullanarak split-flap ekranında animasyonu başlatır.

      • Temalar:

        • themes dizisi: Tema isimlerini saklar.

  4. Excel Entegrasyonu:

    • xlsx.full.min.js kütüphanesi: Excel dosyasını okuma ve yazma işlemleri için kullanılan JavaScript kütüphanesi.

    • Veri okuma: FileReader ve XLSX.read fonksiyonları ile Excel dosyasından verileri okuma.

    • Veri yazma: XLSX.utils.book_new, XLSX.utils.aoa_to_sheet ve XLSX.writeFile fonksiyonları ile Excel dosyasına veri yazma.

  5. Animasyon:

    • CSS Animasyonları: .flipping sınıfı ve @keyframes kuralları ile split-flap animasyonunun oluşturulması.

    • JavaScript Animasyonu: setChar() fonksiyonu ile karakterlerin değişimi için animasyonun tetiklenmesi ve süre kontrolü.

  6. Kullanıcı Etkileşimi:
    -Sayfa Butonları: Sayfalar arası geçiş için butonları kullanma.
    -Veri Girişi: Tablo içindeki input alanlarına veri girme.
    -Excel Aktarımı: Girilen verileri excel dosyasına aktarabilme.
    -Excel Yükleme: Excel dosyalarını sisteme yükleyebilme.
    -Animasyonu Başlatma: Ekran üzerindeki animasyonu başlatma.
    -Metni Ekran Yansıtma: Form üzerindeki metni ekrana yansıtma.
    -Temayı Değiştirme: Ekrana farklı temalar uygulama.
    -Sayfa Süresi Ayarlama: Animasyonun hızını ayarlayabilme.

 

Ek Notlar:

Bu projede kullandığım her bir satır kodu, her bir fonksiyonu ve değişkeni adım adım anlatmaya çalıştım. Hata ayıklama süreçleri, neyin nasıl çalıştığı… Her şeyi şeffaf bir şekilde ifade etmeye çalıştım. Eğer herhangi bir sorunuz olursa, bana ulaşmaktan çekinmeyin.

Kart Eşleştirme Oyunu

Yazar: @dremregecer |
Tarih: 26.05.2012
3n+1
tekse-çiftse
2'ye böl
konjektür
çözülemeyen
desen
pattern

 

Selam arkadaşlar. Kartlar ile Hafıza Oyunu, kullanıcıların dikkat ve hafıza becerilerini geliştirmeyi amaçlayan çocukluk çağından yaşlılığa kadar interaktif bir oyun uygulamasıdır. Bu oyun, HTML, CSS ve JavaScript kullanılarak yazdığımız, modern web arayüzü kullanarak oluşturuldu. Aşağıda, oyunun teknik yapısını detaylı bir şekilde açıkladım
Proje Yapısı
Oyunumuz üç ana dosya üzerinden yapılandırılmıştır:

  • index.html: Oyunun temel yapısını ve içeriğini barındıran HTML dosyası.
  • style.css: Oyunun görsel tasarımını ve animasyonlarını yöneten CSS dosyası.
  • script.js: Oyunun işlevselliğini ve dinamik davranışlarını sağlayan JavaScript dosyası.

HTML dosyamız, oyunun kullanıcı arayüzünü oluşturmak için çeşitli bileşenler içerir. İşte ana yapısı:

Açıklamalar:

  • .container: Oyunun tüm bileşenlerini içeren ana kapsayıcı.
  • .settings: Başlat ve Yeniden Başlat butonlarını barındıran bölüm.
  • #gameBoard: Kartların yerleşeceği oyun alanı.
  • .score-container: Kullanıcının puanını, hamle sayısını ve skor tablosunu gösteren bölüm.

CSS Tasarımı (style.css)
CSS dosyamız, oyunun estetik görünümünü ve kullanıcı etkileşimlerini yönetir. Aşağıda önemli stil tanımlarını bulabilirsiniz:

  • Kartların Arka Yüzü: .card .back sınıfına eklenen background-image özelliği ile kartların arka yüzüne bir görsel atanmıştır. Bu, oyunun görsel cazibesini artırır.
  • Animasyonlar: .card.matched .front img seçici ile eşleşen kartların ön yüzündeki görseller için popInOut animasyonu uygulanmıştır. Bu animasyon, görselin büyüyüp tekrar eski boyutuna dönmesini sağlar.
  • Responsive Tasarım: Medya sorguları kullanılarak farklı ekran boyutlarına uyum sağlanmıştır. Bu, oyunun mobil cihazlar ve daha küçük ekranlarda da düzgün görünmesini sağlar.

JavaScript İşlevselliği (script.js)
JavaScript dosyamız, oyunun dinamik davranışlarını yönetir. İşte ana işlevleri:

  • Oyun Başlatma (startGame): Bu fonksiyon, oyunu başlatır. Kartları rastgele görsellerle doldurur, oyunu aktif hale getirir ve gerekli değişkenleri sıfırlar.
  • Kartları Hazırlama (prepareBoard): Oyun tahtasını temizler ve kartları oluşturur. Her kart için arka yüz görseli atanır.
  • Kart Flipleme (flipCard): Kullanıcı bir karta tıkladığında, kart döner. İki kart açıldığında eşleşme kontrolü yapılır.
  • Eşleşme Kontrolü (checkMatch): İki kartın eşleşip eşleşmediğini kontrol eder. Eşleşen kartlar üzerinde animasyon uygulanır ve puan güncellenir. Eşleşmeyen kartlar geri çevrilir.
  • Yeniden Başlatma (resetGame): Kullanıcı "Yeniden Başlat" butonuna tıkladığında, mevcut oyunu sonlandırır, puanı skor tablosuna ekler ve yeni bir oyun başlatır.
  • Skor Tablosu Güncelleme (updateScoreboard): Her oyunun sonunda puan, hamle sayısı ve oyun süresi skor tablosuna eklenir.

Ana Özellikler ve İyileştirmeler

  • Görsel Kullanımı: Kartların ön yüzünde farklı görseller kullanılarak, oyunun görsel cazibesi artırılmıştır. Arka yüzler için de özel görseller atanmıştır.
  • Animasyonlar: Eşleşen kartlarda görsellerin büyüyüp küçülmesi sağlayan animasyonlar eklenmiştir. Bu, kullanıcı deneyimini zenginleştirir.
  • Responsive Tasarım: Medya sorguları kullanılarak oyunun farklı ekran boyutlarına uyum sağlaması sağlanmıştır. Mobil cihazlar ve tabletler için optimize edilmiştir.
  • Skor Tablosu: Oyuncuların skorlarını ve performanslarını takip edebilmeleri için dinamik bir skor tablosu oluşturulmuştur.
  • Hata Yönetimi: Görsellerin yüklenmemesi durumunda, onerror olayını kullanarak hatalı görseller gizlenmiştir. Bu, oyunun kesintisiz çalışmasını sağlar.
  • Reset Fonksiyonu: "Yeniden Başlat" butonuna tıklandığında, tarayıcı uyarısı vermeden mevcut oyun puanını skor tablosuna ekler ve oyunu otomatik olarak yeniden başlatır.

Sonuç
Bu hafıza oyunu, kullanıcıların dikkatini çekmek ve hafıza becerilerini geliştirmek için tasarlanmış interaktif bir web uygulamasıdır. Modern web teknolojilerini kullanarak, estetik ve işlevsel bir oyun deneyimi sunulmuştur. HTML ile yapılandırılan oyun alanı, CSS ile zenginleştirilen görsel tasarım ve JavaScript ile dinamik işlevsellik kazandırılmıştır. Bu proje, web geliştirme becerilerini sergilemek ve kullanıcı dostu bir oyun oluşturmak isteyenler için mükemmel bir örnek teşkil etmektedir.

Herhangi bir sorunuz veya eklemek istediğiniz özellikler olursa, lütfen benimle paylaşmaktan çekinmeyin. Oyunumun keyifli bir şekilde çalışmasını ve kullanıcılar tarafından beğenilmesini umuyorum!

Flip Board Kodlama

Yazar: @dremregecer |
Tarih: 29.08.2016
flip board
flip clock
deperture board
airport
train satation
bus station
html

 

Selam Arkadaşlar! Belki çoğunuz görmemiştir ama ben o eski tren istasyonlarında, havaalanlarında bulunan, takır tukur dönen harf ve rakamların olduğu ekranlara bayılırım. Onlara "split-flap display" deniyor. Çocukluğumda bana çok çekici gelirdi, sanki o mekanik sesleri, o harflerin dansı beni başka bir dünyaya götürürdü. Şimdi ise o büyüyü dijitale taşımaya çalıştım ve işte karşınızda, çoklu sayfa veri girişi, Excel entegrasyonu ve dinamik görüntüleme özellikleri olan bir split-flap display simülasyonu!

Bu kodları yazarken amacım, sadece o nostaljik havayı canlandırmak değil, aynı zamanda kullanıcının kolayca veri girebilmesini, bu verileri Excel'e aktarabilmesini ve daha sonra bu verileri dinamik bir ekranda görüntüleyebilmesini sağlamaktı. Hem eğlenceli hem de işlevsel bir şey ortaya çıksın istedim.

HTML'e Yakından Bakış:

Veri Giriş Sayfası (index.html): Burada her şey basit tutulmaya çalışıldı. Sayfa butonları ile sayfalar arasında geçiş yapabiliyorsunuz. Tablo içerisinde verilerinizi giriyorsunuz ve "Excel'e Aktar" düğmesi ile bu verileri bir excel dosyasına kaydedebiliyorsunuz.

Görüntüleme Sayfası (display.html): Burası biraz daha karmaşık. Split-flap ekranının bulunduğu bir ana alan var. Her bir harf veya sembol için küçük birer "split-flap" birimi var. Yukarıdan aşağı açılan paneller ile o mekanik hissi yaratmaya çalıştım. Ekranı kontrol edebilmek için bir araç çubuğu ekledim.

CSS ile Görsellik:

CSS ile tasarım yaparken hem modern hem de o eski split-flap havasını yakalamaya çalıştım. Arka planlar, renkler, animasyonlar… Hepsi özenle seçildi.

Farklı temalar da ekledim, böylece her seferinde farklı bir görünüm deneyebilirsiniz. Her temanın kendine özgü renk paleti var.

JavaScript Kısmı:

Veri Giriş Sayfası (index.html):

createTable() fonksiyonu ile dinamik bir tablo oluşturuyorum.

changePage(pageNum) ile sayfaları değiştiriyorum ve aktif olanı belirliyorum.

saveCurrentPageData() ile girilen her veriyi kaydediyorum.

addInputListeners() ile inputlara bazı olay dinleyicileri ekledim. Böylece veri girerken çok daha akıcı bir deneyim sunuyorum (otomatik next input gibi).

exportToExcel() ile girdiğiniz bütün verileri excel'e kaydediyorum.

Görüntüleme Sayfası (display.html):

SplitFlapDisplay adında bir class oluşturdum. İçinde her bir split-flap birimi için gerekli olan constructor() ve setChar(char) fonksiyonları var. setChar() ile o flip efekti veriliyor.

Dosya yükleme, animasyonu başlatma, metni ekrana yansıtma, tema değiştirme ve sayfa süresini ayarlama gibi bütün işler JavaScript ile yapılıyor.

startAnimation() fonksiyonu ile excel'den okuduğum verileri split-flap'lere sırayla gösteriyorum. Her karakterin geçişi ayrı ayrı hesaplanıyor.

Tema değiştirme ve diğer kullanıcı etkileşimlerini yine JavaScript ile yapıyorum. Her şeyin düzenli ve çalışır olmasını istedim.

Excel Entegrasyonu:

Excel entegrasyonu için xlsx.full.min.js kütüphanesini kullandım. Bu kütüphane, excel dosyalarını okuma ve yazma işlerinde çok yardımcı oldu.

FileReader ile dosyayı okuyup XLSX.read() ile excel verilerini elde ettim. Sonra bunları işleyip ekrana yansıtıyorum.

Veri yazma işinde de benzer şekilde bu kütüphaneyi kullandım.

Animasyonlar:

Animasyonlar tamamen CSS ile yapıldı. flipping classı ve @keyframes kurallarıyla o flip efektini oluşturmaya çalıştım.

JavaScript ile sadece animasyonları tetikliyorum. Bu, animasyonları daha akıcı ve hızlı hale getiriyor.

Kullanıcı Etkileşimi:

Proje tamamen kullanıcı etkileşimli. Sayfa butonlarıyla, girdiğiniz değerlerle, excel verileriyle… Her şey canlı ve etkileşimli.

Tema değiştirme, metni ekrana yansıtma, dosya yükleme gibi bütün işler basit ve kullanıcı dostu olacak şekilde tasarlandı.

Sonuç:

Bu proje, hem nostaljik bir split-flap display'in büyüsünü yaşatıyor hem de dijital dünyanın imkanlarını bir araya getiriyor. Bu projeyi yaparken hem eğlendim hem de çok şey öğrendim. Projenin gelecekte daha farklı şekillerde kullanılmasını da hayal ediyorum. Kim bilir, belki bir gün dijital tabelalarda veya interaktif sanat projelerinde bu split-flap ekranlarını görürüz!

Bu proje daha da geliştirilebilir. Daha fazla tema, farklı animasyon seçenekleri, belki daha interaktif özellikler eklenebilir. Ama şimdilik, benim için bu proje tam istediğim gibi oldu.

Umarım sizler de bu projeyle eğlenir ve öğrenirsiniz!

 

Teknik Detaylar

  1. HTML Yapısı:

    • Veri Giriş Sayfası (index.html):

      • split-flap-buttons div'i: Sayfalar arası geçiş için kullanılan butonların bulunduğu container.

      • split-flap-title ve split-flap-paragraph: Sayfa başlığı ve açıklama metinlerinin yer aldığı öğeler.

      • split-flap-table: Veri girişinin yapıldığı tablo.

      • split-flap-input: Tablo hücrelerine veri girmek için kullanılan input elemanları.

      • split-flap-export-button: Girilen verileri Excel'e aktarmak için kullanılan buton.

    • Görüntüleme Sayfası (display.html):

      • split-flap-toolbar: Dosya seçimi, animasyon başlatma, metni yansıtma ve tema değiştirme butonları ile sayfa süresi inputunun bulunduğu araç çubuğu.

      • split-flap-grid: Split-flap ekranının bulunduğu ana container.

      • split-flap-card: Her bir split-flap biriminin bulunduğu div.

      • split-flap-top, split-flap-bottom, split-flap-next: Split-flap animasyonunun parçaları.

  2. CSS Stilleri:

    • Ortak Stiller:

      • body: Genel stil tanımları, arka plan rengi, font ayarları.

      • split-flap-buttons, split-flap-button: Veri giriş sayfasındaki sayfa butonları ve stilleri.

      • split-flap-table: Tablo stilleri.

      • split-flap-input: Input elemanlarının stilleri.

    • Veri Giriş Sayfası Stilleri:

      • split-flap-export-button: Veri aktarımı butonu stilleri.

    • Görüntüleme Sayfası Stilleri:

      • split-flap-grid: Split-flap ekranı için grid düzeni ve temel stiller.

      • split-flap-toolbar, .split-flap-toolbar button, .split-flap-toolbar input: Araç çubuğu ve elementlerinin stilleri.

      • split-flap-card: Split-flap birimi stilleri, perspective ve shadow tanımları.

      • split-flap-top, split-flap-bottom, split-flap-next: Split-flap animasyonu için kullanılan elementlerin stilleri, animasyon için transform origin ve backface-visibility özellikleri.

    • Temalar:

      • .split-flap-theme1 - .split-flap-theme20: Farklı renk paletlerine sahip temaların stilleri, background, border ve text renkleri tanımları.

  3. JavaScript İşlevleri:

    • Veri Giriş Sayfası (index.html):

      • createTable(): Veri giriş tablosunu dinamik olarak oluşturan fonksiyon.

      • changePage(pageNum): Sayfalar arası geçişi sağlayan ve aktif sayfayı belirleyen fonksiyon.

      • saveCurrentPageData(): Mevcut sayfadaki verileri pagesData objesine kaydeden fonksiyon.

      • addInputListeners(): Input elemanlarına event listener'lar ekleyen fonksiyon (input ve keydown olayları).

      • exportToExcel(): Girilen verileri excel dosyasına aktaran fonksiyon.

    • Görüntüleme Sayfası (display.html):

      • SplitFlapDisplay Class:

        • constructor(): Split-flap elementlerini oluşturur ve yapılandırır.

        • setChar(char): Belirtilen karakteri animasyonlu olarak split-flap üzerinde gösteren fonksiyon.

      • Event Listener'lar:

        • fileInput: Excel dosyasının seçilmesiyle dosya içeriğini işleyen event listener.

        • startAnimationButton: Animasyonu başlatma butonuna basıldığında startAnimation() fonksiyonunu çalıştıran event listener.

        • reflectTextButton: Veri giriş sayfasındaki tabloyu kullanarak ekranı güncellemek için reflectTextButton() fonksiyonunu çalıştıran event listener.

        • changeThemeButton: Temayı değiştirmek için tema listesi üzerinde dönen ve mevcut temayı yenisiyle değiştiren event listener.

        • pageAnimationDuration: Sayfa süresi inputunda kullanıcının girdiği süreyi algılar.

      • startAnimation(): Excel verilerini kullanarak split-flap ekranında animasyonu başlatır.

      • Temalar:

        • themes dizisi: Tema isimlerini saklar.

  4. Excel Entegrasyonu:

    • xlsx.full.min.js kütüphanesi: Excel dosyasını okuma ve yazma işlemleri için kullanılan JavaScript kütüphanesi.

    • Veri okuma: FileReader ve XLSX.read fonksiyonları ile Excel dosyasından verileri okuma.

    • Veri yazma: XLSX.utils.book_new, XLSX.utils.aoa_to_sheet ve XLSX.writeFile fonksiyonları ile Excel dosyasına veri yazma.

  5. Animasyon:

    • CSS Animasyonları: .flipping sınıfı ve @keyframes kuralları ile split-flap animasyonunun oluşturulması.

    • JavaScript Animasyonu: setChar() fonksiyonu ile karakterlerin değişimi için animasyonun tetiklenmesi ve süre kontrolü.

  6. Kullanıcı Etkileşimi:
    -Sayfa Butonları: Sayfalar arası geçiş için butonları kullanma.
    -Veri Girişi: Tablo içindeki input alanlarına veri girme.
    -Excel Aktarımı: Girilen verileri excel dosyasına aktarabilme.
    -Excel Yükleme: Excel dosyalarını sisteme yükleyebilme.
    -Animasyonu Başlatma: Ekran üzerindeki animasyonu başlatma.
    -Metni Ekran Yansıtma: Form üzerindeki metni ekrana yansıtma.
    -Temayı Değiştirme: Ekrana farklı temalar uygulama.
    -Sayfa Süresi Ayarlama: Animasyonun hızını ayarlayabilme.

 

Ek Notlar:

Bu projede kullandığım her bir satır kodu, her bir fonksiyonu ve değişkeni adım adım anlatmaya çalıştım. Hata ayıklama süreçleri, neyin nasıl çalıştığı… Her şeyi şeffaf bir şekilde ifade etmeye çalıştım. Eğer herhangi bir sorunuz olursa, bana ulaşmaktan çekinmeyin.

Scroll to Top