Interesujące wskazówki dotyczące programowania dla projektanta-uruchom swoje zdjęcie (część pierwsza): 16 kroków

2025 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2025-01-13 06:58

Biegać! Biegać! Biegać!

Programowanie nie jest takie trudne. Kluczowym punktem jest znalezienie swojego rytmu i robienie tego jeden po drugim.

Mam nadzieję, że przed przeczytaniem tego rozdziału zapoznałeś się już z podstawową metodą rysowania funkcji, w przeciwnym razie poczujesz zawroty głowy i zdezorientowanie dwiema dużymi funkcjami głowy: setup i draw.

Ponieważ chcemy tworzyć ruchomą grafikę, musimy wiedzieć, jak powstaje animacja.

Powyższy obrazek wydaje się dość atrakcyjny i wizualnie zdradza zasadę realizacji animacji.

Animacja to magia. To magia polegająca na wizualnym oszukiwaniu. Jednak w tej informacji eksplodowała epoka zalewu wideo, już się do tego przyzwyczailiśmy. Niewiele osób zdziwi się, że oglądanie animacji to niesamowita rzecz.

Ta sama zasada może być zastosowana do animacji rysowania za pomocą programu. Musimy zastanowić się, jak narysować inną grafikę w każdej klatce, a program automatycznie przewróci strony, podczas gdy my uzupełnimy gotową animację w naszej głowie. W następnym rozdziale porozmawiamy o tym, jak zrealizować podstawowy ruch graficzny. Wcześniej musimy znać podstawową wiedzę na temat zmiennych.

Krok 1: Zmienna

Zmienna to kontener na dane. Może być używany wielokrotnie w ramach programu.

Na przykład:

[cceN_cpp theme="świt"] rozmiar(500, 500); elipsa (100, 250, 50, 50); elipsa (200, 250, 50, 50); elipsa(300, 250, 50, 50); elipsa (400, 250, 50, 50);

[/cceN_cpp]

Ta sekcja kodu nie używa żadnych zmiennych. Rysuje na ekranie cztery okręgi. Możemy znaleźć, że mają taką samą szerokość i wysokość. Teraz, gdy jest taki sam, w celu zminimalizowania wielokrotnego wprowadzania danych, możemy zdefiniować znak, który będzie go reprezentował. Ten znak jest zmienny.

Oto kod po dodaniu zmiennej:

[cceN_cpp theme="świt"] rozmiar(500, 500); int a = 50; elipsa (100, 250, a, a); elipsa (200, 250, a, a); elipsa(300, 250, a, a); elipsa(400, 250, a, a);

[/cceN_cpp]

Uzyskujemy zupełnie ten sam wynik!

Ponieważ zdefiniowaliśmy zmienną a, możemy wygodnie zmieniać parametry. Jeśli zamienimy a=50 na a=100, to wszystkie szerokości i wysokości kół wyniosą 100 równomiernie. Nie musimy więc zmieniać parametrów jeden po drugim. Zmienna to naprawdę dobry wynalazek.

Krok 2: Tworzenie zmiennej

Przed użyciem zmiennej musimy złożyć oświadczenie i określić jej typ danych.

wew;

ja ＝ 50;

Pierwsze zdanie kodu zawiera oświadczenie dla zmiennej i. int to symbol używany głównie do deklarowania zmiennej. Deklarując, zaoszczędzi miejsce w pamięci komputera, co jest równoznaczne z wygenerowaniem „pudełka”, specjalnie używanego do przywracania danych całkowitych. Drugie zdanie oznacza, że przypisanie 50 ma być realizowane przez zmienną i. Po zrealizowaniu tego zdania dane będą przechowywane w zmiennej i stabilnie. Lub możesz być bardziej leniwy, łącząc powyższe dwa zdania w jedno i wypełniając zadanie podczas składania oświadczenia.

int ja ＝ 50;

