Einführung in die IDE Processing

Transkript

1 asd Einführung in die IDE Processing Für Anfänger Alexander Zingrich

2 Version Dies ist ein Beitrag zu einem Thema, welches sich auf die IT bezieht. Die moderne Informatik befindet sich in einem stetigen Wechsel. Es ist durchaus möglich, dass aufgrund irgendwelcher Veränderungen dieses Dokument grundlegend verändert wurde. Dieses Dokument stammt von jegliche Inhaltsrechte werden dem Rechteinhaber der Seite übertragen. Version 1.22 Ersteller Alexander Zingrich Veröffentlichung Zielführung Durch die Bearbeitung dieses Dokumentes, sollte der Leser, die Leserin fähig sein, grundlegende Befehle in Processing zu benutzen und zu verstehen. Die Bedienung soll klar werden und Anlaufstellen bei Problemen geklärt. 1.1 Wozu lernen wie man programmiert? Die Kunst des Programmierens begegnet uns in der heutigen Zeit unbewusst allgegenwärtig. Sei es draussen auf der Strasse, im eigenen Haus, oder in der Arbeit, überall findet sich Technik, welche nur durch Applikationen und die nötigen Wartungsarbeiten Instand gehalten werden können. Es ist absolut grundlegend einfache und simple Regeln und Formen der modernen IT zu kennen. Die eigene Aufnahmefähigkeit und die Logik profitiert extrem und man beginnt, Dinge anders zu sehen. 1.2 Zeitbeanspruchung Das Dokument ist gezielt darauf ausgelegt, der Leserin, dem Leser das Thema innerhalb von weniger als einer halben Stunde näher zu bringen. Durch die Individualität, wird die Bearbeitungsdauer zwischen 10 Minuten, bis 40 Minuten geschätzt. Es wird dazu geraten, dieses Dokument nicht in einer Stresssituation zu lesen, sondern in einem Moment der Ruhe und Konzentration, um möglichst viel in Erinnerung behalten zu können. Inhaltsverzeichnis Version Zielführung Wozu lernen wie man programmiert? Zeitbeanspruchung Einführung Was ist Processing?... 3 Alexander Zingrich

3 2.2 Anwendungsbereich Wozu Processing lernen? Interface Aufbau Speichern Öffnen Exportieren Skript starten Skript stoppen Suchfunktion Schriftgrösse / Schriftart ändern Grundlagen Syntax Allgemeine Befehle Wichtigste Befehle RGB (Farb-) Wert Bereich 0 zu Grundgerüst void setup void draw Geometrische Figuren Punkt (point) Linie (line) Ellipse (ellipse) Viereck (quad) Rectangle (rect) Befehlsfolge Farben Hintergrund (background) Objektfarbe (fill) Rahmenfarbe (stroke) Nachschlagewerk / Hilfestellung Processing.org LearningProcessing.com Google (!) Abbildungsverzeichnis Alexander Zingrich

4 2. Einführung Abbildung 1 - Processing In diesem Kapitel werden der Anwendungsbereich, sowie der Nutzen dieser Entwicklungsumgebung aufgezeigt. Processing wird kurz vorgestellt, aber noch keine Funktionen im Detail behandelt. 2.1 Was ist Processing? Processing ist eine objektorientierte Programmiersprache mit einer dazugehörigen integrierten Entwicklungsumgebung (Engl: IDE; Integrated Development Environment). Sie wurde von Ben Fry und Casey Reas entwickelt und veröffentlicht. Die momentan neueste Version (Stand November 2014) ist Processing ist plattformunabhängig, kann also auf jedem gängigen Betriebssystem genutzt werden. Die Programmiersprache basiert auf Java, einer namhaften objektorientierten Programmiersprache. Es handelt sich bei Processing um eine sogenannte Freie Software. 2.2 Anwendungsbereich Processing ist sehr vielseitig. Sie ist grundsätzlich auf Grafik, Simulation und Animation ausgelegt. Processing hat den Charakter einer sehr stark vereinfachten Version von Java. Dadurch wird es ermöglicht, Interaktionen und visuelle Elemente zu programmieren und richtet sich vorwiegend an Gestalter, Künstler und Programmieranfänger. 2.3 Wozu Processing lernen? Processing ist eine stark vereinfachte Programmiersprache. Mit ihrer Hilfe kann ein Verständnis für grundlegende Informatikvorgänge gebildet und aufgebaut werden. Gerade für Programmieranfänger, eignet sie sich wunderbar, durch die grosse Community und das gut ausgearbeitete Hilfsportfolio seitens Processing. 3. Interface Processing sieht auf jedem gängigen Betriebssystem gleich aus. Umso einfacher ist es, die wichtigsten Punkte des Interfaces näher bringen zu können. In diesem Kapitel werden wichtige Menüpunkte und Funktionen vorgeführt und erklärt. Alexander Zingrich

