Processing 2 - Uniwersytet Śląski

Podstawy Processingu
Diana Domańska
Uniwersytet Śląski
Krzywe
W Processingu dostępne są dwa rodzaje krzywych kubicznych:
krzywe Béziera,
krzywe Catmulla-Roma.
Krzywe
W Processingu dostępne są dwa rodzaje krzywych kubicznych:
krzywe Béziera,
krzywe Catmulla-Roma.
Do rysowania krzywej Béziera służy funkcja:
void bezier(int x1, int y1, int cx1, int cy1, int cx2, int cy2,
int x2, int y2);
gdzie x1, y1, x2, y2 – współrzędne punktów kontrolnych, które są
interpolowane, cx1, cy1, cx2, cy2 – współrzędne punktów
kontrolnych kontrolujących kształt krzywej.
Drugim sposobem rysowania krzywej Béziera jest użycie funkcji:
void bezierVertex(int cx1, int cy1, int cx2, int cy2, int x2,
int y2);
pomiędzy funkcjami beginShape, endShape (obie funkcje wywołane
bez parametrów).
Za pomocą tej funkcji jesteśmy w stanie rysować krzywe sklejane.
Pierwsze wywołanie funkcji bezierVertex musi być poprzedzone
wywołaniem funkcji vertex, kolejne wywołania funkcji bezierVertex
będą brały ostatni punkt z poprzedniego wywołania funkcji.
Dokładność rysowania krzywej Béziera
void bezierDetail(int d);
gdzie d – dokładność (rozdzielczość), dodatnia liczba im większa
tym krzywa będzie rysowania dokładniej.
Dokładność rysowania krzywej Béziera
void bezierDetail(int d);
gdzie d – dokładność (rozdzielczość), dodatnia liczba im większa
tym krzywa będzie rysowania dokładniej.
Obliczenie współrzędnej (x lub y ) na krzywej
int bezierPoint(int a, int b, int c, int d, float t);
gdzie a, b, c, d – współrzędne (x lub y ) kolejnych punktów
kontrolnych, t – wartość parametru, dla którego określamy punkt
na krzywej, liczba z [0, 1].
Obliczanie współrzędnej (x lub y ) stycznej do krzywej w danym
punkcie
int bezierTangent(int a, int b, int c, int d, float t);
gdzie a, b, c, d – współrzędne (x lub y ) kolejnych punktów
kontrolnych, t – wartość parametru, dla którego określamy styczną
do krzywej, liczba z [0, 1].
1
2
3
size(200, 200);
noFill();
smooth();
4
5
bezier(10, 10, 50, 100, 70, 80,
150, 20);
6
7
8
9
10
11
beginShape();
vertex(20, 180);
bezierVertex(50, 100, 80, 120,
130, 150);
bezierVertex(150, 130, 170, 90,
190, 120);
endShape();
Krzywą Catmulla-Roma rysujemy za pomocą funkcji:
void curve(int x1, int y1, int x2, int y2, int x3, int y3, int
x4, int y4);
gdzie x1, y1, x2, y2,
punktów kontrolnych.
x3, y3, x4, y4
– współrzędne kolejnych
Krzywą Catmulla-Roma rysujemy za pomocą funkcji:
void curve(int x1, int y1, int x2, int y2, int x3, int y3, int
x4, int y4);
gdzie x1, y1, x2, y2,
punktów kontrolnych.
x3, y3, x4, y4
– współrzędne kolejnych
Podobnie jak w przypadku krzywej Béziera istnieje drugi sposób
rysowania krzywej Catmulla-Roma. Kolejne punkty kontrolne
krzywej definiowane są poprzez wywołanie funkcji:
void curveVertex(int x, int y);
pomiędzy wywołaniami funkcji
parametrów).
beginShape
i
endShape
(wywołane bez
Dokładność rysowania krzywej Catmulla-Roma
void curveDetail(int d);
gdzie d – dokładność (rozdzielczość), dodatnia liczba im większa
tym krzywa będzie rysowania dokładniej.
Dokładność rysowania krzywej Catmulla-Roma
void curveDetail(int d);
gdzie d – dokładność (rozdzielczość), dodatnia liczba im większa
tym krzywa będzie rysowania dokładniej.
Obliczenie współrzędnej (x lub y ) na krzywej
int curvePoint(int a, int b, int c, int d, float t);
gdzie a, b, c, d – współrzędne (x lub y ) kolejnych punktów
kontrolnych, t – wartość parametru, dla którego określamy punkt
na krzywej, liczba z [0, 1].
Obliczanie współrzędnej (x lub y ) stycznej do krzywej w danym
punkcie
int curveTangent(int a, int b, int c, int d, float t);
gdzie a, b, c, d – współrzędne (x lub y ) kolejnych punktów
kontrolnych, t – wartość parametru, dla którego określamy styczną
do krzywej, liczba z [0, 1].
1
2
3
size(200, 200);
noFill();
smooth();
4
5
curve(100, 40, 100, 60, 150, 60,
230, -80);
6
7
8
9
10
11
12
13
14
15
beginShape();
curveVertex(20, 180);
curveVertex(50, 100);
curveVertex(80, 120);
curveVertex(110, 150);
curveVertex(130, 130);
curveVertex(140, 90);
curveVertex(170, 120);
endShape();
Podstawowe transformacje 2D
Translacja
void translate(int x, int y);
void translate(float x, float y);
x, y
– współrzędne wektora translacji.
Podstawowe transformacje 2D
Translacja
void translate(int x, int y);
void translate(float x, float y);
x, y
– współrzędne wektora translacji.
Rotacja wokół początku układu współrzędnych
void rotate(float k);
k
– kąt obrotu (w radianach).
Skalowanie
void scale(float s);
void scale(float sx, float sy);
– współczynnik skali w obu kierunkach, sx – współczynnik skali w
kierunku x, sy – współczynnik skali w kierunku y .
s
Skalowanie
void scale(float s);
void scale(float sx, float sy);
– współczynnik skali w obu kierunkach, sx – współczynnik skali w
kierunku x, sy – współczynnik skali w kierunku y .
s
Ścinanie
void shearX(float kx);
void shearY(float ky);
kx – kąt (w radianach) ścięcia wokół osi x,
ścięcia wokół osi y .
ky
– kąt (w radianach)
Macierze przekształceń i operacje na ich stosie
Wypisanie aktualnej macierzy przekształcenia
void printMatrix();
Macierze przekształceń i operacje na ich stosie
Wypisanie aktualnej macierzy przekształcenia
void printMatrix();
Ustawienie macierzy identyczności (resetowanie macierzy
przekształcenia)
void resetMatrix();
Macierze przekształceń i operacje na ich stosie
Wypisanie aktualnej macierzy przekształcenia
void printMatrix();
Ustawienie macierzy identyczności (resetowanie macierzy
przekształcenia)
void resetMatrix();
Wymnożenie bieżącej macierzy przekształcenia przez podaną
macierz
void applyMatrix(float n00, float n01, float n02, float n10,
float n11, float n12);
n00-n12
– współczynniki macierzy (podawane wierszowo).
Umieszczenie bieżącej macierzy przekształceń na stosie
void pushMatrix();
Umieszczenie bieżącej macierzy przekształceń na stosie
void pushMatrix();
Zdjęcie macierzy ze szczytu stosu i ustawienie jej jako bieżącej
macierzy przekształcenia
void popMatrix();
1
size(100, 100);
2
3
4
fill(255, 0, 0); // czerwony
rect(0, 0, 50, 50);
5
6
7
8
9
pushMatrix();
translate(40, 40);
fill(0, 255, 0); // zielony
rect(0, 0, 50, 50);
10
11
12
13
14
translate(10, 0);
fill(255, 255, 0); // zolty
rect(0, 0, 20, 20);
popMatrix();
15
16
17
fill(0, 0, 255); // niebieski
rect(0, 0, 20, 20);
18
19
20
21
translate(40, 0);
fill(255, 0, 255); // rozowy
rect(0, 0, 20, 20);