Nazewnictwo zmiennej jest stosunkowo dowolne. Ale czasami musimy zwrócić na coś uwagę.

Krok 3: Regulacja nazewnictwa zmiennych

• Musi to być kombinacja alfabetu i podkreślenia. Może to być symbol lub słowo.

• Rozróżnianie wielkości liter. Imię i nazwisko mogą oznaczać różne zmienne.

• Postaraj się nazwać to tak łatwo, jak to tylko możliwe, aby umożliwić ci zrozumienie na pierwszy rzut oka. Początkowy znak musi być alfabetem, a nie cyfrą lub znakiem specjalnym.

• Brak słów kluczowych, takich jak int, float

Oto kilka błędnych stwierdzeń.

int $a;

wewn. 89b;

Oto prawidłowe stwierdzenia:

int r;

int super_24;

int otwórzDrzwi;

Krok 4: Typ zmiennej

Oprócz deklarowania danych całkowitych, możemy deklarować dane dziesiętne (zwane również danymi zmiennoprzecinkowymi) za pomocą słowa kluczowego float.

pływak b = 0,5

Musimy pamiętać, jakiego typu danych użyliśmy w naszym zestawieniu. Jeśli użyliśmy słowa kluczowego int, to drugie przypisanie nie może napisać i＝0.5 lub coś takiego, albo program stanie się błędem. Ale jeśli piszemy odwrotnie, to w porządku. Na przykład float i=5 to prawidłowa gramatyka, ale program rozpozna ją jako liczbę dziesiętną.

Niektóre zmienne zostały już zdefiniowane przez system. Nie musimy sami ich deklarować. Podobnie jak poprzednio „szerokość, wysokość”, automatycznie przyjmie szerokość i wysokość ekranu komputera. Tak duża częstotliwość użycia, że projektant bezpośrednio definiuje ją jako zmienną domyślną, aby uczynić ją wygodniejszą w użyciu.

Krok 5: Operator

Operatorami przetwarzania są:

+ plus

- minus

* mnożyć

dzielić

％ Moduł reszty

Musisz znać wszystkie te operatory z wyjątkiem %. Wydaje się to dość dziwne, ponieważ jego wynik jest pozostałością. 9%3 to 0. Podczas gdy 9%5 to 4.

Operatory mogą być używane wśród przypisań i zmiennych.

[cceN_cpp theme="świt"] int a = 1; //deklaruj zmienną całkowitą a, przypisanie to 1. int b = 2; //Zadeklaruj zmienną całkowitą b, przypisanie to 2. int c; //Zadeklaruj zmienną całkowitą c. c = a + b; //Plus dwa przypisania i przypisz wynik do c. druk(c); //Zmienna wyjściowa c.

[/cceN_cpp]

Krok 6: Wynik operacji:

Wynik wyjściowy nie zostanie wyświetlony w oknie, ale w konsoli na dole.

Sposób pisania czwartej linii wygląda dość dziwnie. Ale jest to powszechny format często używany podczas przypisywania komputerów. Lewa strona równego symbolu powinna być ostateczną przypisaną zmienną, a prawa strona powinna być procesem operacji.

Funkcja print w piątym wierszu może drukować zmienne w konsoli, co jest często używane do testowania stanu wyprowadzania danych.

Krok 7: Regulacja działania

Kłopotliwym punktem w Przetwarzaniu jest to, że musimy wyjaśnić typ zmiennej. Musimy zwrócić szczególną uwagę na proces liczby zmiennoprzecinkowej i typu całkowitego.

drukuj（6 / 5）; //wynik 1

Operacja między liczbami całkowitymi będzie miała nową liczbę całkowitą. 6 podzielone przez 5 to 1,2. Ale wynik programu to 1. Jest to sprzeczne z naszą intuicją. Program nie zajmuje się zaokrąglaniem, ale usuwa liczbę po przecinku.

druk (6,0 / 5,0); //wynik 1.2

Operacja pomiędzy liczbami zmiennoprzecinkowymi spowoduje powstanie nowej liczby zmiennoprzecinkowej. Jeśli rzeczywisty wynik wynosi 1.2, wynik programu będzie taki sam.

druk (6 / 5.0); //wynik 1.2

druk (6,0 / 5); //wynik 1.2

Wreszcie jest to mieszanina liczby całkowitej i liczby zmiennoprzecinkowej. Ostateczny wynik wyniesie 1,2.

• Właściwie należy pamiętać, że celem tego projektu regulacji jest zachowanie dokładności danych. Więc jeśli jeden element jest liczbą zmiennoprzecinkową, wynikiem będzie również liczba zmiennoprzecinkowa.

Krok 8: Funkcja konfiguracji i funkcja rysowania

Wcześniej rozmawialiśmy o stosie wiedzy o uziemieniu. Teraz wreszcie możemy zagrać coś interesującego. Konfiguracja funkcji i rysowanie są równoważne z głównymi funkcjami przetwarzania. Te dwie funkcje są bardzo szczególne. Może kontrolować przebieg programu. Stosunkowo skomplikowany program będzie zawierał te dwie funkcje, ponieważ są one podstawową ramą programu. Format:

pusta konfiguracja (){

}

nieważne rysowanie () {

}

Specjalne zastosowanie sprawia, że ich format wywołania różni się od innych funkcji. Musimy dodać "void" przed nazwą funkcji, co oznacza brak "wartości zwracanej". Za nazwą funkcji musimy dodać nawiasy i klamry.

[cceN_cpp theme="świt"] void setup(){ print(1); } void draw(){ print(2); } [/cceN_cpp]

Spójrzmy na przykład:

Po naciśnięciu przycisku obsługi konsola najpierw wyśle „1”, a następnie stale „2”, aż naciśniesz przycisk stop lub zamkniesz okno.

Kod w nawiasach w funkcji konfiguracji zostanie zaimplementowany tylko raz. Podczas gdy kod w funkcji rysowania będzie stale uruchamiany (domyślna implementacja 60 razy na sekundę).

Ze względu na ten znak, setup jest zwykle używany do inicjalizacji właściwości środowiska, takich jak szerokość i wysokość ekranu, kolor tła i wszelkiego rodzaju przypisanie zmiennych. Chociaż często umieszczamy funkcje rysowania w rysowaniu funkcji, aby generować ciągle zmieniającą się grafikę.

Krok 9: Koło w ruchu poziomym

Dzięki funkcji draw możemy zacząć tworzyć nasze animacje. Sposób pisania efektu animacji przez Processing jest dość „niezręczny”. Nie ma żadnego istniejącego polecenia. Na przykład wyznacz określony kształt, aby był krzywoliniowy.

Musimy sami określić te szczegóły. Musisz powiedzieć programowi, jakiego rodzaju grafiki potrzebuje każda klatka.

Napisz do niego następujący kod (Teraz zacznijmy to robić ręcznie):

[cceN_cpp theme="świt"] int x; int y; void setup(){ size(300, 300); x = 0; y = wysokość/2; } void draw(){ background(234, 113, 107); noStroke(); elipsa(x, y, 50, 50); x = x+1; }

[/cceN_cpp]

Ta sekcja kodu wyświetla ruchomy okrąg. Poprzednia zadeklarowana zmienna x, y służy do przechowywania pozycji współrzędnych. Jego przypisania działają w konfiguracji funkcji. Kod klucza jest następujący w funkcji rysowania:

x = x + 1

Nie traktuj tego jako równania matematycznego, bo będzie to bardzo dziwne. Tutaj „＝” jest symbolem przypisania. Reprezentuje umieszczenie prawych liczb w lewej zmiennej. Załóżmy, że x to 50, gdy kod zostanie uruchomiony, prawa strona „＝” równa się 50+1, czyli 51. Ostateczny wynik zostanie przypisany do zmiennej x. Zatem wartość x wynosi 51.

Postępuj zgodnie z procedurą programu, za każdym razem, gdy funkcja rysowania działa raz, wartość x wzrośnie o 1. Tak więc za każdym razem, gdy rysujemy, okrąg przesunie się w kierunku pikseli poziomo w prawo, w porównaniu do poprzedniej klatki. Dlatego grafika staje się ruchoma.

• Aby kod był bardziej czytelny, musimy wygospodarować pewną przestrzeń przed każdą linią kodu w nawiasach klamrowych. I powinien być jak najbardziej wyrównany. Naciśnij TAB lub kilka pustych miejsc, może to zrobić.

• Symbol spacji i łamania linii w programie nie ma wpływu na program. Więc jest w porządku, jeśli wpiszemy jeden więcej lub mniej.

Oto inny prostszy sposób na wyrażenie tego. Aby koło zmiennej automatycznie zwiększyło się o 1, musimy zapisać to w następującym formacie.

koło ＝ koło ＋1

Dość niewygodne! Jeżeli nazwa zmiennej jest dłuższa, to musimy wpisać więcej słów. Więc nasi leniwi poprzednicy wymyślają taki pomysł.

koło＋＋

Czy to nie jest bardzo proste? Oznacza to automatyczne zwiększenie o 1. Podobnie jest z - -, co oznacza automatyczne zmniejszenie o 1.

Ale jeśli mamy nadzieję, że wielkość automatycznego wzrostu jest inna jak 2, musimy spróbować innego wyrażenia.

koło += 2

To równa się

koło = koło + 2

Podobnie jest －＝, /=, *=.

Krok 10: Kierunek ruchu

Kierunek, w którym porusza się grafika, zależy od tego, jak zmienisz swoje współrzędne. Jeśli zmieni się na y＝y＋1, okrąg przesunie się w dół. Jeśli obiex i y wzrosną o 1, okrąg przesunie się w dół w prawą dolną część. Jeśli napiszemy to jako symbol minusa, poruszy się w przeciwnym kierunku.

[cceN_cpp theme="świt"] int x, y; //Może zadeklarować wiele zmiennych jednocześnie, oddziel je przecinkami. void setup(){ size(300, 300); x = 0; y = 0; } void draw(){ background(234, 113, 107); noStroke(); elipsa(x, y, 50, 50); x++; y++; }

[/cceN_cpp]

Szybkość ruchu

Pamiętasz domyślne 60 klatek na sekundę w funkcji rysowania? Zgodnie z tą szybkością okrąg powyżej przesunie się o 60 pikseli na sekundę w prawo.

Jeśli chcemy zmienić szybkość ruchu grafiki, istnieją dwie metody: pierwsza to zwiększanie wartości x za każdym razem, gdy ma ona ulec zmianie.

x＝x＋10

Poprawił prędkość 10 razy w porównaniu do oryginału!

Drugą metodą jest zmiana częstotliwości odświeżania płótna. częstotliwość wyświetlania klatek()

Ta funkcja może zmienić częstotliwość nadawania płótna. Wpisz frameRate (10) w ustawieniach funkcji, zmieni oryginalne 60 klatek na sekundę na 10 klatek na sekundę. Prędkość jest spowolniona 6 razy niż wcześniej.

Krok 11: Przeoczone tło

Wszystkie poprzednie przykłady zapisują tło do funkcji rysowania. Czy kiedykolwiek myślałeś, aby zapisać to w konfiguracji funkcji? Czy będzie miał jakieś różnice? Teraz zaktualizujmy przykład ruchu poziomego.

[cceN_cpp theme="świt"] int x, y; void setup(){ size(300, 300); tło (234, 113, 107); x = 0; y = wysokość/2; } void remis(){ noStroke(); elipsa(x, y, 50, 50); x += 1; } [/cceN_cpp]

