19. September 2013

FRAMEWORK EVENTS - BEDINGUNGEN - ZUFALLSZAHL - SCHLEIFEN - EIGENE FUNKTIONEN http://blogs.iad.zhdk.ch/codingspace/lektionen/lektion-2/ http://blogs.iad.zhdk.ch/codingspace/lektionen/bedingungen/ http://blogs.iad.zhdk.ch/codingspace/zufallszahl/ http://blogs.iad.zhdk.ch/codingspace/lektionen/schleifen/ MITTWOCH, 18.09.2013 Wir lernten wie <Processing> mit der <setup> und <draw> Funktion arbeitet. Ebenfalls lernten wir die<Bedingungen, Zufallszahlen und Schleifen> kennen. Mit dem Neugelernten bekamen wir die Aufgabe einen Drawing-Tool zu programmieren. Eine einfache Form vom bekannten "Paint". EIGENERFAHRUNG <Processing> sagt mir immer mehr zu. Ich finde es toll, dass man immer ein grafisches Resultat sieht. Dadurch ist die ganze Programmiererei nicht ganz so trocken. Die <Bedingungen, Zufallszahlen, Schleifen und eigene Funktionen> studierte ich bereits im Privaten, da ich mit <Java> zu tun hatte. Also nichts neues für mich. Dennoch ist es spannend es mit anderen Sachen zu kombinieren als ich es mir gewohnt bin/war. Beim Beispiel 5 stiess ich auf ein Problem, als ich einen Button mit der Funktion der Farbübergabe  machen wollte. Es war nicht einfach dies zu lösen. Die Denkensweise, die man sich zum Programmieren an eignen muss, macht mir stets schwierigkeiten. Ich denke ich habe alles verstanden und am Tag darauf merke ich, dass ich am Vortag es eben nicht verstanden habe.. und so weiter. Mit dem aktuellen Stand bin ich noch nicht zufrieden.   Beispiel 1

void setup() // programmstart
{
size(300,300); // def. fenstergrösse
smooth(); // aktiviert antialiasing
stroke(255,255,255); // def. konturfarbe
strokeWeight(5); // def. konturbreite

}

void draw() // zeichenausgabe auf fenster (60fps)
{
background(0); // def. hintergrundfarbe
fill(255,0,0); // def. fuellfarbe
rect(random(50,100),random(50,100),random(50,100),random(50,100)); // rechteck mit zufallszahlen
}

Output 1 (Rechteck wird 60 Mal in der Sekunde neu generiert. Beispiel 2

void setup() {
size(300, 300);
background(1);
smooth();
stroke(255, 255, 255);
}

void draw() {
ellipse(mouseX, mouseY, 8, 8); // position der ellipse ist dort wo die Maus ist
}

void mousePressed() { // mauspositionsfuntion ausgabe auf konsole
println("x:" + mouseX + "y:" + mouseY);
}

Output 2 Output 2 Konsoleoutput Beispiel 3

<pre>int x=10;

// Bedingung ohne Klammer-Block, die Bedingung
// geht in diesem Fall bis zum nächsten Semikolon
// das else ist ebenfalls optional
if(x == 10)
println("x ist gleich 10");

// Hier eine Bedinung mit mehreren Fällen
// zu Beachten ist die schreibweise von 'else if'
if(x == 10)
println("x ist gleich 10");
else if(x == 9)
println("x ist gleich 9");
else if(x == 8)
println("x ist gleich 8");
else
println("x ist nicht 10,9 oder 8");

Output 3 Konsolenoutput Beispiel 4

<pre>
int x=10;
switch(x)
{
case 10:
println("x ist gleich 10");
break;
case 9:
println("x ist gleich 9");
break;
case 8:
println("x ist gleich 8");
break;
default:
println("x ist nicht 10,9 oder 8");
break;
}

Output 4 Konsolenoutput Beispiel 5

color strokeColor = #000000;

class MyButton {
int x, y;
int buttonHeight = 32;
int buttonWidth = 32;
color c;
boolean clicked = false;

MyButton(int _x, int _y, color _c) {
x = _x;
y = _y;
c = _c;
}

void checkClick() {

if (mouseX >= x && mouseX < x+buttonWidth &&
mouseY >= y && mouseY < y+buttonHeight) {

strokeColor = c;
clicked = true;
}

else {
clicked = false;
}
}

void generate() {
fill(c);
rect(x, y, buttonWidth, buttonHeight);
}
}

MyButton b1,b2,b3,b4;

void setup() {
background(255);
size(600, 400);
rect(50, 50, 500, 340);

b1 = new MyButton(10, 50, #000000);
b2 = new MyButton(10, 92, #FF0303);
b3 = new MyButton(10, 134, #39EA1F);
b4 = new MyButton(10, 178, #FAEF19);
}

void draw() {
b1.generate();
b2.generate();
b3.generate();
b4.generate();
}

void mouseDragged() {
stroke(strokeColor);
line(pmouseX, pmouseY, mouseX, mouseY);
}

void mousePressed() {
b1.checkClick();
b2.checkClick();
b3.checkClick();
b4.checkClick();
}

Output 5