Kompletny przewodnik po języku przetwarzania, część I: Podstawy

Opublikowany: 2022-03-11

Walczysz z nudą i świerzbi Ci kreatywność. Chcesz coś zbudować, coś imponującego wizualnie, coś artystycznego. A może chcesz nauczyć się programowania i jak najszybciej zrobić coś imponującego. Jeśli tak, to najlepszym rozwiązaniem jest język przetwarzania.

Spośród wszystkich języków programowania, z którymi pracowałem do tej pory, Processing był bez wątpienia jednym z najbardziej rozrywkowych. Jest to prosty język – łatwy do nauczenia się, zrozumienia i używania, a jednocześnie bardzo potężny. To prawie tak, jakbyś malował na pustym płótnie liniami kodu. Nie ma żadnych sztywnych zasad ani wytycznych ograniczających Twoją kreatywność, jedynym ograniczeniem jest Twoja wyobraźnia.

Kompletny przewodnik po języku przetwarzania Część I: Podstawy

Na studiach byłam asystentką w programie, który gromadził uczniów szkół średnich i uczył ich Przetwarzania. Większość z nich nie miała silnego zaplecza programistycznego, niektórzy nie napisali wcześniej ani jednej linijki kodu. W ciągu zaledwie pięciu dni mieli nauczyć się języka i samodzielnie zbudować proste gry. Wskaźnik sukcesu był prawie stuprocentowy, rzadko spotykaliśmy się z porażką. W tym artykule dokładnie to będziemy robić. Cały program podzieliłem na dwie części. W pierwszej części będę mówić o języku. Przedstawię podstawowy przegląd, instruktaż dotyczący przetwarzania i dam kilka wskazówek i wskazówek. Następnie w kolejnej części krok po kroku zbudujemy prostą grę, każdy krok zostanie szczegółowo wyjaśniony. Przekonwertuję też kod gry na JavaScript za pomocą p5js, aby nasza gra mogła działać w przeglądarce internetowej.

Co powinieneś już wiedzieć

Aby zrozumieć i łatwo śledzić te artykuły, powinieneś mieć podstawową wiedzę na temat programowania, ponieważ nie będę mówił o podstawach programowania. W większości nie będę jednak dotykał żadnych zaawansowanych koncepcji programowania, więc wystarczy powierzchowne zrozumienie. Jest kilka części, w których mówię o pomysłach i koncepcjach niskiego poziomu, takich jak programowanie obiektowe (OOP), ale nie są one kluczowe. Są one przeznaczone dla ciekawskich czytelników, zainteresowanych strukturą języka. Jeśli nie chcesz wiedzieć, możesz po prostu pominąć te części. Poza tym jedyne, co powinieneś mieć, to ambicja nauczenia się tego niesamowitego języka i entuzjazm do tworzenia własnej gry!

Jak śledzić

Zawsze jestem za nauką programowania poprzez próby i eksperymenty. Im szybciej zagłębisz się we własną grę, tym szybciej poczujesz się komfortowo z Przetwarzaniem. To będzie moja pierwsza sugestia, wypróbuj każdy krok w swoim własnym środowisku. Przetwarzanie ma proste i łatwe w użyciu IDE (tj. edytor kodu), jest to jedyna rzecz, którą musisz pobrać i zainstalować, aby śledzić. Możesz go pobrać stąd.

Więc zacznijmy!

Jaki jest język przetwarzania?

Ta sekcja zawiera krótki przegląd techniczny języka, jego struktury oraz kilka uwag dotyczących procesu kompilacji i wykonania. Szczegóły będą zawierać zaawansowaną wiedzę z zakresu programowania i środowiska Java. Jeśli na razie nie przejmujesz się szczegółami i nie możesz się doczekać, aby nauczyć się i zakodować własną grę, możesz przejść do sekcji „Podstawy przetwarzania”.

Przetwarzanie to wizualny język programowania, który pozwala, że ​​tak powiem, szkicować za pomocą kodów. Jednak nie jest to do końca język programowania sam w sobie, to jest to, co nazywają językiem programowania „Java-esque”, co oznacza, że ​​język jest zbudowany na platformie Java, ale nie jest dokładnie Java per se. Jest oparty na Javie, a cały Twój kod jest wstępnie przetwarzany i konwertowany bezpośrednio na kod Java po naciśnięciu przycisku Uruchom. Klasa PApplet Javy jest klasą bazową dla wszystkich szkiców Processing. Aby dać przykład, weźmy kilka podstawowych bloków kodu przetwarzania:

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