Co się stało? Może nie może właściwie zrozumieć przyczyny powstania problemu. Usuń funkcję noStroke, dodaj ponownie obrys i zobacz ścieżkę ruchu okręgu.

Och, to dlatego, że wcześniej utworzony krąg nie został usunięty! Ponieważ konfiguracja funkcji działa tylko raz, jeśli napiszemy nad nią tło, wypełni tło tylko raz, a później nie będzie już miało żadnego efektu. Tło funkcyjne jest jak narzędzie do wiaderka z farbą. Po użyciu zakryje całą zawartość płótna, zamiast ustawiać tylko kolor tła. Piszemy go przed rysowaniem funkcji, aby poprzednia klatka była zakryta za każdym razem, gdy tworzymy nowy wzór. Dlatego koło może przebiegać zgodnie z naszymi oczekiwaniami. Oprócz zapamiętywania użycia każdej funkcji, musimy pomyśleć o położeniu kodu. Dużo czasu, linia w górę lub w dół dla codea i pisanie jej w nawiasie lub poza nawiasem, stworzy całkiem inne efekty. Kierunek kodu jest dwuwymiarowy. Jeśli pojawi się błąd, musimy skalibrować w tym dwuwymiarze.

• Ta nie powtarzana metoda rysowania może stworzyć bardzo specjalny efekt, jeśli jest właściwie używana. Możesz skopiować poniższy kod i spróbować.

[cceN_cpp theme="dawn"] void setup(){ size(400, 400); } void rysuj(){ ellipse(szerokość/2-myszX, wysokość/2-myszX, myszY, myszY); elipsa(szerokość/2-myszX, wysokość/2+myszX, myszY, myszY); elipsa(szerokość/2+myszX, wysokość/2-myszX, myszY, myszY); elipsa(szerokość/2+myszX, wysokość/2+myszX, myszY, myszY); } [/cceN_cpp]

Tutaj użyliśmy magicznej zmiennej mouseX i mouseY. Później omówimy to szczegółowo.

Krok 12: Potrząsanie kręgiem

Co zrobić, jeśli chcę, aby kierunek ruchu po okręgu stał się nieregularny? Dzięki funkcji losowej sprytnie możesz również zrealizować ten efekt. Random to często używana funkcja. Może służyć do generowania funkcji losowych. To jest jak duch bez śladu. Kiedy raz powiążesz się ze zmiennymi, nie możesz sobie wyobrazić, co stanie się dalej.

Wywołaj format:

losowy (wysoki)

Wysoki reprezentuje losowy górny limit, a domyślny dolny limit to 0. Na przykład random(10). Wygeneruje losowo liczbę od 0 do 10 (0 jest uwzględnione, ale 10 nie jest uwzględnione).

losowy (niski, wysoki)

Jeśli ustawimy dwa parametry, to powróci do losowej wartości między nimi. Na przykład random(5, 10). Wygeneruje losowo liczbę od 5 do 10 (5 jest włączone, ale 10 nie jest uwzględnione).

Przykład:

[cceN_cpp theme="świt"] float x;

x = losowo (50, 100);

drukuj(x); [/cceN_cpp]

Za każdym razem, gdy uruchamiamy program, konsola wyświetla różne wartości.

• Uwaga: Wartości tworzone przez funkcję random należą do typu zmiennoprzecinkowego (typ liczby dziesiętnej). Jeśli chcemy przypisać wartość do zmiennej całkowitej, musimy ją przekształcić za pomocą funkcji int(). Transformacja nie jest zgodna z zaokrągleniem, ale bezpośrednio usuwa część dziesiętną. Zatem wyjście int (losowe (5)), ma tylko 5 możliwości: 0, 1, 2, 3, 4.

Po zapoznaniu się z użyciem funkcji random, możemy przejść bezpośrednio do poniższego przypadku.

