Tasarımcılar için İlginç Programlama Rehberi--Resminizi Çalıştırın(Birinci Bölüm): 16 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:22

Çalıştırmak! Çalıştırmak! Çalıştırmak!

Programlama o kadar zor değil. Kilit nokta, ritminizi bulmak ve tek tek yapmaktır.

Bu bölümü okumadan önce, temel fonksiyon çizim yöntemine zaten aşina olduğunuzu umarız ya da iki büyük kafa işleviyle başınız döner ve kafanız karışır: kurulum ve çizim.

Hareketli grafikler yapmak istediğimiz için animasyonun nasıl üretildiğini bilmemiz gerekiyor.

Yukarıdaki resim oldukça çekici görünüyor ve animasyonun uygulama prensibini görsel olarak ortaya koyuyor.

Animasyon sihirdir. Görsel aldatma hakkında bir sihirdir. Ancak bu bilgiler patladı, video sel çağına çoktan alıştık. Çok az insan animasyonu görebilmenin harika bir şey olduğuna şaşıracak.

Aynı prensip programla çizim animasyonuna da uygulanabilir. Her karede nasıl farklı grafikler çizeceğimizi düşünmeliyiz ve program, tamamlanmış bir animasyonu kafamızda tamamlarken otomatik olarak sayfaları çevirecektir. Bir sonraki bölümde, temel grafik hareketinin nasıl gerçekleştirileceği hakkında konuşacağız. Bundan önce, değişkenler hakkında bazı temel bilgileri bilmemiz gerekir.

Adım 1: Değişken

Değişken, veriler için kapsayıcıdır. Bir program içinde tekrar tekrar kullanılabilir.

Örneğin:

[cceN_cpp theme="şafak"] boyut(500, 500); elips(100, 250, 50, 50); elips(200, 250, 50, 50); elips(300, 250, 50, 50); elips(400, 250, 50, 50);

[/cceN_cpp]

Kodun bu bölümü herhangi bir değişken kullanmamıştır. Ekranda dört daire çizer. Aynı genişlik ve yüksekliğe sahip olduklarını bulabiliriz. Artık aynı olduğuna göre, tekrarlanan veri girişini en aza indirmek için onu temsil edecek bir işaret tanımlayabiliriz. Bu işaret değişkendir.

İşte bir değişken ekledikten sonraki kod:

[cceN_cpp theme="şafak"] boyut(500, 500); int a = 50; elips(100, 250, a, a); elips(200, 250, a, a); elips(300, 250, a, a); elips(400, 250, a, a);

[/cceN_cpp]

Tamamen aynı sonucu alıyoruz!

a değişkenini tanımladığımız için parametreleri rahatlıkla değiştirebiliriz. a=50'yi a=100 olarak değiştirirsek, tüm dairelerin genişlik ve yükseklikleri eşit olarak 100 olur. Yani parametreleri tek tek değiştirmek zorunda değiliz. Değişken gerçekten iyi bir buluş.

Adım 2: Değişkenin Oluşturulması

Değişkeni kullanmadan önce bir açıklama yapmamız ve veri tipini belirlememiz gerekir.

int i;

ben ＝ 50;

Kodun ilk cümlesi, i değişkeni için bir açıklama yaptı. int, esas olarak değişken bildirmek için kullanılan bir semboldür. Bildirirken, bilgisayar belleğinde, tamsayı verilerini geri yüklemek için özel olarak kullanılan bir "kutu" oluşturmaya eşdeğer bir yer ayıracaktır. İkinci cümle, 50 atamasının i değişkeni tarafından uygulanması anlamına gelir. Bu cümlenin uygulanmasından sonra, veriler i değişkeninde kararlı bir şekilde saklanacaktır. Ya da yukarıdaki iki cümleyi tek cümlede birleştirmek ve açıklama yaparken ödevi tamamlamak konusunda daha tembel olabilirsiniz.

int ben ＝ 50;

Bir değişkeni adlandırmak nispeten serbesttir. Ama bazen bir şeye dikkat etmemiz gerekiyor.

