Startseite | zebis · Web viewDie Lehrperson führt dich in die Welt des Programmierens ein. In...

1 / 8

Processing Unterrichtsprojekt zu LU 910 / 911 / 919 SW 16

Programmieren mit Processing In den vergangenen Wochen hast du im Fach Mathematik gelernt wie eine Gleichung oder ein Term vereinfacht und aufgelöst wird. Häufig hast du mit sog. Variablen – anders ausgedrückt mit einem Platzhalter gerechnet. Die erwähnten Begriffe wie Term oder Variable haben auch bei Programmiersprachen eine grosse Bedeutung. In einem Source Code oder einem Skript findest du ebenfalls Variablen, welche unterschiedliche Grössen und Funktionen einnehmen.

Processing ist eine unter vielen Programmiersprachen und bietet sich für ein Unterrichtsprojekt aus mehreren Gründen gut an. Der Einstieg ist verhältnismässig gut verständlich und du wirst schnell erste Erfolge verzeichnen können. Zudem ist Processing spezialisiert auf Grafiken, Simulationen und Animationen. Wenn wir also ein paar Zeilen schreiben, können wir praktisch unmittelbar (bildlich) verfolgen, was die Maschine mit unserem Code anstellt. Processing ist Open Source und somit gratis zu nützen. Wenn du dich auch zu Hause vertieft damit auseinandersetzen möchtest, findest du die Software für alle gängigen Betriebssysteme (Windows, Mac, Linux) frei als Download auf der Homepage https://processing.org/. Es gibt auch die Möglichkeit online zu programmieren, ohne die Applikation zu installieren, z.B. hier: http://valentin.dasdeck.com/processing/

Unterrichts-Projekt in 4 Phasen:

Phase 1a Erste Schritte und Übersicht der Programmiersprache im Klassenverband. Die erste Phase läuft unter der Leitung der Lehrperson und einem Experten. Fragen sind ausdrücklich erwünscht.

Phase 1b Du vertiefst dich in die Materie mit Video-Tutorials. (S.6) > Hausaufgabe

Phase 2 Die Kompetenzen der ersten Phase werden nun in Partnerarbeit angewandt. Dazu gibt es mehrere Teilaufgaben zu lösen. In dieser Phase sollt ihr auch weitere Begriffe und Möglichkeiten mittels Tutorials oder anderen Quellen ausprobieren und entdecken.

Phase 3 Individuelles Projekt – Schwierigkeit und Abstraktionsgrad entsprechend deinem Niveau. Das Vorhaben wird in Kleingruppen und mit der Lehrperson besprochen.

Phase 4 Präsentation deiner Idee im Klassenverband und Beurteilung. Die Beurteilung setzt sich zusammen aus einer Selbst- und einer Fremdbeurteilung.

Processing ist eine vielseitige und mächtige Programmiersprache. Solche und weitere kunstvolle und kreative Ergebnisse lassen sich erzeugen, wenn Profis und Spezialisten ans Werk gehen, die sich mit der Materie auskennen.

document.docx Christian Wyrsch

2 / 8


Phase 1 «… Let’s code now… »Die Lehrperson führt dich in die Welt des Programmierens ein. In einem ersten Schritt wirst du erfahren, wie die Programmiersprache «Processing» aufgebaut ist. Gemeinsam programmieren wir die ersten Zeilen und nehmen unter die Lupe, wie Processing funktioniert und was du beim Programmieren beachten musst. Die Lehrperson zeigt auch, wo du passende Tutorials und Anleitungen findest.

Es geht los !Zusammen im Klassenverband tippen wir folgende Zeilen in den Texteditor und besprechen was die Begriffe im Sketchfenster bewirken.

Bespiel 1 Statischer Modus