[cceN_cpp theme="świt"] int x, y; void setup(){ size(300, 300); x = szerokość/2; y = wysokość/2; } void draw(){ background(234, 113, 107); noStroke(); x += int(losowo(-5, 5)); y += int(losowo(-5, 5)); elipsa(x, y, 50, 50); }

[/cceN_cpp]

Poprzednio dodane wartości współrzędnych są stałe. Tylko jeśli zwiększymy losową wartość, okrąg poruszy się w nieokreślonym kierunku. Przy większym losowym zakresie trzęsie się częściej. Ponieważ zmiana wartości między klatkami jest odbijana, ruch nie będzie już płynniejszy. Podczas gdy pierwsza rama jest w pozycji (150, 150), druga rama przesunie się do pozycji (170, 170) w mgnieniu oka.

Krok 13: Migracja kręgu

Krąg migracji

Czy stworzy płynny ruch? Hałas funkcyjny może nam pomóc. Ma lepszy rytm niż standardowy losowy. A losowo generowane liczby losowe są stale.

Wywołaj format:

hałas（t）

Szum funkcji nie może określić jego zakresu wyjściowego. Program definiuje, że może generować tylko liczby zmiennoprzecinkowe od 0 do 1, a stałe wejście może mieć tylko stałe wyjście.

[cceN_cpp theme="świt"] float x = hałas(5); pływak y = szum(5); drukuj(x, y); [/cceN_cpp]

Ponieważ powyższe parametry wejściowe to 5, więc wyniki wyjściowe są takie same. Więc jak zmienić wynik? Odpowiedzią jest dynamiczna zmiana parametrów wejściowych. Właściwie możemy uznać szum za nieograniczoną ścieżkę głosową, parametry wejściowe są jak „czas teraźniejszy”. Jeśli wejście parametru jest ciągłe, wyjście będzie również ciągłe.

[cceN_cpp theme="świt"] float x, y; void setup(){ size(700, 100); x = 0; tło(0); } void remis(){ x += 1; y = szum(liczba ramek/100,0)*100; noStroke(); elipsa(x, y, 2, 2); }

[/cceN_cpp]

W tym przypadku rysujemy ścieżkę zmiany Y, aby lepiej zrozumieć szum funkcji.

• Wśród nich zmienna frameCount otrzyma obecną ramkę. Różni się od poprzedniej szerokości, wysokością, jest stabilna bez żadnych zmian. Poza tym zaczyna rosnąć od 0. Jeśli zrozumiemy to przez naszą początkową animowaną grafikę, pokazuje ona stronę, na którą przeszliśmy (a raczej koncepcję czasu w programie).

• frameCount jest zmienną całkowitą. Po podzieleniu przez inną zmienną całkowitą, program domyślnie przetworzy wynik na liczbę całkowitą. Aby poprawić dokładność wyniku, musimy zmienić 100 na 100.0. Dzieląc przez liczbę zmiennoprzecinkową, otrzymamy również liczbę zmiennoprzecinkową.

• Aby zmienić oś Y z 0 na 100, musimy pomnożyć wynik szumu przez 100. W ten sposób możemy kontrolować losowy zakres wartości.

Niektórzy z was, którzy są dobrzy w myśleniu, mogą zapytać „dlaczego musimy dzielić frameCount przez 100? Czy nie jest w porządku pisać bezpośrednio frameCount?” Oczywiście, że możesz! Ale tutaj, aby lepiej pokazać charakterystykę szumu funkcji, spowalniamy „szybkość nadawania”. Poniższy przykład pokazuje zmiany wartości wyjściowej przy różnym tempie zmian.