Te bloki kodu zostaną przekonwertowane na coś takiego:

 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 } }

Widać, że blok kodu przetwarzania został opakowany klasą, która wywodzi się z PAppleta Javy. Dlatego wszystkie klasy zdefiniowane w kodzie przetwarzania, jeśli takie istnieją, będą traktowane jako klasy wewnętrzne.

Fakt, że Processing jest oparty na Javie, daje nam wiele korzyści, zwłaszcza jeśli jesteś programistą Java. Składnia jest nie tylko znajoma, ale daje również możliwość wykonywania takich rzeczy, jak osadzanie kodu Java, bibliotek, plików JAR w szkicach, używanie apletów Processing bezpośrednio w aplikacjach Java, definiowanie klas i używanie standardowych typów danych, takich jak int. , float, char i tak dalej. Możesz nawet napisać swój kod Pocessing bezpośrednio z Eclipse, jeśli chcesz poświęcić trochę czasu na jego konfigurację. Jedyną rzeczą, której nie możesz zrobić, jest użycie komponentów AWT lub Swing w szkicach Przetwarzania, ponieważ są one sprzeczne z zapętloną naturą Przetwarzania. Ale nie martw się, nie będziemy robić żadnej z tych wymyślnych rzeczy w tym artykule.

Podstawy przetwarzania

Kod przetwarzania składa się z dwóch głównych części, bloków instalacyjnych i rysunkowych . Blok konfiguracyjny uruchamia się raz, gdy kod zostanie wykonany, a bloki rysunkowe działają w sposób ciągły. Główną ideą przetwarzania jest to, że to, co napiszesz w bloku rysowania, będzie wykonywane 60 razy na sekundę od góry do dołu, aż do zakończenia programu . Zbudujemy wszystko korzystając z tego właśnie pomysłu. Za pomocą tej funkcji sprawimy, że nasze obiekty się poruszą, zachowamy nasze wyniki, wykryjemy kolizje, zaimplementujemy grawitację i zrobimy prawie wszystko inne. Ta pętla odświeżania jest sercem naszego projektu . W dalszych sekcjach wyjaśnię, jak używać tego bicia serca, aby ożywić swój kod. Najpierw pozwól, że przedstawię Ci Processing IDE.

Przetwarzanie IDE

Jeśli przeczytałeś do tego momentu i nadal nie pobrałeś Processing IDE, zrób to. W całym artykule przedstawię kilka prostych zadań, które możesz wypróbować samodzielnie, możesz ćwiczyć tylko wtedy, gdy masz uruchomione IDE. Oto krótkie wprowadzenie do przetwarzania IDE. Jest to bardzo proste i oczywiste, więc pokrótce.

Jak można się spodziewać, przyciski uruchamiania i zatrzymywania robią to, co sugerują. Kiedy klikniesz przycisk Uruchom , Twój kod zostanie skompilowany i wykonany. Z natury programy przetwarzające nigdy nie są kończone, działają w nieskończoność, dopóki nie zostaną zakłócone. Możesz go zakończyć programowo, ale jeśli tego nie zrobisz, możesz użyć przycisku stop .

Przycisk, który wygląda jak motyl po prawej stronie funkcji run & stop, to debugger . Korzystanie z debuggera wymaga poświęcenia całego innego artykułu. Jest to poza zakresem tego artykułu, więc możesz go na razie zignorować. Menu rozwijane obok przycisku debuggera to miejsce, w którym dodajesz / ustawiasz mody. Mody zapewniają pewną funkcjonalność, pozwalają pisać kod dla Androida, pozwalają pisać kod w Pythonie i tak dalej i tak dalej. Mody są również poza zakresem, więc możesz zachować domyślny tryb Java i również je zignorować.

Okno w edytorze kodu to miejsce, w którym normalnie działają twoje szkice. Na obrazku jest puste, ponieważ nie ustawiliśmy żadnej właściwości, takiej jak rozmiar lub kolor tła, lub niczego nie narysowaliśmy.