5 3.1 Aufbau Processing ist sehr einfach aufgebaut. Es gibt sehr wenige Schaltflächen und Button die es zu kennen gilt. Hier werden einige wichtige Punkte näher vorgestellt. Abbildung 2 - Aufbau 1. Generelle Navigation In ihr sind die wichtigsten Optionen zu finden. Auch die Applikation selber lässt sich darüber in einigen Punkten bearbeiten, wie Schriftgrössen, Schriftarten, Darstellungsarten, Designs, etc. 2. Applikationsindividuelle Navigation Diese Navigation ist von der Applikation selber. Sie ist zentral aufgeführt, da sie beim Entwickeln und Testen aktiv gebraucht wird. Dinge wie Skript starten, Skript stoppen, oder das Öffnen, sowie Speichern des Dokuments lassen sich hier auffinden. 3. Titel des Dokuments Hier wird der Name des Dokuments angezeigt, welcher beim ersten Speichervorgang vergeben wurde. 4. Schreibbereich / Codefeld In diesem Feld wird aktiv entwickelt. Jegliche Befehle und Code wird hier aufgeführt und vom Nutzer eingetippt. 5. Ausgabebox Hier wird angezeigt was aktiv getan wird, und Ausgaben, welche im Skript getätigt werden, werden hier ausgeführt. 6. Zeilenangabe Hier wird die Zeilenanzahl aufgeführt, um ständig zu wissen auf welcher Zeile des Skriptes man sich momentan befindet. Tipp: Die meisten Buttons verfügen über ein sogenanntes Mouseover, welches bei einem führen der Maus über den Button verrät welchen Sinn er hat. So lässt sich schnell und einfach der Sinn des Buttons herausfinden. Alexander Zingrich

6 3.2 Speichern Wichtig: Für diese Funktion gibt es ein bekanntes Tastenkürzel. Um diese Funktion direkt aufzurufen, ohne das Menü zu benutzen kann die Tastenkombination: CTRL +S (save) benutzt werden. Ist man fertig mit einem erstellten Skript und möchte dies vorerst ablegen, bzw. speichern, so lässt sich dies mit folgendem Button bewerkstelligen. Abbildung 3 Speichern Wird dieser Button betätigt, öffnet sich das windowstypische Speichermenü, in welchem der Speicherort, sowie der Dateiname ausgewählt werden kann. Es wird dazu geraten, während der Entwicklung regelmässig zu speichern, falls es zu einem unerwarteten Ereignis kommen sollte, um einen Datenverlust zu vermeiden. 3.3 Öffnen Wichtig: Für diese Funktion gibt es ein bekanntes Tastenkürzel. Um diese Funktion direkt aufzurufen, ohne das Menü zu benutzen kann die Tastenkombination: CTRL + O (open) benutzt werden. Um bereits gespeicherte, oder importierte Projekte wieder öffnen zu können, so wird der folgende Button benötigt. Abbildung 4 Öffnen Beim betätigen dieses Buttons öffnet sich, ähnlich wie beim Speichern, das windowstypische Auswahlmenü, in welchem man die zu öffnende Datei suchen und auswählen kann. 3.4 Exportieren Wichtig: Für diese Funktion gibt es ein bekanntes Tastenkürzel. Um diese Funktion direkt aufzurufen, ohne das Menü zu benutzen kann die Tastenkombination: CTRL + E (export) benutzt werden. Ist ein Skript fertig und soll publiziert werden, so kann dies über den Exportieren Button getan werden. Abbildung 5 Exportieren Durch einen Klick auf diesen Button öffnet sich ein neues Menü von Processing, in welchem ausgewählt werden kann, auf welches Betriebssystem das Skript publiziert werden sollte. Werden die individuellen Einstellungen getroffen, so können diese bestätigt werden und das Skript wird anschliessend publiziert. 3.5 Skript starten Wichtig: Für diese Funktion gibt es ein bekanntes Tastenkürzel. Um diese Funktion direkt aufzurufen, ohne das Menü zu benutzen kann die Tastenkombination: CTRL + R (run) benutzt werden. Möchte man, nach der Entwicklung die Funktion des Skriptes testen, so kann das Skript mit Hilfe des Skript starten Buttons getan werden. Alexander Zingrich

7 Abbildung 6 - Skript starten Wird dieser Button angeklickt, so wird der eingegebene Code ausgeführt und in einem neuen Fenster das Ergebnis angezeigt, insofern dieses Fenster innerhalb des Codes nicht ausgeschaltet wird. 3.6 Skript stoppen Ist man fertig mit dem Testen des Skriptes, so kann es, insofern es noch ausgeführt wird (zum Beispiel bei einer Endlosschleife), anhand dieses Buttons gestoppt werden. Abbildung 7 - Skript stoppen Alexander Zingrich

8 3.7 Suchfunktion Wichtig: Für diese Funktion gibt es ein bekanntes Tastenkürzel. Um diese Funktion direkt aufzurufen, ohne das Menü zu benutzen kann die Tastenkombination: CTRL + F (find) benutzt werden. Die Suchfunktion ist mittlerweile eine der Grundfunktionen einer jeden IDE (Integrated Development Environment). Bei grösseren Skripts ist es für einen Programmierer aufgrund der Zeiteffizienz wichtig, schnell einige Dinge suchen zu können. Durch die Suchfunktion, kann nach einem Begriff gesucht werden und es wird sofort zu der Stelle im Skript gesprungen, an der der Begriff vorkommt. Abbildung 8 Suchfunktion 3.8 Schriftgrösse / Schriftart ändern Für Vorführungszwecke, oder rein für die Optik ist es stellenweise sinnvoll die Schriftart, oder die Schriftgrösse zu ändern. Dies passiert über den Menüpunkt Tools und anschliessend muss der Punkt Create Font angewählt werden. Abbildung 9 - Schrift ändern 4. Grundlagen In diesem Kapitel werden die wichtigsten Grundlagen bezüglich Processing erläutert. Es werden längst nicht alle Bereiche abgedeckt und nicht ansatzweise alles näher angesehen, es wird aber ein Fundament gelegt, sich weiterentwickeln zu können. Alexander Zingrich

9 4.1 Syntax Bei einer Programmiersprache sprechen wir von der sogenannten Syntax". Die Syntax beschreibt die Art, bzw. die Form, in welcher Befehle aufgeführt werden müssen. Wird die Syntax nicht eingehalten, kann das Skript nicht vollständig und vollumfänglich funktionieren. Processing ist in dieser Hinsicht relativ offen, es gibt dennoch einige Dinge zu beachten. Das wichtigste in Kürze: Die Attribute werden in Klammern gefasst. Bei geometrischen Formen, werden die ersten vier Attribute wie folgt verteilt: befehl(x1,y1,x2,y2); -> Also von Startkoordinate zu Endkoordinate. Der Befehl für die folgende Abbildung würde entsprechend: line(1,0,4,5); lauten. Abbildung 10 Koordinatensystem Allgemeine Befehle Generell werden Befehle klein geschrieben. Bei Programmiersprachen ist meist die Grosskleinschreibung ein sehr entscheidender Punkt. Der Befehl wird aufgeschrieben, und meist werden die dazugehörigen Attribute in Klammern gefasst und mit einem Semikolon versehen. line(20,10,20,10); Das Semikolon dient dazu, dem Computer mitzuteilen, dass ein Befehl sozusagen fertig ist Wichtigste Befehle Es gibt extrem viele Befehle. Es ist für eine Programmiererin, einen Programmierer unmöglich alle Befehle zu kennen. Selbst der beste Entwickler kommt an den Punkt, an dem er einfach nachschlagen muss, dies passiert heutzutage meist mit Suchmaschinen wie Google. Es wird empfohlen nicht auf diese Liste zurückzugreifen, sondern sich das Wissen irgendwie selber anzueignen, sei es durch gezieltes Suchen im Internet, oder durch ein Nachschlagewerk. ellipse(x1,y1,x2,y2); line(x1,y1,x2,y2); point(x,y); rect(x,y,width,height); quad(x1, y1, x2, y2, x3, y3, x4, y4); fill(rgb1,rgb2); Alexander Zingrich