[cceN_cpp theme="świt"] float x, y1, y2, y3, y4, y5; void setup(){ size(700, 500); x = 0; tło(0); } void remis(){ x += 1; y1 = szum (liczba ramek)*100; y2 = szum (liczba ramek/10,0)*100; y3 = szum(liczba ramek/100,0)*100; y4 = szum(liczba ramek/1000.0)*100; y5 = szum (liczba ramek/10000.0)*100; noStroke(); elipsa(x, y1, 2, 2); elipsa(x, y2+100, 2, 2); elipsa(x, y3+200, 2, 2); elipsa(x, y4+300, 2, 2); elipsa(x, y5+400, 2, 2); udar (80); linia (0, 100, szerokość, 100); linia (0, 200, szerokość, 200); linia (0, 300, szerokość, 300); linia (0, 400, szerokość, 400); }

[/cceN_cpp]

Zmieniające się parametry w szumie funkcji można traktować jako pasek postępu. Zmiana parametru to tak, jakbyśmy przesuwali pasek postępu. Kiedy więc zakres zmian tej „ścieżki głosowej” jest większy, przednia i tylna ciągła charakterystyka wartości wyjściowej będzie słabsza. razy prędkość, 20 razy prędkość). Gdy zakres jest większy niż określona wartość, nie ma dużej różnicy w działaniu losowym podczas generowania wartości.

Jeśli zrozumiesz wszystkie powyższe przykłady, poczujesz, że nic nie może być łatwiejsze do narysowania kręgu migracji. Możesz też zrozumieć wewnętrzne zasady.

[cceN_cpp theme="świt"] float x, y; void setup(){ size(300, 300); x = 0; } void draw(){ background(234, 113, 107); x = szum(liczba ramek/100,0 + 100)*300; y = szum(liczba ramek/100,0)*300; noStroke(); elipsa(x, y, 50, 50); }

[/cceN_cpp]

Teraz ruch jest ciekawszy, podobnie jak obracający się żyroskop.

• Powodem, dla którego zmienna x w obrębie szumu funkcji musi mieć plus 100, jest to, aby rozdzielić je na odległość. Jeśli parametry xy w ramach szumu funkcji są takie same lub całkiem bliskie, zmiana współrzędnych x,y będzie zbliżona do tego samego. Ma to sprawić, że ruch stanie się znacznie bardziej losowy.

Krok 14: Okrąg przesuwany myszą

Następnie w końcu dochodzimy do dwóch zmiennych, które lubię najbardziej: mouseX i mouseY. Od pierwszego spojrzenia na te dwie koncepcje moje oczy błyszczą światłem. Ponieważ jest to najbardziej bezpośredni sposób interakcji z grafiką. Za jego pomocą możemy stworzyć wiele ciekawych programów.

Sprawa jest dość prosta:

[cceN_cpp theme="świt"] int x, y; void setup(){ size(300, 300); x = 0; y = 0; } void draw(){ background(234, 113, 107); noStroke(); x = myszX; y = myszY; elipsa(x, y, 50, 50); }

[/cceN_cpp]

mouseX może uzyskać współrzędną x myszy, podczas gdy mouseY może uzyskać współrzędną y.

• Spróbujmy zamienić symbol dodatni na ujemny lub zamienić mouseX i mouseY.

Krok 15: Koniec

Z tych znanych poleceń możesz być w stanie przeprowadzić ruch grafiki. Dzięki zawartości ostatniego rozdziału, odpowiednio wykorzystaj swoją wyobraźnię, możesz stworzyć wiele ciekawych efektów animowanych.

W następnym rozdziale możemy zobaczyć więcej przykładów. Jednocześnie wykorzystamy funkcje matematyczne i połączymy to z ruchem graficznym.

Ten artykuł pochodzi od projektantki Wenzy.

Krok 16: Odczyty względne:

Interesujące wskazówki dotyczące programowania dla projektanta - przetwarzanie początkowego dotyku

Interesujące wskazówki dotyczące programowania dla projektanta - stwórz swój pierwszy program do przetwarzania

Ten artykuł pochodzi z:

Jeśli potrzebujesz pomocy, możesz skontaktować się z: [email protected].