8.Sınıflar -> 1.-2. Hafta – Programlama (Small Basic- Grafikler)
Programlama (Small Basic- Grafikler)
Merhabalar! Yeni bir dönemin ilk haftalarında programlamanın son derslerini işleyeceğiz. Bu yazımızda sizlerle Small Basic uygulamasında grafiklerle çalışmaya başlayacağız. Bilmiyorum bu başlığı duymak sizleri heyecanlandırdı mı? Bu soruyu sormamım nedeni bundan önce Small Basic uygulamasında yazdığımız tüm kodları simsiyah bir ekranda çalışmış olmamız. Sadece ekranda metin veya sayılar vardı. Artık , daha eğlenceli ve görsellerle çalışacağımız bölüme geldik.
TextWindow nesnesi nasıl metinlerle ilgili işlemler yapmamızı sağlıyorsa , Small Basic uygulamasında şekillerle ilgili işlemler yapacağımız zaman kullanacağımız GraphicsWindow nesnesidir. Haydi o zaman bu nesnede çok sık kullanılan komutları şöyle bir tanıyalım.
GraphicsWindow.BackgroundColor : Ekranın arka plan rengini değiştirmemizi sağlar.
GraphicsWindow.Title : Ekrana bir isim vermemizi sağlar.
GraphicsWindow.Width : Ekranın genişliğini değiştirmemizi sağlar.
GraphicsWindow.Height : Ekranın yüksekliğini değiştirmemizi sağlar.
GraphicsWindow.Drawline : Ekrana çizgi çizmemizi sağlar.
GraphicsWindow.PenColor : Çizginin rengini değiştirmemizi sağlar.
GraphicsWindow.PenWidht : Çizginin kalınlığını değiştirmemizi sağlar.
Şimdi bu komutların nasıl uygulandığını örneklerle görelim.
|
ÖRNEK Çalışma ekranın arkaplan rengini mavi olarak belirleyelim. |
Yukarıdaki komut listesine bakarsak arkaplan rengini değiştirmek için GraphicsWindow.BackgroundColor komutunu kullanmamız gerektiğini görürüz. Bu komutun kullanılış şekli TextWindow.BackgroundColor komutuyla aynıdır. Komutu yazdıktan sonra seçtiğimiz rengin İngilizcesini yazıyoruz.
|
ÖRNEK Çalışma ekranın başlığını “İlk Uygulama” olarak belirleyelim. |
Yukarıdaki komut listesine bakarsak ekran ismini değiştirmek için GraphicsWindow.Title komutunu kullanmamız gerektiğini görürüz. Komutu yazdıktan sonra tırnak içinde ekran ismini yazmamız yeterli.
| Komut | Ekran Görüntüsü |
 |
 |
|
ÖRNEK Çalışma ekranın genişliğini 500 piksel , yüksekliğini 300 piksel olarak belirleyelim |
Yukarıdaki komut listesine bakarsak ekran genişliğini değiştirmek için GraphicsWindow.Width, ekran yüksekliğini değiştirmek için ise GraphicsWindow.Height komutunu kullanmamız gerektiğini görürüz. Komutu yazdıktan sonra sayı ile kaç piksel yapmak istiyorsak onu yazıyoruz.
| SIRA SİZDE! |
|
Hadi şekil çizmeye başlayalım. Şekil çizerken ekranın neresine şeklimizi çizeceğiz bu önemlidir. Çizim için ekrandaki x ve y değerlerini kullanırız. Peki ne demek bu x ve y değerleri. Ekranda yatay olarak olan eksen x ekseni , dikey olan eksene y ekseni denir. Ekranınızın sol üst bölümü başlangıç bölümüdür. Burada x ve ye değerleri 0 (sıfır) dır. Y değeri ekrandan aşağı doğru indikçe artar. En büyük y değeri ekranınızın yüksekliği kadardır. Mesela ekran yüksekliği 300 piksel ise en büyük y değeri 300’dür. Yatayda soldan sağa doğru gittikçe x değeri artar. En büyük x değeri ekranınızın genişliği kadardır. Mesela ekran genişliği 300 piksel ise en büyük x değeri 300’dür.
Ekrana bir çizgi çizeceğiniz zaman GraphicsWindow.Drawline komutu kullanılır. Bu komutu yazdıktan sonra parantez içinde çizgimizin başlangıç x ve y değerini , ve sonrada bitiş x ve y değerini yazmamız gerekir.
GraphicsWindow.Drawline ( x başlangıç,y başlangıç , x bitiş , y bitiş )
|
ÖRNEK Çalışma ekranına ; x başlangıç : 100 x bitiş : 300 y başlangıç : 150 y bitiş : 350 olacak şekilde bir çizgi çizelim. |
Örnekteki değerleri GraphicsWindow.Drawline ( x başlangıç,y başlangıç , x bitiş , y bitiş ) formüldeki yerine yazarsak aşağıdaki kodları yazmış oluruz ve ekran görüntüsü de yandaki gibi olur.
| Komut | Ekran Görüntüsü |
 |
 |
