Winkel und Wellen


Processing 2.0

Für die Erstellung von Grafiken sind Sinus-Kurven und Spiralen von essentieller Bedeutung. Mit Processing sind diese Formen sehr einfach umzustzen.

Zuerst aber etwas Mathematik. Winkel können in Grad ° und in Rad angegeben werden, wobei eine volle Umdrehung 360° oder 2 π (PI) Rad entspricht. π ist also 3,14. In Processing gibt es dafür die Konstanten PI, QUARTER_PI, HALF_PI und TWO_PI.

Zum Umrechnen dienen die Funktionen radians() – rechnet Grad in Rad, oder degrees() – rechnet Rad in Grad um.

sin und cos

Immer wenn in Processing ein Winkel anzugeben ist, wird dieser vom Programm in Rad erwartet. Wenn man lieber in Grad arbeitet, muss man ihn eben umrechnen (mit radians()).

Beispiel: Sinus starte Applet

size (300,300);
noStroke();

float winkel = 0.0;
for (int x=0; x<= width; x+=1) { //die Schleife ist notwendig, um alle x-Werte zu zeichnen.
fill(0);
float y= 150 + (-sin(radians(winkel))*50.0);//berechnet die y-Werte für eine Sin-Kurve
rect(x,y,1,1);
fill(160);
y= 150 + (-cos(radians(winkel))*20.0);//berechnet die y-Werte für eine Cos-Kurve
rect(x,y,1,1);
winkel += 1; //definiert die Skalierung der Wellen
}

Mit der Sinus- und Cosinus-Funktion kann man auch Kreise und Spiralen aus Objekten generieren.

Beispiel: Kreis starte Applet

noStroke();

size(300,300);
int radius =120;
for (int grad =0; grad<360; grad +=12) {
float winkel = radians(grad);
float x = 150 + (cos(winkel)*radius);
float y =150 + (sin(winkel)*radius);
ellipse(x,y,15,15);
}

Beispiel Spirale: starte Applet

noStroke();

size(300,300);
int radius =10;
for (int grad =0; grad<3600; grad +=12) {
float winkel = radians(grad);
float x = 150 + (cos(winkel)*radius);
float y =150 + (sin(winkel)*radius);
ellipse(x,y,15,15);
radius += 2;
}

Hier wird einfach für jeden Winkel der Radius erhöht. Das bewirkt, dass aus dem Kreis eine Spirale wird.

Aufgabe: Ändere das Programm so um, dass es eine schöne Spirale zeichnet.

Beispiel Vieleck: starte Applet

int ecken = 5; //Anzahl der Ecken!
int winkel;// wird später aus der Anzahl der Ecken berechnet
float x1, y1, x2, y2;

void setup() {
size(300, 300);
}

void draw() {
//die 2 folgenden Anweisungen lassen die Objekte nach kurzer Zeit verblassen
fill(255, 20);
rect(0, 0, width, height);
//Aufruf der Funktion mit den Parametern:
//Eckenzahl, MauspositionX, MauspositionY, RadiusX, RadiusY
vieleck(ecken, mouseX, mouseY, 80, 80);
}
// Funktion zeichnet Vielecke
void  vieleck (int seiten, int x, int y, int radiusX, int radiusY) {

// winkel entspricht dem Abstander der Ecken in Grad
// z.B.: 3 Ecken:120°; 4 Ecken:90° usw.
winkel = (int) 360/seiten;
//die Schleife wird der Anzahl der Ecken entsprechend aufgerufen
//z.B.: 3 mal beim 3-Eck oder 4 mal beim 4_eck
for (int grade=0; grade<360; grade+=winkel) {
// erster Punkt
x1 =sin(radians(grade))*radiusX+(x);
y1 =cos(radians(grade))*radiusY+(y);

// zweiter Punkt
x2 =sin(radians(grade+winkel))*radiusX+(x);
y2 =cos(radians(grade+winkel))*radiusY+(y);

//zeichnet Linie zwischen Punkt 1 und Punkt 2
line(x1, y1, x2, y2);
}
}

In diesem Beispiel wird eine Funktion verwendet, um ein Vieleck mit beliebig vielen Punkten um die Mausposition am Bildschirm zu zeichnen. Dies wird erreicht, indem man den vollen 360°-Winkel durch die Anzahl der Eckpunkte des Vieleckes teilt.

z.B.: 3 Eckpunkte: 360/3 = 120°

Danach beginnen wir in einer Schleife bei Null° und addieren jeweils den Winkel, der bei der vorherigen Division herausgekommen ist. Bei 360° angekommen brechen wir die Schleife ab.

bei 3 Eckpunkten gibt die Schleife nach der Reihe die Winkel 0,120,240 aus.

Wir berechnen dann aus dem Sinus und dem Cosinus der 3 Winkel die Koordinaten der 3 Punkte des Dreiecks.

Der erste Punkt kommt unter der aktuellen Mausposition zu liegen, da wir die X-Achse mit dem Sinus und die Y-Achse mit dem Cosinus berechnen. Bei Null° bleibt also der X-Wert gleich, da der Sin von 0 ebenfalls 0 ist. Der Cos von 0 ist aber 1 und somit verschiebt sich der erste Punkt in pos. Y-Richtung nach unten. Dann werden die weiteren 2 Punkte nach dem gleichen Schema berechnet.

Um dann noch aus den einzelnen Punkten eine Form zu bekommen, brauchen wir in jedem Schleifendurchlauf noch einen weiteren Punkt, der entweder dem aktuellen um den Winkel voraus- oder nacheilt.

Advertisements

2 Kommentare

  1. Pingback: Processing Apps für Android – Optionsmenü « processing – tutorial

  2. Lukibuk

    Wie kann man ein regelmässiges Polygon erstellen?

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: