Kurs programowania w Processing - #1 - Wstęp, kształty, debugger

[Leoneq]

Ten artykuł jest częścią serii "Kurs programowania w Processing"

• #1 - Wstęp, kształty, debugger
• #2 - Piksele 2D oraz interaktywność
• #3 - Tekst, pliki, dźwięk, przekształcenia
• #4 - OpenGL, Arduino!

Czy kiedykolwiek miałeś potrzebę podłączenia Arduino z komputerem? Pokazać dane z czujników w efektowny i czytelny sposób? A może zrobić z komputera panel sterowania do nowego robota? Albo po prostu pobawić się obrazem i dźwiękiem - do tego wszystkiego bowiem, możemy wykorzystać środowisko o nazwie Processing.

Czym jest Processing?

logo programu Processing

Krótko mówiąc, Processing to język programowania wraz z IDE, podobnie jak Arduino. Różnica jest taka, że zamiast fizycznej płytki dostajemy własne okienko, "płótno", po którym możemy rysować, klikać, co tylko zechcemy. Jedni wykorzystują to do projektowania interfejsu dla urządzeń (np. popularny projekt radaru na HC-SR04), drudzy wykorzystują to do tworzenia sztuki elektronicznej. Prostota języka i łatwość debugowania zachęca wielu ludzi do skorzystania z tego narzędzia.

Ten artykuł bierze udział w naszym konkursie! 🔥
Na zwycięzców czekają karty podarunkowe Allegro, m.in.: 2000 zł, 1000 zł i 500 zł.

Potrafisz napisać podobny poradnik? Opublikuj go na forum i zgłoś się do konkursu!
Czekamy na ciekawe teksty związane z elektroniką i programowaniem. Sprawdź szczegóły »

Dlaczego Processing?

Jak już wspomniałem, przede wszystkim Processing jest łatwy i intuicyjny, a składnia jest podobna do C++, jak Arduino. Samo środowisko jest oparte o Javę, więc aplikacja może bez problemu zadziałać zarówno na Windowsie, jak i na Linuxie. Aplikacje napisane w Processingu można nawet skompilować do pliku wykonywalnego, aby uruchamiać ją "samodzielnie". Okienko, które jest naszym płótnem, może wyłapywać wejście z klawiatury, myszki, komunikować się z Arduino, obsługiwać pliki, dźwięk, a przede wszystkim, cały projekt jest objęty licencją GPL (opensource)! Wszystkie te czynniki przemawiają za Processingiem, a szczególnie dla hobbystów.

Co mogę zrobić używając Processingu?

Tutaj, podobnie jak w przypadku Arduino, ogranicza nas tylko wyobraźnia. Radar, panel sterujący, analizator stanów logicznych, czy kalkulator funkcji kwadratowej - wszystko zależy od nas. Także program ten może się przydać i do tworzenia aplikacji, i do animacji, i symulacji, dla hobbystów, nauczycieli i uczniów, a przede wszystkim - dla Ciebie!

Środowisko

Plik instalacyjny pobieramy z tej strony. Wybieramy odpowiedni system, pobieramy i instalujemy - po krótkim czasie, przywita nas okienko z nowym szkicem: 

Wygląda znajomo, prawda? Cóż, tak działa magia oprogramowania rozpowszechnianego na licencji GNU GPL. Arduino IDE jak widać mocno bazuje na IDE Processingu, co dla ludzi którzy wcześniej korzystali z Arduino IDE tylko ułatwi sprawę. Tak więc podobnie jak Arduino IDE, Processing składa się głównie z okna edytora tekstu, konsoli na dole, przycisku “Uruchom” i “Stop”. Konsolę możemy przełączać także z listą błędów i ostrzeżeń. Te będą się pojawiać jeszcze przed skompilowaniem, co pozwoli zaoszczędzić trochę czasu:

W pasku na górze, warto zwrócić uwagę na opcję wyeksportowania programu (File > Export Application), debugera (o którym za chwilę), narzędziami. Do omówienia zostały opcje po prawej:

Przycisk z “motylkiem” włączy debuger. Pozwoli on podejrzeć nam, jak działa program, a co za tym idzie – o wiele szybciej wyłapać potencjalny błąd. Zakładka “Java” pozwala wybrać moduł processingu, ponieważ samo IDE pozwala na wiele więcej:

Wielu opcji niestety nie omówię w kursie, ale warto wiedzieć, że szkice w Processingu mogą być uruchamiane w przeglądarce (p5.js), można edytować shadery, tworzyć aplikacje pod Androida czy w języku R. Także po omówieniu IDE – pora napisać pierwszy program. A może od razu by tak nacisnąć przycisk “Start”... ?

Po uruchomieniu “pustego” programu, dostaliśmy puste okienko... także w przeciwieństwie do Arduino, nie są wymagane funkcje setup() i loop(), chociaż zaraz użyjemy ich odpowiedników:

void setup()
{
size(200, 200);
stroke(0);
background(255);
circle(100, 100, 40);
}

Tak więc – funkcja setup() wykonuje się raz na początku programu, tak jak w Arduino. Najczęściej będziemy w niej inicjalizować pewne rzeczy, w tym przypadku - kolor tła i kreski. Zdefiniowaliśmy także rozmiar okna programu, który powinniśmy zawsze dawać na początku programu.

size(x, y);

zmieni rozmiar ekranu na szerokość (x), i wysokość (y), w pikselach.

stroke(w);

zmieni kolor kreski, którą rysujemy kształty. “w” określi intensywność w skali czarnobiałej (0 to czarny, 255 to biały).

background(w);

działa podobnie do wyżej opisanej funkcji, tylko że zmienia kolor tła.

Warto nadmienić, że zamiast "w" możemy dać 3 wartości "r", "g", "b" (a czasem nawet "a"), aby uzyskać kolorowy odcień:

background(0, 255, 0); //background(r, g, b), tutaj będzie kolor zielony
stroke(255, 0, 0); //stroke(r, g, b), tutaj będzie kolor czerwony

Ostatni wiersz:

circle(x,y,fi);

narysuje nam koło ze środkiem w x, y – WAŻNE: układ współrzędnych zaczyna się od lewego, górnego rogu ekranu. Pierwszym pikselem zawsze jest 0,0 (górny, lewy róg)  – a ostatni piksel, w dolnym, prawym rogu okna, będzie 199,199, czyli szerokość i wysokość ekranu – 1 (ponieważ liczymy od zera)!
"fi" jest średnicą koła (technicznie rzecz biorąc, wysokością i szerokością elipsy).

Tak więc, po uruchomieniu powyższego programu, powinniśmy otrzymać nasz czarny okrąg:

Zaledwie 6 linijek kodu, a już mamy pierwszy obraz! Spróbujmy zatem dodać ruch do tego obrazka – ot, żeby nasze koło śledziło nasz kursor. Do tego potrzebujemy kolejną funkcję draw(), która jest wykonywana co wyrenderowaną (narysowaną) klatkę naszego okienka (odpowiednik loop() w Arduino). Z racji tego że chcemy co klatkę narysować nowe koło, przenosimy tą funkcję do draw():

void setup()
{
size(200, 200);
stroke(0);
background(255);
}

void draw()
{
circle(mouseX, mouseY, 40);
}

"mouseX" oraz "mouseY" są “wbudowanymi” zmiennymi w Processingu, nie trzeba ich deklarować czy zmieniać, po prostu są dostępne “od ręki”. Processing udostępnia więcej takich zmiennych, o czym powiem w dalszej części kursu.

Także co narysowaną klatkę rysujemy nowe koło, ze środkiem tam, gdzie aktualnie przebywa nasz kursor. Efekt jest dość ciekawy:

Tylko dlaczego mamy tyle kółek? Cóż, co funkcję rysujemy nowe koło, które się nakłada na “stare”. Możemy temu zapobiec, np. czyszcząc ekran co nową klatkę:

void setup()
{
size(200, 200);
stroke(0);
}

void draw()
{
background(255);
circle(mouseX, mouseY, 40);
}

Powinniśmy mieć teraz tylko jedno koło śledzące nasz kursor:

Spróbuj teraz napisać program, który będzie rysował koło tam gdzie jest kursor, i zmieniał odcień koloru w zależności od wysokości myszki, np. Odcień czerwonego:

(na razie nie trzeba się przejmować że pozycja kursora będzie większa od 255, ponieważ okno programu jest mniejsze od 255x255px.)

W razie problemów, nie bój się spytać o pomoc w komentarzu!

Nadmienię też, że w Processingu możemy napisać "println" i "print", aby wyświetlić tekst w konsoli. Jest to tutaj mniej przydatna funkcja, ale niektórym osobom przesiadającym się z Arduino na pewno się przyda:

Przechodząc dalej, koła możemy rysować na wiele różnych sposobów, i może trochę profesjonalniej, bo funkcją pozwalającą rysować także elipsy:

ellipse(x, y, szerokość, wysokość);

stworzy elipsę ze środkiem w x, y od lewego górnego rogu ekranu, o podanej wysokości i szerokości. Ale! Jeżeli przed narysowaniem elipsy wywołamy

ellipseMode(CORNER);

wtedy x i y będą koordynatami górnego lewego rogu prostokąta, w który elipsa ta jest wrysowana. Jeżeli mamy koordynaty dwóch rogów – lewego górnego, i dolnego prawego, możemy na ich podstawie także narysować elipsę, wykorzystując

ellipseMode(CORNERS); 

wtedy funkcja rysująca przyjmie formę:

ellipse(x1, y1, x2, y2);

Ale elipsy nie są jedynymi kształtami które można rysować – do dyspozycji mamy przede wszystkim punkt (piksel):

point(x, y);

narysuje nam piksel w koordynatach x i y.

line (x1, y1, x2, y2);

narysuje nam linię z początkiem w punkcie A(x1, y1), a kończąc na punkcie B(x2, y2).

I oczywiście prostokąt:

rect(x, y, szerokość, wysokość);

I tutaj, ważne, domyślnie będzie on rysowany od lewego górnego rogu, w przeciwieństwie do elipsy, która była rysowana domyślnie od środka. Możemy to zmienić wykonując rectMode(CENTER), wtedy x i y będą koordynatami symetrycznego środka prostokąta. I podobnie jak z elipsą, możemy podać dwa rogi prostokąta:

rectMode(CORNERS);
rect(x1,y1,x2,y2);

Co więcej, jak dotąd zmienialiśmy kolor kreski, używając stroke(). Możemy także zmienić wypełnienie, używając fill()!

Debuger

Processing pozwala także na debugowanie programu. W praktyce pozwala on nam uruchamiać program w krokach, oraz podejrzeć wartości zmiennych. Także sprawdźmy, jak zachowa się poniższy, przykładowy program podczas takiego debugowania:

int zmienna = 0;

void setup()
{
size(200, 200);
stroke(0);
}

void draw()
{
println(zmienna);
background(255);
circle(mouseX, mouseY, 40);
zmienna++;
}

Kroki w których program się "zatrzymuje" możemy ustawiać klikając na numer wiersza:

Aby odznaczyć dany wiersz, możemy kliknąć ponownie na numer. Chociaż o wiele wygodniej będzie to robić skrótem klawiszowym, Ctrl+B, przełączającym dany wiersz. Aby uruchomić debuger, klikamy na przycisk "motylka":

Pojawiło nam się nowe okienko:

to okienko będzie dla nas bardzo ważne, ponieważ tam się będą wyświetlać wszystkie zmienne i parametry naszego programu. Aby sprawdzić czy wszystko działa, ustawiłem "breakpoint" w wierszu 12:

Teraz zostało nam uruchomić program.

Jak widzimy, pojawiło się okienko naszego programu, lecz szare. Co więcej, okienko ze zmiennymi "zapełniło" się nowymi wartościami, a zamiast rombu przy wierszu 12 – widnieje trójkąt. I wszystko idzie tak, jak chcemy: nasz program przerwał wykonywanie przed wierszem 12 – czyli pokolorowaniem tła na biało. W okienku ze zmiennymi widać naszą zmienną, "zmienna", na razie o wartości 0. Trójkącik przy linijce oznacza, że przy niej zatrzymał się program. Aby kontynuować jego działanie, wystarczy kliknąć "Continue", lub Ctrl+U:

Warto zaznaczyć, że obok przycisku "Continue" jest przycisk "Step". Pozwala on na kontynuowanie programu, ale nie do następnego "breakpointa", a tylko do następnej linijki. Naciskając ciągle ten przycisk, uruchomimy program linijka po linijce.

Po chwili zabawy debugerem możemy zauważyć, że nasza zmienna się zwiększyła:

Specjalnie dodałem także "println" w programie, żeby pokazać, że debuger jest lepszym rozwiązaniem od takiego "manualnego" debugowania, które pewnie wielu z nas stosowało w Arduino:

Debuger jest po prostu bardziej czytelny i przyjaźniejszy, pozwala kontrolować program na bierząco.

Na pewno też już każdy rozwinął "folder" o nazwie Processing w okienku ze zmiennymi. Zawierają się tam wszystkie zmienne "systemowe" naszego środowiska:

Znajdują się tam także wartości mouseX i mouseY, które wykorzystujemy w naszym programie, a także wiele innych zmiennych, które omówimy później.

Tak wygląda wstęp do programowania w Processingu, który jak widać, nie jest taki trudny. W następnej części omówimy szerzej interakcje z użytkownikiem, oraz więcej funkcji dot. Rysowania w 2D. Do czasu opublikowania następnej części proponuję w formie ćwiczenia napisać program, który będzie symulował odbijającą się piłeczkę:

Edytowano Kwiecień 14, 2021 przez Gieneq

[Treker (Damian Szymański)]

Artykuł został już zatwierdzony, więc od teraz jest widoczny publicznie 🙂

Kiedyś trochę bawiłem się Processingem - bardzo fajna sprawa. Szczególnie ciekawe projekty można budować, gdy połączy się go z Arduino, można bardzo łatwo wizualizować różne procesy. Tutaj przykład z płytką Genuino 101, która ma na pokładzie czujnik położenia

 

[Gieneq]

@Leoneq szykuje się ciekawa seria 🙂  Przypomniał mi się hexapod, którego składałem ponad 8 lat temu. Jak teraz o tym myślę, to bym do tego podszedł zupełnie inaczej. W samym Processingu wyznaczyłem coś na kształt kinematyki odwrotnej.

 

[TomR]

Bardzo dziękuję za podjęcie tematyki środowiska Processing. Poczynania pana Daniela Shiffmana, który jest "twarzą/ikoną" processing śledzę już od kilku lat. Jego energia, charyzma i "emocjonalne" podejście do tematu są tak duże, że wprost zarażają i powalają potencjalnych odbiorców. Cieszę się również, że omówiono processing w wersji standardowej, gdyż teraz środowisko migruje w kierunku interaktywnym w przeglądarce - p5.js oraz w połączeniu z pythonem.

[Polecacz 101]

Produkcja i montaż PCB - wybierz sprawdzone PCBWay!
   • Darmowe płytki dla studentów i projektów non-profit
   • Tylko 5$ za 10 prototypów PCB w 24 godziny
   • Usługa projektowania PCB na zlecenie
   • Montaż PCB od 30$ + bezpłatna dostawa i szablony
   • Darmowe narzędzie do podglądu plików Gerber
Zobacz również » Film z fabryki PCBWay