10 background(rgb); stroke(rgb, rgb); RGB (Farb-) Wert In der Informatik gibt es verschiedene Arten dem Computer, bzw. dem Bildschirm mitzuteilen welche Farbe zugewiesen werden soll. Im Falle von Processing wird der RGB Wert benötigt. Der Kürzel RGB steht für rot, grün, blau. In dieser Reihenfolge werden also auch die Farbwerte ausgelesen. Mit diesen drei Farben und deren Möglichkeiten, lassen sich alle für das menschliche Auge sichtbaren Farbbereiche darstellen. Die Farbwerte reichen von 0 bis zu 255 (Maximum). Der grösste Wert ist also 255,255,255, also der volle Anteil aller Farben, welche in weis resultiert Bereich 0 zu 255 Doch warum kann nur der Bereich zwischen 0 und 255 gewählt werden? Das ist schnell erklärt. Ein Computer rechnet mit dem Binärsystem und den sogenannten Bits. Hier eine kleine Tabelle zur veranschaulichung Anhand dieser Tabelle kann ein Computer jede normale Zahl in eine Binärzahl verwandeln. So steht beispielsweise eine 1 immer für Ja, also vorhanden, und eine Null für Nein, also nicht vorhanden. Die Zahl 12 wird beispielsweise so dargestellt: An den Computer wird also 0011 übermittelt und er weiss damit, dass die Zahl 12 gemeint ist. Der Farbbereich kann nur in 8 2 Byte Bereich liegen, das wurde so standardisiert. 8 2 entspricht 256, wobei die Null schon einem Wert entspricht, also haben wir 255 Auswahlmöglichkeiten. 4.2 Grundgerüst Es ist nicht unbedingt nötig, oder gefordert, aber es ist ein Standard der so normalerweise verwendet wird. Es wird nahe gelegt, diesen auch aktiv anzuwenden. Das Grundgerüst besteht aus zwei einfachen Containtern, in welchen bestimmte Befehle eingegeben werden. Der Inhalt dieser Container wird mit geschweiften Klammern ({Befehle) eingegrenzt. void container { Befehl(Attribut1, Attribut2); Hier in Processing, ist es ein Standard den Container Setup zu benutzen, sowie den Container Draw. Alexander Zingrich

11 4.2.1 voidsetup In den voidsetup() Container werden jegliche Befehle zur Darstellung, also zum Setup (Engl. Einstellung) geschrieben. Beispielsweise die Grösse (size), der Hintergrund (background), die Rahmen (stroke). void setup() { size(500,500); background(255,255,255); stroke(255,0,0); Kommentar: Im oben aufgeführten Beispiel wird dem Fenster (Welches beim Ausführen des Skripts angezeigt wird) auf 500px mal 500px, also insgesamt px gesetzt. Dazu wird eine Hintergrundfarbe, in diesem Falle der RGB (Rot, Grün, Blau) Wert von 255,255,255, also die Farbe weis. Danach wird noch der Rahmen für jegliche Elemente auf den RGB Wert 255,0,0, also rot gesetzt (Da der R des RGB Wertes das Maximum erfüllt) voiddraw In den voiddraw() Container werden alle anderen Befehle eingefügt, welche sozusagen den Inhalt des Skripts darstellen. Also jegliche Figuren, Linien, Punkte, Animationen etc. An dieser Stelle nochmal die Erinnerung: Diese beiden Container müssen nicht gebraucht werden, es hat sich aber herausgestellt, dass diese Variante auf lange Sicht übersichtlicher ist. Es steht jedoch jedem frei, das Skript frei zu gestalten. 4.3 Geometrische Figuren Punkt (point) Die Funktion point benötigt lediglich zwei Attribute. Sie lässt einen Punkt am gewünschten Ort entstehen. void setup() { size(500,500); void draw() { point(250,250); Alexander Zingrich

12 4.3.2 Linie (line) line ist eine Funktion, welche eine Linie von Punkt A zu Punkt B erstellt. Entsprechend benötigt sie dazu 4 Attribute, den X, sowie Y Wert des Start-, bzw. Endpunktes. void setup() { size(500,500); void draw() { line(50,50,450,450); Abbildung 11 - Linie Ellipse (ellipse) Um Kreise, bzw. Ellipsen zu erstellen, wird die Funktion ellipse benötigt, welche insgesamt 4 Attribute benötigt. Bei einer Ellipse bestimmen die ersten zwei Attribute den Mittelpunkt der Ellipse. Die beiden letzten Koordinaten bestimmen die Höhe, bzw. die Breite des Kreises. void setup() { size(500,500); void draw() { ellipse(250,250,400,400); Alexander Zingrich

13 Abbildung 12 Ellipse Viereck (quad) Ein quad ist ein vierseitiges Polygon. Es ist einem Viereck sehr ähnlich, aber die Winkel zwischen den Seiten betragen nicht fest 90. Entsprechend werden einige Attribute benötigt, an der Zahl sind es 8 Stück. Es werden jeweils die beiden Koordinaten (Höhen- und Längenkoordinate) jeder einzelnen Ecke angegeben. Dies ermöglicht es auch, ungleichmässige Vierecke zu erstellen. voidsetup() { size(500,500); void draw() { quad(38, 431, 86, 20, 459, 63, 360, 276); Abbildung 13 Viereck Rectangle (rect) Mit der Funktion rect kann man Vierecke erstellen, ähnlich wie bei der quad Funktion. Nur das bei dieser Funktion die Winkel zu jeder Seite fest 90 beträgt. Damit sind also auch Quadrate erstellbar. Es werden hierbei wieder 4 Attribute benötigt. Der Startpunkt der linken oberen Ecke, sowie die Breite und die Höhe. Alexander Zingrich

14 void setup() { size(500,500); void draw() { rect(50,50,400,400); Abbildung 14 Rectangle 4.4 Befehlsfolge Das Skript wird vom Computer von oben nach unten interpretiert. Entsprechend ist es zu beachten, dass Überlappungen entstehen können, die nicht entstehen sollten. Wird ein Kreis und ein Viereck erstellt, das Viereck aber danach, so kann der Kreis je nach Grösse des Vierecks verdeckt werden. Genau dasselbe gilt bei Schleifen. Wird eine Schleife erstellt, welche Kreise erstellt, welche immer grösser werden, so sollte beachtet werden, dass man die kleineren Kreise nie zu Gesicht kriegen wird, denn sie werden vom nächstgehenden überdeckt. Dieser eigentlich logische Vorgang hat schon bei vielen zu einiger Verwirrung führen können. Dies sollte unbedingt im Kopf behalten werden. 4.5 Farben Es ist in Processing möglich, fast allen Objekten eine Farbe zu vergeben. Sei es dem Hintergrund, den Rahmen, oder dem Objekt selber. Es sind kaum Grenzen gesetzt, denn auch Animationen sind kein Problem. Fast jeder Befehl wird mit einem RGB Wert bestückt. Abbildung 15 - RGB Alexander Zingrich

15 4.5.1 Hintergrund (background) In einigen Situationen ist es sinnvoll den Hintergrund des Ausführungsfensters farblich anzupassen. Um dies zu tun, wird der Befehl background benötigt. Da es sich dabei um eine grundlegende Einstellung zur Einstellung (also zum Setup) handelt, wird empfohlen diesen Befehl in den voidsetup zu schreiben. voidsetup() { size(500,500); background(255,0,0); Abbildung 16 Hintergrund Objektfarbe (fill) Um ganz bestimmte Objekte farblich zu verändern, wird der Befehl fill benutzt. Dieser braucht wie die meisten anderen Farbbefehle auch einen RGB (rot, gelb, blau) Wert. void setup() { size(500,500); background(255,0,0); void draw() { rect(50,50,400,400); fill(0,255,0); Alexander Zingrich

16 Abbildung 17 Objektfarbe Rahmenfarbe (stroke) Auch die Rahmen können eingefärbt werden. Dies kann mit dem stroke Befehl realisiert werden. void setup() { size(500,500); background(255,0,0); void draw() { rect(50,50,400,400); fill(0,255,0); stroke(255,255,0); Abbildung 18 Rahmenfarbe 5. Nachschlagewerk / Hilfestellung Beinahe jede Programmiererin und beinahe jeder Programmierer muss während der Realisierung, und teilweise auch während der Planung einige Dinge nachschlagen. Das ist völlig normal und gehört dazu. Es ist wichtig, dass auch an diesem Punkt einige Nachschlagewerke genannt werden und das wichtigste kurz erläutert. Alexander Zingrich

17 5.1 Processing.org Unter Processing.org finden sich zahlreiche Tutorials und Anleitungen zu jeglichen Themen. Man wird sehr häufig fündig und findet innerhalb von kurzer Zeit das was man sucht LearningProcessing.com Learningprocessing ist eine private Seite welche Tutorials, Übungen und Beispiele anbietet rund ums Thema Processing Google (!) Fast immer lässt sich durch simples googeln die Antwort auf fast jede Frage finden. Einfach kurz, aber prägnant eingeben, was genau man sucht, möglicherweise eine Beschreibung davon und man wird in kurzer Zeit fündig. Alexander Zingrich

18 6. Abbildungsverzeichnis Abbildung 1 - Processing... 3 Abbildung 2 - Aufbau... 4 Abbildung 3 Speichern... 5 Abbildung 4 Öffnen... 5 Abbildung 5 Exportieren... 5 Abbildung 6 - Skript starten... 6 Abbildung 7 - Skript stoppen... 6 Abbildung 8 Suchfunktion... 7 Abbildung 9 - Schrift ändern... 7 Abbildung 10 Koordinatensystem... 8 Abbildung 11 - Linie Abbildung 12 - Ellipse Abbildung 13 Viereck Abbildung 14 Rectangle Abbildung 15 - RGB Abbildung 16 Hintergrund Abbildung 17 Objektfarbe Abbildung 18 Rahmenfarbe Alexander Zingrich