Nie ma wiele do powiedzenia o edytorze kodu, to po prostu miejsce, w którym piszesz swój kod. Są numery wierszy (!) Starsze wersje Processing nie miały tego i nie możesz sobie wyobrazić, jak bardzo się ucieszyłem, gdy pierwszy raz je zobaczyłem.

Czarna skrzynka poniżej to konsola . Wykorzystamy go do wydrukowania rzeczy w celu szybkiego debugowania. Na karcie błędów obok konsoli pojawią się błędy. Jest to również nowa przydatna funkcja, która pojawiła się wraz z Przetwarzaniem 3.0. W starszych wersjach błędy były drukowane na konsoli i trudno było je śledzić.

Blok ustawień

Jak wspomniano wcześniej, bloki ustawień są wykonywane raz podczas uruchamiania programu. Możesz go używać do tworzenia konfiguracji i do rzeczy, które chcesz uruchomić tylko raz, na przykład do ładowania obrazów lub dźwięków. Oto przykładowy blok instalacyjny. Uruchom ten kod we własnym środowisku i zobacz wyniki dla siebie.

 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); }

Metody związane ze stylizacją (tło, wypełnienie, obrys) zostaną wyjaśnione w sekcjach właściwości i ustawień. Na razie musisz wiedzieć, w jaki sposób ustawienia i konfiguracje, które tutaj ustawiamy, wpływają na cały nasz szkic. Napisane tutaj kody są używane do ustawiania podstawowych zestawów reguł mających zastosowanie w całym szkicu. To, co powinieneś również zrozumieć w tej sekcji, to metody wymienione poniżej:

size() - Jak sama nazwa wskazuje, funkcja ta służy do konfiguracji rozmiaru naszego szkicu. Musi znajdować się w pierwszym wierszu bloku kodu konfiguracji. Może być używany w następujących formach:

  • rozmiar (szerokość, wysokość);
  • rozmiar (szerokość, wysokość, renderer);

Wartości szerokości i wysokości można podawać w pikselach. Funkcja rozmiaru przyjmuje trzeci parametr, renderer, który służy do ustawienia silnika renderującego, którego będzie używał nasz szkic. Domyślnie renderer jest ustawiony na P2D. Dostępne renderery to P2D (Przetwarzanie 2D), P3D (Przetwarzanie 3D, należy używać, jeśli Twoje szkice będą zawierały grafikę 3D) i PDF (grafika 2D jest rysowana bezpośrednio do pliku Acrobat PDF. Więcej informacji można znaleźć tutaj). Renderery P2D i P3D wykorzystują sprzęt graficzny zgodny z OpenGL.

fullScreen() — od Processing 3.0 funkcja fullScreen może być teraz używana zamiast funkcji size(). Podobnie jak funkcja size(), powinna również znajdować się w pierwszym wierszu bloku konfiguracji. Użycie jest następujące:

  • pełny ekran();
  • pełny ekran (wyświetlacz);
  • pełny ekran (renderer);
  • pełny ekran (wyświetlacz, renderer);

Jeśli użyjesz go bez żadnych parametrów, twój szkic przetwarzania będzie po prostu działał na pełnym ekranie i będzie działał na głównym ekranie. Parametr „wyświetlacz” jest używany do ustawienia, na którym ekranie będzie uruchamiany twój szkic. Na przykład, jeśli podłączysz zewnętrzne monitory do komputera, możesz ustawić zmienną wyświetlania na 2 (lub 3, 4 itd.), a twój szkic zostanie tam uruchomiony. Parametr „renderer” jest opisany w części size() powyżej.

Ustawienia Blokuj

To kolejna funkcja wprowadzona w nowej wersji Przetwarzania. Jest to blok kodu, podobnie jak setup i draw. Jest to przydatne, gdy chcesz zdefiniować metody size() lub fullScreen() ze zmiennymi parametrami. Konieczne jest również zdefiniowanie size() i innych właściwości stylizacji, takich jak smooth(), w tym bloku kodu, jeśli używasz środowiska innego niż własne IDE Processing, takiego jak Eclipse. Ale w większości przypadków nie będziesz go potrzebować, a już na pewno nie w tym artykule.