Adım 3: Değişkenin Adlandırma Düzenlemesi

• Alfabe ve alt çizgi kombinasyonu olmalıdır. Bir sembol veya bir kelime olabilir.

• Harfe duyarlı. İsim ve isim farklı değişkenleri temsil edebilir.

• Bir bakışta anlamanıza izin vermek için mümkün olduğunca kolay adlandırmaya çalışın. İlk karakter, bir sayı veya özel bir karakter yerine bir alfabe olmalıdır.

• int, float gibi anahtar kelimeler yok

Aşağıdakiler bazı yanlış ifadelerdir.

int $a;

int 89b;

İşte doğru ifadeler:

int r;

int süper_24;

int openTheDoor;

Adım 4: Değişken Türü

Tamsayı verileri bildirmek dışında, ondalık verileri (kayan nokta verileri olarak da adlandırılır) float anahtar kelimesiyle bildirebiliriz.

kayan nokta b = 0,5

İfademiz için ne tür bir veri türü kullandığımızı aklımızda tutmalıyız. Eğer int anahtar kelimesini kullandıysak, ikinci atama i＝0.5 veya bunun gibi bir şey yazamaz veya program hata verir. Ama tersini yazarsak sorun yok. Örneğin, float i=5 doğru dilbilgisidir, ancak program bunu ondalık sayı olarak tanıyacaktır.

Bazı değişkenler sistem tarafından zaten tanımlanmış. Onları kendimiz ilan etmek zorunda değiliz. Tıpkı daha önce bahsedilen "genişlik, yükseklik" gibi, bilgisayar ekranının genişliğini ve yüksekliğini otomatik olarak alacaktır. O kadar yüksek kullanım sıklığı ki, tasarımcı bunu bizim için daha uygun hale getirmek için doğrudan varsayılan bir değişken olarak tanımlıyor.

Adım 5: Operatör

Aşağıdakiler işleme operatörleridir:

+ artı

- eksi

* çarpmak

bölmek

％ Kalan modülü

% hariç tüm bu operatörlere aşina olmalısınız. Sonucu kalan olduğu için oldukça garip görünüyor. %93 0'dır. %95 ise 4'tür.

Operatörler atamalar ve değişkenler arasında kullanılabilir.

[cceN_cpp theme="şafak"] int a = 1; //a tamsayı değişkeni bildir, atama 1'dir. int b = 2; //b tamsayı değişkenini bildir, atama 2'dir. int c; //c tamsayı değişkenini bildir. c = a + b; // Artı iki atama ve sonucunu c'ye ata. yazdır(c); //Çıkış değişkeni c.

[/cceN_cpp]

Adım 6: İşlem Sonucu:

Çıktı sonucu pencerede değil, alttaki konsolda görüntülenecektir.

Dördüncü satırın yazma yöntemi oldukça garip görünüyor. Ancak bilgisayar ataması sırasında sıklıkla kullanılan yaygın bir formattır. Eşit sembolünün sol tarafı son atanan değişken, sağ tarafı ise işlem süreci olmalıdır.

Beşinci satırdaki yazdırma işlevi, genellikle veri çıktısının durumunu test etmek için kullanılan konsoldaki değişkenleri yazdırabilir.

Adım 7: İşletme Yönetmeliği

Processing'deki sıkıntılı bir nokta, değişken türünü netleştirmemiz gerektiğidir. Kayan nokta sayısı ve tamsayı türü sürecine özel dikkat göstermeliyiz.

yazdır（6 / 5）; //sonuç 1

Tamsayılar arasındaki işlem yeni bir tamsayıya sahip olacaktır. 6'nın 5'e bölümü 1.2'dir. Ancak programın çıktı sonucu 1'dir. Bu sezgilerimize aykırıdır. Program turla uğraşmaz, ondalık noktanın arkasındaki sayıyı siler.

yazdır (6.0 / 5.0); //sonuç 1.2