NOT : Yatay bir çizgi çizecekseniz başlangıç ve bitiş y değerleri aynı olur.
Dikey bir çizgi çizecekseniz başlangıç ve bitiş x değerleri aynı olur.
 |
 |
|
ÖRNEK
|
Örneği incelerseniz ilk basamak için Widht ve Height komutlarını kullanarak iki satır kod yazacağız. İkinci basamak için BackgroundColor komutu kullanılacak sarı dediği için Yellow yazmamız gerekecek. Üçüncü basamakta dikey dediği için x değerimizi değişmeyecek. Tam ortadan dediği için genişliğin tam yarısını alacağız 300 yarısı 150 olacak o zaman x değerimiz 150 , y değerine gelince en üsten başlayıp en aşağıya kadar inen bir çizgi olacak o zaman Y başlangıç 0 bitiş ise yükseklikle aynı olması gerekir o da 300 dür. Buna göre kodlar aşağıdaki gibi olacaktır.
| Komut | Ekran Görüntüsü |
 |
 |
| SIRA SİZDE! | |
|
 |
Kalemin rengi değiştirmek istersek GraphicsWindow.PenColor komutunu kullanıyoruz. Sadece hangi rengi istiyorsak onu tırnak içinde İngilizce olarak yazıyoruz. Kalemin kalınlığını değiştirmek için ise GraphicsWindow.PenWidht komutunu kullanıyoruz sadece kalınlık için sayımızı yazıyoruz. Haydi bir örnek yaparak konuyu pekiştirelim.
|
ÖRNEK
|
|
İlk basamak için Widht ve Height komutlarını kullanarak iki satır kod yazacağız. İkinci basamak için GraphicsWindow.PenWidht komutunu kullanıyoruz ve kalınlık 10 yazıyoruz. İlk çizgi rengi kırmızı onun için GraphicsWindow.PenColor komutunu kullanıyoruz ve red yazıyoruz. Çizgi çizmek için GraphicsWindow.Drawline komutunu kullanacağız. Yatay çizgi dediği için y değeri sabit. İlk çizgi için ben y değerini 100 olarak belirledim. x değerine gelince x başlangıcı da 100 belirledim. 300 piksellik bir çizgi istediği için x bitiş 100+300 = 400 olacak. İkinci çizgi için pencolor ve drawline kullandım yine. pen color da renk mavi olduğu için blue yazıldı. Drawline ‘da ise x değerleri aynı kaldı çünkü aynı boyutta çizgi çiziyoruz. Çizgiler arasındaki mesafe 100 olacağı için y değerine 100 ekledim yani y değeri 200 oldu. 3. çizgi içinde aynı işlemleri tekrarladım. Aşağıdaki komutları inceleyerek daha iyi anlayabilirsiniz.
| SIRA SİZDE! |
|
Sevgili meslektaşlarım bu dersin günlük planına Evraklar/Günlük Plan/ 8.Sınıf/2.dönem/ 1.-2.Hafta kısmından ulaşabilirsiniz. Menüye gitmek için tıklayın.
