Dil İşleme İçin Nihai Kılavuz Bölüm I: Temel Bilgiler

Yayınlanan: 2022-03-11

Can sıkıntısı ve yaratıcılığınızı kullanmak için kaşınıyorsunuz. Görsel olarak etkileyici, sanatsal bir şey inşa etmek istiyorsunuz. Ya da belki programlamayı öğrenmek ve mümkün olan en kısa sürede etkileyici bir şey yapmak istiyorsunuz. Eğer öyleyse, o zaman İşleme dili gitmenin yoludur.

Şimdiye kadar çalıştığım tüm programlama dilleri arasında İşleme, şüphesiz en eğlenceli olanlardan biriydi. Basit bir dildir - öğrenmesi, anlaması ve kullanması kolaydır, ancak çok güçlüdür. Sanki kod satırlarıyla boş bir tuvale resim yapıyormuşsunuz gibi. Yaratıcılığınızı sınırlayacak katı kurallar veya yönergeler yoktur, tek sınır hayal gücünüzdür.

İşleme Dili İçin Nihai Kılavuz Bölüm I: Temel Bilgiler

Üniversitede lise öğrencilerini toplayan ve onlara İşleme öğreten bir programın öğretim asistanıydım. Çoğunun güçlü bir programlama geçmişi yoktu, bazıları daha önce tek satır kod bile yazmamıştı. Sadece beş gün içinde dili öğrenmeleri ve kendi basit oyunlarını oluşturmaları bekleniyordu. Başarı oranı neredeyse yüzde yüzdü, nadiren başarısızlıkla karşılaştık. Bu yazıda, yapacağımız şey tam olarak bu. Tüm programı iki parçaya indirdim. İlk bölümde, dil hakkında konuşacağım. Temel bir genel bakış, İşleme için izlenecek yol ve bazı ipuçları ve püf noktaları vereceğim. Daha sonra bir sonraki bölümde adım adım basit bir oyun kuracağız, her adım detaylı olarak anlatılacak. Ayrıca oyunumuzun bir web tarayıcısında çalışabilmesi için p5js kullanarak oyunun kodunu JavaScript'e çevireceğim.

Çoktan Biliyor Olman Gereken Şey

Bu makaleleri anlamak ve kolayca takip etmek için temel programlama bilgisine sahip olmalısınız, çünkü programlama temellerinden bahsetmeyeceğim. Yine de çoğunlukla herhangi bir gelişmiş programlama kavramına dokunmayacağım, bu yüzden yüzeysel bir anlayış yeterli olacaktır. Nesne yönelimli programlama (OOP) gibi bazı düşük seviyeli fikir ve kavramlardan bahsettiğim bazı kısımlar var ama bunlar çok önemli değil. Bunlar dilin yapısıyla ilgilenen meraklı okuyucular içindir. Bilmek istemiyorsan, o kısımları atlayabilirsin. Bunun dışında sahip olmanız gereken tek şey bu harika dili öğrenme hırsı ve kendi oyununuzu yaratma hevesi!

Nasıl Takip Edilir

Ben her zaman deneyerek ve deneyerek programlama öğrenmekten yanayım. Kendi oyununuza ne kadar erken dalarsanız, İşleme konusunda o kadar hızlı rahatlayacaksınız. Bu benim ilk önerim olacak, her adımı kendi ortamınızda deneyin. İşleme basit ve kullanımı kolay bir IDE'ye (yani bir kod düzenleyici) sahiptir, takip etmek için indirmeniz ve yüklemeniz gereken tek şey budur. Buradan indirebilirsiniz.

O halde başlayalım!

İşlem Dili nedir?

Bu bölüm, dile, yapısına ve derleme ve yürütme sürecine ilişkin bazı notlara ilişkin kısa bir teknik genel bakış içerir. Ayrıntılar, programlama ve Java ortamı hakkında bazı ileri düzey bilgileri içerecektir. Şimdilik detayları dert etmiyorsanız ve kendi oyununuzu öğrenmek ve kodlamak için sabırsızlanıyorsanız, “İşlemenin Temelleri” bölümüne geçebilirsiniz.

İşleme, tabiri caizse kodlarla çizim yapmanızı sağlayan görsel bir programlama dilidir. Ancak, tam olarak kendi başına bir programlama dili değildir, “Java-esque” programlama dili dedikleri şeydir, yani dil Java platformunun üzerine inşa edilmiştir, ancak tam olarak Java değildir. Java tabanlıdır ve çalıştır düğmesine bastığınızda tüm kodunuz önceden işlenir ve doğrudan Java koduna dönüştürülür. Java'nın PApplet sınıfı, tüm İşleme çizimleri için temel sınıftır. Örnek vermek gerekirse, birkaç temel işlem kodu bloğunu ele alalım:

 public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