Kayan noktalar arasındaki işlem, yeni bir kayan nokta numarası ile sonuçlanacaktır. Gerçek sonuç 1.2 ise, program çıktı sonucu aynı olacaktır.

yazdır (6 / 5.0); //sonuç 1.2

yazdır (6.0 / 5); //sonuç 1.2

Son olarak, tamsayı ve kayan nokta sayısının karışımıdır. Nihai çıktı sonucu 1.2 olacaktır.

• Aslında bu yönetmelik tasarımının amacının verilerin doğruluğunu kaybetmemek olduğunu unutmamalısınız. Yani bir eleman bir kayan noktalı sayı ise, sonuç da kayan noktalı sayı olacaktır.

Adım 8: Kurulum İşlevi ve Çizim İşlevi

Daha önce bir yığın topraklama bilgisinden bahsetmiştik. Şimdi nihayet ilginç bir şey oynamaya geldik. İşlev kurulumu ve çizim, işlemenin ana işlevlerine eşdeğerdir. Bu iki işlev çok özeldir. Programın prosedürünü kontrol edebilir. Nispeten karmaşık program, programın temel çerçevesi oldukları için bu iki işlevi içerecektir. Biçim:

geçersiz kurulum(){

}

geçersiz beraberlik(){

}

Özel kullanım, çağırma biçimini diğer işlevlerden farklı kılar. İşlev adından önce "döndürülen değer" anlamına gelen "void" eklemeliyiz. Fonksiyon adının arkasına parantez ve parantez eklememiz gerekiyor.

[cceN_cpp theme="şafak"] geçersiz kurulum(){ print(1); } geçersiz çizim(){ print(2); } [/cceN_cpp]

Bir örneğe bakalım:

Çalıştırma düğmesine bastığınızda, konsol önce "1" çıkışını verir ve ardından siz durdurma düğmesine basana veya pencereyi kapatana kadar sürekli olarak "2" verir.

Setup fonksiyonunda parantez içindeki kod sadece bir defa uygulanacaktır. Fonksiyon çekilişindeki kod ise sürekli dolaşımda çalışacaktır(varsayılan uygulama 60 kere/saniye).

Bu karakter nedeniyle, kurulum genellikle ekranın genişliği ve yüksekliği, arka plan rengi ve her türlü değişken ataması gibi başlatılmış ortam özellikleri için kullanılır. Sürekli değişen grafikler oluşturmak için genellikle çizim fonksiyonlarını fonksiyon çizimine yerleştiririz.

Adım 9: Yatay Harekette Daire

Fonksiyon çizimi ile animasyonlarımızı oluşturmaya başlayabiliriz. İşleme ile animasyon efekti yazma yöntemi oldukça “garip”. Mevcut herhangi bir komutu yoktur. Örneğin, eğrisel yapmak için belirli bir şekil belirleyin.

Bu detayları kendimiz tanımlamamız gerekiyor. Her karenin nasıl bir grafiğe ihtiyacı olduğunu mutlaka programa söylemelisiniz.

İçine aşağıdaki kodu yazın(Şimdi ellerimizle yapmaya başlayalım):

[cceN_cpp theme="şafak"] int x; int y; void setup(){ size(300, 300); x = 0; y = yükseklik/2; } void draw(){ arka plan(234, 113, 107); noStroke(); elips(x, y, 50, 50); x = x+1; }

[/cceN_cpp]

Kodun bu bölümü bir hareket çemberi görüntüler. Önceden bildirilen değişken x, y, koordinatın konumunu saklamak için kullanılır. Atamaları işlev kurulumunda çalışır. Anahtar kod, fonksiyon çiziminde aşağıdaki koddur:

x = x + 1

Bunu matematiksel bir denklem olarak görmeyin, yoksa çok garip olur. Burada "＝" atama için bir semboldür. Doğru sayıları soldaki değişkene yerleştirmeyi temsil eder. X'in 50 olduğunu varsayalım, kod çalışmaya başladığında "＝"nin sağ tarafı 50+1'e, yani 51'e eşittir. Nihai sonuç x değişkenine atanacaktır. Yani x'in değeri 51 olur.