size(………………………………………..…………………………………….………

background(………………………………………..…………………………………….………

ellipse(………………………………………..…………………………………….………

Bespiel 2 ** Dynamischer Modus mit anwachsender Variable

int a = 0;………………………………………..…………………………………….………

void setup(){………………………………………..…………………………………….………

size(600,400);………………………………………..…………………………………….………

}………………………………………..…………………………………….………

void draw(){………………………………………..…………………………………….………

background(0);………………………………………..…………………………………….………

noStroke();………………………………………..…………………………………….………

fill(180,0,0);………………………………………..…………………………………….………

ellipse(a,200,200,200);………………………………………..…………………………………….………

a++;………………………………………..…………………………………….………

if(a>300){a=300;}………………………………………..…………………………………….………

}………………………………………..…………………………………….………


3 / 8


Notizen zur Einführung Ergänze die vorgegebenen Befehle und zeichne ins vorgedruckte «Sketchfenster» wo die Formen zu liegen kommen, wie gross sie sind und welche Ausrichtung sie haben. Die Formen werden ergänzend mit Farben schraffiert. Achte auf die Details.

void setup(){

size( …………………………………………..……

………………………….………………………………..……

………………………….………………………………..……

………………………….……………………………………..

}

void draw(){

fill( ………………………………………..…………………………………….………

rect(………………………………………..…………………………………….………

fill(………………………………………..…………………………………….………

noSt (………………………………………..…………………………………….………

ellipse(………………………………………..…………………………………….………

noFill(………………………………………..…………………………………….………

stroke(………………………………………..…………………………………….………

triangle(………………………………………..…………………………………….………

strokeWeight(………………………………………..…………………………………….………

line(………………………………………..…………………………………….………

………………………………………..…………………………………….………

………………………………………..…………………………………….………

}


4 / 8


………………………………………..…………………………………….………

Phase 2 PartneraufgabenIhr arbeitet zu zweit und strikt im Flüsterton. Wichtig in dieser Phase ist, dass ihr beide die Codes tippt, damit ihr für das individuelle Folgeprojekt gerüstet seid. Unterstützt euch gegenseitig und fragt nach, wenn ihr etwas nicht versteht.

Aufgaben Tipps und Hinweise

a) * Formatiert das Fenster auf 600mal 400. Färbt den Hintergrund weissein. Zeichne die beiden Diagonalen mitgrüner Farbe. In der Mitte wo sich dieDiagonalen schneiden, programmiert ihr einen roten Punkt (Kreis/Ellipse mit Höhe/Breite = 10).

- void setup() - void draw()- background- line(x1, y1, x2, y2)- fill(a,b,c)- ellipse (x, y, width, height)

(vgl. Einführung AP S.3)

b) ** Wählt zwei der drei Landeswappen aus und erstellt den Code unter Berücksichtigung korrekterForm und Farbe. (z.B. CH = Quadrat, passendes rot)

Zu simpel? Schaut doch mal die Flagge der Malediven an. Kriegt ihr dies hin?

- void setup() - void draw()- background- rect (x, y, widt, heighth)- fill()- nostroke()

(vgl. Einstieg AP S.3) Hilfreich: Farbtutorial

c) *** Ändert die Flagge von Aufgabe b) so ab, dass sich etwas bewegt – z.B. ein Rechteck erscheint von oben und bewegt sich an den richtigen Platz (und stoppt dann).Zusätzlich könnt ihr mittels Zufallsfunktion „random()“ mit den Farben spielen.

- void setup() - void draw()- a++; if(a>…)- random()

(vgl. Beispiel 2 AP S.2)

d) *** Ändert den bereitgestellten Code so ab, dass bei jedem Mausklick etwas passiert. Suche dazu weitere Beispiele mit der Systemfunktion mousePressed() und erfinde etwas Kreatives.

- void setup() - void draw()- mousePressed()

e) **** Programmiert mit Einbezug der Zufallsfunktion (vgl. S.2) ein Feld mit lauter farbigen Punkten. Diese sind zufällig verteilt und haben unterschiedlicheGrössen (und für Könner: versch. Farben). Die Lehrperson erklärt zuvor die Zufallsfunktion.

- void setup() - void draw()- random()-


5 / 8


f) Weiterführendes (studiert dazu die Beispiele) Erkundigt euch bei der LP und studiert die Beispiele auf S.5

Ihr speichert eure Resultate mit Name und Aufgabennummer im vordefinierten Klassenordner ab. Die fertigen Codes werden von ALLEN (also nicht mit PartnerIn) geschrieben und abgespeichert.

Weitere Beispiele und Anregungen mit Bedingungen


size(800,800); background(255); noStroke();

int A = 20; // Grösse der einzelnen Ellipsen int zeilen = height/A; //Zeilen Berechnung int zellen = width/A; //Zellen Bereichnung for(int i = 0; i < zeilen; i++) { for(int j = 0; j < zellen; j++) { fill(random(255),random(255),random(255),random(255)); ellipse((j*A)+(A/2),(i*A)+(A/2),A,A); }}

// Martin Lacher, PHLU

size (600,600);background(255);stroke(0);noFill();ellipseMode(RADIUS);

for (int a=0; a < 250; a = a+30) { ellipse(300,300,a,250); ellipse(300,300,250,a);}

// Floating Triangles - Christian Wyrsch, 2018

size (600,600);background(255);stroke(0,70);fill(100,0);float x = -20;float y = -30;translate (x, y);for (int a=0; a < 35; a = a+2) {strokeWeight(a/10);triangle(100,500,500-2*a,500+2*a,300-2*a,150-2*a);triangle(100,500,500+1.5*a,500-1.5*a,300+a,150+a); }strokeWeight(1);stroke(0);triangle(100,500,500,500,300,150);

6 / 8


Phase 3 Individuelles ProjektNun arbeitest du alleine und widmest dich einem Processing-Projekt über mehrere Lektionen. Die Schwierigkeit und den Abstraktionsgrad wählst du entsprechend deinem Können. Ein kluges Vorgehen besteht darin, dass du ein bestehender Code übernimmst und dann die verschiedenen Parameter abänderst: So kannst du im Zeichnungsfenster beobachten was passiert und so eine bestimmte Funktion oder einen Befehl besser verstehen. Bevor du dein Projekt umsetzt, besprichst du dein Vorhaben mit der Lehrperson oder dem Experten.

Online Editor PROCESSING

Hilfreiche Tipps, Anleitungen & coole Beispiele

Abarbeitung CodeWas passiert,

wenn…?

TOP ÜbersichtDynamische

Verbildlichung

If - Anweisungenmit Beispielen

(Learnprocessing)

Schleifenmit Beispielen

(Learnprocessing)

SystemfunktionmousePressed()

Farbtabelle( R-G-B )

Seite der Macherwww.processing.org (leider just english)

Profianimation mit farbigen Bubbles


Beinhaltet unter anderem auch interessante Beispiele und kann natürlich

auch zu Hause geöffnet werden.

http://valentin.dasdeck.com/processing/

http://www.processing.org/

http://valentin.dasdeck.com/processing/

7 / 8


Phase 4 Präsentation & BeurteilungSelbst-

beurteilungFremd-

beurteilung Name: …………………….…………

sehr

gut

gut

genü

gend

unge

nüge

nd

sehr

gut

gut

genü

gend

unge

nüge

nd

Produkte Codes und grafische Outputs

- Deine Resultate sind vollständig und entsprechend den Anforderungen in allen Phasen.

Partnerarbeit Phase 2

- Die Quellcodes funktionieren und die grafischen (animierten) Resultate stimmen mit der Aufgabenstellung überein.

- Ihr habt zu den verlangten Aufgaben auch zusätzliche Ideen umgesetzt.

- Deine Resultate sind als Quellcodes und unter korrekter Bezeichnung auf dem vordefinierten Ordner abgelegt.

Individuelles Projekt Phase 3 & 4

- Dein Quellcode funktioniert und erzeugt das geplante Projekt.- Deine Idee ist spannend und fordernd gewählt.- Du hast auch zu Hause am Projekt weitergearbeitet (falls du die

Möglichkeit hast) ( > Computer, Tablet, WLAN, …)

- Du präsentierst dein individuelles Projekt der Klasse interessant. Du erklärst wie dein Code funktioniert und führst aus wie es dir ergangen ist, wo allenfalls Schwierigkeiten aufgetaucht sind etc.

Arbeitsweise generell

- Du arbeitest konzentriert.- Du arbeitest selbstständig (dazu gehört auch, auftauchende Fragen

zu klären!).- Du hast dich auch als TutorIn eingebracht, wenn dies nötig war.- Du hast selbstständig nach Tutorials gesucht und Anleitungen

analysiert. (online in Text- oder Video-Format)

Gesamtbeurteilung

(Note)

Vorlage Beurteilungsbogen von M. Lacher


8 / 8


Ausblick Kunstprojekt Was würde Piet Mondrian (1872-1944) dazu sagen?


int a = 0int b = 0int c = 0frameRate(250);size(500,500);

void draw (){background(255);

fill(0);rect(100,200,100,100);fill(a,0,0);rect(a,200,50,200);a++;if (a>200) {a=200;}fill(a+50,a+50,0);rect(400,b,100,200);

b++;if (b>200) {b=200;}fill(0,0,a);rect(150,500-c,50,150);

c++;if (c>500) {c=500;}strokeWeight(3);line(150,0,150,150);

strokeWeight(4);line(0,200,500,200);line(0,400,500,400);line(0,300,200,300);

strokeWeight(7);line(200,0,200,500);line(250,0,250,500);

strokeWeight(2);line(400,0,400,400);line(0,150,200,150);line(100,200,100,300);

}

in motion . by Christian Wyrsch, 2018

Quelle Portrait und Signatur :

https://www.slideshare.net/devoninglee/5th-piet-mondrian-2

Startseite | zebis · Web viewDie Lehrperson führt dich in die Welt des Programmierens ein. In...

Documents

Transcript of Startseite | zebis · Web viewDie Lehrperson führt dich in die Welt des Programmierens ein. In...