ÇOCUKLARIN BİLGİ BANKASI KUMBARA DERGİSİ TÜRKİYE İŞ BANKASI’NIN ÇOCUKLARA ARMAĞANIDIR
KUMBARA DERGİSİ TÜRKİYE İŞ BANKASI’NIN ÇOCUKLARA ARMAĞANIDIR
ÇOCUKLARIN BİLGİ BANKASI KUMBARA DERGİSİ TÜRKİYE İŞ BANKASI’NIN ÇOCUKLARA ARMAĞANIDIR
KUMBARA DERGİSİ TÜRKİYE İŞ BANKASI’NIN ÇOCUKLARA ARMAĞANIDIR
p5.js kodu iki temel parçadan oluşur. setup() adındaki ilk parça tüm program için gerekli işlemleri başlatır. Bu kod parçası program ilk çalıştığında bir kez çalışır ve bir daha çalışmasına gerek kalmaz. setup() yani başlangıç kodunda, çizilecek ekranın boyutu, arka plan rengi gibi tek seferde ve en başta belirlenmesi gereken işlemler çalıştırılır. Sonra yazılacak kodlar da draw() kod parçası içinde yer alacaktır. Bu parça, ekranın her yenilenmesinde çalışarak sürekli bir döngü oluşturur.
Bir komut çağrılırken yanına ( ) işaretleri konur. Bu parantezlerin arasına bir girdi veriliyorsa, bu komutun o girdiyi kullanacağını söyleriz.
Örnekler:
→ fill(240, 100, 100) // Doldur komutunun karşılığıdır. HSL renk tanımına göre girdilerini alır.
→ rect(80, 40, 50, 100) //dikdörtgen, boyut ve konum komutlarını tek bir fonksiyonda birleştirir
Dilin fonksiyonlar içinde yazdığınız kodlar { } sembolleri arasında olmalıdır.
Örnekler:
→ setup( ){ }
→ Her komutu çağırdıktan sonra “;” işareti konmalıdır.
→ Javascript büyük harfe ve küçük harfe duyarlıdır.
→ Eğer programın içine çalıştırılmasını istemediğiniz bir yorum eklemek isterseniz, başına // koyarak satır boyunca yorumunuzu yazabilirsiniz.
Tüm bu kuralları serimiz içinde yineleyerek daha iyi anlayacak ve anımsayacaksınız.
Araba çizimi sırasında, beş temel p5.js fonksiyonu kullanacağız:
1- CreateCanvas() komutuna girdi olarak başlatmak istediğiniz ekranın genişlik ve yüksekliğini vermeniz gerekir.
2- Background() arkaplan rengini belirler.
3- Fill() komutu kendinden sonra gelen şekillerin rengini belirler.
4- Rect() komutu dikdörtgen çizer.
5- Ellipse() komutu elips çizer.
Kart-On ile Kodlama eğitiminin bu dersinde sizlerle birlikte araba çizimi yapacağız. Araba çizmek için yalnızca 3 şekil kullanacağız.
Önce elipsleri çizelim:
“Doldur” komutuyla mavi rengi oluşturmak için “220” ton değerini girelim. “Doldur” komutunu “Bloklar” alanından “Kodlama” alanına sürükleyip bırakalım.
İlk elipsimizin orta noktası yatay eksende 100 birim, düşey eksende de 200 birim ilerlediğimizde gördüğümüz nokta olacaktır. Bunun için “konum” komutunun ilk girdisine 100, ikinci girdisine ise 200 değerini yazalım.
Ardından, “elips” komutunu Kodlama alanına sürükleyelim.
Fark ettiyseniz, ikinci elipsimiz için “doldur” komutunu kullanmadık. Çünkü yeni bir “doldur” komutu gelene kadar tüm şekiller kendinden önce belirtilen rengi uygular.
İkinci elipsimiz için yatay eksende 250 birim ilerleyeceğiz. Dikey eksen aynı kalacak. Bunun için “konum” komutunun ilk girdisine 250 vereceğiz, ikinci girdisi ise 200 olarak kalacak.
İkinci elipsin çizimiyle birlikte, kodu çalıştırdığımızda aşağıdaki gibi bir görüntü oluşacaktır:
Şimdi turuncu bir dikdörtgen çizeceğimiz için “doldur” komutunu kullanabiliriz. Turuncu için ton değerini 40’a ayarlayalım.
Dikdörtgenin sol üst köşesini x=50, y=50 noktasında başlatıyoruz ve genişliği 300, yüksekliği 150 birimlik bir dikdörtgen çiziyoruz.
Uygulamayı masaüstü bilgisayardan yapabilirsiniz.
Kodlamayla resim yaparken saptadığımız komut sırası, şekillerin özelliklerini ve görünümünü belirler. Örneğin, önde mavi bir elips, onun arkasında da mavi bir dikdörtgen çizmek için aşağıdaki gibi bir kod oluşturabilirsiniz.
Şimdi komut sırasını bozmadan soldaki kutucuktaki komut bloklarını (Bloklar Alanı) teker teker sağdaki boş kutucuğa (Kodlama Alanı) taşıyın. Ardından da Kontrol Et tuşuna tıklayın.
Uygulamayı masaüstü bilgisayardan yapabilirsiniz.
Ördek çizimini pikseller üzerinde yapabilir misin? Renk değiştirmek için karelerin altındaki renk butonuna basabilirsin.
Uygulamayı masaüstü bilgisayardan yapabilirsiniz.
Kodlamayla resim ve animasyon yapacaksanız, bilgisayarlara hangi renkle çalışacağınızı bir şekilde tanımlamanız gerekir. Peki, renkleri bilgisayarların
anlayabileceği şekilde nasıl tanımlayabilirsiniz?
Öncelikle bilgisayarların kapasitesini anımsayın. Her ne kadar, video izlerken, oyun oynarken ya da ödeviniz için çeşitli kaynakları araştırırken aklınızdan çıksa da bilgisayarlar yalnızca sayılarla işlem yapan çok gelişmiş hesap makineleridir. Bu nedenle, bir rengi bilgisayar için tanımlamak istiyorsanız, o rengin matematiksel tanımını oluşturmanız gerekir. Bunun için kodlamada kullanılan tanımlardan birisi HSL renk tanımıdır.
HSL: Hue (ton), Saturation (Doygunluk), Light (ışık)
Bu renk tanımında, görebildiğiniz tüm renk tonlarını bir dairenin içine koyup, her rengi bu dairedeki konumuna göre tanımlarız. Dairenin 360 derece dönen yüzeyinde renklerin değişik tonları bulunur. Dairenin merkezinden dışa doğru ilerledikçe renkler giderek doygunlaşır. Parlaklığı da bu daireye eklenecek bir eksende
göstererek, doğadaki tüm renkleri temsil edebilirsiniz.
Şimdi küçük bir oyun oynayalım. “Renk Seçici”yi kullanarak, doğru H (ton), S (doygunluk) ve L (ışık) değerlerini bulup, aşağıdaki rengi oluşturabilir misiniz? Önce doğru HSL tanımını bulacak, sonra da “ONAYLA” tuşuna basacaksınız.
Uygulamayı masaüstü bilgisayardan yapabilirsiniz.
Bilgi bankanız Kumbara Dergisi olarak Koç Üniversitesi Mühendislik Fakültesi iş birliği ile sizlere geleceğin becerilerini kazandırma amacıyla kodlama eğitimine yeni bir seri ekliyor ve “Kart-On ve p5.js ile Kodlama” dizisine başlıyoruz.
Teknolojinin yaşamımızdaki yeri arttıkça kodlama öğrenmek daha da önemli ve gerekli oluyor. Sizlere geleceğin becerilerini kazandırmayı amaçlayan Kumbara Dergisi olarak Kart-On ile Kodlama dizisine başlıyoruz. Daha önce Scratch 3.0 ile animasyon ve oyun tasarlamayı, Arduino ile de kendi aygıtlarımızı yapmayı öğrenmiştik.
Bu kodlama eğitimi dizisinde de Kart-On ile p5.js uygulamalarını öğreneceğiz. Bu uygulamaların kodlama komutlarını kullanarak bilgisayarda etkileşimli resimler ve tasarımlar yapabilirsiniz. Düş gücünüzü kodlama becerilerinizle birleştirebileceğiniz bu eğitim dizisinde “Kart-On Nedir?”, “Kodlamada Renklerin Kullanımı”, “p5.js Nedir?”, “p5.js ile Araba Çizimi” gibi öğretici konular görecek, aynı zamanda keyifli zaman geçireceksiniz.
Etkileşimli resimleri, oyunları ve değişik programları bilgisayarda hazırlama işine kodlama denir. Yaratıcı programlamanın temellerini öğreneceğiniz ve çeşitli örneklerini keşfedeceğiniz bu kodlama eğitim dizisinde ilk olarak, şöyle bir etkinliğimiz var:
Aşağıdaki imlecin hızına göre fırçanın boyutu değişiyor. İmleci değişik hızlarda gezdirirseniz, ekranı sanatsal bir tuval olarak kullanabilirsiniz:
Uygulamayı masaüstü bilgisayardan yapabilirsiniz.
Bir bilgisayara resim yaptırmak istersek, resimde hangi renkleri kullanacağımızı, hangi şekli ekranda nereye yerleştireceğimizi, şekillerin hangisinin önde, hangisinin arkada olacağını belirtmeniz gerekir. Bunu da kodlama komutları vererek yapabiliriz. Kodlama komutları, bilgisayarların anlayabileceği en temel talimattır.
Örneğin, bir şeklin rengini belirlemek istersek, Kart-ON ile kodlama sırasında “doldur” komutunu kullanırsınız. “Doldur” komutu şeklimizin rengini belirler. Peki, bilgisayar hangi rengi seçeceğini nasıl bilebilir? Bu komuta 0 ile 360 arasında bir sayı verirsek kırmızıdan mora kadar her türlü rengi elde edebiliriz. Bu verdiğimiz sayı bilgisi kodlama komutudur.
“Neden sadece 0 ile 360 arasında değer girebiliyoruz?” diye mi soruyorsunuz? Bunun cevabını “Kodlamada Renklerin Kullanımı” konusunda vereceğiz.
Kodlamayla resim yapmak için iki farklı araç kullanacağız. Bu araçlar, kodlarımızı oluştururken bilgisayara isteklerimizi aktaracağımız çeşitli komutları içerir.
Kullanacağınız ilk araç, Kart-ON’dur. Kart-ON resim yaparken adımlarınızı tasarlamayı kolaylaştırır. Adımlarınızı Kart-ON ile tasarladıktan sonra, resim ve animasyon oluşturmanızı sağlayacak ikinci programa geçeceğiz. Ardından da bunları internette arkadaşlarınızla paylaşabilirsiniz.
Herkesin rahatça kullanabilmesi ve aklındaki çizimleri kodlayabilmesi hedefiyle oluşturulan Kart-ON, Koç Üniversitesi tarafından Akıllı Arayüzler Laboratuvarı’nda geliştirildi.Kart-ON’u bu seri içindeki uygulama kutucuklarında kodlayabileceğiniz gibi Android mobil uygulaması ile de kullanabilirsiniz.
Kart-ON ile uygulama geliştirmeyi öğrendikten sonra, p5.js Javascript kütüphanesini kullanmaya başlayacağız. Javascript bir programlama dilidir. Web sitelerinde çalışabilecek kodları yazmamızı sağlar. Kullanacağımız p5.js kütüphanesi web üzerinde çizim ve animasyonlar kodlayabilmemiz için geliştirilen Javascript komutları ile bize kolaylık sağlar. Bu serinin sonunda, p5.js kütüphanesini kullanarak tek bir web sitesi linki aracılığıyla tüm dünyaya yaratıcı çıktılarınızı gösterebileceğiniz programlar üreteceksiniz. Bu programları bilgisayarınızda, tabletinizde veya telefonunuzda görüntüleyebilirsiniz. Bu kütüphane ile neler yapabileceğini göreceğiniz bir seçkiyi burada görebilirsiniz.
Şimdi kullanacağımız Kart-ON arayüzü üç kısımdan oluşur. Soldan sağa doğru Komut Alanı, Kodlama Alanı ve Çıktı Alanı vardır. Komut alanında, kullanabileceğiniz tüm komutların listesini görebilirsiniz. Bu komutları, komut alanından kodlama alanına sürükleyerek, oluşturacağımız koda ekleyebilirsiniz. Kart-ON ile program oluştururken, komut blokları Kodlama Alanı içinde alt alta dizilir. Şimdi ilk denemenizi yapın ve Komut Alanı’nda gördüğünüz iki komutu Kodlama Alanı’na sürükleyin. Ardından “Kontrol Et” tuşuna tıklayın.
Doldur ve Dikdörtgen komutlarını art arda dizdiğinizde mavi bir dikdörtgen görürsünüz. “Doldur” komutunu Kodlama Alanı’nın dışına sürükleyip, silerek Dikdörtgen komutunu kodlama alanında tek başına bıraktığınızda gri bir dikdörtgen görürsünüz.
Doldur komutu kendinden sonra gelen şekillerin rengini belirler. Doldur komutuna verdiğiniz 240 girdisi de rengin tonunu belirler. Kart-ON komutları renklerin HSL tanımını kullanır. HSL tanımını öğrenmek için bir sonraki sayfaya geçin.
Uygulamayı masaüstü bilgisayardan yapabilirsiniz.
Haziran 1910’da Türkiye’de astronomi ve jeofizik çalışmalarının öncülerinden Fatin Gökmen yeni kurulacak rasathanenin müdürlüğüne getirildi. Fatin Bey ve ekibi, Kandilli Rasathanesi’nde 1 Temmuz 1911’den itibaren sürekli ve sistemli meteoroloji ölçüm ve kayıtlarına başladı. Uluslararası kabul edilen 7, 14 ve 21 saatlerinde günlük gözlemler yapıldı, deftere kaydedildi ve gerekli yerlere bildirildi.