Programın prosedürünü takip edin, fonksiyon çizimi her bir kez çalıştığında, x'in değeri 1 artacaktır. Yani her çizdiğimizde, daire önceki kareye kıyasla yatay olarak bir piksel yönünü sağa doğru hareket ettirecektir. Bu nedenle, grafik hareketli hale gelir.

• Kodun daha iyi okunabilmesi için parantez içinde her kod satırından önce belirli bir yer ayırmalıyız. Ve mümkün olduğunca uyumlu olmalıdır. TAB veya birkaç boş alana basın, geri çekilebilir.

• Programdaki boşluk ve satır sonu sembolü programı etkilemez. Yani bir tane daha fazla veya daha az yazarsak sorun olmaz.

İşte bunu ifade etmenin daha basit bir yolu. Değişken daireyi otomatik olarak 1 artırmak için aşağıdaki formatta yazmamız gerekiyor.

daire ＝ daire ＋1

Oldukça uygunsuz! Değişkenin adı daha uzunsa, daha fazla kelime yazmamız gerekir. Yani tembel atalarımız böyle bir fikir düşünüyor.

daire

çok basit değil mi Bu, otomatik olarak 1 artırmak anlamına gelir. Buna benzer olarak - - vardır, bu da otomatik olarak 1 azaltmak anlamına gelir.

Ancak otomatik artış miktarının 2 gibi başka bir sayı olmasını umarsak, başka bir ifade denememiz gerekir.

daire += 2

Bu eşittir

daire = daire + 2

Benzer şekilde, －＝, /=, *= vardır.

Adım 10: Hareket Yönü

Grafiğin hangi yönde hareket ettiği, koordinatınızı nasıl değiştirdiğinize bağlıdır. y＝y＋1 olarak değiştirilirse daire aşağı doğru hareket edecektir. Hem x hem de y 1 artarsa, daire sağ alttan aşağı doğru hareket edecektir. Eksi sembolü olarak yazarsak ters yönde hareket edecektir.

[cceN_cpp theme="şafak"] int x, y; //Aynı anda birden fazla değişken bildirebilir, ayırmak için virgül kullanın. void setup(){ size(300, 300); x = 0; y = 0; } geçersiz çizim(){ arka plan(234, 113, 107); noStroke(); elips(x, y, 50, 50); x++; y++; }

[/cceN_cpp]

Hareket Hızı

Fonksiyon çiziminde saniyede varsayılan 60 kareyi hatırlıyor musunuz? Bu orana göre yukarıdaki daire saniyede 60 piksel sağa doğru hareket edecektir.

Grafik hareket hızını değiştirmek istiyorsak iki yöntem var: Biri değiştirileceğinden beri x değerini her seferinde artırmak.

x＝x＋10

Orijinaline kıyasla hızı 10 kat artırdı!

Diğer yöntem, tuvali yenileme sıklığını değiştirmektir. kare hızı()

Bu işlev, tuvalin yayın frekansını değiştirebilir. Fonksiyon kurulumuna frameRate (10) yazın, orijinal 60 kare/saniyeyi saniyede 10 kareye değiştirecektir. Hız, öncekinden 6 kez yavaşlar.

Adım 11: Gözden Geçirilen Arka Plan

Önceki örneklerin tümü, işlev çizimine arka planı yazar. Bunu fonksiyon kurulumuna yazmayı hiç düşündünüz mü? Farklılıkları olacak mı? Şimdi yatay hareket örneğini güncelleyelim.

[cceN_cpp theme="şafak"] int x, y; void setup(){ size(300, 300); arka plan(234, 113, 107); x = 0; y = yükseklik/2; } geçersiz çizim(){ noStroke(); elips(x, y, 50, 50); x += 1; } [/cceN_cpp]

Ne oldu? Belki de sorunun üretim sebebini tam olarak anlayamıyordur. noStroke işlevini silin, tekrar kontur ekleyin ve dairenin hareket yolunu görün.

Oh, çünkü önceden oluşturulmuş daire silinmedi! Fonksiyon kurulumu sadece bir kez çalıştığı için, üstüne arka plan yazarsak, arka planı sadece bir kez doldurur ve daha sonra hiçbir etkisi olmaz. İşlev arka planı, boya kovası aracı gibidir. Kullanıldıktan sonra, yalnızca bir arka plan rengi ayarlamak yerine tuvaldeki tüm içeriği kapsayacaktır. Fonksiyon çiziminden önce yazıyoruz, böylece her yeni desen oluşturduğumuzda eski çerçeve kapsanacak. Bu nedenle, çember beklediğimiz gibi çalışabilir. Her bir fonksiyonun kullanımını hatırlamak dışında, kodun konumu hakkında düşünmek zorundayız. Çok zaman, koda için yukarı veya aşağı bir satır ve onu bir parantez içine veya dışına yazmak oldukça farklı etkiler yaratacaktır. Kodun yönü iki boyutludur. Bir hata ortaya çıkarsa, bu iki boyutta kalibre etmemiz gerekir.

• Bu tekrarlanmayan çizim yöntemi, doğru kullanıldığında çok özel bir etki yaratabilir. Aşağıdaki kodu kopyalayıp deneyebilirsiniz.

[cceN_cpp theme="şafak"] void setup(){ size(400, 400); } void draw(){ elips(genişlik/2-fareX, yükseklik/2-fareX, fareY, fareY); elips(genişlik/2-fareX, yükseklik/2+fareX, mouseY, mouseY); elips(genişlik/2+fareX, yükseklik/2-fareX, mouseY, mouseY); elips(genişlik/2+fareX, yükseklik/2+fareX, mouseY, mouseY); } [/cceN_cpp]

Burada mouseX ve mouseY sihirli değişkenini kullandık. Daha sonra bunun hakkında ayrıntılı olarak konuşacağız.

Adım 12: Çemberi Sallayarak

Daire hareket yönünü düzensiz hale getirmek istersem ne olur? Akıllıca rastgele işleviyle, bu etkiyi de gerçekleştirebilirsiniz. Rastgele sık kullanılan bir fonksiyondur. Rastgele işlev oluşturmak için kullanılabilir. İz bırakmayan bir ruh gibidir. Değişkenlerle ilgili olduğunda, bir sonraki adımda ne olacağını hayal edemezsiniz.

Çağrı Formatı:

rastgele(yüksek)

Yüksek, rastgele üst sınırı temsil eder ve varsayılan alt sınır 0'dır. Örneğin, rastgele(10). Rastgele 0 ile 10 arasında bir sayı üretecektir (0 dahildir ancak 10 dahil değildir).

rastgele (düşük, yüksek)

İki parametre ayarlarsak, aralarındaki rastgele değere dönecektir. Örneğin, rastgele(5, 10). Rastgele 5'ten 10'a kadar bir sayı üretecektir (5 dahildir ancak 10 dahil değildir).

Örnek:

[cceN_cpp theme="şafak"] kayan nokta x;

x = rastgele(50, 100);

yazdır(x); [/cceN_cpp]

Programı her çalıştırdığımızda konsol farklı değerler verecektir.

• Not: Rastgele işlevi tarafından oluşturulan değerler kayan nokta tipine (ondalık sayı tipi) aittir. Tamsayı değişkenine bir değer atamak istiyorsak, onu int() işlevi aracılığıyla dönüştürmemiz gerekir. Dönüşüm, tura bağlı kalmaz, ondalık kısmı doğrudan siler. Böylece int (rastgele (5)) çıktısının yalnızca 5 olasılığı vardır: 0, 1, 2, 3, 4.

Rastgele fonksiyonunun kullanımına aşina olduktan sonra, doğrudan aşağıdaki duruma gelebiliriz.

[cceN_cpp theme="şafak"] int x, y; void setup(){ size(300, 300); x = genişlik/2; y = yükseklik/2; } void draw(){ arka plan(234, 113, 107); noStroke(); x += int(rastgele(-5, 5)); y += int(rastgele(-5, 5)); elips(x,y,50,50); }

