Workshop Grafik-Progammiersprache Processing

Transkript

1 Workshop Grafik-Progammiersprache Processing

2 Agenda: Willkommen Processing.org Generative Gestaltung Erstes selbst programmiertes Beispiel Interaktive Beispiele

3

4 Willkommen zum Workshop Grafik-Progammiersprache Processing Christian Schmid Bühler eidg.dipl. Wirtschaftsinformatiker & Software Engineer IPMA certified Projectmanager & Assessor Meine Ziele: Kurzüberblick geben zu: - Software Engineering Ansätze zu erläutern - Einblick in das Thema Generative Gestaltung zu geben - Ein Quell der Inspiration für neue Möglichkeiten Design by code in Eurem Umfeld zu bieten - Networking

5

6 Processing: 2001 durch Ben Fry und Casea Rea im M.I.T. Media Lab entstanden, mit der Absicht, die Grundlagen von Programmierung v.a. Gestalter und Designer zu vermitteln, mit instantem visuellen Feedback für die Anwender. Ben Fry und Casea Real orientierten sich in Bezug auf die Syntax eng an Basic und dem visuellen Feedback eng an LOGO. In den letzten 14 Jahren entwickelte sich Processing, mit all den zusätzlich erstellten Libraries, zu einer professionell genutzten Programmiersprache.

7

8 Generative Gestaltung: Generative art refers to any art practice where the artist uses a system, such as a set of natural language rules, a computer program, a machine, or other procedural invention, which is set into motion with some degree of autonomy contributing to or resulting in a completed work of art.

9 Generative Gestaltung: Nutzung von Algorithmen um etwas Visuelles zu kreieren Ein Zusammenspiel zwischen dem Künstler und einem autonomen System Treffen einer nicht vorherbestimmten Auswahl von Resultaten aus einem deterministischen Prozess Finden der Balance zwischen Ordnung und Chaos Ein Algorithmus ist eine eindeutige Handlungsvorschrift zur Lösung eines Problems oder einer Klasse von Problemen. Algorithmen bestehen aus endlich vielen, wohldefinierten Einzelschritten. [1] Somit können sie zur Ausführung in einem Computerprogramm implementiert, aber auch in menschlicher Sprache formuliert werden. Bei der Problemlösung wird eine bestimmte Eingabe in eine bestimmte Ausgabe überführt.

10 Generative Gestaltung:

11 Generative Gestaltung:

12 Generative Gestaltung:

13 Generative Gestaltung:

14 Generative Gestaltung:

15 Generative Gestaltung:

16 Generative Gestaltung:

17 Generative Gestaltung:

18 Generative Gestaltung:

19 Generative Gestaltung:

20

21 PDE: Processing Development Environment Run Stop Neuer Sketch Öffnen Sketch Speichern Sketch Sketch Name Die Bühne Texteditor: Hier wird der Programm- Code geschrieben Message area Console

22 Mein erstes Processing Programm: void setup() { size(480, 120); } void draw() { if (mousepressed == true) { fill(0); } else { fill(255); } ellipse(mousex, mousey, 80, 80); } Tastatur-Befehl für geschweifte Klammer auf Mac: {: alt-8 }: alt-9

23 Mein erstes Processing Programm:

24 Mein erstes Processing Programm: Vorbereitung einmalig Ausführung Endlos- Schleife void setup() { size(480, 120); } void draw() { if (mousepressed == true) { fill(0); } else { fill(255); } ellipse(mousex, mousey, 80, 80); }

25 Mein erstes Processing Programm: Vorbereitung einmalig void setup() { size(480, 120); } Vorbereitung Die Grösse des Ausgabe-Fenster: 480 Pixel breit, 120 Pixel hoch Ausführung Endlos- Schleife void draw() { if (mousepressed == true ) { fill(0); } else { ansonsten fill(255); } ellipse(mousex, mousey, 80, 80); } Zeichne auf das Ausgaben-Fenster folgendes ist die Füll-Farbe Schwarz = 0 ist die Füll-Farbe Weiss = 255 Falls die Mausetaste gedrückt wird Zeichne eine Ellipse an der Mause - X und an der Maus Y Position mit den Durchmesser 80 Pixel