Bu kod blokları şöyle bir şeye dönüştürülecektir:

 public class ExampleFrame extends Frame { public ExampleFrame() { super("Embedded PApplet"); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

İşlem kod bloğunun Java'nın PApplet'inden uzanan bir sınıfla sarıldığını görebilirsiniz. Bu nedenle, varsa işleme kodunuzda tanımladığınız tüm sınıflar, iç sınıflar olarak kabul edilecektir.

İşlemenin Java tabanlı olması, özellikle bir Java geliştiricisiyseniz bize birçok avantaj sağlar. Sözdizimi yalnızca tanıdık olmakla kalmaz, aynı zamanda Java kodunu, kitaplıkları, JAR dosyalarını eskizlerinize gömme, Processing uygulamacıklarınızı doğrudan Java uygulamalarınızda kullanma, sınıfları tanımlama ve int gibi standart veri türlerini kullanma gibi şeyler yapmanıza olanak tanır. , float, char vb. Hatta kurmak için biraz zaman harcamak istiyorsanız Pocessing kodunuzu doğrudan Eclipse'den yazabilirsiniz. Yapamayacağınız bir şey, İşleme çizimlerinizde AWT veya Swing bileşenlerini kullanmaktır, çünkü bunlar İşleme'nin döngüsel doğasıyla çelişir. Ama merak etmeyin, bu yazıda o süslü şeylerden hiçbirini yapmayacağız.

İşlemenin Temelleri

İşlem kodu, kurulum ve çizim blokları olmak üzere iki ana bölümden oluşur. Kurulum bloğu, kod yürütüldüğünde bir kez çalışır ve çizim blokları sürekli çalışır. İşlemenin arkasındaki ana fikir , çizim bloğuna yazdıklarınızın programınız sona erene kadar saniyede 60 kez yukarıdan aşağıya yürütüleceğidir . Her şeyi bu fikirden yararlanarak inşa edeceğiz. Bu özelliği kullanarak nesnelerimizi hareket ettirecek, puanlarımızı tutacak, çarpışmaları tespit edecek, yerçekimi uygulayacak ve hemen hemen her şeyi yapacağız. Bu yenileme döngüsü, projemizin can damarıdır . Kodunuzu hayata geçirmek için bu kalp atışını nasıl kullanacağınızı ilerleyen bölümlerde anlatacağım. İlk olarak, sizi Processing IDE ile tanıştırayım.

IDE işleniyor

Bu noktaya kadar okuduysanız ve hala İşleme IDE'sini indirmediyseniz, lütfen devam edin ve yapın. Makale boyunca, kendi başınıza denemeniz için bazı kolay görevleri özetleyeceğim, yalnızca IDE'niz çalışır durumdaysa pratik yapabilirsiniz. İşte işleme IDE'sinin kısa bir tanıtımı. Çok basit ve açıklayıcı, bu yüzden kısa tutacağım.

Beklediğiniz gibi, çalıştır ve durdur düğmeleri önerdiklerini yapar. Çalıştır düğmesine tıkladığınızda, kodunuz derlenecek ve yürütülecektir. Doğası gereği, işleme programları asla sonlandırılmaz, sonsuza kadar çalışırlar ve rahatsız olana kadar çalışırlar. Programlı olarak sonlandırabilirsiniz, ancak yapmazsanız stop butonunu kullanabilirsiniz.

Çalıştır ve durdurun sağ tarafında kelebek gibi görünen buton hata ayıklayıcıdır . Hata ayıklayıcıyı kullanmak, ona ayrılmış başka bir makaleye ihtiyaç duyar. Bu makalenin kapsamı dışındadır, bu yüzden şimdilik görmezden gelebilirsiniz. Hata ayıklayıcı düğmesinin yanındaki açılır menü, mod eklediğiniz/ayarladığınız yerdir. Modlar size bazı belirli işlevler sağlar, Android için kod yazmanıza, Python'da kod yazmanıza izin verir, vb. Modlar da kapsam dışındadır, bu nedenle onu varsayılan Java modunda tutabilir ve yok sayabilirsiniz.

Kod düzenleyicideki pencere, çizimlerinizin normalde çalıştığı yerdir. Resimde boş çünkü boyut veya arka plan rengi gibi bir özellik ayarlamadık veya hiçbir şey çizmedik.

Kod düzenleyici hakkında konuşulacak fazla bir şey yok, sadece kodunuzu yazdığınız yer. Satır numaraları var (!) Processing'in eski sürümlerinde bu yoktu ve onları ilk gördüğümde ne kadar mutlu olduğumu tahmin edemezsiniz.

Aşağıdaki kara kutu konsoldur . Hızlı hata ayıklama amacıyla bir şeyler yazdırmak için kullanacağız. Konsolun yanındaki hatalar sekmesi, hatalarınızın görüneceği yerdir. Bu aynı zamanda Processing 3.0 ile gelen yeni ve kullanışlı bir özelliktir. Eski sürümlerde, hatalar konsola yazdırılıyordu ve bunları takip etmek zordu.

Kurulum Bloğu

Daha önce belirtildiği gibi, kurulum blokları program başladığında bir kez yürütülür. Konfigürasyonlar yapmak ve yalnızca bir kez çalıştırmak istediğiniz şeyler için, örneğin görüntü veya ses yüklemek için kullanabilirsiniz. İşte örnek bir kurulum bloğu. Bu kodu kendi ortamınızda çalıştırın ve sonuçları kendiniz görün.

 public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage("test.jpg")); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

Stil (arka plan, dolgu, kontur) ile ilgili yöntemler özellikler ve ayarlar bölümlerinde açıklanacaktır. Şimdilik bilmeniz gereken, burada belirlediğimiz ayar ve konfigürasyonların tüm taslağımızı nasıl etkilediğidir. Burada yazılan kodlar, çizim boyunca geçerli olan bazı temel kural kümelerini belirlemek için kullanılır. Bu bölümde ayrıca anlamanız gerekenler aşağıda listelenen yöntemlerdir:

size() - Adından da anlaşılacağı gibi, bu fonksiyon çizimimizin boyutunu yapılandırmak için kullanılır. Kurulum kodu bloğunun ilk satırında olmalıdır. Aşağıdaki şekillerde kullanılabilir:

  • boyut (genişlik, yükseklik);
  • boyut (genişlik, yükseklik, oluşturucu);

Genişlik ve yükseklik değerleri piksel cinsinden verilebilir. Boyut işlevi, çizimimizin hangi işleme motorunu kullanacağını ayarlamak için kullanılan oluşturucu adlı üçüncü bir parametreyi kabul eder. Varsayılan olarak, oluşturucu P2D'ye ayarlanmıştır. Kullanılabilir oluşturucular P2D (İşleme 2D), P3D (Eskizleriniz 3D grafikler içerecekse kullanılmalıdır) ve PDF (2D grafikler doğrudan bir Acrobat PDF dosyasına çizilir. Daha fazla bilgiyi burada bulabilirsiniz). P2D ve P3D oluşturucular, OpenGL uyumlu grafik donanımını kullanır.

fullScreen() - Processing 3.0'dan itibaren, size() işlevi yerine artık fullScreen işlevi kullanılabilir. Size() işlevi gibi, bu da kurulum bloğunun ilk satırında olmalıdır. Kullanım aşağıdaki gibidir:

  • Tam ekran();
  • fullScreen(ekran);
  • fullScreen(oluşturucu);
  • fullScreen(ekran, oluşturucu);

Herhangi bir parametre olmadan kullanırsanız, işleme çiziminiz tam ekranda çalışacak ve ana ekranınızda çalışacaktır. 'Display' parametresi, çiziminizin hangi ekranda çalışacağını ayarlamak için kullanılır. Örneğin, bilgisayarınıza harici monitörler bağlarsanız, görüntü değişkenini 2 (veya 3, 4 vb.) olarak ayarlayabilirsiniz ve çiziminiz orada çalışacaktır. 'Renderer' parametresi yukarıdaki size() bölümünde açıklandığı gibidir.

Ayarlar Bloğu

Bu, Processing'in yeni sürümüyle birlikte sunulan başka bir özelliktir. Kurulum ve çizim gibi bir kod bloğudur. Değişken parametrelerle size() veya fullScreen() yöntemlerini tanımlamak istediğinizde kullanışlıdır. Eclipse gibi Processing'in kendi IDE'si dışında herhangi bir ortam kullanıyorsanız, size() ve smooth() gibi diğer stil özelliklerini de bu kod bloğunda tanımlamanız gerekir. Ancak çoğu durumda buna ihtiyacınız olmayacak, kesinlikle bu makalede değil.

Blok çiz

Çekme bloğu hakkında konuşulacak özel bir şey yok, ancak onunla ilgili her şey özel. Beraberlik bloğu, tüm sihrin gerçekleştiği yerdir. Saniyede 60 kez atan programınızın kalbidir. Bu kod bloğu, tüm kod mantığınızı barındırır. Tüm şekiller, nesneler vb. buraya yazılacaktır.

Bu yazıda bahsedeceğimiz kodların çoğu çekme bloğundan olacak, bu yüzden bu kod bloğunun nasıl çalıştığını açıkça anlamanız önemlidir. Size bir gösteri yapmak için, deneyebileceğiniz bir şey var. Öncelikle print() veya println() yöntemlerini kullanarak konsola herhangi bir şey yazdırabileceğimizi unutmayın. Yazdırma yöntemleri yalnızca konsola yazdırır, ancak println yazdırır ve sonuna yeni bir satır ekler, böylece her println() ayrı satırlarda yazdırır.

Bu nedenle, aşağıdaki kod bloğuna bir göz atın. İlk önce konsolda ne yazdıracağını tahmin etmeye çalışın. Ardından, devam edin ve deneyin:

 void setup(){ } void draw(){ int x = 0; x += 1; print(x+" "); }

“1 2 3 4…” tahmin ettiyseniz, sizi yakaladım! Bu, İşlemedeki karışıklıklardan biridir. Bu bloğun tekrar tekrar yürütüldüğünü hatırlıyor musunuz? Burada bir değişken tanımladığınızda, her döngüde tekrar tekrar tanımlanır. Her yinelemede x, 0'a ayarlanır, 1 artırılır ve konsola yazdırılır. Bu nedenle “1 1 1 1…” sonucunu elde ederiz. Bu örnek biraz açıktı, ancak işler biraz karmaşıklaştığında kafa karıştırıcı olabilir.

x'in üzerine yazılmasını istemiyoruz, peki bunu nasıl başarıp “1 2 3 4…” sonucunu elde edebiliriz? Global değişkenleri kullanarak . Bu hiç hoş değil, değişkeni yalnızca çizim bloğunun dışında tanımlarız, böylece her yinelemede yeniden tanımlanmaz. Ayrıca, eskiz boyunca değişkenin kapsamına erişilebilir olacaktır. Aşağıdaki koda bakın:

 int x = 0; void setup(){ } void draw(){ x += 1; print(x+" "); }

Kendinize şunu soruyor olabilirsiniz, bloklarımızın dışında tanımlanan bir değişken nasıl çalışabilir? Ve başlangıçta bir kez çalıştırıldığı için neden setup() bloğunu kullanmadık? Cevap nesne yönelimli programlama ve kapsamlarla ilgilidir, aşina değilseniz bu paragrafı atlayabilirsiniz. İşleme kodunun Java'ya nasıl dönüştürüldüğünü açıkladığım bölüme bakın. Java sınıfına nasıl sarıldıklarını hatırlıyor musunuz? setup() ve draw() bloğunun dışına yazdığımız değişkenler de sarılır, bu nedenle kodumuzu saran dış sınıfın alanları olarak kabul edilirler. x+=1 kullanmak, this.x+=1 kullanmakla aynıdır. Bizim durumumuzda da aynı işlevi görür, draw() kapsamında x adında bir değişken tanımlanmaz ve bunun kapsamı olan bir dış kapsam aranır. Ve neden x değişkenimizi setup() bölümünde tanımlamadık? Bunu yapsaydık, x'in tanımlandığı kapsam setup işlevinin kapsamı olurdu ve buna draw() bloğundan erişilemezdi.

Şekiller ve Metinler Çizim

Artık kurulum bloğunu kullanarak çizimimizi nasıl yapılandıracağımızı biliyoruz ve çizim bloğunun ne yaptığını biliyoruz. Bu yüzden biraz görselleşmenin ve işlemenin eğlenceli kısımlarını öğrenmenin zamanı geldi: şekiller nasıl çizilir.

Başlamadan önce, koordinat sistemini anlamalısınız. Processing'de ekrana çizdiğiniz her nesnenin koordinatlarını siz belirlersiniz. Koordinat sistemi piksel cinsindendir. Başlangıç ​​noktası (yani başlangıç ​​noktası) sol üst köşedir, o noktaya göre koordinatlarınızı vermelisiniz. Bilmeniz gereken başka bir şey de, her şeklin farklı bir referans noktasına sahip olmasıdır. Örneğin, rect(), bir referans noktası olarak sol üst köşesine sahiptir. elips() için merkezdir. Bu referans noktaları, özellikler ve ayarlar bölümünde anlatacağım rectMode() ve ellipseMode() gibi yöntemlerle değiştirilebilir. Daha iyi anlamanıza yardımcı olmak için örnek bir şekil verilmiştir.

Bu makale, İşleme'ye temel bir genel bakış niteliğindedir, bu nedenle tepe noktaları veya 3B şekiller gibi karmaşık şekillere dokunmayacağız. Temel 2B şekiller aslında kendi oyunumuzu yaratmamız için fazlasıyla yeterli olacaktır. Şekilde şekillerin nasıl çizildiğinin örneklerini görebilirsiniz. Her şeklin oluşturulacak kendi sözdizimi vardır, ancak temel fikir, koordinatlarını veya boyutlarını veya her ikisini birden vermektir. İşte aşina olmanız gereken bazı şekiller (aşağıda verilen tüm değerler için, 'x' ve 'y' piksel cinsinden x ve y koordinatları anlamına gelir, 'w' ve 'h' ayrıca piksel cinsinden genişlik ve yükseklik değerleri anlamına gelir):

point() - Basit nokta, sadece tek bir koordinata ihtiyaç duyar. Kullanım:

  • nokta(x, y)
  • point(x, y, z) - 3 boyut kullanıyorsanız.

line() - Bir satır oluşturmak için. Yalnızca başlangıç ​​ve bitiş noktası olan bir çizgi oluşturabilirsiniz. Kullanım:

  • satır(x1, y1, x2, y2)
  • line(x1, y1, z1, x2, y2, z2) - 3 boyut kullanıyorsanız.

üçgen() - Bir üçgen oluşturmak için. Kullanım: üçgen(x1, y1, x2, y2, x3, y3)

quad() - Bir dörtgen oluşturmak için. Kullanım: dörtlü(x1, y1, x2, y2, x3, y3, x4, y4)

rect() - Bir dikdörtgen oluşturmak için. Referans noktası varsayılan olarak sol üst köşedir (şekle bakın). İşte kullanım:

  • doğru(x, y, w, h)
  • rect(x, y, w, h, r) - 'r' köşeleri yuvarlatmak için piksel cinsinden yarıçap anlamına gelir.
  • rect(x, y, w, h, tl, tr, br, bl) - Sırasıyla sol üst, sağ üst, sağ alt, sol alt köşeler için yarıçap. Bu da piksel cinsindendir.

ellipse() - Bir elips şekli oluşturmak için. Bu da daire oluşturmak için kullanılır, aynı genişlik ve yükseklik değerleri verilmelidir. Bu şeklin referans noktası varsayılan olarak merkezdir (şekle bakın). İşte kullanım:

  • elips(x, y, w, h)

arc() - Bir yay çizin. Kullanım:

  • arc(x, y, w, h, start, stop) - 'start' ve 'stop', yayı çizmeye başlamak ve durdurmak için açıyı belirlemek için kullanılır. Değerler radyan cinsindendir. “PI, HALF_PI, QUARTER_PI ve TWO_PI” gibi sabitler kullanılabilir.
  • arc(x, y, w, h, start, stop, mode) - 'mode' değişkeni, yayın (string) oluşturma stilini belirlemek içindir. Mevcut seçenekler “OPEN, CHORD, PIE”dir. OPEN, çizilmemiş kısımları kenarlıksız bırakacaktır. CHORD, çizilmeyen kısımları bordür ile tamamlayacaktır. PIE, yayınızın bir pasta grafiği gibi görünmesini sağlayacaktır.

Metinleri ekranda görüntülemek, şekilleri göstermeye benzer, temel fikir, metninizin görüntülenmesini istediğiniz bir koordinat belirlemenizdir. Ancak metinleri işlemek için daha fazlası var. Ayarlar ve özellikleri nesnelere nasıl uygulayacağınızı öğreneceğiniz özellikler ve ayarlar bölümünden sonra metinleriniz üzerinde daha fazla kontrole sahip olacaksınız. Şimdilik, metinleri görüntülemenin temellerini göstereceğim. Bunu yapmanın birçok yolu var, sadece gerekli olanları göstereceğim.

text() - Metinleri görüntüler. Kullanım:

  • text(c, x, y) - 'c' karakter anlamına gelir, herhangi bir alfasayısal karakter görüntülenecektir.
  • text(c, x, y, z) - 3 boyutlu çalışıyorsanız.
  • text(str, x, y) - 'str' görüntülenecek dizedir.
  • text(str, x, y, z) - 3 boyutlu çalışıyorsanız.
  • text(num, x, y) - 'num' görüntülenecek sayısal değerdir.
  • text(num, x, y, z) - 3 boyutlu çalışıyorsanız.

Özellikler ve Ayarlar

Bu bölümde açıklanması gereken ilk şey, nesnelerin özelliklerini ayarlamanın arkasındaki mantık olacaktır. Dolgu rengi, arka plan rengi, kenarlık, kenarlık genişliği, kenarlık rengi, şekillerin hizalanması, kenarlık stilleri vb. bu özelliklere örnek olarak verilebilir.

Bir özellik ayarladığınızda, kodun yukarıdan aşağıya doğru yürütüleceğini hatırlamanız gerekir. Diyelim ki, “fill” özelliğini kırmızıya ayarladınız, o satırın altına çizilen tüm nesneler, başka bir fill özelliği tarafından üzerine yazılana kadar kırmızı ile doldurulacaktır. Aynı şey diğer özellikler için de geçerlidir, ancak tüm özelliklerin birbirinin üzerine yazmayacağını unutmayın. Örneğin “stroke” özelliği “fill” özelliğinin üzerine yazmaz, bunun yerine birlikte çalışırlar. İşte mantığı anlamanız için görsel bir temsil:

Resimde gördüğünüz gibi ilk satır dolgu rengini kırmızı, ikinci satır kontur rengini mavi yapıyor. Artık iki aktif ayarımız var: kırmızı ve mavi vuruşları doldurun. Beklediğiniz gibi, bir sonraki satırda nesnemiz ne olursa olsun, kırmızı ile doldurulacak ve (varsa) mavi vuruşlara sahip olacaktır. Görüntüyü bu şekilde incelemeye devam edebilirsiniz, mantığı kavrarsınız.

Yaygın olarak kullanılan bazı temel özellikler ve ayarlar şunlardır:

stil ayarları

fill() - Dolgu rengini nesnelere ayarlar. Bu ayar, metinleri renklendirmek için de kullanılır. Şimdilik, sadece aşağıdaki kullanımı bilmemiz gerekiyor:

  • fill(r, g, b) - Tamsayı olarak kırmızı, yeşil ve mavi değerler
  • fill(r, g, b, a) - Ek alfa değeri, maksimum 255

noFill() - Dolgu rengini şeffaf olarak ayarlar.

kontur() - Kontur rengini nesnelere ayarlar. Kontur özelliği, nesnelerin etrafındaki çizgiler ve kenarlıklar için geçerlidir. Şimdilik, sadece aşağıdaki kullanımı bilmemiz gerekiyor:

  • vuruş(r, g, b) - Tamsayı olarak kırmızı, yeşil ve mavi değerler.
  • vuruş(r, g, b, a) - Ek alfa değeri, maks 255

noStroke() - Konturu kaldırır.

StrokWeight() - Konturun genişliğini ayarlar. Kullanım:

  • vuruşAğırlığı(x) - x bir tamsayıdır ve piksel cinsinden kontur genişliğini temsil eder.

background() - Arka plan rengini ayarlar. Şimdilik, sadece aşağıdaki kullanımı bilmemiz gerekiyor:

  • background(r, g, b) - Tamsayı olarak kırmızı, yeşil ve mavi değerler.
  • background(r, g, b, a) - Ek alfa değeri, maksimum 255

Hizalama Ayarları

ellipseMode() - Elipsleri hizalayarak referans noktası olarak nereye alınacağını ayarlar. Kullanım:

  • ellipseMode(mode) - 'mode' parametredir, işte mevcut parametreler:
    • MERKEZ (varsayılan): Merkezi referans noktası olarak alın.
    • YARIÇAP: Bu aynı zamanda merkezi referans noktası olarak alır, ancak bu modda belirttiğiniz w ve h değerleri yarım olarak kabul edilir (yani çap yerine yarıçap)
    • KÖŞE: Sol üst köşeyi referans noktası olarak alır.
    • KÖŞELER: İlk iki parametreyi (x ve y) sol üst köşenin konumu ve son iki parametreyi (w ve h) elipsin sol alt köşesinin konumu olarak ayarlar. Dolayısıyla bu mod, “genişlik” ve “yükseklik” önemsizdir. Bu durumda ellipse(x_tl,y_tl,x_br,y_br) olarak düşünmek daha mantıklı.

rectMode() - Dikdörtgenleri hizalayarak referans noktası olarak alınacağı yeri ayarlar. Kullanım:

  • rectMode(mode) - 'mode' parametredir, işte kullanılabilir parametreler:
    • MERKEZİ: Merkezi referans noktası olarak alın.
    • YARIÇAP: Bu da referans noktası olarak merkezi alır ancak bu modda belirttiğiniz w ve h değerleri yarım olarak kabul edilir.
    • KÖŞE (varsayılan): Sol üst köşeyi referans noktası olarak alır.
    • KÖŞELER: İlk iki parametreyi (x ve y) sol üst köşenin konumu ve son iki parametreyi (w ve h) elipsin sol alt köşesinin konumu olarak ayarlar. Dolayısıyla bu mod, “genişlik” ve “yükseklik” önemsizdir. Bu durumda rect(x_tl,y_tl,x_br,y_br) olarak düşünmek daha mantıklı.

Metinle İlgili Ayarlar

textSize() - Metnin yazı tipi boyutunu ayarlar. Kullanım:

  • textSize(size) - İstenen boyutun tamsayı değeri.

textLeading() - Metinlerinizin satır yüksekliğini ayarlar. Kullanım:

  • textLeading(lineheight) - Satırlar arasındaki boşluğun piksel değeri.

textAlign() - Metinleri hizalayarak referans noktası olarak nereye alınacağını ayarlar. Kullanım

  • textAlign(alignX) - 'alignX' yatay hizalama içindir. Mevcut: SOL, MERKEZ, SAĞ
  • textAlign(alignX, alignY) - 'alignY' dikey hizalama içindir. Mevcut: ÜST, ALT, MERKEZ, TABAN.

animasyonlar

Buraya kadar nesne ve metin çizmeyi öğrendik. Ancak onlarla ilgili sorun, statik olmalarıdır. Şimdi onları nasıl hareket ettireceğiz? Basit, koordinatları tamsayı olarak vermek yerine, onları artırmak / azaltmak için değişkenler kullanıyoruz . Mantıklı olmak? Aşağıdaki koda bir göz atın:

 // initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

Animasyonu nasıl yönettiğimizi görüyor musunuz? x ve y'yi global değişkenler ve başlangıç ​​değerlerini 0 olarak belirledik. Draw loop'umuzda elipsimizi oluşturduk, dolgu rengini kırmızı, kontur rengini mavi ve koordinatları x ve y olarak belirledik. x ve y'yi artırdığımızda, top basitçe konumunu değiştirir. Ancak bu kodda bir sorun var, fark edebildiniz mi? Kendiniz için kolay bir meydan okuma olarak, sorunun ne olduğunu bulmaya çalışın ve test edin. İşte sonuç:

Bunun olmasına izin vermekteki amacım, İşleme'nin döngüsel doğasının nasıl çalıştığını anlamanızı sağlamaktı. “Draw Block” bölümündeki örneğe bakın, “1 2 3…” yerine neden “1 1 1…” aldığımızı hatırlıyor musunuz? Topun geride iz bırakmasının nedeni aynı. Beraberlik bloğu her yinelendiğinde, x ve y 5 artırılır ve bu nedenle top aşağı ve sağa 5 piksele yeniden çizilir. Ancak top önceki yinelemelerden çekilir ve görünümde kalır. Onları nasıl uzaklaştırırız? Herhangi bir tahmin?

Topun geride bıraktığı izlerden kurtulmak için, arka planı(255) kurulum bloğundan kaldırırız ve onu beraberlik bloğunun ilk satırı olacak şekilde yapıştırırız. Arka plan kodumuz kurulum bloğundayken, başlangıçta bir kez çalıştırılarak arka planımızı beyaz yaptı. Ancak bu yeterli değil, önceki döngülerden çekilen topları kapsayacak şekilde her döngüde arka planımızı beyaza ayarlamamız gerekiyor. Arka planın ilk satır olması, önce çalıştığı anlamına gelir, temel katman olur. Her döngüde tuvalimiz beyaza boyanır ve beyaz arka planın üzerine yeni öğeler çizilir. Yani hiçbir işaretimiz yok.

Processing'de nesneleri canlandırmanın, nesnelerin koordinatlarını programlı olarak konumlarını değiştirmek için manipüle etmenin arkasındaki fikir budur. Ama topu ekranda tutmak gibi süslü şeyleri nasıl yapacağız? Ya da belki yerçekimi uygulamak? Bu makalenin bir sonraki bölümünde bu şeylerin nasıl yapıldığını öğreteceğim. Deneyerek ve inşa ederek öğreneceğiz. Nasıl yapılacağını öğrenip hemen oyunumuza uygulayacağız. Sonunda, eksiksiz, oynanabilir ve umarım eğlenceli bir oyunumuz olacak.

Klavye ve Fare Etkileşimleri

İşlemedeki klavye ve fare etkileşimleri çok kolay ve anlaşılır. Her olay için çağırabileceğiniz yöntemler vardır ve olay gerçekleştiğinde içine yazdıklarınız bir kez yürütülür. Ayrıca döngüden yararlanmak için çizim bloğunuzda kullanabileceğiniz mousePressed ve keyPressed gibi global değişkenler de vardır. İşte açıklamalı yöntemlerden bazıları:

 void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

Gördüğünüz gibi, farenin tıklanıp tıklanmadığını veya hangi tuşa basıldığını kontrol etmek oldukça kolaydır. Ancak mousePressed ve keyCode değişkenleri için daha fazla seçenek mevcuttur. MousePressed için mevcut seçenekler SOL, SAĞ ve MERKEZ'dir. keyCode için çok daha fazlası mevcuttur; YUKARI, AŞAĞI, SOL, SAĞ, ALT, KONTROL, SHIFT, GERİ, SEKME, ENTER, DÖNÜŞ, ESC ve DELETE.

Fare değişkenleri hakkında bilinmesi gereken bir şey ve bunu çok kullanacağız, farenin koordinatlarının nasıl elde edileceğidir. İmlecin tam koordinatlarını elde etmek için mouseX ve mouseY değişkenlerini doğrudan draw() bloğunda kullanabiliriz. Son olarak, göz atmanız gereken birçok başka yararlı yöntem var. Hepsi İşleme Referansında belgelenmiştir.

Çözüm

Şimdiye kadar İşleme'ye aşina olmalısınız. Ancak burada durursanız, tüm bu bilgiler uçup gidecek. Öğrendiklerinizle uğraşarak pratik yapmaya devam etmenizi şiddetle tavsiye ederim. Pratik yapmanıza yardımcı olmak için size iki egzersiz yapacağım. Bunu kendi başınıza yapmak için elinizden gelenin en iyisini yapmalısınız. Sıkışırsanız, Google ve İşleme Referansı en iyi arkadaşlarınız olmalıdır. İlkinin kodunu vereceğim, ancak onlara bakmak yaptığınız son şey olmalı.

Önerilen Egzersiz 1

Ekranın 4 köşesinden başlayarak merkezden farklı hızlarda ilerleyen farklı renklerde 4 top yapmalısınız. Fare düğmesini tıklayıp basılı tuttuğunuzda, toplar donmalıdır . Ve fareyi bıraktığınızda, toplar ilk konumlarına geri dönebilir ve hareket etmeye devam edebilir. Yani, böyle bir şey arıyorum.

Egzersizi kendiniz denedikten sonra buradaki kodu inceleyebilirsiniz.

Önerilen Egzersiz 2

DVD logosunun ekranda sıçradığı ve hepimizin umutsuzca köşeye çıkmasını beklediğimiz ünlü DVD ekran koruyucuyu hatırlıyor musunuz? Bu ekran koruyucuyu kopyalamanızı istiyorum, ancak DVD logosu yerine yalnızca bir dikdörtgen kullanın. Uygulamayı başlattığınızda ekran siyah olmalı ve dikdörtgen rastgele bir yerden başlamalıdır. Dikdörtgen köşeye her çarptığında rengini (ve tabii ki yönünü) değiştirmelidir. Fareyi hareket ettirdiğinizde dikdörtgen kaybolmalı ve arka plan rengi beyaza dönmelidir (ekran koruyucu, değil mi?). Bu yazımda bu alıştırmanın kodunu vermeyeceğim. Bunu uygulamak için elinizden gelenin en iyisini yapmalısınız ve kod bu makalenin ikinci bölümünde sağlanacaktır.

Basit bir oyun oluşturmaya yönelik adım adım bir eğitim olan İşleme için nihai kılavuzun ikinci kısmı yayınlandı.

Toptal Mühendislik Blogunda Daha Fazla Okuma:

  • Sıfırdan Tercüman Yazmaya Nasıl Yaklaşılır?