Kart-On ve p5.js ile Kodlama
Kart-On ve p5.js ile Kodlama
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.
Kodlama Nedir?
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.
Kodlama Komutları
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.
Neden Resim Yaparız?
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.
