37
PROCESSING STRUKTUR UND INPUT Created by Michael Kirsch & Beat Rossmy

PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

PROCESSINGSTRUKTUR UND INPUT

Created by Michael Kirsch & Beat Rossmy

Page 2: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

INHALT1.

1. 2. 3. 4.

2. 1. 2. 3. 4. 5. 6. 7. 8.

RückblickProcessing Basics1,2,3,... – Integer!Boolsche OperatorenBedingungen

Theorie... sonst!Wenn mehr gelten soll!Kleine Schritte und große Schritte.floatImmer und immer wieder...forWie kann ich Einfluss nehmen?Processing Basics

3. 1. 2. 3. 4. 5.

4. 1. 2. 3.

5. 1. 2.

AnwendungrandomelsefloatformouseX & mouseY

VerknüpfungDie Processing ReferenceEin Kreis ist nicht genug!Bringen wir etwas Zufall ins Spiel.

AusblickNächste SitzungÜbung

Page 3: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

RÜCKBLICK

Page 4: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

PROCESSING BASICSSTRUCTURE / COLOR

Setup Funktion

Draw Funktion

Größe des Sketchs

Konsolenausgabe

Hintergrundfarbe

Füllfarbe

Umrissfarbe

Zufallszahl

void setup() {...}

void draw() {...}

size(w,h);

println("something");

background(r,g,b);

fill(r,g,b);

stroke(r,g,b);

random(1);

Page 5: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

PROCESSING BASICS2D PRIMITIVES

Rechteck

Ellipse

Linie

Punkt

rect(x,y,w,h);

ellipse(x,y,w,h);

line(x1,y1,x2,y2);

point(x,y);

Page 6: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

1,2,3,... – INTEGER!

Mit int bezeichnen wirVariablen die ganzzahligeWerte enthalten.

Addition und Subtraktionmit anderen Integernfunktioniert problemlos.

Was allerdings passiert beiMultiplikation undDivision?

int x = 4;

println(x+2); // prints "6"println(x-2); // prints "2"

println(x/2); // prints "2"println(x*2); // prints "8"

println(x/3); // prints ???

Page 7: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

BOOLSCHE OPERATORENGrößer

Größer gleich

Gleich

Kleiner gleich

Kleiner

Ungleich

if (a > b) {...}

if (a >= b) {...}

if (a == b) {...}

if (a <= b) {...}

if (a < b) {...}

if (a != b) {...}

Page 8: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

BEDINGUNGEN

Mit if können wir aufbestimmte Situationenreagieren.

Ein bestimmter Fall trittnur unter der Bedingungein, dass die Aussage inden () wahr ist.

Manche Aussagen könnenstets wahr sein.

int x;

void setup () { x = 0;}

void draw() { x = x+1; if (x == 10) { x = 0; } if (true) { println(x); }}

Page 9: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

THEORIE

Page 10: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

... SONST!Mit mehreren if kannauch auf das Gegenteilder ursprünglichenAussage reagiertwerden.

Mit else lässt sicheinfacher dasGegenteil einerAussage behandeln.

Das ist hilfreich wennunsere Bedingungenkomplexer werden.

if (x == 100) { println("x ist genau 100");}if (x != 100) { println("x ist nicht 100");}

if (x == 100) { println("x ist genau 100");}else { println("x ist nicht 100");}

if (x == 100 && y > 50) { println("x ist genau 100");}else { println("x!=100 und/oder y kleinergleich 50");}

Page 11: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

WENN MEHR GELTEN SOLL!Und (sowohl als auch)

Oder (das eine, das andereoder beides)

Nicht (das Gegenteil davon)

Klammern halten Aussagenzusammen!

if (x > 50 && y < 50) {}

if (x > 50 || y < 50) {}

if (x > 50 || !(y >= 50)) {}

if ((x>5 || !(y>=5)) || (x==5 && y==5)) {}

Page 12: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

KLEINE SCHRITTE UND GROSSESCHRITTE.

Manchmal reichen ganzeZahlen nicht aus um jedenSachverhalt entsprechenddarstellen zu können.