Rysuj blok

Nie ma nic specjalnego do powiedzenia o klocku do rysowania, ale wszystko jest w nim wyjątkowe. Rysuj blok to miejsce, w którym dzieje się cała magia. To serce twojego programu, bijące 60 razy na sekundę. Ten blok kodu zawiera całą logikę kodu. Tutaj zostaną zapisane wszystkie Twoje kształty, przedmioty itp.

Większość kodu, o którym będziemy rozmawiać w tym artykule, będzie pochodzić z bloku rysowania, dlatego ważne jest, aby jasno zrozumieć, jak działa ten blok kodu. Aby zademonstrować, oto coś, czego możesz spróbować. Po pierwsze zauważ, że możemy wypisać wszystko do konsoli za pomocą metod print() lub println() . Metody print drukują tylko do konsoli, jednak println drukuje i dołącza znak nowej linii na końcu, więc każda println() będzie drukować w oddzielnych wierszach.

Spójrz więc na następujący blok kodu. Najpierw spróbuj zgadnąć, co wydrukuje w konsoli. Następnie śmiało wypróbuj:

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

Jeśli zgadłeś „1 2 3 4…”, mam cię! Jest to jedno z nieporozumień w przetwarzaniu. Pamiętasz, że ten blok jest wielokrotnie wykonywany? Kiedy definiujesz tutaj zmienną, jest ona definiowana w każdej pętli w kółko. W każdej iteracji x jest ustawiane na 0, jest zwiększane o 1 i jest drukowane na konsoli. Dlatego otrzymujemy wynik „1 1 1 1…”. Ten przykład był dość oczywisty, ale może być mylący, gdy sprawy trochę się komplikują.

Nie chcemy, aby x zostało nadpisane, więc jak możemy to osiągnąć i uzyskać wynik „1 2 3 4…”? Używając zmiennych globalnych . To nic nadzwyczajnego, definiujemy zmienną tylko poza blokiem rysowania, aby nie była ponownie definiowana przy każdej iteracji. Również zasięg zmiennej będzie osiągalny w całym szkicu. Zobacz kod poniżej:

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

Możesz zadać sobie pytanie, jak może działać zmienna zdefiniowana poza naszymi blokami? I dlaczego nie użyliśmy bloku setup(), skoro jest on wykonywany raz na początku? Odpowiedź jest związana z programowaniem obiektowym i zakresami, jeśli nie jesteś zaznajomiony, możesz pominąć ten akapit. Zapoznaj się z częścią, w której wyjaśniłem, w jaki sposób kod przetwarzania jest konwertowany na Javę. Pamiętasz, jak zostały zapakowane w klasę Java? Zmienne, które piszemy poza blokami setup() i draw(), również są zawijane, dlatego są traktowane jako pola zewnętrznej klasy, która otacza nasz kod. Użycie x+=1 jest tym samym, co użycie this.x+=1. Działa to również tak samo w naszym przypadku, żadna zmienna o nazwie x nie jest zdefiniowana w zakresie draw() i przeszukiwany jest zewnętrzny zakres, który jest zakresem this . A dlaczego nie zdefiniowaliśmy naszej zmiennej x w sekcji setup()? Gdybyśmy to zrobili, zakres, w którym zdefiniowano x, byłby zakresem funkcji setup i nie byłby dostępny z bloku draw().

Rysowanie kształtów i tekstów

Teraz wiemy, jak skonfigurować nasz szkic za pomocą bloku konfiguracji i wiemy, co robi blok rysowania. Nadszedł więc czas, aby uzyskać trochę wizualizacji i poznać zabawne części przetwarzania: jak rysować kształty.

Zanim zaczniemy, powinieneś zrozumieć układ współrzędnych . W Przetwarzaniu określasz współrzędne każdego obiektu, który rysujesz na ekranie. Układ współrzędnych jest w pikselach. Początek (tj. punkt początkowy) to lewy górny róg, powinieneś podać swoje współrzędne względem tego punktu. Kolejną rzeczą, o której powinieneś wiedzieć, jest to, że każdy kształt ma inny punkt odniesienia. Na przykład rect() ma swój lewy górny róg jako punkt odniesienia. Dla ellipse() jest to środek. Te punkty odniesienia można zmienić za pomocą metod takich jak rectMode() i ellipseMode(), które wyjaśnię w sekcji właściwości i ustawienia. Podano przykładowy rysunek, który pomoże ci lepiej zrozumieć.