26 Mein erstes Processing Programm: void setup() { } Aufgaben, welche nur 1x im Programm-Ablauf ausgeführt werden size(x,y); Die Grösse des Ausgabe-Fenster: x Pixel breit, y Pixel hoch 0,0 X Y 100,100

27 Mein erstes Processing Programm: void draw() { } Draw - Loop: Hierdrin befinden sich die Programm-Instruktionen, welche Inhalt berechnen, die im Ausgabefenster zu sehen sind. Der Loop läuft solange, bis er durch eine User-Aktion, Programm-Instruktion oder Programm-Fehler abgebrochen, bzw. gestoppt wird. if (mousepressed == true) { fill(0); } else { fill(255); } Bedingung: Falls Bedingung zutrifft, dann führe folgende(r) Progammschritt(e) aus ansonsten führe folgende(r) Programmschritt(e) aus

28 Mein erstes Processing Programm: mousepressed Ereignis: Maus-Tasten-Druck fill(0) Funktion: Füllung eines Grafik-Element: 0 = Schwarz 255 = Weiss fill(255) mousex mousey Variable: Maus - Cursor X - Position Variable: Maus - Cursor Y - Position ellipse(x-position, Y-Position, Breite, Höhe);

29

30 Mein erstes Processing Programm: Extended version V1

31 Mein erstes Processing Programm: Extended version // Dies ist mein erstes Processing - Programm // Christian Schmid Bühler [email protected] /* An der Mausposition gezeichnete Kreise */ Kommentare: Einzeilig durch // definiert Über mehrere Zeilen mit /* (Start Kommentare) bis */ (End Kommentare) definiert saveframe("kreise-####.png"); saveframe Funktion: Ein Bild mit Endung png (auch z.b. jpg etc. möglich), wird abgespeichert. Die #### bedeuten eine 4-stellige Laufnummer des aktuellen Frames. println("bild erfolgreich abgespeichert"); println Funktion: Der Text innerhalb der Anführungs- bzw. Schlusszeichen wird in der Konsole ausgegeben. Tastatur-Befehl für Gartenhag auf Mac: #: alt-3

32 Mein erstes Processing Programm: Extended version V2

33 Mein erstes Processing Programm: Extended version nostroke(); nostroke Funktion: Grafik-Objekt hat keine Umrandung stroke(255); stroke Funktion: Grafik-Objekt hat Umrandung mit der Farbe Schwarz bis Weiss (0-255), bzw. Rot, Grün, Blau (0-255) strokeweight(5); strokeweight Funktion: Breite der Umrandung des Grafik-Objekt fill(255,0,0); fill - Funktion: Füllung eines Grafik-Element: Rot (255), Grün (0), Blau (0) nofill(); nofill Funktion: Keine Füllung des Grafik Objekts rect(x-position, Y-Position, Breite, Höhe);

34

35 Mein erstes Processing Programm: Extended version V3

36 Mein erstes Processing Programm: Extended version float Rot = 0; Definition der Variable Rot, initiert mit dem Wert 0 float Gruen = 0; Definition der Variable Gruen, initiert mit dem Wert 0 float Blau = 0; Definition der Variable Blau, initiert mit dem Wert 0 background(0); Der Hintergrund des Ausgabefenster ist Schwarz (0) width height Wert der Breite des Ausgabefenster Wert der Höhe des Ausgabefenster map(mousex, 0, width, 0, 255); 0 Der Wert der mousex-position wird im Verhältnis von 0 bis zu der Breite des Ausgabefensters umgerechnet in das Werteverhältnis width = Rot = map(mousex, 0, width, 0, 255); Der berechnete Wert wird der Variable Rot zugewiesen fill(rot,gruen,blau); Die realtime berechneten Werte für Rot, Grün und Blau werden als Füllfarbe genutzt