Processing Java Code verstehen

[sh_op_12]

Hallo zusammen
Ich lerne gerade Java und benutze Processing. Aktuell habe ich einen Code bei dem ich nicht alles verstehe, vielleicht kann mir jemand sagen ob meine aktuellen Kommentare zu dem Code stimmen und mir den Rest erklären, wäre super hilfreich. Gerade Zeile 25 und was in der for-Schleife passiert verstehe ich leider garnicht (Das ist nicht mein eigener Code!)

void setup() {

  size(800, 800); //Größe des Ausgabefensters

  noFill(); //Formen werden nicht gefüllt

  strokeWeight(1); //Strichstärke 1

  strokeColor = color(random(0,255), random(0,255), random(0,255)); //Gibt bei jedem mal ausführen eine andere Farbe zurück

  background(0); //Hintergrundfarbe

}


void draw() {

  if (mousePressed && mouseButton == LEFT) {  //wenn die Maus und die linke MausTaste gedrückt ist dann kann man anfangen die Formen zu malen

    push();

    translate(width / 2, height / 2); //Figur wird mittig im Fenster angezeigt


    int circleResolution = int(map(mouseY + 100, 0, height, 2, 10));

    int radius = mouseX - width / 2; //Radius der Form ist die x-Position der Maus - der Hälfte der Breite also mittig

    float angle = TAU / circleResolution; //Variable Winkel --> TAU (mathematische Konstante mit dem Wert 6,2831855.

                                          //Es ist die Kreiskonstante, die den Umfang eines Kreises mit seiner linearen Dimension in

                                          //Beziehung setzt, das Verhältnis des Umfangs eines Kreises zu seinem Radius. wird geteilt durch circleResolution (kreisuaflösung)


    stroke(strokeColor); //dem Strich wird Farbe zugeordnet


    beginShape(); //allow creating more complex forms

    for (int i = 0; i <= circleResolution; i++) { 

      float x = cos(angle * i) * radius;

      float y = sin(angle * i) * radius;

      vertex(x, y);
    }

    endShape();


    pop(); //restores these settings

  }

}

 

[mihe7]

int circleResolution = int(map(mouseY + 100, 0, height, 2, 10));

map: Der Wert mouseY+100 aus dem Intervall [0, height] wird auf das Intervall [2,10] abgebildet (skaliert).

Die Methode liefert einen Wert vom Typ float und daher wird der Wert per int(...) in einen Wert vom Typ int umgewandelt.

circleResolution+1 gibt an, wie viele Punkte des Kreises gezeichnet werden. Daher zählt das i der for-Schleife auch von 0 bis inkl. circleResolution.

In der for-Schleife werden einfach die x und y Koordinaten des Kreises berechnet und anschließend wird ein Punkt an (x,y) gezeichnet.

 

[sh_op_12]

map: Der Wert mouseY+100 aus dem Intervall [0, height] wird auf das Intervall [2,10] abgebildet (skaliert).

Die Methode liefert einen Wert vom Typ float und daher wird der Wert per int(...) in einen Wert vom Typ int umgewandelt.

circleResolution+1 gibt an, wie viele Punkte des Kreises gezeichnet werden. Daher zählt das i der for-Schleife auch von 0 bis inkl. circleResolution.

In der for-Schleife werden einfach die x und y Koordinaten des Kreises berechnet und anschließend wird ein Punkt an (x,y) gezeichnet.

Dankeschön👍

 

[sh_op_12]

Können Sie mir bei dem Code auch die Zeilen 16-21 erklären?

float 
radius1 = 200; //Radius großer Kreis
float radius2 = 155; //Radius kleiner Kreis

void setup(){
  size(800, 800); //Größe des Ausgabefensters
  noStroke(); //Keine Linien
  background(0);
}

void draw(){
  fill(10, 200); //Füllung der Kreise
  rect(0, 0, width, height); //line --> Rechteck erzeugen x und y Koordinate und Breite und Höhe (hier vom Ausgabefeld)
  fill(#EEFF12); //Farbe der Rechtecke
  translate(width / 2, height / 2); //Startet Form mittig im Ausgabefenster
  for(float ang1 = 0; ang1 < 180; ang1 += 5){
    float radian1 = radians(ang1); 
    pushMatrix(); 
    translate(radius1 * cos(radian1), radius1 * sin(radian1)); 
    for(float ang2 = 0; ang2 < 90; ang2 += 10){
      float radian2 = radians(ang2) - frameCount * 0.03 + radian1;
      ellipse(radius2 * cos(radian2), radius2 * sin(radian2), 2, 2);
    }
    popMatrix(); 
}

 

[mihe7]

Vorab muss man wissen, dass das Koordinatensystem durch eine Transformationsmatrix verändert werden kann, um es einmal einfach zu formulieren. Durch Methoden wie translate() wird diese Matrix und damit auch das Koordniatensystem verändert.

Damit erklären sich die Zeilen 18 und 24 im Zusammenhang mit Zeile 19: Durch das translate wird das Koordinatensystem verändert. Um diese Änderung zurückzunehmen, wird in Zeile 18 die "alte" Transformationsmatrix gesichert und in Zeile 24 wiederhergestellt.

Zu Schleife selbst: in der äußeren Schleife werden Winkel von 0 bis 180 (exkl.) in 5 Grad-Schritten durchlaufen. Der jeweils aktuelle Winkel wird in ang1 gespeichert. Zeile 17 wandelt den Winkel ins Bogenmaß um. Zeile 19 sorgt dafür, dass der Nullpunkt des Koordinatensystem verschoben wird und zwar im Verlauf der Schleife um den Winkel ang1 und der Länge radius1. Der Nullpunkt wandert also entlang eines Halbkreis in 5 Grad-Schritten.

In der inneren Schleife durchläuft nun ang2 Winkel von 0 bis 90 (exkl.) in 10 Grad-Schritten. Der Winkel wird nun zum Winkel der äußeren Schleife addiert, davon wird dann noch frameCount*0.3 subtrahiert. Das Ergebnis ist dann ein Winkel (im Bogenmaß) radian2. In Zeile 22 werden dann Kreise um den zuvor verschobenen Nullpunkt gezeichnet.