"Ein Apfel", "Ein Haus", ...

"Eine halbe Stunde", "Einhalber Meter", ... http://zak-site.com/Great-American-Novel/images/44-102/ff98-one-step.jpg

Page 13: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

KLEINE SCHRITTE UND GROSSESCHRITTE.

Angenommen unser Kreissoll sich nun doppelt soschnell bewegen. Wasmüssen wir an unserembisherigem Sketchändern?

Aber wenn er sich nurhalb so schnell bewegensoll...

int x;

void setup () { size(100,100); x = 0;}

void draw () { background(255,0,0); x = x+1; ellipse(x,50,50,50);}

Page 14: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

FLOAT

Es gibt natürlich auchandere Datentypen alsInteger.

Mit float definieren wirVariablen, dieGleitkommazahlenenthalten.

D.h. alle Zahlen, die beiuns üblicherweise einKomma enthalten.

Aber Vorsicht!

float x;

void setup () { size(100,100); x = 0;}

void draw () { background(255,0,0); x = x+0.5; ellipse(x,50,50,50);}

Page 15: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

IMMER UND IMMER WIEDER...

Von Zeit zu Zeit passiertes, dass man mancheSachen immer und immerwieder zu erledigen hat...

Selbst wenn es einfacheAufgaben sind, wie"zeichne 5 zufälligePunkte" kann sich dadurchder Programmcodeimmens verlängern.

http://img.thesun.co.uk/multimedia/archive/01647/LOW-RES-GETTY-2694_1647748a.jpg

Page 16: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

IMMER UND IMMER WIEDER...

Aber wir erkennen einMuster!

Es entstehen Blöcke vondrei Zeilen, die sichwiederholen.

Könnte man diese Blöckeautomatischwiederholen...

void setup () { size(400,400);

float x = random(width); float y = random(height); ellipse(x,y,5,5);

x = random(width); y = random(height); ellipse(x,y,5,5);

x = random(width); y = random(height); ellipse(x,y,5,5); x = random(width); y = random(height); ellipse(x,y,5,5); x = random(width); y = random(height); ellipse(x,y,5,5);}

Page 17: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

FOR

for leitet unsere Schleifeein.

In den () beschreiben wirdie Wiederholungen:"Zähle von 0 bis 4, beidem 5. Durchgang brecheab."

{} enthalten dieauszuführenden Befehleund wird Schleifenrumpfgenannt.

void setup () { size(400,400); for (int n=0; n<5; n++) { float x = random(width); float y = random(height); ellipse(x,y,5,5); }}

Page 18: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

WIE KANN ICH EINFLUSS NEHMEN?

Alles läuft so wie ich esgeschrieben habe!

Aber wie kann ich meinProgramm während derLaufzeit beeinflussen?

Wie funktioniert das mitder Maus und demKeyboard?

http://dougengelbart.org/images/pix/img0030.jpg

Page 19: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

WIE KANN ICH EINFLUSS NEHMEN?

mouseX und mouseY sindVariablen, die immer dieaktuelle Position der Mausenthalten!

mousePressed ist truewenn die Linke Maustastegedrückt ist, ansonstenfalse.

Wie wir auf Tasten desKeyboards reagierenkönnen, lernen wir in dernächsten Sitzung.

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

void draw () { background(0); ellipse(mouseX,mouseY,100,100);}

Page 20: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

PROCESSING BASICSEinzeiliger Kommentar

Mehrzeiliger Kommentar

Inkrementieren

Dekrementieren

int x = 0; // x ist 0x = x+1; // x ist 1

int x = 0;/*x ist 0gleich ist x 1*/x = x+1;

int x = 0;x = x+1;x += 1;x++; // x ist 3!

int x = 0;x = x-1;x -= 1;x--; // x ist -3!

Page 21: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

PROCESSING BASICSBreite des Fensters

Höhe des Fensters

int w;

