NodeJS'de Pixel Pixel Resim Oluşturma

Bilen biliyor ki NodeJS ısınılası bir bir şey değil. "Şifre yanlış olunca sayfayı yenilemeden, inputbox'a renk vermek ne demek, Javascript ile web sayfası üzerinde koşan oyun yapıyorum, websoket üzerinden Coin borsaları arasında Asenkron arbitraj yaptırttırıyorum" diyecek birisi için güzel olabilir. Ama ortalama bir sunucu için Python ve Flask/Boiler/Django gibi sade ve işlevsel aksiyonlar varken node biraz maliyetli bir araç.

Hem Callback de bi nevi Senkrona zorlama değil mi sonuçta.
Netflix yapıyorsan, aynı ada 100'lerce kişi makinana bağlanıyor ve her biri uzun işlem öbekleri çalıştırıyorsa eyvallah, çok güzel. Ama orta halli ihtiyaçlar için callback cehennemlerinde beyin yakmanın alemi yok

Node için hislerimi bi kez daha anlattığıma göre devam edebiliriz ;)

Geçen gün etasarim hocamla yorumlaşırken bir site geçmişti: Coolors.co

Çok tatlı ve güzel bir site. Klasik renk paletleri yerine Hue, Saturation ya da tek tıkla ana rengi kaybetmeden tonlarını veriyor olması da hayli kullanışlı.

 

Sitede hayli vakit geçirince, ister istemez üzerinde çalıştığım işe de bir şeyler sirayet etti :)

Şöyle Coolors.co tasında, öndeki her bir Rakamın değerine göre Otomatik Arka Plan Resmi oluştursak?

OMG! Çok güzel olabilir! Ama yine bir hafta+ daha atabilir :/S

Ne demişler;

Önemli olan, delin aklına taşı getirmek :)

Her bir Pixel'i kontrol edebileceğim bir şeyler lazımdı. Bolca ve bolca npm paketleri baktım.. Çoğunu denedim ve çoğu daha read.me sayfasındaki kodlarda bile hata verdi. Bazıları fazla lüx, bazıları da komplike geldi. Her şey göz önünde, sade ve kullanışlı bir şey arayışıma en yakın cevabı pngjs-image kütüphanesi verdi.

Node ve nmp kurulu olduğunu varsayarsak,

npm install pngjs-image --save
yazarak paketi indiriyoruz.

Ve başlayalım

Open'a aslında gerek yok ama biraz fantazi yapıp, resim oluştuğunda hemen bunu göstermesi için bunu da indirelim ve çağıralım.

npm install open --save

İşin mantığında gelince, çok tatlı bir şekilde şöyle yazıyoruz:

Resmin X olarak 1. ve Y olarak 1. koordinatındaki Pixel'i
şu renk RGB(118,182,77) yap.

Data Array'lar, Rowlar, satır sonu kontrolleri.. olmadan gayet anlaşılır ve kullanışlı.

Elimde şöyle noktalar var:

∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙

Bunların her birinin yerini ve rengini söylersek istediğimiz resmi pixel pixel oluşturabiliriz ;)

∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙

∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙

Her pixelin (daha doğrusu pixel gurubunun) Rengini de bahsi geçen Rakam'lara göre ayarladık mı tamamdır, hedefe gidebiliriz ;)

Mesela yukarıdaki gibi Kahve - Su yeşili - Mavi kombini yapmak istiyorsak; pixelleri şöyle ayarlayabiliriz:

Kahve Kahve Kahve Su yeşili Su yeşili Su yeşili Su yeşili Mavi Mavi Mavi
Kahve Kahve Kahve Su yeşili Su yeşili Su yeşili Su yeşili Mavi Mavi Mavi
Kahve Kahve Kahve Su yeşili Su yeşili Su yeşili Su yeşili Mavi Mavi Mavi
Kahve Kahve Kahve Su yeşili Su yeşili Su yeşili Su yeşili Mavi Mavi Mavi

yani X koordinarlarından yan yana 3-4 tane Kahve, ardından 4-5 tane Su yeşili ve 3-4 Mavi

image.setAt(1, 1, { red:214, green:189, blue:167, alpha:1000 });
image.setAt(2, 1, { red:214, green:189, blue:167, alpha:1000 });
image.setAt(3, 1, { red:214, green:189, blue:167, alpha:1000 });
image.setAt(4, 1, { red:214, green:189, blue:167, alpha:1000 });

sonra 4 defa Su Yeşili yani: rgb(211,255,244)
image.setAt(5, 1, { red:214, green:189, blue:167, alpha:1000 });
image.setAt(6, 1, { red:211, green:255, blue:244 , alpha:1000 });
image.setAt(7, 1, { red:211, green:255, blue:244 , alpha:1000 });
image.setAt(8, 1, { red:211, green:255, blue:244 , alpha:1000 });

Dikkat: X koordinatı 5,6,7,8 olurken Y koordinatı hala 1
yani incecik yatay bir çizgi çiziyoruz.

sonra bu yatay çizgilerden 100 tane alt alta koyarsak 100 pixel yüksekliğinde bir resim elde etmiş olacağız ;)

600x600'lük bir resimde 360.000 pixel olduğunu sanırım söylememe gerek yok ve elbette tek tek elle yazmak yerine hayalimizdeki resme göre Döngüler oluşturabilir, içine otomatik artan X değerini ve Y değerini koyabiliriz.

Benim ilk denemelerim şöyle oldu

---

Görsel

---

Posted from my blog with SteemPress :

https://murattatar.xyz/nodejsde-pixel-pixel-resim-olusturma/

---