Öteleme

Burada ProcessingJS kullanarak bir program oluşturduğunuzda, çıktı, kareli kağıt gibi görünen bir tuvale çizilir. Bir şekil çizmek için, onun koordinatlarını bu grafikte belirtirsiniz.

Örnek olarak, burada rect(20, 20, 40, 40) koduyla çizilen basit bir dikdörtgen görebilirsiniz. (Bu "kareli kağıdın" süslü bir adı olan) koordinat sistemi, griyle gösterilmiştir, ve örnek görüntülerimizi küçük tutmak için, görüntüdeki koordinat sistemi, (ön tanımlı 400x400 boyutunun yerine) 200 piksele 200 pikseldir.

Dikdörtgeni sağa 60 birim ve aşağı 80 birim taşımak isterseniz, başlangıç noktasına x ve y ekleyerek koordinatları değiştirebilirsiniz: rect(20 + 60, 20 + 80, 40, 40) ve dikdörtgen farklı bir yerde ortaya çıkacaktır. (Oku buraya dramatik etki yaratması için koyduk.)

Ama bunu yapmanın daha ilginç bir yolu vardır: bunun yerine kareli kağıdı hareket ettirin. Kareli kağıdı 60 birim sağa ve 80 birim aşağı hareket ettirirsek, aynı görsel sonucu elde ederiz. Koordinat sistemini taşımaya öteleme denir.

Bir önceki şemada farkına varılması gereken, dikdörtgen açısından bakarsak, onun hiç hareket etmediğidir. Sol üst köşesi hala (20,20)'dedir. Dönüşüm kullandığınızda, çizdiğiniz şeylerin konumu hiç değişmez; koordinat sisteminin konumu değişir.

Burada, baştaki dikdörtgeni çizen, sonra koordinatlarını değiştirerek yeni konumunda kırmızı renkte çizen, sonra ağı (translate() ile) taşıyarak, dikdörtgen, yeni konumunda mavi renkte çizen bir program bulabilirsiniz. Dolgu renkleri yarı saydamdır, böylece, kırmızı ve mavinin hemen hemen aynı yerde örtüşerek mor bir kare oluşturduğunu görebilirsiniz. Değişen tek şey, onları taşıma yöntemidir. Aşağıdaki sayılarla oynayıp kendiniz görün:

Öteleme koduna daha detaylı bakalım. pushMatrix(), koordinat sisteminin geçerli konumunu kaydeden yerleşik bir fonksiyondur. translate(60, 80) koordinat sistemini 60 birim sağa ve 80 birim aşağı taşır. rect(20, 20, 40, 40) dikdörtgeni baştaki yerinde çizer. Unutmayın, çizdiğiniz şeyler değil,—ağ hareket ediyor. Son olarak, popMatrix(), koordinat sistemini ötelemeden önceki haline döndürür.

Neden pushMatrix() veya popMatrix() kullanırız? Ağı başlangıçtaki konumuna taşımak için, translate(-60, -80) yapabilirdiniz. Ancak, koordinat sistemiyle daha sofistike işlemler yapmaya başladığınızda, tüm işlemlerinizi geri almak yerine, durumunuzu kaydetmek ve eski haline döndürmek için pushMatrix() ve popMatrix() kullanmak daha kolaydır. Bu bölümün devamında, bu fonksiyonların neden böyle garip isimleri olduğunu öğreneceksiniz.

Koordinat sistemini tutup taşımanın, koordinatları toplamaktan daha fazla iş yarattığını düşünebilirsiniz. Dikdörtgen gibi basit bir örnek için böyle düşünmekte haklısınız. Ama, translate()'in hayatımızı kolaylaştırdığı başka bir örneğe bakalım.

Burada bir sıra ev çizen bir program görebilirsiniz. drawHouse() isimli bir fonksiyonu çağıran bir döngü kullanır, bu, evin sol-üst köşesinin x ve y konumunu parametre olarak alır. Dikkat ederseniz drawHouse fonksiyonunun, verilen koordinatlarda evi çizdirmek için, parametrelerle birçok işlem yapması gerekir:

Ya yeni koordinatlar hesaplamak yerine translate() fonksiyonunu kullansaydık? Bu durumda, kod her seferinde, sol üst köşesi (0, 0)'da olmak üzere, evi aynı yerde çizer, ve ötelemenin her şeyi halletmesine izin verir.

Bu, yeni koordinatları hesaplamak yerine, translate()'i her zaman yeğlemeniz gerektiği anlamına gelmez. Öğrettiğimiz birçok şey gibi, bu alet çantanızda sadece bir alettir, ve bu yeni translate() aletini ne zaman kullanacağınızı belirlemek size kalmıştır.

Bu makale, J David Eisenberg'in yazdığı 2D Dönüşümler makalesinin bir uyarlamasıdır, ve Creative Commons Attribution-NonCommercial-ShareAlike lisansıyla kullanılmaktadır.