Korzystanie z Processing Pobierz, zainstaluj
Oprogramowanie Processing można pobrać ze strony internetowej Processing. Za pomocą przeglądarki internetowej przejdź do strony www.processing.org/download i kliknij łącze do systemu operacyjnego komputera. Oprogramowanie do Processing jest dostępne dla systemów Linux, Macintosh i Windows.
Najbardziej aktualne instrukcje instalacji dla twojego systemu operacyjnego znajdują się na tej stronie.
Środowisko
Processing Development Environment (PDE) składa się z prostego edytora tekstowego do pisania kodu, obszaru wiadomości, konsoli tekstowej, zakładek do zarządzania plikami, paska narzędzi z przyciskami typowych działań oraz szeregu menu. Po uruchomieniu programy otwierają się w nowym oknie, zwanym oknem wyświetlania. Fragmenty oprogramowania napisane przy użyciu Processing nazywane są szkicami. Te szkice są zapisywane w edytorze tekstu. Posiada funkcje wycinania / wklejania oraz wyszukiwania / zamiany tekstu. Obszar wiadomości zawiera informacje zwrotne podczas zapisywania i eksportowania, a także wyświetla błędy. Konsola wyświetla dane wyjściowe tekstu przez programy przetwarzające, w tym pełne komunikaty o błędach i dane wyjściowe tekstowe z programów z funkcjami print() i println(). Przyciski paska narzędzi umożliwiają uruchamianie i zatrzymywanie programów, tworzenie nowego szkicu, otwieranie, zapisywanie i eksportowanie.
Run: kompiluje kod, otwiera okno wyświetlania i uruchamia program w środku.
Stop: Kończy uruchomiony program, ale nie zamyka okna wyświetlacza.
New : Tworzy nowy szkic.
Open : Udostępnia menu z opcjami otwierania plików ze szkicownika, otwierania przykładu lub otwierania szkicu z dowolnego miejsca na komputerze lub w sieci.
Save: Zapisuje bieżący szkic w bieżącej lokalizacji. Jeśli chcesz nadać szkicowi inną nazwę, wybierz
„Zapisz jako” z menu Plik.
Export: eksportuje bieżący szkic jako aplet Java osadzony w pliku HTML. Folder zawierający pliki zostanie otwarty. Kliknij plik index.html, aby załadować oprogramowanie do domyślnej przeglądarki internetowej komputera.
Menu zapewniają tę samą funkcjonalność co pasek narzędzi, oprócz działań związanych z zarządzaniem plikami i otwieraniem materiałów referencyjnych.
File: polecenia do zarządzania plikami i eksportowania ich
Edit: Sterowanie edytorem tekstu (Cofnij, Ponów, Wytnij, Kopiuj, Wklej, Znajdź, Zamień itp.)
Sketch: polecenia do uruchamiania i zatrzymywania programów oraz dodawania plików multimedialnych i bibliotek kodów.
Tools: Narzędzia ułatwiające korzystanie z Processing (automatyczne formatowanie kodu, tworzenie czcionek itp.)
Help: Pliki referencyjne dla środowiska i języka
Wszystkie projekty Processing są nazywane szkicami. Każdy szkic ma własny folder. Główny plik programu dla każdego szkicu ma taką samą nazwę jak folder i znajduje się w środku. Na przykład, jeśli szkic ma nazwę Sketch_123, folder szkicu będzie nazywał się Sketch_123, a plik główny będzie miał
nazwę Sketch_123.pde. Rozszerzenie pliku PDE oznacza Processing Development Environment. Folder szkicu czasami zawiera inne foldery na pliki multimedialne i biblioteki kodów.
Po dodaniu czcionki lub obrazu do szkicu poprzez wybranie „Dodaj plik” z menu Szkic, tworzony jest folder danych. Możesz także dodać pliki do szkicu Processing, przeciągając je do edytora tekstu. Pliki obrazu i dźwięku przeciągnięte do okna aplikacji zostaną automatycznie dodane do folderu danych bieżącego szkicu. Wszystkie obrazy, czcionki, dźwięki i inne pliki danych załadowane do szkicu muszą znajdować się w tym folderze. Szkice są przechowywane w folderze Processing, który będzie znajdować się w różnych miejscach na komputerze lub w sieci, w zależności od tego, czy korzystasz z komputera PC, Mac lub Linux i od tego, w jaki sposób ustawione są preferencje. Aby zlokalizować ten folder, wybierz opcję „Preferencje” z menu Plik (lub z menu Processing na komputerze Mac) i poszukaj
„Skketchbook location”. Możliwe jest posiadanie wielu plików w jednym szkicu. Mogą to być Processing plików tekstowych (z rozszerzeniem .pde) lub pliki Java (z rozszerzeniem .java). Aby utworzyć nowy plik, kliknij przycisk strzałki po prawej stronie kart plików. Ten przycisk umożliwia tworzenie, usuwanie i zmianę nazw plików zawierających bieżący szkic. Możesz pisać funkcje i klasy w nowych plikach PDE i możesz pisać dowolny kod Java w plikach z rozszerzeniem JAVA. Praca z wieloma plikami ułatwia ponowne użycie kodu i dzielenie programów na małe podprogramy. Jest to omówione bardziej szczegółowo w Strukturze 4.
Export
Funkcja eksportu pakuje szkic do uruchomienia w przeglądarce internetowej. Kiedy kod jest eksportowany z Processing, jest konwertowany na kod Java, a następnie kompilowany jako aplet Java.
Po wyeksportowaniu projektu seria plików jest zapisywana w folderze o nazwie aplet, który jest tworzony w folderze szkicu. Wszystkie pliki z folderu szkicu są eksportowane w jednym pliku Java Archive (JAR) o tej samej nazwie co szkic. Na przykład, jeśli szkic ma nazwę Sketch_123, wyeksportowany plik będzie miał nazwę Sketch_123.jar. Folder apletów zawiera następujące elementy:
* index.html : plik HTML z osadzonym apletem oraz linkiem do kodu źródłowego i strony głównej Processing. Kliknij dwukrotnie ten plik, aby otworzyć go w domyślnej przeglądarce internetowej.
* Sketch_123.jar : Archiwum Java zawierające wszystkie niezbędne pliki do uruchomienia szkicu.
Obejmuje podstawowe klasy Processing, klasy napisane dla szkicu oraz wszystkie dołączone pliki multimedialne z folderu danych, takie jak obrazy, czcionki i dźwięki.
* Sketch_123.java : Plik JAVA wygenerowany przez preprocesor z pliku PDE. Jest to rzeczywisty plik, który jest kompilowany do apletu przez kompilator Java używany w przetwarzaniu.
* Sketch_123.pde : Oryginalny plik programu. Jest to link z pliku index.html.
* loading.gif : Plik obrazu wyświetlany podczas ładowania programu w przeglądarce internetowej.
Za każdym razem, gdy szkic jest eksportowany, zawartość folderu apletów jest usuwana, a pliki zapisywane od zera. Wszelkie zmiany wprowadzone wcześniej w pliku index.html zostaną utracone.
Pliki multimedialne niepotrzebne dla apletu należy usunąć z folderu danych przed wyeksportowaniem, aby zachować mały rozmiar pliku. Na przykład, jeśli w folderze danych znajdują się nieużywane obrazy, zostaną one dodane do pliku JAR, co niepotrzebnie zwiększy jego rozmiar. Oprócz eksportowania apletów Java do Internetu, Processing może także eksportować aplikacje Java na platformy Linux, Macintosh i Windows. Po wybraniu opcji „Eksportuj aplikację” z menu Plik foldery zostaną utworzone dla każdego z systemu operacyjnego określonego w Preferencjach. Każdy folder zawiera aplikację, kod źródłowy szkicu i wszystkie wymagane biblioteki dla określonej platformy. Dodatkowe i zaktualizowane
informacje o środowisku Processing są dostępne na stronie lub poprzez wybranie pozycji „Środowisko”
z menu Pomoc aplikacji Processing.
Przykład przejścia
Program Processing może być tak krótki, jak jeden wiersz kodu i tak długi, jak tysiące wierszy. Ta skalowalność jest jednym z najważniejszych aspektów języka. Poniższy przykład przedstawia skromny cel animacji sekwencji ukośnych linii jako sposób na poznanie niektórych podstawowych składników języka Processing. Jeśli dopiero zaczynasz programować, niektóre terminy i symbole w tej sekcji będą nieznane. Ten przewodnik stanowi zwięzły przegląd całej książki, z wykorzystaniem pomysłów i technik, które zostaną szczegółowo omówione później. Spróbuj uruchomić te programy w aplikacji Processing, aby lepiej zrozumieć, co robi kod. Processing zostało zaprojektowane, aby ułatwić rysowanie elementów graficznych, takich jak linie, elipsy i krzywe w oknie wyświetlacza. Kształty te są pozycjonowane liczbami określającymi ich współrzędne. Pozycja linii jest określona przez cztery liczby, dwie dla każdego punktu końcowego. Parametry użyte w funkcji line () określają pozycję, w której pojawia się linia. Początek układu współrzędnych znajduje się w lewym górnym rogu, a liczby rosną w prawo i w dół.
linia (10, 80, 30, 40); // Lewa linia linia (20, 80, 40, 40);
linia (30, 80, 50, 40); // Środkowa linia linia (40, 80, 60, 40);
linia (50, 80, 70, 40); // Prosta linia
Wizualne atrybuty kształtów są kontrolowane za pomocą innych elementów kodu, które ustawiają wartości koloru i szarości, szerokość linii i jakość renderowania
tło (0); // Ustaw czarne tło
skok (255); // Ustaw wartość linii na biały
strokeWeight (5); // Ustaw szerokość linii na 5 pikseli gładki(); // Gładkie krawędzie linii
linia (10, 80, 30, 40); // Lewa linia linia (20, 80, 40, 40);
linia (30, 80, 50, 40); // Środkowa linia linia (40, 80, 60, 40);
linia (50, 80, 70, 40); // Prosta linia
Zmienna, taka jak x, reprezentuje wartość; ta wartość zastępuje symbol x po uruchomieniu kodu. Jedna zmienna może wtedy kontrolować wiele funkcji programu
int x = 5; // Ustaw pozycję poziomą int y = 60; // Ustaw pozycję pionową
linia (x, y, x + 20, y-40); // Linia od [5,60] do [25,20]
linia (x + 10, y, x + 30, y-40); // Linia od [15,60] do [35,20]
linia (x + 20, y, x + 40, y-40); // Linia od [25,60] do [45,20]
linia (x + 30, y, x + 50, y-40); // Linia od [35,60] do [55,20]
linia (x + 40, y, x + 60, y-40); // Linia od [45,60] do [65,20]
Dodanie większej struktury do programu otwiera dalsze możliwości. Funkcje setup() i draw() umożliwiają programowi ciągłe działanie - jest to wymagane do tworzenia programów animacyjnych i interaktywnych. Kod wewnątrz setup() jest uruchamiany raz, gdy program pierwszy się uruchamia, a kod wewnątrz draw() działa nieprzerwanie. Jedna ramka obrazu jest rysowana do okna wyświetlania na końcu każdej pętli za pomocą draw(). W poniższym przykładzie zmienna x jest zadeklarowana jako zmienna globalna, co oznacza, że można ją przypisać i uzyskać do niej dostęp w dowolnym miejscu w programie. Wartość x wzrasta o 1 w każdej ramce, a ponieważ położenie linii jest kontrolowane przez x, są one rysowane w innym miejscu za każdym razem, gdy zmienia się wartość. To przesuwa linie w prawo. Linia 14 w kodzie to struktura if. Zawiera wyrażenie relacyjne porównujące zmienną x z wartością 100. Gdy wyrażenie jest prawdziwe, kod wewnątrz bloku (kod między {i} skojarzonymi ze strukturą if) jest uruchamiany. Gdy wyrażenie relacyjne jest fałszywe, kod wewnątrz bloku nie działa.
Gdy wartość x staje się większa niż 100, linia kodu wewnątrz bloku ustawia zmienną x na -40, powodując przeskakiwanie linii do lewej krawędzi okna.
int x = 0; // Set the horizontal position int y = 55; // Set the vertical position void setup() {
size(100, 100); // Set the window to 100 x 100 pixels }
void draw() { background(204);
line(x, y, x+20, y-40); // Left line
line(x+10, y, x+30, y-40); // Middle line line(x+20, y, x+40, y-40); // Right line x = x + 1; // Add 1 to x
if (x > 100) { // If x is greater than 100, x = -40; // assign -40 to x
} }
Gdy program działa ciągle, Processing przechowuje dane z urządzeń wejściowych, takich jak mysz i klawiatura. Dane te można wykorzystać, aby wpłynąć na to, co dzieje się w oknie wyświetlacza.
void setup() { size(100, 100);
}
void draw() { background(204);
// Assign the horizontal value of the cursor to x float x = mouseX;
// Assign the vertical value of the cursor to y float y = mouseY;
line(x, y, x+20, y-40);
line(x+10, y, x+30, y-40);
line(x+20, y, x+40, y-40);
}
Funkcja to zestaw kodu w programie, który wykonuje określone zadanie. Funkcje to potężne narzędzia programistyczne, które ułatwiają czytanie i zmianę programów. Funkcja diagonals () w poniższym przykładzie została napisana w celu narysowania sekwencji trzech linii ukośnych za każdym razem, gdy jest uruchamiana w funkcji draw (). Dwa parametry, liczby w nawiasach po nazwie funkcji, określają pozycję linii. Liczby te są przekazywane do definicji funkcji w wierszu 12 i są używane jako wartości zmiennych xiy w wierszach 13–15.
void setup() { size(100, 100);
noLoop();
}
void draw() { diagonals(40, 90);
diagonals(60, 62);
diagonals(20, 40);
}
void diagonals(int x, int y) { line(x, y, x+20, y-40);
line(x+10, y, x+30, y-40);
line(x+20, y, x+40, y-40);
}
Zmienne używane w poprzednich programach przechowują jeden element danych. Jeśli chcemy mieć 20 grup linii na ekranie, będzie to wymagało 40 zmiennych: 20 dla pozycji poziomych i 20 dla pozycji pionowych. Może to utrudniać programowanie i utrudniać czytanie programów. Zamiast używać wielu nazw zmiennych, możemy używać tablic. Tablica może przechowywać listę elementów danych jako pojedynczą nazwę. Struktura for może być używana do przełączania kolejno każdego elementu tablicy.
int num = 20;
int [] dx = new int [num]; // Zadeklaruj i utwórz tablicę int [] dy = new int [num]; // Zadeklaruj i utwórz tablicę void setup () {
rozmiar (100, 100);
dla (int i = 0; i <num; i ++) { dx [i] = i * 5;
dy [i] = 12 + (i * 6);
} }
void draw () { tło (204);
dla (int i = 0; i <num; i ++) { dx [i] = dx [i] + 1;
jeśli (dx [i]> 100) { dx [i] = -100;
}
przekątne (dx [i], dy [i]);
} }
void diagonals (int x, int y) { linia (x, y, x + 20, y-40);
linia (x + 10, y, x + 30, y-40);
linia (x + 20, y, x + 40, y-40);
}
Programowanie obiektowe to sposób na ułożenie kodu w obiekty, jednostki kodu zawierające zarówno dane, jak i funkcje. Ten styl programowania tworzy silny związek między grupami danych a funkcjami, które działają na tych danych. Funkcję diagonals () można rozszerzyć, czyniąc ją częścią definicji klasy.
Obiekty są tworzone przy użyciu klasy jako szablonu. Zmienne służące do pozycjonowania linii i ustawiania ich atrybutów rysowania następnie poruszają się wewnątrz definicji klasy, aby być ściślej powiązanym z rysowaniem linii.
Diagonals da, db;
void setup() { size(100, 100);
smooth();
// Inputs: x, y, speed, thick, gray da = new Diagonals(0, 80, 1, 2, 0);
db = new Diagonals(0, 55, 2, 6, 255);
}
void draw() { background(204);
da.update();
db.update();
}
class Diagonals {
int x, y, speed, thick, gray;
Diagonals(int xpos, int ypos, int s, int t, int g) { x = xpos;
y = ypos;
speed = s;
thick = t;
gray = g;
}
void update() { strokeWeight(thick);
stroke(gray);
line(x, y, x+20, y-40);
line(x+10, y, x+30, y-40);
line(x+20, y, x+40, y-40);
x = x + speed;
if (x > 100) { x = -100;
} } }
To krótkie omówienie służy wprowadzeniu, ale nie do pełnego wyjaśnienia, niektórych podstawowych pojęć omówionych w tym tekście. Wiele kluczowych pomysłów dotyczących pracy z oprogramowaniem zostało wspomnianych tylko krótko, a inne pominięto. Każdy temat jest szczegółowo omówiony w dalszej części.