[/cceN_cpp]

Önceki eklenen koordinat değerleri sabittir. Sadece rastgele bir değeri arttırırsak, daire belirsiz bir yönde hareket edecektir. Daha büyük rastgele aralıkla, daha sık sallanır. Çerçeveler arasındaki değer değişimi geri döndüğü için hareket artık düzgün olmayacaktır. İlk kare (150, 150) konumundayken, sonraki kare bir bakışta (170, 170) konumuna hareket edecektir.

Adım 13: Çemberi Taşıma

Taşıma Çemberi

Yumuşak hareket yaratacak mı? İşlev gürültüsü bize yardımcı olabilir. Standart rastgeleden daha iyi bir ritmi vardır. Ve rastgele oluşturulmuş rastgele sayılar süreklidir.

Çağrı Formatı:

gürültü

İşlev gürültüsü, çıkış aralığını tanımlayamaz. Program, yalnızca 0'dan 1'e kadar kayan noktalı sayılar üretebileceğini ve sabit girdinin yalnızca sabit çıktıya sahip olabileceğini tanımlıyor.

[cceN_cpp theme="şafak"] kayan nokta x = gürültü(5); float y = gürültü(5); yazdır(x,y); [/cceN_cpp]

Yukarıdaki giriş parametreleri 5 olduğundan, çıkış sonuçları aynıdır. O zaman sonuç nasıl değiştirilir? Cevap, giriş parametrelerini dinamik olarak değiştirmektir. Aslında gürültüyü sınırsız bir ses izi olarak kabul edebiliriz, giriş parametreleri tıpkı "şimdiki zaman" gibidir. Parametre girişi sürekli ise çıkış da sürekli olacaktır.

[cceN_cpp theme="şafak"] kayan nokta x, y; void setup(){ size(700, 100); x = 0; arkaplan(0); } void draw(){ x += 1; y = gürültü(frameCount/100.0)*100; noStroke(); elips(x, y, 2, 2); }

[/cceN_cpp]

Bu durumda fonksiyon gürültüsünü daha iyi anlayabilmek için Y'nin değişim yolunu çiziyoruz.

• Bunların arasında frameCount değişkeni mevcut çerçeveyi alacaktır. Önceki genişlikten farklı olarak yükseklik, herhangi bir değişiklik olmadan stabildir. Ayrıca 0'dan artmaya başlar. İlk ekran animasyonlu grafiğimizden anlarsak, döndüğümüz sayfayı gösterir (programdaki zaman anlayışından ziyade).

• frameCount tamsayı değişkenidir. Başka bir tamsayı değişkeni tarafından bölünen program, sonucu bir tamsayı olarak işlemek için varsayılan olacaktır. Sonucun doğruluğunu iyileştirmek için 100'ü 100.0 olarak değiştirmemiz gerekiyor. Kayan noktalı bir sayıya bölündüğünde, kayan noktalı bir sayı da elde ederiz.

• Y eksenini 0'dan 100'e değiştirmek için gürültü sonucunu 100 ile çarpmamız gerekiyor. Böylece rastgele değer aralığını kontrol edebiliyoruz.

Bazılarınız "frameCount'u neden 100'e bölmemiz gerekiyor? FrameCount'u doğrudan yazmak doğru değil mi?" diye sorabilir. Tabi ki yapabilirsin! Ancak burada, fonksiyon gürültüsünün özelliklerini daha iyi gösterebilmek için "yayın hızını" yavaşlatıyoruz. Aşağıdaki örnek, farklı değişim oranı altında çıkış değeri değişikliklerini göstermektedir.