Ten artykuł jest podstawowym omówieniem przetwarzania, więc nie będziemy dotykać żadnych skomplikowanych kształtów, takich jak wierzchołki lub kształty 3D. Podstawowe kształty 2D w rzeczywistości wystarczą nam do stworzenia własnej gry. Na rysunku widać przykłady rysowania kształtów. Każdy kształt ma swoją własną składnię do utworzenia, ale podstawową ideą jest podanie albo jego współrzędnych, albo rozmiaru, albo obu. Oto kilka kształtów, które powinieneś znać (dla wszystkich wartości podanych poniżej „x” i „y” oznaczają współrzędne x i y w pikselach, „w” i „h” oznaczają wartości szerokości i wysokości również w pikselach):

point() - Prosty punkt, potrzebuje tylko jednej współrzędnej. Stosowanie:

  • punkt(x, y)
  • point(x, y, z) - W przypadku korzystania z 3 wymiarów.

line() - Do tworzenia linii. Możesz utworzyć linię tylko z punktem początkowym i końcowym. Stosowanie:

  • linia(x1, y1, x2, y2)
  • line(x1, y1, z1, x2, y2, z2) - Jeśli używasz 3 wymiarów.

triangle() - Do tworzenia trójkąta. Użycie: trójkąt (x1, y1, x2, y2, x3, y3)

quad() — do tworzenia czworoboku. Użycie: quad(x1, y1, x2, y2, x3, y3, x4, y4)

rect() - Do tworzenia prostokąta. Punktem odniesienia jest domyślnie lewy górny róg (patrz rysunek). Oto użycie:

  • prostokąt (x, y, w, h)
  • rect(x, y, w, h, r) - 'r' oznacza promień w pikselach, aby rogi były zaokrąglone.
  • rect(x, y, w, h, tl, tr, br, bl) - Promień odpowiednio dla górnego lewego, górnego prawego, dolnego prawego i dolnego lewego narożnika. To jest również w pikselach.

ellipse() - Do tworzenia kształtu elipsy. Służy również do tworzenia okręgu, należy podać takie same wartości szerokości i wysokości. Punktem odniesienia dla tego kształtu jest domyślnie środek (patrz rysunek). Oto użycie:

  • elipsa(x, y, w, h)

arc() — rysuje łuk. Stosowanie:

  • arc(x, y, w, h, start, stop) - 'start' i 'stop' służą do określenia kąta rozpoczęcia i zakończenia rysowania łuku. Wartości podane są w radianach. Można używać stałych, takich jak „PI, HALF_PI, QUARTER_PI i TWO_PI”.
  • arc(x, y, w, h, start, stop, mode) - zmienna 'mode' służy do określenia stylu renderowania łuku (string). Dostępne opcje to „OPEN, AKORD, PIE”. OPEN pozostawi niewyciągnięte części bez obramowania. AKORD uzupełni nienarysowane części obramowaniem. PIE sprawi, że twój łuk będzie wyglądał jak wykres kołowy.

Wyświetlanie tekstów na ekranie jest podobne do wyświetlania kształtów, podstawową ideą jest określenie współrzędnej, w której chcesz, aby tekst był wyświetlany. Jednak w obsłudze tekstów jest coś więcej. Większą kontrolę nad tekstami uzyskasz po sekcji właściwości i ustawień, w której dowiesz się, jak stosować ustawienia i właściwości do obiektów. Na razie pokażę podstawy wyświetlania tekstów. Można to zrobić na wiele sposobów, pokażę tylko najważniejsze.

text() - Wyświetla teksty. Stosowanie:

  • text(c, x, y) - 'c' oznacza znak, zostanie wyświetlony dowolny znak alfanumeryczny.
  • text(c, x, y, z) - W przypadku pracy z 3 wymiarami.
  • text(str, x, y) - 'str' to ciąg znaków do wyświetlenia.
  • text(str, x, y, z) - W przypadku pracy z 3 wymiarami.
  • text(num, x, y) - 'num' to wyświetlana wartość liczbowa.
  • text(num, x, y, z) - W przypadku pracy z 3 wymiarami.

