Bilgisayar açıldığı andan itibaren dışarıdan bir veri alana kadar gerçekleşecek her şey bellidir. Dışarıdan bir veri geldiğinde, örneğin bir mouse hareketi gerçekleştiğinde bunu da kullanıcı kendi bilinci dahilinde gerçekleştirdiği için rastgele olarak görmeyiz. Tabii böyle bir girdiyi sayısal olarak yorumlayarak anlık olarak rastgele bir değer olarak yorumlamak da bir fikir. Bunu yapan uygulamalar da yok değil, Windows üzerinden dışarıya SSH bağlantısı kurmayı sağlayan PuTTY buna bir örnek.

Söylediğim gibi, bilgisayarda her şey kesindir. Bilgisayar, üzerine programlanmadığı bir şey düşünemez, rastgele bir veri üretemez. Onun kaderi ya baştan bellidir, ya da verilen girdilerle şekillenecektir. O yalnızca elektrik akımlarından oluşmuş “zihniyle” dışarıdan aldığı veya halihazırda üzerinde bulunan veriler üzerinden işlem yaparak bir çıktı üretir. Bize de bu çıktıyı sunar. Söz konusu rastgele sayı beklentisi olduğunda ise bizi şaşırtacak veya beklemediğimiz bir sonuç gerekiyor.

Bunu çeşitli yöntemlerle gerçekleştirebiliyoruz. Bunlardan en bilineni, en sık kullanılanı ve en basiti Sözde Sayısal Rastgele Sayı Üreteci (Pseudorandom Number Generator - PRNG) adını verdiğimiz bir kategori. Aritmetiği kullanarak, sayıları işleyerek ve bir kısmını da duruma göre yok ederek beklemediğimiz sayılarla karşılaşıyoruz. Elbette bu yöntemin birçok sıkıntısı var, bunlara daha sonra değineceğim.

PRNG yöntemlerine Orta Kare Metodu (Middle-square Method) ile başlayalım. Bu yöntemi anlaması çok basit. Öncelikle tüm PRNG yöntemlerinde kullanacağımız tohum (seed) kavramına bir bakalım. Yalnızca yüksek seviye programlama dilleriyle uğraşmamışsanız bu seed kavramına aşina olmanız beklenebilir. Seed bizim çıkış noktamız, rastgele sayıların üretileceği zincirin alması gereken ilk değer. Bu genellikle sistemin o anki saati olarak belirlenir. Biz ise şimdilik elle belirleyelim. Orta Kare Metodu için öncelikle bize n basamaklı bir sayı gerekiyor, bu bizim için 6 basamaklı “675248” olsun. Bu sayının karesini alıyoruz ve “455959861504” şeklindeki 2n, yani 12 basamaklı sayıya ulaşıyoruz. Bazı durumlarda 2n basamaklı değil, eksik sayıda basamak çıkabilir. Bu durumda sol kısma 0 ekleyerek 2n’e tamamlıyoruz. Şimdi ise yapacağımız şey tam ortasındaki n basamaklı sayıyı almak. 959861 bizim sözde rastgele sayımız. Tekrar bir rastgele sayı üretmemiz gerektiğinde ise 959861 sayısının karesini alacağız, o da bize 921333139321 sayısını verecek, oradan da 333139 sayısına erişeceğiz ve bu böyle gidecek. Elimizde beklenmedik bir sayı var ve önceki sayıyı tahmin etmemiz zor, çünkü veri çıkardık. Bu yöntem oldukça ilkel olsa da bir gün rastgele sayı üreteci yazmanız gerektiğinde hızlıca yazabileceğiniz bir algoritmaya sahip. Yalnız çok önemli problemleri olduğunu söylemek gerek. Örneğin diyelim bu işlemi 4 basamaklı sayılarla yapıyorsunuz. 2500’e ulaştığınızda ağlayarak günlüğünüze yazabilirsiniz. Çünkü 2500’in karesi 6250000 ve bunun ortasındaki 4 haneli sayı yine 2500. Burada bir kısır döngüye giriyorsunuz ve yapı artık rastgele sayı üretememeye başlıyor.

Şimdi bahsedeceğim PRNG yöntemi ise Doğrusal Uyumlu Üreteç olarak çevirebileceğimiz Linear Congruential Generator. İsmine aldanmayın, çok uyduruk bir yöntem. Tabii uygun parametreler seçildiğinde tatmin edici düzeyde başarılı olduğunu da söylemek lazım. Bu yöntemi GNU/Linux’ta C kodu derlediğinizde kullanıyorsunuz aslında. glibc, dolayısıyla da GCC bunu kullanıyor. Yöntem çok basit. Bir adet seed yine gerekiyor, bir adet mod, bir adet çarpan, bir de ek gerekiyor. Moddan kastımı anlamışsınızdır, bölümünden kalanı alacağımız bir sayı. Yapacağımız şey ise şu: sonuç = (çarpan * seed + ek) % mod Çıkan sonucu ise bir sonraki rastgele sayının seed’i olarak kullanacağız ve bu, bu şekilde gidecek. %’nin modulus işlemi olduğundan bahsetmeme gerek yoktur herhalde. LCG isimli bu yöntem aşina olduğumuz birçok platformda kullanıldı ve kullanılıyor. Java, Turbo Pascal, Visual Basic, Borland Delphi, Borland C/C++, ANSI C ve bahsettiğim gibi GCC. Daha da uzuyor gidiyor. Örneğin ANSI C ve GCC’nin varsayılan değerlerini inceleyelim: mod: 2^31 çarpan: 1103515245 ek: 12345 Bu metotlar yeterince rastgele görünen sayılar üretebilmek için çoğunlukla yeterli oluyor.

Bu aritmetik yöntemlerden son olarak V8 motorunun, dolayısıyla da günümüzde JavaScript çalıştıran çoğu ortamın kullandığı yöntemden; XorShift128+ algoritmasından bahsedelim. Bu algoritmada da verilen seed değeri önce bit düzeyinde 23 kere sola kaydırılıyor ve çıkan değer kendisiyle Xor’lanıyor, ardından bunun sonucu 17 kere sola kaydırılıyor ve kendisiyle Xor’lanıyor, bunun sonucu da ilk adımdaki haliyle Xor’lanıyor derken son olarak da ilk adımdaki değer 26 kere sağa kaydırılıp son değerimizle Xor’lanıyor. E tabii bu kadar işkenceden geçen sayının rastgele görünmemesi pek olası olmazdı. Aynı şekilde işlemler de bitwise yapıldığı için aslında oldukça hızlı bir algoritma. Tabii bunu bu şekilde bir cümlede anlatınca kafada pek bir şey oluşmuyor, o nedenle ben bunun Chrome’un da önemli bir kısmını oluşturan V8 motorunun kaynak kodunda yer alan implementasyonunun resmini koyayım.

Şimdi daha farklı yöntemleri inceleyelim. Unix benzeri işletim sistemlerinde, dolayısıyla GNU/Linux dağıtımlarında da yer alan sözde cihazlar vardır. İşletim sisteminin kök (/) dizininde yer alan /dev dizini altında sisteme normal şartlar altında fiziksel olarak bağlı cihazların temsili halleri birer dosya formatında bulunurken bahsettiğim sözde cihazlar da onlarla beraber bu dizinde bulunur. Bunlar /dev/random, /dev/zero, /dev/urandom, /dev/full, /dev/null gibi özel dosyalardır. Bizim odaklanacağımız sözde cihaz ise /dev/random olacak.

/dev/random cihazından veri okuyacak olursanız size bir akış olarak sürekli bir şekilde rastgele byte’lar üretecektir. Örneğin cat /dev/random gibi bir komutla bunları ham olarak okuduğunuzda işletim sistemi karakter tablosundaki birer karakterle eşleştirmeye çalışacağından anlamsız karakterler olarak gözlemleyeceksiniz.

Gelelim esas önemli kısma. /dev/random cihazının bizim için önemi şu: kendisi bu rastgele değerleri donanımlardaki çevresel gürültülerden elde ediyor. Aslına bakarsanız aritmetiksel yöntemlerden daha kullanışlı. Tabii kendi cihazınızın oluşturacağı elektromanyetik gürültüler hiçbir zaman tam olarak tahmin edilemez değildir. Bu nedenle /dev/random veya onun entropik olarak daha geniş bir havuza sahip olan kuzeni /dev/urandom “gerçek” rastgele sayı üreteci (True random number generator) kabul edilmiyor. Onlar da birer sözde rastgele sayı üreteci olarak geçmekte.

TRNG olarak anılan bazı çevresel donanımlar mevcut. Bunlar da çevresel bazı değerleri alıp işleyerek bunu yapıyor. Örneğin termal gürültü, fotoelektrik etki, ışın ayırıcı (beam splitter) etkisi veya diğer kuantumsal etkiler gibi, standart bir bilgisayar donanımında bulunmayan sensörlerle yapılan gözlemlerin sonucu ile amacına ulaşıyor. Bunlara hardware random number generator (HRNG) veya non-deterministic (deterministik olmayan) random bit generator (NRBG) de deniyor.

random.org gibi siteler ise atmosferdeki elektromanyetik gürültüyü kullanarak anlık olarak gerçek rastgele sayı üretme ve size bunu sayfa üzerinden ulaştırma vaadinde bulunuyor.

Son olarak kriptografik olarak güvenli olma konusuna gelelim. Gördüğünüz üzere sözde rastlantısal sayılar tahmin edilemez değil, sayıyı oluşturmadan önce onu tahmin edebilmek olası. Bu ise kullanımda büyük güvenlik açıkları doğuruyor. Örneğin yalnızca adresi bilen kişilerin ulaşabileceği bir sayfa veya dosya ismi belirlediniz ve bunu bir PRNG ile yaptınız. İşi bilen bir insan rastgele olduğunu düşündüğünüz o sonuca ulaşıp erişilmesini istemediğiniz o noktaya erişebilecektir. Senaryolar bundan ibaret de değil elbet, rastgelelik tahmin edilebilir olduğu zaman rastgelelik olmaktan çıkıyor. Bu gibi durumlar için cryptographically secure random number generator (kriptografik olarak güvenli rastgele sayı üreteci) adı verilen üreteçler kullanılır. /dev/random ve /dev/urandom sözde cihazları da kriptografik olarak güvenli olarak geçer. /dev/random, bir makine özelinde yaklaşık olarak tahmin edilebilir sonuçlar doğurabilir olsa da geniş bir perspektifte güvenli sayılabilir. Şayet özellikle kripto para, blockchain gibi güvenlik gerektiren bir platform kodluyorsanız bakmanız gereken rastgele sayı algoritmaları kriptografik olarak güvenli olanlar olmalıdır. Bunun için araştırma yapmalı ve uygun kütüphaneleri bulmalısınız. Geleceğe selamlar.

