Podstawy Processingu. Diana Domańska. Uniwersytet Śląski

Transkrypt

1 Podstawy Processingu Diana Domańska Uniwersytet Śląski

2 Processing jest językiem programowania opartym na języku Java. Jest on nastawiony na aplikacje związane z grafiką, animacją. Projekt został zainicjowany w 2001 roku przez Bena Fry (MIT) i Casey a Reas (UCLA). Stworzyli oni Processing z myślą o artystach, dlatego też wprowadzono w tym języku wiele uproszczeń.

3 Processing jest językiem programowania opartym na języku Java. Jest on nastawiony na aplikacje związane z grafiką, animacją. Projekt został zainicjowany w 2001 roku przez Bena Fry (MIT) i Casey a Reas (UCLA). Stworzyli oni Processing z myślą o artystach, dlatego też wprowadzono w tym języku wiele uproszczeń. Środowisko do programowania w Processingu jest darmowe, wieloplatformowe (Windows, Linux, MacOS) i można je pobrać ze strony: Oprócz środowiska ze strony Processingu do programowania można użyć Eclipse lub Netbeans (opis konfiguracji można znaleźć w Internecie).

4 Ponieważ Processing jest oparty na Jave ie, więc wiele instrukcji ma taką samą postać w obu językach: komentarze, typy zmiennych, tablice, instrukcje warunkowe, pętle, operatory porównania, logiczne i arytmetyczne, definiowanie funkcji, definiowanie klas.

5 Przykładowy program w Processingu 1 size(300, 300); // wielkosc obszaru w oknie 2 line(0, 0, width, height);

6 Prymitywy graficzne 2D Punkt void point(int x, int y); void point(float x, float y); x, y współrzędne punktu.

7 Prymitywy graficzne 2D Punkt void point(int x, int y); void point(float x, float y); x, y współrzędne punktu. Linia void line(int x1, int y1, int x2, int y2); void line(float x1, float y1, float x2, float y2); x1, y1 współrzędne początku, x2, y2 współrzędne końca.

8 Trójkąt void triangle(int x1, int y1, int x2, int y2, int x3, int y3); void triangle(float x1, float y1, float x2, float y2, float x3, float y3); x1, y1, x2, y2, x3, y3 współrzędne wierzchołków trójkąta.

9 Trójkąt void triangle(int x1, int y1, int x2, int y2, int x3, int y3); void triangle(float x1, float y1, float x2, float y2, float x3, float y3); x1, y1, x2, y2, x3, y3 współrzędne wierzchołków trójkąta. Czworokąt void quad(int x1, int y1, int x2, int y2, int x3, int y3, int x4, int y4); void quad(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4); x1, y1, x2, y2, x3, y3, x4, y4 współrzędne wierzchołków czworokąta.

10 Prostokąt void rect(int x, int y, int s, int w); void rect(float x, float y, float s, float w); Interpretacja parametrów funkcji rect zależy od ustawionego trybu. Do zmiany trybu służy funkcja: void rectmode(int mode); mode przyjmuje jedną z wartości: CORNER (domyślny tryb), CORNERS, CENTER, RADIUS.

11 W trybie CORNER parametry funkcji rect interpretowane są jako: x, y współrzędne lewego górnego rogu, s szerokość, w wysokość. W trybie CORNERS parametry funkcji rect interpretowane są jako: x, y współrzędne jednego z rogów, s, w współrzędne przeciwległego rogu. W trybie CENTER parametry funkcji rect interpretowane są jako: x, y współrzędne środka, s szerokość, w wysokość. W trybie RADIUS parametry funkcji rect interpretowane są jako: x, y współrzędne środka, s połowa szerokości, w połowa wysokości.

12 Elipsa void ellipse(int x, int y, int s, int w); void ellipse(float x, float y, float s, float w); Podobnie jak w przypadku funkcji rect interpretacja parametrów zależy od trybu, który ustawiany jest za pomocą funkcji: void ellipsemode(int mode); mode przyjmuje jedną z wartości: CORNER, CORNERS, CENTER (domyślny tryb), RADIUS. Interpretacja jest taka sama jak w przypadku funkcji rectmode.

13 Łuk (wycinek elipsy) void arc(int x, int y, int s, int w, int start, int stop); void arc(float x, float y, float s, float w, float start, float stop); Pierwsze cztery parametry mają te same znaczenie jak w przypadku funkcji ellipse i można je zmienić za pomocą funkcji ellipsemode. start początkowy kąt łuku (w radianach), stop końcowy kąt łuku (w radianach).

14 1 size(200, 200); 2 3 point(20, 20); 4 line(50, 10, 70, 60); 5 triangle(100, 20, 80, 70, 130, 90); 6 quad(140, 30, 190, 50, 170, 90, 150, 70); 7 8 rectmode(center); 9 rect(30, 140, 30, 60); ellipse(90, 140, 60, 30); 12 arc(140, 140, 80, 40, 0, HALF_PI);

15 Rysowanie dowolnych wielokątów, łamanych otrzymujemy za pomocą funkcji: void beginshape(); void beginshape(int mode); void vertex(int x, int y); void vertex(float x, float y); void endshape(); void endshape(int mode); Każde wywołanie funkcji beginshape musi posiadać odpowiadające wywołanie funkcji endshape. Pomiędzy tymi funkcjami umieszczamy wywołania funkcji vertex, które definiują kolejne wierzchołki kształtu. W zależności od wartości parametru mode otrzymamy inny kształt.