Właściwości i ustawienia

Pierwszą rzeczą, którą należy wyjaśnić w tej sekcji, byłaby logika ustawiania właściwości obiektów. Kolor wypełnienia, kolor tła, obramowanie, szerokość obramowania, kolor obramowania, wyrównanie kształtów, style obramowania itp. to tylko niektóre przykłady tych właściwości.

Kiedy ustawiasz właściwość, musisz pamiętać, że kod będzie wykonywany od góry do dołu . Powiedzmy, że ustawisz właściwość „fill” na kolor czerwony, wszystkie obiekty narysowane poniżej tej linii będą wypełnione kolorem czerwonym, dopóki nie zostanie nadpisany przez inną właściwość fill. To samo dotyczy innych właściwości, jednak pamiętaj, że nie wszystkie właściwości będą się nadpisywać. Na przykład właściwość „stroke” nie zastępuje właściwości „fill”, zamiast tego działają razem. Oto wizualna reprezentacja, aby zrozumieć logikę:

Jak widać na obrazku, pierwsza linia ustawia kolor wypełnienia na czerwony, a druga linia ustawia kolor obrysu na niebieski. Mamy teraz dwa aktywne ustawienia: wypełnij czerwone i niebieskie obrysy. Zgodnie z oczekiwaniami, niezależnie od tego, jaki obiekt znajduje się w następnym wierszu, zostanie on wypełniony kolorem czerwonym i będzie miał niebieskie obrysy (jeśli dotyczy). Możesz dalej badać obraz w ten sposób, a zrozumiesz logikę.

Oto kilka podstawowych właściwości i ustawień, które są powszechnie używane:

Ustawienia stylizacji

fill() — Ustawia kolor wypełnienia obiektów. To ustawienie służy również do kolorowania tekstów. Na razie musimy tylko znać następujące użycie:

  • fill(r, g, b) - wartości koloru czerwonego, zielonego i niebieskiego jako liczby całkowite
  • fill(r, g, b, a) - Dodatkowa wartość alfa, max to 255

noFill() — Ustawia kolor wypełnienia na przezroczysty.

stroke() — Ustawia kolor obrysu obiektów. Właściwość Obrys ma zastosowanie do linii i obramowań wokół obiektów. Na razie musimy tylko znać następujące użycie:

  • stroke(r, g, b) - Wartości koloru czerwonego, zielonego i niebieskiego jako liczby całkowite.
  • stroke(r, g, b, a) - Dodatkowa wartość alfa, max to 255

noStroke() — Usuwa obrys.

strokeWeight() — Ustawia szerokość obrysu. Stosowanie:

  • strokeWeight(x) — x jest liczbą całkowitą i reprezentuje szerokość obrysu w pikselach.

background() — Ustawia kolor tła. Na razie musimy tylko znać następujące użycie:

  • background(r, g, b) - Wartości koloru czerwonego, zielonego i niebieskiego jako liczby całkowite.
  • background(r, g, b, a) - Dodatkowa wartość alfa, max to 255

Ustawienia wyrównania

ellipseMode() — Ustawia, gdzie przyjąć jako punkt odniesienia, wyrównując elipsy. Stosowanie:

  • ellipseMode(mode) - 'tryb' to parametr, oto dostępne parametry:
    • CENTRUM (domyślnie): Weź środek jako punkt odniesienia.
    • PROMIEŃ: To również przyjmuje środek jako punkt odniesienia, ale w tym trybie wartości w i h są traktowane jako połowa (tj. promień zamiast średnicy)
    • CORNER: Za punkt odniesienia przyjmuje lewy górny róg.
    • CORNERS: Ustawia pierwsze dwa parametry (x i y) jako położenie lewego górnego rogu, a ostatnie dwa parametry (w i h) jako położenie lewego dolnego rogu elipsy. Tak więc ten tryb „szerokość” i „wysokość” nie mają znaczenia. Myślenie o niej jako o elipsie(x_tl,y_tl,x_br,y_br) ma w tym przypadku większy sens.