Windows’un “cmd.exe” isimli komut satırı uygulaması zaten daima bildiğiniz gibi. Mecburiyetten kullanılır bir halde. Fakat onunla ilgili birkaç ipucu da vereyim de bu yazı olabildiğine yardımcı bir kaynak olsun.

Belki biliyorsunuzdur fakat bu ipucunu yine de vereyim. Sanırım Windows’ta bu gibi, System32 gibi yol değişkenine ekli klasörlerde yer alan uygulamaları açmanın en hızlı yolu çalıştır penceresini kullanmak. Bu yüzden, örneğin benim gibi Linux’ta Ctrl + Alt + T veya Super + T gibi kısayollarla hızlıca bir terminal penceresi açmaya alıştıysanız bu yolla Windows’ta da işinizi daha hızlı halledebilirsiniz. Biliyorsunuz, Windows tuşu diğer işletim sistemlerinde Super ismiyle geçer.

Windows + R tuşu, çalıştır penceresini açacaktır. Buraya cmd yazarak Enter tuşuna bastığınızda Komut Satırına ulaşabilirsiniz. Sonraki Çalıştır penceresini açtığınız seferlerde, daha önceki yazdığınız komut da orada duruyor olacağından, bir tık daha hızlanabilirsiniz. Tabii buradan mspaint, notepad gibi uygulamaları da isimleriyle çağırabileceğinizi biliyorsunuzdur.

Şimdi pek bilinmeyen, fakat çok ihtiyaç duyulan bir ipucuna gelelim. Çoğu zaman Komut Satırı penceresini yönetici modunda çalıştırmak gerekebiliyor, örneğin paket yöneticileriyle global kurulumlar yapılacaksa. Çalıştır penceresinden çalıştırdığınız uygulamaları yönetici moduyla açıp açamayacağınızı merak ettiyseniz, bu mümkün. Uygulamanın ismi yazıldıktan sonra Enter tuşu yerine Ctrl + Shift + Enter tuş kombinasyonunu tuşladığınızda uygulamayı yönetici modunda açmanızı sağlayacak dialog ekranına ulaşabileceksiniz.

Yazılım geliştiriyorsanız, istediğiniz uygulamaları ve paketleri komut satırından yükleme ihtiyacınız oldukça fazla oluyordur. NPM, Pip gibi paket yöneticiler kurulu olduğunda, onların dahilindeki paketleri, eğer yönetici modundaysanız halihazırda kurabiliyorsunuz. Fakat bizzat Windows dahilinde global olarak çalışacak bir paket yönetici ihtiyacı hissetmişsinizdir. Bunun için Chocolatey‘yi kullanabilirsiniz. Kurulumunu kendi sayfasında yer alan direktiflere göre Powershell üzerinde yaptıktan sonra, yönetici modunda açılmış terminallerle istediğiniz paketi kurabilir hale geleceksiniz. Örneğin choco install php diyerek PHP’yi sisteminize kurabileceksiniz. Bu şekilde yazılım geliştirme için ihtiyaç duyulan uygulamalar ve onların bağımlılıkları, ayarlamaları da çok daha hızlı bir şekilde yapılacak, çünkü Chocolatey bu paketleri önünüze olması gerektiği gibi seriyor.

Ha bir de Powershell meselesi var tabii. Kendisini gerçekten hiç sevmiyorum, arkaplan renk seçimi dahi berbat. Komutları ise bana aşırı çirkin geliyor. Komut ve betik dili olarak çok zengin olsa da, kullanım kolaylığı olarak pek bir şey katılmamış durumda. cmd.exe için söylediğim her şeyi Powershell için de kullanabilirsiniz.

Komut satırının çok saçma bir özelliği var: örneğin bir işlemin sonucunu beklerken pencerenin durakladığını fark edebiliyorsunuz ve pencereye bir geribildirimde bulununca aslında o işlemin çoktan bittiğini ve boşu boşuna beklediğinizi anlıyorsunuz. Bunun nedeni farkında olmadan pencereye tıklamış olmaktan kaynaklanıyor. Varsayılan olarak açık gelen bu saçmalık, ister inanın ister inanmayın cmd.exe’nin bir özelliği. Pencere başlığına sağ tıklayarak, Özellikler seçeneği ile ulaşacağınız pencereden Hızlı Düzenleme Modu seçeneğini deaktif ederek bundan kurtulabilirsiniz. İngilizcesi de Quick Edit Mode elbette.

Komut Satırının can sıkan noktalarından biri de kopyalama ve yapıştırma işleri. Bir metni seçtikten sonra Enter tuşuna bastığınızda metin kopyalanacaktır. Yapıştırmak için ise sağ tıklamanız gerekiyor.

Windows için daha iyi terminal seçenekleri mevcut. Örneğin Git kurulumu yaparsanız, bir klasörde sağ tıkladığınızda gelen seçeneklerden biri olan “Git Bash Here” ile ulaşabileceğiniz MINGW64 terminali. Bununla birçok açıdan tıpkı Linux’ta gibi bir kullanıma sahip olabilirsiniz. O an başka bir seçeneğim olmadığında, Git’e halihazırda daima ihtiyacım olduğundan genelde bunu kullanıyorum. ls, cat, alias ve benzeri Unix komutlarını kullanabilmenize olanak sağlayacaktır.

Bir başka seçenek ise Cmder. Websitesini incelediğinizde birçok kolaylık sağladığını göreceksiniz. Cmder, bir zip dosyası olarak iniyor. Bunu C:\cmder gibi bir dizine açtıktan sonra sistem yoluna (PATH değişkenine) ekleyerek kullanmaya başlayabilirsiniz. Ben aynı zamanda kendisi için Ctrl + Alt + T kısayolunu oluşturdum. Cmder’in görev çubuğundaki sekmesine sağ tıklayarak, özellikler seçeneğinden erişeceğiniz penceredeki Kısayol bölümüne istediğiniz kısayolu girebilirsiniz.

Öncelikle bir websiteniz varsa, sayfalarını Wayback Machine’e kaydetmeniz sizin için faydalı olacaktır. Çocukken yaptığım siteleri keşke zamanında kaydetseydim diyorum, şimdi neredeyse hiçbirine Wayback Machine de dahil hiçbir yerden erişemiyorum. Bunu yapmak için Wayback Machine’in ana sayfasında sağ altta bulunan formu kullanabilirsiniz.

Formu gönderdikten sonra açılan sayfayı da onayladığınızda işleminizin gerçekleştiğini göreceksiniz. Şimdi çok daha faydalı ipuçlarına geçelim.

Wayback Machine’de arama yapabilirsiniz. Çok detaylı bir arama imkanı sunmasa da, çoğu zaman geçmişteki websitelerinde arama yapmak istediğinizde size istediğiniz sonucu sunacaktır. Bunun için tek yapmanız gereken, Wayback Machine’in ana sayfasındaki kutucuğa bir site adresi yerine bir anahtar kelime yazmak.

Adres çubuğunun aşağıdaki gibi değiştiğini görüyorsunuzdur.

Ben genelde web arayüzünden önce adres çubuğunu kullanırım. Formatı görüyorsunuz:

https://web.archive.org/web/*/msn%20ifadeleri

Anahtar kelime yerine şunun gibi bir website adresi yazalım:

https://web.archive.org/web/*/hoppala.com

Sonuç şu şekilde olacak:

