Kart-On İle Araba Çizimi

Kart-On İle Araba Çizimi

Çok basit bir araba çizimiyle başlıyoruz. Yalnızca üç şekil kullanacağız. Bunlar:

  • Gövde için bir dikdörtgen
  • Ön tekerlekler için bir daire
  • Arka tekerlekler için yine bir daire
Diyelim ki tekerleklerimizin mavi ve arabanın gövdesinin de turuncu olmasını istiyoruz. Son durumda, arabamız aşağıdaki gibi görünsün:
araba Elementor #66040

Önce elipsleri çizelim:
Doldur komutuyla mavi rengi oluşturmak için “220” ton değerini gireriz. Doldur komutunu kullanmak için, doldur komutunu “Komutlar” alanından “Kodlama” alanına sürükleyip bırakabiliriz.

İ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 yazıyoruz.

Ardından, “elips” komutunu Kodlama alanına sürükleyelim.

Bu aşamada kodu çalıştırdığımızda, kodumuzun sonucu resimdeki gibi görünecektir:

tekerlek 1 Elementor #66040

İ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.

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 elipsin çizimiyle birlikte, kodu çalıştırdığımızda aşağıdaki gibi bir görüntü oluşacaktır:

tekerlek 2 Elementor #66040

Şimdi turuncu bir dikdörtgen çizeceğimiz için doldur komutunu kullanabiliriz. Turuncu için ton değerini 40’a ayarlıyoruz.

“Konum” komutunu kullanarak, dikdörtgenin sol üst köşesini x=50, y=50 noktasında başlatıyorum. “Boyut” komutunun ilk girdisine 300 vererek şeklin genişliğini, ikinci girdisine de 150 vererek şeklin yüksekliğini ayarlayabiliriz.

Ardından dikdörtgen komutunu kullanarak, dikdörtgenimizi çizebiliriz.

Peki, bu kodları P5.js ile web’de nasıl yazabilirdik?

Benzer işlemleri p5.js kütüphanesiyle gerçekleştirerek, linkini kolayca paylaşabileceğimiz tasarımlar yapabiliriz. Bu çizim kütüphanesinin yirmi yıllık bir geçmişi ve yardımlaşmayı seven bir kullanıcı topluluğu vardır. Yaklaşık yirmi yıl önce, hızlı bir şekilde resim, animasyon ve başka görsel sanat ürünleri için kod yazabilmek amacıyla geliştirilen bu dil sayesinde birçok dijital eser üretildi. Seri içinde bu örneklerden bazılarını da paylaşacağız. Serinin bu ilk örneğinde, bir p5.js kodunun neye benzediğini göreceksiniz.

Kart-On ve p5.js ile Kodlama eğitiminin tüm konularına buradan ulaşabilirsiniz.

6'ıncı konuya buradan geçebilirsiniz.