void setup () { size(700,350); w = width; // w ist 700}

int h;

void setup () { size(700,350); h = height; // h ist 350}

Page 22: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

ANWENDUNG

Page 23: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

RANDOMvoid setup () { size(800,800);}

void draw () { background(0); // zufälliger RGB-Hintergrund?}

Page 24: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

ELSEint counter;

void setup () { size(800,800); // counter initialisieren}

void draw () { background(0); // counter inkrementieren // counter zurücksetzen // Kreis oder Rechteck // abhängig von counter}

Page 25: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

FLOATfloat x1,y1,x2,y2;

void setup () { size(800,800); // Koordinaten initialisieren}

void draw () { background(0); // x1, x2 minimal inkrementieren // x1 zu int konvertieren // wandernde Kreise zeichnen}

Page 26: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

FORvoid setup () { size(800,800);}

void draw () { background(0); // zeichne mehrere Rechtecke mit zufälligen Parametern in Schleife}

Page 27: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

MOUSEX & MOUSEYvoid setup () { size(800,800);}

void draw () { // zeichne Hintergrund abhängig ob Maus gedrückt ist oder nicht // zeichne Kreis an der aktuellen Mausposition}

Page 28: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

VERKNÜPFUNG

Page 29: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

DIE PROCESSING REFERENCEWIR KÖNNEN HIER LEIDER NICHT ALLES LERNEN...

Inhalte sind übersichtlichnach Themen sortiert:"2D-Primitives", "Image","Math", ...

Wir könne auch findenwas wir suchen, ohnegenau zu wissen wie esheißt!

https://processing.org/reference/

https://processing.org/reference/

Page 30: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

DIE PROCESSING REFERENCE

Die Dokumentationenthält immer Beispiel -code, beschreibendeTexte und weiter -führenden Links zuverwandten Themen.

Mit etwas Übung findetman sehr schnell was mansucht.

Tipp: für Suchanfragenverwende zuerst dieProcessing interne Suche!

https://processing.org/reference/triangle_.html

Page 31: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

EIN KREIS IST NICHT GENUG!Wir lassen nun zwei Kreise sich in unterschiedliche Richtungen

bewegen.

Page 32: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

EIN KREIS IST NICHT GENUG!

Wir deklarieren vier floatVariablen für dieKoordinaten der Kreise.

Diese werden mit Werteninnerhalb derFensterdimensioneninitialisiert.

Durch inkrementieren /dekrementieren der X-Koordinaten bewegen sichdie Kreise.

float x1,y1,x2,y2;

void setup () { size(500,500); x1 = 50; y1 = 50; x2 = 100; y2 = 100;}

void draw () { background(0); x1++; x2--; ellipse(x1,y1,20,20); ellipse(x2,y2,20,20); if (x1>width) {x1 = 0;} if (x2<0) {x2 = width;}}

Page 33: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

BRINGEN WIR ETWAS ZUFALL INS SPIEL.

Bei jedem neuen Start desProgramms erscheinennun die Kreise an anderenOrten innerhalb desFensters.

Auch die Bewegungs -geschwindigkeit der Kreiseist nun abhängig vomZufall.

float x1,y1,x2,y2;

void setup () { size(500,500); x1 = random(width); y1 = random(height); x2 = random(width); y2 = random(height);}

void draw () { background(0); x1 += random(10); x2 -= random(10); ellipse(x1,y1,20,20); ellipse(x2,y2,20,20); if (x1>width) {x1 = 0;} if (x2<0) {x2 = width;}}

Page 34: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

AUSBLICK

Page 35: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

NÄCHSTE SITZUNGOrdnung in unseren Variablen

Strukturierung unserer Befehle

void und andere Zauberworte

Page 36: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

ÜBUNG...

Page 37: PROCESSING - LMU Medieninformatik · random else float for mouseX & mouseY Verknüpfung Die Processing Reference Ein Kreis ist nicht genug! Bringen wir etwas Zufall ins Spiel. Ausblick

QUELLENhttp://zak-site.com/Great-American-Novel/images/44-102/ff98-one-step.jpg

http://img.thesun.co.uk/multimedia/archive/01647/LOW-RES-GETTY-2694_1647748a.jpg

http://dougengelbart.org/images/pix/img0030.jpg

https://processing.org/reference/

https://processing.org/reference/triangle_.html