rectMode() — Ustawia miejsce, w którym należy przyjąć jako punkt odniesienia, wyrównując prostokąty. Stosowanie:

  • rectMode(mode) - 'tryb' to parametr, oto dostępne parametry:
    • CENTRUM: Weź środek jako punkt odniesienia.
    • PROMIEŃ: Przyjmuje to również środek jako punkt odniesienia, ale w tym trybie wartości w i h są traktowane jako połowa
    • NAROŻNIK (domyślnie): Za punkt odniesienia przyjmuje lewy górny róg.
    • CORNERS: Ustawia pierwsze dwa parametry (x i y) jako położenie lewego górnego rogu, a ostatnie dwa parametry (w i h) jako położenie lewego dolnego rogu elipsy. Tak więc ten tryb „szerokość” i „wysokość” nie mają znaczenia. Myślenie o tym jako o rect(x_tl,y_tl,x_br,y_br) ma w tym przypadku większy sens.

Ustawienia związane z tekstem

textSize() — Ustawia rozmiar czcionki tekstu. Stosowanie:

  • textSize(size) — wartość całkowita żądanego rozmiaru.

textLeading() — Ustawia wysokość linii tekstu. Stosowanie:

  • textLeading(lineheight) - Wartość piksela odstępu między wierszami.

textAlign() — Ustawia miejsce, w którym należy przyjąć jako punkt odniesienia, wyrównując teksty. Stosowanie.

  • textAlign(alignX) - 'alignX' służy do wyrównania w poziomie. Dostępne: LEWO, ŚRODEK, PRAWO
  • textAlign(alignX, alignY) - 'alignY' służy do wyrównania w pionie. Dostępne: GÓRA, DÓŁ, ​​ŚRODEK, LINIA BAZOWA.

Animacje

Do tej pory nauczyliśmy się rysować obiekty i teksty. Ale problem z nimi polega na tym, że są statyczne. Jak sprawić, by się poruszały? Proste, zamiast podawać współrzędne jako liczby całkowite, używamy zmiennych, dzięki czemu możemy je zwiększać / zmniejszać . Ma sens? Spójrz na następujący kod:

 // 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; }

Widzisz, jak poradziliśmy sobie z animacją? Ustawiamy x i y jako zmienne globalne, a ich wartość początkową na 0. W naszej pętli rysowania stworzyliśmy naszą elipsę, ustawiliśmy kolor wypełnienia na czerwony, kolor obrysu na niebieski i współrzędne na x i y. Kiedy zwiększamy x i y, kula po prostu zmienia swoje położenie. Ale jest problem z tym kodem, czy możesz to zauważyć? Jako łatwe wyzwanie dla siebie, spróbuj ustalić, na czym polega problem i przetestuj go. Oto wynik:

Moim zamiarem, aby to się stało, było uświadomienie ci, jak działa zapętlona natura Przetwarzania. Zapoznaj się z przykładem w sekcji „Rysuj blok”, czy pamiętasz, dlaczego otrzymaliśmy „1 1 1…” zamiast „1 2 3…”? Z tego samego powodu, dla którego piłka zostawia ślady. Za każdym razem, gdy blok rysowania wykonuje iterację, x i y są zwiększane o 5, a zatem piłka jest rysowana ponownie do 5 pikseli w dół i w prawo. Jednak piłka została narysowana z poprzednich iteracji, pozostaje w widoku. Jak sprawić, by odeszły? Jakieś domysły?

Aby pozbyć się śladów pozostawionych przez kulkę, po prostu usuwamy tło (255) z bloku konfiguracji i wklejamy je jako pierwszą linię bloku rysowania. Kiedy nasz kod tła znajdował się w bloku konfiguracji, na początku był uruchamiany jeden raz, dzięki czemu nasze tło było białe. Ale to nie wystarczy, musimy ustawić nasze tło na białe w każdej pętli, aby zakryć kulki wylosowane z poprzednich pętli. Tło będące pierwszą linią oznacza, że ​​działa jako pierwsze, staje się warstwą bazową. Na każdej pętli nasze płótno jest pomalowane na biało, a nowe elementy rysują się na białym tle. Więc nie mamy żadnych znaków.

To jest idea animowania rzeczy w Przetwarzaniu, programowej manipulacji współrzędnymi obiektów w celu zmiany ich lokalizacji. Ale jak będziemy robić wymyślne rzeczy, takie jak trzymanie piłki na ekranie? A może wprowadzenie grawitacji? Nauczę się tego w dalszej części tego artykułu. Nauczymy się próbując i budując. Dowiemy się jak to zrobić i od razu zastosujemy je w naszej grze. Na koniec będziemy mieli kompletną, grywalną i miejmy nadzieję zabawną grę.

Interakcje klawiatury i myszy

Interakcje klawiatury i myszy w Przetwarzaniu są bardzo łatwe i proste. Istnieją metody, które możesz wywołać dla każdego zdarzenia, a to, co napiszesz, zostanie wykonane raz, gdy wystąpi zdarzenie. Istnieją również zmienne globalne, takie jak mousePressed i keyPressed, których możesz użyć w swoim bloku rysunkowym, aby skorzystać z pętli. Oto niektóre metody z objaśnieniami:

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

Jak widać, dość łatwo jest sprawdzić, czy kliknięto myszą lub który klawisz jest wciśnięty. Dostępnych jest jednak więcej opcji dla zmiennych mousePressed i keyCode. Dostępne opcje dla mousePressed to LEWO, PRAWO i ŚRODEK. Istnieje wiele innych dostępnych dla keyCode ; GÓRA, DÓŁ, ​​LEWO, PRAWO, ALT, CONTROL, SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC i DELETE.

Jedną rzeczą, którą należy wiedzieć o zmiennych myszy, a będziemy jej często używać, jest to, jak uzyskać współrzędne myszy. Aby uzyskać dokładne współrzędne kursora, możemy użyć zmiennych mouseX i mouseY bezpośrednio w bloku draw(). Wreszcie, istnieje wiele innych przydatnych metod, którym powinieneś się przyjrzeć. Wszystkie są udokumentowane w Odniesieniu do Przetwarzania.

Wniosek

Powinieneś już zapoznać się z Przetwarzaniem. Jeśli jednak się tu zatrzymasz, cała ta wiedza odleci . Gorąco polecam, abyś kontynuował ćwiczenia, bawiąc się tym, czego się nauczyłeś. Aby pomóc Ci ćwiczyć, udostępnię Ci dwa ćwiczenia. Powinieneś zrobić wszystko, co w twojej mocy, aby zrobić to sam. Jeśli utkniesz, Google i Processing Reference powinny być Twoimi najlepszymi przyjaciółmi. Podam kod do pierwszego, ale przeglądanie ich powinno być ostatnią rzeczą, którą zrobisz.

Zalecane ćwiczenie 1

Powinieneś zrobić 4 kulki w różnych kolorach , zaczynając od 4 rogów ekranu, poruszając się przez środek z różną prędkością . Po kliknięciu i przytrzymaniu przycisku myszy kulki powinny zamarznąć . A kiedy puścisz mysz, kulki mogą wrócić do swojej początkowej pozycji i poruszać się dalej. Więc szukam czegoś takiego.

Po wypróbowaniu ćwiczenia możesz sprawdzić kod tutaj.

Zalecane ćwiczenie 2

Pamiętasz słynny wygaszacz ekranu DVD, na którym logo DVD odbija się po ekranie i wszyscy desperacko czekaliśmy, aż trafi w róg? Chcę, żebyś powielił ten wygaszacz ekranu, ale tylko za pomocą prostokąta zamiast logo DVD. Po uruchomieniu aplikacji ekran powinien być czarny, a prostokąt powinien zaczynać się w losowym miejscu. Za każdym razem, gdy prostokąt uderza w róg, powinien zmieniać swój kolor (i oczywiście kierunek). Kiedy poruszasz myszą, prostokąt powinien zniknąć, a kolor tła powinien zmienić się na biały (to wygaszacz ekranu, prawda?). Nie będę podawać kodu tego ćwiczenia w tym artykule. Powinieneś postarać się, aby go zaimplementować, a kod zostanie podany w drugiej części tego artykułu.

Opublikowano drugą część ostatecznego przewodnika po Przetwarzaniu, samouczka krok po kroku, jak zbudować prostą grę.

Dalsza lektura na blogu Toptal Engineering:

  • Jak podejść do pisania tłumacza od podstaw