20. September 2012

Programming Basics, Tag 2 Übung, Ornamente zeichnen Das heutige Thema war Schleifen und Bedingungen. Die Theorie hörte sich noch einigermassen verständlich an. Als ich aber dann mit Hilfe von dieser Ornamente bauen sollte, hatte ich so meine Schwierigkeiten. Ich habe zuerst mit den Parametern rum gespielt und verschiedene Sachen ausprobiert. Unten habe ich davon einen Screenshot angehängt. Am Nachmittag hatte es aber plötzlich klick gemacht und ich konnte mein  abgeändertes Ornament bauen. Der eigentliche Auftrag  war es ein klassisches Ornamente zu bauen. Ich begann auch mit kreisen eine Fläche zu decken. Plötzlich sahen diese wie Uhren aus. Darum habe ich in die Ornamente Zeiger eingebaut. Jede dieser Uhren zeigt eine andere Zeit an. Der Hintergrund meiner Uhr ist im Ornamenten Stiel gemacht. Der Minuten- und Stundenzeiger bewegen sich von Uhr zu Uhr immer weiter. In der Mitte ist eine grosse Uhr zu sehen die auf den Mauszeiger reagiert. Das heisst, je nach dem wie nah der Mauszeiger ist, umso mehr kann der User die Uhrzeit verändern. Screenshots:                Hier der Code:

int winkel = 0; //Winkel Variable definiert

void setup()
{
 frameRate(60); //frames per second
 size (600,600); //Fläche
 smooth(); //antialiasing
 strokeWeight(15); //linienbreite
}

void draw()
{
 background(0,0,0); //BG Colour
 int winkel1 = 0;
 for(int x = 0; x <= width; x+=60) //For Schleife damit die Figur um 60 nach rechts gezählt wird
 {
 for(int y = 0; y <= height; y+=60) //For Schleife damit die Figuer 60 nach unten verschoben wird
 {
 stroke(0); //Strichfarbe schwarz
 pushMatrix(); //damit der Normalzustand von der Fläche wieder hergestellt wird
 translate(x,y); //Verschiebe die Figur mit den Werten x und y die in der Schleife definiert wurden
 scale(.4); // mit Scale rechne ich die Figur * 0.4
 kreis(); // funktionsaufruf von der Funktion kreis

 winkel1 = winkel1 + 1; //der winkel1 wird definiert
 rotate (radians(winkel1));
 zeiger(); //funktionsaufruf von zeiger

 winkel1 = winkel1 + 20; //Ich sage das der Winkel + 20 zählen soll
 rotate (radians(winkel1)); // ich weise der Rotation den winkel zu
 zeiger2(); // funktionsaufruf von zeiger 2

 popMatrix(); //schliesse die aufgerufenen Daten von pushMatrix ab
 }
 }
 float radius = dist(mouseX,mouseY,width/2,height/2); // rechne die distanz vom mousecursor zum fensterzentrum aus
 radius = map(radius,0,width,1,2); // rechne aus in welchem bereich der radius am schluss sein sollte

 translate (300,300);
 strokeWeight(5);
 kreis();

 rotate(calcAngle());
 winkel = winkel + 1;
 rotate (radians(winkel));
 zeiger(); //funktionsaufruf von zeiger

 winkel = winkel + 5; //Ich sage das der Winkel + 20 zählen soll
 rotate (radians(winkel)); // ich weise der Rotation den winkel zu
 zeiger2(); // funktionsaufruf von zeiger 2
 strokeWeight(15); //Stroke sträke wieder hergestellt

}

//Funktionen

void kreis()
{
 fill (random(230,255),0,0); //Ein Random soll die Farben zwischen 240 und 255 von rot wechseln
 ellipse(0,0,200,200); //Ein Kreis mit einer Höhe von 200 und einer Breite von 200 mit x und y am 0 Punkt
 fill(255,250); // Füllfarbe ist 255 = weiss und eine Transparänz von 200
 ellipse(0,0,100,100); // Der Kreis befindet sich an der 0 Stelle
}

void zeiger()
{
 fill (0);
 line (0,0,20,20);
}

void zeiger2()
{
 fill(0,0,0,80);
 line(0,0,-20,20);
}

// berechne den winkel zur fenstermitter vom mausecursor aus
// die winkel sind in radiant
float calcAngle()
{
 return -atan2(mouseX - (width / 2),mouseY - (height / 2));
}