[cceN_cpp theme="şafak"] kayan x, y1, y2, y3, y4, y5; void setup(){ size(700, 500); x = 0; arkaplan(0); } void draw(){ x += 1; y1 = gürültü(frameCount)*100; y2 = gürültü(frameCount/10.0)*100; y3 = gürültü(frameCount/100.0)*100; y4 = gürültü(frameCount/1000.0)*100; y5 = gürültü(frameCount/10000.0)*100; noStroke(); elips(x, y1, 2, 2); elips(x, y2+100, 2, 2); elips(x, y3+200, 2, 2); elips(x, y4+300, 2, 2); elips(x, y5+400, 2, 2); vuruş(80); çizgi(0, 100, genişlik, 100); çizgi(0, 200, genişlik, 200); satır(0, 300, genişlik, 300); çizgi(0, 400, genişlik, 400); }

[/cceN_cpp]

İşlev gürültüsü içinde değişen parametreleri bir ilerleme çubuğu olarak kabul edebilirsiniz. İlerleme çubuğunu hareket ettirdiğimiz gibi parametreyi değiştirin. Yani bu "ses parçasının" değişen kapsamı daha büyük olduğunda, çıkış değerinin ön ve arka sürekli özellikleri daha zayıf olacaktır. hızın katı, hızın 20 katı). Kapsam belirli bir değerden büyük olduğunda, değer üretiminde rastgele işlev görmek arasında büyük bir fark yoktur.

Yukarıdaki tüm örnekleri anlayabilirseniz, göç eden bir daire çizmenin daha kolay olamayacağını hissedeceksiniz. İç prensipleri de anlayabilirsiniz.

[cceN_cpp theme="şafak"] kayan nokta x, y; void setup(){ size(300, 300); x = 0; } void draw(){ arka plan(234, 113, 107); x = gürültü(frameCount/100.0 + 100)*300; y = gürültü(frameCount/100.0)*300; noStroke(); elips(x,y,50,50); }

[/cceN_cpp]

Şimdi, hareket tıpkı dönen bir jiroskop gibi daha ilginç.

• Fonksiyon gürültüsündeki x değişkeninin artı 100 olmasının nedeni, onları bir mesafe için ayırmaktır. Fonksiyon gürültüsü içindeki xy'nin parametreleri aynı veya oldukça yakınsa, x, y koordinatının değişimi aynıya yaklaşacaktır. Bu, hareketin çok daha rastgele olmasını sağlamak içindir.

Adım 14: Fareyle Taşınan Daire

Sonra nihayet en sevdiğim iki değişkene geldik: mouseX ve mouseY. İki anlayışı ilk bakışta gözlerim ışıkla parlıyor. Çünkü grafikle etkileşim kurmanın en doğrudan yolu budur. Bununla birçok ilginç program oluşturabiliriz.

Olay oldukça basit:

[cceN_cpp theme="şafak"] int x, y; void setup(){ size(300, 300); x = 0; y = 0; } void draw(){ arka plan(234, 113, 107); noStroke(); x = fareX; y = fareY; elips(x,y,50,50); }

[/cceN_cpp]

mouseX, farenin x koordinatını elde edebilirken, mouseY, y koordinatını elde edebilir.

• Pozitif ve negatif sembolü değiştirmeye veya mouseX ve mouseY'yi değiştirmeye çalışalım.

Adım 15: Bitir

Bu tanıdık komutlardan grafiklerin hareketini gerçekleştirebilirsiniz. Son bölümün içeriği ile hayal gücünüzü doğru kullanın, birçok ilginç animasyon efekti oluşturabilirsiniz.

Bir sonraki bölümümüzde daha bol örnek görebiliriz. Aynı zamanda matematiksel fonksiyonları kullanacağız ve grafik hareketi ile birleştireceğiz.

Bu makale tasarımcı Wenzy'den geliyor.

Adım 16: Göreli Okumalar:

Tasarımcı için İlginç Programlama Rehberi -- İlk Dokunuşu İşleme

Tasarımcılar için İlginç Programlama Rehberi--İlk İşleme Programınızı Oluşturun

Bu makale https://www.elecfreaks.com/10893.html adresinden alınmıştır.

Yardıma ihtiyacınız olursa, iletişime geçebilirsiniz: [email protected].