{"id":3567,"date":"2012-01-02T16:02:16","date_gmt":"2012-01-02T15:02:16","guid":{"rendered":"https:\/\/www.herr-rau.de\/wordpress\/?p=3567"},"modified":"2023-05-24T10:15:57","modified_gmt":"2023-05-24T08:15:57","slug":"processing","status":"publish","type":"post","link":"https:\/\/www.herr-rau.de\/wordpress\/2012\/01\/processing.htm","title":{"rendered":"Processing"},"content":{"rendered":"
(8 Kommentare.<\/a>)<\/small> <\/div>\n

Bei Zur\u00fcck in die Schule<\/a>: gefunden: Processing<\/a>, eine Java-Programmierumgebung, mit der man Bilder erzeugen kann. Processing ist eine Lernumgebung und Einf\u00fchrung in das (Java-)Programmieren. Man kann damit einerseits voll objektorientiert schreiben, andererseits kann man genauso gut ohne Objektkrams die vorhanden Methoden benutzen, deren \u00dcberbau wundersch\u00f6n transparent ist.<\/p>\n\n\n\n

(Fu\u00dfnote: Transparent hei\u00dft \u00fcberall anders soviel wie: „Durchsichtig, so dass man ins Innere blicken und die Zusammenh\u00e4nge verstehen kann.“ In der Informatik hei\u00dft transparent allerdings: „Durchsichtig, so dass man hindurchschaut und nichts sieht, also quasi unsichtbar und vor leicht zu verwirrenden Augen verborgen.“)<\/small><\/p>\n\n\n\n

Man kann mit Processing neue Bilder zeichnen oder bestehende Bilder bearbeiten. Das kann man statisch machen oder dynamisch: dann werden daraus bewegte Bilder, entweder automatisch oder durch den Benutzer mit Maus oder Tastatur gesteuert. So kann man auch ganze Simulationen entwerfen, wenn man m\u00f6chte. Man kann sich auch eine Methode schreiben, um die ausgegebenen Bilder zu speichern, die sieht so aus:<\/p>\n\n\n\n

void mousePressed() {\n  save(\"bild.jpg\");\n}<\/code><\/pre>\n\n\n\n
Viel einfacher geht es wirklich nicht.<\/p>\n\n\n\n
Ich wollte aber Filter schreiben, so wie man sie aus Bildbearbeitungsprogrammen kennt. Hier sind ein paar davon. Die Vorgehensweise ist meist die: Man l\u00e4dt erst einmal das Originalbild in den Speicher und legt eine – noch leere – Zeichenfl\u00e4che im gleichen Format an. Dann schaut man sich der Reihe nach jeden Pixel des Ursprungsbildes an, merkt sich dessen Farbe (bzw. den Rot-, Gr\u00fcn-, Blauanteil davon), ver\u00e4ndert diese Farbe, und schreibt an dieselbe Position auf der Zeichenfl\u00e4che einen Pixel mit der neuen Farbe.<\/p>\n\n\n\n
1. Hier ein einfaches Weichzeichnen, das erste Bild ist das Original:<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Man \u00e4ndert dabei jede Farbe so, dass man sich von einem Pixel und allen seinen umliegenden Nachbarpixeln (im ersten Beispiel nur die direkt umliegenden, im zweiten auch die in etwas weiterem Abstand) die Durchschnittsfarbe ausrechnet und diese dem Pixel zuweist. Das macht man mit allen Pixeln so und heraus kommt eine Weichzeichnung.<\/p>\n\n\n\n
2. Hier eine Gammakorrektur. Die dient zu einer differenzierten Aufhellung oder Abdunklung von Bildern. Dabei wird nicht jeder Pixel im gleichen Ma\u00df heller oder dunkler gemacht, sondern es werden zum Beispiel die dunklen Pixel mehr aufgehellt als die (ja eh schon hellen) helleren. Im ersten Bild mit gamma=0.5, im zweiten gamma = 1.5:<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Hier sind einem die Nachbarn egal. Man wendet einfach auf den Rot-, Gr\u00fcn-, Blauteil jedes Pixels die \u00fcberraschend einfache Funktion an:<\/p>\n\n\n\n
farbeneu = (farbealt\/255)gamma<\/sup> * 255<\/code><\/pre>\n\n\n\n
Die Zahl 255 kommt daher, weil es f\u00fcr jeden Farbton 255 M\u00f6glichkeiten gibt. Der Wert des urspr\u00fcnglichen Blauanteils (von 0-255) wird durch 255 geteilt, womit man diesen Anteil auf eine Zahl zwischen 0 und 1 normalisiert hat. Das wird dann mit dem Gammawert potenziert (bzw. je nach Definition auch dessen Kehrwert) und dann mit dem letzten Faktor wieder auf den urspr\u00fcnglichen Raum (zwischen 0 und 255) gestreckt.<\/p>\n\n\n\n
3. Gemischte weitere Filter:<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Der erste ist ein einfaches Sch\u00e4rfen: Man schaut sich wieder die Rot-, Gr\u00fcn- Blauwerte eines Pixels und seiner Nachbarn an und errechnet daraus wieder einen Durchschnitt. Allerdings werden vor der Berechnung die Nachbarn und der Pixel selber noch gewichtet: die Werte der 8 unmittelbaren Nachbarn werden zum Beispiel jeweils um 1 reduziert, die des zentralen Pixels um 9 erh\u00f6ht – die Durchschnittswerte bleiben also gleich (das Bild wird insgesamt nicht heller oder dunkler), aber mit Betonung des Zentrums.<\/p>\n\n\n\n
Der zweite zeichnet einfach an jede n-te Stelle des Bildes einen Kreis mit Durchmesser n von der Farbe des Pixels, der sich im Originalbild an dieser Stelle befindet.<\/p>\n\n\n\n
Der dritte ist ein Mosaik. Man k\u00f6nnte zwar, \u00e4hnlich wie bei den Ellipsen, an jede n-te Stelle des Bildes ein Quadrat zeichnen, aber so wollte ich das nicht machen. Jeder Pixel sollte extra gezeichnet werden. Ich machte mir dazu folgende Skizze:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Der erste Pixel in der Reihe (in der 0-Spalte) sei zum Beispiel rot. Die beiden Pixel rechts daneben sollten dessen Farbe annehmen. Die Pixel in den Spalten 3-7 sollten die Farbe des Pixels in Spalte 5 annehmen, und so weiter. (F\u00fcr die y-Koordinate analog, das habe ich bald gemerkt.)
\"\"
Weil ich in Mathe nicht gut bin, zeichnete ich mir eine Tabelle auf: links die Position des Pixels, rechts die Position des Pixels, dessen Farbe angenommen werden sollte. f(linkeSpalte) = rechteSpalte. Der Rest ist einfach nur Rechnen. Mathek\u00f6nner sehen das durch \u00dcberlegen, ich habe halt so lange herumgepfuscht, bis ich die entsprechende Funktion hatte. Die musste ich dann noch etwas verallgemeinern, damit sie nicht nur f\u00fcr die Rechnung mit den Mosaiksteinchen von Seitenl\u00e4nge 5, sondern f\u00fcr beliebige Seitenl\u00e4ngen gilt. Sieht dann so aus:<\/p>\n\n\n\n
xZentrumspixel = (x+size\/2)\/size*size bzw.\nyZentrumspixel = (y+size\/2)\/size*size,<\/code><\/pre>\n\n\n\n
wobei size<\/code> die Seitenl\u00e4nge des Mosaiksteins ist. Und nein, das \/size<\/code> und *size<\/code> kann man nicht einfach k\u00fcrzen, da x<\/code> eine Ganzzahl und die Divison in diesem Fall eine Ganzzahldivision ist – es wird immer abgerundet, der Rest verworfen.<\/p>\n\n\n\n
Processing gibt’s f\u00fcr alle g\u00e4ngigen Betriebssystem, l\u00e4uft unter Windows auch ohne Installationsrechte. Tutorials gibt es dort auch ein paar.<\/p>\n\n\n\n
***<\/p>\n\n\n\n
Anhang: So sieht ein vollst\u00e4ndiger Sketch<\/em> in Processing aus. Java-Code, ohne Klassendefinitionen, besteht aus 1 Attribut und den Methoden setup()<\/code> und draw()<\/code> und der Berechnungsmethode f\u00fcr das Mosaik, mosaik()<\/code>.<\/p>\n\n\n\n
PImage img; \/\/Platz fuer das im Speicher gehaltene Bild\n\n\/\/einmaliges Aufrufen am Anfang\nvoid setup() {\n  img = loadImage(\"test.jpg\"); \/\/Laden des Bildes\n  size(img.width, img.height); \/\/Groesse der Zeichenflaeche\n}\n\n\/\/das eigentliche Zeichnen\nvoid draw() {\n  \/\/Pixel-Feld zur Verfuegung stellen\n  loadPixels();\n  \/\/Zaehlschleife fuer alle Pixel mit x- und y-Koordinate\n  for (int x = 0; x < img.width; x++) {\n    for (int y = 0; y < img.height; y++ ) {\n      \/\/Berechnen der neuen Farbe - hier koennte man auch andere Methoden aufrufen\n      color c = mosaik(x, y, 9);\n      \/\/Umrechnen der Koordinaten in Index des eindimensionalen Pixel-Felds\n      int loc = x + y*img.width;\n      \/\/Aendern des Pixels im Pixel-Feld\n      pixels[loc] = c;\n    }\n  }\n  \/\/Zeichnen aller Pixel\n  updatePixels();\n}\n\n\n\/\/Methode zur Farbberechnung beim Mosaik\ncolor mosaik(int x, int y, int groesse) {\n  \/\/Koordinaten des Zentrums ermitteln\n  int xZentrum = (x+groesse\/2)\/groesse*groesse;\n  int yZentrum = (y+groesse\/2)\/groesse*groesse;\n\n  \/\/Umrechnen der Koordinaten in Index des eindimensionalen Pixel-Felds\n  int loc = xZentrum + yZentrum*img.width;\n  \n  \/\/sicher stellen, dass Bildgrenzen nicht ueberschritten werden\n loc = constrain(loc, 0, img.pixels.length-1);\n\n  \/\/Rot-, Gruen-, Blauanteile des Zentrumspixels speichern\n  float rtotal = red(img.pixels[loc]);\n  float gtotal = green(img.pixels[loc]);\n  float btotal = blue(img.pixels[loc]);           \n\n  \/\/ Rueckgabe der neuen Farbe\n  return color(rtotal, gtotal, btotal);\n}\n<\/code><\/pre>\n\n\n\n
Nachtrag: Sch\u00f6ne weitere Sachen zu Processing gibt es hier:<\/p>\n\n\n\n