16 Parametr mode funkcji beginshape może przyjąć następujące wartości: POINTS każde wywołanie vertex definiuje jeden punkt, LINES każda para vertex definiuje jedną linię, TRIANGLES każda trójka vertex definiuje jeden trójkąt, TRIANGLE_STRIP pasek trójkątów, TRIANGLE_FAN wachlarz trójkątów, QUADS każda czwórka vertex definiuje jeden czworokąt, QUAD_STRIP pasek czworokątów.

17 Parametr mode funkcji beginshape może przyjąć następujące wartości: POINTS każde wywołanie vertex definiuje jeden punkt, LINES każda para vertex definiuje jedną linię, TRIANGLES każda trójka vertex definiuje jeden trójkąt, TRIANGLE_STRIP pasek trójkątów, TRIANGLE_FAN wachlarz trójkątów, QUADS każda czwórka vertex definiuje jeden czworokąt, QUAD_STRIP pasek czworokątów. Parametr mode funkcji endshape może przyjąć tylko wartość CLOSE i oznacza domknięcie kształtu.

18 v 0 v 2 v 5 v 3 v 3 v 4 v 1 v 0 v 1 bez parametrów CLOSE v 2 v 4 v 0 v 1 v 3 v 2 POINTS v 1 v 0 v 4 v 2 v 3 v 5 v 0 v 1 v 5 v 6 v 1 v 3 v 5 v 7 LINES v 1 v 4 v 5 v 2 v 3 v 4 v 1 QUADS v 3 v 7 v 0 v 2 v v 6 4 QUAD_STRIP v 4 v 3 v 4 v 0 v 0 v 2 v 3 v 0 v 2 v 2 TRIANGLES TRAINGLE_STRIP TRIANGLE_FAN v 1

19 1 size(200, 200); 2 beginshape(); 3 vertex(10, 10); 4 vertex(80, 60); 5 vertex(30, 80); 6 endshape(); 7 8 beginshape(); 9 vertex(100, 20); 10 vertex(180, 100); 11 vertex(140, 100); 12 vertex(110, 80); 13 vertex(125, 60); 14 endshape(close); beginshape(triangles); 17 vertex(30, 100); 18 vertex(70, 150); 19 vertex(40, 145); 20 vertex(40, 100); 21 vertex(100, 140); 22 vertex(90, 120); 23 endshape();

20 Kolory, właściwości linii Interpretację składowych koloru zmienia funkcja void colormode(int mode); void colormode(int mode, int r); void colormode(int mode, int r1, int r2, int r3); void colormode(int mode, int r1, int r2, int r3, int r4); mode przestrzeń barw, przyjmuje jedną z wartości: RGB, HSB. r, r1, r2, r3, r4 zakresy składowych (oprócz typu int możemy podać również wartości typu float). Domyślną przestrzenią barw jest RGB.

21 W Processingu istnieje typ reprezentujący kolor: color. Do tworzenia koloru o podanych składowych służą funkcje color color(int gray); color color(int gray, int alpha); color color(int v1, int v2, int v3); color color(int v1, int v2, int v3, int alpha); color color(int hex); color color(int hex, int alpha); gray odcień szarości, alpha wartość składowej alfa, v1, v2, v3 składowe koloru (interpretacja zależy od użytej przestrzeni barw), hex reprezentacja szesnastkowa koloru np. #FFCC00.

22 Zmiana koloru tła void background(int gray); void background(int gray, int alpha); void background(int v1, int v2, int v3); void background(int v1, int v2, int v3, int alpha); void background(int hex); void background(int hex, int alpha);

23 Zmiana koloru tła void background(int gray); void background(int gray, int alpha); void background(int v1, int v2, int v3); void background(int v1, int v2, int v3, int alpha); void background(int hex); void background(int hex, int alpha); Zmiana koloru wypełnienia kształtu void fill(int gray); void fill(int gray, int alpha); void fill(int v1, int v2, int v3); void fill(int v1, int v2, int v3, int alpha); void fill(int hex); void fill(int hex, int alpha);

24 Zmiana koloru linii void stroke(int gray); void stroke(int gray, int alpha); void stroke(int v1, int v2, int v3); void stroke(int v1, int v2, int v3, int alpha); void stroke(int hex); void stroke(int hex, int alpha);

25 Zmiana koloru linii void stroke(int gray); void stroke(int gray, int alpha); void stroke(int v1, int v2, int v3); void stroke(int v1, int v2, int v3, int alpha); void stroke(int hex); void stroke(int hex, int alpha); Do wyłączenia wypełniania kształtów służy funkcja void nofill(); Zaś do wyłączenia rysowania linii służy funkcja void nostroke();

26 Ustawienie grubości linii void strokeweight(int g); void strokeweight(float g); g grubość linii (w pikselach).

27 Ustawienie grubości linii void strokeweight(int g); void strokeweight(float g); g grubość linii (w pikselach). Wygładzanie krawędzi void smooth();

28 Ustawienie grubości linii void strokeweight(int g); void strokeweight(float g); g grubość linii (w pikselach). Wygładzanie krawędzi void smooth(); Wyłączenie wygładzania krawędzi void nosmooth();

29 1 size(200, 200); 2 background(0); 3 4 stroke(255); 5 line(10, 10, 60, 50); 6 smooth(); 7 line(20, 10, 70, 50); 8 9 fill(255, 0, 0); 10 ellipse(120, 40, 40, 40); 11 nostroke(); 12 ellipse(170, 40, 40, 40); stroke(0, 255, 0); 15 strokeweight(2); 16 rect(20, 110, 50, 50); 17 nofill(); 18 rect(100, 110, 50, 50);