Gördüğünüz gibi, adresin kayıtları çıkıyor. Ben Wayback Machine’i kullanacağım zaman adres çubuğuna web.archive.org/web/*/ ve ardından aramak istediğim kelime veya kayıtlarını bulmak istediğim websitenin adresini yazarak kullanırım. İşler böyle daha hızlı oluyor. Şimdi bu formatın ne anlama geldiğine bakalım.

Herhangi bir kayda tıkladım ve adres çubuğu şu şekilde değişti:

https://web.archive.org/web/20050205034905/http://www.hoppala.com/

Ekran görüntüsü de şu şekilde:

Anlayacağınız üzere bir önceki adreste yer alan * ifadesi tüm kayıtlar anlamına geliyordu. Şimdi ise bir zaman damgası (timestamp) var. Bu formatı ezberlemenize hiç gerek çok açıkçası, kısaca gün-ay-yıl-saat-dakika-saniye, daha doğru bir formatla YYYYMMDDhhmmss şeklinde.

Şimdi sayfanın kaynağını inceleyelim. Ctrl + U veya Mac kullanıyorsanız Option + Command + U kısayoluyla hızlıca açabilirsiniz. Sayfanın üst kısımlarında Wayback Machine’in kendi kodları olduğunu göreceksiniz, onları atlayalım. Kaydedilmiş sitenin, resimlerinin kayıttan çağrıldığı kısımdaki URL’lerinde bir farklılık göreceksiniz.

Adres şu şekilde:

https://web.archive.org/web/20070614035910im_/http://www.hoppala.com/images/index_03.gif

Görüldüğü gibi, zaman damgası kısmının sonunda bir flag var. Bu onun bir resim olduğunu gösteriyor. Şimdi o flag’le ve o flag’i silerek resme gidelim:

Flag’i sildiğimizde normal bir sayfa gibi açıldı ve Wayback Machine’in çerçevesi de eklendi. Buradan aklınıza şu gelebilir: getirilen bir sayfanın zaman damgasının sonuna im_ eklediğimizde o sayfada Wayback Machine çerçevesi çıkmayacak ve normal bir siteymiş gibi link verebileceğiz. Bu yöntem çalışıyor, ama doğru bir yöntem sayılmaz. Bunun için farklı flag’leri var Wayback Machine’in. Şimdi onları bir tablo olarak vereyim:

Anlayacağınız üzere bir sayfayı getirirken id_, if_ veya fw_ flag’ini kullanmanız, çerçeveyi göstermemek için uygun olacaktır.

Flag’lerin tam listesine Wikipedia’daki şu adresten eriştim. Belki orada işinize yarayacak başka bilgiler de bulursunuz.

On altılı sayı sistemini bildiğinizi umuyorum. Fakat bilmeyenler için yine de üstünden geçelim. Günlük hayatta kullandığımız sayı sistemi 10’luk sistemdir ve decimal olarak adlandırılır. 10 adet rakamdan oluşur, bunları biliyorsunuz: 0, 1, 2, 3, 4, 5, 6, 7, 8 ve 9. Bunun yanı sıra bilişimin temeli olan ikili sayı sistemi (binary) vardır. İkilik sistemde ise iki adet rakam vardır: 0 ve 1. Tüm sayılar bu sistemde 0 ve 1 ile gösterilir. Örneğin 13 sayısı binary olarak 1101 şeklinde yazılır. Bunun dışında octal adını verdiğimiz sekizli sayı sistemi vardır, bunda da 0’dan 7’ye kadar 8 adet rakam bulunur. 10’dan küçük olan sayı sistemlerini göstermemiz kolay, var olan rakamların bir kısmıyla gösterebiliyoruz. Fakat sayı sistemi 10’dan büyük olursa o zaman ne olacak? İşte on altılı sistem yani hexadecimal sistem bunun bir örneği. Rakamları şu şekilde:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, a, b, c, d, e, f

Dikkat ederseniz, 10’dan büyük “rakamlar” alfabedeki harflerin bir kısmıyla gösteriliyor. Burada rakam diyorum çünkü 16’lık sistemde 11, 12, 13, 14 ve 15, a, b, c, d, e sembolleriyle gösterilen birer rakam. Hexadecimal’in bir kısaltması olarak bu sistemdeki sayılardan bahsederken hex ismini kullanıyoruz. Harflerin büyük veya küçük olarak gösterilmesinde herhangi bir sorun yok.

Programlama dillerinde farklı sistemlerden sayılar farklı öneklerle gösterilir. Binary için 0b1000100, octal için 0o104 gibi bir kullanım varken hexadecimal için ise 0x44 gibi bir kullanım vardır. CSS ve HTML gibi dillerde hex formatındaki renk kodları # işaretiyle başlar. Farklı dillerde hex kodlarının 0x ile başladığını görebilirsiniz.

Şimdi renk kodlarını ele almaya başlayalım:

#000000

Bu hex renk kodu olarak ifade edilebilecek en küçük değer. Siyah rengin renk kodu.

#ffffff

Bu ise hex renk kodu olarak ifade edilebilecek en büyük değer ve beyaz rengi veriyor.

Tabloyla bazı renk kodlarını gösterelim:

Tabloya bakınca bir şey dikkatinizi çekmiş olmalı. Her ikişer basamak aslında temel renkleri simgeliyor ve buradan da anlaşılıyor ki aslında hex kodları RGB (red-green-blue) renk değerlerini yazmanın başka bir yolu. ff değeri decimal sistemde 255’e denk geliyor. Yani aslında 0 ile 255 arasında üçer farklı renk seçimi yapıyoruz.

RGB’de olduğu gibi farklı karışımlarla farklı renkler elde edebiliyoruz. Şu şekilde kırmızıyla yeşili karıştıralım:

#ffff00

Ortaya çıkan renk şöyle olacak:

Hex kodlarını 6 haneli olarak yazabileceğiniz gibi 3 haneli olarak yazmanız da mümkün. Daha dar bir skala sunsa da, temel renkler için kullanımı daha rahat olacaktır.

Hex kodlarındaki her değeri aynı tutarsanız grinin çeşitli tonlarını elde edeceksiniz:

Gri tonlar için #c0c0c0, #1b1b1b gibi ara değerler de kullanmanız mümkün.

6 haneli hex değerleri kullanırken sona 2 hane daha ekleyerek RGBA formatında kullanabilirsiniz, yani renge saydamlık özelliği verebilirsiniz. 3 haneli hex değerlerinde de bu doğal olarak 1 hane fazla olacak.

%50 opaklığa sahip, yani yarısaydam bir kırmızı renk şöyle bir renk koduyla oluşturulabilir:

#ff000088

#f008

Sanırım bu kadar yeterli.

Dün biraz Brainfuck öğrendim. Uzun zamandır aklımdaydı aslında. Youtube’a ismini yazıp, geçmiş aramalardan görerek hatırlayabilmek istiyordum fakat Youtube, üzerine vazife olmadan brainfuck kelimesini sansürlüyor. Böyle zırva özellikleri kapatamıyorsun da.

Brainfuck bir ezoterik programlama dili olarak geçiyor. İleride ezoterik programlama dillerini konu alacağım bir yazı olacak. Aslında birçoğu için parodi programlama dili daha uygun bir isim olabilirdi. Brainfuck’ın oluşturulmasındaki temel amaç, en küçük boyuttaki derleyiciye sahip olan bir dil yaratmak. Brainfuck o kadar temel kurallara sahip ki, dili öğrendikten sonra derleyicisini veya yorumlayıcısını kodlamayı birçok insan başarabilecektir. Kendisi turing-complete bir dil, bu da demek oluyor ki bu dil ile teorik olarak tüm problemleri çözebilecek programlar yazılabilir.

Brainfuck dilinin teorik kısmını öğrenmek çok basit aslında, vakit alacak olan kısım dilin yapısı gereği geliştirilmek durumunda olan algoritmalar. Şimdi hafif hafif dilin yapısına giriş yapalım.

Brainfuck dili sekiz tane karakterden oluşuyor. Bu ifadeler: <>+-[]., şeklinde. Bunlar dışında dosyaya yazılacak herhangi bir karakter görmezden geliniyor ve bir nevi yorum satırı görevi görüyor.

Brainfuck diliyle kodlama yaparken yaptığımız esas işlem aslında hafızayı manipüle etmek. Elimizde herbiri birer Byte taşıyan, 30000 adet hafıza bloğu yer alıyor. Biz bu hafıza şeridi üzerinde ileri geri giderek içlerinde olan değerleri arttırıp azaltıyoruz. Bunun dışında çıkmak için tek koşulun bulunduğumuz hafıza bloğunun içindeki değerin 0 olması olduğu döngüler yazabiliyoruz ve çıktı alıp girdi verebiliyoruz.

Aslında bahsettiğim şu operatör karakterlerine bakarak neyin ne için kullanılacağını aşağı yukarı anlayabilirsiniz. Şimdi bir tablo ile detaylandıralım:

Şimdi insan der ki, “e hocam, burada yalnızca bu karakterler var. Elimizde metne benzeyen hiçbir şey yok”. Doğru. İnsanın doğal olarak aklına şu geliyor: “bir hello world örneği yazsak, nasıl yazacağız?”.

Brainfuck dilinde girdi ve çıktı sözkonusu olduğunda hücrelerin değerleri birer ASCII karakteri olarak yorumlanıyor. Örneğin üzerinde bulunduğumuz hafıza bloğunun değeri 65 olduğunda, . karakteriyle ekrana A çıktısını basıyoruz.

Aslında Toys sayfasında bir ASCII tablosu oluşturmayı düşünüyorum, tercihen markdown kullanarak.

Gelecekten mesaj: Kodladım

Bunun yanında periyodik tablo, elektromanyetik spektrum, akor cetveli gibi farklı disiplinlerdeki farklı referans tablolarını da kodlayarak bu siteye eklemek gibi bir fikrim var. Şimdilik ASCII tablosundaki rakamları ve büyük ve küçük harfleri gösteren bir tablo oluşturayım buraya:

Python çok tatlı dil değil mi?

Şimdi Brainfuck’a geri dönelim. Boş bir programda bahsettiğim şu hafıza şeridi şu şekilde görünecektir:

| 0 | 0 | 0 | 0 | 0 | ...
  ^

Bilişimde Turing makinesi adlı bir konsept vardır. Bunun yapısı da ona oldukça benziyor. Akla gelebilecek ve teorik olarak var olabilecek her programı oluşturabilmeyi sağlamasının nedeni de bu. Tüm programlama dilleri çalıştığında birer turing makinesi oluşturur ve bu şekilde problemleri çözerler. Turing makinesini yalnızca fiziksel bir makine olarak düşünmeyin, soyut olarak da, emülasyon şeklinde de var olabilir. Fiziksel olarak da kullanılması mümkün elbette.

Turing makinesine de ileride bir yazıda değiniriz belki. Basitçe açıklamak gerekirse:

Turing makinesi konseptinde bir okuma kafası olur, makinenin ne yapması gerektiğini belirleyen komutları içeren bir geçiş tablosu olur ve teorik olarak sonsuz kabul edilen, teyp diyebileceğimiz bir hafıza şeridi olur. Makine bu şeritten okur, okuduğu değere göre bir eylem gerçekleştirebilir ve bu şeride bir değer yazabilir.

Bizim de burada, ^ sembolüyle gösterdiğimiz bir okuyucu kafa var. Bu bir pointer’dır, C’deki kullanımlarına da girebiliriz, şimdilik bu yazıda girmeyi düşünmüyorum. Pointer, bir değişkenin hafızadaki adresini tutar. Biz istediğimiz zaman o pointer’ı kullanarak o adrese erişebiliriz veya pointer’ın değerini değiştirerek pointer’ın işaret ettiği adresi kaydırabiliriz.

+ sembolünün, işaret edilen hücredeki değeri bir arttırdığını söylemiştim. Şimdi şöyle bir program yazalım:

+

Bu program çalıştığında hafıza blokları şu hali alacak:

| 1 | 0 | 0 | 0 | 0 | ...
  ^

Şimdi kafanın yeriyle oynayalım. Şöyle bir program yazalım:

>

Çalıştığında hafıza blokları bu şekilde olacak:

| 0 | 0 | 0 | 0 | 0 | ...
      ^

Tek yaptığı pointer’ı bir sağa kaydırmak oldu. Bunları bir arada kullanabiliriz.

+++++ > +++ > ++++ < -

Bu operatörler dışında hiçbir karakterin yorumlanmadığını söylemiştim, o yüzden daha anlaşılır gözükmesi için boşluklar ekliyorum. Şimdi bu kod çalıştığında yapı en son şöyle olacak:

| 5 | 2 | 4 | 0 | 0 | ...
      ^

Program başladığında bulunulan ilk hücrenin değerini 5 arttırdık, bir sonraki hücreye geçtik ve onu 3 arttırdık, bir sonraki hücreye de geçerek onu da 4 arttırdık. Sonra bir önceki hücreye geri dönüp onu bir azalttık.

Değerleri ASCII tablosunun sınırlarını aşmayacak şekilde istediğiniz gibi arttırabilirsiniz. Bu arada bu kodları denemek için herhangi bir Brainfuck interpreter’ı bulabilirsiniz. Hatta şuradaki gibi bir görselleştiriciyi de kullanabilirsiniz. Ben de bir tane kodlamayı düşünüyorum.

Gelecekten mesaj: Kodladım

Tabii gördüğünüz gibi bunları yazıyoruz, ama elimize bir şey geçmiyor. Şimdi ekrana artık bir şeyler basalım.

En basit şekilde A harfini şöyle basabileceğiniz aklınıza gelmiştir:

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ .

Hafıza blokları şu şekilde olacak:

| 65 | 0 | 0 | 0 | 0 | ...
  ^

Çıktı:

A

İlk hücreye 65 yazıldı ve en son . operatörüyle de ekrana ASCII tablosundaki 65 numaralı karakter olan A harfi basıldı. Bunu yapmayın tabii. Böyle saçmalık mı olur, yoksa programlamanın anlamı mı kalır?

Bunu optimize etmeden önce metnin geri kalanını ekrana basmanın yolunu da göstereyim. Yukarıdaki ifadeye +. eklediğinizde ekrana B karakteri de basılacak, yine +. eklediğinizde C de basılacak ve çıktı ABC olacak. Çünkü değer 65’ken basıldı, 66 oldu ve onun değeri de basıldı, son olarak da 67 oldu ve onun değeriyle beraber bu üçü ekrana basılmış oldu.

Bunu daha uygun bir şekilde yapmanın yolu elbette döngü kullanmak:

++++++++ [ > ++++++++ < - ] > + .

Hafıza:

| 0 | 65 | 0 | 0 | 0 | ...
      ^

Çıktı:

A

Bunu görünce Brainfuck’ın adına yakışır noktalara gelmeye başladığımızı düşünebilirsiniz. Aslında çok da büyük bir şey yapmadık, değiştirdiğimiz kısım yalnızca bir çarpma işleminden ibaretti. 8 ile 8’i çarpttık, son olarak da 1 ekledik ve 65’e ulaştıktan sonra değeri ekrana bastık.

65’e ulaşmak için herhangi iki sayıyı kullandım, siz daha farklı sayılar kullanabilirsiniz. İlk olarak ilk hücrenin değerini 8’e çıkartıyorum ve bir döngü başlatıyorum. Bu döngünün yaptığı şey aslında bir sonraki hücreye gidip orayı 8 arttırmak ve geriye dönüp ilk hücrenin değerini her adımda 1 eksiltmek. Her adımda 1 eksilterek o sayı kadar çalışmasını sağlıyorum. Yani ikinci hücrenin değeri 8 kere, 8 arttırılıyor, bu da çarpma demek zaten. Sürekli 1 azaltılan ilk hücrenin değeri 0’a ulaşınca döngüden çıkılıyor ve > operatörüyle ikinci hücreye gidip + ile 64 olan değerini 1 arttırarak . ile ekrana basıyoruz.

Bunu, sonucu ilk hücrede olacak şekilde hesaplamak isteseydiniz şöyle olurdu:

> ++++++++ [ < ++++++++ > - ] < +.

Hafıza:

| 65 | 0 | 0 | 0 | 0 | ...
  ^

Çıktı:

A

Özetle, şu formatta bir kod gördüğünüzde bunun, sonucu ikinci hücrede olacak olan bir çarpma işlemi olduğunu bilin:

{ilk_sayı_kadar_artı} [ > {ikinci_sayi_kadar_artı} < - ]

Buraya kadar öğrendiklerinizle, bir “hello world” uygulaması yazabilmeniz mümkün. Ben şöyle bir örnek oluşturayım:

>+++++++++[<++++++++++>-]<-.>+++[<+++++>-]<+.+++++.---.>+++[<--->-]<-.>++++[<++++>-]<+.

bf isimli Brainfuck yorumlayıcısına Debian temelli Linux dağıtımlarında apt ile ulaşabilirsiniz.

Input alma konusunda da çok kısa değineyim. Programda , kullandığınız yerde bir karakter girmeniz beklenir. Bu karakter alındığında karakterin ASCII değeri o an bulunulan hücreye yazılır.

Bu yazı bu kadar yeterli. Zaten yorgun kafayla yazdım, hatalar olabilir. Geleceğe selamlar, ben gidiyorum.

Brainfuck Yorumlayıcısı

p5.js kullanırken JavaScript yazmaya devam edebilirsiniz. Standart Canvas API yerine p5.js’i kullandığınızda oldukça hızlı işler ortaya çıkarabildiğinizi göreceksiniz. Yalnızca 2 boyutlu değil, 3 boyutlu işler de çıkarmanız mümkün. Benim de birkaç denemem olmuştu, bunlardan birini bu adres üzerinden görebilirsiniz. Belki onu da detaylıca inceleriz.

Bir oyun kütüphanesi kadar yüklü olmayıp, saf JavaScript kadar da temel işlemler için bize bağlı olmayan bir kütüphane olması oyun prototipleri geliştirebilmemiz için p5.js’i ideal kılıyor. Bu kütüphaneyi kullanarak birçok ıvır zıvır kodladım, bu, bu ve bu birkaç örnek. Yayınlamadığımda onlarca ufak tefek iş var.

Bu kütüphaneyi CDN üzerinden sayfanıza dahil ederek kullanabilirsiniz:

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>

Canvas elementini p5.js’in kendi içerisinde oluşturuyorsunuz, bu yüzden HTML sayfasında canvas elementine ihtiyacınız yok. Bir JavaScript dosyası oluşturarak kodlamaya başlayabilirsiniz.

Ancak biz burada p5.js için web üzerinden sunulmuş olan bir geliştirme ortamı olan p5.js Web Editor‘ü kullanacağız. Sayfayı açın ve incelemeye başlayalım. Bir üyelik oluşturursanız iyi olur, fakat bir şeyler kodlayıp kaydetmek için üyelik zorunlu değil.

Şimdi burada bazı bahsedeceğim kısımları işaretledim. Bende karanlık mod seçili. Bunu sağ üstteki 1 olarak işaretlediğim çark sembolüyle ayarlar penceresini açarak ayarlayabilirsiniz.

2 ile işaretlediğim butona tıkladığınızda, bu editörün aslında basitçe index.html, style.css ve sketch.js ismindeki üç dosyadan ibaret bir proje üzerinde çalıştığını göreceksiniz. Biz burada yalnızca önümüzde açık olan sketch.js‘i kullanarak p5.js ile oldukça sade bir şekilde kodlama yapabiliyoruz. Başlangıç için basit projelerde bu yeterli. İleride farklı objeleri farklı JS dosyalarında tutmak isteyebilirsiniz, resim gibi dosyalar eklemek isteyebilirsiniz. Bunun için açtığınız bu kenar çubuğunda dosya yükleme ve oluşturma seçenekleri mevcut.

3 ile işaretlediğim kısım anlayacağınız üzere projeyi başlatıp durdurmaya yarıyor. “Auto-refresh” seçeneğini yazdığınız an çalışmaya başlayacak ve butonlara tıklamanız gerekmeyecek. Ben hiç kullanma gereği duymadım. Bu kısmın hemen yanında dosya ismi belirlenen kısım mevcut, açtığınızda rastgele bir isim belirleniyor. Şimdilik bir önemi olmadığı için işaretlemedim.

4 ile işaretlediğim kısım da görüldüğü gibi kodları yazacağımız kısım. Açar açmaz en temel haliyle p5.js’in kullanımını görüyorsunuz. Odağımız bu kısımda olacak. Kenar çubuğundan başka bir dosyayı seçtiğinizde onun içeri de burada yer alacak.

5 ile işaretli kısım ise projenin önizlemesinin yer aldığı kısım. Eğer yukarıda yer alan play butonuna tıklarsanız burada gri bir kare çizildiğini göreceksiniz.

Bu arada sol altta da konsolu görüyorsunuzdur. Hata ayıklama yaptığımızda bastığımız değerler orada görünecek. Kendisinin developer tools’un konsolundan bir farkı yok.

Kodu incelemeye başlayalım. p5.js’i oyun kodlamak için kullanmayı öğretmeyi amaçladığımdan burada projeden “oyun” adıyla bahsedeceğim. setup() fonksiyonu oyun başladığı an bir kere çalışır ve ilk işlemleri yapmaya yarar. draw() fonksiyonu ise sürekli olarak çalışır. Amacı ekrana çizim yapmak olduğu için mevcut FPS değeri kadar sıklıkla çalışması gerekir. Oyundaki güncellemeleri de bu kısımda yapabiliriz. İleride belki update() adından bir fonksiyon ile hesaplamaları yaparak draw() fonksiyonunu yalnızca çizim yapması için rahat bırakabiliriz. Ben sürekli hızlıca prototip geliştirdiğimden işlemleri de draw() fonksiyonunda yapıyorum, fakat ciddi bir proje oluşturacağım zaman bu ayrımı yapmak daha iyi olur.

setup() fonksiyonunun içinde görüldüğü üzere createCanvas() fonksiyonu çağırıyor. Bu, bahsettiğim gibi bir canvas oluşturmaya yarıyor. Şimdi bu fonksiyonun parametrelerini 640, 480 gibi istediğiniz bir değerle değiştirin.

draw() fonksiyonunun içinde de background() isminde bir fonksiyon çağırılmış. Bu ise tüm canvas’ın arkaplan rengini belirlemeyi sağlıyor. Canvas API’dan yola çıkarsak, bunu tüm canvas’ı kaplayan bir dikdörtgeni boyamak gibi düşünebilirsiniz. Aldığı parametre ise 0 ile 255 arasında yer alıyor ve 0 siyahı, 255 ise beyazı temsil ediyor. Buna örneğin 75 gibi bir değer verelim.

Şimdi play tuşuna bastığınızda şöyle bir sonuç göreceksiniz:

Şimdi ekrana bir daire çizelim. Bunun için draw() fonksiyonunun içinde circle() fonksiyonunu çağıracağız. Kendisi şöyle parametreler alıyor

circle(x, y, yarıçap)

Bu tür görsel programlama uygulamalarında ekranın sol üst kısmı 0, 0 noktasıdır. Sola doğru x değeri artar, aşağı doğru y değeri artar. Bunu kendiniz örneğin terminal üzerinde çalışan görsel bir uygulama kodladığınızda daha iyi anlarsınız.

Şimdi, 50’ye 100 noktasında 75 birim yarıçapa sahip bir daire oluşturalım. draw() fonksiyonuna şunu yazın:

circle(50, 100, 75);

Çıktımız şu olacak:

Hadi bu arkadaşı boyayalım. Canvas’ı daima gerçek hayattaki bir tuval gibi düşünün, bunu bir şekli döndürmeyi anlattığımda daha güzel bir örnekle açıklayacağım. Canvas dediğimiz yapı üzerinde obje kavramı yoktur, yalnızca üst üste çizilen şekiller vardır ve o şekle sonradan ulaşmamız da mümkün değildir. Bu yüzden biz obje oluşturup, o objenin değerlerine göre şekiller çizeriz. Bunu anlatmamın nedeni ise boyamayla ilgili. Ekranda bir şeklin içini doldurabilir ve kenar çizgisini renklendirebiliriz. Bunu yapmak için önce gerçek hayattaki bir durumu gözünüzde canlandırın; fırçamızı bir renge batırıyoruz ve boyuyoruz. Fırçamızı başka bir renge batırana kadar fırçamız o renkte kalıyor.

Nesnenin içini doldurmak için fill(), dış çizgisini boyamak için stroke() fonksiyonlarını kullanıyoruz. Bu fonksiyonların parametreleri background() fonksiyonuyla aynı. İçi şeffaf olsun istiyorsak parametresiz bir şekilde noFill() fonksiyonunu, dış çizgisiz olsun istiyorsak yine aynı şekilde noStroke() fonksiyonlarını çağırıyoruz.

Şimdi circle() fonksiyonundan önce fill() ve stroke() fonksiyonlarını örneğin şu şekilde çağırın:

fill(50);
stroke(200);
circle(50, 100, 75);

Çıktı şöyle olacak.

Şimdiye kadar background(), fill() ve stroke() fonksiyonlarında yalnızca siyah ve beyaz arasında, yani grayscale renkler kullandık. Eğer tek parametre alıyorlarsa bu şekilde, üç tane parametre vererek RGB (red, green, blue) renkler kullanabiliriz. Daha sonradan çok daha fazla renk seçeneği kullanmamızı sağlayan color() fonksiyonundan bahsederiz.

fill() ve stroke() fonksiyonunun parametrelerini şunun gibi istediğiniz üç değerle değiştirin:

fill(100, 10, 10);
stroke(255, 20, 20);

Çıktı da şu şekilde:

Şimdi bazı değerleri değişken üzerinden kontrol ederek biraz hareket katalım. Tüm kodların en başında daireX adından bir değişken oluşturalım ve 50 değeri verelim. draw() fonksiyonu içerisinde de en altta bu değeri daireX++ diyerek birer birer arttıralım. Hatırlayacağınız gibi draw() fonksiyonu her karede sürekli çalışan bir fonksiyon. Son olarak da dairenin x parametresi olarak daireX değişkenini gönderelim. Kodların son hali şu olacak:

let daireX = 50;

function setup() {
  createCanvas(640, 480);
}

function draw() {
  background(75);

  fill(100, 10, 10);
  stroke(255, 20, 20);
  
  circle(daireX, 100, 75);
  
  daireX++;
}

Bunun da çıktısı şu olacak, bu resme özel hareketli olsun:

Şimdi draw fonksiyonunun başındaki background(75) ifadesini silerek bir şey deneyelim. Şöyle bir şey olacak:

Başlarda bahsettiğim bir konu vardı, canvas gerçek bir tuval gibidir. İsterseniz bir resim defterinin, eskiz defterinin sayfaları olarak da düşünebilirsiniz. Bir çizimi yaptıktan sonra başka bir sayfaya geçmeden, buradaki durumda ise o resmin üstünü kaplamadan başka bir şey çizerseniz o çizimin üstüne çizilir. Bu yüzden draw() fonksiyonunun başında bir arkaplan rengi belirliyoruz, yani o renkte bir dikdörtgenle canvas’ı kaplıyoruz ki yeni bir çizimi temiz bir şekilde çizebilelim. Bu tür, üst üste çizme yapısı örneğin bir çizim uygulaması kodladığımızda çok işimize yarıyor.

p5.js’in tanımladığı bazı değişkenler var. Şimdi bunlardan mouseX ve mouseY değişkenlerini göreceğiz. Ayrıca dikdörtgen çizmeye de değinelim. Ekrana dikdörtgen çizmek için rect() fonksiyonunu kullanırız. Bunun da aldığı parametreler şu şekilde.

rect(x, y, genişlik, [yükseklik])

Yükseklik parametresini köşeli parantez içine almamın nedenini çeşitli dökümantasyonları okuyorsanız anlamışsınızdır. Bu, isteğe bağlı bir parametre. Yüksekliği vermeden, yalnızca genişlik verdiğinizde genişlik ölçeğinde bir kare elde edeceksiniz.

Şimdi ben istiyorum ki, çizeceğimiz dikdörtgen mouse’u takip etsin. Şu şekilde mouse’un koordinatlarında çizilen, 100 birim genişliğe ve 50 birim yüksekliğe sahip bir dikdörtgen çizebilirsiniz:

rect(mouseX, mouseY, 100, 50);

Şimdi sildiğimiz background() fonksiyonunu tekrar ekleyelim de adama benzesin. Onun da ekran görüntüsünü eklemeyeyim artık.

Döndürme konusu biraz karışıktır. Şu kodların teker teker üstünden geçerek açıklayalım:

function setup() {
  createCanvas(640, 480);
}

function draw() {
  background(225);
  
  push();
  
  translate(200, 150);
  rotate(degrees(45));
  
  fill(120);
  rect(0, 0, 100);
  
  pop();
  
  
  fill(50);
  rect(400, 200, 90);
}

Çıktısı şu şekilde:

Bir kağıt üzerine kare çizdiğinizi düşünün. Fakat kareyi 45 derece döndürülmüş bir şekilde çizeceksiniz. Bunu yapmanın en iyi yolu kağıdı çevirmektir, bilirsiniz. Kağıdı 45 derece çevirirsiniz, kareyi çizersiniz ve kağıdı eski haline getirirsiniz. Canvasta da durum bu şekilde aslında. push() ve pop() fonksiyonları bir kapsayıcı görevi görüyor ve bu kağıdı çevirme gibi işlemleri sadece bir kısımda geçerli olacak halde kullanmayı sağlıyor. Döndürme işlemimizi bunların arasında yapacağız. translate() fonksiyonu x ve y olarak iki parametre alıyor ve canvasın origin noktasını değiştirmemizi sağlıyor. (0, 0) noktası bu origin noktası ve döndürme işlemi de bunun etrafında yapılıyor. Bu fonksiyona aslında ekrana çizeceğimiz şekli x ve y değerlerini gönderiyoruz ve (0, 0) noktası orası oluyor, ardından şekli çizerken de x ve y değerlerini 0 olarak giriyoruz. Origin noktasını değiştirdikten sonra rotate() fonksiyonu ile döndürme işlemini gerçekleştiriyoruz. p5.js açı değerlerinde varsayılan olarak radyan kullanır. Bu yüzden derece olarak göndereceğimiz açı değerini önce degrees() fonksiyonundan geçiriyoruz. İstersek setup() fonksiyonu içerisinde angleMode(DEGRESS) yazarak tüm açı değerlerini en baştan derece olarak, degrees() gibi bir fonksiyona gerek kalmadan kullanabiliriz. Ardından içini doldurarak dikdörtgeni ekrana basıyoruz ve söz ettiğim gibi (0, 0) değeri veriyoruz. Ancak dikdörtgen (200, 150) noktasına çiziliyor. pop() fonksiyonuyla da bu işlemi sonlandırdıktan sonra ekrana çizeceğimiz bir başka dikdörtgenin de döndürülmüş olmasını engelliyoruz.

Şimdi basit bir Flappy Bird oyunu yapmaya çalışalım. Kodları baştaki haliyle bırakıyorum, setup() ve draw() içerisindeki createCanvas() ve background() fonksiyonları dışında eklediğim her şeyi siliyorum.

Şöyle çok basit bir kuş resmi kullanalım:

https://img.icons8.com/plumpy/48/000000/bird.png

Bir resmi eklemek için öncelikle setup() fonksiyonu içerisinde loadImage() fonksiyonuyla resmi adresinden çağırmamız, sonra da kullanacağımız yerde image() fonksiyonuyla bastırmamız gerekiyor. Bu arada setup() fonksiyonu içinde de başta yapılacak tek seferlik çizimler yapılabilir, o kısım kafa karıştırmasın.

Bahsettiğim fonksiyonların parametreleri şu şekilde:

loadImage(URL)

image(resim_ismi, x, y, [genişlik], [yukseklik])

Resmi aşağıdaki şekilde ekledim:

let birdImage;

function setup() {
  createCanvas(640, 480);
  
  birdImage = loadImage('https://img.icons8.com/plumpy/48/000000/bird.png');
}

function draw() {
  background(225);
  
  image(birdImage, 100, 100);
}

Çıktı şu şekilde:

Resmi tam olarak bu şekilde kullanmayacağız. Bu sefer oyunu kodlayarak kısım kısım oyunun kodları üzerinden yorum satırları ile anlatmayı tercih edeceğim. Kodlar ise şu adreste. Oynanış açısından çeşitli bug’lar olabilir, biraz daha üzerinde uğraşılırsa düzelecektir.

// Oyunun başlayıp başlamadığı değerini tutmak için bir değişken oluşturuyoruz
let play = false;

// Kuşun aşağı düşebilmesi için bir yerçekimi değişkeni oluşturuyoruz
const gravity = 0.2;

// Kuşun özelliklerini ve eylemlerini derli toplu bir şekilde tutabilmek için bir obje içinde topluyoruz
const bird = {
  // Sprite, 2D oyun grafiklerine verilen isimdir
  sprite: {
    // Kuşun resmini çağırabilmek için src, resim çağrıldıktan sonra p5.js resim objesi olarak tutulabilsin diye img değeri ekledim ve başlangıç değerini null olarak belirledim
    src: 'https://img.icons8.com/plumpy/48/000000/bird.png',
    image: null
  },
  // Kuşun boyutları
  size: {
    width: 48,
    height: 48
  },
  // Kuşun canvas içindeki konumu
  positions: {
    x: 75,
    y: 200
  },
  // Kuşun dikey konumdaki hızı
  speedY: 0,
  // Kuşun sürekli olarak çalışacak güncelleme fonksiyonu
  update: function() {
    // Burada bir limit hız kontrolü var, kuşun hızı 8 birimi aşarsa 8'de sabit kalsın
    // aksi takdirde yerçekimi ivmesi sürekli olarak hıza eklensin
    if (this.speedY > 8) {
      this.speedY = 8;
    }
    else {
      // Kuşu yere doğru ivmeli bir şekilde çekiyoruz
      this.speedY += gravity;
    }
    
    // Hızı konuma ekleyerek konumu hıza göre değiştiriyoruz
    this.positions.y += this.speedY;
  },
  
  // Kuşun zıplamasını sağlayacak olan fonksiyon
  jump: function() {
    // Kuşun dikey hızını yukarı doğru 6 birim birden arttırıyoruz. Yerçekime doğru olan aşağı kısım pozitif olduğu için yukarı yönü negatif seçmek durumundayız
    bird.speedY = -6;
    
    // Oyunu başlat
    play = true;
  }
};

// Boruları tutacak olan dizi
let pipes = [];

// Boruları oluşturacağımız taslağı tutan constructor fonksiyonu
const Pipe = function(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  
  // Boruların her güncellendiğinde 4 birim sola kayması
  this.update = function() {
    this.x -= 4;
  }
}

// Oyunun biteceği durumlarda çalışacak fonksiyon
function gameOver() {
  play = false;
  
  // Game over uyarısı
  alert('Game over');

  // Boruların tutulduğu dizi boşaltılıyor
  pipes = [];
  
  // Kuşun pozisyonu ekranın ortalarına çekiliyor
  bird.positions.y = 200;
}

// p5.js'in setup() fonksiyonu
function setup() {
  createCanvas(640, 480);
  
  // Açı değerlerini derece olarak kullanacağımız için açı modunu derece yapıyoruz
  angleMode(DEGREES);
  
  // Kuşun resmini kendi içindeki URL'den seçerek, kendi içindeki objeye atıyoruz
  bird.sprite.image = loadImage(bird.sprite.src);
}

// p5.js'in draw() fonksiyonu
function draw() {
  // Eğer oyun başlamamışsa
  if (!play) {
    // Canvasın arkaplanı siyaha boyansın
    background(0);
    
    // Beyaz renkli, kenarlıksız, ortalanmış ve canvas'ın tam ortasında bir yazı yazılsın
    fill(255);
    noStroke();
    textAlign(CENTER);
    text('Jump to start', width / 2, height / 2);
    
    // draw() fonksiyonu buradan itibaren devam etmesin. play değişkeni true olduğunda bu kısım
    // çalışmayacak ve draw() fonksiyonu normal bir şekilde devam edebilecek
    return;
  }
  
  // color() fonksiyonu string olarak HTML renk kodlarını alabilir. Burada bir renk kodunu ismi ile kullandık
  background(color('skyblue'));
  
  // frameCount değişkeni oyunun başlamasından itibaren artar ve kaç adet frame geçildiğini tutar. Bu değer 80'in katları olduğunda çalışacak bir koşul yazıyoruz
  if (frameCount % 80 === 0) {
    
    // Burada temel olarak üst ve alt boru çiftini rastgele konumdaki açıklıklarıyla oluşturup boruların tutulduğu diziye ekliyoruz
    let pipeGap = random(100, 150);
    
    let topPipeLength = random(pipeGap, height - pipeGap * 2);
    
    pipes.push(
      new Pipe(width, 0, 50, topPipeLength),
      new Pipe(width, topPipeLength + pipeGap, 50, height - pipeGap - topPipeLength)
    );
  }
  
  // Kuşun kendi içindeki güncelleme fonksiyonunu çağırıyoruz
  bird.update();
  
  // Döndürme işlemi yapılacağı için push() ve pop() fonksiyonlarıyla işlemleri sarmalıyoruz
  push();
  
  // Döndürme noktasını kuşun ortasına getirdik
  translate(
    bird.positions.x - bird.size.width / 2, 
    bird.positions.y - bird.size.height / 2
  );
  
  // Kuşun hızı negatifse, yani yukarı doğru çıkıyorsa -30 derece dönsün;
  // değilse, aşağı düşüyorsa 10 derece dönsün
  if (bird.speedY < 0) {
    rotate(-30);
  }
  else {
    rotate(10);
  }
   
  // Kuşun resmini basıyoruz. translate() fonksiyonunda origin noktasını kuşun ortasına getirdiğimiz için
  // burada da kuşu kendi büyüklüğünün yarısı kadar geriden çiziyoruz
  image(
    bird.sprite.image, 
    -bird.size.width / 2, 
    -bird.size.height / 2,
    bird.size.width,
    bird.size.height
  );
  
  // translate() ve rotate() ile işimiz bitti
  pop();
  
  // Kuş aşağı ve yukarıda sınırları aşarsa oyun bitsin
  if (
    bird.positions.y > height ||
    bird.positions.y < bird.size.height
  ) {
    gameOver();
  }
  
  // Tüm boruları teker teker tarayalım
  pipes.forEach(pipe => {
    // Boruyu yeşilin bir tonuyla boyuyoruz
    fill(50, 120, 50);
    // Kenar çizgileri olmasın
    noStroke();
    // Boruyu çiziyoruz
    rect(pipe.x, pipe.y, pipe.width, pipe.height);
    
    // Boru hareket edebilsin diye kendi içindeki güncelleme fonksiyonunu çağırıyoruz
    pipe.update();
    
    // Eğer kuş boruyla çarpışmışsa oyunu bitir. Tüm borular için teker teker bu döngü çalışacağı için
    // kuş herhangi biriyle çarpışmışsa bu kısım çalışacak
    if (
      bird.positions.x > pipe.x &&
      bird.positions.y > pipe.y &&
      bird.positions.x < pipe.x + pipe.width &&
      bird.positions.y < pipe.y + pipe.height
    ) {
      gameOver();
    }
  });
}

// Herhangi bir tuşa bir kere basılmışsa
function keyPressed() {
  // Basılan tuş space veya yukarı ok tuşuysa
  if (key === ' ' || key === 'ArrowUp') {
    // Kuşu zıplat
    bird.jump();
  }
}

// Herhangi bir mouse butonuyla tıklanmışsa
function mousePressed() {
  // Basılan buton sol butonsa
  if (mouseButton === LEFT) {
    // Kuşu zıplat
    bird.jump();
  }
}

Son olarak oyunun çıktısını da şöyle vereyim:

Bu yazı da gittikçe uzadı. Geleceğe selamlar, hadi ben gidiyorum.

Bu girintileme seviyesini arttırabilmek için öncelikle Ctrl + Shift + P kısayolu ile komut paletini açın (Mac için Cmd + Shift + P). Ardından klavyenizde tuşlayarak Preferences: Open Settings (JSON) seçeneğini seçin.

Global ayarlar için kullanılan JSON dosyası açılacak. Buraya yeni bir değer ekleyeceğiz. Buradaki JSON objesine

"workbench.tree.indent": 30

gibi bir değer ekleyerek kaydettiğinizde girintilemenin arttığını göreceksiniz.

Yazmaya başladığınızda editör kendi de tamamlayacaktır. 30 yerine istediğiniz miktarı yazabilirsiniz, varsayılan değeri 8‘dir. Klasör ağacının yeni görünümü aşağıdaki gibi olacaktır:

Bu ayarlamayı JSON dosyasında değil de UI üzerinden de yapabilmeniz mümkün. Komut paletindeyken JSON’ı değil de Preferences: Open Settings (UI) seçeneğini seçtikten sonra, açılan sayfada üstteki arama kutucuğuna “tree.indent” yazdığınızda ilgili seçeneğin çıktığını göreceksiniz.

Terminali açarak şunu yazdığınızda, eğer terminaliniz 256 rengi destekliyorsa siz de bu sonucu alacaksınız:

curl -L git.io/nightstreet

Kaynak kodu da Github Gist üzerinde yer alıyor.

Daha önceden şu şekilde çalışmalar yapan bir eleman vardı, ondan esinlendim:

Kendisinin Github Gist adresini de vereyim.

Şimdi tek tek bunun nasıl çalıştığının üzerinden geçelim. curl, en basit tanımla uzak bir adresteki içeriğe erişmenizi sağlayan bir yazılımdır. Genelde HTTP istemcisi olarak kullanılsa da birçok protokolü destekler. Biz burada HTTP istemcisi olarak kullanıyoruz. cURL ile bir web sitesine terminal üzerinden bağlanabilirsiniz:

curl google.com

Görüldüğü gibi adrese bağlandı ve içeriği getirdi. Tabii burada bir sorun var, Google ana sayfasının HTML içeriği bu şekilde değil. cURL, bağlandığı adreste bir HTTP yönlendirmesiyle karşılaştı ve bu yönlendirmeyi takip etmedi. Bunu bizim belirtmemiz gerekiyor. Bunu -L opsiyonuyla gerçekleştireceğiz.

Şimdi olması gereken sonuç karşımıza çıktı.

Tekrar benim kodladığım örneğe dönelim. git.io, Github’a ait olan bir URL kısaltma servisi. Yalnızca Github üzerindeki URL’leri kısaltmayı sağlıyor. Resmi terminale basmak için bağlandığımız git.io adresi de bir yönlendirme içerdiği için -L opsiyonunu kullanıyoruz. Şimdi o bağlandığımız git.io/nightstreet adresine tarayıcı üzerinden gidelim. Karşımıza şöyle bir sonuç çıkacak:

Bu metin aslında doğrudan terminalimize gelen içerik. Terminal bu kodlamaları yorumluyor ve onları renkler gibi çeşitli görselleştirmelere dönüştürüyor. ANSI art dediğimiz şeyin arkasında da da bu var. Ona geçmeden önce bu içeriğin nerede tutulduğuna bakalım. Adresten anlayabileceğiniz üzere bu sayfa aslında doğrudan benim yazının başında da verdiğim, Github Gist üzerinde yer alan kaynak kodunun yalın olarak görüntülendiği sayfadan başka bir şey değil. Esinlendiğim kişinin kullanıcı adına da böyle ulaşmıştım.

Yalnız şu an fark ediyorum, Visual Studio Code üzerinde bu kodlamaları yaparken kullandığım eklentinin önizleme özelliği varmış. Ben yalnızca metin üzerinden renkleri görerek kodlamış, önizleme için ise basit bir Bash betiği yazmıştım.

O betik de dosyayı her güncellediğimde ekrana yeni halini basmaya yarıyor. Kendisi de şu adreste.

Yazının devamında ANSI kaçış (escape) karakterleri ve blok karakterlerinden bahsederken bu resmin de kaynak kodunu inceleyeceğiz.

Ben bu resmi kodladıktan sonra bunun aslında bu kadar uğraş gerektirmemesi gerektiğini düşündüm. Yazılımcı dediğin bir eylemi ikinci defa yapmaz, otomatize eder. Bundan dolayı terminal için çıktı üretecek bir pixel art editörü kodladım. Gerçek anlamda, tam donanımlı bir pixel art editörünü de ilerleyen zamanlarda kodlamayı düşünüyorum.

ANSI Art Painter

Bu editörden alacağınız çıktıyı veya kaydedeceğiniz dosyayı komut satırından cat komutu ile açtığınızda çizdiğiniz resmin terminale basıldığını göreceksiniz, tıpkı bu yazının kapak resminde olduğu gibi. Elbette bu editör ANSI’nin tüm nimetlerinden faydalanmıyor, blok karakterlerini hiç kullanmıyor diyebiliriz. Geliştirme aşamasının hızlı olması için bazı detaylardan feragat ettim, buna yazının devamında değinirim.

Artık ANSI art yazısına tam olarak başlayabiliriz. ANSI aslında American National Standards Institute ifadesinin kısaltmasıdır ve işi standartları belirlemek olan özel bir kuruluşun ismidir. ASCII gibi standartları da bu kuruluş belirlemiştir.

ASCII art’ı hepiniz bilirsiniz. ASCII art olarak örneğin şöyle bir şey çizmiştim:

               (   (  
                ) )   
               (_(    
               |__|   
           .    ||    
         /  \ ` ||-+  
       /      \   /|  
     /          \/ |  
    +-----------+/||  
    |  _    _   ||/|  
    | |_|  |_|  |  |  
    |  _    __  |  +  
    | |_|  |  | | /   
    |      |' | |/    
    +-----------+     
                      

Temel olarak her yazı karakterin birbiriyle aynı boyda olduğu fontlara sahip yerlerde bu karakterlerle yapılan resimler. Bu fontlara monospace adı veriliyor. ASCII art köken olarak 256 karakterlik ASCII tablosunu temel alsa da, zaman zaman sonrasında türeyen karakter kümelerindeki karakterler de kullanılabiliyor. Bak şimdi buna da ASCII art diyen var

̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡._

Aslında denmemesi lazım tabii.

ANSI art dediğimiz kavram ise buna benziyor, fakat kaçış karakterleri ile metni formatlama imkanı ve çok daha fazla karakter içeriyor. Örneğin şu blok karakterleri çok önemli: ░ ▒ ▓ ▉.

ANSI Art Bulletin Board System (BSS)’larda çok kullanılan bir yöntem. BBS, 1980’lerle 1990’larda yaygın olarak kullanılan, terminal üzerinden bağlanılan sistemlerin ismi. Web’in çok yaygın olmadığı, hatta var olmadığı zamanlarda kullanılan sistemler bunlar. Benim de çok ilgimi çekiyor, o dönemlerde o dünyanın içinde bulunmak isterdim açıkçası. Çocukken teletext dahi çok ilgimi çekerdi. Aslında teletext dahilinde de bir miktar ANSI art’tan söz edebiliriz. Belki bu yazının devamında teletext art’tan da biraz bahsederim.

BBS çok eski bir kavram olsa da, BBS konseptini halen sunan insanlar var. Bağlanmak için tek gereken ise bir Telnet istemcisi. BBS’lerle ilgili ileride bir yazı yazabilirim fakat şimdi örnek olarak bir BBS’e Telnet üzerinden bağlanalım ve orada da ANSI art kullanımını görelim:

ANSI Art çizebilmek için şu tarz uygulamalar mevcutmuş.

Fakat ben bunun temelinden öğretmeyi düşünüyorum, doğrudan kaçış karakterleri ile. Bu sayede bunları yazdığınız programların çıktılarında da kullanabilirsiniz.

Burada yazacak olduğumuz escape karakterleri içeren metinleri terminal üzerinde gösterecek olmanız yeterli. Bu da demek oluyor ki, istediğiniz herhangi bir dili kullanabilirsiniz, programın çıktısının ANSI kaçış karakterlerini içermesi yeterli. Hatta Unicode formatıyla tarayıcıların geliştirici konsolunda da kullanmanız mümkün. C’de printf(), Python’da print(), PHP’de (komut satırında çalıştıracağımızı unutmadan) echo kullanmak yeterli.

Biz bash komutlarından echo’yu kullanacağız. Fakat echo kullanırken kaçış karakterlerini kullanabilmek için -e opsiyonunu eklememiz gerekiyor. Bu opsiyon backslash’lerin (\) işlenmesini sağlıyor.

Şimdi bir örnek verelim ve bunun üzerinden gidelim. Şu komutu terminal üzerinde deneyebilirsiniz:

echo -e "\033[31mDelirmek üzereyim"

Çıktısı da şu şekilde olacak:

Kodun başında bir adet, bunun bir ANSI kaçış kodu olduğunu belirten kısım bulunuyor. Buna ESC karakteri deniyor ve bunun için birçok alternatif var. \033 olabilir, onun hexadecimal (on altılık) karşılığı olan \0x1b olabilir, \e olabilir veya bahsetmiş olduğum Unicode’u sembolize eden \u001b olabilir. Genel olarak işletim sistemlerinde yaygın olarak kullanılan hali \033 şeklinde.

Sonrasında biraz sinir bozucu bir şekilde gelen [ karakteri var. Sinir bozucu, çünkü bu kapanmayacak. Buna bu yüzden bir parantez açılış karakteri gibi bakmamak lazım. Sonrasında ise asıl yoğunlaşacağımız kısım, renk kodu geliyor. 31 kırmızıyı simgeliyor. Bu kodları tablo olarak göreceğiz. Son olarak da bir m harfi orada kaderine terk edilmiş bir şekilde bekliyor. Format bu. Dinamik kısım üçüncü ele aldığımız kısım. Bu kısım tek bir koşul içermek zorunda değil, birden biçim ifadesi ; karakteriyle ayrılarak yan yana yazılabilir. Şimdi bir tablo ile bu önplan renklerini gösterelim.

Hadi bir de arkaplan renkleri için deneyelim. Aşağıdaki ifade kırmızı bir arkaplana sahip bir metin gösterecek.

echo -e "\033[41mÇiğköfteyi mantıklı bulmuyorum"

Arkaplan renk kodları için de gerekli kodların tablosu da şu:

İki kodu beraber kullanabileceğimizi söylemiştim.

echo -e "\033[045;031mBir kilo domates mantıken 1000 domates demektir"

Korkunç bir göz infazı oldu sanki.

Önceki yazdığımız kodlarda bir eksik var. Söz konusu kodları kullandığımızda yazının geri kalan tüm kısmı da aynı şekilde stillendirilecek. Bu yüzden aslında bir kapanış ifadesine ihtiyacımız var. Stili sıfırlamak için \033[0m kodunu kullanıyoruz.

echo -e "\033[035mBu bir\033[0m Bu iki"

Şimdi de diğer stillendirme komutlarına bakalım. Bunlarla yazıyı kalın, ince, italik, yanıp sönen hale getirebiliriz.

Bunlardan benim en ilgimi çeken yanıp sönme kodu oldu. Arkaplan ile beraber kullanalım:

echo -e "\033[05;41mCiğerimiz kalmamıştır"

Buraya kadar öğrendiklerinizle boşlukları bu birkaç renk ile arkaplan renklendirmesi kullanarak renklendirebilir, daha detaylı kısımlar için ise blok karakterini önplan renklendirmesi ile renklendirebilirsiniz. Kodladığım şu ANSI Art Painter uygulamasında yalnızca boşlukları renklendiriyorum ve her kare için iki boşluk kullanıyorum. İki boşluk neredeyse bir kare boyutuna denk geliyor.

Komutu ekrana bastırdığınızda ekrandaki önceki karakterlerin silinmesi için ise şu kodu kullanabilirsiniz:

\033[H\033[J

Basitçe açıklamak gerekirse; \033[H ifadesi imleci ekranın sol üst köşesine getiriyor, \033[J ifadesi ise imleçten ekranın sonuna kadar olan kısmı siliyor. Bu H ve J karakterlerine CSI (Control Sequence Introducer) karakterleri, öncesinde gösterdiğim stillendirme ifadelerine de SGR (Select Graphic Rendition) parametreleri deniyor.

Yazı uzayıp gitmiş. Umarım şunu yazının geri kalanında açıklayacağım deyip de unuttuğum bir kısım olmamıştır. Şu an yazıyı baştan sona okumaya üşeniyorum, sonra bakarım. Belki sonraki yazacağım yazılardan birinde 256 renk kullanımına ve daha detaylı kullanımlara girerim. Geleceğe selamlar, hadi ben gidiyorum.

Regex sorgularını da yazılımcıların büyük çoğunluğu bu şekilde kullanıyor. Örneğin bir e-mail sorgulaması gerektiğinde bunun için bir Regex sorgusu aratarak bu sorunu çözme yolunu seçiyorlar. Ancak şunu belirtmekte fayda var, Regex yazmayı öğrendiğinizde birçok konuda işiniz çok kolaylaşacak. Bir metin içerisinde istediğiniz formata uyan her şeyi, dosya isimleri arasında istediğiniz formatta olanları seçip alabilecek, web sitelerinden çektiğiniz verileri ayıklayabilecek, bir dökümanda istemediğiniz kısımları silip sadeleştirebilecek, belki de bir dil için parser kodlayabileceksiniz. Üniversitede bir derste, dökümandaki fazlalık olan kısımları kullandığım metin editörü olan Sublime Text’in bul ve değiştir kısmındaki Regex seçeneğini aktive ederek ayıkladığımda, yanımdaki “bilgisayar mühendisi adayları” bana büyü yapıyormuşum gibi bakıyordu gfkjryjnok

Burada Regex’i anlatmaya regexr.com gibi bir web sitesi üzerinden başlamayı düşünüyorum. Daha sonradan programlama dillerindeki kullanımına geçerim. Normal şartlar altında ben daima gerçek hayattaki senaryolar üzerinden doğrudan anlatmayı seçerim fakat konu Regex olunca programlama dilleri üzerindeki yansıması pek bir farkı oluyor. Bu en başta öğreteceğim şekli ile Regex’i yine verimli bir şekilde kullanabilirsiniz. Tıpkı verdiğim örnekteki gibi bir metin editöründe yardımcı olacaktır. Veya Regex’i zaten kullandığınız programlama dilinde çalıştırmanın yolunu biliyorsanız bu sizin için sorun teşkil etmeyecektir. Ben Regex’i hiç kullanmamış olan insanların da anlamasını istiyorum, bu yüzden ilerleyen kısımlarda programlama dilleri üzerindeki kullanımlarına da değineceğim.

Regexr.com’u açtığınızda karşınıza şöyle bir görüntü çıkacaktır. Şimdi öncelikle temel kısımları açıklamakla başlayalım. İşaretlediğim kısımlardan 1 numaralı olan kısım Regex sorgusunu yazacağımız, yani metin içerisinde arama yapacağımız ifadeyi içeren kısım. 2 numaralı kısım ise içinde arama yapılacak olan metin. Gerçi bunu niye açıklıyorsam. Düşününce şimdi saçma geldi. Olsun, çoktan işaretledim bile. Tamam tamam, sıkılma emareleri gösterme okuyucum, bu yazıyı biraz kafam güzel yazıyorum da.

Öncelikle en basit senaryoyu ele alalım, hiçbir işimize yaramayacak olanı. Regex olarak dümdüz bir metin yazdığınızda bu doğrudan yazdığınız sorguyu metin içerisinde bulacaktır. Bu haliyle bir işe yaramasa da, karmaşık Regex sorguları içerisinde parça parça kullanacağınız için öğrenmeniz gerekiyor doğal olarak.

Ha, şeyi söylemeyi unutmuşum. Demin söylediğimin örneğini vereceğim de, ondan önce halihazırda yazılı olan sorguya bir bakalım:

([A-Z])\w+

Bunu ilerledikçe daha ayrıntılı olarak açıklayacağım fakat kısaca değinmem gerekirse bu büyük harfle başlayan ve birden fazla karakter içeren kelimeleri bulmayı sağlayacak olan bir Regex sorgusu. Buradaki parantezler baş harfleri ayrıca seçebilmemize yarıyor. Bu sorguyu parantez olmadan da yazabilirdik. Daha fazla foreshadowing yapmadan, spoiler vermeden giriş seviyesine geri dönelim.

Regex sorgusu olarak “expression” yazdık ve başımıza bu geldi:

Sorgunun başındaki ve sonundaki / (slash) karakteri bizim eklediğimiz bir şey değil. Bu JavaScript’te Regex tanımlamanın yolu. Çoğu dilde Regex sorguları çift tırnak işareti içine yazılır, Javascript’te ise slash’ler arasına yazılıyor. Sondaki “g” karakteri ise global anlamına geliyor. Sorguyu metinde bir defa değil, birden çok defa bulmak için kullanılıyor.

Şimdi kısaca temel Regex tanımlamalarının üzerinden geçelim.

Bunlar oldukça temel ifadelerden birkaçı. Şimdi bunları bir cheat sheet edasıyla değil de, detaylandırarak anlamaya çalışalım. Escape karakterleriyle kullanılanların anlamlarını tahmin etmek zor değil, \s space (boşluk), \w word (kelime), \d digit (rakam) ve \b de boundry (sınır) anlamına geliyor. Akılda tutmak için İngilizcelerini bilmek yeterli.

Regexr uygulamasında expression olarak

\s

yazdığınızda tüm boşlukların seçildiğini göreceksiniz.

\s+

yazdığınızda bir veya daha fazla boşluk yan yana ise bunların seçildiğini göreceksiniz. Aynısını diğer tüm ifadeler için deneyebilirsiniz.

Alttaki metnin içerisinde birkaç sayı yazarak

\d+

ile bunları seçebilirsiniz.

Boundry ifadesi bir kelimenin başlangıcını ve bitişini işaretleyerek, örneğin belirlediğiniz kurala uygun bir kelime seçebilmenizi sağlar. Kendisi doğrudan bir karakter seçmez, yalnızca sınırları belirler. Fakat bu ifadeyi kullanabilmek için öncelikle başka bir ifadeden bahsetmem gerekiyor.

Regex’te köşeli parantezler ile tek bir karakter seçebilmek için özel kurallar belirleyebilirsiniz. Sonrasında ise bu kuralları birden fazla yan yana karaktere uygulamanız mümkün. Şöyle göstereyim:

[a-z]

bu ifade tek bir küçük harfi seçer. Aşağıdaki gibi yazdığınızda ise yan yana olan küçük harfleri seçecektir:

[a-z]+

Büyük harfleri seçebilmek için de şöyle bir kullanım gerekiyor:

[A-Z]

Sayılar içinse şöyle bir şey:

[0-9]

Tabii buradaki aralıklar özelleştirilebilir. Örneğin siz harflerin A’dan Z’ye tamamını değil de, B’dan L’ye kadarını almak istiyorsunuzdur. Öyle bir şeyi neden isteyesiniz bilemem ama, çok spesifik durumlar doğabilir. Aynısı sayılar için de geçerli, 4-8 gibi bir seçim yapabilirsiniz.

Buradaki tüm kullanımlar bir arada kullanılabilir ve tek bir karakter için olasılıklarınızı arttırabilirsiniz. Örneğin büyük ve küçük harf fark etmeden seçmek için şunu yazmak yeterli:

[a-zA-Z]

Söylediğim gibi, bu tek bir karakter seçecektir. Şimdi Regexr uygulamasında harflerden oluşan tüm kelimeleri seçmeyi deneyelim:

[a-zA-Z]+

Karanlık teması olduğunu fark edince geçtim hemen. Şimdi, istiyorum ki yalnızca baş harfi büyük kelimeleri seçeyim. Bu durumda artık tek değil, iki koşuldan bahsetmemiz gerekecek: ilk harf ve kelimede geri kalan tüm harfler. İki adet köşeli parantez ifadesini yan yana kullanabiliriz:

[A-Z][a-z]*

Görüldüğü üzere, ilk harf için tek bir karakter seçtim. Hatırlarsanız asterisk (yıldız) işareti sıfır veya daha fazla karakter seçebiliyordu. Bir kelime yalnızca tek bir harften oluşabilir, “O” gibi.

Şimdi “e” ile başlayan ve “n” ile biten kelimeleri seçelim. Şöyle bir şey denemekle başlayalım:

e[a-z]+n

Tabii burada bir sorun var.

Ben yalnızca bütün olarak kelimeleri seçmek istiyordum fakat bu ifade kelimelerin içine girip parçalarına falan dadanıyor. İşte burada bounty kaçış karakterini (\b) kullanabiliriz. İfadeyi \b karakterlerinin arasına sandviç yaparsak sorunumuz çözülecektir.

\be[a-z]+n\b

Ancak bu koşula uyup, baş harfi büyük olanları da seçmek istiyoruz diyelim. Burada:

\b[E-Ee-e][a-z]+n\b

gibi mutant bir çözümde bulunabiliriz, ama yapmayalım onu. Çok da çirkin duruyor. Aslında köşeli parantezlerin içine istediğimiz harfleri tek tek yazmamız da mümkün. Örneğin şu şekilde bir ifade yazabiliriz:

[Ee]

Belki bunu öğrendikten sonra bu blog yazısının kapak resmindeki Regex ifadesinin hangi metinleri seçebileceğini anlamışsınızdır. Şimdi köşeli parantez değil de farklı bir yöntem kullanalım bunun için. Yeni bir operatöre değinelim.

”|” operatörü programlama dillerindeki “veya” operatörü gibi davranır. İki koşuldan hangisi uygunsa onu seçer. Ancak bunu kullanabilmek için sorgumuzu parantez içine almamız, yani gruplandırmamız gerekecek. Kısaca sadece bu kısma değinirsek şu şekilde olacak:

(E|e)

Şimdi bunu asıl sorguya eklersek:

\b(E|e)[a-z]+n\b

Bunun da ekran görüntüsünü koymayayım artık.

Bir kullanımdan daha bahsedelim. Eğer sonsuz değil de belirli sayıda karakteri seçmek istiyorsam, ifadenin yanında küme parantezleri kullanabilirim.

[a-z]{2}

şeklindeki bir kullanım yan yana iki küçük harf seçecektir. Soluna ve sağına \b karakterini ekleyerek iki harften oluşan kelimeleri seçebilirsiniz. Bu kullanımda tek bir sayı değil, bir aralık da belirtmeniz mümkün. İki, üç veya dört harften oluşan bir seçim yapmak istiyorsanız:

[a-z]{2, 4}

gibi bir kullanım yeterli olacaktır. Sanırım bu yazı için bu kadarlık yeter. Zaten yarısını başladıktan birkaç hafta sonra yazdım. Bu yazıyı bir serinin ilk yazısı olarak düşünüyorum ve bir sonraki Regex yazısında da metnin başı, metnin sonu, köşeli parantez içinde özel karakterlerin kullanımı, hariç tutma, gruplama gibi kısımlara değinirim muhtemelen. Genelde ilk olarak bunlar anlatılır fakat ben böyle bir yol çizmeyi tercih ettim. Geleceğe selamlar, hadi ben gidiyorum.

str = "Açmayın dedeler"
print(str.replace("d", "m"))

Hoş.

Jekyll kimi konularda sorun çıkarabiliyor tabii, örneğin tema olayına bakış açısını çok da beğenmedim. Standart bir kullanımı yok, birden fazla yolu var ve bu yollar genellikle çok temiz olmuyor. Kendim bir tema oluşturmayı düşünüyorum.

Toys sayfasında hobi olarak kodladığım, kodlarken eğlendiğim ve zevkle kodladığım ufak tefek uygulamalar ve oyunlar bulunuyor. Büyük altyapı gereksinimi duymayan, çalışması için yalnızca bir tarayıcı yeterli olan uygulamalar kodladığımda genelde oraya ekliyorum. Daha öncesinde kodladığım bunlar gibi daha çok örnek var fakat içlerinde ayıklama yaparak buraya eklemeyi daha uygun buldum.

Daha önce kodladığım GLSL örneklerini GLSL sayfasına ekledim, altına da ShaderToy‘a eklediğim hallerinin linklerini koydum. İleride oradaki örnekleri geliştirip, daha uygun hale getirerek, daha fazla örnek kodlamayı düşünüyorum. GLSL’in ne olduğu, nasıl başlanacağı ile ilgili yazılar da gelecek.

Pixel Art çizimlerimi de Pixel Art sayfasına ekledim. Şimdiye kadar eklediklerimin hepsini telefonda basit bir uygulamada çizmiştim. Genellikle uyuyamadığım geceler, metroda seyahat ettiğim zamanlar veya bir şeyi beklerken geçen zamanlarda çizmişim. Kullandığım uygulamanın ismi 8bit Painter ve gerçekten basit bir uygulama, her piksel için ayrı ayrı uğraşmam gerekiyor, kolaylık sağlayan bir aracı yok. Fakat telefonda bunu yapabildiğim için benim için pratik oluyor. Kendim bir piksel art uygulaması yazma çalışmalarına başlamıştım, hem mobilde hem web üzerinde çalışacak bir web uygulaması şeklinde.

Hakkında sayfasını ileride detaylı bir şekilde geliştirmeyi düşünüyorum.

Ha bir de Experimental isminde gizli bir sayfa var. Kendi geliştirdiğim bir Javascript kütüphanesini burada denedim.