HTML5 – Javascript Harekete duyarlı uygulamalar

Merhaba, arkadaşlar javascript ve html5 canvasların birleşimi harekete duyarlı web uygulamaları ilginizi çekiyorsa canvas apının ne işe yaradığını, nerelerde kullanıldığını kestiremiyorsanız bu konuyu okuyabilirsiniz.Sizlere yaptığımız projenin genel bir tanıtımını yaparak konuyu anlatacağım

Genel Bilgi

• Uygulama görüntüdeki hareket eden nesneleri algılayabilir
• Böylelikle harekete duyarlı web uygulamaları yazabilirsiniz

Planlanan Kullanım Alanları

• Harekete Duyarlı Güvenlik Çözümleri
• İnteraktif (Kullanıcı Etkileşimli) Web Uygulamaları
• E-ticaret (Sanal Deneme Kabinleri)
• Harekete Duyarlı Oyunlar

Detayları

Öncelikle uygulamayı yazmak için gerekli apiler analiz edilip uygulamanın ihtiyaçları belirlendi. Uygulamada HTML5 , CSS , Javascript ve bir Webserver kullandık.

API ve fonksiyonlar

I. getUsermedia API
HTML5 ile gelen bu özellik kullanıcının kamerasından herhangi bir görüntü alıp bu görüntüyü kullanmamızı sağlar.Kullanıcının hareketlerini algılarken bu uygulamadan yararlandık

II. Canvas API
Uygulamalarımızın çekirdek parçasıdır.Kullanıcıdan alınan görüntü saniyede 40 kare resim formatında canvasa tekrar çizilir ve canvas üzerinde görüntü işleme tekniği kullanılılır.

III. Resimlerin Karşılaştırılması
Kameradan alınan görüntü canvasa çizdirilir ve 25ms sonra tekrar bi görüntü alınır ayrı bir canvasa çizdirilir.2 görüntü piksel piksel işlenerek piksellerin renkleri karşılaştırılır.Bu işlemler sonucu eğer piksel üzerindeki renkde bir değişim olmuşsa o piksel beyaza boyanır.Değişim olmayan pikseller ise siyaha boyanır.Bu işlem saniyede 40 kere tekrarlanır.

IV. Uygulama
Bu Kütüphanenın demosu olarak küçük bir sanal kabin uygulaması geliştirdik.Bu uygulamayla kullanıcı sepetine attığı ürünleri kamera karşısına geçerek el hareketleriyle deneme şansı bulmaktadır.

ÇALIŞMA MANTIĞI

Yukaridaki Mantığın Demosu

http://www.mustafaercel.com/shake/demos/motion.html

ALGORİTMASI

function goruntufarki(hedef, data1, data2) {

if (data1.length != data2.length) return null;
var i = 0;
while (i < (data1.length * 0.25)) { 
// 2 resimin piksel piksel rgb değerlerinin karşılaştırılması
var ortalama1 = (data1[4 * i] + data1[4 * i + 1] + data1[4 * i + 2]) / 3;
var ortalama2 = (data2[4 * i] + data2[4 * i + 1] + data2[4 * i + 2]) / 3;
var diff = olustur(mutlakdeger(ortalama1 - ortalama2)); // 255 veya 0
hedef[4 * i] = diff;
hedef[4 * i + 1] = diff;
hedef[4 * i + 2] = diff;
hedef[4 * i + 3] = 0xFF; // 255 Beyaz kodu
++i;
}
}

Yukardaki Fonksiyonu kullandığımız 3 Canvastan oluşan yapımız

function blend() {
var width = canvasSource.width;
var height = canvasSource.height;
// webcamin resimini al
var sourceData = contextSource.getImageData(0, 0, width, height);
// ilk defa resimi alıyorsak karsılastırılacak resimede bunu ata
if (!lastImageData) lastImageData = contextSource.getImageData(0, 0, width, height);
// Yeni bir çıktı oluştur
var blendedData = contextSource.createImageData(width, height);
// 2 Resim arasındaki RGB değerlerine göre 2 resmi karşılaştır çıktı resimimize gönder
goruntufarki(blendedData.data, sourceData.data, lastImageData.data);
// Çıktı resimi çiz
contextBlended.putImageData(blendedData, 0, 0);
// Kullandıgımız image bi sonraki aşama için karsılastırılacak image olarak secilir
lastImageData = sourceData;
}

DEMOLAR

Algoritma Çalışma Demosu http://www.mustafaercel.com/shake/demos/motion.html

Hareket kontrollü slayt uygulaması (Sayfa açıldığında izinvere tıklayıp elinizi ekranın sağ ve sol köşesine doğru götürün slayt sayfası değişecektir)
http://webakademi.org/proje/demo2.html

Hareket kontrollü basit kabin uygulaması (Sayfa açıldığında izinverin bir miktar pc den uzaklaşın elinizi sağdaki tshirtlere getirin elle seçtiğiniz tshirt üzerinize gelecektir)
http://webakademi.org/proje/demo1.html

Proje için yaptığım Sunum
http://webakademi.org/proje/app.html

Not :Yukaridaki çalışma mantığını youtubeda bu alanla ilgili birkaç çalışma mantığının üzerinden giderek geliştirdim
Tshirt uygulaması ve slayt uygulaması bu mantıktan kendi kodladığım çalışmalardır

Bu yazı belki kod olarak anlanması zor bir yazı olabilir fakat çalışma mantığı , ve html5 ,javascript birleşince nelerin yapılabileceğine fikir vermesi açısından yararlı olabileceğini düşünüyorum

HTML5 – Javascript Harekete duyarlı uygulamalar” hakkında 2 yorum

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir